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

footer section fix

Browse Source
This commit is contained in:
Aravind
2026-06-26 10:58:24 +05:30
parent 7f6b42153a
commit 48cafd07c6
16 changed files with 1276 additions and 483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
@@ -16,19 +17,28 @@ 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-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
image: "/images/nearle-how/how-storefront.webp",
imageAlt: "3D local store storefront with purple awning",
imgFit: "object-contain object-bottom"
},
{
title: "Our Vision",
descr: "Our vision is to make every neighbourhood more connected by helping people discover, support, and shop from the local businesses around them.",
icon: "visibility",
color: "bg-secondary/5 text-secondary border-secondary/10"
iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
image: "/images/nearle-merchant/local-map.webp",
imageAlt: "Nearle local neighbourhood map",
imgFit: "object-cover object-center"
},
{
title: "Why Nearle",
descr: "Nearle 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 of what their neighbourhood has to offer.",
icon: "help_outline",
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
image: "/images/app-mockup.png",
imageAlt: "Nearle app on a smartphone",
imgFit: "object-contain object-bottom"
}
];
@@ -110,7 +120,7 @@ export default function AboutPage() {
</section>
{/* ─── Intro Description Block ─── */}
<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">
<section id="story-section" className="py-10 md:py-14 xl:py-10 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>
@@ -123,29 +133,73 @@ export default function AboutPage() {
</section>
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
<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="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 shrink-0 ${card.color}`}>
<MaterialIcon icon={card.icon} size={22} />
<section
className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
>
<div
className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
style={{ maxWidth: 1800 }}
>
<div
className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
>
{STRATEGY_CARDS.map((card) => (
<div
key={card.title}
className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
style={{ borderRadius: 32 }}
>
{/* Content: icon, heading, description */}
<div
className="flex-none"
style={{ padding: "clamp(28px, 2.8vw, 44px)", paddingBottom: 0 }}
>
<div
className={`flex items-center justify-center rounded-full border shrink-0 ${card.iconClass}`}
style={{ width: 72, height: 72 }}
>
<MaterialIcon icon={card.icon} size={28} />
</div>
<h3
className="font-display font-black text-[#16001D]"
style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
>
{card.title}
</h3>
<p
className="text-[#5E5866]"
style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
>
{card.descr}
</p>
</div>
{/* Image: inner rounded container with consistent spacing on all sides */}
<div
className="flex-1 relative overflow-hidden bg-[#F4ECFA]/40"
style={{
margin: "clamp(20px, 2vw, 32px) clamp(24px, 2.2vw, 36px) clamp(20px, 2vw, 28px)",
borderRadius: 24,
minHeight: 200
}}
>
<Image
src={card.image}
alt={card.imageAlt}
fill
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
className={card.imgFit}
/>
</div>
</div>
<h3 className="font-display text-lg font-black text-[#16001D] mb-3">
{card.title}
</h3>
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
{card.descr}
</p>
</div>
))}
))}
</div>
</div>
</section>
{/* ─── Global Stats counters ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<section className="py-10 md:py-14 xl:py-10 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">
{LOCAL_COUNTERS.map((c) => (
<div key={c.label} className="flex flex-col items-center text-center">
@@ -162,7 +216,7 @@ export default function AboutPage() {
</section>
{/* ─── Brand Building Banner ─── */}
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<div className="max-w-4xl mx-auto">
<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

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

@@ -1,9 +1,11 @@
import React from "react";
import Image from "next/image";
import Link from "next/link";
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 { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -12,71 +14,6 @@ export const metadata: Metadata = {
"Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales — all from one simple hyperlocal platform.",
};
const PROCESS_STEPS = [
{
step: "01",
title: "Get Online",
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
icon: "storefront",
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
},
{
step: "02",
title: "Get Noticed",
descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
icon: "campaign",
color: "bg-secondary/5 text-secondary border-secondary/10"
},
{
step: "03",
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-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
}
];
const FEATURES = [
{
title: "Direct Customer Access",
descr: "Build direct relationships and trust with residents in your immediate vicinity."
},
{
title: "Become a Partner",
descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
},
{
title: "Build Your Brand",
descr: "Brand your business on Nearle and reach out to your community with ease."
},
{
title: "Huge Opportunity",
descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
},
{
title: "Delight Your Customers",
descr: "Delight customers in the neighborhood with a personalized online shopping experience."
},
{
title: "Unique Model",
descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
},
{
title: "Reach Right Audience",
descr: "We target your ideal customers — people in your neighborhood search for what you offer."
},
{
title: "Increase Your Customers",
descr: "Increase walk-in and online customers by targeting local demand."
}
];
const STATS = [
{ value: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" },
{ value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" },
{ value: "Easy", label: "Direct Customer Access", 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" },
@@ -85,6 +22,111 @@ const HERO_BENEFITS = [
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
];
function PhoneMapVisual() {
return (
// Single phone frame — no outer wrapper needed, no floating pills
<div
className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
>
{/* Status bar */}
<div className="flex items-center justify-between px-3 pt-2.5 pb-1">
<span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
<div className="flex items-center gap-0.5">
{[4, 6, 8, 10].map((h) => (
<span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
))}
</div>
</div>
{/* Search bar */}
<div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
<svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
<circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
<path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
</svg>
<span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
<svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
<path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
</svg>
</div>
{/* Map */}
<div
className="relative mx-2.5 overflow-hidden rounded-2xl"
style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
>
{/* Street grid */}
<div className="absolute inset-0" style={{
backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
backgroundSize: "16px 16px",
}} />
{/* Subtle glow under main pin */}
<div className="absolute rounded-full bg-[#6330D6]/10"
style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
{/* Large center pin */}
<svg className="absolute" aria-hidden="true"
style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
width="24" height="30" viewBox="0 0 16 20" fill="none">
<path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
<circle cx="8" cy="8.6" r="3.2" fill="white"/>
</svg>
{/* Green pin — top-right */}
<svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Purple pin — upper-left */}
<svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Green pin — lower-left */}
<svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
{/* Purple pin — lower-right */}
<svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
width="13" height="16" viewBox="0 0 8 10" fill="none">
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
<circle cx="4" cy="4" r="1.5" fill="white"/>
</svg>
</div>
{/* Store preview card — bottom sheet inside phone */}
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
{/* Store thumbnail */}
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
<svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
<path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
<rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
</svg>
</div>
<div className="min-w-0 flex-1">
<p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
<div className="mt-1 flex items-center gap-1">
<span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
<span className="text-[7.5px] text-[#5E5866]">•</span>
<span className="text-[7.5px] text-[#5E5866]">4.8</span>
<span className="text-[7.5px] leading-none">⭐</span>
<span className="text-[7.5px] text-[#5E5866]">•</span>
<span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
</div>
</div>
<svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
<path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</div>
</div>
);
}
export default function BusinessesPage() {
const collageCards = [
{ text: "Nearby Customers", icon: "people" },
@@ -151,7 +193,7 @@ export default function BusinessesPage() {
</section>
{/* ─── Intro Highlight Banner ─── */}
<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">
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 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-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
Together, we grow
@@ -174,133 +216,146 @@ export default function BusinessesPage() {
</div>
</section>
{/* ─── Timeline / Core Process Steps ─── */}
<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-[#16001D] mt-4">
Build Your Neighborhood Brand
</h2>
<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>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{PROCESS_STEPS.map((ps) => (
<div
key={ps.step}
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-5xl font-black text-[#6330D6]/5">
{ps.step}
</div>
<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-lg font-black text-[#16001D] mb-3 text-left">
{ps.title}
</h3>
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
{ps.descr}
</p>
</div>
))}
</div>
</section>
{/* ─── Grid Stats & Value Prop ─── */}
<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-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Our features
{/* ─── Build Your Neighborhood Brand ─── */}
<section className="py-10 md:py-14 lg:py-16 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
<div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1800px] mx-auto">
{/* Header */}
<div className="text-center mb-10 lg:mb-12 xl:mb-10">
<span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
How it works
</span>
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
Move Your Business Forward
<h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
Build Your Neighborhood Brand
</h2>
<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 className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
{FEATURES.map((feat) => (
<div key={feat.title} className="flex gap-3">
<div className="w-[22px] h-[22px] 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-sm font-black text-[#16001D] mb-1">
{feat.title}
</h4>
<p className="text-xs text-[#5E5866] leading-relaxed">
{feat.descr}
</p>
</div>
</div>
))}
</div>
</div>
{/* Right side: stats quadrant (5 cols) */}
<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-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-[34px] h-[34px] 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={18} />
</div>
</div>
<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>
{/* Cards grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
{/* Card 1 - Get Online */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
01
</span>
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
<MaterialIcon icon="storefront" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Online
</h3>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
</p>
</div>
<div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center">
<div className="relative h-[150px] w-[220px] lg:h-[175px] lg:w-[255px]">
<Image
src="/images/nearle-how/how-storefront.webp"
alt="Local shop storefront with purple awning and now online board"
fill
sizes="(max-width: 768px) 50vw, 25vw"
className="object-contain object-center"
/>
</div>
</div>
))}
</article>
{/* Card 2 - Get Noticed */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
02
</span>
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
<MaterialIcon icon="campaign" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Noticed
</h3>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
</p>
</div>
<div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
<PhoneMapVisual />
</div>
</article>
{/* Card 3 - Get Simplified */}
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
03
</span>
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
<MaterialIcon icon="auto_awesome" size={28} />
</div>
<div className="relative z-10 mt-6 max-w-[260px]">
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
Get Simplified
</h3>
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
</p>
</div>
<div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center gap-4">
<div className="hidden sm:flex flex-col gap-2 pb-2">
{["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
<div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm whitespace-nowrap">
{chip}
</div>
))}
</div>
<div className="relative h-[150px] w-[190px] lg:h-[175px] lg:w-[215px] shrink-0">
<Image
src="/images/nearle-how/how-grocery-bag.webp"
alt="Nearle grocery bag filled with vegetables and packaged products"
fill
sizes="(max-width: 768px) 50vw, 25vw"
className="object-contain object-center"
/>
</div>
</div>
</article>
</div>
</div>
</section>
{/* ─── Our Features / Business Grid ─── */}
<BusinessFeaturesGrid />
{/* ─── Join/Download Call to Action ─── */}
<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-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-3.5">
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
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 Interest</span>
</Link>
<Link
href="/contact"
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>
</Link>
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
<div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center 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-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-3.5">
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
<Link
href="/contact"
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 Interest</span>
</Link>
<Link
href="/contact"
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>
</Link>
</div>
</div>
</div>
</div>
</section>

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

@@ -13,7 +13,7 @@ export default function ContactPage() {
return (
<PremiumPageShell>
{/* ─── Contact Section ─── */}
<section className="relative px-6 py-12 md:px-12 lg:px-16 border-b border-[#6330D6]/10">
<section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 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">
@@ -101,7 +101,7 @@ export default function ContactPage() {
</section>
{/* ─── Map Section ─── */}
<section className="p-6 md:p-8 bg-[#FAF7FD]">
<section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
<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"

16
src/app/globals.css
View File

@@ -1261,10 +1261,26 @@ body {
padding-block: 88px;
}
@media (min-width: 1280px) {
.section { padding-block: 64px; }
}
@media (min-width: 1536px) {
.section { padding-block: 56px; }
}
.section-tight {
padding-block: 56px;
}
@media (min-width: 1280px) {
.section-tight { padding-block: 40px; }
}
@media (min-width: 1536px) {
.section-tight { padding-block: 36px; }
}
.section-soft {
background: #faf7ff;
}

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

@@ -209,8 +209,8 @@ export default function PeoplePage() {
</section>
{/* ─── 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">
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
<div className="mb-10 xl:mb-8">
<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>
@@ -249,8 +249,8 @@ export default function PeoplePage() {
</section>
{/* ─── Localized Stats Block ─── */}
<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">
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
<div className="mb-10 xl:mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Nearle Network
</span>
@@ -281,7 +281,8 @@ export default function PeoplePage() {
</section>
{/* ─── Ready to Download Section ─── */}
<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">
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">
{/* 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" />
@@ -525,6 +526,7 @@ export default function PeoplePage() {
</div>
</div>
</section>
</section>
</PremiumPageShell>
);
}