Skip to content

add theme provider and navbar toggle for dark/light mode #19

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
Harika2011 wants to merge 2 commits into
base: main
Choose a base branch
from
+271 −103
Open

add theme provider and navbar toggle for dark/light mode #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b2cd94
add theme provider and navbar toggle for dark/light mode
Harika2011 Apr 26, 2026
0606ae2
Merge branch 'main' into main
Mehren7 Apr 27, 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
82 changes: 48 additions & 34 deletions app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
"use client";

import Link from "next/link";

export default function AboutPage() {
return (
<main className="mx-auto max-w-7xl px-6 py-12 lg:px-8">
<main className="mx-auto max-w-7xl px-6 py-12 lg:px-8 transition-colors duration-300">
{/* Hero Section */}
<section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white p-8 mb-12">
{/* Added dark:from-violet-900/20 dark:via-slate-900 dark:to-slate-900 dark:border dark:border-slate-800 */}
<section className="rounded-[2rem] bg-gradient-to-br from-violet-50 via-violet-50 to-white dark:from-violet-900/20 dark:via-slate-900 dark:to-slate-900 p-8 mb-12 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>
{/* Added dark:text-white */}
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white 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">
{/* Added dark:text-slate-400 */}
<p className="text-lg md:text-xl text-gray-600 dark:text-slate-400 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 +25,12 @@ 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">
{/* Added dark:text-white */}
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-2">
The Problem We're Solving
</h2>
<p className="text-gray-500 text-sm max-w-xl mx-auto">
{/* Added dark:text-slate-500 */}
<p className="text-gray-500 dark:text-slate-500 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 +57,14 @@ export default function AboutPage() {
].map((item) => (
<div
key={item.title}
className="bg-violet-50 border border-violet-100 rounded-3xl p-6"
/* Added dark:bg-slate-900 dark:border-slate-800 */
className="bg-violet-50 dark:bg-slate-900 border border-violet-100 dark:border-slate-800 rounded-3xl p-6 transition-colors"
>
<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 +73,13 @@ export default function AboutPage() {
</section>

{/* Solution Section */}
<section className="mb-12 rounded-3xl bg-violet-50 border border-violet-100 p-8">
{/* Added dark:bg-slate-900/50 dark:border-slate-800 */}
<section className="mb-12 rounded-3xl bg-violet-50 dark:bg-slate-900/50 border border-violet-100 dark:border-slate-800 p-8">
<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-white 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-500 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 +111,15 @@ 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"
/* Added dark:bg-slate-900 dark:border-slate-700 dark:shadow-none */
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"
>
<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 +131,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-white 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-500 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,19 +160,20 @@ 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"
/* Added dark:from-slate-900 dark:to-slate-800 dark:border-slate-800 */
className="bg-gradient-to-b from-violet-50 to-white dark:from-slate-900 dark:to-slate-800 border border-violet-100 dark:border-slate-800 rounded-3xl p-6 transition-colors"
>
<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">
{/* Vision Quote - Violet background usually looks good in both, but we can darken slightly */}
<div className="bg-violet-600 dark:bg-violet-700 text-white rounded-3xl px-8 py-8 text-center shadow-lg">
<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
Expand All @@ -175,25 +186,27 @@ export default function AboutPage() {
</section>

{/* Join Our Community Section */}
<section className="rounded-3xl bg-violet-50 border border-violet-100 p-8">
{/* Added dark:bg-slate-900/50 dark:border-slate-800 */}
<section className="rounded-3xl bg-violet-50 dark:bg-slate-900/50 border border-violet-100 dark:border-slate-800 p-8">
<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-white 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-500 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">
{/* Card 1 */}
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-800 shadow-sm transition-colors">
<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.
Expand All @@ -206,12 +219,13 @@ export default function AboutPage() {
</Link>
</div>

<div className="bg-white rounded-3xl p-6 border border-violet-100 shadow-sm">
{/* Card 2 */}
<div className="bg-white dark:bg-slate-900 rounded-3xl p-6 border border-violet-100 dark:border-slate-800 shadow-sm transition-colors">
<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.
Expand All @@ -226,7 +240,7 @@ export default function AboutPage() {
</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
Expand All @@ -239,4 +253,4 @@ export default function AboutPage() {
</section>
</main>
);
}
}
29 changes: 27 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,35 @@
@tailwind utilities;

:root {
--bg-start: #ffffff;
--bg-end: #f8f5ff;
--text-primary: #111827;
--border-color: #e5e7eb;

color-scheme: light;
font-family: 'Inter', sans-serif;
}

.dark {
--bg-start: #0f172a;
--bg-end: #020617;
--text-primary: #f1f5f9;
--border-color: #1e293b;

color-scheme: dark;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
min-height: 100vh;
background: linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
color: #111827;
background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
color: var(--text-primary);

transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

* {
Expand All @@ -33,3 +49,12 @@ select,
textarea {
font: inherit;
}

.glass-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--border-color);
}

.dark .glass-card {
background: rgba(30, 41, 59, 0.5);
}
57 changes: 41 additions & 16 deletions app/instructor/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ type PageProps = {
params: { id: string };
};

export default function InstructorProfilePage({ params }: PageProps) {
export default function InstructorProfilePage({ params }: { params: { id: string } }) {
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";
Expand All @@ -32,44 +32,69 @@ export default function InstructorProfilePage({ params }: PageProps) {
<div className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
<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>
{/* Added dark:text-violet-400 */}
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-violet-700 dark:text-violet-400">
{instructor.location}
</p>
{/* Added dark:text-white */}
<h1 className="mt-4 text-4xl font-semibold text-slate-900 dark:text-white">
{instructor.name}
</h1>
{/* Added dark:text-slate-400 */}
<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">
{/* Rate Badge: Added dark:bg-violet-900/30 dark:text-violet-300 */}
<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>
{/* Added dark:text-white */}
<h2 className="text-2xl font-semibold text-slate-900 dark:text-white">About this mentor</h2>
{/* Added dark:text-slate-400 */}
<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">
{/* Added dark:text-white */}
<h3 className="text-xl font-semibold text-slate-900 dark:text-white">What you will learn</h3>
<ul className="space-y-3 text-slate-600 dark:text-slate-400">
{instructor.specialties.map((specialty) => (
<li key={specialty} className="rounded-2xl border border-slate-200 bg-slate-50 p-4">
/* List Item: Added dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 */
<li key={specialty} className="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 p-4 transition-colors">
{specialty}
</li>
))}
</ul>
</section>
</div>

<aside className="space-y-6 rounded-3xl border border-slate-200 bg-slate-50 p-6">
{/* Sidebar: Added dark:border-slate-700 dark:bg-slate-800/50 */}
<aside className="space-y-6 rounded-3xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 p-6 transition-colors">
<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>
{/* Added dark:text-white */}
<h3 className="text-xl font-semibold text-slate-900 dark:text-white">Session details</h3>
{/* Added dark:text-slate-400 */}
<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">
{/* Language Box: Added dark:bg-slate-900 dark:shadow-none */}
<div className="rounded-3xl bg-white dark:bg-slate-900 p-5 shadow-sm transition-colors">
<p className="text-sm text-slate-500">Languages</p>
<p className="mt-2 font-semibold text-slate-900">{instructor.languages.join(', ')}</p>
{/* Added dark:text-slate-200 */}
<p className="mt-2 font-semibold text-slate-900 dark:text-slate-200">
{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 shadow-lg shadow-violet-500/20">
Book a session
</Link>
</aside>
Expand Down
4 changes: 3 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { ThemeProvider } from "../lib/core/theme_provider";
import Navbar from "../components/Navbar";
import "./globals.css";
import type { Metadata, Viewport } from "next";
import Navbar from "@/components/Navbar";
Expand Down Expand Up @@ -78,4 +80,4 @@ export default function RootLayout({
</body>
</html>
);
}
}
Loading