Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix hero section layout in homepage

Browse Source
This commit is contained in:
Aravind
2026-06-24 12:53:36 +05:30
parent 230be11899
commit 6ddfc57217
18 changed files with 514 additions and 454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
AGENTS.md
View File

@@ -4,9 +4,10 @@ This version has breaking changes — APIs, conventions, and file structure may
# STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER) # STRICT PROJECT-WIDE EXECUTION RULES (TOKEN SAVER)
Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources: Whenever you are assigned ANY task (bug fix, new feature, UI update, backend logic, etc.), you MUST follow these constraints strictly to prevent infinite loops and save compute resources:
1. DO NOT start the Next.js dev server or any local server. 1. For frontend UI, layout, responsive, styling, or screenshot-reference tasks, you MAY start the Next.js local development server using `npm run dev`.
2. DO NOT use curl, browser tools, Puppeteer, or any network request to test localhost or any local API endpoints. 2. For those frontend visual tasks, you MAY open and inspect `http://localhost:3000` locally.
3. DO NOT attempt to take screenshots, scrape pages, or self-verify visual/functional changes locally. 3. For those frontend visual tasks, you MAY capture local screenshots for before/after comparison.
4. DO NOT write "VERIFICATION REQUIRED" or attempt to run integration tests unless explicitly asked. 4. `npm run build` verifies compilation only. Do not claim a visual issue is fixed based only on build success.
5. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files. 5. For visual tasks, inspect localhost before reporting completion.
6. The human developer will always be responsible for running the server, executing the code, and verifying it locally. 6. Provide the exact code fix, logic, or file modification directly based on your analysis of the provided files.
7. For frontend UI, layout, responsive, styling, and screenshot-reference tasks, the agent must inspect localhost before reporting completion. Screenshots are required only for major layout changes, responsive/mobile changes, hero/footer changes, or when explicitly requested by the user. For small isolated CSS spacing fixes, screenshots are optional. The human developer gives final approval only.

BIN
desktop_screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

BIN
mobile_screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

173
src/app/about/page.tsx
View File

@@ -38,39 +38,38 @@ const COUNTERS = [
export default function AboutPage() { export default function AboutPage() {
return ( return (
<div className="relative min-h-screen bg-background"> <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 ─── */} {/* ─── 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"> <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 */} {/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none"> <div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image <Image
src="/about.png" src="/about.png"
alt="About Nearle Background" alt="About Nearle Background"
fill fill
sizes="100vw" sizes="100vw"
className="object-cover" className="object-cover"
priority priority
/> />
<div className="absolute inset-0 bg-[#120217]/50" /> <div className="absolute inset-0 bg-[#120217]/50" />
</div> </div>
<div className="relative z-10 mx-auto max-w-container-max"> <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"> <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
We are Nearle We are Nearle
</p> </p>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight"> <h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
We build Neighbourhoods. We build Neighbourhoods.
</h1> </h1>
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70"> <p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips. Nearle is India&apos;s first hyper-local managed “Neighbourhood living platform” which brings all the amenities and requirements of residents to their fingertips.
</p> </p>
</div> </div>
</section> </section>
{/* ─── Intro Description Block ─── */} {/* ─── 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"> <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
<div className="bg-white rounded-3xl p-8 md:p-12 border border-outline-variant/15 shadow-xl text-center">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-label-sm font-black text-primary uppercase tracking-widest">
Our Platform Our Platform
</span> </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"> <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. 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> </p>
</div> </section>
</section>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */} {/* ─── 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"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{STRATEGY_CARDS.map((card) => ( {STRATEGY_CARDS.map((card) => (
<div <div
key={card.title} key={card.title}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col" 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}`}> <div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 ${card.color}`}>
<MaterialIcon icon={card.icon} size={24} /> <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> </div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3"> ))}
{card.title} </div>
</h3> </section>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
{card.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Global Stats counters ─── */} {/* ─── Global Stats counters ─── */}
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24"> <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="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{COUNTERS.map((c) => ( {COUNTERS.map((c) => (
<div key={c.label} className="flex flex-col items-center text-center"> <div key={c.label} className="flex flex-col items-center text-center">
@@ -121,39 +118,39 @@ export default function AboutPage() {
</div> </div>
))} ))}
</div> </div>
</div> </section>
</section>
{/* ─── Brand Building Banner ─── */} {/* ─── 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"> <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="bg-white rounded-[2.5rem] p-12 md:p-16 border border-outline-variant/15 shadow-xl max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest"> <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
Don&apos;t miss the opportunity Don&apos;t miss the opportunity
</span> </span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4"> <h2 className="font-display text-3xl font-black text-brand-dark mt-2 mb-4">
Build Your Brand with Nearle Build Your Brand with Nearle
</h2> </h2>
<p className="text-body-md text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed"> <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. Delight your neighborhood with a personalized online experience. Unlock revenue opportunities and local marketing strategies that will take your business further.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-4">
<Link <Link
href="/businesses" 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" 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} /> <MaterialIcon icon="bolt" size={18} />
<span>Register Merchant</span> <span>Register Merchant</span>
</Link> </Link>
<Link <Link
href="/people" 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" 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} /> <MaterialIcon icon="download" size={18} />
<span>Download App</span> <span>Download App</span>
</Link> </Link>
</div>
</div> </div>
</div> </section>
</section> </div>
</div> </main>
); );
} }

161
src/app/businesses/page.tsx
View File

@@ -88,42 +88,41 @@ export default function BusinessesPage() {
}, []); }, []);
return ( return (
<div className="relative min-h-screen bg-background"> <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">
{/* ─── Hero Section with Animated Rotator ─── */} <div className="page-frame">
<section className="hero-section relative overflow-hidden px-6 md:px-12 lg:px-20 xl:px-24 pt-56 pb-72 text-center"> {/* ─── Hero Section with Animated Rotator ─── */}
{/* Background Image with Overlay */} <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">
<div className="absolute inset-0 z-0 select-none pointer-events-none"> {/* Background Image with Overlay */}
<Image <div className="absolute inset-0 z-0 select-none pointer-events-none">
src="/Nearle Business.png" <Image
alt="Nearle Business Background" src="/Nearle Business.png"
fill alt="Nearle Business Background"
sizes="100vw" fill
className="object-cover" sizes="100vw"
priority className="object-cover"
/> priority
<div className="absolute inset-0 bg-[#120217]/50" /> />
</div> <div className="absolute inset-0 bg-[#120217]/50" />
</div>
<div className="relative z-10 mx-auto max-w-container-max"> <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"> <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
Nearle for Business Nearle for Business
</p> </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"> <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> <span>Power your business.</span>
<br /> <br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500"> <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_WORDS[wordIndex]} {ROTATOR_WORDS[wordIndex]}
</span> </span>
</h1> </h1>
</div>
</section>
</div> {/* ─── Intro Highlight Banner ─── */}
</section> <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">
{/* ─── 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">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest"> <span className="text-label-sm font-black text-secondary uppercase tracking-widest">
Together, we grow Together, we grow
</span> </span>
@@ -143,53 +142,50 @@ export default function BusinessesPage() {
<span>Talk to an Expert</span> <span>Talk to an Expert</span>
</Link> </Link>
</div> </div>
</div> </section>
</section>
{/* ─── Timeline / Core Process Steps ─── */} {/* ─── 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"> <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"> <div className="text-center mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-label-sm font-black text-primary uppercase tracking-widest">
How it works How it works
</span> </span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2"> <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
Build Your Neighborhood Brand Build Your Neighborhood Brand
</h2> </h2>
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant"> <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. Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
</p> </p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PROCESS_STEPS.map((ps) => ( {PROCESS_STEPS.map((ps) => (
<div <div
key={ps.step} 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" 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"> <div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5">
{ps.step} {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>
<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>
</div> </section>
<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>
{/* ─── Grid Stats & Value Prop ─── */} {/* ─── Grid Stats & Value Prop ─── */}
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24"> <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="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24">
<div className="grid lg:grid-cols-12 gap-16 items-center"> <div className="grid lg:grid-cols-12 gap-16 items-center">
{/* Left side: features block (7 cols) */} {/* 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"> <span className="text-label-sm font-black text-primary uppercase tracking-widest">
Our features Our features
</span> </span>
@@ -220,7 +216,7 @@ export default function BusinessesPage() {
</div> </div>
{/* Right side: stats quadrant (5 cols) */} {/* 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) => ( {STATS.map((stat, i) => (
<div <div
key={stat.label} key={stat.label}
@@ -246,14 +242,11 @@ export default function BusinessesPage() {
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div> </section>
</section>
{/* ─── Join/Download Call to Action ─── */} {/* ─── 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"> <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="bg-primary rounded-[2.5rem] p-12 md:p-20 relative overflow-hidden shadow-2xl">
<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="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"> <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"> <h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
@@ -281,8 +274,8 @@ export default function BusinessesPage() {
</Link> </Link>
</div> </div>
</div> </div>
</div> </section>
</section> </div>
</div> </main>
); );
} }

173
src/app/contact/page.tsx
View File

@@ -1,5 +1,4 @@
import React from "react"; import React from "react";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { ContactForm } from "@/components/contact/ContactForm"; import { ContactForm } from "@/components/contact/ContactForm";
import type { Metadata } from "next"; import type { Metadata } from "next";
@@ -11,10 +10,9 @@ export const metadata: Metadata = {
export default function ContactPage() { export default function ContactPage() {
return ( 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"> <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 ─── */} {/* ─── 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"> <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 */} {/* 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="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"> <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.9fr] items-center gap-10 lg:gap-16">
{/* Left Column — MUST BE VISIBLE */} {/* 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"> <span className="text-brand-accent uppercase tracking-[0.18em] font-bold text-xs block">
LET’S CONNECT LET’S CONNECT
</span> </span>
@@ -79,99 +77,97 @@ export default function ContactPage() {
</div> </div>
</div> </div>
</section> </section>
</div>
{/* ─── Four Contact Info Cards ─── */} {/* ─── 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"> <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"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
{/* Card 1: Location */} {/* 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="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"> <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" /> <MaterialIcon icon="location_on" size={28} className="text-primary" />
</div> </div>
<h3 className="font-display text-lg font-black text-brand-dark mb-2">Our Location</h3> <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"> <p className="text-body-sm text-on-surface-variant leading-relaxed">
Nearle HQ, 424, Diwan Bahadur Rd,<br /> Nearle HQ, 424, Diwan Bahadur Rd,<br />
Opposite To Sri Krishna Sweets, R.S. Puram,<br /> Opposite To Sri Krishna Sweets, R.S. Puram,<br />
Coimbatore, Tamil Nadu 641002 Coimbatore, Tamil Nadu 641002
</p> </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 <a
href="tel:+918049123456" href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
className="text-label-sm text-secondary hover:text-on-secondary-container font-black flex items-center gap-1 group" 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 Get Directions
<MaterialIcon icon="phone" size={14} className="group-hover:scale-110 transition-transform" /> <MaterialIcon icon="arrow_forward" size={14} className="group-hover:translate-x-1 transition-transform" />
</a> </a>
</div> </div>
</div>
{/* Card 3: Email */} {/* 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="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"> <div className="w-14 h-14 rounded-2xl bg-secondary/5 text-secondary flex items-center justify-center mb-5">
<MaterialIcon icon="mail" size={28} className="text-primary" /> <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> </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 */} {/* 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="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"> <div className="w-14 h-14 rounded-2xl bg-primary/5 text-primary flex items-center justify-center mb-5">
<MaterialIcon icon="schedule" size={28} className="text-brand-accent" /> <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> </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"> {/* Card 4: Working Hours */}
Monday - Saturday<br /> <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">
9:00 AM - 6:00 PM<br /> <div className="w-14 h-14 rounded-2xl bg-brand-accent/10 text-brand-accent flex items-center justify-center mb-5">
<span className="font-bold text-secondary">24/7 Phone Helpdesk</span> <MaterialIcon icon="schedule" size={28} className="text-brand-accent" />
</p> </div>
<div className="mt-auto pt-4"> <h3 className="font-display text-lg font-black text-brand-dark mb-2">Working Hours</h3>
<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"> <p className="text-body-sm text-on-surface-variant leading-relaxed">
<span className="w-2 h-2 rounded-full bg-secondary animate-pulse" /> Monday - Saturday<br />
Helpdesk Active 9:00 AM - 6:00 PM<br />
</span> <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>
</div> </div>
</section>
</div> {/* ─── Map Section ─── */}
</div> <section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-6 md:p-8">
{/* ─── 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]"> <div className="relative w-full h-[450px]">
<iframe <iframe
title="Nearle Coimbatore Location Map" title="Nearle Coimbatore Location Map"
@@ -197,7 +193,6 @@ export default function ContactPage() {
</div> </div>
</section> </section>
</div> </div>
</main>
</div>
); );
} }

35
src/app/globals.css
View File

@@ -1131,6 +1131,41 @@ body {
z-index: 1; 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);
}
}

18
src/app/page.tsx
View File

@@ -8,29 +8,17 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
export default function HomePage() { export default function HomePage() {
return ( 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"> <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="w-full max-w-[1560px] mx-auto px-4 md:px-6 lg:px-8 xl:px-10"> <div className="page-frame">
<Hero /> <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 /> <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 /> <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 /> <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 /> <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 /> <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 /> <StoreQRSection />
</div> </div>
</div> </main>
); );
} }

159
src/app/people/page.tsx
View File

@@ -145,81 +145,80 @@ export default function PeoplePage() {
}, []); }, []);
return ( return (
<div className="relative min-h-screen bg-background"> <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 ─── */} {/* ─── 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"> <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 */} {/* Background Image with Overlay */}
<div className="hero-background select-none pointer-events-none"> <div className="hero-background select-none pointer-events-none">
<Image <Image
src="/nearle people.png" src="/nearle people.png"
alt="Nearle People Background" alt="Nearle People Background"
fill fill
sizes="100vw" sizes="100vw"
className="object-cover object-right" className="object-cover object-right"
priority priority
/> />
</div> </div>
<div className="hero-content relative z-10 mx-auto max-w-container-max"> <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"> <p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
Nearle for People Nearle for People
</p> </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"> <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> <span>Redefining Local Living.</span>
<br /> <br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500"> <span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_SLIDES[slideIndex]} {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> </span>
</h1> <h2 className="font-display text-3xl font-black text-brand-dark mt-2">
</div> Everything You Need, Just a Click Away
</section> </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 ─── */} <div className="experience-grid">
<section className="experience-section mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24 py-28"> {OFFERINGS.map((offering) => (
<div className="text-center mb-16"> <article
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> key={offering.title}
What we offer className="experience-card"
</span> >
<h2 className="font-display text-3xl font-black text-brand-dark mt-2"> <Image
Everything You Need, Just a Click Away src={offering.image}
</h2> alt={offering.title}
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant"> fill
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses. sizes="(max-width: 1023px) 100vw, 33vw"
</p> className="experience-card__image"
</div> />
<div className="experience-card__overlay" />
<div className="experience-grid"> <div className="experience-card__content text-left">
{OFFERINGS.map((offering) => ( <div className="experience-card__icon">
<article <MaterialIcon icon={offering.icon} size={22} className="text-white" />
key={offering.title} </div>
className="experience-card" <h3>{offering.title}</h3>
> <p>{offering.descr}</p>
<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> </div>
<h3>{offering.title}</h3> </article>
<p>{offering.descr}</p> ))}
</div> </div>
</article> </section>
))}
</div>
</section>
{/* ─── Localized Stats Block ─── */} {/* ─── Localized Stats Block ─── */}
<section className="bg-surface-container-low border-y border-outline-variant/15 py-24"> <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="mx-auto max-w-container-max px-6 md:px-12 lg:px-20 xl:px-24"> <div className="mb-12">
<div className="text-center mb-12">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-label-sm font-black text-primary uppercase tracking-widest">
Nearle Network Nearle Network
</span> </span>
@@ -247,12 +246,10 @@ export default function PeoplePage() {
</div> </div>
))} ))}
</div> </div>
</div> </section>
</section>
{/* ─── Ready to Download 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"> <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">
<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">
{/* Subtle ambient light gradient overlays */} {/* 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_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" /> <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" className="text-secondary"
/> />
</div> </div>
<div className="text-left"> <div className="text-left text-brand-dark">
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p> <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> <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>
</div> </div>
@@ -555,8 +552,8 @@ export default function PeoplePage() {
className="text-secondary" className="text-secondary"
/> />
</div> </div>
<div className="text-left"> <div className="text-left text-brand-dark">
<p className="text-xs font-black text-brand-dark leading-tight">Order Confirmed</p> <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> <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>
</div> </div>
@@ -596,8 +593,8 @@ export default function PeoplePage() {
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section> </div>
</div> </main>
); );
} }

6
src/components/home/BusinessSection.tsx
View File

@@ -31,8 +31,8 @@ const BENEFITS = [
export function BusinessSection() { export function BusinessSection() {
return ( 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"> <section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
<div className="max-w-container-max mx-auto"> <div className="w-full">
{/* Merchant Section Grid */} {/* Merchant Section Grid */}
<div className="grid lg:grid-cols-12 gap-16 items-center"> <div className="grid lg:grid-cols-12 gap-16 items-center">
@@ -100,7 +100,7 @@ export function BusinessSection() {
</div> </div>
{/* CURVED PROMO BANNER (Bottom CTA Block) */} {/* 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 */} {/* 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 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" /> <div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />

10
src/components/home/Hero.tsx
View File

@@ -28,8 +28,8 @@ const QUICK_LINKS = [
export function Hero() { export function Hero() {
return ( return (
<> <section className="relative pb-4 md:pb-6">
<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"> <div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]">
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */} {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none"> <div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture */} {/* Subtle Background Dot Texture */}
@@ -50,7 +50,7 @@ export function Hero() {
</div> </div>
{/* ─── Main Content Wrapper ─── */} {/* ─── 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 */} {/* Left Column: Text & Search Content */}
<div className="hero-content text-white select-none"> <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"> <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> </div>
{/* Overlapping Quick Category Links */} {/* 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"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{QUICK_LINKS.map((item) => ( {QUICK_LINKS.map((item) => (
<div <div
@@ -174,6 +174,6 @@ export function Hero() {
))} ))}
</div> </div>
</div> </div>
</> </section>
); );
} }

6
src/components/home/HowItWorks.tsx
View File

@@ -26,10 +26,10 @@ const STEPS = [
export function HowItWorks() { export function HowItWorks() {
return ( 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"> <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="max-w-container-max mx-auto"> <div className="w-full">
{/* Header Section */} {/* 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"> <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
Simple Process Simple Process
</span> </span>

66
src/components/home/HyperlocalFeatures.tsx
View File

@@ -27,42 +27,42 @@ const FEATURES = [
export function HyperlocalFeatures() { export function HyperlocalFeatures() {
return ( 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 */} {/* Scoped CSS styles for precise layout enforcement */}
<style>{` <style>{`
@media (min-width: 901px) { @media (min-width: 901px) {
.custom-care-grid { .custom-care-grid {
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important; grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
gap: 64px !important; gap: 56px !important;
width: min(1360px, 100%) !important; width: min(1360px, 100%) !important;
} }
.custom-care-visual { .custom-care-visual {
max-width: 530px !important; max-width: 530px !important;
height: 580px !important; height: 580px !important;
} }
.custom-care-card { .custom-care-card {
min-height: 580px !important; min-height: 580px !important;
padding: 60px !important; padding: 60px !important;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
justify-content: center !important; justify-content: center !important;
} }
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.custom-care-grid { .custom-care-grid {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
gap: 32px !important; gap: 40px !important;
width: 100% !important; width: 100% !important;
} }
.custom-care-visual { .custom-care-visual {
max-width: 420px !important; max-width: 420px !important;
height: 460px !important; height: 460px !important;
} }
.custom-care-card { .custom-care-card {
min-height: auto !important; min-height: auto !important;
padding: 36px 24px !important; padding: 36px 24px !important;
} }
} }
`}</style> `}</style>
{/* Subtle background radial glows */} {/* Subtle background radial glows */}

4
src/components/home/ServiceCategories.tsx
View File

@@ -55,8 +55,8 @@ const CATEGORIES = [
export function ServiceCategories() { export function ServiceCategories() {
return ( 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"> <section className="pt-10 md:pt-14 lg:pt-16 pb-2 md:pb-3 lg:pb-4">
<div className="max-w-container-max mx-auto"> <div className="w-full">
{/* Header Section */} {/* 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 className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
<div> <div>

4
src/components/home/StoreQRSection.tsx
View File

@@ -9,12 +9,12 @@ const FLOW_STEPS = [
export function StoreQRSection() { export function StoreQRSection() {
return ( 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 */} {/* 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 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="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) ─── */} {/* ─── DESKTOP LAYOUT (lg and above) ─── */}
<div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center"> <div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">

4
src/components/home/WhyNearle.tsx
View File

@@ -29,8 +29,8 @@ const CARDS = [
export function WhyNearle() { export function WhyNearle() {
return ( 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"> <section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6">
<div className="max-w-container-max mx-auto"> <div className="w-full">
{/* Header Section */} {/* Header Section */}
<div className="text-center mb-8 md:mb-10"> <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"> <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">

101
src/components/layout/Footer.tsx
View File

@@ -57,7 +57,7 @@ export function Footer() {
const [submitSuccess, setSubmitSuccess] = useState(false); const [submitSuccess, setSubmitSuccess] = useState(false);
const handleInputChange = ( const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => { ) => {
const { name, value } = e.target; const { name, value } = e.target;
setFormData((prev) => ({ setFormData((prev) => ({
@@ -123,10 +123,7 @@ export function Footer() {
const brandCol = ( const brandCol = (
<div className="footer-brand min-w-0 self-start"> <div className="footer-brand min-w-0 self-start">
<Link <Link href="/" className="mb-4 inline-block">
href="/"
className="mb-4 inline-block"
>
<Image <Image
src="/logo-v2.png" src="/logo-v2.png"
alt="Nearle" alt="Nearle"
@@ -137,23 +134,16 @@ export function Footer() {
/> />
</Link> </Link>
<p className="footer-desc mb-4 text-white/80"> <p className="footer-desc mb-4 text-white/80">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within 2km. India&apos;s leading hyperlocal neighborhood network, empowering
communities and verified local businesses within 2km.
</p> </p>
{/* Social Links */} {/* Social Links */}
<div className="flex gap-4"> <div className="flex gap-4">
<a <a href="#" className="footer-social-link" aria-label="Share">
href="#"
className="footer-social-link"
aria-label="Share"
>
<MaterialIcon icon="share" size={24} /> <MaterialIcon icon="share" size={24} />
</a> </a>
<a <a href="#" className="footer-social-link" aria-label="Website">
href="#"
className="footer-social-link"
aria-label="Website"
>
<MaterialIcon icon="public" size={24} /> <MaterialIcon icon="public" size={24} />
</a> </a>
</div> </div>
@@ -161,8 +151,8 @@ export function Footer() {
); );
return ( 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"> <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 max-w-[1560px]"> <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)]"> <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 */} {/* 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"> <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} /> <MaterialIcon icon="headset_mic" size={24} />
</div> </div>
<div className="text-left"> <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"> <p className="text-sm font-semibold text-white/70 mt-0.5">
Need immediate assistance with an order or local service? Need immediate assistance with an order or local service?
</p> </p>
@@ -181,18 +173,24 @@ export function Footer() {
href="tel:+918049123456" 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" 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> <span>+91 80 4912 3456</span>
</a> </a>
</div> </div>
{/* Main Footer Content */} {/* 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="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={ <div
isContactPage className={
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10" isContactPage
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start" ? "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 ? ( {isContactPage ? (
<> <>
{/* Brand Column */} {/* Brand Column */}
@@ -237,9 +235,12 @@ export function Footer() {
</h4> </h4>
<p className="mt-3 text-sm leading-6 text-white/60"> <p className="mt-3 text-sm leading-6 text-white/60">
424, Diwan Bahadur Rd,<br /> 424, Diwan Bahadur Rd,
Opposite to Sri Krishna Sweets,<br /> <br />
R.S. Puram, Coimbatore,<br /> Opposite to Sri Krishna Sweets,
<br />
R.S. Puram, Coimbatore,
<br />
Tamil Nadu 641002 Tamil Nadu 641002
</p> </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="footer-form-row grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="flex flex-col text-left"> <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 <input
type="text" type="text"
id="footer-field-name" id="footer-field-name"
@@ -298,7 +304,12 @@ export function Footer() {
)} )}
</div> </div>
<div className="flex flex-col text-left"> <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 <input
type="text" type="text"
id="footer-field-phone" id="footer-field-phone"
@@ -318,7 +329,12 @@ export function Footer() {
</div> </div>
<div className="flex flex-col text-left"> <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 <input
type="email" type="email"
id="footer-field-email" id="footer-field-email"
@@ -337,7 +353,12 @@ export function Footer() {
</div> </div>
<div className="flex flex-col text-left"> <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 <textarea
id="footer-field-message" id="footer-field-message"
name="message" name="message"
@@ -382,7 +403,11 @@ export function Footer() {
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p> <p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
<div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left"> <div className="flex flex-col md:flex-row gap-2 md:gap-6 text-left">
{LEGAL.map((link) => ( {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.label}
</Link> </Link>
))} ))}
@@ -399,7 +424,6 @@ export function Footer() {
// Ensure default export is also available for Next.js app router client components if needed // Ensure default export is also available for Next.js app router client components if needed
export default Footer; export default Footer;
function FooterCol({ function FooterCol({
title, title,
links, links,
@@ -409,16 +433,11 @@ function FooterCol({
}) { }) {
return ( return (
<div> <div>
<h5 className="footer-column-title"> <h5 className="footer-column-title">{title}</h5>
{title}
</h5>
<ul className="footer-links-list"> <ul className="footer-links-list">
{links.map((l) => ( {links.map((l) => (
<li key={l.label}> <li key={l.label}>
<Link <Link href={l.href} className="footer-link inline-block">
href={l.href}
className="footer-link inline-block"
>
{l.label} {l.label}
</Link> </Link>
</li> </li>

35
take_screenshot.js Normal file
View File

@@ -0,0 +1,35 @@
const puppeteer = require('puppeteer-core');
const path = require('path');
(async () => {
const browser = await puppeteer.launch({
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
headless: true
});
const page = await browser.newPage();
// Desktop Screenshot (1440px)
await page.setViewport({ width: 1440, height: 900 });
try {
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
console.log('Successfully navigated to http://localhost:3000');
} catch (err) {
console.error('Navigation failed:', err);
await browser.close();
process.exit(1);
}
const desktopPath = path.join(__dirname, 'desktop_screenshot.png');
await page.screenshot({ path: desktopPath, fullPage: true });
console.log('Saved desktop screenshot to:', desktopPath);
// Mobile Screenshot (390px)
await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
await page.screenshot({ path: mobilePath, fullPage: true });
console.log('Saved mobile screenshot to:', mobilePath);
await browser.close();
})();