- Join the #1 Neighbourhood App + The Neighbourhood App
Bringing local stores to your doorstep instantly. @@ -491,7 +496,7 @@ export default function PeoplePage() {
{APP_BENEFITS.map((b) => (
-
+
diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx
index 04d8c20..f53cc34 100644
--- a/src/components/home/BusinessSection.tsx
+++ b/src/components/home/BusinessSection.tsx
@@ -2,148 +2,183 @@ import Image from "next/image";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
-const BENEFITS = [
+const FEATURES = [
{
title: "Digital Catalogue",
- desc: "Showcase your products online easily to nearby customers.",
+ desc: "Showcase your products online and keep your catalogue updated.",
icon: "menu_book",
- iconColor: "bg-primary/5 text-primary",
+ visual: "/images/nearle-merchant/catalogue-ui.webp",
+ alt: "Clean grocery catalogue interface preview",
+ tone: "bg-primary/5 text-primary",
},
{
title: "QR Ordering",
- desc: "Enable existing customers to scan and place orders directly at your counter.",
+ desc: "Let customers scan, browse, and place orders directly from your store.",
icon: "qr_code",
- iconColor: "bg-secondary/5 text-secondary",
+ visual: "/images/nearle-merchant/qr-stand.webp",
+ alt: "QR ordering stand on a local grocery store counter",
+ tone: "bg-secondary/5 text-secondary",
},
{
title: "Local Discovery",
- desc: "Get discovered by residents in your neighbourhood searching for your products.",
- icon: "explore",
- iconColor: "bg-[#de96f9]/10 text-primary",
+ desc: "Get discovered by nearby customers searching for products you sell.",
+ icon: "location_on",
+ visual: "/images/nearle-merchant/local-map.webp",
+ alt: "Local discovery map with purple pins and a store listing",
+ tone: "bg-[#de96f9]/10 text-primary",
},
{
title: "Delivery Support",
- desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
+ desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
icon: "local_shipping",
- iconColor: "bg-rose-500/5 text-rose-600",
+ visual: "/images/nearle-merchant/delivery-support.webp",
+ alt: "Local delivery partner handing a grocery bag to a customer",
+ tone: "bg-rose-500/5 text-rose-600",
},
];
+const BENEFITS = [
+ "No Commission on your orders",
+ "Full Control on pricing",
+ "Dedicated Support for your business",
+ "Grow Your Sales in your area",
+];
+
export function BusinessSection() {
return (
-
-
-
- {/* Merchant Section Grid */}
-
-
- {/* Left Column: Feature copywriting (7 cols) */}
-
-
- Merchant Partnerships
-
-
+
- Bring Your Store Online with Nearle. -
-- Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business. -
+
+
+
+
-
-
-
-
+
+
+ Merchant Partnerships
+
+
+ Bring Your Store Online
+
+ Bring Your Store Online
+ with Nearle.
+
+ + Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business. +
+ +
+
-
+
+
+
+ Stay in control of your pricing and orders
+
+
- Stay in control of your pricing and orders
+
+ Build direct relationships with local families
-
-
-
- Build direct relationships with local families
+
+
+
+ Partner With Nearle
+
-
- Partner With Nearle
-
-
- Talk to Our Team
-
+
- {/* Right Column: Benefit Grid Cardless (5 cols) */}
-
+
+
+
+
+
+
+
+
+
+ Success Story
+
+
+ + Kumar Provision Store +
++ Nearle helped us reach more customers in our area and manage orders effortlessly. +
+
+ {FEATURES.map((feature) => (
+
+
+ ))}
+
+
+
+
+
+ + {feature.title} +
++ {feature.desc} +
+
+
+
+
+
{/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
{/* 1. Large pale lavender partial circle (top-left) */}
@@ -47,7 +47,7 @@ export function Hero() {
{/* ─── TWO-COLUMN CONTENT GRID ─── */}
-
{BENEFITS.map((benefit) => (
-
);
}
-
-
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index da15d93..634de28 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -3,15 +3,15 @@ import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const PROOF_ITEMS = [
- { label: "1000+", text: "Verified Stores", icon: "store" },
+ { label: "Verified", text: "Local 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" },
+ { label: "Growing", text: "Customer Community", icon: "mood" },
+ { label: "Trusted", text: "Local Platform", icon: "star" },
];
export function Hero() {
return (
-
-
-
- {/* CURVED PROMO BANNER (Bottom CTA Block) */}
-
-
-
+
))}
+
- - {benefit.title} -
-- {benefit.desc} -
+ + {benefit} +
- {/* Decorative background vectors */}
-
-
-
- {/* Left copy column */}
-
-
-
- Piping Hot & Fresh
-
-
- Everything Nearby,
-
-
- {/* Right visual column */}
-
- Everything Nearby,
From Stores You Trust.
-
- - Groceries, medicines, food, and everyday essentials — all from your neighbourhood. -
- - Explore Stores Now - -
- {/* Soft background shape */}
-
-
-
-
-
-
+
{/* LEFT COLUMN: Editorial Typography & Copy */}
@@ -68,13 +68,13 @@ export function Hero() {
Explore Stores
Get the App
@@ -97,16 +97,18 @@ export function Hero() {
/>
- {/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
-
-
-
+
{/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
@@ -132,13 +134,14 @@ export function Hero() {
sizes="95px"
/>
+
+
@@ -157,20 +160,28 @@ export function Hero() {
{/* ─── BOTTOM PROOF STATS ROW ─── */}
-
- {PROOF_ITEMS.map((item) => (
-
-
-
-
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
index 64164d7..783716c 100644
--- a/src/components/home/HowItWorks.tsx
+++ b/src/components/home/HowItWorks.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const STEPS = [
@@ -7,6 +8,8 @@ const STEPS = [
desc: "See stores available around your neighbourhood.",
icon: "location_on",
color: "bg-primary/5 text-primary border-primary/10",
+ image: "/images/nearle-redesign/choose-area.webp",
+ alt: "Hand holding a smartphone with a local map and purple location pins",
},
{
num: "02",
@@ -14,6 +17,8 @@ const STEPS = [
desc: "Browse groceries, medicines, and daily essentials nearby.",
icon: "storefront",
color: "bg-secondary/5 text-secondary border-secondary/10",
+ image: "/images/nearle-redesign/pick-store.webp",
+ alt: "Customer selecting groceries from a nearby store shelf",
},
{
num: "03",
@@ -21,15 +26,17 @@ const STEPS = [
desc: "Order easily and get swift delivery from local partners.",
icon: "local_shipping",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+ image: "/images/nearle-redesign/delivery-doorstep.webp",
+ alt: "Nearle delivery partner handing a grocery bag to a customer",
},
];
export function HowItWorks() {
return (
-
+
+ {PROOF_ITEMS.map((item, idx) => (
+
- ))}
+ ))}
+
+ {/* Subtle vertical separator for desktop, except for the first item */}
+ {idx > 0 && (
+
+ )}
+
-
+
+
+
+ {item.label}
+
+
+ {item.text}
+
+
- {item.label}
-
-
- {item.text}
-
-
+
+
{/* Header Section */}
-
+
Simple Process
@@ -39,11 +46,11 @@ export function HowItWorks() {
{/* Steps Layout - Timeline style */}
-
+
{/* Connecting Line (Desktop Only) */}
-
- {/* Scoped CSS styles for precise layout enforcement */}
-
-
+
{/* Subtle background radial glows */}
{/* Inner container */}
-
+
@@ -69,4 +89,3 @@ export function HowItWorks() {
);
}
-
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx
index 67c0546..bada512 100644
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/src/components/home/HyperlocalFeatures.tsx
@@ -27,118 +27,77 @@ const FEATURES = [
export function HyperlocalFeatures() {
return (
-
{STEPS.map((step) => (
))}
{/* Icon Container with watermark number */}
@@ -54,12 +61,25 @@ export function HowItWorks() {
- - {step.title} -
-- {step.desc} -
+
+
+
+
+
+ + {step.title} +
++ {step.desc} +
+
-
- {/* Left Column: Visual Storytelling */}
-
+
+
- {/* Main Background Cover Image */}
-
-
-
- {/* Banner Label at Top */}
-
- Local Order
-
-
- {/* Main Store/Product Card (Middle floating) */}
- “Your favourite local store, now online.”
-
-
-
+
+ {/* Main Background Cover Image */}
+
+
-
-
-
- {/* Right Column: Dark Feature Panel */}
- Sri Krishna Groceries
-Fresh Harvest & Daily Needs
-
-
- {/* Small Delivery Status Card (Bottom floating) */}
-
+ Local Order
+
+
+ {/* Main Store/Product Card (Middle floating) */}
+ “Your favourite local store, now online.”
+
+
+
+ {/* Small Delivery Status Card (Bottom floating) */}
+
+
+
+
Sri Krishna Groceries
+Fresh Harvest & Daily Needs
+
+
+
+
+
+
+
+ Order Confirmed
+Your local store is preparing your order
+
-
-
-
-
-
-
- Order Confirmed
-Your local store is preparing your order
-
- {/* Internal ambient glows */}
-
-
-
-
-
+ {/* Right Column: Feature Panel directly on page background */}
+
+
Community & Trust
-
+
+
Built Around Your
- Neighbourhood
+ Neighbourhood
-
- Neighbourhood + Neighbourhood
+
Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
@@ -146,25 +105,25 @@ export function HyperlocalFeatures() {
{/* Vertical connector line */}
-
+
{FEATURES.map((item) => (
{/* Icon circle */}
-
+
{/* Onboarding Call to Action */}
+
{/* Divider Line above CTA Area */}
-
-
+
@@ -173,19 +132,19 @@ export function HyperlocalFeatures() {
+
{item.title}
-
+
{item.desc}
+
{/* Onboarding Call to Action */}
Get Nearle App
Learn How to Partner
-
+
+
{/* Header Section */}
+
);
}
diff --git a/src/components/home/WhyNearle.tsx b/src/components/home/WhyNearle.tsx
index f62b82e..b376f22 100644
--- a/src/components/home/WhyNearle.tsx
+++ b/src/components/home/WhyNearle.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const CARDS = [
@@ -6,33 +7,59 @@ const CARDS = [
desc: "Order from familiar neighbourhood stores near you.",
icon: "store",
color: "bg-primary/5 text-primary border-primary/10",
+ image: "/images/nearle-redesign/shops-you-know.webp",
+ alt: "Friendly local grocery shop owner inside a kirana store",
},
{
title: "Better Local Value",
desc: "Discover local offers and daily savings nearby.",
icon: "local_offer",
color: "bg-secondary/5 text-secondary border-secondary/10",
+ image: "/images/nearle-redesign/better-local-value.webp",
+ alt: "Fresh local vegetables and fruits with a local offers sign",
},
{
title: "Easy Reordering",
desc: "Save your favourite stores for quick reordering.",
icon: "history",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+ image: "/images/nearle-redesign/easy-reordering.webp",
+ alt: "Hand holding a smartphone with a simple grocery ordering app",
},
{
title: "Support Local Business",
desc: "Every order directly supports nearby shopkeepers.",
icon: "favorite",
color: "bg-rose-500/5 text-rose-700 border-rose-100",
+ image: "/images/nearle-redesign/support-local-business.webp",
+ alt: "Local shop owner and customer shaking hands inside a store",
},
];
export function WhyNearle() {
return (
-
-
diff --git a/src/components/home/StoreQRSection.tsx b/src/components/home/StoreQRSection.tsx
index c19293e..4b7779c 100644
--- a/src/components/home/StoreQRSection.tsx
+++ b/src/components/home/StoreQRSection.tsx
@@ -9,7 +9,9 @@ const FLOW_STEPS = [
export function StoreQRSection() {
return (
-
+
+
-
+
+
@@ -166,7 +149,7 @@ export function StoreQRSection() {
{/* Background ambient glowing details */}
@@ -51,45 +53,35 @@ export function StoreQRSection() {
))}
- {/* App Store Badges (Prominent White Buttons) */}
+ {/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
-
-
-
-
+
+
{/* Header Section */}
-
+
+
{/* Cards Grid */}
-
+
+
+
Our Philosophy
@@ -45,21 +72,30 @@ export function WhyNearle() {
+
{CARDS.map((card) => (
-
@@ -68,4 +104,3 @@ export function WhyNearle() {
);
}
-
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 9c6b3ff..562b9c0 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -21,7 +21,7 @@ export function Navbar() {
return (
-
))}
+
{card.title}
-+
{card.desc}
+
+
-