fix hero section layout in homepage
This commit is contained in:
@@ -38,39 +38,38 @@ const COUNTERS = [
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden bg-brand-dark px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
||||
<Image
|
||||
src="/about.png"
|
||||
alt="About Nearle Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
<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">
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
||||
<Image
|
||||
src="/about.png"
|
||||
alt="About Nearle Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
We are Nearle
|
||||
</p>
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
|
||||
We build Neighbourhoods.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
We are Nearle
|
||||
</p>
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
|
||||
We build Neighbourhoods.
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
|
||||
Nearle is India's first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our Platform
|
||||
</span>
|
||||
@@ -80,34 +79,32 @@ export default function AboutPage() {
|
||||
<p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed">
|
||||
We are redefining modern urban living by providing never before convenience. By linking local physical stores to an integrated digital framework, Nearle boosts merchant sales and delivers products instantly, fostering closer, cleaner, and faster local economies.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={24} />
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col text-left"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={24} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
||||
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
@@ -121,39 +118,39 @@ export default function AboutPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28 text-center">
|
||||
<div className="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Don't miss the opportunity
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
|
||||
Build Your Brand with Nearle
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Merchant</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="download" size={18} />
|
||||
<span>Download App</span>
|
||||
</Link>
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Don't miss the opportunity
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
|
||||
Build Your Brand with Nearle
|
||||
</h2>
|
||||
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-4">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Merchant</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="download" size={18} />
|
||||
<span>Download App</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -88,42 +88,41 @@ export default function BusinessesPage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
||||
<Image
|
||||
src="/Nearle Business.png"
|
||||
alt="Nearle Business Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
<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">
|
||||
{/* ─── Hero Section with Animated Rotator ─── */}
|
||||
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0 select-none pointer-events-none">
|
||||
<Image
|
||||
src="/Nearle Business.png"
|
||||
alt="Nearle Business Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[#120217]/50" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
Nearle for Business
|
||||
</p>
|
||||
<div className="relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
Nearle for Business
|
||||
</p>
|
||||
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
||||
<span>Power your business.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
||||
<span>Power your business.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_WORDS[wordIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="relative z-20 -mt-20 mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl flex flex-col lg:flex-row justify-between items-center gap-8">
|
||||
<div className="max-w-2xl">
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 flex flex-col lg:flex-row justify-between items-center gap-8">
|
||||
<div className="max-w-2xl text-left">
|
||||
<span className="text-label-sm font-black text-secondary uppercase tracking-widest">
|
||||
Together, we grow
|
||||
</span>
|
||||
@@ -143,53 +142,50 @@ export default function BusinessesPage() {
|
||||
<span>Talk to an Expert</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
</div>
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PROCESS_STEPS.map((ps) => (
|
||||
<div
|
||||
key={ps.step}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
|
||||
{ps.step}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PROCESS_STEPS.map((ps) => (
|
||||
<div
|
||||
key={ps.step}
|
||||
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
|
||||
{ps.step}
|
||||
</div>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
|
||||
<MaterialIcon icon={ps.icon} size={28} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3 text-left">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed text-left">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
|
||||
<MaterialIcon icon={ps.icon} size={28} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-body-sm text-on-surface-variant leading-relaxed">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
||||
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
|
||||
{/* Left side: features block (7 cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="lg:col-span-7 text-left">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Our features
|
||||
</span>
|
||||
@@ -220,7 +216,7 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6">
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-6 text-left">
|
||||
{STATS.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
@@ -246,14 +242,11 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-24 text-center">
|
||||
<div className="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="bg-primary 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 p-12 md:p-20 relative text-center">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
|
||||
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
|
||||
@@ -281,8 +274,8 @@ export default function BusinessesPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
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";
|
||||
@@ -11,10 +10,9 @@ export const metadata: Metadata = {
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<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">
|
||||
<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" />
|
||||
@@ -23,7 +21,7 @@ export default function ContactPage() {
|
||||
<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]">
|
||||
<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>
|
||||
@@ -79,99 +77,97 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* ─── Four Contact Info Cards ─── */}
|
||||
<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="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">
|
||||
{/* ─── 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="tel:+918049123456"
|
||||
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group"
|
||||
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"
|
||||
>
|
||||
Helpdesk
|
||||
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" />
|
||||
Get Directions
|
||||
<MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 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" />
|
||||
{/* 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>
|
||||
<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" />
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</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">
|
||||
{/* ─── 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"
|
||||
@@ -197,7 +193,6 @@ export default function ContactPage() {
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1131,6 +1131,41 @@ body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ─── Shared Premium Framed Layout Classes ─── */
|
||||
.page-canvas {
|
||||
@apply bg-[#E6D7EA] flex flex-col gap-0;
|
||||
}
|
||||
|
||||
.page-frame {
|
||||
@apply mx-auto w-full;
|
||||
max-width: min(100% - 16px, 1560px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 24px, 1560px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 40px, 1680px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 56px, 1840px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.page-frame {
|
||||
max-width: min(100% - 96px, 2200px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,29 +8,17 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<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">
|
||||
<div className="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10">
|
||||
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-2 md:pt-3 lg:pt-4 pb-0">
|
||||
<div className="page-frame">
|
||||
<Hero />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<ServiceCategories />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<WhyNearle />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<HowItWorks />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<HyperlocalFeatures />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<BusinessSection />
|
||||
</div>
|
||||
<div className="w-full max-w-[1560px] mx-auto px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8">
|
||||
<StoreQRSection />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -145,81 +145,80 @@ export default function PeoplePage() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen bg-background">
|
||||
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="hero-background select-none pointer-events-none">
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Nearle People Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-right"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<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">
|
||||
{/* ─── Hero Section ─── */}
|
||||
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="hero-background select-none pointer-events-none">
|
||||
<Image
|
||||
src="/nearle people.png"
|
||||
alt="Nearle People Background"
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-right"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hero-content relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
Nearle for People
|
||||
</p>
|
||||
<div className="hero-content relative z-10 mx-auto max-w-container-max">
|
||||
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
|
||||
Nearle for People
|
||||
</p>
|
||||
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
||||
<span>Redefining Local Living.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_SLIDES[slideIndex]}
|
||||
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
|
||||
<span>Redefining Local Living.</span>
|
||||
<br />
|
||||
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
|
||||
{ROTATOR_SLIDES[slideIndex]}
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
|
||||
<div className="mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
What we offer
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Everything You Need, Just a Click Away
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* ─── 9 Core Offerings Bento Grid ─── */}
|
||||
<section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28">
|
||||
<div className="text-center mb-16">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
What we offer
|
||||
</span>
|
||||
<h2 className="font-display text-3xl font-black text-brand-dark mt-2">
|
||||
Everything You Need, Just a Click Away
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant">
|
||||
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="experience-grid">
|
||||
{OFFERINGS.map((offering) => (
|
||||
<article
|
||||
key={offering.title}
|
||||
className="experience-card"
|
||||
>
|
||||
<Image
|
||||
src={offering.image}
|
||||
alt={offering.title}
|
||||
fill
|
||||
sizes="(max-width: 1023px) 100vw, 33vw"
|
||||
className="experience-card__image"
|
||||
/>
|
||||
<div className="experience-card__overlay" />
|
||||
<div className="experience-card__content">
|
||||
<div className="experience-card__icon">
|
||||
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
|
||||
<div className="experience-grid">
|
||||
{OFFERINGS.map((offering) => (
|
||||
<article
|
||||
key={offering.title}
|
||||
className="experience-card"
|
||||
>
|
||||
<Image
|
||||
src={offering.image}
|
||||
alt={offering.title}
|
||||
fill
|
||||
sizes="(max-width: 1023px) 100vw, 33vw"
|
||||
className="experience-card__image"
|
||||
/>
|
||||
<div className="experience-card__overlay" />
|
||||
<div className="experience-card__content text-left">
|
||||
<div className="experience-card__icon">
|
||||
<MaterialIcon icon={offering.icon} size={22} className="text-white" />
|
||||
</div>
|
||||
<h3>{offering.title}</h3>
|
||||
<p>{offering.descr}</p>
|
||||
</div>
|
||||
<h3>{offering.title}</h3>
|
||||
<p>{offering.descr}</p>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24">
|
||||
<div className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="text-center mb-12">
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
|
||||
<div className="mb-12">
|
||||
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
|
||||
Nearle Network
|
||||
</span>
|
||||
@@ -247,12 +246,10 @@ export default function PeoplePage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-20">
|
||||
<div className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] rounded-[2.5rem] p-8 md:p-12 lg:p-14 relative overflow-hidden shadow-2xl border border-white/5">
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="bg-gradient-to-br from-[#4d046a] via-[#1c0228] to-[#0d0114] 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 p-8 md:p-12 lg:p-14 relative text-center">
|
||||
{/* Subtle ambient light gradient overlays */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
|
||||
@@ -452,8 +449,8 @@ export default function PeoplePage() {
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<div className="text-left text-brand-dark">
|
||||
<p className="text-xs font-black leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -555,8 +552,8 @@ export default function PeoplePage() {
|
||||
className="text-secondary"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p>
|
||||
<div className="text-left text-brand-dark">
|
||||
<p className="text-xs font-black leading-tight">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -596,8 +593,8 @@ export default function PeoplePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,8 +31,8 @@ const BENEFITS = [
|
||||
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-16 px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
|
||||
<div className="w-full">
|
||||
|
||||
{/* Merchant Section Grid */}
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
@@ -100,7 +100,7 @@ export function BusinessSection() {
|
||||
</div>
|
||||
|
||||
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
|
||||
<div className="mt-16 md:mt-20 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
<div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
{/* Decorative background vectors */}
|
||||
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
@@ -28,8 +28,8 @@ const QUICK_LINKS = [
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<>
|
||||
<div className="hero 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">
|
||||
<section className="relative pb-4 md:pb-6">
|
||||
<div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]">
|
||||
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
|
||||
<div className="hero-dark-panel select-none pointer-events-none">
|
||||
{/* Subtle Background Dot Texture */}
|
||||
@@ -50,7 +50,7 @@ export function Hero() {
|
||||
</div>
|
||||
|
||||
{/* ─── Main Content Wrapper ─── */}
|
||||
<div className="hero-stage relative w-full flex flex-col z-10 md:justify-center md:items-start">
|
||||
<div className="hero-stage min-h-0 pb-10 md:pb-12 relative w-full flex flex-col z-10 md:justify-center md:items-start">
|
||||
{/* Left Column: Text & Search Content */}
|
||||
<div className="hero-content text-white select-none">
|
||||
<span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
|
||||
@@ -141,7 +141,7 @@ export function Hero() {
|
||||
</div>
|
||||
|
||||
{/* Overlapping Quick Category Links */}
|
||||
<div className="service-cards-wrapper max-w-container-max mx-auto">
|
||||
<div className="service-cards-wrapper max-w-container-max mx-auto relative z-20 -mt-8 md:-mt-10 lg:-mt-12">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{QUICK_LINKS.map((item) => (
|
||||
<div
|
||||
@@ -174,6 +174,6 @@ export function Hero() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -26,10 +26,10 @@ const STEPS = [
|
||||
|
||||
export function HowItWorks() {
|
||||
return (
|
||||
<section className="bg-[#EEDDF3] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden pt-12 md:pt-16 pb-8 md:pb-10 px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
<section className="border-t border-brand-dark/10 pt-12 md:pt-16 lg:pt-20 pb-6 md:pb-8 lg:pb-10">
|
||||
<div className="w-full">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-8 md:mb-10">
|
||||
<div className="text-center mb-12 md:mb-16">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
|
||||
Simple Process
|
||||
</span>
|
||||
|
||||
@@ -27,42 +27,42 @@ const FEATURES = [
|
||||
|
||||
export function HyperlocalFeatures() {
|
||||
return (
|
||||
<section className="bg-[#F6F1F8] rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 relative">
|
||||
<section className="pt-4 md:pt-5 lg:pt-6 pb-2 md:pb-3 lg:pb-4 relative">
|
||||
{/* Scoped CSS styles for precise layout enforcement */}
|
||||
<style>{`
|
||||
@media (min-width: 901px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
|
||||
gap: 64px !important;
|
||||
width: min(1360px, 100%) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 530px !important;
|
||||
height: 580px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: 580px !important;
|
||||
padding: 60px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 32px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 420px !important;
|
||||
height: 460px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: auto !important;
|
||||
padding: 36px 24px !important;
|
||||
}
|
||||
}
|
||||
.custom-care-grid {
|
||||
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
|
||||
gap: 56px !important;
|
||||
width: min(1360px, 100%) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 530px !important;
|
||||
height: 580px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: 580px !important;
|
||||
padding: 60px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 40px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 420px !important;
|
||||
height: 460px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: auto !important;
|
||||
padding: 36px 24px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Subtle background radial glows */}
|
||||
|
||||
@@ -55,8 +55,8 @@ const CATEGORIES = [
|
||||
|
||||
export function ServiceCategories() {
|
||||
return (
|
||||
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
<section className="pt-10 md:pt-14 lg:pt-16 pb-2 md:pb-3 lg:pb-4">
|
||||
<div className="w-full">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
|
||||
<div>
|
||||
|
||||
@@ -9,12 +9,12 @@ const FLOW_STEPS = [
|
||||
|
||||
export function StoreQRSection() {
|
||||
return (
|
||||
<section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] 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 py-16 md:py-24 px-6 md:px-12 lg:px-20 xl:px-24 text-white relative min-h-[640px] flex items-center">
|
||||
<section id="download" className="bg-gradient-to-br from-[#1C0024] to-[#0D0012] rounded-[1.75rem] md:rounded-[2.25rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center mt-2 md:mt-3 mb-2 md:mb-3">
|
||||
{/* Background ambient glowing details */}
|
||||
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
|
||||
<div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
|
||||
|
||||
<div className="w-full max-w-container-max mx-auto relative z-10">
|
||||
<div className="w-full relative z-10">
|
||||
|
||||
{/* ─── DESKTOP LAYOUT (lg and above) ─── */}
|
||||
<div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
|
||||
|
||||
@@ -29,8 +29,8 @@ const CARDS = [
|
||||
|
||||
export function WhyNearle() {
|
||||
return (
|
||||
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-12 lg:py-14 px-6 md:px-12 lg:px-20 xl:px-24">
|
||||
<div className="max-w-container-max mx-auto">
|
||||
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
|
||||
<div className="w-full">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-8 md:mb-10">
|
||||
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
|
||||
|
||||
@@ -57,7 +57,7 @@ export function Footer() {
|
||||
const [submitSuccess, setSubmitSuccess] = useState(false);
|
||||
|
||||
const handleInputChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
|
||||
) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({
|
||||
@@ -123,10 +123,7 @@ export function Footer() {
|
||||
|
||||
const brandCol = (
|
||||
<div className="footer-brand min-w-0 self-start">
|
||||
<Link
|
||||
href="/"
|
||||
className="mb-4 inline-block"
|
||||
>
|
||||
<Link href="/" className="mb-4 inline-block">
|
||||
<Image
|
||||
src="/logo-v2.png"
|
||||
alt="Nearle"
|
||||
@@ -137,23 +134,16 @@ export function Footer() {
|
||||
/>
|
||||
</Link>
|
||||
<p className="footer-desc mb-4 text-white/80">
|
||||
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km.
|
||||
India's leading hyperlocal neighborhood network, empowering
|
||||
communities and verified local businesses within 2km.
|
||||
</p>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="#"
|
||||
className="footer-social-link"
|
||||
aria-label="Share"
|
||||
>
|
||||
<a href="#" className="footer-social-link" aria-label="Share">
|
||||
<MaterialIcon icon="share" size={24} />
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="footer-social-link"
|
||||
aria-label="Website"
|
||||
>
|
||||
<a href="#" className="footer-social-link" aria-label="Website">
|
||||
<MaterialIcon icon="public" size={24} />
|
||||
</a>
|
||||
</div>
|
||||
@@ -161,8 +151,8 @@ export function Footer() {
|
||||
);
|
||||
|
||||
return (
|
||||
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 py-8 md:py-12 lg:py-14 w-full mt-24">
|
||||
<div className="mx-auto max-w-[1560px]">
|
||||
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 pb-0 w-full mt-3 md:mt-4">
|
||||
<div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}>
|
||||
<div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
|
||||
{/* Top Helpdesk Bar */}
|
||||
<div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
@@ -171,7 +161,9 @@ export function Footer() {
|
||||
<MaterialIcon icon="headset_mic" size={24} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h4 className="text-headline-md font-black text-white">24/7 Neighborhood Helpdesk</h4>
|
||||
<h4 className="text-headline-md font-black text-white">
|
||||
24/7 Neighborhood Helpdesk
|
||||
</h4>
|
||||
<p className="text-sm font-semibold text-white/70 mt-0.5">
|
||||
Need immediate assistance with an order or local service?
|
||||
</p>
|
||||
@@ -181,18 +173,24 @@ export function Footer() {
|
||||
href="tel:+918049123456"
|
||||
className="flex items-center gap-3 bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-6 py-3 rounded-full text-base shadow-lg transition-all duration-300 hover:-translate-y-0.5 shrink-0"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={20} className="animate-pulse-subtle" />
|
||||
<MaterialIcon
|
||||
icon="phone"
|
||||
size={20}
|
||||
className="animate-pulse-subtle"
|
||||
/>
|
||||
<span>+91 80 4912 3456</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Main Footer Content */}
|
||||
<div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
|
||||
<div className={
|
||||
isContactPage
|
||||
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
|
||||
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
|
||||
}>
|
||||
<div
|
||||
className={
|
||||
isContactPage
|
||||
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
|
||||
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
|
||||
}
|
||||
>
|
||||
{isContactPage ? (
|
||||
<>
|
||||
{/* Brand Column */}
|
||||
@@ -237,9 +235,12 @@ export function Footer() {
|
||||
</h4>
|
||||
|
||||
<p className="mt-3 text-sm leading-6 text-white/60">
|
||||
424, Diwan Bahadur Rd,<br />
|
||||
Opposite to Sri Krishna Sweets,<br />
|
||||
R.S. Puram, Coimbatore,<br />
|
||||
424, Diwan Bahadur Rd,
|
||||
<br />
|
||||
Opposite to Sri Krishna Sweets,
|
||||
<br />
|
||||
R.S. Puram, Coimbatore,
|
||||
<br />
|
||||
Tamil Nadu 641002
|
||||
</p>
|
||||
|
||||
@@ -280,7 +281,12 @@ export function Footer() {
|
||||
|
||||
<div className="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-name" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Name</label>
|
||||
<label
|
||||
htmlFor="footer-field-name"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-name"
|
||||
@@ -298,7 +304,12 @@ export function Footer() {
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-phone" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Phone</label>
|
||||
<label
|
||||
htmlFor="footer-field-phone"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Phone
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-phone"
|
||||
@@ -318,7 +329,12 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-email" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Email Address</label>
|
||||
<label
|
||||
htmlFor="footer-field-email"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="footer-field-email"
|
||||
@@ -337,7 +353,12 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col text-left">
|
||||
<label htmlFor="footer-field-message" className="text-xs font-black text-brand-dark/70 mb-1.5">Your Message</label>
|
||||
<label
|
||||
htmlFor="footer-field-message"
|
||||
className="text-xs font-black text-brand-dark/70 mb-1.5"
|
||||
>
|
||||
Your Message
|
||||
</label>
|
||||
<textarea
|
||||
id="footer-field-message"
|
||||
name="message"
|
||||
@@ -382,7 +403,11 @@ export function Footer() {
|
||||
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
||||
<div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
|
||||
{LEGAL.map((link) => (
|
||||
<Link key={link.label} href={link.href} className="hover:text-[#e0c8f7] transition-colors">
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className="hover:text-[#e0c8f7] transition-colors"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
@@ -399,7 +424,6 @@ export function Footer() {
|
||||
// Ensure default export is also available for Next.js app router client components if needed
|
||||
export default Footer;
|
||||
|
||||
|
||||
function FooterCol({
|
||||
title,
|
||||
links,
|
||||
@@ -409,16 +433,11 @@ function FooterCol({
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<h5 className="footer-column-title">
|
||||
{title}
|
||||
</h5>
|
||||
<h5 className="footer-column-title">{title}</h5>
|
||||
<ul className="footer-links-list">
|
||||
{links.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link
|
||||
href={l.href}
|
||||
className="footer-link inline-block"
|
||||
>
|
||||
<Link href={l.href} className="footer-link inline-block">
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user