286 lines
12 KiB
TypeScript
286 lines
12 KiB
TypeScript
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'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>
|
|
</>
|
|
);
|
|
}
|