Initial commit: UP Parivaar Dallas site

2026-07-23 20:08:08 +05:30
commit 9a42e8b6e5
128 changed files with 8409 additions and 0 deletions
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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;
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+  );
+}