201 lines
8.6 KiB
TypeScript
201 lines
8.6 KiB
TypeScript
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's story is waiting to be written
|
|
here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|