diff --git a/src/components/home/AICommerceIntro.tsx b/src/components/home/AICommerceIntro.tsx index d88b224..7c8de68 100644 --- a/src/components/home/AICommerceIntro.tsx +++ b/src/components/home/AICommerceIntro.tsx @@ -102,30 +102,30 @@ function InstantFulfillmentSVG({ reduce = false }: { reduce?: boolean }) { const STEPS = [ { step: "01", - title: "Natural Intent", - desc: "Tell Nearle what you need in plain Tamil or English. AI understands local store products, brands, and quantities without manual searching.", + title: "Just Ask", + desc: "Tell Nearle what you need in your own words — in Tamil or English. No searching, no scrolling through endless lists.", icon: "psychology", - badge: "Voice & Text AI", + badge: "Voice or Text", iconBg: "bg-primary/10 text-primary border-primary/20", badgeStyle: "bg-primary/10 text-primary border-primary/20", renderSVG: (reduce: boolean) => , }, { step: "02", - title: "Live Local Discovery", - desc: "AI instantly checks live stock and pricing at verified neighbourhood stores right around your street to find exact matches.", + title: "We Find It Nearby", + desc: "Nearle checks what's on the shelves at trusted shops around your street, so you get exactly what you asked for.", icon: "storefront", - badge: "Real-Time Stock", + badge: "In Stock Nearby", iconBg: "bg-secondary/10 text-secondary border-secondary/20", badgeStyle: "bg-secondary/10 text-secondary border-secondary/20", renderSVG: (reduce: boolean) => , }, { step: "03", - title: "Instant Fulfillment", - desc: "Confirms your order, alerts the local shopkeeper to pack, and dispatches a Nearle rider for fast doorstep delivery — all in 1 chat.", + title: "Delivered to You", + desc: "Confirm your order and the shopkeeper packs it while a Nearle rider brings it to your door — all in one chat.", icon: "bolt", - badge: "1-Tap Fulfillment", + badge: "To Your Door", iconBg: "bg-[#7C3AED]/10 text-[#7C3AED] border-[#7C3AED]/20", badgeStyle: "bg-[#7C3AED]/10 text-[#7C3AED] border-[#7C3AED]/20", renderSVG: (reduce: boolean) => , @@ -134,8 +134,8 @@ const STEPS = [ const HIGHLIGHTS = [ { - title: "Zero App Switching", - sub: "Everything in 1 conversation", + title: "No App Switching", + sub: "Everything in one chat", icon: "forum", iconColor: "bg-primary/10 text-primary", }, @@ -146,14 +146,14 @@ const HIGHLIGHTS = [ iconColor: "bg-secondary/10 text-secondary", }, { - title: "Live Inventory", - sub: "Real-time store stock", + title: "Real Availability", + sub: "See what's in stock nearby", icon: "inventory_2", iconColor: "bg-blue-600/10 text-blue-600", }, { - title: "Fast Rider Delivery", - sub: "Direct doorstep fulfillment", + title: "Fast Local Delivery", + sub: "Straight to your door", icon: "local_shipping", iconColor: "bg-[#7C3AED]/10 text-[#7C3AED]", }, @@ -181,22 +181,22 @@ export function AICommerceIntro() { variants={fadeUp} className="inline-flex items-center rounded-full bg-[#6330D6]/[0.08] px-3.5 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]" > - Nearle AI Engine + Powered by Nearle AI - + - Neighbourhood Shopping, Reimagined by AI + Just Tell Us What You Need - Instead of searching across multiple apps and comparing items manually, simply tell Nearle what you need. AI handles discovery, stock checking, and ordering — all in one conversation. + No more hopping between apps or scrolling endless lists. Tell Nearle what you need, and we’ll find it at a shop nearby, make sure it’s in stock, and get it on its way — all in one chat. @@ -217,13 +217,13 @@ export function AICommerceIntro() {
- Conversational Commerce + Just Say It

- Talk to Nearle AI like you speak to your local shopkeeper + Shop like you’re talking to your local shopkeeper

- Nearle connects natural consumer intent directly to verified local merchant inventory. You ask, AI discovers nearby availability, confirms with the merchant, and dispatches delivery. + Just say what you’re after. Nearle finds it at a trusted shop nearby, confirms it with the owner, and sends it to your door.

@@ -233,8 +233,8 @@ export function AICommerceIntro() {
-

Step 1 Intent

-

Natural Voice & Text Query

+

Step 1 Ask

+

Tell us what you need

@@ -243,8 +243,8 @@ export function AICommerceIntro() {
-

Step 2 Match

-

Live Local Shop Scan

+

Step 2 Find

+

We find it nearby

@@ -254,7 +254,7 @@ export function AICommerceIntro() {

Step 3 Deliver

-

Shopkeeper Pack & Rider Delivery

+

Packed by the shop, brought to you

diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx index e9351ea..adbe06c 100644 --- a/src/components/home/BusinessSection.tsx +++ b/src/components/home/BusinessSection.tsx @@ -8,8 +8,8 @@ import { fadeUp, fadeIn, scaleIn, staggerContainer, viewport } from "@/lib/anima const FEATURES = [ { - title: "AI Catalogue", - desc: "Turn your shelf into a live online catalogue with ProductLLM — no manual data entry.", + title: "Digital Catalogue", + desc: "Turn your shelves into an online catalogue in minutes — no manual data entry.", icon: "menu_book", visual: "/images/stores/catalogue-ui.webp", alt: "Clean grocery catalogue interface preview", diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index 9e05e63..11d6ecb 100644 --- a/src/components/home/Hero.tsx +++ b/src/components/home/Hero.tsx @@ -13,11 +13,134 @@ const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number]; // power4.out approximation, matches HeroLogo's entrance ease const EASE_LOGO = [0.16, 1, 0.3, 1] as [number, number, number, number]; +// 1. Verified Store SVG +function VerifiedStoreSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + + +
+ ); +} + +// 2. Neighborhood Pin SVG +function NeighborhoodPinSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + +
+ ); +} + +// 3. Happy Customers SVG +function HappyCustomerSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + +
+ ); +} + +// 4. Trusted Star SVG +function TrustedStarSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + +
+ ); +} + const PROOF_ITEMS = [ - { label: "Verified", text: "Local Stores", icon: "store" }, - { label: "Neighborhood", text: "Coverage", icon: "location_on" }, - { label: "Growing", text: "Happy Customers", icon: "mood" }, - { label: "Trusted", text: "Local Platform", icon: "star" }, + { + label: "Verified", + text: "Local Stores", + dotColor: "bg-[#6D28D9]", + renderSVG: (reduce: boolean) => , + }, + { + label: "Neighborhood", + text: "Coverage", + dotColor: "bg-[#A855F7]", + renderSVG: (reduce: boolean) => , + }, + { + label: "Growing", + text: "Happy Customers", + dotColor: "bg-[#EC4899]", + renderSVG: (reduce: boolean) => , + }, + { + label: "Trusted", + text: "Local Platform", + dotColor: "bg-[#F59E0B]", + renderSVG: (reduce: boolean) => , + }, ]; // Shared cascade timing: logo settles at ~1.2s, then badge → heading → description @@ -182,7 +305,7 @@ export function Hero() { className="flex items-center gap-2 rounded-xl bg-[#6330D6] px-7 py-3.5 text-sm font-black text-white shadow-lg transition-all duration-200 hover:bg-[#5225b8] hover:shadow-xl active:scale-95 sm:px-8" > - Explore AI Commerce + Discover Nearby Stores @@ -204,24 +327,60 @@ export function Hero() {
-
+ {/* Floating Particle Glow Dots on Hover */} + + +
{PROOF_ITEMS.map((item, idx) => ( -
- + {/* Corner Hover Glowing Dot on Item */} +
+ + + + +
+ +
+ {item.renderSVG(!!shouldReduce)}
-
+
{item.label}
diff --git a/src/components/home/VoiceCommerceExperience.tsx b/src/components/home/VoiceCommerceExperience.tsx index a37798a..97148ba 100644 --- a/src/components/home/VoiceCommerceExperience.tsx +++ b/src/components/home/VoiceCommerceExperience.tsx @@ -175,7 +175,7 @@ export function VoiceCommerceExperience() { - Live AI Commerce demo + See Nearle in action

, }, { - 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.", + title: "Your Shops, On Your Phone", + desc: "The shops you love are now a tap away — browse their shelves and order in seconds, without leaving home.", icon: "auto_awesome", color: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20", glowColor: "160 84 45", @@ -142,8 +147,8 @@ const CARDS = [ renderSVG: (reduce: boolean) => , }, { - title: "Offline-First Commerce", - desc: "Billing and inventory keep working even when the network drops. Built for how neighbourhood stores really run.", + title: "Always Reliable", + desc: "Nearle keeps working the way local shops really do — steady even when the network drops, so your order always goes through.", icon: "wifi_off", color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20", glowColor: "280 85 65", @@ -167,14 +172,14 @@ export function WhyAICommerceWins() { viewport={viewport} > - AI Commerce + Shop Local

- Why AI Commerce Wins + A Smarter Way to Shop Local

- Nearle isn’t another delivery app. It’s the AI layer that brings - neighbourhood stores online — without replacing them. + Nearle isn’t another delivery app. We bring the shops on your street online — so + you can order from them in seconds, while they stay the ones serving you.

@@ -207,6 +212,38 @@ export function WhyAICommerceWins() { animated={true} >
+ {/* Floating Flying Particle Glow Dots (Motes) - Shown ONLY on Hover */} + + {/* Corner Hover Glowing Dot */}
diff --git a/src/components/home/WhyNearle.tsx b/src/components/home/WhyNearle.tsx index 158cd1d..7790ee5 100644 --- a/src/components/home/WhyNearle.tsx +++ b/src/components/home/WhyNearle.tsx @@ -15,8 +15,8 @@ const CARDS = [ alt: "Friendly local grocery shop owner inside a kirana store", }, { - title: "AI Assisted Shopping", - desc: "Search naturally. Nearle AI understands what you’re looking for and recommends relevant products.", + title: "Find Things Faster", + desc: "Search in your own words and Nearle helps you find exactly what you need, in seconds.", icon: "auto_awesome", color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20", image: "/images/illustrations/easy-reordering.webp", diff --git a/src/components/home/WhyNearleDifferent.tsx b/src/components/home/WhyNearleDifferent.tsx index 4569a80..465e784 100644 --- a/src/components/home/WhyNearleDifferent.tsx +++ b/src/components/home/WhyNearleDifferent.tsx @@ -20,21 +20,284 @@ const TRADITIONAL = [ ]; const NEARLE = [ - { icon: "psychology", text: "AI understands intent" }, - { icon: "storefront", text: "Merchant stays at the center" }, - { icon: "near_me", text: "Customers discover nearby stores naturally" }, - { icon: "handshake", text: "Technology empowers merchants instead of replacing them" }, + { icon: "psychology", text: "Just ask in your own words" }, + { icon: "storefront", text: "The shop you trust stays at the centre" }, + { icon: "near_me", text: "You discover the shops right around you" }, + { icon: "handshake", text: "Local shops grow — they never get replaced" }, ]; +// The gentle S-curve the transformation flow travels. Stretched full-bleed via +// preserveAspectRatio="none", so exact geometry matters less than the direction: +// it always reads left (traditional) → right (Nearle). +const FLOW_PATH = "M0 168 C 300 96, 470 236, 640 168 S 960 96, 1200 152"; + +// ───────────────────────────────────────────────────────────────────────── +// Storytelling layer — everything below is decorative, pointer-events-none, +// low-opacity, and sits behind the cards. It reinforces one idea: +// Traditional (isolated, grey) → transformation beam → Nearle (connected, purple). +// ───────────────────────────────────────────────────────────────────────── + +// Ambient depth: soft drifting blobs + a faint dot texture so the band never +// reads as flat. +function AmbientBackdrop({ reduce }: { reduce: boolean }) { + return ( +
+ {/* faint dot texture for subtle depth */} + + + {/* two slow gradient blobs, kept out toward the margins */} + + + + {/* a few tiny floating particles */} + {[ + { c: "left-[12%] top-[30%]", d: 6, dur: 9 }, + { c: "left-[46%] top-[18%]", d: 5, dur: 11 }, + { c: "right-[18%] top-[62%]", d: 7, dur: 10 }, + { c: "right-[40%] top-[26%]", d: 4, dur: 13 }, + ].map((p, i) => ( + + ))} +
+ ); +} + +// The centrepiece: a full-width flow line whose stroke shifts grey → purple, +// with a constant dotted drift plus a single brighter beam that sweeps slowly +// left → right — the transformation itself. +function TransformationFlow({ reduce }: { reduce: boolean }) { + return ( +
+ +
+ ); +} + +// Left gutter — the "before": a lone grey storefront and a few disconnected +// nodes. Isolation is the whole point. +function TraditionalCluster({ reduce }: { reduce: boolean }) { + return ( + + ); +} + +// Right gutter — the "after": a connected AI network with a pulsing core, a +// living location pin, and a sparkle. Connection is the whole point. +function NearleCluster({ reduce }: { reduce: boolean }) { + const nodes = [ + { x: 20, y: 26 }, + { x: 92, y: 30 }, + { x: 26, y: 90 }, + { x: 90, y: 88 }, + { x: 56, y: 16 }, + ]; + + return ( + + ); +} + export function WhyNearleDifferent() { const reduce = useReducedMotion(); return (
-
+ {/* Decorative storytelling layer — revealed after the cards (delay), so the + content leads and the illustration follows. */} + + +
-
+ {/* Sequential reveal: heading (above) → left card → right card, staggered + by the parent; rows stagger within each card. */} + {/* Traditional commerce */} -
+
@@ -118,12 +386,17 @@ export function WhyNearleDifferent() { {/* Nearle AI Commerce — highlighted */} + {/* soft border glow behind the highlighted card */} +
);