Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update redesign

Browse Source
This commit is contained in:
Aravind
2026-06-24 18:31:06 +05:30
parent 6ddfc57217
commit d3c7d93cef
23 changed files with 1756 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,9 @@
import React from "react"; import React from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
import type { Metadata } from "next"; import type { Metadata } from "next";
export const metadata: Metadata = { export const metadata: Metadata = {
@@ -14,7 +16,7 @@ const STRATEGY_CARDS = [
title: "Our Mission", title: "Our Mission",
descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.", descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
icon: "target", icon: "target",
color: "bg-primary/5 text-primary border-primary/10" color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
}, },
{ {
title: "Our Vision", title: "Our Vision",
@@ -26,76 +28,115 @@ const STRATEGY_CARDS = [
title: "Why Nearle", title: "Why Nearle",
descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.", descr: "Nearly is essential for a business to grow by leveraging the full potential of its neighbourhood. It is an indispensable tool for Consumers to take advantage from its Neighbourhoods.",
icon: "help_outline", icon: "help_outline",
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20" color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
} }
]; ];
const COUNTERS = [ const LOCAL_COUNTERS = [
{ count: "100+", label: "Customers Served", icon: "people" }, { count: "100+", label: "Customers Served", icon: "people" },
{ count: "100+", label: "Active Businesses", icon: "store" }, { count: "100+", label: "Active Businesses", icon: "store" },
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" } { count: "100+", label: "Active Neighborhoods", icon: "location_city" }
]; ];
export default function AboutPage() { const HERO_STATS = [
return ( { title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
<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"> { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
<div className="page-frame"> { title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
{/* ─── Hero Section ─── */} { title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
<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"> export default function AboutPage() {
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent"> const collageCards = [
We are Nearle { text: "Local First", icon: "store" },
</p> { text: "Trusted Network", icon: "verified" },
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight"> { text: "Connected Communities", icon: "groups" }
We build Neighbourhoods. ];
return (
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
{/* TWO-COLUMN GRID */}
<div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
{/* Left Column: Copy & Actions */}
<div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
About Nearle
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Built for Every
<br />
<span className="text-[#6330D6]">Neighbourhood.</span>
</h1> </h1>
<p className="mx-auto mt-6 max-w-2xl text-body-lg text-white/70">
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
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 className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#story-section"
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
>
Our Story
</a>
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
Join Our Journey
</Link>
</div>
</div>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/Nearle Business.png"
rightImage="/nearle people.png"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
{/* BOTTOM HERO STATS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_STATS} />
</div> </div>
</section> </section>
{/* ─── Intro Description Block ─── */} {/* ─── 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"> <section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our Platform Our Platform
</span> </span>
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-6"> <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-4">
Nearle Neighbourhood Commerce Nearle Neighbourhood Commerce
</h2> </h2>
<p className="mx-auto max-w-3xl text-body-md text-on-surface-variant leading-relaxed"> <p className="mx-auto max-w-3xl text-sm md:text-base text-[#5E5866] leading-relaxed font-semibold">
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>
</section> </section>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<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 text-left" className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
> >
<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 shrink-0 ${card.color}`}>
<MaterialIcon icon={card.icon} size={24} /> <MaterialIcon icon={card.icon} size={22} />
</div> </div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3"> <h3 className="font-display text-lg font-black text-[#16001D] mb-3">
{card.title} {card.title}
</h3> </h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed"> <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
{card.descr} {card.descr}
</p> </p>
</div> </div>
@@ -104,15 +145,15 @@ export default function AboutPage() {
</section> </section>
{/* ─── Global Stats counters ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<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) => ( {LOCAL_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">
<div className="w-12 h-12 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4"> <div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={c.icon} size={24} /> <MaterialIcon icon={c.icon} size={22} />
</div> </div>
<h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4> <h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
<p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider"> <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label} {c.label}
</p> </p>
</div> </div>
@@ -121,28 +162,28 @@ export default function AboutPage() {
</section> </section>
{/* ─── Brand Building Banner ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
<div className="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-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
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-[#16001D] mt-4 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-xs md:text-sm text-[#5E5866] max-w-2xl mx-auto mb-8 leading-relaxed font-semibold">
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-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-lg transition-all duration-200 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-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 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>
@@ -150,7 +191,6 @@ export default function AboutPage() {
</div> </div>
</div> </div>
</section> </section>
</div> </PremiumPageShell>
</main>
); );
} }

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

@@ -1,15 +1,11 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React from "react";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
const ROTATOR_WORDS = [ import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
"Stand above your competitors!", import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
// "Reach the right people, near you.",
"Get noticed in your locality!"
];
const PROCESS_STEPS = [ const PROCESS_STEPS = [
{ {
@@ -17,7 +13,7 @@ const PROCESS_STEPS = [
title: "Get Online", title: "Get Online",
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.", descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
icon: "storefront", icon: "storefront",
color: "bg-primary/5 text-primary border-primary/10" color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
}, },
{ {
step: "02", step: "02",
@@ -31,7 +27,7 @@ const PROCESS_STEPS = [
title: "Get Simplified", title: "Get Simplified",
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.", descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
icon: "auto_awesome", icon: "auto_awesome",
color: "bg-brand-accent/10 text-brand-accent border-brand-accent/20" color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
} }
]; ];
@@ -71,72 +67,102 @@ const FEATURES = [
]; ];
const STATS = [ const STATS = [
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" }, { value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" }, { value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" }, { value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-surface-container" } { value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
];
const HERO_BENEFITS = [
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
{ title: "Easy Order Management", icon: "assignment", desc: "Track and fulfill cleanly" },
{ title: "Grow Repeat Customers", icon: "trending_up", desc: "Build neighborhood loyalty" },
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
]; ];
export default function BusinessesPage() { export default function BusinessesPage() {
const [wordIndex, setWordIndex] = useState(0); const collageCards = [
{ text: "Nearby Customers", icon: "people" },
useEffect(() => { { text: "Orders & Offers", icon: "local_offer" },
const timer = setInterval(() => { { text: "Local Delivery Support", icon: "local_shipping" }
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length); ];
}, 3000);
return () => clearInterval(timer);
}, []);
return ( return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8"> <PremiumPageShell>
<div className="page-frame"> {/* ─── Hero Section ─── */}
{/* ─── Hero Section with Animated Rotator ─── */} <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
<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"> {/* TWO-COLUMN GRID */}
{/* Background Image with Overlay */} <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
<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"> {/* Left Column: Copy & Actions */}
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent"> <div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Nearle for Business Nearle for Business
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Grow Your Local Business,
<br />
<span className="text-[#6330D6]">Neighbourhood by Neighbourhood.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Get discovered by nearby customers, manage orders, and build repeat business from one simple platform.
</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"> <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<span>Power your business.</span> <a
<br /> href="https://play.google.com/store/apps/details?id=com.nearle.gear"
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500"> target="_blank"
{ROTATOR_WORDS[wordIndex]} rel="noopener noreferrer"
</span> className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
</h1> >
List Your Store
</a>
<Link
href="/contact"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
Explore Solutions
</Link>
</div>
</div>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/nearlenewlogo.png"
leftImage="/images/cat-daily-essentials.png"
rightImage="/Nearle Business.png"
glassCards={collageCards}
isPhoneCenter={false}
/>
</div>
</div>
{/* BOTTOM HERO BENEFITS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_BENEFITS} />
</div> </div>
</section> </section>
{/* ─── Intro Highlight Banner ─── */} {/* ─── 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"> <section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
<div className="max-w-2xl text-left"> <div className="max-w-2xl text-left">
<span className="text-label-sm font-black text-secondary uppercase tracking-widest"> <span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
Together, we grow Together, we grow
</span> </span>
<h2 className="font-display text-2xl md:text-3xl font-black text-brand-dark mt-2 mb-4 leading-tight"> <h2 className="font-display text-2xl md:text-3xl font-black text-[#16001D] mt-4 mb-3 leading-tight">
Get set in minutes and delight the Neighborhood Get set in minutes and delight the Neighborhood
</h2> </h2>
<p className="text-body-md text-on-surface-variant leading-relaxed"> <p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
Nearle is built to help businesses like <strong className="text-primary">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly. Nearle is built to help businesses like <strong className="text-[#6330D6]">Yours</strong> establish a local online presence and empower neighborhood customers to discover and interact with you directly.
</p> </p>
</div> </div>
<div className="flex gap-4 shrink-0"> <div className="flex gap-4 shrink-0">
<Link <Link
href="/contact" href="/contact"
className="bg-primary hover:bg-primary-container text-on-primary font-black px-8 py-4 rounded-xl text-label-md shadow-lg active:scale-95 duration-200 transition-all flex items-center gap-2" className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm shadow-md active:scale-95 transition-all flex items-center gap-2"
> >
<MaterialIcon icon="chat" size={18} /> <MaterialIcon icon="chat" size={18} />
<span>Talk to an Expert</span> <span>Talk to an Expert</span>
@@ -145,15 +171,15 @@ export default function BusinessesPage() {
</section> </section>
{/* ─── Timeline / Core Process Steps ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
<div className="text-center mb-16"> <div className="text-center mb-12">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
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-[#16001D] mt-4">
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-3 max-w-xl text-sm md:text-base text-[#5E5866]">
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>
@@ -162,18 +188,18 @@ export default function BusinessesPage() {
{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="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
> >
<div className="absolute top-4 right-6 text-6xl font-black text-on-surface-variant/5"> <div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
{ps.step} {ps.step}
</div> </div>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}> <div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
<MaterialIcon icon={ps.icon} size={28} /> <MaterialIcon icon={ps.icon} size={22} />
</div> </div>
<h3 className="font-display text-xl font-black text-brand-dark mb-3 text-left"> <h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
{ps.title} {ps.title}
</h3> </h3>
<p className="text-body-sm text-on-surface-variant leading-relaxed text-left"> <p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
{ps.descr} {ps.descr}
</p> </p>
</div> </div>
@@ -182,31 +208,31 @@ export default function BusinessesPage() {
</section> </section>
{/* ─── Grid Stats & Value Prop ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="grid lg:grid-cols-12 gap-16 items-center"> <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
{/* Left side: features block (7 cols) */} {/* Left side: features block (7 cols) */}
<div className="lg:col-span-7 text-left"> <div className="lg:col-span-7 text-left">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our features Our features
</span> </span>
<h2 className="font-display text-3xl md:text-4xl font-black text-brand-dark mt-2 mb-6"> <h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
Move Your Business Forward Move Your Business Forward
</h2> </h2>
<p className="text-body-md text-on-surface-variant mb-12 max-w-2xl"> <p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease. Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
</p> </p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{FEATURES.map((feat) => ( {FEATURES.map((feat) => (
<div key={feat.title} className="flex gap-4"> <div key={feat.title} className="flex gap-3">
<div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1"> <div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
<MaterialIcon icon="check" size={16} className="font-black" /> <MaterialIcon icon="check" size={14} className="font-black" />
</div> </div>
<div> <div>
<h4 className="font-display text-[15px] font-black text-brand-dark mb-1"> <h4 className="font-display text-sm font-black text-[#16001D] mb-1">
{feat.title} {feat.title}
</h4> </h4>
<p className="text-body-sm text-on-surface-variant leading-relaxed"> <p className="text-xs text-[#5E5866] leading-relaxed">
{feat.descr} {feat.descr}
</p> </p>
</div> </div>
@@ -216,25 +242,25 @@ 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 text-left"> <div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
{STATS.map((stat, i) => ( {STATS.map((stat, i) => (
<div <div
key={stat.label} key={stat.label}
className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${ className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
i % 2 === 1 ? "lg:mt-8" : "" i % 2 === 1 ? "lg:mt-4" : ""
}`} }`}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${ <div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary" stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
}`}> }`}>
<MaterialIcon icon={stat.icon} size={20} /> <MaterialIcon icon={stat.icon} size={18} />
</div> </div>
</div> </div>
<div className="mt-8"> <div className="mt-6">
<p className="text-4xl font-display font-black tracking-tight">{stat.value}</p> <p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
<p className={`text-[11px] font-bold mt-1 ${ <p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80" stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
}`}> }`}>
{stat.label} {stat.label}
</p> </p>
@@ -246,28 +272,28 @@ export default function BusinessesPage() {
</section> </section>
{/* ─── Join/Download Call to Action ─── */} {/* ─── 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"> <section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white relative">
<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(99,48,214,0.15),transparent_50%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto text-on-primary"> <div className="relative z-10 max-w-2xl mx-auto">
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight"> <h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
Nearle is Essential for Business Growth Nearle is Essential for Business Growth
</h2> </h2>
<p className="text-body-lg text-white/80 mb-10 leading-relaxed"> <p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today. Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
</p> </p>
<div className="flex flex-wrap justify-center gap-4"> <div className="flex flex-wrap justify-center gap-3.5">
<a <a
href="https://play.google.com/store/apps/details?id=com.nearle.gear" href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center gap-2" className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
> >
<MaterialIcon icon="bolt" size={18} /> <MaterialIcon icon="bolt" size={18} />
<span>Register as Partner</span> <span>Register as Partner</span>
</a> </a>
<Link <Link
href="/contact" href="/contact"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white 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-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
> >
<MaterialIcon icon="phone" size={18} /> <MaterialIcon icon="phone" size={18} />
<span>Contact Experts</span> <span>Contact Experts</span>
@@ -275,7 +301,6 @@ export default function BusinessesPage() {
</div> </div>
</div> </div>
</section> </section>
</div> </PremiumPageShell>
</main>
); );
} }

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

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

140
src/app/globals.css
View File

@@ -2,25 +2,25 @@
/* ─── Design Tokens (Material Design 3 inspired) ─── */ /* ─── Design Tokens (Material Design 3 inspired) ─── */
:root { :root {
--surface: #E7D3EF; --surface: #FAF8FC;
--surface-dim: #dadadc; --surface-dim: #dadadc;
--surface-bright: #E7D3EF; --surface-bright: #FAF8FC;
--surface-container-lowest: #ffffff; --surface-container-lowest: #ffffff;
--surface-container-low: #f3f3f6; --surface-container-low: #f3f3f6;
--surface-container: #eeeef0; --surface-container: #F3E8F6;
--surface-container-high: #e8e8ea; --surface-container-high: #e8e8ea;
--surface-container-highest: #e2e2e5; --surface-container-highest: #e2e2e5;
--on-surface: #1a1c1e; --on-surface: #16001D;
--on-surface-variant: #4d434f; --on-surface-variant: #6D6172;
--inverse-surface: #2f3133; --inverse-surface: #2f3133;
--inverse-on-surface: #f0f0f3; --inverse-on-surface: #f0f0f3;
--outline: #7f7381; --outline: #7f7381;
--outline-variant: #d0c2d1; --outline-variant: #d0c2d1;
--surface-tint: #83429f; --surface-tint: #83429f;
--primary: #4d046a; --primary: #65149A;
--on-primary: #ffffff; --on-primary: #ffffff;
--primary-container: #662582; --primary-container: #7C3AED;
--on-primary-container: #de96f9; --on-primary-container: #ffffff;
--inverse-primary: #ebb2ff; --inverse-primary: #ebb2ff;
--secondary: #006d37; --secondary: #006d37;
--on-secondary: #ffffff; --on-secondary: #ffffff;
@@ -46,14 +46,14 @@
--tertiary-fixed-dim: #ebc246; --tertiary-fixed-dim: #ebc246;
--on-tertiary-fixed: #241a00; --on-tertiary-fixed: #241a00;
--on-tertiary-fixed-variant: #584400; --on-tertiary-fixed-variant: #584400;
--background: #E7D3EF; --background: #E8D8ED;
--on-background: #1a1c1e; --on-background: #16001D;
--surface-variant: #e2e2e5; --surface-variant: #e2e2e5;
--brand-dark: #120217; --brand-dark: #17001F;
--brand-dark-surface: #1e0627; --brand-dark-surface: #25002F;
--brand-accent: #e0c8f7; --brand-accent: #E8D8ED;
--brand-accent-light: #E4D0FC; --brand-accent-light: #F3E8F6;
--brand-cream: #E7D3EF; --brand-cream: #E8D8ED;
} }
/* ─── Tailwind v4 Theme ─── */ /* ─── Tailwind v4 Theme ─── */
@@ -141,10 +141,12 @@
/* ─── Base Styles ─── */ /* ─── Base Styles ─── */
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
background: #E8DCF2;
} }
body { body {
background: var(--background); min-height: 100vh;
background: #E8DCF2 !important;
color: var(--on-surface); color: var(--on-surface);
font-family: var(--font-body); font-family: var(--font-body);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@@ -1133,35 +1135,113 @@ body {
/* ─── Shared Premium Framed Layout Classes ─── */ /* ─── Shared Premium Framed Layout Classes ─── */
.page-canvas { .page-canvas {
@apply bg-[#E6D7EA] flex flex-col gap-0; background-color: #E8D8ED;
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
/* Responsive outer page padding */
padding-left: 16px;
padding-right: 16px;
}
@media (min-width: 768px) {
.page-canvas {
padding-left: 24px;
padding-right: 24px;
}
}
@media (min-width: 1024px) {
.page-canvas {
padding-left: 32px;
padding-right: 32px;
}
}
@media (min-width: 1280px) {
.page-canvas {
padding-left: 40px;
padding-right: 40px;
}
}
@media (min-width: 1536px) {
.page-canvas {
padding-left: 48px;
padding-right: 48px;
}
} }
.page-frame { .page-frame {
@apply mx-auto w-full; margin-left: auto;
max-width: min(100% - 16px, 1560px); margin-right: auto;
width: 100%;
max-width: 1920px;
display: flex;
flex-direction: column;
/* Responsive vertical spacing between major framed sections */
gap: 16px; /* gap-4 */
} }
@media (min-width: 768px) {
@media (min-width: 640px) {
.page-frame { .page-frame {
max-width: min(100% - 24px, 1560px); gap: 24px; /* gap-6 */
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.page-frame { .page-frame {
max-width: min(100% - 40px, 1680px); gap: 32px; /* gap-8 */
} }
} }
@media (min-width: 1536px) { /* ─── Section Style Variants ─── */
.page-frame { .section-card-white {
max-width: min(100% - 56px, 1840px); background-color: #FAF8FC;
border: 1px solid rgba(255, 255, 255, 0.50);
border-radius: 1.75rem;
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-white {
border-radius: 2.25rem;
}
}
@media (min-width: 1024px) {
.section-card-white {
border-radius: 2.75rem;
} }
} }
@media (min-width: 2560px) { .section-card-lavender {
.page-frame { background-color: #F3E8F6;
max-width: min(100% - 96px, 2200px); border: 1px solid rgba(255, 255, 255, 0.50);
border-radius: 1.75rem;
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-lavender {
border-radius: 2.25rem;
}
}
@media (min-width: 1024px) {
.section-card-lavender {
border-radius: 2.75rem;
}
}
.section-card-dark {
background: linear-gradient(to bottom right, #1A0322, #120217, #0A000D);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 2rem;
box-shadow: 0 20px 50px rgba(20, 0, 30, 0.22);
overflow: hidden;
}
@media (min-width: 768px) {
.section-card-dark {
border-radius: 2.5rem;
}
}
@media (min-width: 1024px) {
.section-card-dark {
border-radius: 3rem;
} }
} }

8
src/app/layout.tsx
View File

@@ -1,8 +1,6 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Jost } from "next/font/google"; import { Jost } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
const jost = Jost({ const jost = Jost({
subsets: ["latin"], subsets: ["latin"],
@@ -94,10 +92,8 @@ export default function RootLayout({
rel="stylesheet" rel="stylesheet"
/> />
</head> </head>
<body className="bg-background text-on-surface font-body antialiased" suppressHydrationWarning> <body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
<Navbar /> {children}
<main>{children}</main>
<Footer />
</body> </body>
</html> </html>
); );

8
src/app/page.tsx
View File

@@ -1,3 +1,4 @@
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { Hero } from "@/components/home/Hero"; import { Hero } from "@/components/home/Hero";
import { ServiceCategories } from "@/components/home/ServiceCategories"; import { ServiceCategories } from "@/components/home/ServiceCategories";
import { WhyNearle } from "@/components/home/WhyNearle"; import { WhyNearle } from "@/components/home/WhyNearle";
@@ -8,8 +9,7 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
export default function HomePage() { export default function HomePage() {
return ( return (
<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"> <PremiumPageShell>
<div className="page-frame">
<Hero /> <Hero />
<ServiceCategories /> <ServiceCategories />
<WhyNearle /> <WhyNearle />
@@ -17,8 +17,6 @@ export default function HomePage() {
<HyperlocalFeatures /> <HyperlocalFeatures />
<BusinessSection /> <BusinessSection />
<StoreQRSection /> <StoreQRSection />
</div> </PremiumPageShell>
</main>
); );
} }

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

@@ -1,14 +1,12 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
const ROTATOR_SLIDES = [ import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
"Enjoy your Neighbourhood Living.", import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
"Just a Click – For all your needs.",
"Convenient & safe shopping locally."
];
const OFFERINGS = [ const OFFERINGS = [
{ {
@@ -94,7 +92,7 @@ const OFFERINGS = [
} }
]; ];
const STATS = [ const LOCAL_STATS = [
{ count: "100+", label: "Verified Restaurants", icon: "restaurant" }, { count: "100+", label: "Verified Restaurants", icon: "restaurant" },
{ count: "100+", label: "Green Grocers", icon: "local_mall" }, { count: "100+", label: "Green Grocers", icon: "local_mall" },
{ count: "100+", label: "Home Etailers", icon: "shopping_cart" }, { count: "100+", label: "Home Etailers", icon: "shopping_cart" },
@@ -134,58 +132,87 @@ const APP_BENEFITS = [
} }
]; ];
export default function PeoplePage() { const HERO_STATS = [
const [slideIndex, setSlideIndex] = useState(0); { title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
{ title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
{ title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
];
useEffect(() => { export default function PeoplePage() {
const timer = setInterval(() => { const collageCards = [
setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length); { text: "Discover Nearby", icon: "explore" },
}, 3000); { text: "Save Favourites", icon: "favorite" },
return () => clearInterval(timer); { text: "Order Anytime", icon: "shopping_bag" }
}, []); ];
return ( return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8"> <PremiumPageShell>
<div className="page-frame">
{/* ─── Hero Section ─── */} {/* ─── 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"> <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
{/* Background Image with Overlay */} {/* TWO-COLUMN GRID */}
<div className="hero-background select-none pointer-events-none"> <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 border-b border-[#6330D6]/10">
<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"> {/* Left Column: Copy & Actions */}
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent"> <div className="flex flex-col text-left max-w-xl">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
Nearle for People Nearle for People
</span>
<h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
Your Neighbourhood,
<br />
Now in Your <span className="text-[#6330D6]">Pocket.</span>
</h1>
<p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
Discover verified local stores, save your favorite merchants, and order everyday items with superfast local fulfillment.
</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"> <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<span>Redefining Local Living.</span> <a
<br /> href="#download-section"
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500"> className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
{ROTATOR_SLIDES[slideIndex]} >
</span> Get the App
</h1> </a>
<Link
href="/"
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
>
Explore Stores
</Link>
</div>
</div>
{/* Right Column: Visual Collage */}
<div className="w-full">
<HeroVisualCollage
centerImage="/images/app-mockup.png"
leftImage="/images/cat-hot-food.png"
rightImage="/images/cat-health-wellness.png"
glassCards={collageCards}
isPhoneCenter={true}
/>
</div>
</div>
{/* BOTTOM HERO STATS */}
<div className="px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<FeatureStatsRow items={HERO_STATS} />
</div> </div>
</section> </section>
{/* ─── 9 Core Offerings Bento Grid ─── */} {/* ─── Bento Grid of Offerings ─── */}
<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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="mb-16"> <div className="mb-12">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What we offer What we offer
</span> </span>
<h2 className="font-display text-3xl font-black text-brand-dark mt-2"> <h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
Everything You Need, Just a Click Away Everything You Need, Just a Click Away
</h2> </h2>
<p className="mx-auto mt-4 max-w-xl text-body-md text-on-surface-variant"> <p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses. Discover fresh produce, delicious meals, and daily home services from trusted neighborhood businesses.
</p> </p>
</div> </div>
@@ -217,30 +244,30 @@ export default function PeoplePage() {
</section> </section>
{/* ─── Localized Stats Block ─── */} {/* ─── 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"> <section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<div className="mb-12"> <div className="mb-12">
<span className="text-label-sm font-black text-primary uppercase tracking-widest"> <span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Nearle Network Nearle Network
</span> </span>
<h2 className="font-display text-2xl font-black text-brand-dark mt-1"> <h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
Join the #1 Neighbourhood App Join the #1 Neighbourhood App
</h2> </h2>
<p className="text-body-sm text-on-surface-variant mt-2"> <p className="text-xs md:text-sm text-[#5E5866] mt-2">
Bringing local stores to your doorstep instantly. Bringing local stores to your doorstep instantly.
</p> </p>
</div> </div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
{STATS.map((s) => ( {LOCAL_STATS.map((s) => (
<div <div
key={s.label} key={s.label}
className="bg-white rounded-2xl p-6 border border-outline-variant/10 shadow-sm flex flex-col items-center text-center" className="bg-white rounded-2xl p-6 border border-[#6330D6]/10 shadow-[0_4px_16px_rgba(99,48,214,0.01)] flex flex-col items-center text-center group hover:scale-[1.01] transition-transform duration-200"
> >
<div className="w-10 h-10 rounded-full bg-primary/5 text-primary flex items-center justify-center mb-4"> <div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
<MaterialIcon icon={s.icon} size={20} /> <MaterialIcon icon={s.icon} size={20} />
</div> </div>
<h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4> <h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
<p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider"> <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label} {s.label}
</p> </p>
</div> </div>
@@ -249,127 +276,73 @@ export default function PeoplePage() {
</section> </section>
{/* ─── Ready to Download Section ─── */} {/* ─── 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"> <section id="download-section" className="p-8 md:p-12 lg:p-16 relative text-center bg-gradient-to-br from-[#16001D] to-[#25002F] text-white">
{/* Subtle ambient light gradient overlays */} {/* Subtle glow layers */}
<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(99,48,214,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" />
{/* Background dot pattern */} {/* DESKTOP LAYOUT */}
<div
className="absolute inset-0 opacity-[0.015] pointer-events-none"
style={{
backgroundImage: "radial-gradient(circle at 50% 50%, white 1px, transparent 1px)",
backgroundSize: "20px 20px",
}}
/>
{/* Background layered glow effects */}
<div className="absolute -left-20 -top-20 w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[100px] pointer-events-none -z-0" />
<div className="absolute right-10 bottom-10 w-96 h-96 bg-brand-accent/5 rounded-full blur-[100px] pointer-events-none -z-0" />
{/* Soft blurred glow behind middle cards */}
<div className="absolute left-[35%] top-[15%] w-96 h-96 bg-[#bd34fe]/10 rounded-full blur-[90px] pointer-events-none -z-0 hidden lg:block" />
{/* Subtle route connector dotted line */}
<svg className="absolute inset-0 w-full h-full pointer-events-none stroke-white/5 fill-none -z-0 hidden lg:block" viewBox="0 0 1200 600" preserveAspectRatio="none">
<path d="M 100,130 C 250,60 380,120 480,180 C 580,240 680,180 820,130 C 950,80 1100,130 1100,220" strokeDasharray="5,5" strokeWidth="1.5" />
</svg>
{/* Decorative human local-commerce elements */}
<div className="absolute left-[8%] top-[22%] text-white/5 pointer-events-none select-none -z-0 animate-pulse [animation-duration:8s] hidden lg:block">
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
<MaterialIcon icon="location_on" size={16} className="text-brand-accent/40" />
<span className="text-[10px] font-bold text-white/30 tracking-wider">Nearby</span>
</div>
</div>
<div className="absolute left-[42%] top-[8%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:9s] hidden lg:block">
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
<MaterialIcon icon="shopping_basket" size={16} className="text-amber-300/40" />
<span className="text-[10px] font-bold text-white/30 tracking-wider">Grocery</span>
</div>
</div>
<div className="absolute right-[44%] bottom-[12%] text-white/4 pointer-events-none select-none -z-0 animate-pulse [animation-duration:10s] hidden lg:block">
<div className="flex items-center gap-1.5 bg-white/[0.02] border border-white/5 px-2.5 py-1 rounded-full backdrop-blur-sm">
<MaterialIcon icon="restaurant" size={16} className="text-orange-400/40" />
<span className="text-[10px] font-bold text-white/30 tracking-wider">Eats</span>
</div>
</div>
{/* ──────────────────────────────────────────────────────── */}
{/* 🖥️ DESKTOP LAYOUT (lg and above) */}
{/* ──────────────────────────────────────────────────────── */}
<div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full"> <div className="hidden lg:grid grid-cols-12 items-center gap-10 relative z-10 w-full">
{/* Left Column: Copy & Download badges (Desktop) */} {/* Left Column: Copy & Download badges */}
<div className="lg:col-span-5 text-left flex flex-col justify-between h-full lg:border-r lg:border-white/10 lg:pr-10"> <div className="lg:col-span-5 text-left flex flex-col justify-between h-full lg:border-r lg:border-white/10 lg:pr-10">
<div> <div>
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]"> <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.2em]">
NEARLE APP NEARLE APP
</span> </span>
<h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight"> <h2 className="font-display text-3xl md:text-5xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
Your Neighbourhood, <br className="hidden lg:block"/>Now in Your Pocket. Your Neighbourhood, <br />Now in Your Pocket.
</h2> </h2>
<p className="text-lg md:text-xl text-white/90 font-bold mb-3 leading-relaxed"> <p className="text-lg text-white/90 font-bold mb-3 leading-relaxed">
Browse nearby stores, save your favourites, and order everyday essentials with ease. Browse nearby stores, save your favourites, and order everyday essentials with ease.
</p> </p>
<p className="text-sm md:text-base text-white/75 mb-6 leading-relaxed"> <p className="text-xs text-white/75 mb-6 leading-relaxed">
Discover groceries, medicines, food, and local offers from stores you already know and trust. Discover groceries, medicines, food, and local offers from stores you already know and trust.
</p> </p>
</div> </div>
{/* App badges (Desktop Only) */}
<div className="flex flex-col gap-2 mt-8"> <div className="flex flex-col gap-2 mt-8">
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md"> <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" /> <MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight"> <div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div> <div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div> <div className="text-sm font-black text-white">App Store</div>
</div> </div>
</div> </div>
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md"> <div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" /> <MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight"> <div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div> <div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div> <div className="text-sm font-black text-white">Google Play</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Middle Column: Benefit Cards (Desktop Only - staggered layout) */} {/* Middle Column: Benefit Cards */}
<div className="lg:col-span-3 flex flex-col justify-center gap-5"> <div className="lg:col-span-3 flex flex-col justify-center gap-5">
{APP_BENEFITS.map((b) => ( {APP_BENEFITS.map((b) => (
<div key={b.title} className={`relative overflow-hidden bg-white/[0.06] backdrop-blur-md border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center hover:bg-white/[0.1] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 shadow-lg shadow-black/10 ${b.cardClass}`}> <div key={b.title} className={`relative overflow-hidden bg-white/[0.06] border border-white/10 rounded-2xl py-4 px-5 flex gap-4 items-center shadow-lg ${b.cardClass}`}>
<div className={`absolute -right-4 -bottom-4 opacity-40 pointer-events-none select-none ${b.bgVisualClass}`}> <div className={`absolute -right-4 -bottom-4 opacity-20 pointer-events-none select-none ${b.bgVisualClass}`}>
<MaterialIcon icon={b.bgVisual} size={72} /> <MaterialIcon icon={b.bgVisual} size={72} />
</div> </div>
<div className={`flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center border shadow-inner ${b.iconClass}`}> <div className={`flex-shrink-0 w-11 h-11 rounded-xl flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<MaterialIcon icon={b.icon} size={20} /> <MaterialIcon icon={b.icon} size={20} />
</div> </div>
<div className="text-left relative z-10"> <div className="text-left relative z-10">
<h4 className="text-base md:text-lg font-black text-white leading-none">{b.title}</h4> <h4 className="text-base font-black text-white leading-none">{b.title}</h4>
<p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1.5">{b.microcopy}</p> <p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1">{b.microcopy}</p>
<p className="text-xs text-white/85 font-semibold leading-relaxed">{b.text}</p> <p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
</div> </div>
</div> </div>
))} ))}
</div> </div>
{/* Right Column: Phone Mockup (Desktop Only) */} {/* Right Column: Phone Mockup */}
<div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]"> <div className="relative shrink-0 lg:col-span-4 max-w-[315px] mx-auto flex justify-center lg:translate-x-[-12px]">
{/* Subtle soft glow behind phone */} <div className="absolute inset-0 bg-[#bd34fe]/10 rounded-full blur-[60px] opacity-40 -z-10" />
<div className="absolute inset-0 bg-[#bd34fe]/25 rounded-full blur-[60px] opacity-40 -z-10 animate-pulse [animation-duration:5s]" />
{/* Label above phone */}
<div className="absolute -top-6 left-1/2 -translate-x-1/2 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap z-20">
Made for your neighbourhood
</div>
{/* iPhone style phone container */}
<div className="bg-[#120217] w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-4 ring-4 ring-white/5"> <div className="bg-[#120217] w-full aspect-[9/19] rounded-[2.5rem] border-[6px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-4 ring-4 ring-white/5">
{/* Status Bar */}
<div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2"> <div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2">
<span>Good evening 👋</span> <span>Good evening 👋</span>
<div className="flex items-center gap-1 opacity-60"> <div className="flex items-center gap-1 opacity-60">
@@ -378,13 +351,11 @@ export default function PeoplePage() {
</div> </div>
</div> </div>
{/* Mock Search Field */}
<div className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-center gap-2 text-white/60 text-xs mt-1"> <div className="bg-white/10 border border-white/10 rounded-xl px-3 py-2 flex items-center gap-2 text-white/60 text-xs mt-1">
<MaterialIcon icon="search" size={14} className="text-white/40" /> <MaterialIcon icon="search" size={14} className="text-white/40" />
<span>Search nearby stores</span> <span>Search nearby stores</span>
</div> </div>
{/* Mock Category Icons */}
<div className="grid grid-cols-3 gap-2 mt-4"> <div className="grid grid-cols-3 gap-2 mt-4">
<div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center"> <div className="bg-white/5 border border-white/5 rounded-xl p-2 flex flex-col items-center text-center">
<MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" /> <MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" />
@@ -400,7 +371,6 @@ export default function PeoplePage() {
</div> </div>
</div> </div>
{/* Mock Store Cards */}
<div className="space-y-2 mt-4 my-auto"> <div className="space-y-2 mt-4 my-auto">
<div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3"> <div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0"> <div className="w-8 h-8 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
@@ -411,25 +381,13 @@ export default function PeoplePage() {
<div className="text-[9px] text-white/60">Verified Store • Nearby</div> <div className="text-[9px] text-white/60">Verified Store • Nearby</div>
</div> </div>
</div> </div>
<div className="bg-white/10 border border-white/10 rounded-xl p-2.5 flex items-center gap-3">
<div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
<MaterialIcon icon="health_and_safety" size={16} className="text-purple-300" />
</div>
<div className="text-left leading-tight">
<div className="text-xs font-black text-white">Health & Care</div>
<div className="text-[9px] text-white/60">Verified Pharmacy • Nearby</div>
</div>
</div>
</div> </div>
{/* Subtitle / Nearle App Label */}
<div className="mt-4 pt-2 border-t border-white/5 text-center"> <div className="mt-4 pt-2 border-t border-white/5 text-center">
<p className="text-[9px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p> <p className="text-[9px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
<p className="text-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p> <p className="text-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
</div> </div>
{/* Mock Bottom Navigation */}
<div className="flex justify-around items-center text-white/40 pt-2 pb-1 border-t border-white/5 mt-2"> <div className="flex justify-around items-center text-white/40 pt-2 pb-1 border-t border-white/5 mt-2">
<MaterialIcon icon="home" size={14} className="text-brand-accent" /> <MaterialIcon icon="home" size={14} className="text-brand-accent" />
<MaterialIcon icon="search" size={14} /> <MaterialIcon icon="search" size={14} />
@@ -440,49 +398,31 @@ export default function PeoplePage() {
<div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 shrink-0" /> <div className="h-1 w-1/3 bg-white/20 rounded-full mx-auto mt-2 shrink-0" />
</div> </div>
{/* Overlapping alert bubble */} <div className="absolute -left-16 bottom-[15%] bg-white/95 p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 max-w-[210px] z-20 pointer-events-none">
<div className="absolute -left-16 bottom-[15%] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 animate-float max-w-[210px] z-20 hover:scale-105 transition-transform duration-300 pointer-events-none">
<div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center"> <div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
<MaterialIcon <MaterialIcon icon="check_circle" size={16} className="text-secondary" />
icon="check_circle"
size={16}
className="text-secondary"
/>
</div> </div>
<div className="text-left text-brand-dark"> <div className="text-left text-brand-dark">
<p className="text-xs font-black 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">Preparing your order</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* ──────────────────────────────────────────────────────── */} {/* MOBILE LAYOUT */}
{/* 📱 MOBILE / TABLET LAYOUT (below lg) */}
{/* ──────────────────────────────────────────────────────── */}
<div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full"> <div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
{/* Heading and Description */} <span className="text-[10px] font-black text-brand-accent uppercase tracking-[0.2em]">
<span className="text-label-sm font-black text-brand-accent uppercase tracking-[0.2em]">
NEARLE APP NEARLE APP
</span> </span>
<h2 className="font-display text-3xl md:text-4xl font-black mt-2 mb-4 tracking-tight text-white leading-tight"> <h2 className="font-display text-3xl md:text-4xl font-black mt-2 mb-4 tracking-tight text-white leading-tight">
Your Neighbourhood, <br />Now in Your Pocket. Your Neighbourhood, <br />Now in Your Pocket.
</h2> </h2>
<p className="text-base md:text-lg text-white/90 font-bold mb-3 max-w-md"> <p className="text-sm text-white/90 font-bold mb-3 max-w-md">
Browse nearby stores, save your favourites, and order everyday essentials with ease. Browse nearby stores, save your favourites, and order everyday essentials with ease.
</p> </p>
<p className="text-xs md:text-sm text-white/70 mb-6 max-w-md">
Discover groceries, medicines, food, and local offers from stores you already know and trust.
</p>
{/* Made for your neighbourhood eyebrow */} <div className="bg-[#120217] w-full max-w-[240px] aspect-[9/15.5] rounded-[2.2rem] border-[5px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-3 ring-4 ring-white/5 my-4">
<div className="mb-4 mt-6 bg-brand-accent/20 border border-brand-accent/30 text-brand-accent text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1 rounded-full whitespace-nowrap">
Made for your neighbourhood
</div>
{/* Compact Phone Preview */}
<div className="bg-[#120217] w-full max-w-[250px] md:max-w-[280px] aspect-[9/15.5] rounded-[2.2rem] border-[5px] border-white/10 shadow-2xl relative overflow-hidden flex flex-col justify-between p-3 ring-4 ring-white/5 my-4">
{/* Status Bar */}
<div className="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1"> <div className="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1">
<span>Good evening 👋</span> <span>Good evening 👋</span>
<div className="flex items-center gap-1 opacity-60"> <div className="flex items-center gap-1 opacity-60">
@@ -491,13 +431,11 @@ export default function PeoplePage() {
</div> </div>
</div> </div>
{/* Mock Search Field */}
<div className="bg-white/10 border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-2 text-white/60 text-[10px] mt-0.5"> <div className="bg-white/10 border border-white/10 rounded-xl px-2.5 py-1.5 flex items-center gap-2 text-white/60 text-[10px] mt-0.5">
<MaterialIcon icon="search" size={12} className="text-white/40" /> <MaterialIcon icon="search" size={12} className="text-white/40" />
<span>Search nearby stores</span> <span>Search stores</span>
</div> </div>
{/* Mock Category Icons */}
<div className="grid grid-cols-3 gap-1 mt-2"> <div className="grid grid-cols-3 gap-1 mt-2">
<div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center"> <div className="bg-white/5 border border-white/5 rounded-xl p-1.5 flex flex-col items-center text-center">
<MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" /> <MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" />
@@ -513,7 +451,6 @@ export default function PeoplePage() {
</div> </div>
</div> </div>
{/* Mock Store Cards (Only One Card on Mobile) */}
<div className="space-y-1.5 mt-2 my-auto"> <div className="space-y-1.5 mt-2 my-auto">
<div className="bg-white/10 border border-white/10 rounded-xl p-2 flex items-center gap-2.5"> <div className="bg-white/10 border border-white/10 rounded-xl p-2 flex items-center gap-2.5">
<div className="w-7 h-7 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0"> <div className="w-7 h-7 rounded-lg bg-brand-accent/20 flex items-center justify-center shrink-0">
@@ -521,18 +458,16 @@ export default function PeoplePage() {
</div> </div>
<div className="text-left leading-tight"> <div className="text-left leading-tight">
<div className="text-[10px] font-black text-white">Daily Groceries</div> <div className="text-[10px] font-black text-white">Daily Groceries</div>
<div className="text-[8px] text-white/60">Verified Store • Nearby</div> <div className="text-[8px] text-white/60">Verified • Nearby</div>
</div> </div>
</div> </div>
</div> </div>
{/* Subtitle / Nearle App Label */}
<div className="mt-2 pt-1 border-t border-white/5 text-center"> <div className="mt-2 pt-1 border-t border-white/5 text-center">
<p className="text-[8px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p> <p className="text-[8px] text-brand-accent font-black tracking-wide uppercase">Nearle App</p>
<p className="text-[8.5px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p> <p className="text-[8.5px] text-white/80 mt-0.5">Your stores near you.</p>
</div> </div>
{/* Mock Bottom Navigation */}
<div className="flex justify-around items-center text-white/40 pt-1.5 pb-0.5 border-t border-white/5 mt-1"> <div className="flex justify-around items-center text-white/40 pt-1.5 pb-0.5 border-t border-white/5 mt-1">
<MaterialIcon icon="home" size={12} className="text-brand-accent" /> <MaterialIcon icon="home" size={12} className="text-brand-accent" />
<MaterialIcon icon="search" size={12} /> <MaterialIcon icon="search" size={12} />
@@ -543,26 +478,20 @@ export default function PeoplePage() {
<div className="h-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" /> <div className="h-0.5 w-1/3 bg-white/20 rounded-full mx-auto mt-1 shrink-0" />
</div> </div>
{/* Order Confirmation Card */} <div className="w-full max-w-[320px] bg-white/95 p-3 flex items-center gap-3 rounded-2xl shadow-lg border border-outline-variant/10">
<div className="w-full max-w-[320px] bg-white/95 backdrop-blur-md p-3.5 rounded-2xl shadow-xl border border-outline-variant/10 flex items-center gap-3 mt-4"> <div className="w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
<div className="flex-shrink-0 w-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center"> <MaterialIcon icon="check_circle" size={16} className="text-secondary" />
<MaterialIcon
icon="check_circle"
size={16}
className="text-secondary"
/>
</div> </div>
<div className="text-left text-brand-dark"> <div className="text-left text-brand-dark">
<p className="text-xs font-black leading-tight">Order Confirmed</p> <p className="text-xs font-black">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">Preparing your order</p>
</div> </div>
</div> </div>
{/* Compact Benefits List */} <div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
<div className="w-full max-w-[340px] md:max-w-[400px] flex flex-col gap-3 mt-6">
{APP_BENEFITS.map((b) => ( {APP_BENEFITS.map((b) => (
<div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3 flex gap-3 items-center text-left"> <div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
<div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}> <div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<MaterialIcon icon={b.icon} size={16} /> <MaterialIcon icon={b.icon} size={16} />
</div> </div>
<div> <div>
@@ -573,28 +502,24 @@ export default function PeoplePage() {
))} ))}
</div> </div>
{/* Coming Soon Download Buttons */} <div className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
<div className="flex flex-col items-center gap-2 mt-8 w-full"> <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full max-w-[320px] sm:max-w-none"> <MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
<div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md"> <div className="text-left leading-none">
<MaterialIcon icon="phone_iphone" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" /> <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-left leading-tight"> <div className="text-xs font-black text-white">App Store</div>
<div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
</div> </div>
</div> </div>
<div className="group h-13 w-full sm:w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center sm:justify-start gap-3 bg-white/[0.06] backdrop-blur-md text-white select-none hover:bg-white/[0.12] hover:border-white/20 hover:scale-[1.02] transition-all duration-300 cursor-pointer shadow-md"> <div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<MaterialIcon icon="play_arrow" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" /> <MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
<div className="text-left leading-tight"> <div className="text-left leading-none">
<div className="text-[8px] uppercase font-black tracking-wider text-brand-accent/70">Coming Soon</div> <div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div> <div className="text-xs font-black text-white">Google Play</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</div> </PremiumPageShell>
</main>
); );
} }

2
src/components/contact/ContactForm.tsx
View File

@@ -208,7 +208,7 @@ export function ContactForm() {
<button <button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="w-full bg-primary hover:bg-primary-container disabled:bg-primary-container/60 text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer" className="w-full bg-[#6330D6] hover:bg-[#5225b8] disabled:bg-[#6330D6]/60 text-on-primary font-black px-8 py-4 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] flex items-center justify-center gap-2 cursor-pointer"
> >
{isSubmitting ? ( {isSubmitting ? (
<> <>

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

@@ -31,7 +31,7 @@ const BENEFITS = [
export function BusinessSection() { export function BusinessSection() {
return ( return (
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6"> <section className="px-6 py-12 md:py-16">
<div className="w-full"> <div className="w-full">
{/* Merchant Section Grid */} {/* Merchant Section Grid */}

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

@@ -1,179 +1,178 @@
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const QUICK_LINKS = [ const PROOF_ITEMS = [
{ { label: "1000+", text: "Verified Stores", icon: "store" },
name: "Daily Groceries", { label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
icon: "shopping_basket", { label: "50,000+", text: "Happy Customers", icon: "mood" },
label: "Fresh & On-Time", { label: "4.7 ★", text: "Average Rating", icon: "star" },
},
{
name: "Hot Meals",
icon: "fastfood",
label: "Quick & tasty",
},
{
name: "wellness ",
icon: "medical_services",
label: "Essential & Trusted",
},
{
name: "More Services",
icon: "store",
label: "Explore More",
},
]; ];
export function Hero() { export function Hero() {
return ( return (
<section className="relative pb-4 md:pb-6"> <section className="relative overflow-hidden bg-white select-none w-full">
<div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]"> {/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none"> {/* 1. Large pale lavender partial circle (top-left) */}
{/* Subtle Background Dot Texture */} <div className="hidden md:block absolute top-[-100px] left-[-100px] w-[350px] h-[350px] rounded-full border-[1.5px] border-[#6D28D9]/15 bg-[#6D28D9]/5 opacity-[0.55] z-0 pointer-events-none" />
<div className="hero-map-layer select-none">
<Image {/* 2. Purple solid circle (center-right around collage) */}
src="/images/slider-glob.png" <div className="hidden lg:block absolute right-[22%] top-[38%] w-[84px] h-[84px] rounded-full bg-[#6D28D9] z-0 shadow-[0_8px_32px_rgba(109,40,217,0.3)] pointer-events-none animate-pulse" />
alt="Subtle Background"
fill {/* 3. Striped purple circle (lower-middle collage area) */}
sizes="(max-width: 768px) 100vw, 40vw" <div
className="object-contain object-left-top" className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
priority style={{
backgroundImage: 'repeating-linear-gradient(45deg, rgba(109, 40, 217, 0.2) 0px, rgba(109, 40, 217, 0.2) 2px, transparent 2px, transparent 8px)'
}}
/> />
{/* 4. Dotted pattern (between left text and right collage) */}
<div className="hidden lg:block absolute left-[41%] top-[25%] w-48 h-48 opacity-[0.35] z-0 pointer-events-none">
<svg className="w-full h-full text-[#6D28D9]" fill="currentColor">
<pattern id="hero-decor-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1.5" />
</pattern>
<rect width="100%" height="100%" fill="url(#hero-decor-dots)" />
</svg>
</div> </div>
{/* 5. Three small X marks */}
<div className="absolute top-[8%] left-[48%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
<div className="hidden lg:block absolute top-[52%] left-[44%] text-[#6D28D9]/20 font-bold text-lg pointer-events-none select-none z-0">✕</div>
<div className="absolute bottom-[14%] right-[5%] text-[#6D28D9]/25 font-bold text-xl pointer-events-none select-none z-0">✕</div>
{/* Soft purple radial glow */} {/* 6. Large partial purple circle (bottom-right corner) */}
<div className="absolute right-0 top-1/4 z-0 h-[60%] w-[45%] rounded-full bg-primary/45 blur-[120px] opacity-50 pointer-events-none" /> <div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
</div>
{/* ─── Main Content Wrapper ─── */} {/* ─── TWO-COLUMN CONTENT GRID ─── */}
<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"> <div className="relative mx-auto grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center px-8 py-16 md:px-12 lg:px-16 xl:px-20 z-10 gap-12 lg:gap-6">
{/* Left Column: Text & Search Content */}
<div className="hero-content text-white select-none"> {/* LEFT COLUMN: Editorial Typography & Copy */}
<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"> <div className="flex flex-col text-left max-w-xl z-20 relative">
Neighbourhood commerce, made simple <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6D28D9]/10 text-[#6D28D9] uppercase mb-6 w-fit">
Welcome to Nearle
</span> </span>
<h1 className="text-4xl sm:text-5xl lg:text-[52px] xl:text-[62px] 2xl:text-[74px] lg:leading-[1.15] font-display font-black tracking-tight mb-8"> <h1 className="font-display text-4xl sm:text-5xl lg:text-[68px] xl:text-[76px] font-black text-[#16001D] leading-[0.95] tracking-[-0.05em]">
Your Favourite Local Stores, Everything Local.
<br /> <br />
<span className="text-brand-accent drop-shadow-md"> Everything <span className="text-[#6D28D9]">Near.</span>
Now at Your Doorstep.
</span>
</h1> </h1>
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl"> <p className="max-w-[480px] text-base md:text-lg text-[#6D6172] leading-relaxed font-bold mt-6">
Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app. Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
</p> </p>
{/* CTAs */} <div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<div className="flex flex-col md:flex-row md:flex-wrap gap-4 mt-8 w-full md:w-auto">
<Link <Link
href="/people" href="/people"
className="bg-brand-accent hover:bg-brand-accent-light text-brand-dark font-black px-8 py-4 rounded-xl text-sm md:text-base hover:shadow-xl transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap" className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
> >
Explore Nearby Stores Explore Stores
</Link> </Link>
<Link <Link
href="/businesses" href="/people#download-section"
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-4 rounded-xl text-sm md:text-base transition-all duration-300 active:scale-95 flex items-center justify-center gap-2 w-full md:w-auto min-h-[48px] whitespace-nowrap" className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-98"
> >
List Your Store Get the App
</Link> </Link>
</div> </div>
{/* Trust points */}
<div className="flex flex-wrap gap-x-8 gap-y-3 mt-12 text-sm md:text-base text-white/90">
<div className="flex items-center gap-2">
<MaterialIcon icon="store" size={18} className="text-brand-accent" />
<span>Real local shops</span>
</div>
<div className="flex items-center gap-2">
<MaterialIcon icon="sell" size={18} className="text-brand-accent" />
<span>Fair local prices</span>
</div>
<div className="flex items-center gap-2">
<MaterialIcon icon="local_shipping" size={18} className="text-brand-accent" />
<span>Neighbourhood delivery</span>
</div> </div>
</div> {/* RIGHT COLUMN: Creative Overlapping Strips Collage */}
<div className="w-full z-20">
{/* Mobile/Tablet Only Nearle Bag Logo with context pins */} {/* DESKTOP LAYOUT (lg and above) */}
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none relative"> <div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
<div className="relative w-[280px] h-[230px] mx-auto"> {/* left image: absolute left-[10%] top-[20%] w-[170px] h-[360px] */}
<div className="absolute left-[10%] top-[20%] w-[170px] h-[360px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
<Image <Image
src="/nearlenewlogo.png" src="/images/cat-daily-essentials.png"
alt="Nearle delivery" alt="Local grocery products"
fill fill
sizes="(max-width: 1023px) 280px, 0px" className="object-cover"
className="object-contain drop-shadow-2xl" sizes="170px"
priority
/> />
</div>
</div>
</div> </div>
{/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */} {/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
<div className="hero-visual-layer select-none pointer-events-none relative"> <div className="absolute left-[38%] top-[8%] w-[190px] h-[430px] rounded-[1.5rem] overflow-hidden shadow-xl border-2 border-white z-20 transition-transform duration-300 hover:scale-[1.02]">
<div className="hero-visual-panel" />
<div className="hero-visual-image relative">
<Image <Image
src="/nearlenewlogo.png" src="/Nearle Business.png"
alt="Nearle delivery" alt="Local merchant delivery"
fill fill
sizes="(max-width: 768px) 95vw, 48vw" className="object-cover"
className="object-contain drop-shadow-2xl" sizes="190px"
priority priority
/> />
</div> </div>
{/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
</div> <div className="absolute right-[2%] top-[18%] w-[180px] h-[390px] rounded-[1.5rem] overflow-hidden shadow-lg border-2 border-white z-10 transition-transform duration-300 hover:scale-[1.02]">
</div> <Image
</div> src="/nearle people.png"
alt="Local customer shopping"
{/* Overlapping Quick Category Links */} fill
<div className="service-cards-wrapper max-w-container-max mx-auto relative z-20 -mt-8 md:-mt-10 lg:-mt-12"> className="object-cover"
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> sizes="180px"
{QUICK_LINKS.map((item) => (
<div
key={item.name}
className="flex items-center gap-4 bg-white p-5 rounded-2xl border border-outline-variant/15 shadow-xl hover:shadow-2xl premium-card cursor-pointer group"
>
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent/10 flex items-center justify-center group-hover:bg-brand-accent/20 transition-colors">
<MaterialIcon
icon={item.icon}
size={24}
className="text-brand-accent"
/> />
</div> </div>
<div className="flex-grow"> </div>
<h3 className="text-sm md:text-base font-extrabold text-brand-dark group-hover:text-primary transition-colors">
{item.name} {/* MOBILE/TABLET COLLAGE (below lg) */}
</h3> <div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
<p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight"> <div className="relative w-[95px] h-[200px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
<Image
src="/images/cat-daily-essentials.png"
alt="Grocery products"
fill
className="object-cover"
sizes="95px"
/>
</div>
<div className="relative w-[115px] h-[240px] rounded-2xl overflow-hidden border border-white shadow-lg -mx-5 z-20">
<Image
src="/Nearle Business.png"
alt="Merchant"
fill
className="object-cover"
sizes="115px"
/>
</div>
<div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
<Image
src="/nearle people.png"
alt="Customer"
fill
className="object-cover"
sizes="105px"
/>
</div>
</div>
</div>
</div>
{/* ─── BOTTOM PROOF STATS ROW ─── */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-[#EEE7F4] bg-white px-8 py-8 md:px-12 lg:px-16 z-20 relative">
{PROOF_ITEMS.map((item) => (
<div key={item.label} className="flex flex-col items-start text-left pl-2 md:pl-4">
<div className="w-8 h-8 rounded-full bg-[#6D28D9]/10 text-[#6D28D9] flex items-center justify-center mb-3">
<MaterialIcon icon={item.icon} size={16} />
</div>
<div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
{item.label} {item.label}
</p>
</div> </div>
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-surface-container flex items-center justify-center opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-300"> <div className="text-xs text-[#6D6172] font-semibold mt-1">
<MaterialIcon {item.text}
icon="arrow_forward"
size={16}
className="text-primary"
/>
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div>
</section> </section>
); );
} }

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

@@ -26,7 +26,7 @@ const STEPS = [
export function HowItWorks() { export function HowItWorks() {
return ( return (
<section className="border-t border-brand-dark/10 pt-12 md:pt-16 lg:pt-20 pb-6 md:pb-8 lg:pb-10"> <section className="px-6 py-12 md:py-16">
<div className="w-full"> <div className="w-full">
{/* Header Section */} {/* Header Section */}
<div className="text-center mb-12 md:mb-16"> <div className="text-center mb-12 md:mb-16">

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

@@ -27,7 +27,7 @@ const FEATURES = [
export function HyperlocalFeatures() { export function HyperlocalFeatures() {
return ( return (
<section className="pt-4 md:pt-5 lg:pt-6 pb-2 md:pb-3 lg:pb-4 relative"> <section className="px-6 py-12 md:py-16 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) {

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

@@ -55,7 +55,7 @@ const CATEGORIES = [
export function ServiceCategories() { export function ServiceCategories() {
return ( return (
<section className="pt-10 md:pt-14 lg:pt-16 pb-2 md:pb-3 lg:pb-4"> <section className="px-6 pt-20 md:pt-24 lg:pt-28 pb-12 md:pb-16">
<div className="w-full"> <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">

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

@@ -9,7 +9,7 @@ const FLOW_STEPS = [
export function StoreQRSection() { export function StoreQRSection() {
return ( return (
<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"> <section id="download" className="section-card-dark py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center">
{/* 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" />

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

@@ -29,7 +29,7 @@ const CARDS = [
export function WhyNearle() { export function WhyNearle() {
return ( return (
<section className="pt-4 md:pt-5 lg:pt-6 pb-4 md:pb-5 lg:pb-6"> <section className="px-6 py-12 md:py-16">
<div className="w-full"> <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">

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

@@ -2,8 +2,7 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import { usePathname } from "next/navigation"; import React from "react";
import React, { useState } from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { MaterialIcon } from "@/components/ui/MaterialIcon";
const COMPANY = [ const COMPANY = [
@@ -27,386 +26,127 @@ const LEGAL = [
{ label: "Sitemap", href: "#" }, { label: "Sitemap", href: "#" },
]; ];
type FooterFormData = {
name: string;
phone: string;
email: string;
message: string;
};
type FooterFormErrors = {
name?: string;
phone?: string;
email?: string;
message?: string;
};
export function Footer() { export function Footer() {
const pathname = usePathname(); return (
const isContactPage = pathname?.startsWith("/contact"); <footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pb-6 md:pb-8 lg:pb-10 w-full mt-4">
<div className="mx-auto w-full max-w-[1920px]">
<div className="section-card-dark p-8 md:p-12 lg:p-14 text-white relative">
{/* 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" />
// Form states <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 relative z-10 items-start text-left">
const [formData, setFormData] = useState<FooterFormData>({ {/* Col 1: Brand info */}
name: "", <div className="flex flex-col gap-4">
phone: "", <Link href="/" className="inline-block">
email: "",
message: "",
});
const [errors, setErrors] = useState<FooterFormErrors>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitSuccess, setSubmitSuccess] = useState(false);
const handleInputChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
if (errors[name as keyof FooterFormErrors]) {
setErrors((prev) => ({
...prev,
[name]: undefined,
}));
}
};
const validateForm = (): boolean => {
const tempErrors: FooterFormErrors = {};
let isValid = true;
if (!formData.name.trim()) {
tempErrors.name = "Name is required";
isValid = false;
}
if (!formData.phone.trim()) {
tempErrors.phone = "Phone is required";
isValid = false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!formData.email.trim()) {
tempErrors.email = "Email is required";
isValid = false;
} else if (!emailRegex.test(formData.email)) {
tempErrors.email = "Please enter a valid email address";
isValid = false;
}
if (!formData.message.trim()) {
tempErrors.message = "Message is required";
isValid = false;
}
setErrors(tempErrors);
return isValid;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validateForm()) return;
setIsSubmitting(true);
// Simulate API delay
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsSubmitting(false);
setSubmitSuccess(true);
setFormData({ name: "", phone: "", email: "", message: "" });
// Hide success alert after 5 seconds
setTimeout(() => {
setSubmitSuccess(false);
}, 5000);
};
const brandCol = (
<div className="footer-brand min-w-0 self-start">
<Link href="/" className="mb-4 inline-block">
<Image <Image
src="/logo-v2.png" src="/logo-light.png"
alt="Nearle" alt="Nearle"
width={220} width={220}
height={36} height={36}
style={{ width: "210px", height: "auto" }} style={{ width: "160px", height: "auto" }}
className="object-contain" className="object-contain"
/> />
</Link> </Link>
<p className="footer-desc mb-4 text-white/80"> <p className="text-sm leading-relaxed text-white/70">
India&apos;s leading hyperlocal neighborhood network, empowering India&apos;s leading hyperlocal neighborhood network, empowering
communities and verified local businesses within 2km. communities and verified local businesses within 2km.
</p> </p>
{/* Social Links */} {/* Social Links */}
<div className="flex gap-4"> <div className="flex gap-3 mt-2">
<a href="#" className="footer-social-link" aria-label="Share"> <a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Share">
<MaterialIcon icon="share" size={24} /> <MaterialIcon icon="share" size={20} />
</a> </a>
<a href="#" className="footer-social-link" aria-label="Website"> <a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Website">
<MaterialIcon icon="public" size={24} /> <MaterialIcon icon="public" size={20} />
</a> </a>
</div> </div>
</div> </div>
);
return ( {/* Col 2: Company Links */}
<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>
<div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}> <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
<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)]"> <ul className="flex flex-col gap-3">
{/* Top Helpdesk Bar */} {COMPANY.map((l) => (
<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"> <li key={l.label}>
<div className="flex items-center gap-4 text-white"> <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
<div className="w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-lg shrink-0"> {l.label}
<MaterialIcon icon="headset_mic" size={24} /> </Link>
</div> </li>
<div className="text-left"> ))}
<h4 className="text-headline-md font-black text-white"> </ul>
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>
</div>
</div>
<a
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"
/>
<span>+91 80 4912 3456</span>
</a>
</div> </div>
{/* Main Footer Content */} {/* Col 3: Partnerships */}
<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>
<div <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
className={ <ul className="flex flex-col gap-3">
isContactPage {PARTNERSHIPS.map((l) => (
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10" <li key={l.label}>
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start" <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
} {l.label}
> </Link>
{isContactPage ? ( </li>
<> ))}
{/* Brand Column */} </ul>
{brandCol}
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
</div> </div>
{/* Partnerships Links */} {/* Col 4: Support / Legal */}
<div className="footer-partnerships min-w-0 self-start"> <div>
<FooterCol title="Partnerships" links={PARTNERSHIPS} /> <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
</div> <ul className="flex flex-col gap-3">
</> {LEGAL.map((l) => (
) : ( <li key={l.label}>
<> <Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
<div className="flex flex-col self-start w-full"> {l.label}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"> </Link>
{/* Brand Column */} </li>
{brandCol} ))}
</ul>
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
</div> </div>
{/* Partnerships Links */} {/* Col 5: HQ Address & Helpdesk */}
<div className="footer-partnerships min-w-0 self-start"> <div className="flex flex-col gap-4">
<FooterCol title="Partnerships" links={PARTNERSHIPS} /> <div>
</div> <h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">Visit Nearle HQ</h5>
</div> <p className="text-xs leading-relaxed text-white/60">
424, Diwan Bahadur Rd,<br />
{/* HQ Office Location & Directions block */} Opposite to Sri Krishna Sweets,<br />
<div className="mt-8 border-t border-white/10 pt-7 max-w-[520px] text-left"> R.S. Puram, Coimbatore,<br />
<p className="text-[11px] font-black uppercase tracking-[0.18em] text-brand-accent">
VISIT NEARLE HQ
</p>
<h4 className="mt-2 font-display text-xl md:text-2xl font-black text-white">
Meet the team behind your neighbourhood.
</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 />
Tamil Nadu 641002 Tamil Nadu 641002
</p> </p>
<a <a
href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002" href="https://maps.google.com/?q=424,+Diwan+Bahadur+Rd,+Opposite+To+Sri+Krishna+Sweets,+R.S.+Puram,+Coimbatore,+Tamil+Nadu+641002"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-white/15 hover:border-brand-accent/50 text-white hover:text-brand-accent text-xs md:text-sm font-black transition-all duration-300" className="mt-3 inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-xl border border-white/10 hover:border-[#E6D7EA]/50 text-white/80 hover:text-[#E6D7EA] text-xs font-bold transition-all duration-300"
> >
<MaterialIcon icon="location_on" size={16} /> <MaterialIcon icon="location_on" size={14} />
<span>Get Directions</span> <span>Get Directions</span>
</a> </a>
</div> </div>
</div>
{/* Contact Form Card */} <div className="border-t border-white/10 pt-4 flex flex-col gap-2">
<div className="footer-contact-wrap w-full self-start"> <p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</p>
<div className="footer-contact-card bg-white text-brand-dark shadow-2xl border border-outline-variant/15 relative overflow-hidden w-full max-w-[540px] lg:ml-auto p-7 md:p-8 lg:p-9"> <a
{/* Background Glow Decors */} href="tel:+918049123456"
<div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" /> className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
<div className="absolute bottom-0 left-0 w-24 h-24 bg-secondary/5 rounded-full blur-2xl" />
<div className="relative z-10 text-center lg:text-left">
<h3 className="footer-contact-title font-display text-2xl md:text-3xl font-black text-brand-dark tracking-tight">
Send us a Message
</h3>
<p className="footer-contact-subtitle text-sm md:text-base mt-1 mb-5">
We shall guide you through our Neighbourhood Experts.
</p>
<form onSubmit={handleSubmit} className="space-y-3">
{submitSuccess && (
<div className="p-3 bg-secondary/10 border border-secondary/20 text-secondary text-body-sm font-bold rounded-xl flex items-center justify-center gap-1.5 animate-bounce-subtle">
<MaterialIcon icon="check_circle" size={16} />
<span>Message sent successfully!</span>
</div>
)}
<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 <MaterialIcon icon="phone" size={16} className="text-[#E6D7EA] shrink-0" />
</label> <span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
<input </a>
type="text"
id="footer-field-name"
name="name"
value={formData.name}
onChange={handleInputChange}
placeholder="Your Name..."
className={`footer-input h-12 md:h-13 ${errors.name ? "has-error" : ""}`}
/>
{errors.name && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.name}
</span>
)}
</div> </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>
<input
type="text"
id="footer-field-phone"
name="phone"
value={formData.phone}
onChange={handleInputChange}
placeholder="Your Phone..."
className={`footer-input h-12 md:h-13 ${errors.phone ? "has-error" : ""}`}
/>
{errors.phone && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.phone}
</span>
)}
</div> </div>
</div> </div>
<div className="flex flex-col text-left"> {/* Bottom Copyright Divider & Bar */}
<label <div className="mt-12 pt-6 border-t border-white/10 relative z-10 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-white/40">
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"
name="email"
value={formData.email}
onChange={handleInputChange}
placeholder="Your Email Address..."
className={`footer-input h-12 md:h-13 ${errors.email ? "has-error" : ""}`}
/>
{errors.email && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.email}
</span>
)}
</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>
<textarea
id="footer-field-message"
name="message"
value={formData.message}
onChange={handleInputChange}
placeholder="Your Message..."
className={`footer-textarea min-h-[120px] md:min-h-[130px] ${errors.message ? "has-error" : ""}`}
/>
{errors.message && (
<span className="footer-error-text">
<MaterialIcon icon="error" size={16} />
{errors.message}
</span>
)}
</div>
<button
type="submit"
disabled={isSubmitting}
className="footer-submit-btn h-12 md:h-13"
>
{isSubmitting ? (
<>
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
<span>SUBMITTING...</span>
</>
) : (
<span>SUBMIT</span>
)}
</button>
</form>
</div>
</div>
</div>
</>
)}
</div>
{/* Footer Bottom Bar */}
<div className="mt-8 border-t border-white/10 pt-5 text-xs text-white/45">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<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-wrap gap-x-6 gap-y-2 justify-center">
{LEGAL.map((link) => ( {LEGAL.map((link) => (
<Link <Link
key={link.label} key={link.label}
href={link.href} href={link.href}
className="hover:text-[#e0c8f7] transition-colors" className="hover:text-[#E6D7EA] transition-colors"
> >
{link.label} {link.label}
</Link> </Link>
@@ -415,34 +155,8 @@ export function Footer() {
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</footer> </footer>
); );
} }
// Ensure default export is also available for Next.js app router client components if needed
export default Footer; export default Footer;
function FooterCol({
title,
links,
}: {
title: string;
links: { label: string; href: string }[];
}) {
return (
<div>
<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">
{l.label}
</Link>
</li>
))}
</ul>
</div>
);
}

138
src/components/layout/HeroVisualCollage.tsx Normal file
View File

@@ -0,0 +1,138 @@
import Image from "next/image";
import { GlassInfoCard } from "../ui/GlassInfoCard";
type GlassCardItem = {
text: string;
icon?: string;
};
type HeroVisualCollageProps = {
centerImage: string;
leftImage?: string;
rightImage?: string;
glassCards: GlassCardItem[];
isPhoneCenter?: boolean;
};
export function HeroVisualCollage({
centerImage,
leftImage,
rightImage,
glassCards,
isPhoneCenter = true,
}: HeroVisualCollageProps) {
return (
<div className="relative w-full h-[380px] sm:h-[450px] lg:h-[500px] max-w-[540px] mx-auto flex items-center justify-center select-none">
{/* Decorative backgrounds */}
{/* 1. Soft purple circle */}
<div className="absolute w-[240px] h-[240px] rounded-full bg-[#7C3AED]/10 blur-[60px] -z-10" />
{/* 2. SVG Dot grid */}
<div className="absolute -top-4 -right-4 w-32 h-32 text-[#6330D6]/10 -z-10 opacity-20">
<svg className="w-full h-full" fill="currentColor">
<pattern id="collage-dots" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1.5" />
</pattern>
<rect width="100%" height="100%" fill="url(#collage-dots)" />
</svg>
</div>
{/* 3. Small x marks */}
<div className="absolute top-12 left-6 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
<div className="absolute bottom-16 right-8 text-[#6330D6]/15 font-display text-xl font-bold select-none pointer-events-none">✕</div>
{/* LEFT IMAGE PANEL (Hidden or compact on small mobile) */}
{leftImage && (
<div className="absolute left-2 sm:left-4 top-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
<Image
src={leftImage}
alt="Collage left asset"
fill
className="object-cover"
sizes="(max-width: 640px) 100px, 130px"
/>
</div>
)}
{/* RIGHT IMAGE PANEL */}
{rightImage && (
<div className="absolute right-2 sm:right-4 bottom-[15%] w-[100px] sm:w-[130px] h-[180px] sm:h-[220px] rounded-[18px] overflow-hidden border-2 border-white shadow-[0_8px_24px_rgba(0,0,0,0.06)] z-10 transition-transform hover:scale-105 duration-300">
<Image
src={rightImage}
alt="Collage right asset"
fill
className="object-cover"
sizes="(max-width: 640px) 100px, 130px"
/>
</div>
)}
{/* CENTER COMPONENT */}
<div className="relative z-20">
{isPhoneCenter ? (
/* Phone Frame Container */
<div className="relative w-[180px] sm:w-[220px] h-[360px] sm:h-[440px] rounded-[36px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_50px_rgba(99,48,214,0.12)] bg-[#FAF8FC] overflow-hidden flex flex-col justify-center items-center">
<Image
src={centerImage}
alt="Phone Mockup Screen"
fill
className="object-cover"
sizes="(max-width: 640px) 180px, 220px"
priority
/>
</div>
) : (
/* Central Logo / Visual Panel */
<div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
<Image
src={centerImage}
alt="Central logo panel"
width={160}
height={160}
className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
priority
/>
</div>
)}
</div>
{/* FLOATING GLASS CARDS (Positioned Absolute, scaled down on mobile) */}
{glassCards.length > 0 && (
<div className="absolute inset-0 z-30 pointer-events-none">
{/* Card 1: Top Right */}
{glassCards[0] && (
<div className="absolute right-0 sm:right-[5%] top-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
<GlassInfoCard
text={glassCards[0].text}
icon={glassCards[0].icon}
className="scale-90 sm:scale-100"
/>
</div>
)}
{/* Card 2: Bottom Left */}
{glassCards[1] && (
<div className="absolute left-0 sm:left-[5%] bottom-[10%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
<GlassInfoCard
text={glassCards[1].text}
icon={glassCards[1].icon}
className="scale-90 sm:scale-100"
/>
</div>
)}
{/* Card 3: Mid Left/Right */}
{glassCards[2] && (
<div className="absolute left-[5%] top-[45%] pointer-events-auto hover:translate-y-[-2px] transition-transform duration-200">
<GlassInfoCard
text={glassCards[2].text}
icon={glassCards[2].icon}
className="scale-90 sm:scale-100"
/>
</div>
)}
</div>
)}
</div>
);
}

24
src/components/layout/Navbar.tsx
View File

@@ -20,8 +20,8 @@ export function Navbar() {
return ( return (
<div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none"> <div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
<div className="w-full max-w-[1440px] px-4 md:px-8 lg:px-12 pt-5 md:pt-6 pointer-events-auto relative"> <div className="w-full max-w-[1920px] px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pt-[18px] md:pt-[24px] pointer-events-auto relative">
<nav className="w-full h-[68px] lg:h-[80px] rounded-[1.75rem] lg:rounded-[2rem] bg-gradient-to-r from-[#65108A] via-[#5A087B] to-[#3A044F] border border-white/10 shadow-[0_18px_40px_rgba(60,0,80,0.25)] backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300"> <nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-white/88 border border-white/70 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
<div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full"> <div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
{/* Left: Brand */} {/* Left: Brand */}
<div className="flex items-center justify-start"> <div className="flex items-center justify-start">
@@ -30,7 +30,7 @@ export function Navbar() {
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200" className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
> >
<Image <Image
src="/logo-light.png" src="/logo.png"
alt="Nearle" alt="Nearle"
width={400} width={400}
height={50} height={50}
@@ -48,13 +48,13 @@ export function Navbar() {
<Link <Link
key={link.label} key={link.label}
href={link.href} href={link.href}
className={`relative py-2 text-[15px] font-medium leading-5 transition-all duration-200 whitespace-nowrap ${ className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
isActive ? "text-white" : "text-white/80 hover:text-white" isActive ? "text-[#2A1234]" : "text-[#2A1234]/70 hover:text-[#2A1234]"
} group`} } group`}
> >
{link.label} {link.label}
<span <span
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${ className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-[#65149A] rounded-full transition-all duration-300 ${
isActive isActive
? "w-5 opacity-100" ? "w-5 opacity-100"
: "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60" : "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
@@ -69,14 +69,14 @@ export function Navbar() {
<div className="flex items-center justify-end gap-3"> <div className="flex items-center justify-end gap-3">
<Link <Link
href="/#download" href="/#download"
className="hidden md:inline-flex items-center justify-center bg-white text-[#4d046a] font-bold px-7 h-[46px] rounded-full text-[15px] hover:shadow-[0_8px_24px_rgba(255,255,255,0.2)] hover:scale-[1.03] active:scale-95 transition-all duration-300 whitespace-nowrap" className="hidden md:inline-flex items-center justify-center bg-[#65149A] text-white font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-[#7C3AED] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
> >
Get App Get App
</Link> </Link>
{/* Mobile menu toggle */} {/* Mobile menu toggle */}
<button <button
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer" className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#2A1234]/5 text-[#2A1234] transition-all active:scale-90 cursor-pointer"
onClick={() => setMobileOpen(!mobileOpen)} onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu" aria-label="Toggle menu"
> >
@@ -88,7 +88,7 @@ export function Navbar() {
{/* Mobile Drawer */} {/* Mobile Drawer */}
{mobileOpen && ( {mobileOpen && (
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-gradient-to-b from-[#5A087B] to-[#3A044F] border border-white/10 rounded-2xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] backdrop-blur-md p-4 md:hidden"> <div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-white/95 border border-white/50 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
{NAV_LINKS.map((link) => { {NAV_LINKS.map((link) => {
const isActive = pathname === link.href; const isActive = pathname === link.href;
@@ -98,14 +98,14 @@ export function Navbar() {
href={link.href} href={link.href}
className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${ className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
isActive isActive
? "bg-white/10 text-white" ? "bg-[#65149A]/10 text-[#65149A]"
: "text-white/85 hover:text-white hover:bg-white/5" : "text-[#2A1234]/70 hover:text-[#2A1234] hover:bg-[#2A1234]/5"
}`} }`}
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
> >
{link.label} {link.label}
{isActive && ( {isActive && (
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" /> <span className="w-1.5 h-1.5 rounded-full bg-[#65149A] animate-pulse" />
)} )}
</Link> </Link>
); );

147
src/components/layout/PremiumFooter.tsx Normal file
View File

@@ -0,0 +1,147 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const COMPANY = [
{ label: "About Us", href: "/about" },
{ label: "Careers", href: "#" },
{ label: "Press & News", href: "#" },
{ label: "Help Center", href: "#" },
];
const PARTNERSHIPS = [
{ label: "Merchant Partner", href: "/businesses" },
{ label: "Delivery Partner", href: "#" },
{ label: "Corporate Gifting", href: "#" },
{ label: "Local Real Estate", href: "#" },
];
const LEGAL = [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Sitemap", href: "#" },
];
export function PremiumFooter() {
return (
<footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
{/* Column 1: Brand & Description */}
<div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
<Link href="/" className="inline-block">
<Image
src="/logo-light.png"
alt="Nearle"
width={130}
height={30}
className="h-7 w-auto object-contain"
/>
</Link>
<p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
India&apos;s leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
</p>
{/* Social Icons */}
<div className="flex gap-2.5 mt-2">
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
<MaterialIcon icon="share" size={16} />
</a>
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
<MaterialIcon icon="public" size={16} />
</a>
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
<MaterialIcon icon="help" size={16} />
</a>
</div>
</div>
{/* Column 2: Company */}
<div>
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
<ul className="flex flex-col gap-2.5">
{COMPANY.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
{l.label}
</Link>
</li>
))}
</ul>
</div>
{/* Column 3: Nearle */}
<div>
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
<ul className="flex flex-col gap-2.5">
{PARTNERSHIPS.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
{l.label}
</Link>
</li>
))}
</ul>
</div>
{/* Column 4: Support */}
<div>
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
<ul className="flex flex-col gap-2.5">
{LEGAL.map((l) => (
<li key={l.label}>
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
{l.label}
</Link>
</li>
))}
</ul>
</div>
</div>
{/* HQ Address card at bottom-left and info */}
<div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
{/* HQ Address Card */}
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
<div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
<MaterialIcon icon="location_on" size={16} />
</div>
<div className="text-left">
<h6 className="text-xs font-black text-white">Nearle HQ</h6>
<p className="text-[11px] text-white/60 leading-normal mt-0.5">
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
</p>
</div>
</div>
{/* Call center */}
<div className="flex flex-col items-start md:items-end gap-1">
<span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
<a
href="tel:+918049123456"
className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
>
<div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
<MaterialIcon icon="phone" size={14} className="text-white" />
</div>
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
</a>
</div>
</div>
{/* Bottom Copyright & legal links */}
<div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
<div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
<Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
<span className="opacity-50">•</span>
<Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
<span className="opacity-50">•</span>
<Link href="#" className="hover:text-white transition-colors">Help Center</Link>
</div>
</div>
</footer>
);
}

129
src/components/layout/PremiumNavbar.tsx Normal file
View File

@@ -0,0 +1,129 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { usePathname } from "next/navigation";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const NAV_LINKS = [
{ label: "Home", href: "/" },
{ label: "Nearle for Business", href: "/businesses" },
{ label: "Nearle for People", href: "/people" },
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
];
export function PremiumNavbar() {
const [mobileOpen, setMobileOpen] = useState(false);
const pathname = usePathname();
return (
<header className="w-full bg-white border-b border-[#EEE7F4] px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
<div className="flex items-center justify-between w-full">
{/* LOGO (LEFT) */}
<Link
href="/"
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
>
<Image
src="/logo.png"
alt="Nearle"
width={120}
height={30}
className="h-7 md:h-8 w-auto object-contain"
priority
/>
</Link>
{/* LINKS (CENTER) */}
<nav className="hidden md:flex items-center gap-6 lg:gap-8">
{NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.label}
href={link.href}
className={`relative py-1 text-sm font-bold transition-all duration-200 ${
isActive ? "text-[#6330D6]" : "text-[#5E5866] hover:text-[#16001D]"
}`}
>
{link.label}
{isActive && (
<span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-[#6330D6] rounded-full" />
)}
</Link>
);
})}
</nav>
{/* ACTIONS (RIGHT) */}
<div className="hidden md:flex items-center gap-3">
<Link
href="#"
className="inline-flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold px-5 py-1.5 rounded-full text-xs hover:bg-[#6330D6]/5 active:scale-95 transition-all duration-200 whitespace-nowrap"
>
Login
</Link>
<Link
href="/people#download-section"
className="inline-flex items-center justify-center bg-[#6330D6] text-white font-bold px-5 py-2 rounded-full text-xs hover:bg-[#5225b8] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
>
Get App
</Link>
</div>
{/* Mobile menu toggle */}
<button
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#6330D6]/5 text-[#16001D] transition-all active:scale-90 cursor-pointer"
onClick={() => setMobileOpen(!mobileOpen)}
aria-label="Toggle menu"
>
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
</button>
</div>
{/* Mobile Drawer */}
{mobileOpen && (
<div className="absolute top-full left-0 right-0 z-50 bg-white border-b border-[#6330D6]/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
{NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
return (
<Link
key={link.label}
href={link.href}
className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
isActive
? "bg-[#6330D6]/10 text-[#6330D6]"
: "text-[#5E5866] hover:text-[#16001D] hover:bg-[#6330D6]/5"
}`}
onClick={() => setMobileOpen(false)}
>
{link.label}
{isActive && (
<span className="w-1.5 h-1.5 rounded-full bg-[#6330D6]" />
)}
</Link>
);
})}
<div className="flex flex-col gap-2 pt-2 border-t border-[#6330D6]/5 mt-2">
<Link
href="#"
onClick={() => setMobileOpen(false)}
className="flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold py-2.5 rounded-xl text-sm"
>
Login
</Link>
<Link
href="/people#download-section"
onClick={() => setMobileOpen(false)}
className="flex items-center justify-center bg-[#6330D6] text-white font-bold py-2.5 rounded-xl text-sm"
>
Get App
</Link>
</div>
</div>
)}
</header>
);
}

43
src/components/layout/PremiumPageShell.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from "react";
import { PremiumNavbar } from "./PremiumNavbar";
import { PremiumFooter } from "./PremiumFooter";
type PremiumPageShellProps = {
children: React.ReactNode;
className?: string;
};
export function PremiumPageShell({ children, className = "" }: PremiumPageShellProps) {
return (
<div className="min-h-screen bg-[#E8DCF2] p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8 font-body text-[#16001D] antialiased">
<div className={`
mx-auto
w-full
max-w-[1880px]
overflow-hidden
rounded-[1.5rem]
sm:rounded-[2rem]
md:rounded-[2.5rem]
lg:rounded-[3rem]
border
border-white/80
bg-white
shadow-[0_20px_60px_rgba(93,57,128,0.16)]
flex
flex-col
${className}
`}>
{/* Header/Navbar */}
<PremiumNavbar />
{/* Page Content */}
<main className="flex-1 w-full">
{children}
</main>
{/* Footer */}
<PremiumFooter />
</div>
</div>
);
}

45
src/components/ui/FeatureStatsRow.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { MaterialIcon } from "./MaterialIcon";
type FeatureStatsItem = {
icon: string;
title: string;
desc?: string;
};
type FeatureStatsRowProps = {
items: FeatureStatsItem[];
className?: string;
};
export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
return (
<div className={`w-full py-6 md:py-8 ${className}`}>
<div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
{items.map((item, index) => (
<div
key={item.title}
className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
index < items.length - 1
? "lg:border-r lg:border-[#6330D6]/10"
: ""
}`}
>
<div className="w-9 h-9 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon={item.icon} size={18} />
</div>
<div className="min-w-0">
<h4 className="text-sm md:text-base font-black text-[#16001D] leading-tight truncate">
{item.title}
</h4>
{item.desc && (
<p className="text-[11px] md:text-xs text-[#5E5866] font-semibold mt-0.5 leading-tight truncate">
{item.desc}
</p>
)}
</div>
</div>
))}
</div>
</div>
);
}

26
src/components/ui/GlassInfoCard.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { MaterialIcon } from "./MaterialIcon";
type GlassInfoCardProps = {
text: string;
icon?: string;
className?: string;
};
export function GlassInfoCard({ text, icon, className = "" }: GlassInfoCardProps) {
return (
<div
className={`bg-white/80 backdrop-blur-md border border-white/40 shadow-[0_8px_24px_rgba(99,48,214,0.08)] rounded-[16px] px-4 py-2.5 flex items-center gap-2.5 select-none ${className}`}
>
{icon ? (
<div className="w-6 h-6 rounded-full bg-[#6330D6]/10 text-[#6330D6] flex items-center justify-center shrink-0">
<MaterialIcon icon={icon} size={14} />
</div>
) : (
<span className="w-2.5 h-2.5 rounded-full bg-[#6330D6] shrink-0 animate-pulse" />
)}
<span className="text-sm font-extrabold text-[#16001D] whitespace-nowrap">
{text}
</span>
</div>
);
}