From 9b72a28b2fc70aa3d62445627073cb3c9a31df3d Mon Sep 17 00:00:00 2001 From: Aravind Date: Fri, 24 Jul 2026 15:58:49 +0530 Subject: [PATCH] update add animation --- src/components/home/AICommerceIntro.tsx | 211 ++++++++++++++++------ src/components/home/WhyAICommerceWins.tsx | 186 +++++++++++++++++-- src/components/ui/BorderGlow.tsx | 4 +- 3 files changed, 331 insertions(+), 70 deletions(-) diff --git a/src/components/home/AICommerceIntro.tsx b/src/components/home/AICommerceIntro.tsx index edc6222..d88b224 100644 --- a/src/components/home/AICommerceIntro.tsx +++ b/src/components/home/AICommerceIntro.tsx @@ -5,6 +5,100 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { Spotlight } from "@/components/ui/Spotlight"; import { fadeUp, staggerContainer, staggerCards, cardReveal, viewport } from "@/lib/animations"; +// 1. Natural Intent SVG (Sound Wave & AI Sparkle) +function NaturalIntentSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + + +
+ ); +} + +// 2. Local Discovery SVG (Radar Beam & Shop Pin) +function LocalDiscoverySVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + + + + + + + +
+ ); +} + +// 3. Instant Fulfillment SVG (Delivery Box & Speed Trail) +function InstantFulfillmentSVG({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + + + +
+ ); +} + const STEPS = [ { step: "01", @@ -14,6 +108,7 @@ const STEPS = [ badge: "Voice & Text AI", iconBg: "bg-primary/10 text-primary border-primary/20", badgeStyle: "bg-primary/10 text-primary border-primary/20", + renderSVG: (reduce: boolean) => , }, { step: "02", @@ -23,6 +118,7 @@ const STEPS = [ badge: "Real-Time Stock", iconBg: "bg-secondary/10 text-secondary border-secondary/20", badgeStyle: "bg-secondary/10 text-secondary border-secondary/20", + renderSVG: (reduce: boolean) => , }, { step: "03", @@ -32,6 +128,7 @@ const STEPS = [ badge: "1-Tap Fulfillment", iconBg: "bg-[#7C3AED]/10 text-[#7C3AED] border-[#7C3AED]/20", badgeStyle: "bg-[#7C3AED]/10 text-[#7C3AED] border-[#7C3AED]/20", + renderSVG: (reduce: boolean) => , }, ]; @@ -69,16 +166,16 @@ export function AICommerceIntro() {
-
+
{/* Section Header */} Neighbourhood Shopping, Reimagined by AI 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. @@ -109,55 +206,55 @@ export function AICommerceIntro() { initial="hidden" whileInView="visible" viewport={viewport} - className="mx-auto max-w-[1100px] mb-14" + className="w-full mb-12 lg:mb-16" > -
+
-
- +
+ Conversational Commerce
-

+

Talk to Nearle AI like you speak 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.

-
-
-
- +
+
+
+

Step 1 Intent

-

Natural Voice & Text Query

+

Natural Voice & Text Query

-
-
- +
+
+

Step 2 Match

-

Live Local Shop Scan

+

Live Local Shop Scan

-
-
- +
+
+

Step 3 Deliver

-

Shopkeeper Pack & Rider Delivery

+

Shopkeeper Pack & Rider Delivery

@@ -165,13 +262,13 @@ export function AICommerceIntro() { - {/* 3 Step Cards Grid */} + {/* 3 Step Cards Grid with Right-Aligned Animated SVGs */} {STEPS.map((step) => ( -
-
- - - - - {step.step} - +
+
+
+ + + + + {step.step} + +
+ +
+ {step.badge} +
+ +

+ {step.title} +

+ +

+ {step.desc} +

-
- {step.badge} +
+ {step.renderSVG(!!reduce)}
- -

- {step.title} -

- -

- {step.desc} -

))} @@ -213,22 +316,22 @@ export function AICommerceIntro() { initial="hidden" whileInView="visible" viewport={viewport} - className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5 mt-12 mx-auto max-w-[1100px]" + className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6 mt-12 lg:mt-16 w-full" > {HIGHLIGHTS.map((item) => ( -
- +
+
-

+

{item.title}

-

+

{item.sub}

@@ -239,5 +342,3 @@ export function AICommerceIntro() {
); } - - diff --git a/src/components/home/WhyAICommerceWins.tsx b/src/components/home/WhyAICommerceWins.tsx index 33540d7..42c137f 100644 --- a/src/components/home/WhyAICommerceWins.tsx +++ b/src/components/home/WhyAICommerceWins.tsx @@ -1,32 +1,161 @@ "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 BorderGlow from "@/components/ui/BorderGlow"; import { fadeUp, fadeIn, staggerContainer, viewport } from "@/lib/animations"; +// 1. Trust Card Graphic (Animated Shield & Checkmark) +function TrustCardGraphic({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + + + + + +
+ ); +} + +// 2. AI Catalog Graphic (Animated Sparkle Cluster) +function AICatalogGraphic({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + +
+ ); +} + +// 3. Offline Commerce Graphic (Animated Wifi Signal Waves) +function OfflineCommerceGraphic({ reduce = false }: { reduce?: boolean }) { + return ( +
+ + + + + + + +
+ ); +} + 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", color: "bg-primary/5 text-primary border-primary/10", + glowColor: "268 85 65", + dotColor: "bg-[#7C3AED]", + colors: ["#c084fc", "#f472b6", "#38bdf8"], + renderSVG: (reduce: boolean) => , }, { 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", - color: "bg-secondary/5 text-secondary border-secondary/10", + color: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20", + glowColor: "160 84 45", + dotColor: "bg-emerald-400", + colors: ["#34d399", "#818cf8", "#c084fc"], + 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.", icon: "wifi_off", color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20", + glowColor: "280 85 65", + dotColor: "bg-[#EC4899]", + colors: ["#f472b6", "#c084fc", "#38bdf8"], + renderSVG: (reduce: boolean) => , }, ]; export function WhyAICommerceWins() { + const reduce = useReducedMotion(); + return (
@@ -60,19 +189,50 @@ export function WhyAICommerceWins() { -
- -
-

- {card.title} -

-

- {card.desc} -

+ +
+ {/* Corner Hover Glowing Dot */} +
+ + + + +
+ +
+
+ +
+ +
+ {card.renderSVG(!!reduce)} +
+
+ +

+ {card.title} +

+

+ {card.desc} +

+
+ ))} diff --git a/src/components/ui/BorderGlow.tsx b/src/components/ui/BorderGlow.tsx index 05929a0..949af00 100644 --- a/src/components/ui/BorderGlow.tsx +++ b/src/components/ui/BorderGlow.tsx @@ -176,12 +176,12 @@ const BorderGlow: React.FC = ({ onPointerMove={handlePointerMove} onPointerEnter={() => setIsHovered(true)} onPointerLeave={() => setIsHovered(false)} - className={`relative grid isolate border border-white/15 ${className}`} + className={`relative grid isolate border border-black/10 dark:border-white/15 ${className}`} style={{ background: backgroundColor, borderRadius: `${borderRadius}px`, transform: 'translate3d(0, 0, 0.01px)', - boxShadow: 'rgba(0,0,0,0.1) 0 1px 2px, rgba(0,0,0,0.1) 0 2px 4px, rgba(0,0,0,0.1) 0 4px 8px, rgba(0,0,0,0.1) 0 8px 16px, rgba(0,0,0,0.1) 0 16px 32px, rgba(0,0,0,0.1) 0 32px 64px', + boxShadow: 'rgba(0,0,0,0.06) 0 1px 3px, rgba(0,0,0,0.08) 0 4px 12px', }} > {/* mesh gradient border */}