Skip to content

improve all compo for Home Page #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ajay-dhangar merged 1 commit into from
Mar 25, 2026
Merged

improve all compo for Home Page #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"raw-loader": "^4.0.2",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.6.0",
"react-simple-code-editor": "^0.14.1",
"tailwind-merge": "^3.5.0"
},
Expand Down
208 changes: 121 additions & 87 deletions src/components/Community.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,121 +1,155 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Users, GitFork, Star, Sparkles, Zap, Trophy } from 'lucide-react';
import { Users, GitFork, Star, Sparkles, Zap, Trophy, Github, ExternalLink, Command } from 'lucide-react';
import Link from '@docusaurus/Link';
import { PathLevel } from '../types';

const pathfinderCards: Array<{
level: PathLevel;
icon: typeof Sparkles;
description: string;
topics: string[];
color: string;
}> = [
const pathfinderCards = [
{
level: 'Beginner',
icon: Sparkles,
description: 'Start your JavaScript journey with fundamentals',
topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation', 'ES6+ Basics'],
color: 'from-green-400 to-emerald-600',
description: 'Start your JavaScript journey with fundamentals.',
topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation'],
color: '#10b981', // Emerald
bg: 'from-emerald-500/10 to-transparent'
},
{
level: 'Intermediate',
icon: Zap,
description: 'Level up with advanced concepts and patterns',
topics: ['Async/Await', 'Closures', 'Prototypes', 'Design Patterns'],
color: 'from-blue-400 to-cyan-600',
description: 'Level up with advanced concepts and patterns.',
topics: ['Async/Await', 'Closures', 'Design Patterns'],
color: 'var(--ifm-color-primary)', // Blue
bg: 'from-blue-500/10 to-transparent'
},
{
level: 'Advanced',
icon: Trophy,
description: 'Master expert-level JavaScript techniques',
topics: ['Performance Optimization', 'Build Tools', 'Testing', 'Architecture'],
color: 'from-purple-400 to-pink-600',
description: 'Master expert-level JavaScript techniques.',
topics: ['Optimization', 'Architecture', 'Testing'],
color: 'var(--accent)', // Yellow
bg: 'from-[#f7df1e]/10 to-transparent'
},
];

const githubStats = [
{ label: 'Stars', value: '15.2K', icon: Star },
{ label: 'Contributors', value: '234', icon: Users },
{ label: 'Forks', value: '3.8K', icon: GitFork },
{ label: 'Stars', value: '15.2K', icon: Star, color: 'text-yellow-500' },
{ label: 'Contributors', value: '234', icon: Users, color: 'text-blue-500' },
{ label: 'Forks', value: '3.8K', icon: GitFork, color: 'text-purple-500' },
];

export function Community() {
export const Community: React.FC = () => {
return (
<div className="relative">
<section className="py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
<section className="relative py-24 overflow-hidden">
{/* Theme Grid Background */}
<div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 -z-10" />

<div className="max-w-7xl mx-auto px-4">
{/* Section Header */}
<div className="text-center mb-20">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-center mb-12"
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-xs font-bold uppercase tracking-widest mb-4"
>
<h2 className="text-4xl md:text-5xl font-bold mb-4">
Join Our <span className="text-[var(--ifm-color-primary)]">Community</span>
</h2>
<p className="text-lg">
Trusted by thousands of developers worldwide
</p>
<Command className="w-3 h-3" />
<span>Project Stats</span>
</motion.div>
<h2 className="text-4xl md:text-6xl font-black mb-6">
Join the <span className="text-gradient">Movement</span>
</h2>
<p className="text-xl text-[var(--text-secondary)] max-w-2xl mx-auto">
Trusted by thousands of developers. We are building the world's most accessible JavaScript roadmap.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
{githubStats.map((stat, index) => {
const Icon = stat.icon;
return (
<motion.div
key={stat.label}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: index * 0.1 }}
className="p-8 rounded-2xl bg-[var(--bg-surface)] border border-white/10 text-center"
>
<Icon className="w-12 h-12 text-[var(--ifm-color-primary)] mx-auto mb-4" />
<div className="text-4xl font-bold mb-2">{stat.value}</div>
<div className="">{stat.label}</div>
</motion.div>
);
})}
</div>
{/* GitHub Stats Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
{githubStats.map((stat, idx) => (
<motion.div
key={stat.label}
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ delay: idx * 0.1 }}
className="p-8 rounded-3xl glass-effect border border-white/10 dark:border-white/5 flex flex-col items-center group hover:border-[var(--ifm-color-primary)]/30 transition-colors"
>
<stat.icon className={`w-10 h-10 text-[var(--ifm-color-primary)] mb-4 transition-transform group-hover:scale-110`} />
<div className="text-4xl font-black text-[var(--ifm-color-primary)] mb-2">{stat.value}</div>
<div className="text-sm font-bold uppercase tracking-widest text-[var(--text-secondary)]">{stat.label}</div>
</motion.div>
))}
</div>

<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="relative p-12 rounded-3xl bg-gradient-to-r from-[var(--accent)]/20 to-[var(--accent)]/5 border border-[var(--accent)]/20 overflow-hidden"
>
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent)]/10 rounded-full blur-3xl" />
{/* Pathfinder Grid */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
{pathfinderCards.map((path) => (
<div key={path.level} className="group relative">
<div className={`absolute inset-0 bg-gradient-to-b ${path.bg} rounded-3xl -z-10`} />
<div className="p-8 h-full rounded-3xl border border-white/10 dark:border-white/5 glass-effect flex flex-col">
<div className="flex items-center justify-between mb-6">
<div className="p-3 rounded-2xl bg-white/5 border border-white/10">
<path.icon className="w-6 h-6" style={{ color: path.color }} />
</div>
<span className="text-xs font-black uppercase tracking-widest px-3 py-1 rounded-full border border-white/10">
Level: {path.level}
</span>
</div>
<h3 className="text-2xl font-bold mb-3">{path.level} Path</h3>
<p className="text-[var(--text-secondary)] mb-6 flex-grow">{path.description}</p>

<ul className="space-y-2 mb-8">
{path.topics.map(topic => (
<li key={topic} className="flex items-center text-sm text-[var(--text-secondary)]">
<div className="w-1 h-1 rounded-full mr-3" style={{ backgroundColor: path.color }} />
{topic}
</li>
))}
</ul>

<div className="relative text-center">
<h3 className="text-3xl md:text-4xl font-bold mb-4">
Open Source & Free Forever
</h3>
<p className="text-lg mb-8 max-w-2xl mx-auto">
Built by the community, for the community. Contribute, learn, and grow
together with developers from around the world.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="https://github.com/javascript-mastery"
target="_blank"
rel="noopener noreferrer"
className="px-8 py-4 bg-[var(--ifm-color-primary)] text-white rounded-lg font-semibold hover:bg-[var(--ifm-color-primary)] hover:text-white/50 transition-all"
>
Contribute on GitHub
</a>
<Link
to="#"
className="px-8 py-4 border border-white rounded-lg font-semibold hover:bg-white/10 transition-all"
>
Browse Projects
</Link>
<button className="w-full py-3 rounded-xl font-bold text-sm border border-white/10 hover:bg-white hover:text-black transition-all">
Start Track
</button>
</div>
</div>
</motion.div>
))}
</div>
</section>
</div>

{/* Call to Action Box */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
className="relative p-1 rounded-3xl bg-gradient-to-r from-[var(--ifm-color-primary)] via-[var(--accent)] to-[var(--ifm-color-primary)] shadow-2xl"
>
<div className="bg-[var(--bg-surface)] rounded-[22px] p-10 md:p-16 relative overflow-hidden text-center">
{/* Background Accent */}
<div className="absolute top-0 right-0 w-96 h-96 bg-[var(--accent)]/10 rounded-full blur-[100px] -z-10" />

<h3 className="text-3xl md:text-5xl font-black mb-6">
Open Source & <span className="text-[var(--ifm-color-primary)]">Free Forever</span>
</h3>
<p className="text-lg text-[var(--text-secondary)] mb-10 max-w-2xl mx-auto">
Contribute your knowledge or learn from others. Our mission is to keep high-quality
tech education accessible to every human on earth.
</p>

<div className="flex flex-wrap ms:flex-col md:flex-row gap-4 justify-center">
<Link
href="https://github.com/javascript-mastery"
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-xl font-bold transition-transform hover:-translate-y-1"
>
<Github className="w-5 h-5" />
Contribute on GitHub
</Link>
<Link
to="#"
className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-200 dark:border-slate-800 rounded-xl font-bold hover:bg-slate-50 dark:hover:bg-slate-900 transition-all"
>
Browse Projects
<ExternalLink className="w-4 h-4" />
</Link>
</div>
</div>
</motion.div>
</div>
</section>
);
}
}
82 changes: 82 additions & 0 deletions src/components/FinalCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Rocket, ArrowRight, Github, Sparkles, Star } from 'lucide-react';
import Link from '@docusaurus/Link';

export const FinalCTA: React.FC = () => {
return (
<section className="relative py-24 px-4 overflow-hidden">
{/* 1. Background Layering */}
<div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 -z-10" />
<div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-surface)] via-transparent to-[var(--bg-surface)] -z-10" />

{/* 2. Central Glow Orb */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-[var(--accent)] opacity-20 blur-[120px] rounded-full -z-10 animate-pulse" />

<div className="max-w-4xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="relative glass-effect p-12 md:p-20 rounded-[3rem] border border-white/10 text-center overflow-hidden shadow-2xl"
>
{/* Decorative Corner Icons */}
<Sparkles className="absolute top-8 left-8 text-[var(--accent)] opacity-20 w-8 h-8" />
<Star className="absolute bottom-8 right-8 text-[var(--ifm-color-primary)] opacity-20 w-8 h-8" />

<div className="relative z-10 flex flex-col items-center">
{/* Animated Rocket Icon */}
<motion.div
animate={{ y: [0, -10, 0] }}
transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
className="w-20 h-20 bg-gradient-to-br from-[var(--accent)] to-orange-400 rounded-3xl flex items-center justify-center shadow-[0_0_30px_rgba(247,223,30,0.4)] mb-8 rotate-12"
>
<Rocket size={40} className="text-black -rotate-12" />
</motion.div>

<h2 className="text-4xl md:text-6xl font-black mb-6 tracking-tighter leading-tight">
Ready to <span className="text-gradient">Ship Better</span> Code?
</h2>

<p className="text-xl text-[var(--text-secondary)] mb-10 max-w-xl mx-auto text-balance">
Join 15,000+ developers mastering the JavaScript ecosystem.
The most comprehensive roadmap is just one click away.
</p>

{/* Primary Action Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full">
<Link
to="/docs/intro"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-10 py-5 bg-[var(--ifm-color-primary)] text-white rounded-2xl font-black text-lg transition-all hover:scale-105 hover:shadow-[0_0_25px_rgba(59,130,246,0.5)] active:scale-95 no-underline hover:text-white"
>
Start Learning Now
<ArrowRight size={20} />
</Link>

<a
href="https://github.com/javascript-mastery"
target="_blank"
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-10 py-5 bg-black dark:bg-white text-white dark:text-black rounded-2xl font-black text-lg transition-all hover:bg-slate-900 dark:hover:bg-slate-100 active:scale-95 no-underline"
>
<Github size={20} />
Star on GitHub
</a>
</div>

{/* Micro-Social Proof */}
<div className="mt-12 pt-8 border-t border-white/5 w-full">
<p className="text-xs font-bold uppercase tracking-[0.3em] text-[var(--text-secondary)] opacity-50">
100% Free • Open Source • Forever
</p>
</div>
</div>

{/* Background Decorative "Code Snippets" */}
<div className="absolute -bottom-10 -left-10 opacity-5 font-mono text-sm text-left rotate-12 select-none pointer-events-none hidden md:block">
<pre>{`function master() {\n return "success";\n}`}</pre>
</div>
</motion.div>
</div>
</section>
);
};
Loading
Loading