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,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>
+  );
+}