Skip to content

Commit f855b84

Browse files
ajay-dhangarajay-dhangar
committed
improve all compo for Home Page
1 parent 83a092c commit f855b84

13 files changed

Lines changed: 760 additions & 234 deletions

‎package-lock.json‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"raw-loader": "^4.0.2",
2626
"react": "^19.0.0",
2727
"react-dom": "^19.0.0",
28+
"react-icons": "^5.6.0",
2829
"react-simple-code-editor": "^0.14.1",
2930
"tailwind-merge": "^3.5.0"
3031
},

‎src/components/Community.tsx‎

Lines changed: 121 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,155 @@
1+
import React from 'react';
12
import { motion } from 'framer-motion';
2-
import { Users, GitFork, Star, Sparkles, Zap, Trophy } from 'lucide-react';
3+
import { Users, GitFork, Star, Sparkles, Zap, Trophy, Github, ExternalLink, Command } from 'lucide-react';
34
import Link from '@docusaurus/Link';
4-
import { PathLevel } from '../types';
55

6-
const pathfinderCards: Array<{
7-
level: PathLevel;
8-
icon: typeof Sparkles;
9-
description: string;
10-
topics: string[];
11-
color: string;
12-
}> = [
6+
const pathfinderCards = [
137
{
148
level: 'Beginner',
159
icon: Sparkles,
16-
description: 'Start your JavaScript journey with fundamentals',
17-
topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation', 'ES6+ Basics'],
18-
color: 'from-green-400 to-emerald-600',
10+
description: 'Start your JavaScript journey with fundamentals.',
11+
topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation'],
12+
color: '#10b981', // Emerald
13+
bg: 'from-emerald-500/10 to-transparent'
1914
},
2015
{
2116
level: 'Intermediate',
2217
icon: Zap,
23-
description: 'Level up with advanced concepts and patterns',
24-
topics: ['Async/Await', 'Closures', 'Prototypes', 'Design Patterns'],
25-
color: 'from-blue-400 to-cyan-600',
18+
description: 'Level up with advanced concepts and patterns.',
19+
topics: ['Async/Await', 'Closures', 'Design Patterns'],
20+
color: 'var(--ifm-color-primary)', // Blue
21+
bg: 'from-blue-500/10 to-transparent'
2622
},
2723
{
2824
level: 'Advanced',
2925
icon: Trophy,
30-
description: 'Master expert-level JavaScript techniques',
31-
topics: ['Performance Optimization', 'Build Tools', 'Testing', 'Architecture'],
32-
color: 'from-purple-400 to-pink-600',
26+
description: 'Master expert-level JavaScript techniques.',
27+
topics: ['Optimization', 'Architecture', 'Testing'],
28+
color: 'var(--accent)', // Yellow
29+
bg: 'from-[#f7df1e]/10 to-transparent'
3330
},
3431
];
3532

3633
const githubStats = [
37-
{ label: 'Stars', value: '15.2K', icon: Star },
38-
{ label: 'Contributors', value: '234', icon: Users },
39-
{ label: 'Forks', value: '3.8K', icon: GitFork },
34+
{ label: 'Stars', value: '15.2K', icon: Star, color: 'text-yellow-500' },
35+
{ label: 'Contributors', value: '234', icon: Users, color: 'text-blue-500' },
36+
{ label: 'Forks', value: '3.8K', icon: GitFork, color: 'text-purple-500' },
4037
];
4138

42-
export function Community() {
39+
export const Community: React.FC = () => {
4340
return (
44-
<div className="relative">
45-
<section className="py-20 px-4 sm:px-6 lg:px-8">
46-
<div className="max-w-7xl mx-auto">
41+
<section className="relative py-24 overflow-hidden">
42+
{/* Theme Grid Background */}
43+
<div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 -z-10" />
44+
45+
<div className="max-w-7xl mx-auto px-4">
46+
{/* Section Header */}
47+
<div className="text-center mb-20">
4748
<motion.div
4849
initial={{ opacity: 0, y: 20 }}
4950
whileInView={{ opacity: 1, y: 0 }}
5051
viewport={{ once: true }}
51-
transition={{ duration: 0.6 }}
52-
className="text-center mb-12"
52+
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"
5353
>
54-
<h2 className="text-4xl md:text-5xl font-bold mb-4">
55-
Join Our <span className="text-[var(--ifm-color-primary)]">Community</span>
56-
</h2>
57-
<p className="text-lg">
58-
Trusted by thousands of developers worldwide
59-
</p>
54+
<Command className="w-3 h-3" />
55+
<span>Project Stats</span>
6056
</motion.div>
57+
<h2 className="text-4xl md:text-6xl font-black mb-6">
58+
Join the <span className="text-gradient">Movement</span>
59+
</h2>
60+
<p className="text-xl text-[var(--text-secondary)] max-w-2xl mx-auto">
61+
Trusted by thousands of developers. We are building the world's most accessible JavaScript roadmap.
62+
</p>
63+
</div>
6164

62-
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
63-
{githubStats.map((stat, index) => {
64-
const Icon = stat.icon;
65-
return (
66-
<motion.div
67-
key={stat.label}
68-
initial={{ opacity: 0, scale: 0.9 }}
69-
whileInView={{ opacity: 1, scale: 1 }}
70-
viewport={{ once: true }}
71-
transition={{ duration: 0.4, delay: index * 0.1 }}
72-
className="p-8 rounded-2xl bg-[var(--bg-surface)] border border-white/10 text-center"
73-
>
74-
<Icon className="w-12 h-12 text-[var(--ifm-color-primary)] mx-auto mb-4" />
75-
<div className="text-4xl font-bold mb-2">{stat.value}</div>
76-
<div className="">{stat.label}</div>
77-
</motion.div>
78-
);
79-
})}
80-
</div>
65+
{/* GitHub Stats Row */}
66+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
67+
{githubStats.map((stat, idx) => (
68+
<motion.div
69+
key={stat.label}
70+
initial={{ opacity: 0, scale: 0.9 }}
71+
whileInView={{ opacity: 1, scale: 1 }}
72+
transition={{ delay: idx * 0.1 }}
73+
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"
74+
>
75+
<stat.icon className={`w-10 h-10 text-[var(--ifm-color-primary)] mb-4 transition-transform group-hover:scale-110`} />
76+
<div className="text-4xl font-black text-[var(--ifm-color-primary)] mb-2">{stat.value}</div>
77+
<div className="text-sm font-bold uppercase tracking-widest text-[var(--text-secondary)]">{stat.label}</div>
78+
</motion.div>
79+
))}
80+
</div>
8181

82-
<motion.div
83-
initial={{ opacity: 0, y: 20 }}
84-
whileInView={{ opacity: 1, y: 0 }}
85-
viewport={{ once: true }}
86-
transition={{ duration: 0.6 }}
87-
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"
88-
>
89-
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--accent)]/10 rounded-full blur-3xl" />
82+
{/* Pathfinder Grid */}
83+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
84+
{pathfinderCards.map((path) => (
85+
<div key={path.level} className="group relative">
86+
<div className={`absolute inset-0 bg-gradient-to-b ${path.bg} rounded-3xl -z-10`} />
87+
<div className="p-8 h-full rounded-3xl border border-white/10 dark:border-white/5 glass-effect flex flex-col">
88+
<div className="flex items-center justify-between mb-6">
89+
<div className="p-3 rounded-2xl bg-white/5 border border-white/10">
90+
<path.icon className="w-6 h-6" style={{ color: path.color }} />
91+
</div>
92+
<span className="text-xs font-black uppercase tracking-widest px-3 py-1 rounded-full border border-white/10">
93+
Level: {path.level}
94+
</span>
95+
</div>
96+
<h3 className="text-2xl font-bold mb-3">{path.level} Path</h3>
97+
<p className="text-[var(--text-secondary)] mb-6 flex-grow">{path.description}</p>
98+
99+
<ul className="space-y-2 mb-8">
100+
{path.topics.map(topic => (
101+
<li key={topic} className="flex items-center text-sm text-[var(--text-secondary)]">
102+
<div className="w-1 h-1 rounded-full mr-3" style={{ backgroundColor: path.color }} />
103+
{topic}
104+
</li>
105+
))}
106+
</ul>
90107

91-
<div className="relative text-center">
92-
<h3 className="text-3xl md:text-4xl font-bold mb-4">
93-
Open Source & Free Forever
94-
</h3>
95-
<p className="text-lg mb-8 max-w-2xl mx-auto">
96-
Built by the community, for the community. Contribute, learn, and grow
97-
together with developers from around the world.
98-
</p>
99-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
100-
<a
101-
href="https://github.com/javascript-mastery"
102-
target="_blank"
103-
rel="noopener noreferrer"
104-
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"
105-
>
106-
Contribute on GitHub
107-
</a>
108-
<Link
109-
to="#"
110-
className="px-8 py-4 border border-white rounded-lg font-semibold hover:bg-white/10 transition-all"
111-
>
112-
Browse Projects
113-
</Link>
108+
<button className="w-full py-3 rounded-xl font-bold text-sm border border-white/10 hover:bg-white hover:text-black transition-all">
109+
Start Track
110+
</button>
114111
</div>
115112
</div>
116-
</motion.div>
113+
))}
117114
</div>
118-
</section>
119-
</div>
115+
116+
{/* Call to Action Box */}
117+
<motion.div
118+
initial={{ opacity: 0, y: 30 }}
119+
whileInView={{ opacity: 1, y: 0 }}
120+
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"
121+
>
122+
<div className="bg-[var(--bg-surface)] rounded-[22px] p-10 md:p-16 relative overflow-hidden text-center">
123+
{/* Background Accent */}
124+
<div className="absolute top-0 right-0 w-96 h-96 bg-[var(--accent)]/10 rounded-full blur-[100px] -z-10" />
125+
126+
<h3 className="text-3xl md:text-5xl font-black mb-6">
127+
Open Source & <span className="text-[var(--ifm-color-primary)]">Free Forever</span>
128+
</h3>
129+
<p className="text-lg text-[var(--text-secondary)] mb-10 max-w-2xl mx-auto">
130+
Contribute your knowledge or learn from others. Our mission is to keep high-quality
131+
tech education accessible to every human on earth.
132+
</p>
133+
134+
<div className="flex flex-wrap ms:flex-col md:flex-row gap-4 justify-center">
135+
<Link
136+
href="https://github.com/javascript-mastery"
137+
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"
138+
>
139+
<Github className="w-5 h-5" />
140+
Contribute on GitHub
141+
</Link>
142+
<Link
143+
to="#"
144+
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"
145+
>
146+
Browse Projects
147+
<ExternalLink className="w-4 h-4" />
148+
</Link>
149+
</div>
150+
</div>
151+
</motion.div>
152+
</div>
153+
</section>
120154
);
121-
}
155+
}

‎src/components/FinalCTA.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import { Rocket, ArrowRight, Github, Sparkles, Star } from 'lucide-react';
4+
import Link from '@docusaurus/Link';
5+
6+
export const FinalCTA: React.FC = () => {
7+
return (
8+
<section className="relative py-24 px-4 overflow-hidden">
9+
{/* 1. Background Layering */}
10+
<div className="absolute inset-0 bg-grid-slate-200/50 dark:bg-grid-slate-800/50 -z-10" />
11+
<div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-surface)] via-transparent to-[var(--bg-surface)] -z-10" />
12+
13+
{/* 2. Central Glow Orb */}
14+
<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" />
15+
16+
<div className="max-w-4xl mx-auto">
17+
<motion.div
18+
initial={{ opacity: 0, y: 40 }}
19+
whileInView={{ opacity: 1, y: 0 }}
20+
viewport={{ once: true }}
21+
className="relative glass-effect p-12 md:p-20 rounded-[3rem] border border-white/10 text-center overflow-hidden shadow-2xl"
22+
>
23+
{/* Decorative Corner Icons */}
24+
<Sparkles className="absolute top-8 left-8 text-[var(--accent)] opacity-20 w-8 h-8" />
25+
<Star className="absolute bottom-8 right-8 text-[var(--ifm-color-primary)] opacity-20 w-8 h-8" />
26+
27+
<div className="relative z-10 flex flex-col items-center">
28+
{/* Animated Rocket Icon */}
29+
<motion.div
30+
animate={{ y: [0, -10, 0] }}
31+
transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
32+
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"
33+
>
34+
<Rocket size={40} className="text-black -rotate-12" />
35+
</motion.div>
36+
37+
<h2 className="text-4xl md:text-6xl font-black mb-6 tracking-tighter leading-tight">
38+
Ready to <span className="text-gradient">Ship Better</span> Code?
39+
</h2>
40+
41+
<p className="text-xl text-[var(--text-secondary)] mb-10 max-w-xl mx-auto text-balance">
42+
Join 15,000+ developers mastering the JavaScript ecosystem.
43+
The most comprehensive roadmap is just one click away.
44+
</p>
45+
46+
{/* Primary Action Buttons */}
47+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 w-full">
48+
<Link
49+
to="/docs/intro"
50+
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"
51+
>
52+
Start Learning Now
53+
<ArrowRight size={20} />
54+
</Link>
55+
56+
<a
57+
href="https://github.com/javascript-mastery"
58+
target="_blank"
59+
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"
60+
>
61+
<Github size={20} />
62+
Star on GitHub
63+
</a>
64+
</div>
65+
66+
{/* Micro-Social Proof */}
67+
<div className="mt-12 pt-8 border-t border-white/5 w-full">
68+
<p className="text-xs font-bold uppercase tracking-[0.3em] text-[var(--text-secondary)] opacity-50">
69+
100% Free • Open Source • Forever
70+
</p>
71+
</div>
72+
</div>
73+
74+
{/* Background Decorative "Code Snippets" */}
75+
<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">
76+
<pre>{`function master() {\n return "success";\n}`}</pre>
77+
</div>
78+
</motion.div>
79+
</div>
80+
</section>
81+
);
82+
};

0 commit comments

Comments
 (0)