Skip to content

Commit c2610b0

Browse files
codee-wizardcodee-wizard
committed
navbar&footer
1 parent 3701e4c commit c2610b0

File tree

3 files changed

+110
-98
lines changed

3 files changed

+110
-98
lines changed

‎src/components/Footer.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
3+
function Footer() {
4+
return (
5+
<footer className="footer">
6+
<div className="container">
7+
<div className="footer-sections">
8+
<div className="footer-about">
9+
<div className="logo">
10+
<div className="logo-icon light">&lt;/&gt;</div>
11+
<span className="logo-text">CodeRoot</span>
12+
</div>
13+
<p>Empowering students with coding skills for the future, one step at a time.</p>
14+
<div className="social-links">
15+
<a href="#" className="social-icon">f</a>
16+
<a href="#" className="social-icon">t</a>
17+
<a href="#" className="social-icon">in</a>
18+
<a href="#" className="social-icon">yt</a>
19+
</div>
20+
</div>
21+
22+
<div className="footer-links">
23+
<h3>Quick Links</h3>
24+
<ul>
25+
<li><a href="#">Home</a></li>
26+
<li><a href="#">About Us</a></li>
27+
<li><a href="#">Roadmaps</a></li>
28+
<li><a href="#">Practice</a></li>
29+
<li><a href="#">Explore</a></li>
30+
</ul>
31+
</div>
32+
33+
<div className="footer-links">
34+
<h3>Resources</h3>
35+
<ul>
36+
<li><a href="#">Coding Guides</a></li>
37+
<li><a href="#">Project Ideas</a></li>
38+
<li><a href="#">Student Showcase</a></li>
39+
<li><a href="#">Parent Resources</a></li>
40+
<li><a href="#">Teacher Tools</a></li>
41+
</ul>
42+
</div>
43+
44+
<div className="footer-contact">
45+
<h3>Contact Us</h3>
46+
<ul>
47+
<li><a href="mailto:info@coderoot.edu">info@coderoot.edu</a></li>
48+
<li><a href="tel:+919876543210">+91 98765 43210</a></li>
49+
<li>123 Education Lane, Tech Park, Bengaluru, India</li>
50+
</ul>
51+
</div>
52+
</div>
53+
54+
<div className="footer-bottom">
55+
<p>&copy; {new Date().getFullYear()} CodeRoot. All rights reserved.</p>
56+
<div className="footer-legal">
57+
<a href="#">Privacy Policy</a>
58+
<a href="#">Terms of Service</a>
59+
<a href="#">Cookie Policy</a>
60+
</div>
61+
</div>
62+
</div>
63+
</footer>
64+
);
65+
}
66+
67+
export default Footer;

‎src/components/Navbar.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
function Navbar() {
5+
return (
6+
<header className="navbar">
7+
<div className="container">
8+
<div className="logo">
9+
<div className="logo-icon">&lt;/&gt;</div>
10+
<span className="logo-text">CodeRoot</span>
11+
</div>
12+
<nav className="nav-links">
13+
<a href="#" className="active">Home</a>
14+
<a href="#">About</a>
15+
<a href="#">Practice</a>
16+
<a href="#">Roadmap</a>
17+
<a href="#">Explore</a>
18+
<a href="#">Profile</a>
19+
</nav>
20+
<div className="auth-buttons">
21+
<button className="btn-link">Login</button>
22+
<button className="btn-primary">Sign Up</button>
23+
</div>
24+
<button className="mobile-menu-button">
25+
<span>☰</span>
26+
</button>
27+
</div>
28+
</header>
29+
);
30+
}
31+
32+
export default Navbar;

‎src/pages/Home.js‎

Lines changed: 11 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
2-
import
32

43
function App() {
5-
// Data for roadmaps
4+
// roadmaps section
65
const roadmaps = [
76
{
87
id: "beginner",
@@ -42,7 +41,7 @@ function App() {
4241
}
4342
];
4443

45-
// Data for benefits
44+
// benifits sec
4645
const benefits = [
4746
{
4847
id: "problem-solving",
@@ -70,7 +69,7 @@ function App() {
7069
}
7170
];
7271

73-
// Data for how it works steps
72+
// details
7473
const steps = [
7574
{
7675
id: 1,
@@ -94,7 +93,7 @@ function App() {
9493
}
9594
];
9695

97-
// Data for testimonials
96+
// people's feedback
9897
const testimonials = [
9998
{
10099
id: "1",
@@ -124,32 +123,7 @@ function App() {
124123

125124
return (
126125
<div className="App">
127-
{/* Navigation */}
128-
<header className="navbar">
129-
<div className="container">
130-
<div className="logo">
131-
<div className="logo-icon">&lt;/&gt;</div>
132-
<span className="logo-text">CodeRoot</span>
133-
</div>
134-
<nav className="nav-links">
135-
<a href="#" className="active">Home</a>
136-
<a href="#">About</a>
137-
<a href="#">Practice</a>
138-
<a href="#">Roadmap</a>
139-
<a href="#">Explore</a>
140-
<a href="#">Profile</a>
141-
</nav>
142-
<div className="auth-buttons">
143-
<button className="btn-link">Login</button>
144-
<button className="btn-primary">Sign Up</button>
145-
</div>
146-
<button className="mobile-menu-button">
147-
<span>☰</span>
148-
</button>
149-
</div>
150-
</header>
151-
152-
{/* Hero Section */}
126+
{/* main */}
153127
<section className="hero">
154128
<div className="container">
155129
<div className="hero-content">
@@ -166,7 +140,7 @@ function App() {
166140
</div>
167141
</section>
168142

169-
{/* Roadmaps Section */}
143+
{/* roadmap sec */}
170144
<section className="roadmaps">
171145
<div className="container">
172146
<div className="section-header">
@@ -222,7 +196,7 @@ function App() {
222196
</div>
223197
</section>
224198

225-
{/* How It Works Section */}
199+
{/* details sec */}
226200
<section className="how-it-works">
227201
<div className="container">
228202
<div className="section-header">
@@ -249,7 +223,7 @@ function App() {
249223
</div>
250224
</section>
251225

252-
{/* Testimonials Section */}
226+
{/* feedback sec */}
253227
<section className="testimonials">
254228
<div className="container">
255229
<div className="section-header">
@@ -278,7 +252,7 @@ function App() {
278252
</div>
279253
</section>
280254

281-
{/* CTA Section */}
255+
{/* banner sec */}
282256
<section className="cta">
283257
<div className="container">
284258
<h2>Ready to Begin Your Coding Journey?</h2>
@@ -288,69 +262,8 @@ function App() {
288262
<button className="btn-outline light">Explore Roadmaps</button>
289263
</div>
290264
</div>
291-
</section>
292-
293-
{/* Footer */}
294-
<footer className="footer">
295-
<div className="container">
296-
<div className="footer-sections">
297-
<div className="footer-about">
298-
<div className="logo">
299-
<div className="logo-icon light">&lt;/&gt;</div>
300-
<span className="logo-text">CodeRoot</span>
301-
</div>
302-
<p>Empowering students with coding skills for the future, one step at a time.</p>
303-
<div className="social-links">
304-
<a href="#" className="social-icon">f</a>
305-
<a href="#" className="social-icon">t</a>
306-
<a href="#" className="social-icon">in</a>
307-
<a href="#" className="social-icon">yt</a>
308-
</div>
309-
</div>
310-
311-
<div className="footer-links">
312-
<h3>Quick Links</h3>
313-
<ul>
314-
<li><a href="#">Home</a></li>
315-
<li><a href="#">About Us</a></li>
316-
<li><a href="#">Roadmaps</a></li>
317-
<li><a href="#">Practice</a></li>
318-
<li><a href="#">Explore</a></li>
319-
</ul>
320-
</div>
321-
322-
<div className="footer-links">
323-
<h3>Resources</h3>
324-
<ul>
325-
<li><a href="#">Coding Guides</a></li>
326-
<li><a href="#">Project Ideas</a></li>
327-
<li><a href="#">Student Showcase</a></li>
328-
<li><a href="#">Parent Resources</a></li>
329-
<li><a href="#">Teacher Tools</a></li>
330-
</ul>
331-
</div>
332-
333-
<div className="footer-contact">
334-
<h3>Contact Us</h3>
335-
<ul>
336-
<li><a href="mailto:info@coderoot.edu">info@coderoot.edu</a></li>
337-
<li><a href="tel:+919876543210">+91 98765 43210</a></li>
338-
<li>123 Education Lane, Tech Park, Bengaluru, India</li>
339-
</ul>
340-
</div>
341-
</div>
342-
343-
<div className="footer-bottom">
344-
<p>&copy; {new Date().getFullYear()} CodeRoot. All rights reserved.</p>
345-
<div className="footer-legal">
346-
<a href="#">Privacy Policy</a>
347-
<a href="#">Terms of Service</a>
348-
<a href="#">Cookie Policy</a>
349-
</div>
350-
</div>
351-
</div>
352-
</footer>
353-
</div>
265+
</section>
266+
</div>
354267
);
355268
}
356269

0 commit comments

Comments
 (0)