Skip to content

feat: implement comprehensive dark/light mode toggle across the platform (#16) #32

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

Open
nitishchaubeyy wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: implement comprehensive dark/light mode toggle across the platform (#16) #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
795de61
feat(ui): make instructor cards fully clickable and add scroll-to-top…
nitishchaubeyy Apr 27, 2026
7a4e13f
feat: implement comprehensive dark/light theme toggle and apply acros…
nitishchaubeyy May 1, 2026
2dd0c45
Merge branch 'main' into feat/dark-mode-toggle
Mehren7 May 19, 2026
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
72 changes: 36 additions & 36 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ export default function AboutPage() {
return (
<main className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
{/* Hero Section */}
<section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white p-8 mb-12">
<section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 p-8 mb-12 transition-colors duration-300 border border-transparent dark:border-slate-800">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4 leading-tight">
About <span className="text-violet-600">Parampara</span>
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-slate-50 mb-4 leading-tight">
About <span className="text-violet-600 dark:text-violet-400">Parampara</span>
</h1>
<p className="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
<p className="text-lg md:text-xl text-gray-600 dark:text-slate-300 max-w-2xl mx-auto leading-relaxed">
A living bridge between tradition and technology — enabling culture
to thrive across borders, while creating real economic opportunity
for Indian women.
Expand All @@ -20,10 +20,10 @@ export default function AboutPage() {
{/* Problem Section */}
<section className="mb-12">
<div className="text-center mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
The Problem We're Solving
</h2>
<p className="text-gray-500 text-sm max-w-xl mx-auto">
<p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
Millions of Indians abroad are losing touch with their roots. At the
same time, skilled women in India lack platforms to reach a global
audience.
Expand All @@ -50,13 +50,13 @@ export default function AboutPage() {
].map((item) => (
<div
key={item.title}
className="bg-violet-50 border border-violet-100 rounded-3xl p-6"
className="bg-violet-50 dark:bg-slate-800/50 border border-violet-100 dark:border-slate-700 rounded-3xl p-6 transition-colors duration-300"
>
<div className="text-3xl mb-3">{item.icon}</div>
<h3 className="font-semibold text-gray-900 mb-2 text-lg">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2 text-lg">
{item.title}
</h3>
<p className="text-gray-600 text-sm leading-relaxed">
<p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed">
{item.desc}
</p>
</div>
Expand All @@ -65,12 +65,12 @@ export default function AboutPage() {
</section>

{/* Solution Section */}
<section className="mb-12 rounded-3xl bg-violet-50 border border-violet-100 p-8">
<section className="mb-12 rounded-3xl bg-violet-50 dark:bg-slate-800/30 border border-violet-100 dark:border-slate-800 p-8 transition-colors duration-300">
<div className="text-center mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
Our Solution
</h2>
<p className="text-gray-500 text-sm max-w-xl mx-auto">
<p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
Parampara is a digital marketplace that connects verified women
instructors from India with global learners seeking real cultural
experiences.
Expand Down Expand Up @@ -102,14 +102,14 @@ export default function AboutPage() {
].map((item) => (
<div
key={item.title}
className="flex gap-4 bg-white rounded-3xl p-5 border border-violet-100 shadow-sm"
className="flex gap-4 bg-white dark:bg-slate-900 rounded-3xl p-5 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300"
>
<div className="text-3xl shrink-0">{item.icon}</div>
<div>
<h3 className="font-semibold text-gray-900 mb-1">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-1">
{item.title}
</h3>
<p className="text-gray-600 text-sm leading-relaxed">
<p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed">
{item.desc}
</p>
</div>
Expand All @@ -121,10 +121,10 @@ export default function AboutPage() {
{/* Impact Vision Section */}
<section className="mb-12">
<div className="text-center mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-4">
🌱 Our Impact Vision
</h2>
<p className="text-gray-500 text-sm max-w-xl mx-auto mb-10">
<p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto mb-10">
We measure success not just in users, but in lives changed and
cultures preserved.
</p>
Expand All @@ -150,93 +150,93 @@ export default function AboutPage() {
].map((item) => (
<div
key={item.label}
className="bg-gradient-to-b from-violet-50 to-white border border-violet-100 rounded-3xl p-6"
className="bg-gradient-to-b from-violet-50 to-white dark:from-slate-800 dark:to-slate-900 border border-violet-100 dark:border-slate-700 rounded-3xl p-6 transition-colors duration-300"
>
<div className="text-4xl mb-3">{item.stat}</div>
<h3 className="font-semibold text-gray-900 mb-2">{item.label}</h3>
<p className="text-gray-500 text-sm leading-relaxed">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2">{item.label}</h3>
<p className="text-gray-500 dark:text-slate-400 text-sm leading-relaxed">
{item.desc}
</p>
</div>
))}
</div>

{/* Vision Quote */}
<div className="bg-violet-600 text-white rounded-3xl px-8 py-8 text-center shadow-lg">
<div className="bg-violet-600 dark:bg-violet-900 text-white rounded-3xl px-8 py-8 text-center shadow-lg transition-colors duration-300">
<p className="text-lg md:text-xl font-medium leading-relaxed italic mb-4">
"Parampara is not just a platform — it's a living bridge between
tradition and technology, enabling culture to thrive across
borders."
</p>
<cite className="text-violet-200 text-sm not-italic font-medium">
<cite className="text-violet-200 dark:text-violet-300 text-sm not-italic font-medium">
— Parampara Vision Statement
</cite>
</div>
</section>

{/* Join Our Community Section */}
<section className="rounded-3xl bg-violet-50 border border-violet-100 p-8">
<section className="rounded-3xl bg-violet-50 dark:bg-slate-800/30 border border-violet-100 dark:border-slate-800 p-8 transition-colors duration-300">
<div className="text-center mb-10">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-2">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
🌟 Join the Parampara Community
</h2>
<p className="text-gray-500 text-sm max-w-xl mx-auto">
<p className="text-gray-500 dark:text-slate-400 text-sm max-w-xl mx-auto">
Whether you're looking to reconnect with your roots or share your
cultural expertise, Parampara welcomes you to our growing community
of learners and instructors.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="bg-white rounded-3xl p-6 border border-violet-100 shadow-sm">
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300">
<div className="text-4xl mb-4">🎓</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
<h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2">
For Learners
</h3>
<p className="text-gray-600 text-sm leading-relaxed mb-4">
<p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
Discover authentic Indian culture through live sessions with
verified women instructors. Learn language, cooking, dance, and
traditions from the comfort of your home.
</p>
<Link
href="/instructors"
className="inline-block bg-violet-600 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 transition-colors text-sm"
className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors text-sm"
>
Find Instructors
</Link>
</div>

<div className="bg-white rounded-3xl p-6 border border-violet-100 shadow-sm">
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-700 shadow-sm transition-colors duration-300">
<div className="text-4xl mb-4">👩‍🏫</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
<h3 className="text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2">
For Instructors
</h3>
<p className="text-gray-600 text-sm leading-relaxed mb-4">
<p className="text-gray-600 dark:text-slate-400 text-sm leading-relaxed mb-4">
Share your cultural knowledge and skills with a global audience.
Earn flexible income while preserving and teaching traditional
Indian arts and wisdom.
</p>
<Link
href="#contact"
className="inline-block bg-violet-600 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 transition-colors text-sm"
className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-4 py-2 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors text-sm"
>
Become an Instructor
</Link>
</div>
</div>

<div className="text-center">
<p className="text-gray-600 text-sm mb-4">
<p className="text-gray-600 dark:text-slate-400 text-sm mb-4">
Ready to start your cultural journey?
</p>
<Link
href="/instructors"
className="inline-block bg-violet-600 text-white font-semibold px-6 py-3 rounded-full hover:bg-violet-700 transition-colors duration-200 shadow-sm"
className="inline-block bg-violet-600 dark:bg-violet-700 text-white font-semibold px-6 py-3 rounded-full hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors duration-200 shadow-sm"
>
Explore Classes →
</Link>
</div>
</section>
</main>
);
}
}
16 changes: 10 additions & 6 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@
@tailwind components;
@tailwind utilities;

:root {
color-scheme: light;
font-family: 'Inter', sans-serif;
@layer base {
:root {
color-scheme: light;
font-family: 'Inter', sans-serif;
}

.dark {
color-scheme: dark;
}
}

html {
Expand All @@ -14,8 +20,6 @@ html {
body {
margin: 0;
min-height: 100vh;
background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
color: #111827;
}

* {
Expand All @@ -32,4 +36,4 @@ input,
select,
textarea {
font: inherit;
}
}
38 changes: 19 additions & 19 deletions app/instructor/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ type PageProps = {
export default function InstructorProfilePage({ params }: PageProps) {
const instructor = instructors.find((item) => item.id === params.id);

const backButtonClasses = "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-5 py-2.5 text-sm font-medium text-slate-600 shadow-sm transition-all hover:bg-slate-50 hover:text-violet-700 hover:border-violet-200";
const backButtonClasses = "inline-flex items-center gap-2 rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 px-5 py-2.5 text-sm font-medium text-slate-600 dark:text-slate-300 shadow-sm transition-all duration-300 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-violet-700 dark:hover:text-violet-400 hover:border-violet-200 dark:hover:border-violet-500";

if (!instructor) {
return (
<main className="mx-auto max-w-4xl px-6 py-16 lg:px-8">
<Link href="/instructors" className={backButtonClasses}>
<span className="text-lg">←</span> Back to Instructors
</Link>
<p className="mt-8 text-center text-xl font-semibold text-slate-800">Instructor not found.</p>
<p className="mt-8 text-center text-xl font-semibold text-slate-800 dark:text-slate-200">Instructor not found.</p>
</main>
);
}
Expand All @@ -29,47 +29,47 @@ export default function InstructorProfilePage({ params }: PageProps) {
</Link>
</div>

<div className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
<div className="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-8 shadow-sm transition-colors duration-300">
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
<div>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-violet-700">{instructor.location}</p>
<h1 className="mt-4 text-4xl font-semibold text-slate-900">{instructor.name}</h1>
<p className="mt-3 text-lg text-slate-600">{instructor.expertise}</p>
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-violet-700 dark:text-violet-400">{instructor.location}</p>
<h1 className="mt-4 text-4xl font-semibold text-slate-900 dark:text-slate-50">{instructor.name}</h1>
<p className="mt-3 text-lg text-slate-600 dark:text-slate-400">{instructor.expertise}</p>
</div>
<div className="rounded-3xl bg-violet-50 px-4 py-3 text-right text-sm font-semibold text-violet-700">
<div className="rounded-3xl bg-violet-50 dark:bg-violet-900/30 px-4 py-3 text-right text-sm font-semibold text-violet-700 dark:text-violet-300">
${instructor.ratePerHour} / hour
</div>
</div>

<div className="mt-8 grid gap-8 lg:grid-cols-[1.2fr_0.8fr]">
<div>
<section className="space-y-4">
<h2 className="text-2xl font-semibold text-slate-900">About this mentor</h2>
<p className="text-slate-600 leading-8">{instructor.description}</p>
<h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-100">About this mentor</h2>
<p className="text-slate-600 dark:text-slate-400 leading-8">{instructor.description}</p>
</section>

<section className="mt-8 space-y-4">
<h3 className="text-xl font-semibold text-slate-900">What you will learn</h3>
<ul className="space-y-3 text-slate-600">
<h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100">What you will learn</h3>
<ul className="space-y-3 text-slate-600 dark:text-slate-300">
{instructor.specialties.map((specialty) => (
<li key={specialty} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
<li key={specialty} className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 p-4 transition-colors duration-300">
{specialty}
</li>
))}
</ul>
</section>
</div>

<aside className="space-y-6 rounded-3xl border border-slate-200 bg-slate-50 p-6">
<aside className="space-y-6 rounded-3xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/30 p-6 transition-colors duration-300">
<div>
<h3 className="text-xl font-semibold text-slate-900">Session details</h3>
<p className="mt-3 text-slate-600">Book a 1:1 learning session tailored to your heritage goals. Sessions are ideal for diaspora families, children, and cultural learners.</p>
<h3 className="text-xl font-semibold text-slate-900 dark:text-slate-100">Session details</h3>
<p className="mt-3 text-slate-600 dark:text-slate-400">Book a 1:1 learning session tailored to your heritage goals. Sessions are ideal for diaspora families, children, and cultural learners.</p>
</div>
<div className="rounded-3xl bg-white p-5 shadow-sm">
<p className="text-sm text-slate-500">Languages</p>
<p className="mt-2 font-semibold text-slate-900">{instructor.languages.join(', ')}</p>
<div className="rounded-3xl bg-white dark:bg-slate-900 border border-transparent dark:border-slate-700 p-5 shadow-sm transition-colors duration-300">
<p className="text-sm text-slate-500 dark:text-slate-400">Languages</p>
<p className="mt-2 font-semibold text-slate-900 dark:text-slate-100">{instructor.languages.join(', ')}</p>
</div>
<Link href="/instructors" className="inline-flex w-full items-center justify-center rounded-full bg-violet-700 px-4 py-3 text-sm font-semibold text-white transition hover:bg-violet-800">
<Link href="/instructors" className="inline-flex w-full items-center justify-center rounded-full bg-violet-700 px-4 py-3 text-sm font-semibold text-white transition hover:bg-violet-800 dark:hover:bg-violet-600">
Book a session
</Link>
</aside>
Expand Down
Loading