Skip to content

Commit 61564ee

Browse files
tarone-salonitarone-saloni
committed
Add the main dhas
Signed-off-by: Saloni Tarone <taronesaloni@gmail.com>
1 parent cd26f35 commit 61564ee

4 files changed

Lines changed: 312 additions & 5 deletions

File tree

‎client/src/App.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AuthProvider, useAuth } from "./context/AuthContext";
55
import ProtectedRoutes from "./routes/ProtectedRoutes";
66
import PublicRoutes from "./routes/PublicRoutes";
77
import ThemeApplier from "./theme/ThemeApplier";
8+
import Mainpage from "./pages/Mainpage";
89

910
function AppRoutes() {
1011
const { user } = useAuth();

‎client/src/components/Navbar.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@ function Navbar({ showBack }) {
194194
? user.role === "teacher"
195195
? "/teacher-dashboard"
196196
: "/student-dashboard"
197-
: "/signin",
197+
: "/",
198198
)
199199
}
200200
className="flex items-center gap-2 sm:gap-3 no-underline min-w-0 group bg-transparent border-none cursor-pointer
@@ -581,14 +581,14 @@ function Navbar({ showBack }) {
581581
/* GUEST / NOT AUTHENTICATED SECTION */
582582
<>
583583
<button
584-
onClick={() => navigate("/signin")}
584+
onClick={() => navigate("/")}
585585
className="hidden sm:flex px-4 py-2 rounded-xl text-sm font-semibold
586586
border border-[var(--border)]/50 text-[var(--text)] glass
587587
hover:border-[var(--accent)]/40 hover:bg-[var(--accent)]/8
588588
hover:shadow-[0_4px_16px_-4px_var(--accent)]
589589
transition-all duration-300 cursor-pointer active:scale-95"
590590
>
591-
Sign In
591+
Home
592592
</button>
593593

594594
<button

‎client/src/pages/Mainpage.jsx‎

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
import { useState, useEffect } from "react";
2+
import { useNavigate } from "react-router-dom";
3+
import Navbar from "../components/Navbar";
4+
import Footer from "../components/Footer";
5+
6+
const features = [
7+
{
8+
icon: (
9+
<svg
10+
viewBox="0 0 24 24"
11+
fill="none"
12+
stroke="currentColor"
13+
strokeWidth="1.8"
14+
width="28"
15+
height="28"
16+
>
17+
<path d="M12 2L2 7l10 5 10-5-10-5z" />
18+
<path d="M2 17l10 5 10-5" />
19+
<path d="M2 12l10 5 10-5" />
20+
</svg>
21+
),
22+
title: "Manage courses, assignments and quizzes seamlessly",
23+
desc: "Empower students to efficiently handle all academic tasks.",
24+
},
25+
{
26+
icon: (
27+
<svg
28+
viewBox="0 0 24 24"
29+
fill="none"
30+
stroke="currentColor"
31+
strokeWidth="1.8"
32+
width="28"
33+
height="28"
34+
>
35+
<circle cx="12" cy="8" r="4" />
36+
<path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
37+
</svg>
38+
),
39+
title: "Real time feedback and progress tracking",
40+
desc: "Monitor student growth and provide timely guidance and correction.",
41+
},
42+
{
43+
icon: (
44+
<svg
45+
viewBox="0 0 24 24"
46+
fill="none"
47+
stroke="currentColor"
48+
strokeWidth="1.8"
49+
width="28"
50+
height="28"
51+
>
52+
<rect x="3" y="3" width="18" height="14" rx="2" />
53+
<path d="M8 21h8M12 17v4" />
54+
</svg>
55+
),
56+
title: "Access a vast library of digital resources",
57+
desc: "Never miss deadlines with proactive notifications.",
58+
},
59+
{
60+
icon: (
61+
<svg
62+
viewBox="0 0 24 24"
63+
fill="none"
64+
stroke="currentColor"
65+
strokeWidth="1.8"
66+
width="28"
67+
height="28"
68+
>
69+
<path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
70+
</svg>
71+
),
72+
title: "Get certified and build your bright career",
73+
desc: "Designed to simplify instructional workflows and classroom.",
74+
},
75+
];
76+
77+
const detailedFeatures = [
78+
{
79+
icon: "🎓",
80+
title: "Interactive Learning Platform",
81+
desc: "Learn at your own pace with interactive courses, videos, and quizzes designed by industry experts.",
82+
},
83+
{
84+
icon: "👨‍🏫",
85+
title: "Expert Instructors",
86+
desc: "Learn from experienced professionals and industry leaders who bring real-world knowledge to every lesson.",
87+
},
88+
{
89+
icon: "📊",
90+
title: "Performance Analytics",
91+
desc: "Track your progress with detailed analytics and get personalized recommendations to improve.",
92+
},
93+
{
94+
icon: "🏆",
95+
title: "Certificates & Recognition",
96+
desc: "Earn recognized certificates upon course completion to boost your professional profile.",
97+
},
98+
{
99+
icon: "💬",
100+
title: "Community Support",
101+
desc: "Connect with peers, ask questions, and share knowledge in our vibrant learning community.",
102+
},
103+
{
104+
icon: "🔐",
105+
title: "Secure & Private",
106+
desc: "Your data is encrypted and protected. We prioritize your privacy and security at all times.",
107+
},
108+
];
109+
110+
export default function LearningHero() {
111+
const navigate = useNavigate();
112+
const [visible, setVisible] = useState(false);
113+
114+
useEffect(() => {
115+
const t = setTimeout(() => setVisible(true), 80);
116+
return () => clearTimeout(t);
117+
}, []);
118+
119+
return (
120+
<>
121+
<Navbar />
122+
123+
<div className="min-h-screen bg-[var(--bg)] text-[var(--text)] transition-colors duration-500 flex flex-col">
124+
{/* ── HERO SECTION ── */}
125+
<section className="flex flex-col lg:flex-row items-center justify-between gap-10 px-6 sm:px-10 lg:px-20 py-16 lg:py-24 flex-1">
126+
{/* LEFT: Text Content */}
127+
<div
128+
className={`w-full lg:max-w-xl transition-all duration-700 ease-out
129+
${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-7"}`}
130+
>
131+
{/* Eyebrow label */}
132+
<p className="text-emerald-600 dark:text-emerald-500 text-xs sm:text-sm font-semibold uppercase tracking-widest mb-4">
133+
Start your favourite course
134+
</p>
135+
136+
{/* Main heading */}
137+
<h1 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold text-[var(--text)] leading-snug mb-6">
138+
Now learning from anywhere, and build your{" "}
139+
<span className="text-emerald-600 dark:text-emerald-400 relative inline-block">
140+
bright career.
141+
{/* SVG underline decoration */}
142+
<svg
143+
viewBox="0 0 200 18"
144+
className="absolute -bottom-2 left-0 w-full h-4"
145+
preserveAspectRatio="none"
146+
>
147+
<path
148+
d="M4 12 C 50 4, 150 4, 196 12"
149+
stroke="#3a7d44"
150+
strokeWidth="3"
151+
fill="none"
152+
strokeLinecap="round"
153+
/>
154+
</svg>
155+
</span>
156+
</h1>
157+
158+
{/* Body copy */}
159+
<p className="text-[var(--text-secondary)] text-base sm:text-lg leading-relaxed mb-8 max-w-md">
160+
It has survived not only five centuries but also the leap into
161+
electronic typesetting.
162+
</p>
163+
164+
{/* CTA buttons */}
165+
<div className="flex flex-wrap gap-3">
166+
<button
167+
onClick={() => navigate("/signup")}
168+
className="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-semibold text-sm sm:text-base px-7 py-3 rounded-lg transition-colors duration-200 cursor-pointer"
169+
>
170+
Get Started
171+
</button>
172+
<button className="border-2 border-emerald-600 dark:border-emerald-500 text-[var(--text)] hover:bg-emerald-600 hover:text-white dark:hover:bg-emerald-500 font-semibold text-sm sm:text-base px-7 py-3 rounded-lg transition-all duration-200 cursor-pointer">
173+
Explore Courses
174+
</button>
175+
</div>
176+
</div>
177+
178+
{/* RIGHT: Decorative visual */}
179+
<div
180+
className={`w-full lg:flex-1 relative flex items-center justify-center
181+
h-80 sm:h-96 lg:h-[420px]
182+
transition-all duration-700 ease-out delay-150
183+
${visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-8"}`}
184+
>
185+
{/* Organic green blob */}
186+
<div className="absolute right-1/4 top-1/4 w-56 h-56 sm:w-72 sm:h-72 bg-gradient-to-br from-green-100 to-green-300 opacity-50 -z-10 rounded-[60%_40%_70%_30%/50%_60%_40%_50%]" />
187+
188+
{/* Floating stats card */}
189+
<div className="absolute top-4 left-0 sm:left-4 z-20 flex items-center gap-3 bg-[var(--surface)] border border-[var(--border)] rounded-2xl px-4 py-3 shadow-xl">
190+
<span className="w-2.5 h-2.5 rounded-full bg-emerald-600 dark:bg-emerald-500 shrink-0" />
191+
<div>
192+
<p className="text-sm font-bold text-[var(--text)] leading-none">
193+
125k+ Students
194+
</p>
195+
<p className="text-xs text-[var(--muted)] mt-0.5">
196+
enrolled this month
197+
</p>
198+
</div>
199+
</div>
200+
201+
{/* Avatar SVG illustration */}
202+
<div className="relative z-10 w-44 sm:w-52 text-center">
203+
<svg viewBox="0 0 120 160" width="100%" height="100%">
204+
<ellipse cx="60" cy="55" rx="28" ry="30" fill="#c8d8c8" />
205+
<ellipse cx="60" cy="130" rx="46" ry="38" fill="#c8d8c8" />
206+
<rect
207+
x="28"
208+
y="108"
209+
width="64"
210+
height="36"
211+
rx="6"
212+
fill="#a0b8a0"
213+
/>
214+
<rect
215+
x="20"
216+
y="142"
217+
width="80"
218+
height="6"
219+
rx="3"
220+
fill="#8aaa8a"
221+
/>
222+
</svg>
223+
<p className="mt-2 text-sm font-semibold text-emerald-600 dark:text-emerald-400">
224+
Online Learner
225+
</p>
226+
</div>
227+
</div>
228+
</section>
229+
230+
{/* ── FEATURES BAR ── */}
231+
<section className="bg-slate-900 dark:bg-slate-950">
232+
<div className="flex flex-col sm:flex-row sm:flex-wrap">
233+
{features.map((f, i) => (
234+
<div
235+
key={i}
236+
className={`
237+
flex items-start gap-4 px-6 py-8 sm:flex-1 sm:min-w-[180px]
238+
${
239+
i < features.length - 1
240+
? "border-b border-white/10 sm:border-b-0 sm:border-r sm:border-white/15"
241+
: ""
242+
}
243+
`}
244+
>
245+
{/* Feature icon */}
246+
<div className="text-amber-400 dark:text-yellow-400 shrink-0 mt-0.5">
247+
{f.icon}
248+
</div>
249+
250+
{/* Feature text */}
251+
<div>
252+
<p className="text-white text-sm font-bold leading-snug mb-1.5">
253+
{f.title}
254+
</p>
255+
<p className="text-white/50 text-xs leading-relaxed">
256+
{f.desc}
257+
</p>
258+
</div>
259+
</div>
260+
))}
261+
</div>
262+
</section>
263+
264+
{/* ── DETAILED FEATURES SECTION ── */}
265+
<section className="px-6 sm:px-10 lg:px-20 py-20 lg:py-28 bg-[var(--bg)]">
266+
<div className="max-w-6xl mx-auto">
267+
{/* Section header */}
268+
<div className="text-center mb-16">
269+
<p className="text-emerald-600 dark:text-emerald-500 text-sm font-semibold uppercase tracking-widest mb-3">
270+
Why Choose SmartClass
271+
</p>
272+
<h2 className="text-4xl lg:text-5xl font-bold text-[var(--text)] mb-4">
273+
Everything You Need to Succeed
274+
</h2>
275+
<p className="text-[var(--text-secondary)] text-lg max-w-2xl mx-auto">
276+
Comprehensive tools and features designed to enhance your
277+
learning experience and help you achieve your goals.
278+
</p>
279+
</div>
280+
281+
{/* Features grid */}
282+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
283+
{detailedFeatures.map((feature, i) => (
284+
<div
285+
key={i}
286+
className="p-6 rounded-2xl bg-[var(--surface)] border border-[var(--border)] hover:border-emerald-600/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-600/10"
287+
>
288+
<div className="text-4xl mb-4">{feature.icon}</div>
289+
<h3 className="text-lg font-bold text-[var(--text)] mb-2">
290+
{feature.title}
291+
</h3>
292+
<p className="text-[var(--text-secondary)] text-sm leading-relaxed">
293+
{feature.desc}
294+
</p>
295+
</div>
296+
))}
297+
</div>
298+
</div>
299+
</section>
300+
</div>
301+
302+
<Footer />
303+
</>
304+
);
305+
}

‎client/src/routes/PublicRoutes.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Routes, Route, Navigate } from "react-router-dom";
2+
import Mainpage from "../pages/Mainpage";
23
import SignIn from "../pages/SignIn";
34
import SignUp from "../pages/SignUp";
45
import Features from "../pages/Features";
@@ -12,6 +13,7 @@ import Terms from "../pages/Terms";
1213
function PublicRoutes() {
1314
return (
1415
<Routes>
16+
<Route path="/" element={<Mainpage />} />
1517
<Route path="/signin" element={<SignIn />} />
1618
<Route path="/signup" element={<SignUp />} />
1719
<Route path="/features" element={<Features />} />
@@ -21,8 +23,7 @@ function PublicRoutes() {
2123
<Route path="/blog" element={<Blog />} />
2224
<Route path="/privacy" element={<Privacy />} />
2325
<Route path="/terms" element={<Terms />} />
24-
<Route path="/" element={<Navigate to="/signin" />} />
25-
<Route path="*" element={<Navigate to="/signin" />} />
26+
<Route path="*" element={<Navigate to="/" />} />
2627
</Routes>
2728
);
2829
}

0 commit comments

Comments
 (0)