Initial commit: UP Parivaar Dallas site
This commit is contained in:
@@ -0,0 +1,251 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { Arrow } from "@/components/ui";
|
||||
|
||||
export const metadata = { title: "Contact Us — UP Parivaar Dallas" };
|
||||
|
||||
const info = [
|
||||
{
|
||||
label: "Phone Number",
|
||||
value: "(555) 123-4567",
|
||||
icon: (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Email Address",
|
||||
value: "info@upparivaar.com",
|
||||
icon: (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" />
|
||||
<path d="m2 7 10 6 10-6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: "Office Hours",
|
||||
value: (
|
||||
<>
|
||||
Monday–Friday: 8am – 6pm
|
||||
<br />
|
||||
Saturday: 9am – 3pm
|
||||
</>
|
||||
),
|
||||
icon: (
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<path d="M12 7v5l3 2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<>
|
||||
{/* HERO */}
|
||||
<section className="page-glow page-hero--tight contactwrap">
|
||||
<div className="container hero-center">
|
||||
<span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
|
||||
<h1 className="display-title ts-34-46 contact-hero__title">Contact Us</h1>
|
||||
<p className="contact-hero__sub">
|
||||
Schedule a complimentary consultation with our community team.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CONTACT CARD */}
|
||||
<section className="contact-section">
|
||||
<div className="container">
|
||||
<div className="contact-card">
|
||||
{/* Info panel */}
|
||||
<div className="contact-info">
|
||||
<div>
|
||||
<h2 className="contact-info__title">Get In Touch</h2>
|
||||
</div>
|
||||
<p className="contact-info__text">
|
||||
Reach out for events, membership, seva opportunities or partnership
|
||||
queries. We're eager to help your family feel at home in Dallas!
|
||||
</p>
|
||||
<div className="contact-info__list">
|
||||
{info.map((it) => (
|
||||
<div key={it.label} className="contact-info__item">
|
||||
<span className="contact-info__icon">{it.icon}</span>
|
||||
<div>
|
||||
<p className="contact-info__label">{it.label}</p>
|
||||
<p className="contact-info__value">{it.value}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Message form */}
|
||||
<div className="contact-form">
|
||||
<h2 className="contact-form__title">Send us a Message</h2>
|
||||
<form className="contact-form__grid">
|
||||
<input className="contact-input" type="text" placeholder="First Name" aria-label="First Name" />
|
||||
<input className="contact-input" type="text" placeholder="Last Name" aria-label="Last Name" />
|
||||
<input className="contact-input" type="email" placeholder="Email Address" aria-label="Email Address" />
|
||||
<input className="contact-input" type="tel" placeholder="Phone Number" aria-label="Phone Number" />
|
||||
<textarea
|
||||
className="contact-textarea contact-form__field--full"
|
||||
placeholder="Project / Message Details"
|
||||
aria-label="Message Details"
|
||||
/>
|
||||
<div className="contact-form__field--full contact-form__actions">
|
||||
<button type="submit" className="btn-primary">
|
||||
Get a Free Consultation <Arrow />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata = { title: "Diwali Mahotsav 2026 — UP Parivaar Dallas" };
|
||||
|
||||
const highlights = [
|
||||
"Cultural Dance & Music Performances",
|
||||
"Traditional Indian Food & Festive Treats",
|
||||
"Family Activities & Kids Zone",
|
||||
"Community Networking Opportunities",
|
||||
"Heritage Showcases & Local Talent",
|
||||
];
|
||||
|
||||
export default function EventDetailPage() {
|
||||
return (
|
||||
<section className="page-glow evd">
|
||||
<div className="container">
|
||||
<span className="eyebrow">Events</span>
|
||||
<div className="evd__head">
|
||||
<h1 className="display-title ts-34-44">
|
||||
Celebrating Culture, Connections & Community Across Dallas
|
||||
</h1>
|
||||
<p className="evd__lead">
|
||||
Every event at UP Parivar Dallas is more than a gathering—it's an
|
||||
opportunity to reconnect with our roots.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="evd__photos">
|
||||
<div className="evd__photo-lg">
|
||||
<Image src="/img/gallery_14_.jpg" alt="Family picnic" fill className="img-cover" sizes="(max-width:768px) 100vw, 720px" />
|
||||
</div>
|
||||
<div className="evd__photo-sm">
|
||||
<Image src="/img/gallery_2_.jpg" alt="Diwali celebration" fill className="img-cover" sizes="(max-width:768px) 100vw, 500px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="evd__meta">
|
||||
<span className="evd__meta-item"><span className="evd__meta-icon">◍</span> UP Parivar Dallas Team</span>
|
||||
<span className="evd__meta-item"><span className="evd__meta-icon">▦</span> October 30, 2026</span>
|
||||
<span className="evd__meta-item"><span className="evd__meta-icon">◈</span> Community Event</span>
|
||||
</div>
|
||||
|
||||
<div className="evd__block">
|
||||
<h2 className="evd__h2">
|
||||
Diwali Mahotsav 2026 – A Festival of Lights & Togetherness
|
||||
</h2>
|
||||
<div className="evd__prose">
|
||||
<p>
|
||||
Join us for one of the most anticipated celebrations of the year as families
|
||||
from across the Dallas-Fort Worth area come together to celebrate Diwali with
|
||||
joy, tradition, and community spirit.
|
||||
</p>
|
||||
<p>
|
||||
The evening will feature cultural performances, traditional music, dance,
|
||||
festive décor, delicious Indian cuisine, children's activities, and a
|
||||
spectacular celebration of Indian heritage.
|
||||
</p>
|
||||
<p>
|
||||
Whether you're attending with family, friends, or meeting community
|
||||
members for the first time, this event offers a warm and welcoming atmosphere
|
||||
for everyone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="evd__split">
|
||||
<div className="evd__split-media">
|
||||
<Image src="/img/about_22_.jpg" alt="Family gathering" fill className="img-cover" sizes="500px" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="evd__h3">
|
||||
Bringing the Spirit of Uttar Pradesh to Dallas
|
||||
</h3>
|
||||
<p className="evd__split-text">
|
||||
Experience the colors, traditions, and values that connect our community
|
||||
across generations and continents.
|
||||
</p>
|
||||
<ul className="evd__highlights">
|
||||
{highlights.map((h) => (
|
||||
<li key={h}>
|
||||
<span className="evd__check">✓</span> {h}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="evd__quote">
|
||||
<span className="evd__quote-mark">”</span>
|
||||
<p className="evd__quote-text">
|
||||
When we celebrate together, we preserve our heritage, strengthen our community,
|
||||
and create lasting memories for future generations.
|
||||
</p>
|
||||
<p className="evd__quote-name">UP Parivar Dallas Community Team</p>
|
||||
<p className="evd__quote-role">Building Connections Beyond Borders</p>
|
||||
</div>
|
||||
|
||||
<div className="evd__block evd__block--wide">
|
||||
<h3 className="evd__h3">Why Community Events Matter</h3>
|
||||
<div className="evd__prose">
|
||||
<p>
|
||||
Community events create meaningful opportunities for families to connect,
|
||||
share experiences, and celebrate cultural traditions in a new home away from
|
||||
home.
|
||||
</p>
|
||||
<p>
|
||||
Through these gatherings, children learn about their heritage, young
|
||||
professionals expand their networks, and families build friendships that last
|
||||
a lifetime.
|
||||
</p>
|
||||
<p>
|
||||
Each event reflects the values of unity, respect, and cultural pride that
|
||||
define the UP Parivar Dallas community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { FeaturedEventCard, MiniEventCard } from "@/components/EventCard";
|
||||
import { featuredEvents, miniEvents } from "@/lib/data";
|
||||
|
||||
export const metadata = { title: "Events — UP Parivaar Dallas" };
|
||||
|
||||
export default function EventsPage() {
|
||||
return (
|
||||
<>
|
||||
<section className="page-glow page-hero--tight">
|
||||
<div className="container hero-center">
|
||||
<span className="eyebrow">Events</span>
|
||||
<h1 className="display-title ts-36-48 events-hero__title">
|
||||
Worth driving across the metroplex for
|
||||
</h1>
|
||||
<p className="events-hero__lead">
|
||||
Not events. Experiences — where food, music, culture and family come
|
||||
together.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-white">
|
||||
<div className="container events-list">
|
||||
<FeaturedEventCard e={featuredEvents[0]} />
|
||||
|
||||
<div className="events-list__grid">
|
||||
{miniEvents.map((e) => (
|
||||
<MiniEventCard key={e.title} e={e} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<FeaturedEventCard e={featuredEvents[1]} />
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,200 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import Image from "next/image";
|
||||
import { Stars } from "@/components/ui";
|
||||
import { testimonials } from "@/lib/data";
|
||||
|
||||
export const metadata = { title: "Knowledge Hub — UP Parivaar Dallas" };
|
||||
|
||||
const categories = [
|
||||
{ img: "/img/knowledge_1_.jpg", title: "Living in Dallas", sub: "Schools, housing, transportation, healthcare" },
|
||||
{ img: "/img/knowledge_3_.jpg", title: "Career & Business", sub: "Professional growth, networking, entrepreneurship" },
|
||||
{ img: "/img/knowledge_5_.jpg", title: "Education & Students", sub: "Admissions, scholarships, mentoring" },
|
||||
{ img: "/img/knowledge_2_.jpg", title: "Legal & Immigration", sub: "Helpful guidance and community resources" },
|
||||
{ img: "/img/knowledge_4_.jpg", title: "Community & Volunteering", sub: "Events, service opportunities, participation" },
|
||||
{ img: "/img/knowledge_6_.jpg", title: "Culture & Traditions", sub: "Festivals, heritage, traditions, community stories" },
|
||||
];
|
||||
|
||||
const suggestions = [
|
||||
"Which WhatsApp group should I join?",
|
||||
"Best school districts for mir kids?",
|
||||
"What events are coming up?",
|
||||
"Where can I volunteer for seva?",
|
||||
];
|
||||
|
||||
export default function KnowledgePage() {
|
||||
return (
|
||||
<>
|
||||
{/* HERO */}
|
||||
<section className="page-glow page-hero--tight">
|
||||
<div className="container hero-center">
|
||||
<span className="eyebrow">UP Parivar Dallas · Est. 2010</span>
|
||||
<h1 className="display-title ts-34-46 knowledge-hero__title">Community Knowledge Hub</h1>
|
||||
<p className="knowledge-hero__lead">
|
||||
Explore resources, guides, community insights, member expertise, local
|
||||
opportunities, and helpful information curated by UP Parivar Dallas.
|
||||
</p>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="knowledge-hero__photos">
|
||||
<div className="knowledge-hero__photo">
|
||||
<Image src="/img/about_7_.jpg" alt="" fill className="img-cover" sizes="400px" />
|
||||
</div>
|
||||
<div className="knowledge-hero__photo">
|
||||
<Image src="/img/about_3_.jpg" alt="" fill className="img-cover" sizes="700px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CATEGORIES */}
|
||||
<section className="section-white knowledge-cats">
|
||||
<div className="container">
|
||||
<div className="split-head">
|
||||
<div className="split-head__col">
|
||||
<span className="eyebrow">Knowledge Categories</span>
|
||||
<h2 className="display-title ts-30-38 split-head__title">Explore Topics That Matter</h2>
|
||||
</div>
|
||||
<p className="split-head__aside split-head__text">
|
||||
Browse curated resources and community knowledge across the important areas
|
||||
of life, work, family, and culture.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="knowledge-cats__grid">
|
||||
{categories.map((c) => (
|
||||
<div key={c.title} className="knowledge-cat">
|
||||
<div className="knowledge-cat__media">
|
||||
<Image src={c.img} alt={c.title} fill className="img-cover" sizes="400px" />
|
||||
</div>
|
||||
<div className="knowledge-cat__body">
|
||||
<h3 className="knowledge-cat__title">{c.title}</h3>
|
||||
<p className="knowledge-cat__sub">{c.sub}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI MEMORY */}
|
||||
<section className="section-cream knowledge-ai">
|
||||
<div className="container">
|
||||
<div className="split-head">
|
||||
<div className="split-head__col">
|
||||
<span className="eyebrow">Powered by Community AI</span>
|
||||
<h2 className="display-title ts-30-38 split-head__title">
|
||||
Years of community wisdom, one question away
|
||||
</h2>
|
||||
</div>
|
||||
<p className="split-head__aside split-head__text">
|
||||
No more scrolling through 4,000 WhatsApp messages. Just ask.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="knowledge-ai__panel">
|
||||
<div className="knowledge-ai__bar">
|
||||
<span className="knowledge-ai__dots">
|
||||
<span className="knowledge-ai__dot knowledge-ai__dot--red" />
|
||||
<span className="knowledge-ai__dot knowledge-ai__dot--yellow" />
|
||||
<span className="knowledge-ai__dot knowledge-ai__dot--green" />
|
||||
</span>
|
||||
<span className="knowledge-ai__bar-label">Insignia TOWER · Community Memory</span>
|
||||
</div>
|
||||
<div className="knowledge-ai__body">
|
||||
<div className="knowledge-ai__q">
|
||||
<span className="knowledge-ai__q-emoji">🙋</span>
|
||||
<p className="knowledge-ai__q-text">Which WhatsApp group should I join?</p>
|
||||
</div>
|
||||
<div className="knowledge-ai__a">
|
||||
<span className="knowledge-ai__a-badge">AI</span>
|
||||
<p className="knowledge-ai__a-text">
|
||||
Start with your city's welcome circle — if you're in Frisco,
|
||||
that's "Frisco Families." From there most newcomers add the
|
||||
Youth, Seva and Marketplace circles. A volunteer will personally add you
|
||||
within a day.
|
||||
</p>
|
||||
</div>
|
||||
<div className="knowledge-ai__sources">
|
||||
{["▤ WhatsApp archive", "▦ Event calendar", "◈ Member directory"].map((t) => (
|
||||
<span key={t} className="knowledge-ai__source">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="knowledge-ai__suggestions">
|
||||
{suggestions.map((s, i) => (
|
||||
<span key={s} className={`knowledge-ai__suggestion ${i === 0 ? "knowledge-ai__suggestion--active" : ""}`}>
|
||||
{s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* COMMUNITY VOICES */}
|
||||
<section className="section-white knowledge-voices">
|
||||
<div className="container">
|
||||
<span className="eyebrow">Community Voices</span>
|
||||
<h2 className="display-title ts-30-38 knowledge-voices__title">Loved by families across North Texas</h2>
|
||||
<div className="knowledge-voices__grid">
|
||||
{testimonials.map((t, i) => {
|
||||
const person = (
|
||||
<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>
|
||||
);
|
||||
const quote = (
|
||||
<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>
|
||||
);
|
||||
return (
|
||||
<div key={t.name} className="knowledge-voices__col">
|
||||
{i === 1 ? (
|
||||
<>
|
||||
{person}
|
||||
{quote}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{quote}
|
||||
{person}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Playfair_Display, Gloock, Parkinsans } from "next/font/google";
|
||||
import "../styles/style.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
import WhatsAppFab from "@/components/WhatsAppFab";
|
||||
import ScrollReveal from "@/components/ScrollReveal";
|
||||
|
||||
const display = Playfair_Display({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-display",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const serif = Gloock({
|
||||
subsets: ["latin"],
|
||||
weight: "400",
|
||||
variable: "--font-serif",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const sans = Parkinsans({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-sans",
|
||||
display: "swap",
|
||||
adjustFontFallback: false,
|
||||
fallback: ["system-ui", "Segoe UI", "Arial", "sans-serif"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "UP Parivaar Dallas — Bringing Uttar Pradesh Families Together",
|
||||
description:
|
||||
"UP Parivar Dallas connects families, culture, seva, events and trusted local help across North Texas.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className={`${display.variable} ${serif.variable} ${sans.variable}`}>
|
||||
<body>
|
||||
<Navbar />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
<WhatsAppFab />
|
||||
<ScrollReveal />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+285
@@ -0,0 +1,285 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import MembershipForm from "@/components/MembershipForm";
|
||||
|
||||
export const metadata = { title: "Why Join — UP Parivaar Dallas" };
|
||||
|
||||
const interests = [
|
||||
"Community Service", "Education", "Entrepreneurship", "Technology", "Real Estate",
|
||||
"Cultural Program", "Movies", "Legal Support", "Spiritual", "Gardening", "Youth Activities",
|
||||
"Music", "Immigration Guidance", "Networking",
|
||||
];
|
||||
const activeInterests = new Set(["Community Service", "Real Estate", "Legal Support"]);
|
||||
|
||||
const platformCards = [
|
||||
{ t: "Culture that feels alive everyday", d: "Festivals, galleries, seva drives, youth activities and family memories are presented beautifully without mixing private member information into public pages." },
|
||||
{ t: "Newcomers do not start from zero", d: "A public starter guide and private catch-up experience help new families learn the history, admins, events, circles and trusted resources.", active: true },
|
||||
{ t: "Trusted local discovery platform today", d: "Members can later opt into directory, business cards, volunteer interests and contact preferences — with consent and admin rules." },
|
||||
{ t: "AI turns messages into usefulness", d: "WhatsApp energy becomes digests, knowledge articles, event pages, FAQ candidates, bulletin items and searchable community memory." },
|
||||
];
|
||||
|
||||
const belong = [
|
||||
{ t: "Meaningful Connections", d: "Build genuine friendships with people sharing roots, values, experiences.", img: "/img/whyjoin_4_.jpg" },
|
||||
{ t: "Family & Community Network", d: "Bring your family together, celebrate milestones, strengthen bonds.", icon: true },
|
||||
{ t: "Professional Growth", d: "Access mentors, collaborators, and opportunities within a trusted network.", img: "/img/whyjoin_2_.jpg" },
|
||||
{ t: "Business Visibility", d: "Showcase your business and gain trusted community referrals.", icon: true },
|
||||
{ t: "Volunteer Opportunities", d: "Contribute through mentorship, cultural programs, teaching, and service.", img: "/img/whyjoin_3_.jpg" },
|
||||
{ t: "Events & Cultural Celebrations", d: "Experience UP's festivals, sports, culture, and traditions together.", icon: true },
|
||||
];
|
||||
|
||||
const journeySteps = [
|
||||
{ n: 1, t: "Create Your Profile", d: "Share your name, city, hometown, profession, interests, and family details. Your profile powers personalized connections." },
|
||||
{ n: 2, t: "Discover Your Circles", d: "Join city circles, professional groups, alumni networks, and interest-based communities tailored to who you are.", active: true },
|
||||
{ n: 3, t: "Engage, Contribute & Grow", d: "Attend events, volunteer, participate in discussions, showcase your business, and build lasting relationships." },
|
||||
];
|
||||
|
||||
const visibility = [
|
||||
{ t: "Profile Visibility", d: "Choose who can see your full profile", opts: ["Public", "Members Only", "Circles Only"], active: 1 },
|
||||
{ t: "Contact Visibility", d: "Control who sees your phone & email", opts: ["Hidden", "Connections", "All Members"], active: 1 },
|
||||
{ t: "Business Visibility", d: "Manage your business page audience", opts: ["Public", "Members Only", "Private"], active: 1 },
|
||||
{ t: "Messaging Permissions", d: "Decide who can send you messages", opts: ["Anyone", "Connections", "Off"], active: 1 },
|
||||
{ t: "Circle-Based Access", d: "Grant access per circle membership", opts: ["Custom", "Open", "Closed"], active: 1 },
|
||||
{ t: "Participation Settings", d: "Control your community visibility", opts: ["Visible", "Limited", "Private"], active: 1 },
|
||||
];
|
||||
|
||||
export default function WhyJoinPage() {
|
||||
return (
|
||||
<>
|
||||
{/* HERO */}
|
||||
<section className="page-glow page-hero">
|
||||
<div className="container hero-center">
|
||||
<span className="eyebrow">UP Parivar Dallas</span>
|
||||
<h1 className="display-title ts-34-46 why-hero__title">
|
||||
Join a Community That Feels Like Family
|
||||
</h1>
|
||||
<p className="why-hero__lead">
|
||||
Connect through culture, friendship, family, professional networks, shared
|
||||
interests, and meaningful community engagement.
|
||||
</p>
|
||||
</div>
|
||||
<div className="container why-hero__photos">
|
||||
<div className="why-hero__photo">
|
||||
<Image src="/img/whyjoin_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
|
||||
</div>
|
||||
<div className="why-hero__photo">
|
||||
<Image src="/img/gallery_1_.jpg" alt="" fill className="img-cover" sizes="600px" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PROFILE */}
|
||||
<section className="section-white">
|
||||
<div className="container why-profile">
|
||||
<div>
|
||||
<span className="eyebrow">Member Profile</span>
|
||||
<h2 className="display-title ts-30-38 why-profile__title">Build Your Community Profile</h2>
|
||||
<p className="why-profile__text">
|
||||
Your profile is the foundation of your UP Parivar experience. It powers
|
||||
personalized connections, curated event invitations, and smart
|
||||
recommendations across the platform.
|
||||
</p>
|
||||
<ul className="why-profile__list">
|
||||
{["Be discovered by people from your hometown", "Get matched with members in your profession", "Receive invitations to relevant circles and events", "Connect your family and build a shared network"].map((b) => (
|
||||
<li key={b}>
|
||||
<span className="why-bullet">•</span> {b}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="why-profile__photo">
|
||||
<Image src="/img/about_24_.jpg" alt="" fill className="img-cover" sizes="256px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Profile card */}
|
||||
<div className="profile-card">
|
||||
<div className="profile-card__banner">
|
||||
<div className="profile-card__badge-row">
|
||||
<span className="profile-card__badge">BUSINESS</span>
|
||||
</div>
|
||||
<div className="profile-card__head">
|
||||
<div className="profile-card__avatar">
|
||||
<Image src="/img/about_13_.jpg" alt="Amit Sharma" fill className="img-cover-top" sizes="96px" />
|
||||
</div>
|
||||
<h3 className="profile-card__name">Amit Sharma</h3>
|
||||
<p className="profile-card__location">
|
||||
<span className="profile-card__pin">◉</span> Dallas, TX · From Lucknow, UP
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="profile-card__rows">
|
||||
{[
|
||||
"Software Engineer · Microsoft",
|
||||
"IIT Kanpur · UT Dallas",
|
||||
"Cricket, Music, Community Service",
|
||||
"Family of 4 · Spouse: Priya",
|
||||
].map((r) => (
|
||||
<div key={r} className="profile-card__row">
|
||||
<span className="profile-card__dot" /> {r}
|
||||
</div>
|
||||
))}
|
||||
<div className="profile-card__tags">
|
||||
{["Dallas Circle", "IT Professionals", "IIT Alumni"].map((t) => (
|
||||
<span key={t} className="profile-card__tag">{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* INTERESTS */}
|
||||
<section className="section-white why-interests">
|
||||
<div className="container">
|
||||
<span className="eyebrow">Personalization</span>
|
||||
<h2 className="display-title ts-30-38 why-interests__title">Tell Us What Interests You</h2>
|
||||
<p className="why-interests__lead">
|
||||
Your interests help us recommend people, circles, events, discussions, and
|
||||
volunteer opportunities.
|
||||
</p>
|
||||
<div className="why-interests__chips">
|
||||
{interests.map((i) => (
|
||||
<span key={i} className={`chip ${activeInterests.has(i) ? "chip--active" : ""}`}>{i}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PLATFORM WEDGE */}
|
||||
<section className="section-white why-wedge">
|
||||
<div className="container">
|
||||
<div className="split-head">
|
||||
<div className="split-head__col">
|
||||
<span className="eyebrow">Why Members Care</span>
|
||||
<h2 className="display-title ts-30-36 split-head__title">More useful than a page. Less noisy than a group.</h2>
|
||||
</div>
|
||||
<div className="split-head__aside">
|
||||
<p className="split-head__text">
|
||||
The site attracts visitors; the portal keeps members connected. WhatsApp
|
||||
remains the daily habit, while TOWER organizes what should not disappear.
|
||||
</p>
|
||||
<Link href="#belong" className="link-arrow link-arrow--spaced">See Platform Wedge</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="why-wedge__grid">
|
||||
{platformCards.map((c) => (
|
||||
<div key={c.t} className={`wedge-card ${c.active ? "wedge-card--active" : ""}`}>
|
||||
<h3 className="wedge-card__title">{c.t}</h3>
|
||||
<p className="wedge-card__desc">{c.d}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* BELONG BENTO */}
|
||||
<section id="belong" className="section-cream why-belong">
|
||||
<div className="container">
|
||||
<div className="split-head">
|
||||
<div className="split-head__col">
|
||||
<span className="eyebrow">Why Members Care</span>
|
||||
<h2 className="display-title ts-30-38 split-head__title">Everything You Need to Belong</h2>
|
||||
</div>
|
||||
<p className="split-head__aside split-head__text">
|
||||
UP Parivar is more than a membership — it's an extended family,
|
||||
professional network, and community ecosystem.
|
||||
</p>
|
||||
</div>
|
||||
<div className="why-belong__grid">
|
||||
{belong.map((b) => (
|
||||
<div key={b.t} className="belong-card">
|
||||
<div className="belong-card__icon">◈</div>
|
||||
<h3 className="belong-card__title">{b.t}</h3>
|
||||
<p className="belong-card__desc">{b.d}</p>
|
||||
{b.img && (
|
||||
<div className="belong-card__media">
|
||||
<Image src={b.img} alt="" fill className="img-cover" sizes="380px" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* JOURNEY STEPS */}
|
||||
<section className="why-steps">
|
||||
<div className="container">
|
||||
<span className="eyebrow-light">◉ How It Works</span>
|
||||
<h2 className="why-steps__title">Your Journey Starts Here</h2>
|
||||
<p className="why-steps__lead">Three simple steps to becoming part of the UP Parivar family.</p>
|
||||
<div className="why-steps__grid">
|
||||
{journeySteps.map((s) => (
|
||||
<div key={s.n} className={`step-card ${s.active ? "step-card--active" : ""}`}>
|
||||
<div className="step-card__icon">✦</div>
|
||||
<h3 className="step-card__title">{s.t}</h3>
|
||||
<p className="step-card__desc">{s.d}</p>
|
||||
<span className="step-card__num">{s.n}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* VISIBILITY */}
|
||||
<section className="section-white why-visibility">
|
||||
<div className="container">
|
||||
<div className="split-head">
|
||||
<div className="split-head__col">
|
||||
<span className="eyebrow">Privacy</span>
|
||||
<h2 className="display-title ts-30-38 split-head__title">You Control Your Visibility</h2>
|
||||
</div>
|
||||
<p className="split-head__aside split-head__text">
|
||||
Choose exactly who can view your profile, contact information, business
|
||||
details, and community activity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="why-visibility__grid">
|
||||
{visibility.map((v) => (
|
||||
<div key={v.t} className="visibility-card">
|
||||
<div className="visibility-card__head">
|
||||
<span className="visibility-card__icon">◈</span>
|
||||
<div>
|
||||
<h3 className="visibility-card__title">{v.t}</h3>
|
||||
<p className="visibility-card__desc">{v.d}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="visibility-card__opts">
|
||||
{v.opts.map((o, i) => (
|
||||
<span key={o} className={`visibility-opt ${i === v.active ? "visibility-opt--active" : ""}`}>{o}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* MEMBERSHIP FORM */}
|
||||
<section className="section-cream why-form">
|
||||
<div className="container">
|
||||
<h2 className="display-title ts-32-40 why-form__title">Membership Application</h2>
|
||||
<div className="why-form__body">
|
||||
<MembershipForm />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user