85 lines
3.7 KiB
TypeScript
85 lines
3.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|