update redesign
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React from "react";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { ContactForm } from "@/components/contact/ContactForm";
|
||||
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -10,189 +11,121 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
|
||||
<div className="page-frame">
|
||||
{/* ─── Redesigned Hero/Contact Section ─── */}
|
||||
<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] text-left">
|
||||
<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>
|
||||
<PremiumPageShell>
|
||||
{/* ─── Contact Section ─── */}
|
||||
<section className="relative px-6 py-12 md:px-12 lg:px-16 border-b border-[#6330D6]/10">
|
||||
|
||||
{/* Subtle Map Grid/Location decoration behind left content */}
|
||||
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
|
||||
<svg className="w-full h-full text-[#6330D6]" stroke="currentColor" fill="none" strokeWidth="1.5" viewBox="0 0 400 300">
|
||||
<path d="M0,50 L400,50 M0,130 L400,130 M0,210 L400,210 M80,0 L80,300 M200,0 L200,300 M320,0 L320,300" />
|
||||
<path d="M 80,130 C 120,90 160,170 200,130 C 240,90 280,170 320,130" strokeDasharray="3,3" />
|
||||
<circle cx="200" cy="130" r="4" fill="currentColor" />
|
||||
<circle cx="200" cy="130" r="14" strokeWidth="1" />
|
||||
<circle cx="80" cy="50" r="3" fill="currentColor" />
|
||||
<circle cx="320" cy="210" r="3" fill="currentColor" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* 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 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 — Contact Info */}
|
||||
<div className="relative z-10 text-[#16001D] max-w-[580px] text-left">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
|
||||
Contact Us
|
||||
</span>
|
||||
<h1 className="font-display text-4xl md:text-5xl lg:text-[54px] font-black leading-[1.1] text-[#16001D]">
|
||||
We’re Here to <br />
|
||||
<span className="text-[#6330D6]">Help You.</span>
|
||||
</h1>
|
||||
<p className="text-[#5E5866] text-sm md:text-base font-bold mt-6 leading-relaxed">
|
||||
Whether you are a customer, local store owner, or delivery partner, our team is here to help you get started with Nearle.
|
||||
</p>
|
||||
|
||||
{/* Info Rows */}
|
||||
<div className="mt-8 border-t border-[#6330D6]/10">
|
||||
{/* Call Us */}
|
||||
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="phone" size={18} />
|
||||
</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 className="text-left">
|
||||
<h4 className="text-[#16001D] text-sm font-black">Call Us</h4>
|
||||
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">+91 80 4912 3456 • +91 422 491 2345</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>
|
||||
{/* Email Us */}
|
||||
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="mail" size={18} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-[#16001D] text-sm font-black">Email Us</h4>
|
||||
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">support@nearle.in • partners@nearle.in</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visit Us */}
|
||||
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="location_on" size={18} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-[#16001D] text-sm font-black">Visit Us</h4>
|
||||
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">424, DB Rd, R.S. Puram, Coimbatore, TN 641002</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Helpdesk */}
|
||||
<div className="flex gap-4 py-4.5 border-b border-[#6330D6]/10 items-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="support_agent" size={18} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-[#16001D] text-sm font-black">Helpdesk</h4>
|
||||
<p className="text-[#5E5866] text-xs font-semibold mt-0.5">24/7 Phone Helpdesk Active</p>
|
||||
</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>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 px-6 md:px-12">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
{/* Card 1: Location */}
|
||||
<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>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Nearle HQ, 424, Diwan Bahadur Rd,<br />
|
||||
Opposite To Sri Krishna Sweets, R.S. Puram,<br />
|
||||
Coimbatore, Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 2: Phones */}
|
||||
<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>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Phones</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<span>+91 80 4912 3456</span>
|
||||
<span>+91 422 491 2345</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4 flex gap-4">
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3: Email */}
|
||||
<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>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Email Us</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed flex flex-col gap-1">
|
||||
<a href="mailto:support@nearle.in" className="hover:text-primary transition-colors">support@nearle.in</a>
|
||||
<a href="mailto:partners@nearle.in" className="hover:text-primary transition-colors">partners@nearle.in</a>
|
||||
</p>
|
||||
<a
|
||||
href="mailto:support@nearle.in"
|
||||
className="mt-auto pt-4 text-label-sm text-primary hover:text-primary-container font-black flex items-center gap-1 group"
|
||||
>
|
||||
Write to us
|
||||
<MaterialIcon icon="drafts" size={14} className="group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Card 4: Working Hours */}
|
||||
<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>
|
||||
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
Monday - Saturday<br />
|
||||
9:00 AM - 6:00 PM<br />
|
||||
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span>
|
||||
</p>
|
||||
<div className="mt-auto pt-4">
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-black tracking-wider uppercase bg-secondary/10 text-secondary">
|
||||
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" />
|
||||
Helpdesk Active
|
||||
</span>
|
||||
</div>
|
||||
{/* Right Column: Compact Form Card */}
|
||||
<div className="w-full max-w-[480px] lg:ml-auto">
|
||||
<ContactForm />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Map Section ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
|
||||
<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>
|
||||
{/* ─── Map Section ─── */}
|
||||
<section className="p-6 md:p-8 bg-[#FAF7FD]">
|
||||
<div className="relative w-full h-[400px] rounded-2xl overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
|
||||
<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 bg-white/95 backdrop-blur-sm rounded-xl p-3.5 border border-[#6330D6]/10 shadow-lg flex items-center gap-3 max-w-[280px]">
|
||||
<div className="w-8 h-8 rounded-lg bg-[#6330D6] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="store" size={16} className="text-white" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
|
||||
<p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</PremiumPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user