269 lines
13 KiB
TypeScript
269 lines
13 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|