Nearle/nearle_web_nextjs
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 Link from "next/link";
import Image from "next/image";
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";
export const metadata: Metadata = {
@@ -14,7 +16,7 @@ const STRATEGY_CARDS = [
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.",
icon: "target",
color: "bg-primary/5 text-primary border-primary/10"
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
},
{
title: "Our Vision",
@@ -26,76 +28,115 @@ const STRATEGY_CARDS = [
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.",
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: "Active Businesses", icon: "store" },
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
];
export default function AboutPage() {
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Hero Section ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/about.png"
alt="About Nearle Background"
fill
sizes="100vw"
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-[#120217]/50" />
</div>
const HERO_STATS = [
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
{ title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
{ title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
];
<div className="relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
We are Nearle
</p>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight">
We build Neighbourhoods.
export default function AboutPage() {
const collageCards = [
{ text: "Local First", icon: "store" },
{ text: "Trusted Network", icon: "verified" },
{ text: "Connected Communities", icon: "groups" }
];
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>
<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.
</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>
</section>
{/* ─── Intro Description Block ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden p-8 md:p-12 text-center">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
<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-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our Platform
</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
</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.
</p>
</section>
{/* ─── 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">
{STRATEGY_CARDS.map((card) => (
<div
key={card.title}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col text-left"
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}`}>
<MaterialIcon icon={card.icon} size={24} />
<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={22} />
</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}
</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}
</p>
</div>
@@ -104,15 +145,15 @@ export default function AboutPage() {
</section>
{/* ─── 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">
{COUNTERS.map((c) => (
{LOCAL_COUNTERS.map((c) => (
<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">
<MaterialIcon icon={c.icon} size={24} />
<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={22} />
</div>
<h4 className="text-4xl font-display font-black text-brand-dark">{c.count}</h4>
<p className="text-label-sm font-black text-on-surface-variant/80 mt-1 uppercase tracking-wider">
<h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{c.label}
</p>
</div>
@@ -121,28 +162,28 @@ export default function AboutPage() {
</section>
{/* ─── 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">
<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
</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
</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.
</p>
<div className="flex flex-wrap justify-center gap-4">
<Link
href="/businesses"
className="bg-primary hover:bg-primary-container text-on-primary font-black px-10 py-4.5 rounded-xl text-label-md hover:shadow-lg transition-all duration-300 active:scale-95 flex items-center gap-2"
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} />
<span>Register Merchant</span>
</Link>
<Link
href="/people"
className="bg-surface-container hover:bg-surface-container-high text-brand-dark font-black px-10 py-4.5 rounded-xl text-label-md transition-all duration-300 active:scale-95 flex items-center gap-2"
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} />
<span>Download App</span>
@@ -150,7 +191,6 @@ export default function AboutPage() {
</div>
</div>
</section>
</div>
</main>
</PremiumPageShell>
);
}

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

@@ -1,15 +1,11 @@
"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_WORDS = [
"Stand above your competitors!",
// "Reach the right people, near you.",
"Get noticed in your locality!"
];
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
const PROCESS_STEPS = [
{
@@ -17,7 +13,7 @@ const PROCESS_STEPS = [
title: "Get Online",
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
icon: "storefront",
color: "bg-primary/5 text-primary border-primary/10"
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
},
{
step: "02",
@@ -31,7 +27,7 @@ const PROCESS_STEPS = [
title: "Get Simplified",
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
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 = [
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-surface-container" },
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-primary text-white" },
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-outline-variant/15" },
{ value: "24/7", label: "Merchant Support", icon: "support_agent", 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-[#6330D6] text-white" },
{ 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-[#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() {
const [wordIndex, setWordIndex] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setWordIndex((prev) => (prev + 1) % ROTATOR_WORDS.length);
}, 3000);
return () => clearInterval(timer);
}, []);
const collageCards = [
{ text: "Nearby Customers", icon: "people" },
{ text: "Orders & Offers", icon: "local_offer" },
{ text: "Local Delivery Support", icon: "local_shipping" }
];
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
{/* ─── Hero Section with Animated Rotator ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="absolute inset-0 z-0 select-none pointer-events-none">
<Image
src="/Nearle Business.png"
alt="Nearle Business Background"
fill
sizes="100vw"
className="object-cover"
priority
/>
<div className="absolute inset-0 bg-[#120217]/50" />
</div>
<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">
<div className="relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
{/* 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">
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>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
<span>Power your business.</span>
<br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_WORDS[wordIndex]}
</span>
</h1>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
rel="noopener noreferrer"
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"
>
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>
</section>
{/* ─── 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">
<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
</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
</h2>
<p className="text-body-md text-on-surface-variant 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.
<p className="text-sm md:text-base text-[#5E5866] leading-relaxed">
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>
</div>
<div className="flex gap-4 shrink-0">
<Link
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} />
<span>Talk to an Expert</span>
@@ -145,15 +171,15 @@ export default function BusinessesPage() {
</section>
{/* ─── Timeline / Core Process Steps ─── */}
<section className="bg-[#FAF8FC] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
<div className="text-center mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
<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-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
How it works
</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
</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.
</p>
</div>
@@ -162,18 +188,18 @@ export default function BusinessesPage() {
{PROCESS_STEPS.map((ps) => (
<div
key={ps.step}
className="premium-card bg-white rounded-3xl p-8 border border-outline-variant/15 shadow-md flex flex-col relative overflow-hidden"
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}
</div>
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-6 ${ps.color}`}>
<MaterialIcon icon={ps.icon} size={28} />
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
<MaterialIcon icon={ps.icon} size={22} />
</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}
</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}
</p>
</div>
@@ -182,31 +208,31 @@ export default function BusinessesPage() {
</section>
{/* ─── Grid Stats & Value Prop ─── */}
<section className="bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20">
<div className="grid lg:grid-cols-12 gap-16 items-center">
<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-12 lg:gap-16 items-center">
{/* Left side: features block (7 cols) */}
<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
</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
</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.
</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) => (
<div key={feat.title} className="flex gap-4">
<div className="w-6 h-6 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-1">
<MaterialIcon icon="check" size={16} className="font-black" />
<div key={feat.title} className="flex gap-3">
<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={14} className="font-black" />
</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}
</h4>
<p className="text-body-sm text-on-surface-variant leading-relaxed">
<p className="text-xs text-[#5E5866] leading-relaxed">
{feat.descr}
</p>
</div>
@@ -216,25 +242,25 @@ export default function BusinessesPage() {
</div>
{/* 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) => (
<div
key={stat.label}
className={`p-6 rounded-3xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
i % 2 === 1 ? "lg:mt-8" : ""
className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
i % 2 === 1 ? "lg:mt-4" : ""
}`}
>
<div className="flex items-center justify-between">
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${
stat.bg.includes("primary") ? "bg-white/10 text-white" : "bg-primary/5 text-primary"
<div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
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 className="mt-8">
<p className="text-4xl font-display font-black tracking-tight">{stat.value}</p>
<p className={`text-[11px] font-bold mt-1 ${
stat.bg.includes("primary") ? "text-white/80" : "text-on-surface-variant/80"
<div className="mt-6">
<p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
<p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
}`}>
{stat.label}
</p>
@@ -246,28 +272,28 @@ export default function BusinessesPage() {
</section>
{/* ─── Join/Download Call to Action ─── */}
<section className="bg-primary rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] overflow-hidden p-12 md:p-20 relative text-center">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(203,157,248,0.18),transparent_50%)] animate-pulse-subtle" />
<div className="relative z-10 max-w-2xl mx-auto text-on-primary">
<h2 className="font-display text-3xl md:text-5xl font-black mb-6 tracking-tight">
<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(99,48,214,0.15),transparent_50%)] pointer-events-none" />
<div className="relative z-10 max-w-2xl mx-auto">
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
Nearle is Essential for Business Growth
</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.
</p>
<div className="flex flex-wrap justify-center gap-4">
<div className="flex flex-wrap justify-center gap-3.5">
<a
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
target="_blank"
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} />
<span>Register as Partner</span>
</a>
<Link
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} />
<span>Contact Experts</span>
@@ -275,7 +301,6 @@ export default function BusinessesPage() {
</div>
</div>
</section>
</div>
</main>
</PremiumPageShell>
);
}

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

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

140
src/app/globals.css
View File

@@ -2,25 +2,25 @@
/* ─── Design Tokens (Material Design 3 inspired) ─── */
:root {
--surface: #E7D3EF;
--surface: #FAF8FC;
--surface-dim: #dadadc;
--surface-bright: #E7D3EF;
--surface-bright: #FAF8FC;
--surface-container-lowest: #ffffff;
--surface-container-low: #f3f3f6;
--surface-container: #eeeef0;
--surface-container: #F3E8F6;
--surface-container-high: #e8e8ea;
--surface-container-highest: #e2e2e5;
--on-surface: #1a1c1e;
--on-surface-variant: #4d434f;
--on-surface: #16001D;
--on-surface-variant: #6D6172;
--inverse-surface: #2f3133;
--inverse-on-surface: #f0f0f3;
--outline: #7f7381;
--outline-variant: #d0c2d1;
--surface-tint: #83429f;
--primary: #4d046a;
--primary: #65149A;
--on-primary: #ffffff;
--primary-container: #662582;
--on-primary-container: #de96f9;
--primary-container: #7C3AED;
--on-primary-container: #ffffff;
--inverse-primary: #ebb2ff;
--secondary: #006d37;
--on-secondary: #ffffff;
@@ -46,14 +46,14 @@
--tertiary-fixed-dim: #ebc246;
--on-tertiary-fixed: #241a00;
--on-tertiary-fixed-variant: #584400;
--background: #E7D3EF;
--on-background: #1a1c1e;
--background: #E8D8ED;
--on-background: #16001D;
--surface-variant: #e2e2e5;
--brand-dark: #120217;
--brand-dark-surface: #1e0627;
--brand-accent: #e0c8f7;
--brand-accent-light: #E4D0FC;
--brand-cream: #E7D3EF;
--brand-dark: #17001F;
--brand-dark-surface: #25002F;
--brand-accent: #E8D8ED;
--brand-accent-light: #F3E8F6;
--brand-cream: #E8D8ED;
}
/* ─── Tailwind v4 Theme ─── */
@@ -141,10 +141,12 @@
/* ─── Base Styles ─── */
html {
scroll-behavior: smooth;
background: #E8DCF2;
}
body {
background: var(--background);
min-height: 100vh;
background: #E8DCF2 !important;
color: var(--on-surface);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
@@ -1133,35 +1135,113 @@ body {
/* ─── Shared Premium Framed Layout Classes ─── */
.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 {
@apply mx-auto w-full;
max-width: min(100% - 16px, 1560px);
margin-left: auto;
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: 640px) {
@media (min-width: 768px) {
.page-frame {
max-width: min(100% - 24px, 1560px);
gap: 24px; /* gap-6 */
}
}
@media (min-width: 1024px) {
.page-frame {
max-width: min(100% - 40px, 1680px);
gap: 32px; /* gap-8 */
}
}
@media (min-width: 1536px) {
.page-frame {
max-width: min(100% - 56px, 1840px);
/* ─── Section Style Variants ─── */
.section-card-white {
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) {
.page-frame {
max-width: min(100% - 96px, 2200px);
.section-card-lavender {
background-color: #F3E8F6;
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 { Jost } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
const jost = Jost({
subsets: ["latin"],
@@ -94,10 +92,8 @@ export default function RootLayout({
rel="stylesheet"
/>
</head>
<body className="bg-background text-on-surface font-body antialiased" suppressHydrationWarning>
<Navbar />
<main>{children}</main>
<Footer />
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
{children}
</body>
</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 { ServiceCategories } from "@/components/home/ServiceCategories";
import { WhyNearle } from "@/components/home/WhyNearle";
@@ -8,8 +9,7 @@ import { StoreQRSection } from "@/components/home/StoreQRSection";
export default function HomePage() {
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">
<div className="page-frame">
<PremiumPageShell>
<Hero />
<ServiceCategories />
<WhyNearle />
@@ -17,8 +17,6 @@ export default function HomePage() {
<HyperlocalFeatures />
<BusinessSection />
<StoreQRSection />
</div>
</main>
</PremiumPageShell>
);
}

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

@@ -1,14 +1,12 @@
"use client";
import React, { useState, useEffect } from "react";
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const ROTATOR_SLIDES = [
"Enjoy your Neighbourhood Living.",
"Just a Click – For all your needs.",
"Convenient & safe shopping locally."
];
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
const OFFERINGS = [
{
@@ -94,7 +92,7 @@ const OFFERINGS = [
}
];
const STATS = [
const LOCAL_STATS = [
{ count: "100+", label: "Verified Restaurants", icon: "restaurant" },
{ count: "100+", label: "Green Grocers", icon: "local_mall" },
{ count: "100+", label: "Home Etailers", icon: "shopping_cart" },
@@ -134,58 +132,87 @@ const APP_BENEFITS = [
}
];
export default function PeoplePage() {
const [slideIndex, setSlideIndex] = useState(0);
const HERO_STATS = [
{ 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(() => {
const timer = setInterval(() => {
setSlideIndex((prev) => (prev + 1) % ROTATOR_SLIDES.length);
}, 3000);
return () => clearInterval(timer);
}, []);
export default function PeoplePage() {
const collageCards = [
{ text: "Discover Nearby", icon: "explore" },
{ text: "Save Favourites", icon: "favorite" },
{ text: "Order Anytime", icon: "shopping_bag" }
];
return (
<main className="page-canvas px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 2xl:px-10 pt-20 md:pt-24 lg:pt-28 pb-4 md:pb-6 lg:pb-8">
<div className="page-frame">
<PremiumPageShell>
{/* ─── Hero Section ─── */}
<section className="hero-section relative overflow-hidden rounded-[2rem] md:rounded-[2.5rem] lg:rounded-[3rem] border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.28)] px-6 md:px-12 py-24 md:py-32 text-center">
{/* Background Image with Overlay */}
<div className="hero-background select-none pointer-events-none">
<Image
src="/nearle people.png"
alt="Nearle People Background"
fill
sizes="100vw"
className="object-cover object-right"
priority
/>
</div>
<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">
<div className="hero-content relative z-10 mx-auto max-w-container-max">
<p className="text-label-sm font-black uppercase tracking-[0.25em] text-brand-accent">
{/* 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">
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>
<h1 className="mt-6 font-display text-4xl font-black text-white md:text-6xl tracking-tight leading-tight max-w-4xl mx-auto">
<span>Redefining Local Living.</span>
<br />
<span className="hero-rotator-text relative inline-flex text-brand-accent transition-all duration-500">
{ROTATOR_SLIDES[slideIndex]}
</span>
</h1>
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<a
href="#download-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"
>
Get the App
</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>
</section>
{/* ─── 9 Core Offerings Bento Grid ─── */}
<section className="experience-section bg-[#F3E8F6] rounded-[1.5rem] md:rounded-[2rem] border border-white/50 overflow-hidden py-16 md:py-20 px-6 md:px-12 lg:px-20 text-center">
<div className="mb-16">
<span className="text-label-sm font-black text-primary uppercase tracking-widest">
{/* ─── Bento Grid of Offerings ─── */}
<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-12">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
What we offer
</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
</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.
</p>
</div>
@@ -217,30 +244,30 @@ export default function PeoplePage() {
</section>
{/* ─── 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">
<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
</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
</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.
</p>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
{STATS.map((s) => (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
{LOCAL_STATS.map((s) => (
<div
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} />
</div>
<h4 className="text-3xl font-display font-black text-brand-dark">{s.count}</h4>
<p className="text-[11px] font-bold text-on-surface-variant/80 mt-1 uppercase tracking-wider">
<h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
<p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
{s.label}
</p>
</div>
@@ -249,127 +276,73 @@ export default function PeoplePage() {
</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">
{/* Subtle ambient light gradient overlays */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(224,200,247,0.15),transparent_70%)] pointer-events-none" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_80%,rgba(123,248,161,0.06),transparent_50%)] pointer-events-none" />
<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 glow layers */}
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
{/* Background dot pattern */}
<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) */}
{/* ──────────────────────────────────────────────────────── */}
{/* DESKTOP LAYOUT */}
<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>
<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
</span>
<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>
<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.
</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.
</p>
</div>
{/* App badges (Desktop Only) */}
<div className="flex flex-col gap-2 mt-8">
<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">
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
<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" />
<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-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">App Store</div>
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white">App Store</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">
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
<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" />
<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-sm font-black text-white group-hover:text-brand-accent transition-colors duration-300">Google Play</div>
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-sm font-black text-white">Google Play</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">
{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 className={`absolute -right-4 -bottom-4 opacity-40 pointer-events-none select-none ${b.bgVisualClass}`}>
<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-20 pointer-events-none select-none ${b.bgVisualClass}`}>
<MaterialIcon icon={b.bgVisual} size={72} />
</div>
<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} />
</div>
<div className="text-left relative z-10">
<h4 className="text-base md:text-lg 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-xs text-white/85 font-semibold leading-relaxed">{b.text}</p>
<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">{b.microcopy}</p>
<p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
</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]">
{/* Subtle soft glow behind phone */}
<div className="absolute inset-0 bg-[#bd34fe]/25 rounded-full blur-[60px] opacity-40 -z-10 animate-pulse [animation-duration:5s]" />
<div className="absolute inset-0 bg-[#bd34fe]/10 rounded-full blur-[60px] opacity-40 -z-10" />
{/* 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">
{/* Status Bar */}
<div className="flex justify-between items-center text-white/70 text-[10px] font-bold px-1 mb-2">
<span>Good evening 👋</span>
<div className="flex items-center gap-1 opacity-60">
@@ -378,13 +351,11 @@ export default function PeoplePage() {
</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">
<MaterialIcon icon="search" size={14} className="text-white/40" />
<span>Search nearby stores</span>
</div>
{/* Mock Category Icons */}
<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">
<MaterialIcon icon="shopping_basket" size={18} className="text-brand-accent" />
@@ -400,7 +371,6 @@ export default function PeoplePage() {
</div>
</div>
{/* Mock Store Cards */}
<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="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>
</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>
{/* Subtitle / Nearle App Label */}
<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-[10px] text-white/80 mt-0.5">Your nearby stores, all in one place.</p>
</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">
<MaterialIcon icon="home" size={14} className="text-brand-accent" />
<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>
{/* Overlapping alert bubble */}
<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="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="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 className="text-left text-brand-dark">
<p className="text-xs font-black leading-tight">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Preparing your order</p>
</div>
</div>
</div>
</div>
{/* ──────────────────────────────────────────────────────── */}
{/* 📱 MOBILE / TABLET LAYOUT (below lg) */}
{/* ──────────────────────────────────────────────────────── */}
{/* MOBILE LAYOUT */}
<div className="lg:hidden flex flex-col items-center text-center relative z-10 w-full">
{/* Heading and Description */}
<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
</span>
<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.
</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.
</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="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="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="flex justify-between items-center text-white/70 text-[9px] font-bold px-1 mb-1">
<span>Good evening 👋</span>
<div className="flex items-center gap-1 opacity-60">
@@ -491,13 +431,11 @@ export default function PeoplePage() {
</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">
<MaterialIcon icon="search" size={12} className="text-white/40" />
<span>Search nearby stores</span>
<span>Search stores</span>
</div>
{/* Mock Category Icons */}
<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">
<MaterialIcon icon="shopping_basket" size={14} className="text-brand-accent" />
@@ -513,7 +451,6 @@ export default function PeoplePage() {
</div>
</div>
{/* Mock Store Cards (Only One Card on Mobile) */}
<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="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 className="text-left leading-tight">
<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>
{/* Subtitle / Nearle App Label */}
<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-[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>
{/* 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">
<MaterialIcon icon="home" size={12} className="text-brand-accent" />
<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>
{/* Order Confirmation Card */}
<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="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"
/>
<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-7 h-7 rounded-full bg-secondary/10 flex items-center justify-center">
<MaterialIcon icon="check_circle" size={16} className="text-secondary" />
</div>
<div className="text-left text-brand-dark">
<p className="text-xs font-black leading-tight">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant font-semibold mt-0.5 leading-tight">Your local store is preparing your order</p>
<p className="text-xs font-black">Order Confirmed</p>
<p className="text-[10px] text-on-surface-variant">Preparing your order</p>
</div>
</div>
{/* Compact Benefits List */}
<div className="w-full max-w-[340px] md:max-w-[400px] flex flex-col gap-3 mt-6">
<div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
{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 className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<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.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
<MaterialIcon icon={b.icon} size={16} />
</div>
<div>
@@ -573,28 +502,24 @@ export default function PeoplePage() {
))}
</div>
{/* Coming Soon Download Buttons */}
<div className="flex flex-col items-center gap-2 mt-8 w-full">
<div className="flex flex-col sm:flex-row gap-4 justify-center w-full max-w-[320px] sm:max-w-none">
<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">
<MaterialIcon icon="phone_iphone" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
<div className="text-left leading-tight">
<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 className="flex flex-col sm:flex-row gap-3 mt-8 w-full max-w-[320px] justify-center">
<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="phone_iphone" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white">App Store</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">
<MaterialIcon icon="play_arrow" size={20} className="text-brand-accent group-hover:scale-110 transition-transform duration-300" />
<div className="text-left leading-tight">
<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">Google Play</div>
</div>
<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={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-xs font-black text-white">Google Play</div>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</PremiumPageShell>
);
}

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

@@ -208,7 +208,7 @@ export function ContactForm() {
<button
type="submit"
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 ? (
<>

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

@@ -31,7 +31,7 @@ const BENEFITS = [
export function BusinessSection() {
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">
{/* 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 Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const QUICK_LINKS = [
{
name: "Daily Groceries",
icon: "shopping_basket",
label: "Fresh & On-Time",
},
{
name: "Hot Meals",
icon: "fastfood",
label: "Quick & tasty",
},
{
name: "wellness ",
icon: "medical_services",
label: "Essential & Trusted",
},
{
name: "More Services",
icon: "store",
label: "Explore More",
},
const PROOF_ITEMS = [
{ label: "1000+", text: "Verified Stores", icon: "store" },
{ label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
{ label: "50,000+", text: "Happy Customers", icon: "mood" },
{ label: "4.7 ★", text: "Average Rating", icon: "star" },
];
export function Hero() {
return (
<section className="relative pb-4 md:pb-6">
<div className="relative overflow-hidden rounded-[1.75rem] md:rounded-[2.25rem] bg-[#16001F]">
{/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
<div className="hero-dark-panel select-none pointer-events-none">
{/* Subtle Background Dot Texture */}
<div className="hero-map-layer select-none">
<Image
src="/images/slider-glob.png"
alt="Subtle Background"
fill
sizes="(max-width: 768px) 100vw, 40vw"
className="object-contain object-left-top"
priority
<section className="relative overflow-hidden bg-white select-none w-full">
{/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
{/* 1. Large pale lavender partial circle (top-left) */}
<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" />
{/* 2. Purple solid circle (center-right around collage) */}
<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" />
{/* 3. Striped purple circle (lower-middle collage area) */}
<div
className="hidden lg:block absolute left-[45%] bottom-[15%] w-[100px] h-[100px] rounded-full opacity-80 z-0 pointer-events-none"
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>
{/* 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 */}
<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>
{/* 6. Large partial purple circle (bottom-right corner) */}
<div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
{/* ─── Main Content Wrapper ─── */}
<div className="hero-stage min-h-0 pb-10 md:pb-12 relative w-full flex flex-col z-10 md:justify-center md:items-start">
{/* Left Column: Text & Search Content */}
<div className="hero-content text-white select-none">
<span className="inline-block text-xs font-black tracking-widest uppercase mb-5 bg-brand-accent/15 px-4 py-1.5 rounded-full border border-brand-accent/20 text-brand-accent">
Neighbourhood commerce, made simple
{/* ─── TWO-COLUMN CONTENT GRID ─── */}
<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: Editorial Typography & Copy */}
<div className="flex flex-col text-left max-w-xl z-20 relative">
<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>
<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">
Your Favourite Local Stores,
<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]">
Everything Local.
<br />
<span className="text-brand-accent drop-shadow-md">
Now at Your Doorstep.
</span>
Everything <span className="text-[#6D28D9]">Near.</span>
</h1>
<p className="text-body-lg md:text-[20px] md:leading-8 text-white/90 mb-10 leading-relaxed max-w-2xl">
Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
<p className="max-w-[480px] text-base md:text-lg text-[#6D6172] leading-relaxed font-bold mt-6">
Discover verified local stores, exclusive offers, fast delivery, and a better way to shop within your neighbourhood.
</p>
{/* CTAs */}
<div className="flex flex-col md:flex-row md:flex-wrap gap-4 mt-8 w-full md:w-auto">
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
<Link
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
href="/businesses"
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"
href="/people#download-section"
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>
</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>
{/* RIGHT COLUMN: Creative Overlapping Strips Collage */}
<div className="w-full z-20">
{/* Mobile/Tablet Only Nearle Bag Logo with context pins */}
<div className="hero-mobile-logo block lg:hidden mt-8 select-none pointer-events-none relative">
<div className="relative w-[280px] h-[230px] mx-auto">
{/* DESKTOP LAYOUT (lg and above) */}
<div className="hidden lg:block relative h-[500px] lg:h-[560px] w-full">
{/* 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
src="/nearlenewlogo.png"
alt="Nearle delivery"
src="/images/cat-daily-essentials.png"
alt="Local grocery products"
fill
sizes="(max-width: 1023px) 280px, 0px"
className="object-contain drop-shadow-2xl"
priority
className="object-cover"
sizes="170px"
/>
</div>
</div>
</div>
{/* Right Column: Centered Nearle bag visual with local commerce context pins and route line */}
<div className="hero-visual-layer select-none pointer-events-none relative">
<div className="hero-visual-panel" />
<div className="hero-visual-image relative">
{/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
<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]">
<Image
src="/nearlenewlogo.png"
alt="Nearle delivery"
src="/Nearle Business.png"
alt="Local merchant delivery"
fill
sizes="(max-width: 768px) 95vw, 48vw"
className="object-contain drop-shadow-2xl"
className="object-cover"
sizes="190px"
priority
/>
</div>
</div>
</div>
</div>
{/* Overlapping Quick Category Links */}
<div className="service-cards-wrapper max-w-container-max mx-auto relative z-20 -mt-8 md:-mt-10 lg:-mt-12">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{QUICK_LINKS.map((item) => (
<div
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"
{/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
<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]">
<Image
src="/nearle people.png"
alt="Local customer shopping"
fill
className="object-cover"
sizes="180px"
/>
</div>
<div className="flex-grow">
<h3 className="text-sm md:text-base font-extrabold text-brand-dark group-hover:text-primary transition-colors">
{item.name}
</h3>
<p className="text-xs text-on-surface-variant font-medium mt-0.5 leading-tight">
</div>
{/* MOBILE/TABLET COLLAGE (below lg) */}
<div className="lg:hidden flex items-center justify-center gap-2 mt-2 w-full relative h-[280px]">
<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}
</p>
</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">
<MaterialIcon
icon="arrow_forward"
size={16}
className="text-primary"
/>
<div className="text-xs text-[#6D6172] font-semibold mt-1">
{item.text}
</div>
</div>
))}
</div>
</div>
</section>
);
}

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

@@ -26,7 +26,7 @@ const STEPS = [
export function HowItWorks() {
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">
{/* Header Section */}
<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() {
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 */}
<style>{`
@media (min-width: 901px) {

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

@@ -55,7 +55,7 @@ const CATEGORIES = [
export function ServiceCategories() {
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">
{/* Header Section */}
<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() {
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 */}
<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" />

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

@@ -29,7 +29,7 @@ const CARDS = [
export function WhyNearle() {
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">
{/* Header Section */}
<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 Image from "next/image";
import { usePathname } from "next/navigation";
import React, { useState } from "react";
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const COMPANY = [
@@ -27,386 +26,127 @@ const LEGAL = [
{ 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() {
const pathname = usePathname();
const isContactPage = pathname?.startsWith("/contact");
return (
<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
const [formData, setFormData] = useState<FooterFormData>({
name: "",
phone: "",
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">
<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">
{/* Col 1: Brand info */}
<div className="flex flex-col gap-4">
<Link href="/" className="inline-block">
<Image
src="/logo-v2.png"
src="/logo-light.png"
alt="Nearle"
width={220}
height={36}
style={{ width: "210px", height: "auto" }}
style={{ width: "160px", height: "auto" }}
className="object-contain"
/>
</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
communities and verified local businesses within 2km.
</p>
{/* Social Links */}
<div className="flex gap-4">
<a href="#" className="footer-social-link" aria-label="Share">
<MaterialIcon icon="share" size={24} />
<div className="flex gap-3 mt-2">
<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={20} />
</a>
<a href="#" className="footer-social-link" aria-label="Website">
<MaterialIcon icon="public" size={24} />
<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={20} />
</a>
</div>
</div>
);
return (
<footer className="bg-[#E6D7EA] px-3 sm:px-4 md:px-5 lg:px-6 xl:px-8 pb-0 w-full mt-3 md:mt-4">
<div className="mx-auto" style={{ maxWidth: "min(100% - 48px, 1520px)" }}>
<div className="bg-[#120217] rounded-[1.5rem] md:rounded-[2rem] lg:rounded-[2.5rem] overflow-hidden border border-white/10 shadow-[0_18px_45px_rgba(20,0,30,0.28)]">
{/* Top Helpdesk Bar */}
<div className="bg-[#2A0838] border-b border-white/10 px-5 py-4 md:px-8 md:py-5 flex flex-col md:flex-row justify-between items-center gap-6">
<div className="flex items-center gap-4 text-white">
<div className="w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-lg shrink-0">
<MaterialIcon icon="headset_mic" size={24} />
</div>
<div className="text-left">
<h4 className="text-headline-md font-black text-white">
24/7 Neighborhood Helpdesk
</h4>
<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>
{/* Col 2: Company Links */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
<ul className="flex flex-col gap-3">
{COMPANY.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">
{l.label}
</Link>
</li>
))}
</ul>
</div>
{/* Main Footer Content */}
<div className="px-5 pt-10 pb-8 md:px-8 md:pt-12 md:pb-10 lg:px-12 lg:pt-12 lg:pb-10 text-white">
<div
className={
isContactPage
? "grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10"
: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(500px,560px)] gap-10 xl:gap-14 items-start"
}
>
{isContactPage ? (
<>
{/* Brand Column */}
{brandCol}
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
{/* Col 3: Partnerships */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
<ul className="flex flex-col gap-3">
{PARTNERSHIPS.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">
{l.label}
</Link>
</li>
))}
</ul>
</div>
{/* Partnerships Links */}
<div className="footer-partnerships min-w-0 self-start">
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div>
</>
) : (
<>
<div className="flex flex-col self-start w-full">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8 lg:gap-10">
{/* Brand Column */}
{brandCol}
{/* Company Links */}
<div className="footer-company min-w-0 self-start">
<FooterCol title="Company" links={COMPANY} />
{/* Col 4: Support / Legal */}
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
<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">
{l.label}
</Link>
</li>
))}
</ul>
</div>
{/* Partnerships Links */}
<div className="footer-partnerships min-w-0 self-start">
<FooterCol title="Partnerships" links={PARTNERSHIPS} />
</div>
</div>
{/* HQ Office Location & Directions block */}
<div className="mt-8 border-t border-white/10 pt-7 max-w-[520px] text-left">
<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 />
{/* Col 5: HQ Address & Helpdesk */}
<div className="flex flex-col gap-4">
<div>
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">Visit Nearle HQ</h5>
<p className="text-xs leading-relaxed text-white/60">
424, Diwan Bahadur Rd,<br />
Opposite to Sri Krishna Sweets,<br />
R.S. Puram, Coimbatore,<br />
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-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>
</a>
</div>
</div>
{/* Contact Form Card */}
<div className="footer-contact-wrap w-full self-start">
<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">
{/* Background Glow Decors */}
<div className="absolute top-0 right-0 w-24 h-24 bg-primary/5 rounded-full blur-2xl" />
<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"
<div className="border-t border-white/10 pt-4 flex flex-col gap-2">
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</p>
<a
href="tel:+918049123456"
className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
>
Your Name
</label>
<input
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>
)}
<MaterialIcon icon="phone" size={16} className="text-[#E6D7EA] shrink-0" />
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
</a>
</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 className="flex flex-col text-left">
<label
htmlFor="footer-field-email"
className="text-xs font-black text-brand-dark/70 mb-1.5"
>
Your Email Address
</label>
<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">
{/* Bottom Copyright Divider & Bar */}
<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">
<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) => (
<Link
key={link.label}
href={link.href}
className="hover:text-[#e0c8f7] transition-colors"
className="hover:text-[#E6D7EA] transition-colors"
>
{link.label}
</Link>
@@ -415,34 +155,8 @@ export function Footer() {
</div>
</div>
</div>
</div>
</div>
</footer>
);
}
// Ensure default export is also available for Next.js app router client components if needed
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 (
<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">
<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">
<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-[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">
{/* Left: Brand */}
<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"
>
<Image
src="/logo-light.png"
src="/logo.png"
alt="Nearle"
width={400}
height={50}
@@ -48,13 +48,13 @@ export function Navbar() {
<Link
key={link.label}
href={link.href}
className={`relative py-2 text-[15px] font-medium leading-5 transition-all duration-200 whitespace-nowrap ${
isActive ? "text-white" : "text-white/80 hover:text-white"
className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
isActive ? "text-[#2A1234]" : "text-[#2A1234]/70 hover:text-[#2A1234]"
} group`}
>
{link.label}
<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
? "w-5 opacity-100"
: "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">
<Link
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
</Link>
{/* Mobile menu toggle */}
<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)}
aria-label="Toggle menu"
>
@@ -88,7 +88,7 @@ export function Navbar() {
{/* Mobile Drawer */}
{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">
{NAV_LINKS.map((link) => {
const isActive = pathname === link.href;
@@ -98,14 +98,14 @@ export function Navbar() {
href={link.href}
className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
isActive
? "bg-white/10 text-white"
: "text-white/85 hover:text-white hover:bg-white/5"
? "bg-[#65149A]/10 text-[#65149A]"
: "text-[#2A1234]/70 hover:text-[#2A1234] hover:bg-[#2A1234]/5"
}`}
onClick={() => setMobileOpen(false)}
>
{link.label}
{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>
);

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>
);
}