update layout
This commit is contained in:
@@ -11,41 +11,82 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Breadcrumbs & Hero Page Header ─── */}
|
||||
<section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-36 pb-40 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="hero-background select-none pointer-events-none">
|
||||
<Image
|
||||
src="/contect.png"
|
||||
alt="Contact Nearle Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-right"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-[#E6D7EA] min-h-screen pt-20 md:pt-24 lg:pt-28 pb-10 md:pb-16 flex flex-col gap-4 md:gap-6 lg:gap-8">
|
||||
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<section className="bg-brand-dark rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden min-h-[720px] flex items-center relative px-6 py-16 md:px-10 md:py-20 lg:px-16 lg:py-24">
|
||||
{/* Subtle decorative blurred purple glow behind left content */}
|
||||
<div className="absolute left-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-primary/25 blur-[120px] pointer-events-none z-0" />
|
||||
|
||||
<div className="w-full mx-auto relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
|
||||
|
||||
{/* Left Column — MUST BE VISIBLE */}
|
||||
<div className="relative z-10 text-white max-w-[580px]">
|
||||
<span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
|
||||
LET’S CONNECT
|
||||
</span>
|
||||
<h1 className="mt-4 font-display text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] text-white">
|
||||
Let’s Build Better Neighbourhoods Together.
|
||||
</h1>
|
||||
<p className="text-white/70 text-lg leading-relaxed mt-6">
|
||||
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
|
||||
</p>
|
||||
|
||||
<div className="hero-content relative z-10 mx-auto max-w-container-max">
|
||||
{/* Header Title */}
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.2em] text-brand-accent">
|
||||
Get in touch
|
||||
</p>
|
||||
<h1 className="mt-4 font-display text-4xl font-black text-white md:text-6xl tracking-tight">
|
||||
Talk to the Nearle Team
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
Have questions about orders, partner onboardings, or neighborhood launches? Reach out and we'll help you.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* Info Rows */}
|
||||
<div className="mt-10 border-t border-white/10">
|
||||
{/* Row 1 */}
|
||||
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
|
||||
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
|
||||
<MaterialIcon icon="location_on" size={20} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-white font-bold">Based in Coimbatore</h4>
|
||||
<p className="text-white/60 text-sm mt-0.5">Building neighbourhood commerce, one local store at a time.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
|
||||
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
|
||||
<MaterialIcon icon="schedule" size={20} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-white font-bold">Talk to Our Team</h4>
|
||||
<p className="text-white/60 text-sm mt-0.5">Monday to Saturday, 9:30 AM to 6:30 PM.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
<div className="flex gap-4 py-5 border-b border-white/10 items-center">
|
||||
<div className="w-11 h-11 rounded-full bg-white/10 text-brand-accent flex items-center justify-center shadow-md shrink-0">
|
||||
<MaterialIcon icon="support_agent" size={20} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-white font-bold">Quick Support</h4>
|
||||
<p className="text-white/60 text-sm mt-0.5">Share your details and our team will get back to you.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Form Card */}
|
||||
<div className="w-full max-w-[520px] lg:ml-auto relative z-10">
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="relative z-20 mx-auto -mt-16 max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="location_on" size={28} className="text-primary" />
|
||||
</div>
|
||||
@@ -67,7 +108,7 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Card 2: Phones */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="call" size={28} className="text-secondary" />
|
||||
</div>
|
||||
@@ -88,7 +129,7 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Card 3: Email */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="mail" size={28} className="text-primary" />
|
||||
</div>
|
||||
@@ -107,7 +148,7 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<div className="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="bg-white rounded-[1.5rem] md:rounded-[2rem] p-7 border border-white/50 flex flex-col items-center text-center shadow-lg">
|
||||
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
|
||||
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
|
||||
</div>
|
||||
@@ -126,44 +167,37 @@ export default function ContactPage() {
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ─── Map & Form Section ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
|
||||
|
||||
{/* Left: Google Map (5 Cols) */}
|
||||
<div className="lg:col-span-5 w-full">
|
||||
<div className="relative bg-white rounded-3xl overflow-hidden shadow-xl border border-outline-variant/20 group h-[450px]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="filter contrast-[1.05] saturate-[0.9] hover:scale-[1.02] transition-transform duration-700"
|
||||
/>
|
||||
{/* Map Floating Info Badge */}
|
||||
<div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={20} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
|
||||
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
|
||||
</div>
|
||||
{/* ─── Map Section ─── */}
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<section className="bg-white rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8 shadow-lg">
|
||||
<div className="relative w-full h-[450px]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
src="https://maps.google.com/maps?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002&t=&z=16&ie=UTF8&iwloc=&output=embed"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="filter contrast-[1.05] saturate-[0.9]"
|
||||
/>
|
||||
{/* Map Floating Info Badge */}
|
||||
<div className="absolute bottom-6 left-6 right-6 bg-white/95 backdrop-blur-md rounded-2xl p-4 border border-outline-variant/20 shadow-lg flex items-center gap-3 max-w-sm">
|
||||
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={20} className="text-white" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-body-sm font-black text-brand-dark">R.S. Puram Hub</h4>
|
||||
<p className="text-[11px] text-on-surface-variant">Connecting local vendors & residents</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Right: Message Form (7 Cols) */}
|
||||
<ContactForm />
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user