170 lines
8.7 KiB
TypeScript
170 lines
8.7 KiB
TypeScript
import React from "react";
|
|
import Image from "next/image";
|
|
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
|
import { ContactForm } from "@/components/contact/ContactForm";
|
|
import type { Metadata } from "next";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Contact Us",
|
|
description: "Get in touch with Nearle's team. Reach out for support, merchant partnerships, delivery, or general hyperlocal neighborhood inquiries.",
|
|
};
|
|
|
|
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="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>
|
|
|
|
{/* ─── 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="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="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="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 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="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 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="premium-card bg-white rounded-3xl p-7 border border-outline-variant/15 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>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Message Form (7 Cols) */}
|
|
<ContactForm />
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|