Initial commit: UP Parivaar Dallas site

.gitignore

@@ -0,0 +1,8 @@
+/node_modules
+/.next
+/out
+/build
+.env*
+.DS_Store
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,49 @@
+# UP Parivaar Dallas — Website
+
+A pixel-faithful Next.js (App Router) implementation of the **UP Parivar Dallas**
+Figma design (Page 1 — all 7 screens).
+
+## Pages
+
+| Route | Screen |
+|-------|--------|
+| `/` | Home |
+| `/about` | About Us |
+| `/events` | Events |
+| `/events/detail` | Event Detail (Diwali Mahotsav) |
+| `/gallery` | Gallery |
+| `/knowledge` | Knowledge Hub |
+| `/why-join` | Why Join / Membership |
+
+## Tech
+
+- **Next.js 15** (App Router) + **React 19**
+- **Tailwind CSS 3** design system (`tailwind.config.ts` — brand colors, fonts, shadows)
+- **Fonts:** Playfair Display (display headings — matches Figma's *Kalufonia*), Gloock (serif), Parkinsans (body — the Figma UI font), via `next/font`
+- All imagery exported directly from the Figma file into `public/img`
+- `next/image` optimization throughout
+
+## Run
+
+```bash
+npm install
+npm run dev      # http://localhost:3000
+# or
+npm run build && npm run start
+```
+
+## Structure
+
+```
+app/                 # route segments (one folder per page)
+components/           # Navbar, Footer, Logo, EventCard, Tabs, Carousel,
+                     # Faq, MembershipForm, WhatsAppFab, ui primitives
+lib/data.ts          # shared content (events, testimonials, FAQs)
+public/img/          # design assets exported from Figma
+```
+
+## Design tokens
+
+- Primary orange `#F45700`, light orange `#FF8001`, gold `#FFC107`
+- Cream background `#FFF7F3`, deep-brown footer `#1C0E03`
+- Logo accents: navy `#150D8E`, green `#7ECA4F`

app/about/page.tsx

@@ -0,0 +1,251 @@
+import Image from "next/image";
+import { SectionHeading } from "@/components/ui";
+import Tabs from "@/components/Tabs";
+import Carousel from "@/components/Carousel";
+import Logo from "@/components/Logo";
+
+export const metadata = { title: "About — UP Parivaar Dallas" };
+
+const marquee = [
+  "/img/about_8_.jpg", "/img/about_5_.jpg", "/img/about_3_.jpg", "/img/about_22_.jpg",
+  "/img/about_7_.jpg", "/img/about_2_.jpg", "/img/about_21_.jpg", "/img/about_24_.jpg",
+];
+
+const team = [
+  { name: "Pankaj Mishra", role: "Operations Head", img: "/img/Pankaj%20Mishra.png" },
+  { name: "Arjun Verma", role: "Chief Engineer", img: "/img/Vikram%20Nair.png" },
+  { name: "Rohit Sharma", role: "Project Manager", img: "/img/Venky%20Pandey.png" },
+  { name: "Sneha Reddy", role: "Project Manager", img: "/img/Nidhi%20Jain.png" },
+  { name: "Vikram Nair", role: "Project Manager", img: "/img/Vikram%20Nair.png" },
+  { name: "Amit Joshi", role: "Project Manager", img: "/img/Pankaj%20Mishra.png" },
+];
+
+const committee = [
+  { name: "Suresh Gupta", role: "Cultural Lead", img: "/img/Venky%20Pandey.png" },
+  { name: "Neha Kapoor", role: "Events Lead", img: "/img/Nidhi%20Jain.png" },
+  { name: "Deepak Rao", role: "Seva Coordinator", img: "/img/Pankaj%20Mishra.png" },
+  { name: "Kavita Menon", role: "Youth Programs", img: "/img/Nidhi%20Jain.png" },
+  { name: "Rahul Bose", role: "Finance", img: "/img/Vikram%20Nair.png" },
+  { name: "Manish Tyagi", role: "Membership", img: "/img/Venky%20Pandey.png" },
+];
+
+const whatWeDo = [
+  { t: "Cultural Celebrations", d: "Organizing festivals and events that showcase the traditions and heritage of Uttar Pradesh.", img: "/img/about_19_.jpg" },
+  { t: "Family Gatherings", d: "Creating opportunities for families to meet, connect, and build lasting friendships.", img: "/img/about_22_.jpg" },
+  { t: "Community Programs", d: "Hosting activities that encourage engagement, learning, and collaboration.", img: "/img/about_21_.jpg" },
+  { t: "Youth Engagement", d: "Helping younger generations stay connected to their culture and community.", img: "/img/about_24_.jpg" },
+  { t: "Volunteer Initiatives", d: "Supporting charitable and community-focused causes through collective efforts.", img: "/img/about_20_.jpg" },
+  { t: "Networking & Support", d: "Providing opportunities for personal, professional, and social connections.", img: "/img/about_23_.jpg" },
+];
+
+const stats = [
+  { n: "500+", l: "Community Members" },
+  { n: "25+", l: "Events Organized" },
+  { n: "100+", l: "Volunteer Hours" },
+  { n: "20+", l: "Multiple Community" },
+];
+
+function PersonCard({ p }: { p: { name: string; role: string; img: string } }) {
+  return (
+    <div className="person-card">
+      <div className="person-card__media">
+        <Image src={p.img} alt={p.name} fill className="person-card__img" sizes="220px" />
+      </div>
+      <div className="person-card__body">
+        <p className="person-card__name">{p.name}</p>
+        <p className="person-card__role">{p.role}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function AboutPage() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="page-glow page-hero">
+        <div className="container hero-center">
+          <span className="eyebrow">About UP Parivaar Dallas</span>
+          <h1 className="display-title ts-36-48 about-hero__title">
+            Bringing Uttar Pradesh&apos;s Roots, Culture &amp; Traditions to Dallas
+          </h1>
+          <p className="about-hero__lead">
+            A nonprofit community organization connecting families, celebrating
+            heritage, and strengthening community bonds.
+          </p>
+        </div>
+        <div className="about-hero__marquee no-scrollbar">
+          {marquee.map((src, i) => {
+            const variant = ["about-hero__marquee-item--wide", "about-hero__marquee-item--narrow", ""][i % 3];
+            return (
+              <div key={i} className={`about-hero__marquee-item ${variant}`.trim()}>
+                <Image src={src} alt="" fill className="img-cover" sizes="380px" />
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      {/* FOUNDERS */}
+      <section className="section-white about-founders">
+        <div className="container">
+          <SectionHeading
+            eyebrow="The Volunteers Behind It All"
+            title={<>Led by the community, for the community</>}
+            desc="Not a company. A volunteer-run family — powered by people who simply care."
+            align="split"
+          />
+          <div className="about-founders__grid">
+            <div className="founder-card">
+              <div className="founder-card__media">
+                <Image src="/img/Venky%20Pandey.png" alt="Venky Pandey" fill className="img-cover-top" sizes="380px" />
+              </div>
+              <div className="founder-card__body">
+                <div>
+                  <p className="founder-card__name">Venky Pandey</p>
+                  <p className="founder-card__role">Founder</p>
+                </div>
+                <p className="founder-card__email">venkeypj@upparivaar.com</p>
+              </div>
+            </div>
+            <div className="founder-card--logo">
+            <img src="/img/logoaboutteam.png" alt="" />
+            </div>
+            <div className="founder-card">
+              <div className="founder-card__media">
+                <Image src="/img/Nidhi%20Jain.png" alt="Nidhi Jain" fill className="img-cover-top" sizes="380px" />
+              </div>
+              <div className="founder-card__body">
+                <div>
+                  <p className="founder-card__name">Nidhi Jain</p>
+                  <p className="founder-card__role">Co-Founder</p>
+                </div>
+                <p className="founder-card__email">nidhij@upparivaar.com</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="about-founders__carousels">
+            <Carousel title="Volunteer Team" subtitle="Visionary leaders driving innovation and excellence">
+              {team.map((p) => (
+                <PersonCard key={p.name + p.role} p={p} />
+              ))}
+            </Carousel>
+            <Carousel title="Core Committee Members" subtitle="Visionary leaders driving innovation and excellence">
+              {committee.map((p) => (
+                <PersonCard key={p.name + p.role} p={p} />
+              ))}
+            </Carousel>
+          </div>
+        </div>
+      </section>
+
+      {/* MISSION / VISION */}
+      <section className="section-cream about-mission">
+        <div className="container">
+          <Tabs
+            tabs={[
+              {
+                label: "Our Mission",
+                content: (
+                  <div className="about-mission__panel">
+                    <div className="about-mission__grid">
+                      <div>
+                        <h3 className="about-mission__title">Our Mission</h3>
+                        <p className="about-mission__text">
+                          Our mission is to strengthen the Uttar Pradesh community in Dallas
+                          by fostering cultural pride, encouraging community engagement, and
+                          creating opportunities for families to connect, celebrate, and
+                          support one another.
+                        </p>
+                        <h4 className="about-mission__subtitle">Mission Pillars</h4>
+                        <ul className="about-mission__list">
+                          {["Preserve our cultural heritage", "Strengthen family and community bonds", "Support community service initiatives", "Inspire future generations", "Promote unity and belonging"].map((m) => (
+                            <li key={m}>
+                              <span className="about-mission__bullet">•</span> {m}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                      <div className="about-mission__media">
+                        <Image src="/img/about_18_.jpg" alt="Mission" fill className="img-cover" sizes="500px" />
+                      </div>
+                    </div>
+                  </div>
+                ),
+              },
+              {
+                label: "Our Vision",
+                content: (
+                  <div className="about-mission__panel">
+                    <div className="about-mission__grid">
+                      <div>
+                        <h3 className="about-mission__title">Our Vision</h3>
+                        <p className="about-mission__text">
+                          We envision a thriving, connected Uttar Pradesh community across
+                          North Texas — where every family feels at home, every tradition is
+                          celebrated, and every generation carries our culture forward with
+                          pride.
+                        </p>
+                        <h4 className="about-mission__subtitle">Vision Pillars</h4>
+                        <ul className="about-mission__list">
+                          {["A borderless cultural network", "Trusted member-led community", "Opportunities for every generation", "A living archive of our stories", "Seva at the heart of everything"].map((m) => (
+                            <li key={m}>
+                              <span className="about-mission__bullet">•</span> {m}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                      <div className="about-mission__media">
+                        <Image src="/img/about_3_.jpg" alt="Vision" fill className="img-cover" sizes="500px" />
+                      </div>
+                    </div>
+                  </div>
+                ),
+              },
+            ]}
+          />
+
+          <div className="about-stats">
+            {stats.map((s) => (
+              <div key={s.l} className="about-stat">
+                <div>
+                  <p className="about-stat__num">{s.n}</p>
+                  <p className="about-stat__label">{s.l}</p>
+                </div>
+                <span className="about-stat__icon">◈</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* WHAT WE DO */}
+      <section className="section-white about-do">
+        <div className="container">
+          <div className="about-do__head">
+            <h2 className="display-title ts-34-42">What We Do</h2>
+            <p className="about-do__lead">
+              Building connections through meaningful experiences that bring families,
+              friends, and communities together, creating lasting relationships, trust,
+              and belonging.
+            </p>
+          </div>
+          <div className="about-do__grid">
+            {whatWeDo.map((w) => (
+              <div key={w.t} className="about-do__card">
+                <div className="about-do__media">
+                  <Image src={w.img} alt={w.t} fill className="img-cover" sizes="400px" />
+                </div>
+                <div className="about-do__body">
+                  <h3 className="about-do__title">{w.t}</h3>
+                  <p className="about-do__desc">{w.d}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/contact/page.tsx

@@ -0,0 +1,108 @@
+import { Arrow } from "@/components/ui";
+
+export const metadata = { title: "Contact Us — UP Parivaar Dallas" };
+
+const info = [
+  {
+    label: "Phone Number",
+    value: "(555) 123-4567",
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+  {
+    label: "Email Address",
+    value: "info@upparivaar.com",
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
+        <path d="m2 7 10 6 10-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+  {
+    label: "Office Hours",
+    value: (
+      <>
+        Monday–Friday: 8am – 6pm
+        <br />
+        Saturday: 9am – 3pm
+      </>
+    ),
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+        <circle cx="12" cy="12" r="9" />
+        <path d="M12 7v5l3 2" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+];
+
+export default function ContactPage() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="page-glow page-hero--tight contactwrap">
+        <div className="container hero-center">
+          <span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
+          <h1 className="display-title ts-34-46 contact-hero__title">Contact Us</h1>
+          <p className="contact-hero__sub">
+            Schedule a complimentary consultation with our community team.
+          </p>
+        </div>
+      </section>
+
+      {/* CONTACT CARD */}
+      <section className="contact-section">
+        <div className="container">
+          <div className="contact-card">
+            {/* Info panel */}
+            <div className="contact-info">
+              <div>
+                <h2 className="contact-info__title">Get In Touch</h2>
+              </div>
+              <p className="contact-info__text">
+                Reach out for events, membership, seva opportunities or partnership
+                queries. We&apos;re eager to help your family feel at home in Dallas!
+              </p>
+              <div className="contact-info__list">
+                {info.map((it) => (
+                  <div key={it.label} className="contact-info__item">
+                    <span className="contact-info__icon">{it.icon}</span>
+                    <div>
+                      <p className="contact-info__label">{it.label}</p>
+                      <p className="contact-info__value">{it.value}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Message form */}
+            <div className="contact-form">
+              <h2 className="contact-form__title">Send us a Message</h2>
+              <form className="contact-form__grid">
+                <input className="contact-input" type="text" placeholder="First Name" aria-label="First Name" />
+                <input className="contact-input" type="text" placeholder="Last Name" aria-label="Last Name" />
+                <input className="contact-input" type="email" placeholder="Email Address" aria-label="Email Address" />
+                <input className="contact-input" type="tel" placeholder="Phone Number" aria-label="Phone Number" />
+                <textarea
+                  className="contact-textarea contact-form__field--full"
+                  placeholder="Project / Message Details"
+                  aria-label="Message Details"
+                />
+                <div className="contact-form__field--full contact-form__actions">
+                  <button type="submit" className="btn-primary">
+                    Get a Free Consultation <Arrow />
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/events/detail/page.tsx

@@ -0,0 +1,120 @@
+import Image from "next/image";
+
+export const metadata = { title: "Diwali Mahotsav 2026 — UP Parivaar Dallas" };
+
+const highlights = [
+  "Cultural Dance & Music Performances",
+  "Traditional Indian Food & Festive Treats",
+  "Family Activities & Kids Zone",
+  "Community Networking Opportunities",
+  "Heritage Showcases & Local Talent",
+];
+
+export default function EventDetailPage() {
+  return (
+    <section className="page-glow evd">
+      <div className="container">
+        <span className="eyebrow">Events</span>
+        <div className="evd__head">
+          <h1 className="display-title ts-34-44">
+            Celebrating Culture, Connections &amp; Community Across Dallas
+          </h1>
+          <p className="evd__lead">
+            Every event at UP Parivar Dallas is more than a gathering—it&apos;s an
+            opportunity to reconnect with our roots.
+          </p>
+        </div>
+
+        <div className="evd__photos">
+          <div className="evd__photo-lg">
+            <Image src="/img/gallery_14_.jpg" alt="Family picnic" fill className="img-cover" sizes="(max-width:768px) 100vw, 720px" />
+          </div>
+          <div className="evd__photo-sm">
+            <Image src="/img/gallery_2_.jpg" alt="Diwali celebration" fill className="img-cover" sizes="(max-width:768px) 100vw, 500px" />
+          </div>
+        </div>
+
+        <div className="evd__meta">
+          <span className="evd__meta-item"><span className="evd__meta-icon">◍</span> UP Parivar Dallas Team</span>
+          <span className="evd__meta-item"><span className="evd__meta-icon">▦</span> October 30, 2026</span>
+          <span className="evd__meta-item"><span className="evd__meta-icon">◈</span> Community Event</span>
+        </div>
+
+        <div className="evd__block">
+          <h2 className="evd__h2">
+            Diwali Mahotsav 2026 – A Festival of Lights &amp; Togetherness
+          </h2>
+          <div className="evd__prose">
+            <p>
+              Join us for one of the most anticipated celebrations of the year as families
+              from across the Dallas-Fort Worth area come together to celebrate Diwali with
+              joy, tradition, and community spirit.
+            </p>
+            <p>
+              The evening will feature cultural performances, traditional music, dance,
+              festive décor, delicious Indian cuisine, children&apos;s activities, and a
+              spectacular celebration of Indian heritage.
+            </p>
+            <p>
+              Whether you&apos;re attending with family, friends, or meeting community
+              members for the first time, this event offers a warm and welcoming atmosphere
+              for everyone.
+            </p>
+          </div>
+        </div>
+
+        <div className="evd__split">
+          <div className="evd__split-media">
+            <Image src="/img/about_22_.jpg" alt="Family gathering" fill className="img-cover" sizes="500px" />
+          </div>
+          <div>
+            <h3 className="evd__h3">
+              Bringing the Spirit of Uttar Pradesh to Dallas
+            </h3>
+            <p className="evd__split-text">
+              Experience the colors, traditions, and values that connect our community
+              across generations and continents.
+            </p>
+            <ul className="evd__highlights">
+              {highlights.map((h) => (
+                <li key={h}>
+                  <span className="evd__check">✓</span> {h}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="evd__quote">
+          <span className="evd__quote-mark">&rdquo;</span>
+          <p className="evd__quote-text">
+            When we celebrate together, we preserve our heritage, strengthen our community,
+            and create lasting memories for future generations.
+          </p>
+          <p className="evd__quote-name">UP Parivar Dallas Community Team</p>
+          <p className="evd__quote-role">Building Connections Beyond Borders</p>
+        </div>
+
+        <div className="evd__block evd__block--wide">
+          <h3 className="evd__h3">Why Community Events Matter</h3>
+          <div className="evd__prose">
+            <p>
+              Community events create meaningful opportunities for families to connect,
+              share experiences, and celebrate cultural traditions in a new home away from
+              home.
+            </p>
+            <p>
+              Through these gatherings, children learn about their heritage, young
+              professionals expand their networks, and families build friendships that last
+              a lifetime.
+            </p>
+            <p>
+              Each event reflects the values of unity, respect, and cultural pride that
+              define the UP Parivar Dallas community.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

app/events/page.tsx

@@ -0,0 +1,37 @@
+import { FeaturedEventCard, MiniEventCard } from "@/components/EventCard";
+import { featuredEvents, miniEvents } from "@/lib/data";
+
+export const metadata = { title: "Events — UP Parivaar Dallas" };
+
+export default function EventsPage() {
+  return (
+    <>
+      <section className="page-glow page-hero--tight">
+        <div className="container hero-center">
+          <span className="eyebrow">Events</span>
+          <h1 className="display-title ts-36-48 events-hero__title">
+            Worth driving across the metroplex for
+          </h1>
+          <p className="events-hero__lead">
+            Not events. Experiences — where food, music, culture and family come
+            together.
+          </p>
+        </div>
+      </section>
+
+      <section className="section-white">
+        <div className="container events-list">
+          <FeaturedEventCard e={featuredEvents[0]} />
+
+          <div className="events-list__grid">
+            {miniEvents.map((e) => (
+              <MiniEventCard key={e.title} e={e} />
+            ))}
+          </div>
+
+          <FeaturedEventCard e={featuredEvents[1]} />
+        </div>
+      </section>
+    </>
+  );
+}

app/gallery/page.tsx

@@ -0,0 +1,200 @@
+import Image from "next/image";
+import { SectionHeading } from "@/components/ui";
+
+export const metadata = { title: "Gallery — UP Parivaar Dallas" };
+
+const stats = [
+  { n: "500+", l: "Families Connected" },
+  { n: "50+", l: "Community Events" },
+  { n: "10,000+", l: "Shared Memories" },
+  { n: "20+", l: "Cultural Celebrations" },
+];
+
+const filters = ["All Memories", "Festivals", "Family Events", "Community Gatherings", "Kids & Youth", "Food & Traditions", "Dallas Life", "Videos"];
+
+const featured = [
+  { img: "/img/gallery_2_.jpg", title: "Diwali Milan 2024", cat: "Festival", h: "tall" },
+  { img: "/img/gallery_7_.jpg", title: "Classical Dance Night", cat: "Festival", h: "short" },
+  { img: "/img/gallery_12_.jpg", title: "Diwali Evening Puja", cat: "Festival", h: "tall" },
+  { img: "/img/gallery_6_.jpg", title: "Holi Utsav 2024", cat: "Festival", h: "tall" },
+  { img: "/img/gallery_16_.jpg", title: "Family Celebration", cat: "Family Events", h: "tall" },
+  { img: "/img/gallery_8_.jpg", title: "Three Generations", cat: "Family Events", h: "short" },
+  { img: "/img/gallery_4_.jpg", title: "Traditional Thali", cat: "Food & Traditions", h: "tall" },
+  { img: "/img/gallery_19_.jpg", title: "Community Potluck Night", cat: "Food & Traditions", h: "tall" },
+  { img: "/img/gallery_20_.jpg", title: "Generations Together", cat: "Food & Traditions", h: "tall" },
+];
+
+const albums = [
+  { img: "/img/gallery_15_.jpg", title: "Diwali Milan 2025", sub: "Community Celebration", count: "10 Photos", date: "March 14-15, 2026" },
+  { img: "/img/gallery_13_.jpg", title: "Holi Utsav 2025", sub: "Festival of Colors", count: "20 Photos", date: "March 14-15, 2026" },
+  { img: "/img/gallery_14_.jpg", title: "Family Picnic Dallas", sub: "Summer Gathering", count: "10 Photos", date: "March 14-15, 2026" },
+];
+
+const experiences = [
+  { img: "/img/gallery_2_.jpg", title: "Festivals", sub: "Diwali, Holi, Navratri, Janmashtami" },
+  { img: "/img/gallery_10_.jpg", title: "Family Moments", sub: "Birthdays, Anniversaries" },
+  { img: "/img/gallery_9_.jpg", title: "Food & Culture", sub: "Potlucks, Traditional Cuisine" },
+  { img: "/img/gallery_11_.jpg", title: "Community Service", sub: "Volunteer Programs and Charity" },
+];
+
+const videos = [
+  { img: "/img/gallery_15_.jpg", tag: "Festival Highlights", title: "Diwali Milan 2024 Highlights" },
+  { img: "/img/gallery_16_.jpg", tag: "Festival of Colors", title: "Holi Utsav Celebrations" },
+  { img: "/img/gallery_17_.jpg", tag: "Cultural Performance", title: "Classical Dance Night" },
+  { img: "/img/gallery_18_.jpg", tag: "Community Gathering", title: "Community Family Day" },
+  { img: "/img/gallery_14_.jpg", tag: "Picnic", title: "Family Picnic Dallas" },
+];
+
+export default function GalleryPage() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="page-glow page-hero">
+        <div className="container hero-center">
+          <span className="eyebrow">Gallery</span>
+          <h1 className="display-title ts-34-46 gallery-hero__title">
+            Memories That Keep Uttar Pradesh Close to Home
+          </h1>
+          <p className="gallery-hero__lead">
+            Every festival, gathering and celebration strengthens the bond between UP
+            families across Dallas.
+          </p>
+          <div className="gallery-hero__stats">
+            {stats.map((s) => (
+              <div key={s.l}>
+                <p className="gallery-stat__num">{s.n}</p>
+                <p className="gallery-stat__label">{s.l}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FILTERS + FEATURED */}
+      <section className="section-white gallery-featured">
+        <div className="container">
+          <div className="gallery-filters no-scrollbar">
+            {filters.map((f, i) => (
+              <span key={f} className={`chip chip--shrink0 ${i === 0 ? "chip--active" : ""}`}>
+                {f}
+              </span>
+            ))}
+          </div>
+
+          <div className="gallery-featured__head">
+            <span className="eyebrow">Featured</span>
+            <h2 className="display-title ts-30-36 gallery-featured__title">Community Moments</h2>
+          </div>
+
+          <div className="gallery-masonry">
+            {featured.map((f) => (
+              <div
+                key={f.title}
+                className={`gallery-tile ${f.h === "tall" ? "gallery-tile--tall" : "gallery-tile--short"}`}
+              >
+                <Image src={f.img} alt={f.title} fill className="gallery-tile__img" sizes="400px" />
+                <div className="gallery-tile__overlay" />
+                <div className="gallery-tile__caption">
+                  <p className="gallery-tile__title">{f.title}</p>
+                  <p className="gallery-tile__cat">{f.cat}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ALBUMS */}
+      <section className="section-cream gallery-albums">
+        <div className="container">
+          <span className="eyebrow">Collections</span>
+          <h2 className="display-title ts-30-36 gallery-albums__title">Explore Event Albums</h2>
+          <div className="gallery-albums__grid">
+            {albums.map((a) => (
+              <div key={a.title} className="album-card">
+                <div className="album-card__media">
+                  <Image src={a.img} alt={a.title} fill className="img-cover" sizes="400px" />
+                  <span className="album-card__count">▤ {a.count}</span>
+                </div>
+                <div className="album-card__body">
+                  <h3 className="album-card__title">{a.title}</h3>
+                  <div className="album-card__meta">
+                    <span>{a.sub}</span>
+                    <span className="album-card__date">▦ {a.date}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* EXPERIENCES */}
+      <section className="section-white gallery-experiences">
+        <div className="container">
+          <span className="eyebrow">Explore</span>
+          <h2 className="display-title ts-30-36 gallery-experiences__title">Memories by Experience</h2>
+          <div className="gallery-experiences__grid">
+            {experiences.map((e) => (
+              <div key={e.title} className="experience-tile">
+                <Image src={e.img} alt={e.title} fill className="img-cover" sizes="300px" />
+                <div className="experience-tile__overlay" />
+                <div className="experience-tile__caption">
+                  <p className="experience-tile__title">{e.title}</p>
+                  <p className="experience-tile__sub">{e.sub}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* VIDEOS */}
+      <section className="section-white gallery-videos">
+        <div className="container">
+          <SectionHeading
+            eyebrow="Video Gallery"
+            title={<>Relive the Celebrations</>}
+            desc="Cinematic highlights from our most beloved community events"
+            align="split"
+          />
+          <div className="gallery-videos__grid">
+            {videos.map((v) => (
+              <div key={v.title} className="video-card">
+                <div className="video-card__media">
+                  <Image src={v.img} alt={v.title} fill className="img-cover" sizes="400px" />
+                  <div className="video-card__play-layer">
+                    <span className="video-card__play">▶</span>
+                  </div>
+                  <span className="video-card__duration">4:32</span>
+                </div>
+                <div className="video-card__body">
+                  <p className="video-card__tag">{v.tag}</p>
+                  <p className="video-card__title">{v.title}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="banner">
+        <Image src="/img/gallery_21_.jpg" alt="" fill className="img-cover" sizes="100vw" />
+        <div className="banner__overlay gallery-cta__overlay" />
+        <div className="container banner-pad-24 banner__content">
+          <div className="gallery-cta__box">
+            <h2 className="gallery-cta__title">
+              Every Memory Becomes Part of Our Story
+            </h2>
+            <p className="gallery-cta__text">
+              Join events, celebrate traditions, and create lasting memories with the UP
+              Parivaar Dallas community. Your family&apos;s story is waiting to be written
+              here.
+            </p>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/knowledge/page.tsx

@@ -0,0 +1,179 @@
+import Image from "next/image";
+import { Stars } from "@/components/ui";
+import { testimonials } from "@/lib/data";
+
+export const metadata = { title: "Knowledge Hub — UP Parivaar Dallas" };
+
+const categories = [
+  { img: "/img/knowledge_1_.jpg", title: "Living in Dallas", sub: "Schools, housing, transportation, healthcare" },
+  { img: "/img/knowledge_3_.jpg", title: "Career & Business", sub: "Professional growth, networking, entrepreneurship" },
+  { img: "/img/knowledge_5_.jpg", title: "Education & Students", sub: "Admissions, scholarships, mentoring" },
+  { img: "/img/knowledge_2_.jpg", title: "Legal & Immigration", sub: "Helpful guidance and community resources" },
+  { img: "/img/knowledge_4_.jpg", title: "Community & Volunteering", sub: "Events, service opportunities, participation" },
+  { img: "/img/knowledge_6_.jpg", title: "Culture & Traditions", sub: "Festivals, heritage, traditions, community stories" },
+];
+
+const suggestions = [
+  "Which WhatsApp group should I join?",
+  "Best school districts for mir kids?",
+  "What events are coming up?",
+  "Where can I volunteer for seva?",
+];
+
+export default function KnowledgePage() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="page-glow page-hero--tight">
+        <div className="container hero-center">
+          <span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
+          <h1 className="display-title ts-34-46 knowledge-hero__title">Community Knowledge Hub</h1>
+          <p className="knowledge-hero__lead">
+            Explore resources, guides, community insights, member expertise, local
+            opportunities, and helpful information curated by UP Parivar Dallas.
+          </p>
+        </div>
+        <div className="container">
+          <div className="knowledge-hero__photos">
+            <div className="knowledge-hero__photo">
+              <Image src="/img/about_7_.jpg" alt="" fill className="img-cover" sizes="400px" />
+            </div>
+            <div className="knowledge-hero__photo">
+              <Image src="/img/about_3_.jpg" alt="" fill className="img-cover" sizes="700px" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CATEGORIES */}
+      <section className="section-white knowledge-cats">
+        <div className="container">
+          <div className="split-head">
+            <div className="split-head__col">
+              <span className="eyebrow">Knowledge Categories</span>
+              <h2 className="display-title ts-30-38 split-head__title">Explore Topics That Matter</h2>
+            </div>
+            <p className="split-head__aside split-head__text">
+              Browse curated resources and community knowledge across the important areas
+              of life, work, family, and culture.
+            </p>
+          </div>
+
+          <div className="knowledge-cats__grid">
+            {categories.map((c) => (
+              <div key={c.title} className="knowledge-cat">
+                <div className="knowledge-cat__media">
+                  <Image src={c.img} alt={c.title} fill className="img-cover" sizes="400px" />
+                </div>
+                <div className="knowledge-cat__body">
+                  <h3 className="knowledge-cat__title">{c.title}</h3>
+                  <p className="knowledge-cat__sub">{c.sub}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* AI MEMORY */}
+      <section className="section-cream knowledge-ai">
+        <div className="container">
+          <div className="split-head">
+            <div className="split-head__col">
+              <span className="eyebrow">Powered by Community AI</span>
+              <h2 className="display-title ts-30-38 split-head__title">
+                Years of community wisdom, one question away
+              </h2>
+            </div>
+            <p className="split-head__aside split-head__text">
+              No more scrolling through 4,000 WhatsApp messages. Just ask.
+            </p>
+          </div>
+
+          <div className="knowledge-ai__panel">
+            <div className="knowledge-ai__bar">
+              <span className="knowledge-ai__dots">
+                <span className="knowledge-ai__dot knowledge-ai__dot--red" />
+                <span className="knowledge-ai__dot knowledge-ai__dot--yellow" />
+                <span className="knowledge-ai__dot knowledge-ai__dot--green" />
+              </span>
+              <span className="knowledge-ai__bar-label">Insignia TOWER · Community Memory</span>
+            </div>
+            <div className="knowledge-ai__body">
+              <div className="knowledge-ai__q">
+                <span className="knowledge-ai__q-emoji">🙋</span>
+                <p className="knowledge-ai__q-text">Which WhatsApp group should I join?</p>
+              </div>
+              <div className="knowledge-ai__a">
+                <span className="knowledge-ai__a-badge">AI</span>
+                <p className="knowledge-ai__a-text">
+                  Start with your city&apos;s welcome circle — if you&apos;re in Frisco,
+                  that&apos;s &quot;Frisco Families.&quot; From there most newcomers add the
+                  Youth, Seva and Marketplace circles. A volunteer will personally add you
+                  within a day.
+                </p>
+              </div>
+              <div className="knowledge-ai__sources">
+                {["▤ WhatsApp archive", "▦ Event calendar", "◈ Member directory"].map((t) => (
+                  <span key={t} className="knowledge-ai__source">{t}</span>
+                ))}
+              </div>
+            </div>
+            <div className="knowledge-ai__suggestions">
+              {suggestions.map((s, i) => (
+                <span key={s} className={`knowledge-ai__suggestion ${i === 0 ? "knowledge-ai__suggestion--active" : ""}`}>
+                  {s}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* COMMUNITY VOICES */}
+      <section className="section-white knowledge-voices">
+        <div className="container">
+          <span className="eyebrow">Community Voices</span>
+          <h2 className="display-title ts-30-38 knowledge-voices__title">Loved by families across North Texas</h2>
+          <div className="knowledge-voices__grid">
+            {testimonials.map((t, i) => {
+              const person = (
+                <div className="testimonial-person">
+                  <div className="testimonial-person__avatar">
+                    <Image src={t.avatar} alt={t.name} fill className="img-cover" sizes="44px" />
+                  </div>
+                  <div>
+                    <p className="testimonial-person__name">{t.name}</p>
+                    <p className="testimonial-person__role">{t.role}</p>
+                  </div>
+                </div>
+              );
+              const quote = (
+                <div className="testimonial-quote">
+                  <img src="/img/quotes.svg" alt="" className="testimonial-quote__mark" />
+                  <Stars n={t.stars} />
+                  <p className="testimonial-quote__text">{t.quote}</p>
+                </div>
+              );
+              return (
+                <div key={t.name} className="knowledge-voices__col">
+                  {i === 1 ? (
+                    <>
+                      {person}
+                      {quote}
+                    </>
+                  ) : (
+                    <>
+                      {quote}
+                      {person}
+                    </>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/layout.tsx

@@ -0,0 +1,52 @@
+import type { Metadata } from "next";
+import { Playfair_Display, Gloock, Parkinsans } from "next/font/google";
+import "../styles/style.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import WhatsAppFab from "@/components/WhatsAppFab";
+import ScrollReveal from "@/components/ScrollReveal";
+
+const display = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-display",
+  display: "swap",
+});
+
+const serif = Gloock({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-serif",
+  display: "swap",
+});
+
+const sans = Parkinsans({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+  adjustFontFallback: false,
+  fallback: ["system-ui", "Segoe UI", "Arial", "sans-serif"],
+});
+
+export const metadata: Metadata = {
+  title: "UP Parivaar Dallas — Bringing Uttar Pradesh Families Together",
+  description:
+    "UP Parivar Dallas connects families, culture, seva, events and trusted local help across North Texas.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={`${display.variable} ${serif.variable} ${sans.variable}`}>
+      <body>
+        <Navbar />
+        <main>{children}</main>
+        <Footer />
+        <WhatsAppFab />
+        <ScrollReveal />
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,285 @@
+import Image from "next/image";
+import Link from "next/link";
+import { SectionHeading, Stars, Arrow } from "@/components/ui";
+import { FeaturedEventCard } from "@/components/EventCard";
+import Faq from "@/components/Faq";
+import HomeJourney from "@/components/HomeJourney";
+import JourneyBanner from "@/components/JourneyBanner";
+import { featuredEvents, testimonials, faqs } from "@/lib/data";
+
+const pillars = [
+  { t: "Cultural Celebrations", d: "Celebrate Holi, Diwali, Janmashtami and more." },
+  { t: "Family Gatherings", d: "Meet families and build lasting friendships." },
+  { t: "Seva & Volunteering", d: "Give back through community initiatives." },
+  { t: "Stay Connected Roots", d: "Keep UP traditions alive in Dallas." },
+];
+
+export default function Home() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="home-hero">
+        <Image
+          src="/img/home.png"
+          alt="Bringing Uttar Pradesh families together in Dallas"
+          fill
+          priority
+          className="img-cover"
+          sizes="100vw"
+        />
+        <div className="home-hero__overlay" />
+        <div className="container home-hero__inner">
+          <span className="home-hero__eyebrow">UP Parivar Dallas</span>
+          <h1 className="home-hero__title">
+            Bringing Uttar Pradesh Families
+            <br className="home-hero__break" /> Together in Dallas
+          </h1>
+          <div className="home-hero__cta">
+            <Link href="/why-join" className="btn-primary btn-primary--lg">
+              Join Community <Arrow />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ABOUT INTRO */}
+      <section className="section-cream">
+        <div className="container home-about">
+          <div>
+            <span className="eyebrow">About Us</span>
+            <div className="home-about__badge">
+          <img src="aboutvectore.png" alt="" />
+            </div>
+            <p className="home-about__stat">10+</p>
+            <p className="home-about__stat-label">Years Of Creative Excellence</p>
+          </div>
+
+          <div>
+            <p className="home-about__lead">
+              UP Parivar Dallas connects families, culture, seva, events and trusted
+              local help across North Texas. The portal keeps public information{" "}
+              <span className="home-about__lead-accent">
+                easy to find and gives members a private, consent-led way to discover
+                what matters.
+              </span>
+            </p>
+            <div className="home-about__row">
+              <div className="home-about__photo">
+                <Image src="/img/home_2_.jpg" alt="Family gathering" fill className="img-cover" sizes="320px" />
+              </div>
+              <div className="home-about__note">
+                <h3 className="home-about__note-title">From roots to North Texas</h3>
+                <p className="home-about__note-text">
+                  A public face for culture; a private portal for trusted member life.
+                </p>
+                <Link href="/about" className="btn-primary btn-primary--compact home-about__more">
+                  More About
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* JOURNEY TIMELINE (scroll-driven) */}
+      <HomeJourney />
+
+      {/* UPCOMING GATHERINGS */}
+      <section className="section-white home-upcoming">
+        <div className="container">
+          <SectionHeading
+            eyebrow="Next Gathering"
+            title={<>Upcoming Community Gatherings</>}
+            desc="A family evening with devotional music, kids activities, volunteer desks and newcomer welcome."
+            cta={{ label: "Subscribe Calendar", href: "/events" }}
+            align="split"
+          />
+          <div className="home-upcoming__list">
+            {featuredEvents.map((e) => (
+              <FeaturedEventCard key={e.title} e={e} />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* OUR JOURNEY BANNER (full-screen scroll) */}
+      <JourneyBanner />
+
+      {/* GALLERY PREVIEW */}
+      <section className="section-white home-gallery">
+        <div className="container">
+          <SectionHeading
+            eyebrow="Gallery"
+            title={<>A thousand moments, one family album</>}
+            desc="Festivals, seva, youth and family, the memories we've made together. Drop your own photos in; the archive grows with every gathering."
+            cta={{ label: "More Explore Gallery", href: "/gallery" }}
+            align="split"
+          />
+          <div className="home-gallery__grid">
+            <div className="home-gallery__tile-lg">
+              <Image src="/img/home_9_.jpg" alt="" fill className="img-cover" sizes="380px" />
+            </div>
+            <div className="home-gallery__col">
+              <div className="home-gallery__tile-md">
+                <Image src="/img/home_6_.jpg" alt="" fill className="img-cover" sizes="380px" />
+              </div>
+              <div className="home-gallery__pair">
+                <div className="home-gallery__tile-md">
+                  <Image src="/img/home_7_.jpg" alt="" fill className="img-cover" sizes="190px" />
+                </div>
+                <div className="home-gallery__tile-md">
+                  <Image src="/img/home_2_.jpg" alt="" fill className="img-cover" sizes="190px" />
+                </div>
+              </div>
+            </div>
+            <div className="home-gallery__tile-lg">
+              <Image src="/img/home_5_.jpg" alt="" fill className="img-cover" sizes="380px" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CULTURE BANNER */}
+      <section className="banner">
+        <Image src="/img/home_3_.jpg" alt="" fill className="img-cover" sizes="100vw" />
+        <div className="banner__overlay home-culture__overlay" />
+        <div className="container banner-pad-24 banner__content">
+          <div className="home-culture__card">
+            <h2 className="home-culture__title">
+              A Community Built Around
+              <br /> Culture & Connection
+            </h2>
+            <div className="home-culture__grid">
+              {pillars.map((p) => (
+                <div key={p.t} className="home-culture__pillar">
+                  <div className="home-culture__pillar-icon">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 0v20M2 12h20" strokeLinecap="round" />
+                    </svg>
+                  </div>
+                  <h3 className="home-culture__pillar-title">{p.t}</h3>
+                  <p className="home-culture__pillar-desc">{p.d}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* TESTIMONIALS */}
+      <section className="section-white home-testimonials">
+        <div className="container">
+          <SectionHeading
+            eyebrow="Community Voices"
+            title={<>Loved by families across North Texas</>}
+            cta={{ label: "View All", href: "/about" }}
+            align="split"
+          />
+          <div className="home-testimonials__grid">
+            {testimonials.map((t, i) => (
+              <div
+                key={t.name}
+                className={`home-testimonials__col ${i === 1 ? "home-testimonials__col--offset" : ""}`}
+              >
+                {i === 1 && (
+                  <div className="testimonial-person">
+                    <div className="testimonial-person__avatar">
+                      <Image src={t.avatar} alt={t.name} fill className="img-cover" sizes="44px" />
+                    </div>
+                    <div>
+                      <p className="testimonial-person__name">{t.name}</p>
+                      <p className="testimonial-person__role">{t.role}</p>
+                    </div>
+                  </div>
+                )}
+                <div className="testimonial-quote">
+                  <img src="/img/quotes.svg" alt="" className="testimonial-quote__mark" />
+                  <Stars n={t.stars} />
+                  <p className="testimonial-quote__text">{t.quote}</p>
+                </div>
+                {i !== 1 && (
+                  <div className="testimonial-person">
+                    <div className="testimonial-person__avatar">
+                      <Image src={t.avatar} alt={t.name} fill className="img-cover" sizes="44px" />
+                    </div>
+                    <div>
+                      <p className="testimonial-person__name">{t.name}</p>
+                      <p className="testimonial-person__role">{t.role}</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* FAQ */}
+      <section className="section-cream">
+        <div className="container home-faq">
+          <div>
+            <span className="eyebrow">FAQ&apos;s</span>
+            <h2 className="display-title ts-32-40 home-faq__title">Frequently Asked Questions</h2>
+            <p className="home-faq__lead">
+              Everything you need to know about UP Parivar Dallas, our community, events,
+              membership, and ways to get involved.
+            </p>
+            <div className="home-faq__list">
+              <Faq items={faqs} />
+            </div>
+          </div>
+          <div className="home-faq__art">
+            <svg width="260" height="260" viewBox="0 0 100 100">
+              {[
+                { a: -90, c: "#2530C4" },
+                { a: -30, c: "#F7A400" },
+                { a: 30, c: "#FF8001" },
+                { a: 90, c: "#F45700" },
+                { a: 150, c: "#7ECA4F" },
+                { a: 210, c: "#3FB27A" },
+              ].map((p, i) => {
+                const rad = (p.a * Math.PI) / 180;
+                const cx = 50 + Math.cos(rad) * 30;
+                const cy = 50 + Math.sin(rad) * 30;
+                return (
+                  <g key={i} transform={`rotate(${p.a + 90} ${cx} ${cy})`}>
+                    <circle cx={cx} cy={cy - 9} r="7" fill={p.c} />
+                    <path d={`M ${cx - 10} ${cy + 13} Q ${cx} ${cy - 4} ${cx + 10} ${cy + 13} Z`} fill={p.c} />
+                  </g>
+                );
+              })}
+              <circle cx="50" cy="50" r="15" fill="#fff" />
+            </svg>
+          </div>
+        </div>
+      </section>
+
+      {/* FINAL CTA */}
+      <section className="banner">
+        <Image src="/img/home_4_.jpg" alt="" fill className="img-cover" sizes="100vw" />
+        <div className="banner__overlay home-cta__overlay" />
+        <div className="container banner-pad-28 banner__content">
+          <div className="home-cta__box">
+            <span className="eyebrow-light">◉ Get Your Portal</span>
+            <h2 className="home-cta__title">
+              Keeping the roots of Uttar Pradesh alive through family, culture,
+              traditions, and community in Dallas.
+            </h2>
+            <p className="home-cta__text">
+              Celebrate festivals, build lifelong friendships, and pass on the values,
+              culture, and traditions of Uttar Pradesh to the next generation in Dallas.
+            </p>
+            <div className="home-cta__actions">
+              <Link href="/why-join" className="btn-primary">
+                Request A Community Portal <Arrow />
+              </Link>
+              <Link href="/why-join" className="btn-ghost">
+                Preview Member Portal <Arrow />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

app/why-join/page.tsx

@@ -0,0 +1,268 @@
+import Image from "next/image";
+import Link from "next/link";
+import MembershipForm from "@/components/MembershipForm";
+
+export const metadata = { title: "Why Join — UP Parivaar Dallas" };
+
+const interests = [
+  "Community Service", "Education", "Entrepreneurship", "Technology", "Real Estate",
+  "Cultural Program", "Movies", "Legal Support", "Spiritual", "Gardening", "Youth Activities",
+  "Music", "Immigration Guidance", "Networking",
+];
+const activeInterests = new Set(["Community Service", "Real Estate", "Legal Support"]);
+
+const platformCards = [
+  { t: "Culture that feels alive everyday", d: "Festivals, galleries, seva drives, youth activities and family memories are presented beautifully without mixing private member information into public pages." },
+  { t: "Newcomers do not start from zero", d: "A public starter guide and private catch-up experience help new families learn the history, admins, events, circles and trusted resources.", active: true },
+  { t: "Trusted local discovery platform today", d: "Members can later opt into directory, business cards, volunteer interests and contact preferences — with consent and admin rules." },
+  { t: "AI turns messages into usefulness", d: "WhatsApp energy becomes digests, knowledge articles, event pages, FAQ candidates, bulletin items and searchable community memory." },
+];
+
+const belong = [
+  { t: "Meaningful Connections", d: "Build genuine friendships with people sharing roots, values, experiences.", img: "/img/whyjoin_4_.jpg" },
+  { t: "Family & Community Network", d: "Bring your family together, celebrate milestones, strengthen bonds.", icon: true },
+  { t: "Professional Growth", d: "Access mentors, collaborators, and opportunities within a trusted network.", img: "/img/whyjoin_2_.jpg" },
+  { t: "Business Visibility", d: "Showcase your business and gain trusted community referrals.", icon: true },
+  { t: "Volunteer Opportunities", d: "Contribute through mentorship, cultural programs, teaching, and service.", img: "/img/whyjoin_3_.jpg" },
+  { t: "Events & Cultural Celebrations", d: "Experience UP's festivals, sports, culture, and traditions together.", icon: true },
+];
+
+const journeySteps = [
+  { n: 1, t: "Create Your Profile", d: "Share your name, city, hometown, profession, interests, and family details. Your profile powers personalized connections." },
+  { n: 2, t: "Discover Your Circles", d: "Join city circles, professional groups, alumni networks, and interest-based communities tailored to who you are.", active: true },
+  { n: 3, t: "Engage, Contribute & Grow", d: "Attend events, volunteer, participate in discussions, showcase your business, and build lasting relationships." },
+];
+
+const visibility = [
+  { t: "Profile Visibility", d: "Choose who can see your full profile", opts: ["Public", "Members Only", "Circles Only"], active: 1 },
+  { t: "Contact Visibility", d: "Control who sees your phone & email", opts: ["Hidden", "Connections", "All Members"], active: 1 },
+  { t: "Business Visibility", d: "Manage your business page audience", opts: ["Public", "Members Only", "Private"], active: 1 },
+  { t: "Messaging Permissions", d: "Decide who can send you messages", opts: ["Anyone", "Connections", "Off"], active: 1 },
+  { t: "Circle-Based Access", d: "Grant access per circle membership", opts: ["Custom", "Open", "Closed"], active: 1 },
+  { t: "Participation Settings", d: "Control your community visibility", opts: ["Visible", "Limited", "Private"], active: 1 },
+];
+
+export default function WhyJoinPage() {
+  return (
+    <>
+      {/* HERO */}
+      <section className="page-glow page-hero">
+        <div className="container hero-center">
+          <span className="eyebrow">UP Parivar Dallas</span>
+          <h1 className="display-title ts-34-46 why-hero__title">
+            Join a Community That Feels Like Family
+          </h1>
+          <p className="why-hero__lead">
+            Connect through culture, friendship, family, professional networks, shared
+            interests, and meaningful community engagement.
+          </p>
+        </div>
+        <div className="container why-hero__photos">
+          <div className="why-hero__photo">
+            <Image src="/img/whyjoin_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
+          </div>
+          <div className="why-hero__photo">
+            <Image src="/img/gallery_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
+          </div>
+        </div>
+      </section>
+
+      {/* PROFILE */}
+      <section className="section-white">
+        <div className="container why-profile">
+          <div>
+            <span className="eyebrow">Member Profile</span>
+            <h2 className="display-title ts-30-38 why-profile__title">Build Your Community Profile</h2>
+            <p className="why-profile__text">
+              Your profile is the foundation of your UP Parivar experience. It powers
+              personalized connections, curated event invitations, and smart
+              recommendations across the platform.
+            </p>
+            <ul className="why-profile__list">
+              {["Be discovered by people from your hometown", "Get matched with members in your profession", "Receive invitations to relevant circles and events", "Connect your family and build a shared network"].map((b) => (
+                <li key={b}>
+                  <span className="why-bullet">•</span> {b}
+                </li>
+              ))}
+            </ul>
+            <div className="why-profile__photo">
+              <Image src="/img/about_24_.jpg" alt="" fill className="img-cover" sizes="256px" />
+            </div>
+          </div>
+
+          {/* Profile card */}
+          <div className="profile-card">
+            <div className="profile-card__banner">
+              <div className="profile-card__badge-row">
+                <span className="profile-card__badge">BUSINESS</span>
+              </div>
+              <div className="profile-card__head">
+                <div className="profile-card__avatar">
+                  <Image src="/img/about_13_.jpg" alt="Amit Sharma" fill className="img-cover-top" sizes="96px" />
+                </div>
+                <h3 className="profile-card__name">Amit Sharma</h3>
+                <p className="profile-card__location">
+                  <span className="profile-card__pin">◉</span> Dallas, TX · From Lucknow, UP
+                </p>
+              </div>
+            </div>
+            <div className="profile-card__rows">
+              {[
+                "Software Engineer · Microsoft",
+                "IIT Kanpur · UT Dallas",
+                "Cricket, Music, Community Service",
+                "Family of 4 · Spouse: Priya",
+              ].map((r) => (
+                <div key={r} className="profile-card__row">
+                  <span className="profile-card__dot" /> {r}
+                </div>
+              ))}
+              <div className="profile-card__tags">
+                {["Dallas Circle", "IT Professionals", "IIT Alumni"].map((t) => (
+                  <span key={t} className="profile-card__tag">{t}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* INTERESTS */}
+      <section className="section-white why-interests">
+        <div className="container">
+          <span className="eyebrow">Personalization</span>
+          <h2 className="display-title ts-30-38 why-interests__title">Tell Us What Interests You</h2>
+          <p className="why-interests__lead">
+            Your interests help us recommend people, circles, events, discussions, and
+            volunteer opportunities.
+          </p>
+          <div className="why-interests__chips">
+            {interests.map((i) => (
+              <span key={i} className={`chip ${activeInterests.has(i) ? "chip--active" : ""}`}>{i}</span>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* PLATFORM WEDGE */}
+      <section className="section-white why-wedge">
+        <div className="container">
+          <div className="split-head">
+            <div className="split-head__col">
+              <span className="eyebrow">Why Members Care</span>
+              <h2 className="display-title ts-30-36 split-head__title">More useful than a page. Less noisy than a group.</h2>
+            </div>
+            <div className="split-head__aside">
+              <p className="split-head__text">
+                The site attracts visitors; the portal keeps members connected. WhatsApp
+                remains the daily habit, while TOWER organizes what should not disappear.
+              </p>
+              <Link href="#belong" className="link-arrow link-arrow--spaced">See Platform Wedge</Link>
+            </div>
+          </div>
+          <div className="why-wedge__grid">
+            {platformCards.map((c) => (
+              <div key={c.t} className={`wedge-card ${c.active ? "wedge-card--active" : ""}`}>
+                <h3 className="wedge-card__title">{c.t}</h3>
+                <p className="wedge-card__desc">{c.d}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* BELONG BENTO */}
+      <section id="belong" className="section-cream why-belong">
+        <div className="container">
+          <div className="split-head">
+            <div className="split-head__col">
+              <span className="eyebrow">Why Members Care</span>
+              <h2 className="display-title ts-30-38 split-head__title">Everything You Need to Belong</h2>
+            </div>
+            <p className="split-head__aside split-head__text">
+              UP Parivar is more than a membership — it&apos;s an extended family,
+              professional network, and community ecosystem.
+            </p>
+          </div>
+          <div className="why-belong__grid">
+            {belong.map((b) => (
+              <div key={b.t} className="belong-card">
+                <div className="belong-card__icon">◈</div>
+                <h3 className="belong-card__title">{b.t}</h3>
+                <p className="belong-card__desc">{b.d}</p>
+                {b.img && (
+                  <div className="belong-card__media">
+                    <Image src={b.img} alt="" fill className="img-cover" sizes="380px" />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* JOURNEY STEPS */}
+      <section className="why-steps">
+        <div className="container">
+          <span className="eyebrow-light">◉ How It Works</span>
+          <h2 className="why-steps__title">Your Journey Starts Here</h2>
+          <p className="why-steps__lead">Three simple steps to becoming part of the UP Parivar family.</p>
+          <div className="why-steps__grid">
+            {journeySteps.map((s) => (
+              <div key={s.n} className={`step-card ${s.active ? "step-card--active" : ""}`}>
+                <div className="step-card__icon">✦</div>
+                <h3 className="step-card__title">{s.t}</h3>
+                <p className="step-card__desc">{s.d}</p>
+                <span className="step-card__num">{s.n}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* VISIBILITY */}
+      <section className="section-white why-visibility">
+        <div className="container">
+          <div className="split-head">
+            <div className="split-head__col">
+              <span className="eyebrow">Privacy</span>
+              <h2 className="display-title ts-30-38 split-head__title">You Control Your Visibility</h2>
+            </div>
+            <p className="split-head__aside split-head__text">
+              Choose exactly who can view your profile, contact information, business
+              details, and community activity.
+            </p>
+          </div>
+          <div className="why-visibility__grid">
+            {visibility.map((v) => (
+              <div key={v.t} className="visibility-card">
+                <div className="visibility-card__head">
+                  <span className="visibility-card__icon">◈</span>
+                  <div>
+                    <h3 className="visibility-card__title">{v.t}</h3>
+                    <p className="visibility-card__desc">{v.d}</p>
+                  </div>
+                </div>
+                <div className="visibility-card__opts">
+                  {v.opts.map((o, i) => (
+                    <span key={o} className={`visibility-opt ${i === v.active ? "visibility-opt--active" : ""}`}>{o}</span>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* MEMBERSHIP FORM */}
+      <section className="section-cream why-form">
+        <div className="container">
+          <h2 className="display-title ts-32-40 why-form__title">Membership Application</h2>
+          <div className="why-form__body">
+            <MembershipForm />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

components/Carousel.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { ReactNode, useRef } from "react";
+
+export default function Carousel({
+  children,
+  title,
+  subtitle,
+}: {
+  children: ReactNode;
+  title?: string;
+  subtitle?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const scroll = (dir: number) => {
+    ref.current?.scrollBy({ left: dir * 320, behavior: "smooth" });
+  };
+  return (
+    <div>
+      <div className="carousel__head">
+        <div>
+          {title && <h3 className="carousel__title">{title}</h3>}
+          {subtitle && <p className="carousel__subtitle">{subtitle}</p>}
+        </div>
+        <div className="carousel__controls">
+          {[-1, 1].map((d) => (
+            <button
+              key={d}
+              onClick={() => scroll(d)}
+              className="carousel__btn"
+              aria-label={d < 0 ? "Previous" : "Next"}
+            >
+              {d < 0 ? "←" : "→"}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div ref={ref} className="carousel__track no-scrollbar">
+        {children}
+      </div>
+    </div>
+  );
+}

components/EventCard.tsx

@@ -0,0 +1,95 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export type FeaturedEvent = {
+  title: string;
+  date: string;
+  step: string;
+  where: string;
+  desc: string;
+  image: string;
+  thumb: string;
+  schedule: { label: string; time: string }[];
+};
+
+export function FeaturedEventCard({ e }: { e: FeaturedEvent }) {
+  return (
+    <div className="evc">
+      <div className="evc__grid">
+        <div className="evc__media">
+          <Image src={e.image} alt={e.title} fill className="img-cover" sizes="280px" />
+        </div>
+        <div className="evc__body">
+          <div className="evc__head">
+            <h3 className="evc__title">{e.title}</h3>
+            <div className="evc__meta">
+              <p className="evc__date">{e.date}</p>
+              <span>
+              <p className="evc__step-label">Step</p>
+              <p className="evc__step">{e.step}</p></span>
+            </div>
+          </div>
+          <div className="evc__cols">
+            <div>
+              <p className="evc__where">{e.where}</p>
+              <p className="evc__desc">{e.desc}</p>
+              <Link href="/events" className="link-arrow link-arrow--spaced-lg">
+                Register Interest
+              </Link>
+            </div>
+            <div className="evc__schedule">
+              <ul className="evc__schedule-list">
+                {e.schedule.map((s) => (
+                  <li key={s.label} className="evc__schedule-row">
+                    <span className="evc__schedule-label">{s.label}</span>
+                    <span className="evc__schedule-time">{s.time}</span>
+                  </li>
+                ))}
+              </ul>
+              <div className="evc__thumb">
+                <Image src="/img/guruimage.png" alt="" fill className="img-cover" sizes="96px" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type MiniEvent = {
+  tag: string;
+  place: string;
+  date: string;
+  title: string;
+  desc: string;
+  image: string;
+};
+
+export function MiniEventCard({ e }: { e: MiniEvent }) {
+  return (
+    <div className="mec">
+      <div className="mec__head">
+        <span className="mec__tag">{e.tag}</span>
+        <div className="mec__thumb">
+          <Image src={e.image} alt={e.title} fill className="img-cover" sizes="96px" />
+        </div>
+      </div>
+      <div className="mec__meta">
+        <span className="mec__meta-item">
+          <span className="mec__icon">◉</span>
+          {e.place}
+        </span>
+        <span className="mec__meta-item">
+          <span className="mec__icon">▦</span>
+          {e.date}
+        </span>
+      </div>
+      <h3 className="mec__title">{e.title}</h3>
+      <p className="mec__desc">{e.desc}</p>
+      <Link href="/events" className="link-arrow link-arrow--spaced-lg">
+        Register Interest
+      </Link>
+    </div>
+  );
+}

components/Faq.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Faq({ items }: { items: { q: string; a: string }[] }) {
+  const [open, setOpen] = useState(0);
+  return (
+    <div className="faq">
+      {items.map((it, i) => {
+        const isOpen = open === i;
+        return (
+          <div key={it.q} className={`faq__item ${isOpen ? "faq__item--open" : ""}`}>
+            <button
+              onClick={() => setOpen(isOpen ? -1 : i)}
+              className="faq__trigger"
+            >
+              <span className="faq__question">{it.q}</span>
+              <span className="faq__icon">{isOpen ? "✕" : "+"}</span>
+            </button>
+            <div className={`faq__panel ${isOpen ? "faq__panel--open" : ""}`}>
+              <div className="faq__panel-inner">
+                <p className="faq__answer">{it.a}</p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,104 @@
+import Link from "next/link";
+import Logo from "./Logo";
+
+const groups = [
+  {
+    title: "PUBLIC",
+    links: [
+      { label: "About us", href: "/about" },
+      { label: "Events", href: "/events" },
+      { label: "News", href: "/knowledge" },
+      { label: "Gallery", href: "/gallery" },
+      { label: "Knowledge", href: "/knowledge" },
+      { label: "Get Your Portal", href: "/why-join" },
+    ],
+  },
+  {
+    title: "TRUST",
+    links: [
+      { label: "Privacy", href: "#" },
+      { label: "Consent", href: "#" },
+      { label: "Contact", href: "/contact" },
+      { label: "Member Login", href: "/why-join" },
+      { label: "Sponsor", href: "#" },
+      { label: "Blog", href: "/knowledge" },
+    ],
+  },
+];
+
+function Social({ d }: { d: string }) {
+  return (
+    <span className="footer__social">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
+        <path d={d} />
+      </svg>
+    </span>
+  );
+}
+
+export default function Footer() {
+  return (
+    <footer className="footer">
+      <div className="container footer__grid">
+        <div className="footer__brand">
+          <Logo size={40} variant="light" />
+          <p className="footer__about">
+            UP Parivaar Dallas public portal prototype powered by Insignia TOWER.
+            Replace sample content with committee-approved live copy before launch.
+          </p>
+          <p className="footer__disclaimer">
+            Disclaimer: The services provided are for wellness purposes only and are
+            not a substitute for medical treatment.
+          </p>
+        </div>
+
+        {groups.map((g) => (
+          <div key={g.title}>
+            <h4 className="footer__heading">{g.title}</h4>
+            <ul className="footer__list">
+              {g.links.map((l) => (
+                <li key={l.label}>
+                  <Link href={l.href} className="footer__link">
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+
+        <div>
+          <h4 className="footer__heading">CONTACT INFO</h4>
+          <ul className="footer__contact">
+            <li className="footer__contact-item">
+              <span className="footer__icon">◉</span>
+              9300 John Hickman Pkwy, Building -3, Suite #302, Frisco-TX-75035
+            </li>
+            <li className="footer__contact-item footer__contact-item--center">
+              <span className="footer__icon">✆</span> 973-710-2714
+            </li>
+            <li className="footer__contact-item footer__contact-item--center">
+              <span className="footer__icon">✉</span> info@upparivaardallas.com
+            </li>
+            <li className="footer__contact-web">upparivaardallas.com</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className="footer__bottom">
+        <div className="container footer__bottom-inner">
+          <p className="footer__copy">
+            © 2026 UP Parivar Dallas · Powered by Insignia
+          </p>
+          <div className="footer__socials">
+            <Social d="M13.5 21v-8h2.7l.4-3h-3.1V8.1c0-.9.3-1.5 1.5-1.5H17V3.9c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1V10H8v3h2.6v8h2.9Z" />
+            <Social d="M6.94 6.5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0ZM3.3 8.4h3.28V21H3.3V8.4Zm5.35 0h3.14v1.72h.05c.44-.83 1.5-1.7 3.1-1.7 3.3 0 3.9 2.17 3.9 5V21h-3.27v-4.4c0-1.05-.02-2.4-1.46-2.4-1.47 0-1.7 1.14-1.7 2.32V21H8.65V8.4Z" />
+            <Social d="M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.42.56.22.96.48 1.38.9.42.42.68.82.9 1.38.17.42.37 1.06.42 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.42 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.17-1.06.37-2.23.42-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.42a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.17-.42-.37-1.06-.42-2.23C2.2 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.42-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.17 1.06-.37 2.23-.42C8.42 2.2 8.8 2.2 12 2.2Zm0 4.9a4.9 4.9 0 1 0 0 9.8 4.9 4.9 0 0 0 0-9.8Zm0 8.08a3.18 3.18 0 1 1 0-6.36 3.18 3.18 0 0 1 0 6.36Zm6.24-8.28a1.14 1.14 0 1 1-2.29 0 1.14 1.14 0 0 1 2.29 0Z" />
+            <Social d="M18.9 2H22l-6.9 7.9L23 22h-6.4l-5-6.6L5.8 22H2.7l7.4-8.5L1.7 2h6.5l4.6 6.1L18.9 2Zm-1.1 18h1.7L7.3 3.7H5.5L17.8 20Z" />
+            <Social d="M22 7.2s-.2-1.4-.8-2c-.8-.8-1.7-.8-2.1-.9C16.2 4.1 12 4.1 12 4.1h0s-4.2 0-7.1.2c-.4 0-1.3.1-2.1.9-.6.6-.8 2-.8 2S1.8 8.8 1.8 10.5v1.6c0 1.6.2 3.3.2 3.3s.2 1.4.8 2c.8.8 1.8.8 2.3.9 1.7.2 7 .2 7 .2s4.2 0 7.1-.2c.4 0 1.3-.1 2.1-.9.6-.6.8-2 .8-2s.2-1.6.2-3.3v-1.6c0-1.6-.2-3.3-.2-3.3ZM10 14.6V8.9l4.9 2.9-4.9 2.8Z" />
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/HomeJourney.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+
+const journey = [
+  { n: "01", t: "Roots", d: "Homes, festivals and family in Uttar Pradesh, the culture we carry within, preserving traditions and strengthening bonds.", img: "/img/home_10_.jpg" },
+  { n: "02", t: "Migration", d: "New jobs, new cities, new beginnings — arriving in North Texas with hope, ambition, and opportunity.", img: "/img/home_14_.jpg" },
+  { n: "03", t: "Community", d: "A WhatsApp message becomes friendship. Friendship becomes parivaar, creating lifelong bonds, trust, memories and community together.", img: "/img/home_9_.jpg" },
+  { n: "04", t: "Growth", d: "Thousands of families, dozens of events, and a trusted network fostering connections, support, and belonging.", img: "/img/home_6_.jpg" },
+  { n: "05", t: "Digital Future", d: "A private digital home with AI memory, preserving stories, connections, milestones, and cherished family moments.", img: "/img/home_5_.jpg" },
+  { n: "06", t: "Global Impact", d: "A borderless network fostering innovation, connection, cultural pride, collaboration, and meaningful relationships worldwide.", img: "/img/home_7_.jpg" },
+];
+
+export default function HomeJourney() {
+  const [active, setActive] = useState(0);
+  const stepRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const idx = Number((entry.target as HTMLElement).dataset.index);
+            if (!Number.isNaN(idx)) setActive(idx);
+          }
+        });
+      },
+      // A step becomes active once it crosses the vertical centre of the viewport.
+      { rootMargin: "-45% 0px -45% 0px", threshold: 0 }
+    );
+    stepRefs.current.forEach((el) => el && observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <section className="section-white">
+      <div className="container home-journey">
+        <div className="home-journey__media">
+          <span className="eyebrow">UP Parivaar</span>
+          <h2 className="display-title ts-34-42 home-journey__title">
+            From the banks of the Ganga to the heart of Texas
+          </h2>
+          <p className="home-journey__lead">
+            Every family carries a journey. Ours began thousands of miles away — and
+            it continues here, together, as one parivaar.
+          </p>
+          <div className="home-journey__photo">
+            <Image src="/img/home-journey__photo.png" alt="Diwali at home" fill className="img-cover" sizes="320px" />
+          </div>
+        </div>
+
+        <div className="home-journey__timeline">
+          <span className="home-journey__line" />
+          {journey.map((j, i) => (
+            <div
+              key={j.n}
+              data-index={i}
+              ref={(el) => {
+                stepRefs.current[i] = el;
+              }}
+              className={`home-journey__item ${i === active ? "home-journey__item--active" : ""}`}
+            >
+              <div className="home-journey__step-media">
+                <Image
+                  src={j.img}
+                  alt={j.t}
+                  fill
+                  className="img-cover"
+                  sizes="(max-width:1024px) 100vw, 600px"
+                />
+              </div>
+              <div className="home-journey__step">
+                <span className="home-journey__num">{j.n}</span>
+                <h3 className="home-journey__step-title">{j.t}</h3>
+                <p className="home-journey__step-desc">{j.d}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/JourneyBanner.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+
+const stages = [
+  { tab: "Roots In UP", title: "Roots in Uttar Pradesh", sub: "Homes, festivals and the culture we carry within.", img: "/img/home_10_.jpg" },
+  { tab: "Cities", title: "New Cities, New Beginnings", sub: "Arriving in North Texas with hope and ambition.", img: "/img/home_9_.jpg" },
+  { tab: "The Journey", title: "The Journey Together", sub: "A WhatsApp message becomes a parivaar.", img: "/img/home_14_.jpg" },
+  { tab: "Dallas", title: "Rooted in Dallas", sub: "Thousands of families, dozens of events.", img: "/img/home_6_.jpg" },
+  { tab: "UP Parivar", title: "One UP Parivar", sub: "A trusted network fostering belonging.", img: "/img/home_5_.jpg" },
+  { tab: "Future", title: "A Borderless Future", sub: "Connection and cultural pride, worldwide.", img: "/img/home_2_.jpg" },
+];
+
+export default function JourneyBanner() {
+  const [active, setActive] = useState(0);
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let frame = 0;
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        const el = sectionRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const total = rect.height - window.innerHeight;
+        const scrolled = Math.min(Math.max(-rect.top, 0), total);
+        const progress = total > 0 ? scrolled / total : 0;
+        const idx = Math.min(stages.length - 1, Math.floor(progress * stages.length));
+        setActive(idx);
+      });
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  const current = stages[active];
+
+  return (
+    <section ref={sectionRef} className="jbanner">
+      <div className="jbanner__stage">
+        {stages.map((s, i) => (
+          <div
+            key={s.tab}
+            className={`jbanner__slide ${i === active ? "jbanner__slide--active" : ""}`}
+            aria-hidden={i !== active}
+          >
+            <Image src={s.img} alt={s.title} fill priority={i === 0} className="img-cover" sizes="100vw" />
+          </div>
+        ))}
+        <div className="jbanner__overlay" />
+
+        <div className="container jbanner__inner">
+          <div className="jbanner__content" key={active}>
+            <span className="eyebrow-light">◉ Our Journey</span>
+            <h2 className="jbanner__title">{current.title}</h2>
+            <p className="jbanner__sub">{current.sub}</p>
+          </div>
+        </div>
+
+        <div className="jbanner__tabs">
+          {stages.map((s, i) => (
+            <div
+              key={s.tab}
+              className={`jbanner__tab ${i === active ? "jbanner__tab--active" : ""}`}
+            >
+              <p className="jbanner__tab-title">{s.tab}</p>
+              <p className="jbanner__tab-sub">Melas, garba nights.</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

components/Logo.tsx

@@ -0,0 +1,43 @@
+export default function Logo({
+  size = 40,
+  variant = "dark",
+}: {
+  size?: number;
+  variant?: "dark" | "light";
+}) {
+  // A ring of stylised people around a warm sun — approximates the UP Parivaar mark.
+  const people = [
+    { a: -90, c: "#2530C4" }, // top - navy/blue
+    { a: -30, c: "#F7A400" }, // right upper - yellow
+    { a: 30, c: "#FF8001" }, // right lower - orange
+    { a: 90, c: "#F45700" }, // bottom - deep orange
+    { a: 150, c: "#7ECA4F" }, // left lower - green
+    { a: 210, c: "#3FB27A" }, // left upper - teal-green
+  ];
+
+  return (
+    <span className="logo">
+      <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden>
+        <circle cx="50" cy="50" r="17" fill="#fff" stroke="#F1E4D6" />
+        {people.map((p, i) => {
+          const rad = (p.a * Math.PI) / 180;
+          const cx = 50 + Math.cos(rad) * 31;
+          const cy = 50 + Math.sin(rad) * 31;
+          return (
+            <g key={i} transform={`rotate(${p.a + 90} ${cx} ${cy})`}>
+              <circle cx={cx} cy={cy - 8} r="6.4" fill={p.c} />
+              <path
+                d={`M ${cx - 9} ${cy + 12} Q ${cx} ${cy - 3} ${cx + 9} ${cy + 12} Z`}
+                fill={p.c}
+              />
+            </g>
+          );
+        })}
+      </svg>
+      <span className="logo__text">
+        <span className={`logo__title logo__title--${variant}`}>UP PARIVAAR</span>
+        <span className={`logo__sub logo__sub--${variant}`}>DALLAS</span>
+      </span>
+    </span>
+  );
+}

components/MembershipForm.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useState } from "react";
+
+const steps = ["Basic Info", "Family Info", "Professional", "Interests", "Privacy", "Review"];
+
+const fieldsByStep: Record<number, { label: string; type?: string; placeholder?: string; options?: string[]; full?: boolean }[]> = {
+  0: [
+    { label: "Full Name" },
+    { label: "Email Address", type: "email" },
+    { label: "Phone Number" },
+    { label: "City" },
+    { label: "State", type: "select", options: ["select state", "Texas", "Oklahoma", "Arkansas", "Louisiana"] },
+  ],
+  1: [
+    { label: "Spouse Name" },
+    { label: "Number of Family Members" },
+    { label: "Children (ages)", full: true },
+  ],
+  2: [
+    { label: "Profession" },
+    { label: "Company" },
+    { label: "LinkedIn / Website", full: true },
+  ],
+  3: [{ label: "Your Interests", full: true, placeholder: "Community Service, Technology, Cricket…" }],
+  4: [
+    { label: "Profile Visibility", type: "select", options: ["Members Only", "Public", "Circles Only"] },
+    { label: "Contact Visibility", type: "select", options: ["Connections", "Hidden", "All Members"] },
+  ],
+  5: [{ label: "Anything else you'd like us to know?", full: true }],
+};
+
+export default function MembershipForm() {
+  const [step, setStep] = useState(0);
+  const fields = fieldsByStep[step];
+
+  return (
+    <div className="form">
+      <div className="form__card">
+        {/* Steps */}
+        <div className="form__steps no-scrollbar">
+          {steps.map((s, i) => (
+            <button key={s} onClick={() => setStep(i)} className="form__step">
+              <p className={`form__step-num ${i === step ? "form__step-num--active" : ""}`}>
+                Step 0{i + 1}
+              </p>
+              <p className={`form__step-label ${i === step ? "form__step-label--active" : ""}`}>
+                {s}
+              </p>
+              {i === step && <span className="form__step-underline" />}
+            </button>
+          ))}
+        </div>
+
+        {/* Fields */}
+        <div className="form__fields-wrap">
+          <h3 className="form__section-title">
+            Step I <span>{steps[step]}</span>
+          </h3>
+          <div className="form__fields">
+            {fields.map((f) => (
+              <div key={f.label} className={f.full ? "form__field--full" : ""}>
+                <label className="form__label">{f.label}</label>
+                {f.type === "select" ? (
+                  <select className="form__select">
+                    {f.options?.map((o) => (
+                      <option key={o}>{o}</option>
+                    ))}
+                  </select>
+                ) : (
+                  <input
+                    type={f.type ?? "text"}
+                    placeholder={f.placeholder}
+                    className="form__input"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="form__actions">
+        <button
+          onClick={() => setStep((s) => Math.max(0, s - 1))}
+          disabled={step === 0}
+          className="btn-ghost"
+        >
+          Back
+        </button>
+        <button
+          onClick={() => setStep((s) => Math.min(steps.length - 1, s + 1))}
+          className="btn-primary"
+        >
+          {step === steps.length - 1 ? "Submit" : "Next"}
+        </button>
+      </div>
+    </div>
+  );
+}

components/Navbar.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import Logo from "./Logo";
+
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/events", label: "Events" },
+  { href: "/knowledge", label: "Knowledge" },
+  { href: "/gallery", label: "Gallery" },
+  { href: "/why-join", label: "Why Join" },
+  { href: "/contact", label: "Contact" },
+];
+
+export default function Navbar() {
+  const pathname = usePathname();
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : pathname.startsWith(href);
+
+  return (
+    <header className="nav">
+      <div className="container nav__inner">
+        <nav className={`nav__bar ${scrolled ? "nav__bar--scrolled" : ""}`}>
+          <Link href="/" className="nav__brand">
+            <Logo size={38} />
+          </Link>
+
+          <ul className="nav__links">
+            {links.map((l) => (
+              <li key={l.href}>
+                <Link
+                  href={l.href}
+                  className={`nav__link ${isActive(l.href) ? "nav__link--active" : ""}`}
+                >
+                  {l.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          <div className="nav__actions">
+            <Link href="/why-join" className="btn-primary btn-primary--sm nav__login">
+              Member Login
+            </Link>
+            <button
+              onClick={() => setOpen((v) => !v)}
+              className="nav__toggle"
+              aria-label="Menu"
+            >
+              <span className={`nav__toggle-box ${open ? "is-open" : ""}`}>
+                <span className="nav__bar-line nav__bar-line--1" />
+                <span className="nav__bar-line nav__bar-line--2" />
+                <span className="nav__bar-line nav__bar-line--3" />
+              </span>
+            </button>
+          </div>
+        </nav>
+
+        {open && (
+          <div className="nav__mobile">
+            <ul className="nav__mobile-list">
+              {links.map((l) => (
+                <li key={l.href}>
+                  <Link
+                    href={l.href}
+                    onClick={() => setOpen(false)}
+                    className={`nav__mobile-link ${
+                      isActive(l.href) ? "nav__mobile-link--active" : ""
+                    }`}
+                  >
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+              <li className="nav__mobile-cta">
+                <Link
+                  href="/why-join"
+                  onClick={() => setOpen(false)}
+                  className="btn-primary nav__mobile-login"
+                >
+                  Member Login
+                </Link>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}

components/ScrollReveal.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+// Selectors for elements that should animate in on scroll (scoped to <main>).
+const TARGETS = [
+  "h1", "h2", "h3", "h4",
+  ".eyebrow", ".eyebrow-light",
+  "p",
+  ".btn-primary", ".btn-ghost", ".link-arrow", ".chip",
+  '[class*="card"]', '[class*="__tile"]', '[class*="__item"]',
+  '[class*="__pillar"]', '[class*="__step"]', '[class*="__cat"]',
+]
+  .map((s) => `main ${s}`)
+  .join(",");
+
+// Sections that manage their own motion / must not be hidden.
+const EXCLUDE = ".home-hero, .jbanner, .nav, .footer, nav, footer, header";
+
+export default function ScrollReveal() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let cleanup = () => {};
+    const id = window.requestAnimationFrame(() => {
+      const all = Array.from(document.querySelectorAll<HTMLElement>(TARGETS)).filter(
+        (el) => !el.closest(EXCLUDE)
+      );
+
+      // Keep only the outermost targets so a card animates as one unit
+      // (its inner heading/paragraph don't animate separately).
+      const set = new Set(all);
+      const targets = all.filter((el) => {
+        let p = el.parentElement;
+        while (p) {
+          if (set.has(p)) return false;
+          p = p.parentElement;
+        }
+        return true;
+      });
+
+      // Small stagger between siblings that share a parent.
+      const byParent = new Map<Element, HTMLElement[]>();
+      targets.forEach((el) => {
+        const parent = el.parentElement;
+        if (!parent) return;
+        const arr = byParent.get(parent) ?? [];
+        arr.push(el);
+        byParent.set(parent, arr);
+      });
+      byParent.forEach((arr) => {
+        arr.forEach((el, idx) => {
+          el.style.setProperty("--reveal-delay", `${Math.min(idx * 0.08, 0.4)}s`);
+        });
+      });
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              entry.target.classList.add("is-visible");
+              observer.unobserve(entry.target);
+            }
+          });
+        },
+        { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
+      );
+
+      const variantFor = (el: HTMLElement) => {
+        const cls = el.className || "";
+        if (el.matches(".eyebrow, .eyebrow-light")) return "reveal--left";
+        if (
+          /card|__tile|__item|__pillar|__step|__cat/.test(
+            typeof cls === "string" ? cls : ""
+          )
+        ) {
+          return "reveal--zoom";
+        }
+        return "reveal--up";
+      };
+
+      targets.forEach((el) => {
+        el.classList.add("reveal", variantFor(el));
+        const rect = el.getBoundingClientRect();
+        const inView = rect.top < window.innerHeight && rect.bottom > 0;
+        if (inView) {
+          // Already visible on load — reveal instantly, no hidden flash.
+          el.classList.add("is-visible");
+        } else {
+          observer.observe(el);
+        }
+      });
+
+      cleanup = () => observer.disconnect();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(id);
+      cleanup();
+    };
+  }, [pathname]);
+
+  return null;
+}

components/Tabs.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+
+export default function Tabs({
+  tabs,
+}: {
+  tabs: { label: string; content: ReactNode }[];
+}) {
+  const [active, setActive] = useState(0);
+  return (
+    <div>
+      <div className="tabs__list">
+        {tabs.map((t, i) => (
+          <button
+            key={t.label}
+            onClick={() => setActive(i)}
+            className={`tabs__tab ${active === i ? "tabs__tab--active" : ""}`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+      <div className="tabs__panel">{tabs[active].content}</div>
+    </div>
+  );
+}

components/WhatsAppFab.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function WhatsAppFab() {
+  return (
+    <Link
+      href="https://wa.me/19737102714"
+      target="_blank"
+      aria-label="Chat on WhatsApp"
+      className="fab"
+    >
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24 2.2 0 4.27.86 5.82 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.4-.42-.56-.43l-.48-.01c-.16 0-.43.06-.66.31-.22.24-.86.85-.86 2.07 0 1.22.89 2.4 1.01 2.56.13.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28Z" />
+      </svg>
+    </Link>
+  );
+}

components/ui.tsx

@@ -0,0 +1,71 @@
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export function SectionHeading({
+  eyebrow,
+  title,
+  desc,
+  cta,
+  align = "left",
+}: {
+  eyebrow: string;
+  title: ReactNode;
+  desc?: ReactNode;
+  cta?: { label: string; href: string };
+  align?: "left" | "center" | "split";
+}) {
+  if (align === "center") {
+    return (
+      <div className="section-head--center">
+        <span className="eyebrow">{eyebrow}</span>
+        <h2 className="display-title ts-34-44 section-head__title">{title}</h2>
+        {desc && <p className="section-head__desc section-head__desc--center">{desc}</p>}
+      </div>
+    );
+  }
+  if (align === "split") {
+    return (
+      <div className="section-head--split">
+        <div className="section-head__col">
+          <span className="eyebrow">{eyebrow}</span>
+          <h2 className="display-title ts-32-40 section-head__title">{title}</h2>
+        </div>
+        <div className="section-head__aside">
+          {desc && <p className="section-head__desc">{desc}</p>}
+          {cta && (
+            <Link href={cta.href} className="link-arrow">
+              {cta.label}
+            </Link>
+          )}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div>
+      <span className="eyebrow">{eyebrow}</span>
+      <h2 className="display-title ts-32-40 section-head__title">{title}</h2>
+      {desc && <p className="section-head__desc section-head__desc--left">{desc}</p>}
+    </div>
+  );
+}
+
+export function Stars({ n = 3, total = 5 }: { n?: number; total?: number }) {
+  return (
+    <div className="stars">
+      {Array.from({ length: total }).map((_, i) => (
+        <svg key={i} width="16" height="16" viewBox="0 0 24 24" fill={i < n ? "#FFC107" : "#E3E3E3"}>
+          <path d="M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.6 5.9 20.4l1.4-6.8L2.2 9l6.9-.7L12 2z" />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export function Arrow({ className = "" }: { className?: string }) {
+  return (
+    <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

lib/data.ts

@@ -0,0 +1,136 @@
+import type { FeaturedEvent, MiniEvent } from "@/components/EventCard";
+
+const schedule = [
+  { label: "Welcome & Registration", time: "5:00 PM" },
+  { label: "Cultural Activities", time: "5:30 PM" },
+  { label: "Devotional Program", time: "6:30 PM" },
+  { label: "Community Dinner", time: "7:30 PM" },
+];
+
+export const featuredEvents: FeaturedEvent[] = [
+  {
+    title: "Sawan Milan & Seva Kickoff",
+    date: "July 20, 2026",
+    step: "01 / 06",
+    where: "Sunday, July 19 · North Texas community hall · final venue after committee approval",
+    desc: "A family evening with devotional music, kids activities, volunteer desks and newcomer welcome.",
+    image: "/img/events_1_.jpg",
+    thumb: "/img/events_2_.jpg",
+    schedule,
+  },
+  {
+    title: "Diwali Celebration",
+    date: "July 20, 2026",
+    step: "02 / 06",
+    where: "Sunday, July 19 · North Texas community hall · final venue after committee approval",
+    desc: "An evening of diyas, cultural performances, food and the festival of lights.",
+    image: "/img/events_3_.jpg",
+    thumb: "/img/events_4_.jpg",
+    schedule,
+  },
+];
+
+export const miniEvents: MiniEvent[] = [
+  {
+    tag: "Festival",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Navratri Garba Night",
+    desc: "Nine nights of dance, dandiya, devotion, vibrant celebrations, cultural traditions, community spirit, and joy.",
+    image: "/img/events_5_.jpg",
+  },
+  {
+    tag: "Festival",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Youth Cricket Cup",
+    desc: "Next-gen Parivaar takes the field, connecting cultures, celebrating heritage, and building lasting bonds.",
+    image: "/img/events_7_.jpg",
+  },
+  {
+    tag: "Food",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Community Food Drive",
+    desc: "Pack and serve 2,000 meals across North Texas, supporting families and strengthening community connections together.",
+    image: "/img/events_9_.jpg",
+  },
+  {
+    tag: "Festival",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Bollywood Music Night",
+    desc: "Enjoy live playback, antakshari, and dancing with friends and family until late night, creating unforgettable memories together.",
+    image: "/img/events_6_.jpg",
+  },
+  {
+    tag: "Festival",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Diwali Gala & Awards",
+    desc: "Our biggest night brings together lights, dinner, celebration, unforgettable moments, cherished memories, and joy.",
+    image: "/img/events_8_.jpg",
+  },
+  {
+    tag: "Festival",
+    place: "Vrindavan, India",
+    date: "March 14-15, 2026",
+    title: "Spring Family Picnic",
+    desc: "Games, potluck, and sunshine bring families together for laughter, connection, lasting memories, and fun.",
+    image: "/img/events_10_.jpg",
+  },
+];
+
+export const testimonials = [
+  {
+    stars: 3,
+    quote:
+      "We landed in Frisco knowing no one. Within a week the parivaar helped us find a home, a pediatrician and a Diwali to attend.",
+    name: "Anjali & Rohit",
+    role: "New family · Frisco",
+    avatar: "/img/about_5_.jpg",
+  },
+  {
+    stars: 3,
+    quote:
+      "My daughter found her best friends through youth cricket. Watching the next generation grow up with this culture is everything.",
+    name: "Manoj Tiwari",
+    role: "Parent · Plano",
+    avatar: "/img/about_6_.jpg",
+  },
+  {
+    stars: 3,
+    quote:
+      "I volunteered for one food drive and found my purpose. 200 meals became 2,000. The seva spirit is contagious.",
+    name: "Priya Singh",
+    role: "Volunteer · Irving",
+    avatar: "/img/about_8_.jpg",
+  },
+];
+
+export const faqs = [
+  {
+    q: "What is UP Parivar Dallas?",
+    a: "UP Parivar Dallas is a nonprofit cultural and community organization that brings together families connected to Uttar Pradesh living across North Texas. We celebrate our traditions, festivals, culture, and shared values while building meaningful community connections.",
+  },
+  {
+    q: "Do I need to be from Uttar Pradesh to participate?",
+    a: "Not at all. While our roots are in Uttar Pradesh, everyone who shares our values and enjoys our culture is warmly welcome to attend events and join the community.",
+  },
+  {
+    q: "What types of events does UP Parivar Dallas organize?",
+    a: "We host festivals like Diwali and Holi, cultural performances, youth sports, family picnics, seva and volunteering drives, and professional networking gatherings across the Dallas-Fort Worth metroplex.",
+  },
+  {
+    q: "How can I become a member?",
+    a: "Complete the membership application on our Why Join page. Once submitted, a volunteer will personally reach out to welcome you and help you find your circles.",
+  },
+  {
+    q: "Are families and children welcome at events?",
+    a: "Absolutely. Our events are family-first, with dedicated kids zones, activities, and programs designed for all generations.",
+  },
+  {
+    q: "Is UP Parivar Dallas a nonprofit organization?",
+    a: "Yes. We are a volunteer-run nonprofit community organization powered entirely by families who care about keeping our culture alive in Dallas.",
+  },
+];

next.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "images.unsplash.com" },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "up-parivaar-dallas",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "15.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.10.7",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
+    "autoprefixer": "10.4.20",
+    "postcss": "8.5.1",
+    "tailwindcss": "3.4.17",
+    "typescript": "5.7.3"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    autoprefixer: {},
+  },
+};
+
+export default config;