109 lines
4.2 KiB
TypeScript
109 lines
4.2 KiB
TypeScript
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>
|
||
</>
|
||
);
|
||
}
|