252 lines
11 KiB
TypeScript
252 lines
11 KiB
TypeScript
import Image from "next/image";
|
|
import { SectionHeading } from "@/components/ui";
|
|
import Tabs from "@/components/Tabs";
|
|
import Carousel from "@/components/Carousel";
|
|
import Logo from "@/components/Logo";
|
|
|
|
export const metadata = { title: "About — UP Parivaar Dallas" };
|
|
|
|
const marquee = [
|
|
"/img/about_8_.jpg", "/img/about_5_.jpg", "/img/about_3_.jpg", "/img/about_22_.jpg",
|
|
"/img/about_7_.jpg", "/img/about_2_.jpg", "/img/about_21_.jpg", "/img/about_24_.jpg",
|
|
];
|
|
|
|
const team = [
|
|
{ name: "Pankaj Mishra", role: "Operations Head", img: "/img/Pankaj%20Mishra.png" },
|
|
{ name: "Arjun Verma", role: "Chief Engineer", img: "/img/Vikram%20Nair.png" },
|
|
{ name: "Rohit Sharma", role: "Project Manager", img: "/img/Venky%20Pandey.png" },
|
|
{ name: "Sneha Reddy", role: "Project Manager", img: "/img/Nidhi%20Jain.png" },
|
|
{ name: "Vikram Nair", role: "Project Manager", img: "/img/Vikram%20Nair.png" },
|
|
{ name: "Amit Joshi", role: "Project Manager", img: "/img/Pankaj%20Mishra.png" },
|
|
];
|
|
|
|
const committee = [
|
|
{ name: "Suresh Gupta", role: "Cultural Lead", img: "/img/Venky%20Pandey.png" },
|
|
{ name: "Neha Kapoor", role: "Events Lead", img: "/img/Nidhi%20Jain.png" },
|
|
{ name: "Deepak Rao", role: "Seva Coordinator", img: "/img/Pankaj%20Mishra.png" },
|
|
{ name: "Kavita Menon", role: "Youth Programs", img: "/img/Nidhi%20Jain.png" },
|
|
{ name: "Rahul Bose", role: "Finance", img: "/img/Vikram%20Nair.png" },
|
|
{ name: "Manish Tyagi", role: "Membership", img: "/img/Venky%20Pandey.png" },
|
|
];
|
|
|
|
const whatWeDo = [
|
|
{ t: "Cultural Celebrations", d: "Organizing festivals and events that showcase the traditions and heritage of Uttar Pradesh.", img: "/img/about_19_.jpg" },
|
|
{ t: "Family Gatherings", d: "Creating opportunities for families to meet, connect, and build lasting friendships.", img: "/img/about_22_.jpg" },
|
|
{ t: "Community Programs", d: "Hosting activities that encourage engagement, learning, and collaboration.", img: "/img/about_21_.jpg" },
|
|
{ t: "Youth Engagement", d: "Helping younger generations stay connected to their culture and community.", img: "/img/about_24_.jpg" },
|
|
{ t: "Volunteer Initiatives", d: "Supporting charitable and community-focused causes through collective efforts.", img: "/img/about_20_.jpg" },
|
|
{ t: "Networking & Support", d: "Providing opportunities for personal, professional, and social connections.", img: "/img/about_23_.jpg" },
|
|
];
|
|
|
|
const stats = [
|
|
{ n: "500+", l: "Community Members" },
|
|
{ n: "25+", l: "Events Organized" },
|
|
{ n: "100+", l: "Volunteer Hours" },
|
|
{ n: "20+", l: "Multiple Community" },
|
|
];
|
|
|
|
function PersonCard({ p }: { p: { name: string; role: string; img: string } }) {
|
|
return (
|
|
<div className="person-card">
|
|
<div className="person-card__media">
|
|
<Image src={p.img} alt={p.name} fill className="person-card__img" sizes="220px" />
|
|
</div>
|
|
<div className="person-card__body">
|
|
<p className="person-card__name">{p.name}</p>
|
|
<p className="person-card__role">{p.role}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<>
|
|
{/* HERO */}
|
|
<section className="page-glow page-hero">
|
|
<div className="container hero-center">
|
|
<span className="eyebrow">About UP Parivaar Dallas</span>
|
|
<h1 className="display-title ts-36-48 about-hero__title">
|
|
Bringing Uttar Pradesh's Roots, Culture & Traditions to Dallas
|
|
</h1>
|
|
<p className="about-hero__lead">
|
|
A nonprofit community organization connecting families, celebrating
|
|
heritage, and strengthening community bonds.
|
|
</p>
|
|
</div>
|
|
<div className="about-hero__marquee no-scrollbar">
|
|
{marquee.map((src, i) => {
|
|
const variant = ["about-hero__marquee-item--wide", "about-hero__marquee-item--narrow", ""][i % 3];
|
|
return (
|
|
<div key={i} className={`about-hero__marquee-item ${variant}`.trim()}>
|
|
<Image src={src} alt="" fill className="img-cover" sizes="380px" />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* FOUNDERS */}
|
|
<section className="section-white about-founders">
|
|
<div className="container">
|
|
<SectionHeading
|
|
eyebrow="The Volunteers Behind It All"
|
|
title={<>Led by the community, for the community</>}
|
|
desc="Not a company. A volunteer-run family — powered by people who simply care."
|
|
align="split"
|
|
/>
|
|
<div className="about-founders__grid">
|
|
<div className="founder-card">
|
|
<div className="founder-card__media">
|
|
<Image src="/img/Venky%20Pandey.png" alt="Venky Pandey" fill className="img-cover-top" sizes="380px" />
|
|
</div>
|
|
<div className="founder-card__body">
|
|
<div>
|
|
<p className="founder-card__name">Venky Pandey</p>
|
|
<p className="founder-card__role">Founder</p>
|
|
</div>
|
|
<p className="founder-card__email">venkeypj@upparivaar.com</p>
|
|
</div>
|
|
</div>
|
|
<div className="founder-card--logo">
|
|
<img src="/img/logoaboutteam.png" alt="" />
|
|
</div>
|
|
<div className="founder-card">
|
|
<div className="founder-card__media">
|
|
<Image src="/img/Nidhi%20Jain.png" alt="Nidhi Jain" fill className="img-cover-top" sizes="380px" />
|
|
</div>
|
|
<div className="founder-card__body">
|
|
<div>
|
|
<p className="founder-card__name">Nidhi Jain</p>
|
|
<p className="founder-card__role">Co-Founder</p>
|
|
</div>
|
|
<p className="founder-card__email">nidhij@upparivaar.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-founders__carousels">
|
|
<Carousel title="Volunteer Team" subtitle="Visionary leaders driving innovation and excellence">
|
|
{team.map((p) => (
|
|
<PersonCard key={p.name + p.role} p={p} />
|
|
))}
|
|
</Carousel>
|
|
<Carousel title="Core Committee Members" subtitle="Visionary leaders driving innovation and excellence">
|
|
{committee.map((p) => (
|
|
<PersonCard key={p.name + p.role} p={p} />
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* MISSION / VISION */}
|
|
<section className="section-cream about-mission">
|
|
<div className="container">
|
|
<Tabs
|
|
tabs={[
|
|
{
|
|
label: "Our Mission",
|
|
content: (
|
|
<div className="about-mission__panel">
|
|
<div className="about-mission__grid">
|
|
<div>
|
|
<h3 className="about-mission__title">Our Mission</h3>
|
|
<p className="about-mission__text">
|
|
Our mission is to strengthen the Uttar Pradesh community in Dallas
|
|
by fostering cultural pride, encouraging community engagement, and
|
|
creating opportunities for families to connect, celebrate, and
|
|
support one another.
|
|
</p>
|
|
<h4 className="about-mission__subtitle">Mission Pillars</h4>
|
|
<ul className="about-mission__list">
|
|
{["Preserve our cultural heritage", "Strengthen family and community bonds", "Support community service initiatives", "Inspire future generations", "Promote unity and belonging"].map((m) => (
|
|
<li key={m}>
|
|
<span className="about-mission__bullet">•</span> {m}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="about-mission__media">
|
|
<Image src="/img/about_18_.jpg" alt="Mission" fill className="img-cover" sizes="500px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
label: "Our Vision",
|
|
content: (
|
|
<div className="about-mission__panel">
|
|
<div className="about-mission__grid">
|
|
<div>
|
|
<h3 className="about-mission__title">Our Vision</h3>
|
|
<p className="about-mission__text">
|
|
We envision a thriving, connected Uttar Pradesh community across
|
|
North Texas — where every family feels at home, every tradition is
|
|
celebrated, and every generation carries our culture forward with
|
|
pride.
|
|
</p>
|
|
<h4 className="about-mission__subtitle">Vision Pillars</h4>
|
|
<ul className="about-mission__list">
|
|
{["A borderless cultural network", "Trusted member-led community", "Opportunities for every generation", "A living archive of our stories", "Seva at the heart of everything"].map((m) => (
|
|
<li key={m}>
|
|
<span className="about-mission__bullet">•</span> {m}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="about-mission__media">
|
|
<Image src="/img/about_3_.jpg" alt="Vision" fill className="img-cover" sizes="500px" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
|
|
<div className="about-stats">
|
|
{stats.map((s) => (
|
|
<div key={s.l} className="about-stat">
|
|
<div>
|
|
<p className="about-stat__num">{s.n}</p>
|
|
<p className="about-stat__label">{s.l}</p>
|
|
</div>
|
|
<span className="about-stat__icon">◈</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* WHAT WE DO */}
|
|
<section className="section-white about-do">
|
|
<div className="container">
|
|
<div className="about-do__head">
|
|
<h2 className="display-title ts-34-42">What We Do</h2>
|
|
<p className="about-do__lead">
|
|
Building connections through meaningful experiences that bring families,
|
|
friends, and communities together, creating lasting relationships, trust,
|
|
and belonging.
|
|
</p>
|
|
</div>
|
|
<div className="about-do__grid">
|
|
{whatWeDo.map((w) => (
|
|
<div key={w.t} className="about-do__card">
|
|
<div className="about-do__media">
|
|
<Image src={w.img} alt={w.t} fill className="img-cover" sizes="400px" />
|
|
</div>
|
|
<div className="about-do__body">
|
|
<h3 className="about-do__title">{w.t}</h3>
|
|
<p className="about-do__desc">{w.d}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|