You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: "Learn how to build websites with HTML, CSS, and start exploring JavaScript fundamentals.",
23
+
gradeLevel: "Grades 8-9",
24
+
duration: "8 weeks",
25
+
topics: [
26
+
{name: "HTML structure",completed: true},
27
+
{name: "CSS styling",completed: true},
28
+
{name: "JavaScript basics",completed: false}
29
+
]
30
+
},
31
+
{
32
+
id: "advanced",
33
+
title: "Python & Data Science",
34
+
description: "Master Python programming and explore data analysis, visualization and machine learning basics.",
35
+
gradeLevel: "Grades 10-12",
36
+
duration: "12 weeks",
37
+
topics: [
38
+
{name: "Python fundamentals",completed: true},
39
+
{name: "Data analysis with pandas",completed: true},
40
+
{name: "ML introduction",completed: false}
41
+
]
42
+
}
43
+
];
44
+
45
+
// Data for benefits
46
+
constbenefits=[
47
+
{
48
+
id: "problem-solving",
49
+
title: "Problem-Solving Skills",
50
+
description: "Coding teaches you to break down complex problems into manageable parts and develop logical thinking.",
51
+
icon: "🧠"
52
+
},
53
+
{
54
+
id: "career",
55
+
title: "Career Opportunities",
56
+
description: "Technology jobs are growing rapidly. Start early to build skills that will be in high demand when you graduate.",
57
+
icon: "💼"
58
+
},
59
+
{
60
+
id: "creativity",
61
+
title: "Creativity & Innovation",
62
+
description: "Coding allows you to create anything you can imagine, from games and apps to solutions for real-world problems.",
63
+
icon: "💡"
64
+
},
65
+
{
66
+
id: "collaboration",
67
+
title: "Collaboration Skills",
68
+
description: "Learn to work effectively in teams, share ideas, and build projects together—just like professional developers do.",
69
+
icon: "🔗"
70
+
}
71
+
];
72
+
73
+
// Data for how it works steps
74
+
conststeps=[
75
+
{
76
+
id: 1,
77
+
title: "Choose Your Path",
78
+
description: "Select a learning roadmap based on your grade level and interests. Each path is designed to build skills progressively."
79
+
},
80
+
{
81
+
id: 2,
82
+
title: "Learn Through Practice",
83
+
description: "Complete interactive lessons with hands-on coding exercises. Practice what you learn with real-time feedback."
84
+
},
85
+
{
86
+
id: 3,
87
+
title: "Build Projects",
88
+
description: "Apply your knowledge by creating your own projects. Showcase your work and get feedback from peers."
89
+
},
90
+
{
91
+
id: 4,
92
+
title: "Track Your Progress",
93
+
description: "Monitor your development with achievement badges and progress reports that show how far you've come."
94
+
}
95
+
];
96
+
97
+
// Data for testimonials
98
+
consttestimonials=[
99
+
{
100
+
id: "1",
101
+
name: "Priya S.",
102
+
grade: "Grade 8",
103
+
location: "Delhi",
104
+
stars: 5,
105
+
comment: "I never thought I could build my own website at 13, but CodeRoot's step-by-step roadmap made it possible! I've even started helping my friends learn coding too."
106
+
},
107
+
{
108
+
id: "2",
109
+
name: "Arjun K.",
110
+
grade: "Grade 11",
111
+
location: "Mumbai",
112
+
stars: 4.5,
113
+
comment: "The Python & Data Science roadmap helped me create a climate analysis project that won first place at the national science fair. The skills I learned are incredible!"
114
+
},
115
+
{
116
+
id: "3",
117
+
name: "Zara M.",
118
+
grade: "Grade 7",
119
+
location: "Bangalore",
120
+
stars: 5,
121
+
comment: "I started with block programming and now I'm building games in Scratch! The way CodeRoot explains concepts makes coding fun and not intimidating at all."
122
+
}
123
+
];
124
+
125
+
return(
126
+
<divclassName="App">
127
+
{/* Navigation */}
128
+
<headerclassName="navbar">
129
+
<divclassName="container">
130
+
<divclassName="logo">
131
+
<divclassName="logo-icon"></></div>
132
+
<spanclassName="logo-text">CodeRoot</span>
133
+
</div>
134
+
<navclassName="nav-links">
135
+
<ahref="#"className="active">Home</a>
136
+
<ahref="#">About</a>
137
+
<ahref="#">Practice</a>
138
+
<ahref="#">Roadmap</a>
139
+
<ahref="#">Explore</a>
140
+
<ahref="#">Profile</a>
141
+
</nav>
142
+
<divclassName="auth-buttons">
143
+
<buttonclassName="btn-link">Login</button>
144
+
<buttonclassName="btn-primary">Sign Up</button>
145
+
</div>
146
+
<buttonclassName="mobile-menu-button">
147
+
<span>☰</span>
148
+
</button>
149
+
</div>
150
+
</header>
151
+
152
+
{/* Hero Section */}
153
+
<sectionclassName="hero">
154
+
<divclassName="container">
155
+
<divclassName="hero-content">
156
+
<h1>Start Your Coding Journey Today</h1>
157
+
<p>Follow our structured roadmaps designed for students from 6th to 12th grade. Learn to code at your own pace with interactive lessons.</p>
<ahref="#"className="link-arrow">View all roadmaps →</a>
201
+
</div>
202
+
</div>
203
+
</section>
204
+
205
+
{/* Benefits Section */}
206
+
<sectionclassName="benefits">
207
+
<divclassName="container">
208
+
<divclassName="section-header">
209
+
<h2>Why Learn to Code?</h2>
210
+
<p>Coding skills open doors to opportunities and develop critical thinking abilities</p>
211
+
</div>
212
+
213
+
<divclassName="benefit-cards">
214
+
{benefits.map(benefit=>(
215
+
<divkey={benefit.id}className="benefit-card">
216
+
<divclassName="benefit-icon">{benefit.icon}</div>
217
+
<h3>{benefit.title}</h3>
218
+
<p>{benefit.description}</p>
219
+
</div>
220
+
))}
221
+
</div>
222
+
</div>
223
+
</section>
224
+
225
+
{/* How It Works Section */}
226
+
<sectionclassName="how-it-works">
227
+
<divclassName="container">
228
+
<divclassName="section-header">
229
+
<h2>How It Works</h2>
230
+
<p>Our step-by-step approach makes learning to code simple and engaging</p>
231
+
</div>
232
+
233
+
<divclassName="steps-container">
234
+
<divclassName="steps">
235
+
{steps.map(step=>(
236
+
<divkey={step.id}className="step">
237
+
<divclassName="step-number">{step.id}</div>
238
+
<divclassName="step-content">
239
+
<h3>{step.title}</h3>
240
+
<p>{step.description}</p>
241
+
</div>
242
+
</div>
243
+
))}
244
+
</div>
245
+
<divclassName="steps-image">
246
+
<imgsrc="https://images.unsplash.com/photo-1544256718-3bcf237f3974?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"alt="Students working on coding projects"/>
247
+
</div>
248
+
</div>
249
+
</div>
250
+
</section>
251
+
252
+
{/* Testimonials Section */}
253
+
<sectionclassName="testimonials">
254
+
<divclassName="container">
255
+
<divclassName="section-header">
256
+
<h2>Student Success Stories</h2>
257
+
<p>Hear from students who have followed our roadmaps and achieved their coding goals</p>
0 commit comments