+
+
+ The Shift
+
+
+ Traditional commerce, reimagined by AI
+
+
+
+
+
+ );
+}
diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx
index a1e36af..e9351ea 100644
--- a/src/components/home/BusinessSection.tsx
+++ b/src/components/home/BusinessSection.tsx
@@ -11,7 +11,7 @@ const FEATURES = [
title: "AI Catalogue",
desc: "Turn your shelf into a live online catalogue with ProductLLM — no manual data entry.",
icon: "menu_book",
- visual: "/images/nearle-merchant/catalogue-ui.webp",
+ visual: "/images/stores/catalogue-ui.webp",
alt: "Clean grocery catalogue interface preview",
tone: "bg-primary/8 text-primary",
},
@@ -19,7 +19,7 @@ const FEATURES = [
title: "QR Ordering",
desc: "Let customers scan, browse, and place orders directly from your store.",
icon: "qr_code",
- visual: "/images/nearle-merchant/qr-stand.webp",
+ visual: "/images/stores/qr-stand.webp",
alt: "QR ordering stand on a local grocery store counter",
tone: "bg-secondary/8 text-secondary",
},
@@ -27,7 +27,7 @@ const FEATURES = [
title: "Local Discovery",
desc: "Get discovered by nearby customers searching for products you sell.",
icon: "location_on",
- visual: "/images/nearle-merchant/local-map.webp",
+ visual: "/images/stores/local-map.webp",
alt: "Local discovery map with purple pins and a store listing",
tone: "bg-[#de96f9]/10 text-primary",
},
@@ -35,7 +35,7 @@ const FEATURES = [
title: "Delivery Support",
desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
icon: "local_shipping",
- visual: "/images/nearle-merchant/delivery-support.webp",
+ visual: "/images/stores/delivery-support.webp",
alt: "Local delivery partner handing a grocery bag to a customer",
tone: "bg-rose-500/5 text-rose-600",
},
@@ -105,7 +105,7 @@ function LocalDiscoveryVisual() {
{/* Store Card (Right Side) */}
+ {/* Column headers */}
+
+ {ROWS.map((row) => (
+
+ {/* Traditional side */}
+
+ ))}
+
+
+
+
+ Learn More
+
+
+
+
+ Traditional Commerce
+
+
+ Nearle AI Commerce
+
+
+
+
+
+
+
+ {/* Nearle side */}
+
+
+
+
+ {row.nearle}
+
+
+
-
Kumar Provision Store
@@ -279,7 +279,7 @@ export function BusinessSection() { >
-
- {/* Hardware Buttons */}
-
-
-
-
-
- {/* Inner Black Bezel */}
-
-
-
- {/* Inner Screen */}
-
-
-
- {/* Dynamic Island */}
-
-
-
-
- {/* Status Bar */}
-
-
-
-
- 9:41
-
-
- {/* Map Visual Content */}
-
- {/* Signal */}
-
-
-
-
-
-
-
- {/* Wifi */}
-
- {/* Battery */}
-
-
-
-
-
-
-
- {[
- ["left-[17%] top-[30%]", "bg-primary"],
- ["right-[16%] top-[28%]", "bg-[#006D37]"],
- ["left-[20%] bottom-[33%]", "bg-[#006D37]"],
- ["right-[18%] bottom-[32%]", "bg-primary"],
- ["right-[35%] top-[20%]", "bg-primary"],
- ].map(([position, color]) => (
-
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Your Store
-
-
-
-
- Offers
-
-
- Shop
-
-
-
- );
- }
-
- if (type === "phone") {
- return (
-
-
-
-
- );
- }
-
- return (
-
-
- );
-}
-
export function HowItWorks() {
return (
+ <>
- {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
-
-
- {chip}
-
- ))}
-
-
-
@@ -316,7 +127,7 @@ export function HowItWorks() {
+
- {/* CARDS SECTION */}
-
+ {/* Voice waves sit behind everything, centred on the phone side */}
+
+ {/* MERCHANT JOURNEY — self-contained cinematic showcase (auto-plays in
+ place; no sticky pin, so no empty scroll-track). */}
+
- How It Works
+ Merchant Journey
-
- {STEPS.map((step) => (
-
-
- {step.num}
-
-
- ))}
-
-
-
+ - Build Your Neighbourhood Brand + From your shelf to a growing business
- Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes. + Eight steps, powered by AI. Join once, and Nearle turns your shelf into a + discoverable storefront while you stay at the centre of every order.
-
-
-
- - {step.title} -
-- {step.desc} -
-
-
-
+
+
+ );
+}
diff --git a/src/components/home/WhyAICommerceWins.tsx b/src/components/home/WhyAICommerceWins.tsx
index 33540d7..5f35ced 100644
--- a/src/components/home/WhyAICommerceWins.tsx
+++ b/src/components/home/WhyAICommerceWins.tsx
@@ -1,32 +1,46 @@
"use client";
import Link from "next/link";
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, fadeIn, staggerContainer, viewport } from "@/lib/animations";
const CARDS = [
{
- title: "Neighbourhood Trust",
- desc: "Every order is fulfilled by a real local shop your street already knows — not an anonymous warehouse.",
- icon: "handshake",
+ title: "Understands your intent",
+ desc: "Reads natural language and knows what you actually need.",
+ icon: "psychology",
color: "bg-primary/5 text-primary border-primary/10",
},
{
- title: "AI-Powered Catalog",
- desc: "ProductLLM turns a shelf into a live, shoppable catalog in minutes — so any store can go online without the busywork.",
- icon: "auto_awesome",
+ title: "Finds matching products",
+ desc: "Maps your intent to real items on your store’s shelves.",
+ icon: "inventory_2",
color: "bg-secondary/5 text-secondary border-secondary/10",
},
{
- title: "Offline-First Commerce",
- desc: "Billing and inventory keep working even when the network drops. Built for how neighbourhood stores really run.",
- icon: "wifi_off",
+ title: "Recommends alternatives",
+ desc: "Out of stock? It suggests the closest match in the store.",
+ icon: "autorenew",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
},
+ {
+ title: "Checks availability",
+ desc: "Confirms what’s in stock before you place the order.",
+ icon: "storefront",
+ color: "bg-secondary/5 text-secondary border-secondary/10",
+ },
+ {
+ title: "Helps you shop faster",
+ desc: "Fewer taps — everyday essentials in just seconds.",
+ icon: "bolt",
+ color: "bg-primary/5 text-primary border-primary/10",
+ },
];
export function WhyAICommerceWins() {
+ const reduce = useReducedMotion();
+
return (
+ {/* ─── LEFT: what it does ─── */}
+
+
+
+
+
+
+
+
+ Order products, discover nearby stores, and book trusted local services using
+ natural conversation.
+
+
+
+ {FEATURE_CHIPS.map((chip) => (
+
+
+ {chip.emoji}
+
+ {chip.label}
+
+ ))}
+
+
+
+
+
+
+
+ {/* ─── RIGHT: the live phone ─── */}
+
+ {/* Width-driven at every breakpoint — the 476/941 aspect ratio
+ derives the height, so the phone never collapses. */}
+
+
+
+
+ Just speak.
+
+
+
+ {/* text-balance keeps the mobile wrap as "Nearle handles /
+ the rest." instead of orphaning "rest." on its own line */}
+
+ Nearle handles the rest.
+
+
+
+ {/* soft purple glow anchoring the device */}
+
+
+
@@ -38,39 +52,43 @@ export function WhyAICommerceWins() {
viewport={viewport}
>
- AI Commerce
+ The Assistant
- {CARDS.map((card) => (
+ {CARDS.map((card, i) => (
-
diff --git a/src/components/home/WhyNearle.tsx b/src/components/home/WhyNearle.tsx
index 7a10005..158cd1d 100644
--- a/src/components/home/WhyNearle.tsx
+++ b/src/components/home/WhyNearle.tsx
@@ -7,36 +7,28 @@ import { fadeUp, fadeIn, staggerContainer, viewport } from "@/lib/animations";
const CARDS = [
{
- title: "Shops You Know",
- desc: "Order from familiar neighbourhood stores near you.",
- icon: "store",
+ title: "Shop Your Trusted Store",
+ desc: "Browse products from neighbourhood stores you already know and trust.",
+ icon: "storefront",
color: "bg-primary/5 text-primary border-primary/10",
- image: "/images/nearle-redesign/shops-you-know.webp",
+ image: "/images/illustrations/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",
+ title: "AI Assisted Shopping",
+ desc: "Search naturally. Nearle AI understands what you’re looking for and recommends relevant products.",
+ icon: "auto_awesome",
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
- image: "/images/nearle-redesign/easy-reordering.webp",
+ image: "/images/illustrations/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",
+ title: "Local Delivery",
+ desc: "Orders go directly to the merchant and are delivered by Nearle riders.",
+ icon: "two_wheeler",
+ color: "bg-secondary/5 text-secondary border-secondary/10",
+ image: "/images/illustrations/support-local-business.webp",
+ alt: "Local shop owner handing a packed order to a delivery rider",
},
];
@@ -54,7 +46,7 @@ export function WhyNearle() {
>
+ {steps.map((label, i) => {
+ const done = i < activeStep;
+ const active = i === activeStep;
+ return (
+
+ );
+}
diff --git a/src/components/home/experience/StoreCanvas.tsx b/src/components/home/experience/StoreCanvas.tsx
new file mode 100644
index 0000000..74e6082
--- /dev/null
+++ b/src/components/home/experience/StoreCanvas.tsx
@@ -0,0 +1,314 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { AIThinking } from "./AIThinking";
+import {
+ AI_STEPS,
+ FULFILMENT_STEPS,
+ type JourneyStage,
+ type StoreJourney,
+} from "@/hooks/useStoreJourney";
+
+const screenEase = [0.22, 1, 0.36, 1] as [number, number, number, number];
+// Slow, smooth screen changes (Apple/Linear-style) instead of snappy cuts.
+const screenMotion = {
+ initial: { opacity: 0, y: 14, scale: 0.985 },
+ animate: { opacity: 1, y: 0, scale: 1 },
+ exit: { opacity: 0, y: -12, scale: 0.99 },
+ transition: { duration: 0.65, ease: screenEase },
+};
+
+// Which visual screen a stage maps to (enter-store + search share one screen so
+// the transition into typing stays seamless; fulfilment + done share the flow).
+function screenKey(stage: JourneyStage): string {
+ if (stage === "enter-store" || stage === "search") return "storefront";
+ if (stage === "done") return "fulfilment";
+ return stage;
+}
+
+// The device frame whose inner screen swaps as the journey advances.
+export function StoreCanvas({ journey }: { journey: StoreJourney }) {
+ const {
+ stage,
+ stores,
+ store,
+ intent,
+ recommendation,
+ typed,
+ thinkingStep,
+ fulfilStep,
+ reduced,
+ selectStore,
+ } = journey;
+
+ return (
+ = {
+ "choose-store": {
+ title: "Choose your store",
+ body: "Start with a neighbourhood shop you already know and trust — added once with a quick QR scan.",
+ },
+ "enter-store": {
+ title: "Step inside",
+ body: "Walk into your store digitally. The same shelves and the same shopkeeper — now searchable.",
+ },
+ search: {
+ title: "Say what you need",
+ body: "Search in plain language. No need to know exact brands or product names.",
+ },
+ thinking: {
+ title: "Nearle AI understands",
+ body: "AI reads your intent, finds matching products, and checks what’s actually in stock.",
+ },
+ results: {
+ title: "Picks from your store",
+ body: "Every recommendation comes from the store you chose — never an anonymous warehouse.",
+ },
+ cart: {
+ title: "One tap to order",
+ body: "Build your basket and send it straight to the merchant — no middleman.",
+ },
+ fulfilment: {
+ title: "Merchant packs, Nearle delivers",
+ body: "Your shopkeeper packs the order and a Nearle rider brings it to your door.",
+ },
+ done: {
+ title: "Delivered by your neighbourhood",
+ body: "Your shopkeeper packed the order and a Nearle rider brought it home.",
+ },
+};
+
+export function StoreJourney() {
+ const journey = useStoreJourney();
+ const { stage, intent, intents, pickIntent, replay } = journey;
+
+ const caption = CAPTIONS[stage];
+ const activeIndex = stage === "done" ? PROGRESS.length - 1 : PROGRESS.indexOf(stage);
+
+ return (
+
+
+ );
+}
diff --git a/src/components/home/merchant/MerchantJourney.tsx b/src/components/home/merchant/MerchantJourney.tsx
new file mode 100644
index 0000000..47e05c6
--- /dev/null
+++ b/src/components/home/merchant/MerchantJourney.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { useMerchantJourney, type MerchantStep } from "@/hooks/useMerchantJourney";
+import { MERCHANT_SCENES } from "./illustrations";
+import { MerchantPhone } from "./MerchantPhone";
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
+// The flagship merchant story as a self-contained cinematic showcase — NO sticky
+// pin, no tall scroll-track, so there is no empty space to scroll through. The
+// moment it enters view it auto-plays through the eight beats: the illustration
+// cross-dissolves (each scene re-mounts, so its entrance animation replays), the
+// live phone updates, the caption changes and the progress fills. Every chapter
+// node is clickable to jump; reduced-motion users drive it manually.
+export function MerchantJourney() {
+ const journey = useMerchantJourney();
+ const { steps, index, step, reduced, atEnd, start, goTo, next, prev, replay } = journey;
+ const N = steps.length;
+ const fillPct = (index / (N - 1)) * 100;
+
+ return (
+ start()}
+ >
+ {/* Caption — compact, centred */}
+
+ );
+}
+
+// Framed hero canvas — the illustration is the star. Each beat re-mounts, so the
+// scene's own entrance animation replays and it cross-dissolves into place.
+function Canvas({ step, reduced }: { step: MerchantStep; reduced: boolean }) {
+ const Scene = MERCHANT_SCENES[step.id];
+ return (
+ React.ReactElement> = {
+ join: () => (
+ <>
+
+
+
+
+ );
+}
+
+// 02 — Store Digitized: a phone, a sweeping QR scan line, then a success tick.
+function QrScene({ reduced }: SceneProps) {
+ const cells = [
+ [0, 0], [2, 0], [4, 0], [0, 2], [3, 2], [4, 2], [1, 3], [0, 4], [2, 4], [4, 4],
+ ];
+ return (
+
+
+
+ {/* scan line */}
+ {!reduced && (
+
+
+
+ );
+}
+
+// 03 — Products Added: product tiles slide up into the phone.
+function ProductsScene({ reduced }: SceneProps) {
+ const tiles = [
+ { y: 96, c: C.accent },
+ { y: 138, c: C.primaryLt },
+ { y: 180, c: "#F5B54B" },
+ ];
+ return (
+
+
+
+
+ {tiles.map((t, i) => (
+
+
+ ))}
+
+ {/* AI + badge */}
+
+
+
+ );
+}
+
+// 04 — Customers Browse: a search bar with an expanding pulse + cursor tap.
+function BrowseScene({ reduced }: SceneProps) {
+ return (
+
+
+
+ ))}
+ {/* cursor */}
+
+
+
+ );
+}
+
+// 05 — Orders Received: a live order notification pops onto the dashboard.
+function OrdersScene({ reduced }: SceneProps) {
+ return (
+
+ {/* dashboard */}
+
+
+ ))}
+ {/* toast */}
+
+
+
+ );
+}
+
+// 06 — Products Packed: items drop into an open box.
+function PackScene({ reduced }: SceneProps) {
+ const items = [
+ { x: 150, c: C.accent, d: 0.2 },
+ { x: 178, c: C.primaryLt, d: 0.5 },
+ { x: 168, c: "#F5B54B", d: 0.8 },
+ ];
+ return (
+
+ {/* back flaps */}
+
+ {items.map((it, i) => (
+
+ {/* box front */}
+
+ );
+}
+
+// 07 — Nearle Rider Delivers: a scooter nudges forward with motion lines.
+function RiderScene({ reduced }: SceneProps) {
+ return (
+
+ {!reduced &&
+ [0, 1, 2].map((i) => (
+
+ {/* delivery box */}
+
+
+ );
+}
+
+// 08 — Business Grows: bars rise and a trend arrow sweeps up.
+function GrowthScene({ reduced }: SceneProps) {
+ const bars = [
+ { x: 108, h: 40 },
+ { x: 148, h: 66 },
+ { x: 188, h: 92 },
+ { x: 228, h: 120 },
+ ];
+ return (
+
+
+ );
+}
+
+export const MERCHANT_SCENES: Record React.ReactElement> = {
+ join: StorefrontScene,
+ digitize: QrScene,
+ products: ProductsScene,
+ browse: BrowseScene,
+ orders: OrdersScene,
+ packed: PackScene,
+ rider: RiderScene,
+ grows: GrowthScene,
+};
diff --git a/src/components/home/voice/FloatingRequestCards.tsx b/src/components/home/voice/FloatingRequestCards.tsx
new file mode 100644
index 0000000..c682b91
--- /dev/null
+++ b/src/components/home/voice/FloatingRequestCards.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+// The kinds of things people actually say to Nearle — products *and* local
+// services.
+//
+// Positions are percentages of the phone box, and every card is placed so it
+// never covers the live screen — the demo always stays readable:
+// · xl+ : three cards drift in the wide gutter left of the phone, two sit
+// clear above and below it.
+// · below xl there is no gutter, so the visible cards sit above and below
+// the device instead of beside it.
+const CARDS = [
+ {
+ emoji: "🥛",
+ text: "Order two litres of milk",
+ pos: "left-[-4%] top-[-7%] xl:left-[-50%] xl:top-[12%]",
+ drift: { y: [-9, 9, -9], x: [0, 5, 0] },
+ duration: 15,
+ delay: 0,
+ always: true,
+ },
+ {
+ emoji: "💊",
+ text: "Order medicine for headache",
+ pos: "right-[-4%] bottom-[-6%] xl:right-[-6%] xl:bottom-[-7%]",
+ drift: { y: [-10, 7, -10], x: [0, -5, 0] },
+ duration: 16,
+ delay: 2.1,
+ always: true,
+ },
+ {
+ emoji: "🍅",
+ text: "Need ingredients for biryani",
+ pos: "right-[-6%] top-[-9%]",
+ drift: { y: [8, -8, 8], x: [0, -6, 0] },
+ duration: 18,
+ delay: 1.4,
+ always: false,
+ },
+ {
+ emoji: "🔧",
+ text: "Book an electrician tomorrow",
+ pos: "left-[-56%] top-[45%]",
+ drift: { y: [7, -10, 7], x: [0, 6, 0] },
+ duration: 20,
+ delay: 0.7,
+ always: false,
+ },
+ {
+ emoji: "🥣",
+ text: "Need breakfast for four",
+ pos: "left-[-52%] top-[77%]",
+ drift: { y: [9, -7, 9], x: [0, 4, 0] },
+ duration: 19,
+ delay: 1,
+ always: false,
+ },
+];
+
+// Soft glass cards drifting around the phone. Very slow, very quiet — they
+// should read as ambient context, never as animation.
+export function FloatingRequestCards() {
+ const reduced = useReducedMotion();
+
+ return (
+
+ );
+}
diff --git a/src/components/home/voice/PhoneStage.tsx b/src/components/home/voice/PhoneStage.tsx
new file mode 100644
index 0000000..c87a5d3
--- /dev/null
+++ b/src/components/home/voice/PhoneStage.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { motion, useInView } from "framer-motion";
+import { VoiceScreen, SCREEN_W, SCREEN_H } from "./VoiceScreen";
+import { useVoiceJourney } from "@/hooks/useVoiceJourney";
+
+// Geometry read straight off the provided SVG (viewBox 0 0 476 941):
+// screen rect x42 y8 w391 h826 rx57. The frame artwork never changes — only
+// what we render inside this box does.
+const SCREEN = {
+ left: `${((42 / 476) * 100).toFixed(4)}%`,
+ top: `${((8 / 941) * 100).toFixed(4)}%`,
+ width: `${((391 / 476) * 100).toFixed(4)}%`,
+ height: `${((826 / 941) * 100).toFixed(4)}%`,
+ // rx57 expressed against the screen's own box: 57/391 wide, 57/826 tall
+ borderRadius: `${((57 / 391) * 100).toFixed(2)}% / ${((57 / 826) * 100).toFixed(2)}%`,
+} as const;
+
+export function PhoneStage({ className = "" }: { className?: string }) {
+ const journey = useVoiceJourney();
+ const { start, stop, reduced } = journey;
+
+ const rootRef = useRef(null);
+ const screenRef = useRef(null);
+ const [scale, setScale] = useState(0);
+
+ // The demo only runs while it is on screen — no timers burning in the
+ // background once a visitor has scrolled past the hero.
+ const inView = useInView(rootRef, { amount: 0.25 });
+ useEffect(() => {
+ if (inView) start();
+ else stop();
+ }, [inView, start, stop]);
+
+ // The screen UI is authored at the SVG's own 391×826 units, then scaled to
+ // whatever size the phone renders at. Same layout everywhere, every
+ // breakpoint — scaling only.
+ useLayoutEffect(() => {
+ const el = screenRef.current;
+ if (!el) return;
+ const measure = () => setScale(el.clientWidth / SCREEN_W);
+ measure();
+ const ro = new ResizeObserver(measure);
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, []);
+
+ return (
+
- Why AI Commerce Wins + What Nearle AI Does
- Nearle isn’t another delivery app. It’s the AI layer that brings - neighbourhood stores online — without replacing them. + The store stays the hero. Nearle AI is the quiet assistant that helps you + find what you need inside it — faster.
-
-
+
{card.title}
-+
{card.desc}
- Why Nearle Feels Different + Why Nearle
- Nearle brings the convenience of an app to the stores you already know and trust. + The store you trust, the assistant that helps you shop, and delivery that keeps + the merchant at the centre.
{/* Cards Grid */}
+
+ {done ? (
+
+ ) : active ? (
+
+ );
+ })}
+
+ {/* Ambient brand glow */}
+
+
+
+ {/* Dynamic island */}
+
+
+ );
+}
+
+const STORE_CATEGORIES = [
+ { name: "Groceries", icon: "shopping_basket" },
+ { name: "Dairy", icon: "egg" },
+ { name: "Snacks", icon: "cookie" },
+ { name: "Household", icon: "cleaning_services" },
+ { name: "Personal", icon: "self_care" },
+ { name: "More", icon: "grid_view" },
+];
+
+function StoreHeader({ name, area }: { name: string; area: string }) {
+ return (
+
+
+
+
+
+ {/* Screen */}
+
+
+ {screenKey(stage) === "choose-store" && (
+
+
+ )}
+
+ {screenKey(stage) === "storefront" && (
+
+
+ )}
+
+ {screenKey(stage) === "thinking" && (
+
+
+ )}
+
+ {screenKey(stage) === "results" && recommendation && (
+
+
+ )}
+
+ {screenKey(stage) === "cart" && recommendation && (
+
+
+ )}
+
+ {screenKey(stage) === "fulfilment" && (
+
+
+ )}
+
+
+
+
+
+
+ My Stores
+Trusted shops you’ve added
+
+ {stores.map((s) => {
+ const active = s.id === store.id;
+ return (
+
+ );
+ })}
+
+
+
+ {/* Categories */}
+
+
+
+
+ + Shop by aisle +
+
+ {STORE_CATEGORIES.map((c) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {recommendation.products.map((p, i) => (
+
+
+ {p.emoji}
+
+
+ {p.name}
+
+ ₹{p.price}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ + {recommendation.intent.bundleName} +
++ {recommendation.itemCount} items · {store.name} +
+ +
+ Total
+
+ ₹{recommendation.total}
+
+
+
+
+
+
+ {FULFILMENT_STEPS.map((step, i) => {
+ const done = i < fulfilStep;
+ const active = i === fulfilStep;
+ return (
+
+
+
+ {done ? (
+
+ );
+ })}
+
+
+ );
+}
diff --git a/src/components/home/experience/StoreJourney.tsx b/src/components/home/experience/StoreJourney.tsx
new file mode 100644
index 0000000..c39fcbd
--- /dev/null
+++ b/src/components/home/experience/StoreJourney.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
+import { StoreCanvas } from "./StoreCanvas";
+import {
+ type JourneyStage,
+ STAGE_ORDER,
+ useStoreJourney,
+} from "@/hooks/useStoreJourney";
+
+// The seven progress beats (fulfilment + done collapse into one visible step).
+const PROGRESS = STAGE_ORDER.filter((s) => s !== "done");
+
+const CAPTIONS: Record
+
+
+ {name}
+
+
+ {/* Header */}
+ journey.start()}
+ className="mx-auto max-w-[760px] text-center"
+ >
+
+
+
+ Your Neighbourhood Store, Now Digital
+
+
+ Browse products from your trusted nearby stores anytime. Nearle AI helps you discover
+ products faster — without changing how your favourite store works.
+
+
+
+ {/* Interactive journey */}
+
+ Your trusted neighbourhood store, now in your pocket.{" "}
+
+ Powered by AI, fulfilled by local merchants, delivered by Nearle.
+
+
+
+
+ {/* LEFT: caption + progress + intent chips */}
+
+ {/* Progress bar */}
+
+
+ {/* Stage caption */}
+
+
+ {/* RIGHT: the store canvas */}
+
+
+
+
+ {/* Closing product message */}
+
+
+
+
+
+
+
+ {/* Intent chips — drive the demo */}
+ + Step {activeIndex + 1} of {PROGRESS.length} +
++ {caption.title} +
++ {caption.body} +
+
+
+
+ {/* Replay appears once the story completes */}
+
+
+ {intents.map((it) => {
+ const active = it.id === intent.id;
+ return (
+
+ );
+ })}
+
+
+
+ {stage === "done" && (
+
+
+ )}
+
+
+
+
+ Chapter {index + 1} / {N}
+
+
+
+ {/* Hero stage — illustration + live phone, centred and dominant */}
+
+
+
+
+
+
+ + {step.title} +
++ {step.desc} +
+
+
+
+ {/* Chapter rail — filling line, active beat highlighted, clickable */}
+
+
+
+
+
+
+
+
+ {/* Controls — manual stepping + replay once the arc has played */}
+
+
+ -
+ {steps.map((s, i) => {
+ const active = i === index;
+ const done = i < index;
+ return (
+
- + + + ); + })} +
+
+
+
+
+ {atEnd && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/home/merchant/MerchantPhone.tsx b/src/components/home/merchant/MerchantPhone.tsx
new file mode 100644
index 0000000..aadeaf6
--- /dev/null
+++ b/src/components/home/merchant/MerchantPhone.tsx
@@ -0,0 +1,235 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import type { MerchantStep, MerchantStageId } from "@/hooks/useMerchantJourney";
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+const screen = {
+ initial: { opacity: 0, y: 12 },
+ animate: { opacity: 1, y: 0 },
+ exit: { opacity: 0, y: -12 },
+ transition: { duration: 0.55, ease: EASE },
+};
+
+// The merchant-side companion device. Its screen mirrors the active stage, so
+// the illustration and the "real app" always tell the same beat of the story.
+export function MerchantPhone({ step, reduced }: { step: MerchantStep; reduced: boolean }) {
+ return (
+
+
+
+
+
+ );
+}
+
+function Header({ title, sub }: { title: string; sub?: string }) {
+ return (
+
+
+
+
+
+
+
+ {SCREENS[step.id]()}
+
+
+
+
+
+ );
+}
+
+function Line({ w = "full", tone = "muted" }: { w?: string; tone?: "muted" | "primary" }) {
+ return (
+
+ );
+}
+
+const SCREENS: Record
+ nearle
+ Merchant
+
+ {title}
+ {sub &&{sub}
} +
+ {["Owner name", "Shop name", "Neighbourhood"].map((f) => (
+
+
+ ),
+ digitize: () => (
+ <>
+
+
+ ))}
+ {f}
+
+
+
+
+
+ ),
+ products: () => (
+ <>
+
+
+ Kumar Super Market
++ Your digital storefront is now searchable nearby. +
+ + QR verified + +
+ {[
+ ["🥛", "Aavin Milk"],
+ ["🍞", "Bread"],
+ ["🧈", "Butter"],
+ ["☕", "Coffee"],
+ ].map(([e, n]) => (
+
+
+
+ ))}
+ {e}
+ {n}
+
+
+
+ ),
+ browse: () => (
+ <>
+
+
+
+
+
+ {["🥛 Aavin Milk", "🍞 Sandwich Bread", "🧈 Table Butter"].map((r) => (
+
+
+ {r}
+
+ ))}
+ From your store · 700 m away
+ + ), + orders: () => ( + <> +
+
+
+
+
+
+
+
+ {["Milk × 1", "Bread × 1", "Eggs × 1"].map((i) => (
+
+
+ {i}
+ ✓
+
+ ))}
+
+ Total
+ ₹165
+
+
+ Accept order
+
+
+ ),
+ packed: () => (
+ <>
+
+ {[["Aavin Milk", true], ["Sandwich Bread", true], ["Farm Eggs", false]].map(([n, done]) => (
+
+
+
+
+ ))}
+
+
+
+ ),
+ rider: () => (
+ <>
+
+
+
+
+
+
+
+ ),
+ grows: () => (
+ <>
+
+ Arriving in 8 min
+ On the way
+
+
+
+ ₹48,200
+
+
+ {[34, 46, 40, 58, 52, 70, 88].map((h, i) => (
+
+ ))}
+
+
+ ),
+};
diff --git a/src/components/home/merchant/illustrations.tsx b/src/components/home/merchant/illustrations.tsx
new file mode 100644
index 0000000..4ed7180
--- /dev/null
+++ b/src/components/home/merchant/illustrations.tsx
@@ -0,0 +1,377 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { MerchantStageId } from "@/hooks/useMerchantJourney";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// One shared 2.5D illustration system for the Merchant Journey.
+// Every scene sits in the same framed panel, on the same ground shadow, using
+// the same palette / stroke width / lighting — so the eight feel like one set.
+// Each scene mounts fresh when its stage becomes active (AnimatePresence key),
+// so entrance animations simply play on mount. `reduced` freezes all motion.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const EASE = [0.22, 1, 0.36, 1] as const;
+
+const C = {
+ ink: "#2A0A38", // strokes (soft brand-dark)
+ primary: "#65149A",
+ primaryLt: "#7C3AED",
+ accent: "#de96f9",
+ petal: "#F3E8F6",
+ white: "#ffffff",
+ green: "#16A34A",
+};
+
+const stroke = {
+ stroke: C.ink,
+ strokeWidth: 3,
+ strokeLinejoin: "round" as const,
+ strokeLinecap: "round" as const,
+};
+
+type SceneProps = { reduced?: boolean };
+
+function Scene({ children }: { children: React.ReactNode }) {
+ return (
+
+ );
+}
+
+// 01 — Merchant Joins: a shop whose hanging sign gently swings.
+function StorefrontScene({ reduced }: SceneProps) {
+ return (
+
+ {/* Breathing ground shadow — a separate blurred ellipse so nothing
+ animates box-shadow (which repaints every frame). */}
+
+
+ {/* Float — vertical drift */}
+
+ {/* Sway — slow rotateY on a deliberately different period, so the two
+ never sync into one obvious loop */}
+
+ {/* Layer 0 — the provided iPhone SVG, verbatim and permanent */}
+
+
+ {/* Layer 1 — the live app, clipped exactly to the screen rect */}
+
+
+
+ );
+}
diff --git a/src/components/home/voice/VoiceScreen.tsx b/src/components/home/voice/VoiceScreen.tsx
new file mode 100644
index 0000000..24a8a90
--- /dev/null
+++ b/src/components/home/voice/VoiceScreen.tsx
@@ -0,0 +1,527 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { MaterialIcon } from "@/components/ui/MaterialIcon";
+import { AIThinking } from "@/components/home/experience/AIThinking";
+import {
+ AI_STEPS,
+ FULFILMENT_STEPS,
+ SERVICE_FULFILMENT_STEPS,
+ type VoiceJourney,
+} from "@/hooks/useVoiceJourney";
+
+// This component is authored in the provided SVG's own screen units — a
+// 391 × 826 box — and PhoneStage scales it to whatever size the phone renders
+// at. So the layout is pixel-identical on every breakpoint: responsive scaling
+// only, never a different (or simpler) UI.
+export const SCREEN_W = 391;
+export const SCREEN_H = 826;
+
+// The Nearle icon inside the provided SVG: x92 y622 45×45, minus the screen's
+// own origin (42, 8). We overlay a matching icon here so it can compress under
+// the tap and the app can grow out of exactly the right spot.
+const ICON = { x: 50, y: 614, size: 45 } as const;
+const ICON_CX = ICON.x + ICON.size / 2; // 72.5
+const ICON_CY = ICON.y + ICON.size / 2; // 636.5
+// Where the app expands from, as a transform-origin on the 391×826 screen.
+const LAUNCH_ORIGIN = `${((ICON_CX / SCREEN_W) * 100).toFixed(2)}% ${((ICON_CY / SCREEN_H) * 100).toFixed(2)}%`;
+
+// Clear of the notch (which ends 30px into the screen) and the status bar.
+const SAFE_TOP = 56;
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
+// Panels are stacked absolutely and crossfade, so one screen is always fully
+// covering the other — the app never flashes empty between beats.
+const screenMotion = {
+ initial: { opacity: 0, y: 12 },
+ animate: { opacity: 1, y: 0, transition: { duration: 0.45, ease: EASE, delay: 0.12 } },
+ exit: { opacity: 0, y: -8, transition: { duration: 0.28, ease: "easeIn" as const } },
+};
+
+export function VoiceScreen({ journey }: { journey: VoiceJourney }) {
+ const {
+ stage,
+ request,
+ spokenWords,
+ thinkingStep,
+ fulfilStep,
+ reduced,
+ } = journey;
+
+ // The app mounts on "launch" and never unmounts again — the loop returns to
+ // "listening", not to the home screen — so the iOS expand plays exactly once.
+ const onHomeScreen = stage === "home" || stage === "tap";
+ const words = request.transcript.split(" ");
+ const isBooking = request.domain === "services";
+ // The request bubble appears the moment the AI takes over and stays put.
+ const showRequest =
+ stage !== "launch" && !onHomeScreen && stage !== "listening" && stage !== "speaking";
+ const fulfilmentSteps = isBooking ? SERVICE_FULFILMENT_STEPS : FULFILMENT_STEPS;
+ // On the final beat every fulfilment step is done — nothing left pulsing.
+ const fulfilDone = stage === "delivered" ? fulfilmentSteps.length : fulfilStep;
+
+ return (
+
+ {scale > 0 && (
+
+
+ {/* Layer 2 — notch + status bar, extracted from the same SVG, so the
+ app sits *under* the notch exactly like real iOS */}
+
+
+
+ )}
+
+ {/* ── iOS home screen: the provided SVG shows through. We only overlay a
+ matching Nearle icon so it can react to the tap. ── */}
+ {onHomeScreen && (
+ <>
+
+
+ N
+
+ {/* the icon's own soft highlight, matching the SVG artwork */}
+
+
+
+ {/* Apple-style touch indicator — a finger tap, never a desktop cursor */}
+ {!reduced && (
+
+ {/* ambient purple bloom */}
+
+
+ {/* App header */}
+
+
+ )}
+
+ {/* Screen body */}
+
+ )}
+
+ );
+}
+
+// The listening orb: a soft purple core with breathing rings.
+function MicOrb({ reduced, active }: { reduced: boolean; active: boolean }) {
+ return (
+
+
+
+ {/* What the customer said, kept on screen for the rest of the flow —
+ so the link between the sentence and everything the AI does with
+ it stays visible the whole way to the door. */}
+ {showRequest && (
+
+
+ N
+
+ Nearle
+
+
+
+
+
+ {request.transcript}
+
+
+ {(stage === "launch" || stage === "listening" || stage === "speaking") && (
+
+
+ )}
+
+ {stage === "thinking" && (
+
+
+ )}
+
+ {stage === "merchant" && (
+
+
+
+
+ )}
+
+ {stage === "order" && (
+
+
+
+
+ )}
+
+ {stage === "confirmed" && (
+
+
+ {!reduced && (
+
+
+ )}
+
+ {(stage === "fulfilment" || stage === "delivered") && (
+
+
+ )}
+
+
+
+ {/* Persistent mic bar — the app is always one sentence away */}
+ + {stage === "speaking" ? "Listening" : "Listening…"} +
+ + {/* The spoken request, landing word by word */} +
+ {stage === "speaking" ? (
+
+
+
+ {words.map((w, i) => (
+
+ Speak naturally.
+
+ No apps, no searching.
+
+
+
+
+
+
+
+
+
+ + {request.merchant.name} +
++ {request.merchant.area} · {request.merchant.distance} +
+
+
+
+ Open now
+
+
+
+
+
+
+
+
+ {request.items.map((item, i) => (
+
+
+ {item.emoji}
+
+
+
+ {item.name}
+
+
+
+ {item.qty}
+
+
+
+ {item.status}
+
+
+
+ ₹{item.price}
+
+ ))}
+
+
+
+
+
+ {/* Confirm auto-taps at the end of this beat */}
+
+
+ Total
+
+
+ ₹{request.total}
+
+
+
+
+ + {isBooking ? "Booking confirmed" : "Order confirmed"} +
++ Sent to {request.merchant.name} +
+
+
+ {/* connector rail */}
+
+ {fulfilmentSteps.map((step, i) => {
+ const done = i < fulfilDone;
+ const active = i === fulfilDone;
+ return (
+
+
+
+
+ {done ? (
+
+ );
+ })}
+
+
+ + {isBooking ? "Professional from" : "Packed by"} +
++ {request.merchant.name} +
+
+
+
+
+
+
+ {!reduced &&
+ [0, 1, 2].map((i) => (
+
+
+
+ );
+}
+
+// Live voice bars. Heights are fixed per bar so the pattern reads as a real
+// waveform rather than random noise; only scaleY animates.
+const BARS = [0.35, 0.6, 0.85, 1, 0.7, 0.45, 0.8, 1, 0.65, 0.4, 0.75, 0.55, 0.3];
+
+function Waveform({ reduced, active }: { reduced: boolean; active: boolean }) {
+ return (
+
+ {BARS.map((h, i) => (
+
+ );
+}
diff --git a/src/components/home/voice/VoiceWaves.tsx b/src/components/home/voice/VoiceWaves.tsx
new file mode 100644
index 0000000..9ddb14b
--- /dev/null
+++ b/src/components/home/voice/VoiceWaves.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+
+// A 2400-wide path holding six 400px periods. Sliding it exactly -1200
+// (three periods) loops seamlessly, so the drift never visibly restarts.
+const WAVE =
+ "M0 150 Q100 80 200 150 T400 150 T600 150 T800 150 T1000 150 T1200 150 T1400 150 T1600 150 T1800 150 T2000 150 T2200 150 T2400 150";
+
+const LAYERS = [
+ { y: 0, scaleY: 1, opacity: 0.18, duration: 12, width: 2 },
+ { y: 26, scaleY: 0.62, opacity: 0.13, duration: 16, width: 1.5 },
+ { y: -22, scaleY: 1.35, opacity: 0.1, duration: 21, width: 1.5 },
+];
+
+// Elegant voice waves behind the phone. Purely decorative, low opacity, and
+// animated on transform only — it should reinforce "this is voice" without
+// ever pulling attention off the screen.
+export function VoiceWaves({ className = "" }: { className?: string }) {
+ const reduced = useReducedMotion();
+
+ return (
+
+ );
+}
diff --git a/src/components/layout/PremiumNavbar.tsx b/src/components/navbar/PremiumNavbar.tsx
similarity index 99%
rename from src/components/layout/PremiumNavbar.tsx
rename to src/components/navbar/PremiumNavbar.tsx
index 945d89a..591dcf8 100644
--- a/src/components/layout/PremiumNavbar.tsx
+++ b/src/components/navbar/PremiumNavbar.tsx
@@ -159,7 +159,7 @@ export function PremiumNavbar() {
aria-label="Nearle Home"
>