update ai commerce section

This commit is contained in:
2026-07-23 10:26:49 +05:30
parent 4e0facc9af
commit a4328a791a
135 changed files with 4081 additions and 391 deletions

View File

@@ -2,10 +2,10 @@ 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 { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { AboutHero } from "@/components/heroes/AboutHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { FloatingDelivery } from "@/components/about/FloatingDelivery";
import type { Metadata } from "next";
@@ -20,7 +20,7 @@ const STRATEGY_CARDS = [
descr: "To help average stores perform like the great ones, not just by selling products, but by building a strong brand identity and real relationships with customers through Nearle.",
icon: "target",
iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
image: "/images/nearle-how/how-storefront.webp",
image: "/images/workflow/how-storefront.webp",
imageAlt: "3D local store storefront with purple awning",
imgFit: "object-contain object-bottom"
},
@@ -29,7 +29,7 @@ const STRATEGY_CARDS = [
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",
iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
image: "/images/nearle-merchant/local-map.webp",
image: "/images/stores/local-map.webp",
imageAlt: "Nearle local neighbourhood map",
imgFit: "object-cover object-center"
},
@@ -38,7 +38,7 @@ const STRATEGY_CARDS = [
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",
iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
image: "/images/app-mockup.webp",
image: "/images/platform/app-mockup.webp",
imageAlt: "Nearle app on a smartphone",
imgFit: "object-contain object-bottom"
}

View File

@@ -2,11 +2,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 { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { BrandsHero } from "@/components/heroes/BrandsHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import { NetworkBackground } from "@/components/brands/NetworkBackground";
import { PartnershipConnector } from "@/components/brands/PartnershipConnector";
@@ -199,7 +199,7 @@ export default function BrandsPage() {
{/* ─── Industries ─── */}
<section className="relative overflow-hidden py-10 md:py-14 xl:py-12 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<Image
src="/d2c bg1.png"
src="/images/illustrations/d2c-bg1.png"
alt=""
fill
priority={false}
@@ -215,7 +215,7 @@ export default function BrandsPage() {
<div className="relative mx-auto h-[280px] w-full max-w-[420px] sm:h-[360px] lg:mx-0 lg:h-[440px]">
<div className="absolute left-0 top-0 h-[62%] w-[72%] overflow-hidden rounded-[28px] border-4 border-white shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
<Image
src="/images/cat-daily-essentials.webp"
src="/images/stores/cat-daily-essentials.webp"
alt="Daily essentials like milk, bread, and fresh produce stocked on Nearle stores"
fill
sizes="(max-width: 1023px) 300px, 22vw"
@@ -224,7 +224,7 @@ export default function BrandsPage() {
</div>
<div className="absolute right-0 top-[6%] h-[42%] w-[52%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
<Image
src="/images/cat-health-wellness.webp"
src="/images/stores/cat-health-wellness.webp"
alt="Health and personal care products stocked on Nearle stores"
fill
sizes="(max-width: 1023px) 220px, 16vw"
@@ -233,7 +233,7 @@ export default function BrandsPage() {
</div>
<div className="absolute bottom-0 left-[10%] h-[38%] w-[54%] overflow-hidden rounded-[22px] border-4 border-white shadow-[0_16px_40px_rgba(22,0,29,0.14)]">
<Image
src="/images/cat-pet-essentials.webp"
src="/images/stores/cat-pet-essentials.webp"
alt="Pet essentials brand stocked on Nearle stores"
fill
sizes="(max-width: 1023px) 220px, 16vw"
@@ -329,7 +329,7 @@ export default function BrandsPage() {
<div className="absolute -right-4 -bottom-4 h-24 w-24 rounded-full bg-secondary/20 blur-3xl -z-10" />
<div className="relative h-[220px] sm:h-[260px] rounded-[28px] overflow-hidden shadow-[0_20px_50px_rgba(22,0,29,0.16)]">
<Image
src="/images/nearle-merchant/success-owner.webp"
src="/images/stores/success-owner.webp"
alt="Neighbourhood store owner reviewing brand orders on his phone"
fill
sizes="(max-width: 1023px) 90vw, 360px"
@@ -373,7 +373,7 @@ export default function BrandsPage() {
"circle at 70% 30%, rgba(99,48,214,0.2), transparent 50%",
"circle at 20% 70%, rgba(0,109,55,0.12), transparent 45%",
]}
backgroundImage="/brand part.png"
backgroundImage="/images/illustrations/brand-part.png"
/>
</PremiumPageShell>
);

View File

@@ -2,11 +2,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 { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
import { BusinessHero } from "@/components/heroes/BusinessHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";
@@ -177,7 +177,7 @@ export default function BusinessesPage() {
<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"
src="/images/workflow/how-storefront.webp"
alt="Local shop storefront with purple awning and now online board"
fill
sizes="(max-width: 768px) 50vw, 25vw"
@@ -234,7 +234,7 @@ export default function BusinessesPage() {
</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"
src="/images/workflow/how-grocery-bag.webp"
alt="Nearle grocery bag filled with vegetables and packaged products"
fill
sizes="(max-width: 768px) 50vw, 25vw"

View File

@@ -1,8 +1,8 @@
import React from "react";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { ContactHero } from "@/components/heroes/ContactHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import type { Metadata } from "next";
export const metadata: Metadata = {

View File

@@ -1,7 +1,7 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {

View File

@@ -1,11 +1,11 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { DeliveryHero } from "@/components/heroes/DeliveryHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";

View File

@@ -1040,3 +1040,18 @@ main {
border-radius: 1.25rem;
background-color: var(--brand-accent-light);
}
/* Reduced motion: Framer components are handled by <MotionConfig reducedMotion="user">.
This covers CSS-only motion it can't reach — Tailwind transitions/hover transforms
and the infinite keyframe loops (float, pulse-subtle, hero-bike-float, stroke-dash,
hero-map-drift). Near-instant rather than removed, so final states stay intact. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

View File

@@ -1,9 +1,9 @@
import type { Metadata, Viewport } from "next";
import { Lato } from "next/font/google";
import "./globals.css";
import { MotionProvider } from "@/components/layout/MotionProvider";
import { PremiumNavbar } from "@/components/layout/PremiumNavbar";
import { PremiumFooter } from "@/components/layout/PremiumFooter";
import { MotionProvider } from "@/components/common/MotionProvider";
import { PremiumNavbar } from "@/components/navbar/PremiumNavbar";
import { PremiumFooter } from "@/components/footer/PremiumFooter";
const lato = Lato({
subsets: ["latin"],
@@ -41,7 +41,7 @@ export const metadata: Metadata = {
type: "website",
images: [
{
url: "/logo.png",
url: "/logos/logo.png",
width: 512,
height: 512,
alt: "Nearle logo",
@@ -53,13 +53,13 @@ export const metadata: Metadata = {
title: "Nearle: Your Neighborhood, Delivered",
description:
"India's hyperlocal neighborhood commerce platform",
images: ["/logo.png"],
images: ["/logos/logo.png"],
},
alternates: { canonical: "/" },
icons: {
icon: "/favicon.ico",
shortcut: "/favicon.ico",
apple: "/apple-icon.png",
apple: "/icons/apple-icon.png",
},
robots: { index: true, follow: true },
};
@@ -78,7 +78,7 @@ const jsonLd = {
"@id": "https://nearle.in/#organization",
name: "Nearle",
url: "https://nearle.in",
logo: "https://nearle.in/logo.png",
logo: "https://nearle.in/logos/logo.png",
description:
"Nearle is an AI Commerce platform that digitizes neighbourhood stores — with AI catalogs by ProductLLM, QR ordering, and local discovery — instead of replacing them.",
sameAs: [
@@ -119,7 +119,7 @@ export default function RootLayout({
<MotionProvider>
<div className="min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col">
<PremiumNavbar />
<main className="w-full overflow-x-hidden bg-white">
<main className="w-full overflow-x-clip bg-white">
{children}
</main>
<PremiumFooter />

View File

@@ -1,11 +1,11 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { MerchantsHero } from "@/components/heroes/MerchantsHero";
import { FAQAccordion } from "@/components/ui/FAQAccordion";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { CTABanner } from "@/components/ui/CTABanner";
import type { Metadata } from "next";

View File

@@ -1,18 +1,21 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { Hero } from "@/components/home/Hero";
import { VoiceCommerceExperience } from "@/components/home/VoiceCommerceExperience";
import { StoreJourney } from "@/components/home/experience/StoreJourney";
import { ServiceCategories } from "@/components/home/ServiceCategories";
import { WhyNearle } from "@/components/home/WhyNearle";
import { HowItWorks } from "@/components/home/HowItWorks";
import { HyperlocalFeatures } from "@/components/home/HyperlocalFeatures";
import { BusinessSection } from "@/components/home/BusinessSection";
import { WhyAICommerceWins } from "@/components/home/WhyAICommerceWins";
import { AICommerceTeaser } from "@/components/home/AICommerceTeaser";
import { StoreQRSection } from "@/components/home/StoreQRSection";
export const metadata: Metadata = {
title: "AI Commerce Platform for Neighbourhood Stores",
description:
"Nearle is the AI Commerce platform that digitizes neighbourhood stores instead of replacing them. AI catalogs by ProductLLM, QR ordering, and local discovery — commerce that runs on your neighbourhood.",
"Nearle digitizes the neighbourhood stores you already trust. Shop from nearby merchants, let Nearle AI find products by natural language, and get orders packed by the shopkeeper and delivered by a Nearle rider.",
openGraph: {
title: "Nearle — AI Commerce Platform for Neighbourhood Stores",
description:
@@ -26,12 +29,15 @@ export default function HomePage() {
return (
<PremiumPageShell>
<Hero />
<VoiceCommerceExperience />
<StoreJourney />
<ServiceCategories />
<WhyNearle />
<HowItWorks />
<HyperlocalFeatures />
<BusinessSection />
<WhyAICommerceWins />
<AICommerceTeaser />
<StoreQRSection />
</PremiumPageShell>
);

View File

@@ -1,12 +1,12 @@
import React from "react";
import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { PeopleHero } from "@/components/heroes/PeopleHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedSection } from "@/components/animations/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/animations/AnimatedGrid";
import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
import { siteContent } from "@/config/site-content";
import { siteContent } from "@/constants/site-content";
import type { Metadata } from "next";
export const metadata: Metadata = {
@@ -79,7 +79,7 @@ const OFFERINGS = [
descr: "Enjoy the comfort of elegant living. Nearle is India's first hyper-local managed platform bringing all amenities and requirements directly to your fingertips.",
icon: "local_florist",
color: "from-purple-500/10 to-indigo-500/10 text-primary border-purple-100",
image: "/nearle-people.webp",
image: "/images/hero/nearle-people.webp",
isWide: false
},
{
@@ -88,7 +88,7 @@ const OFFERINGS = [
descr: "Pick hot deals within your neighbourhood. Stay updated on localized sales, discounts, and flash promotions happening today.",
icon: "local_activity",
color: "from-amber-500/10 to-orange-500/10 text-amber-700 border-amber-100",
image: "/images/app-mockup.webp",
image: "/images/platform/app-mockup.webp",
isWide: false
},
{
@@ -97,7 +97,7 @@ const OFFERINGS = [
descr: "Enjoy the ease of the World Wide Web, fulfilled entirely by trusted local businesses. Avoid traffic lights, parking hassles, and pollution.",
icon: "travel_explore",
color: "from-green-500/10 to-emerald-500/10 text-secondary border-green-100",
image: "/super.png",
image: "/images/illustrations/super.png",
isWide: false
},
{
@@ -106,7 +106,7 @@ const OFFERINGS = [
descr: "Enjoy safe, convenient shopping with custom pricing, resident promotions, and bulk order discounts negotiated for your community.",
icon: "shopping_bag",
color: "from-rose-500/10 to-pink-500/10 text-rose-700 border-rose-100",
image: "/images/cat-pet-essentials.webp",
image: "/images/stores/cat-pet-essentials.webp",
isWide: false
},
{
@@ -115,7 +115,7 @@ const OFFERINGS = [
descr: "Order everything you need in your neighborhood with a single tap. A fast, organized last-mile delivery network ensures prompt fulfillment.",
icon: "touch_app",
color: "from-sky-500/10 to-blue-500/10 text-sky-700 border-sky-100",
image: "/about.webp",
image: "/images/hero/about.webp",
isWide: true
},
{
@@ -124,7 +124,7 @@ const OFFERINGS = [
descr: "Get your fresh fruits, farm-fresh vegetables, dairy, and grocery items delivered instantly from verified local green grocers.",
icon: "eco",
color: "from-emerald-500/10 to-teal-500/10 text-emerald-700 border-emerald-100",
image: "/images/cat-daily-essentials.webp",
image: "/images/stores/cat-daily-essentials.webp",
isWide: false
},
{
@@ -133,7 +133,7 @@ const OFFERINGS = [
descr: "Choose from the best local restaurants and neighborhood eateries close to your home. Hot food delivered with relevance and speed.",
icon: "restaurant",
color: "from-orange-500/10 to-red-500/10 text-orange-700 border-orange-100",
image: "/images/cat-hot-food.webp",
image: "/images/stores/cat-hot-food.webp",
isWide: false
},
{
@@ -142,7 +142,7 @@ const OFFERINGS = [
descr: "Access custom-tailored local neighborhood services designed to integrate convenience directly into residential society living.",
icon: "stars",
color: "from-violet-500/10 to-purple-500/10 text-violet-700 border-violet-100",
image: "/images/cat-health-wellness.webp",
image: "/images/stores/cat-health-wellness.webp",
isWide: false
},
{
@@ -151,7 +151,7 @@ const OFFERINGS = [
descr: "Book certified local service providers at your convenience. From handymen to laundry, pet care to pharmacy delivery, all in one place.",
icon: "construction",
color: "from-cyan-500/10 to-blue-500/10 text-cyan-700 border-cyan-100",
image: "/images/cat-home-services.webp",
image: "/images/stores/cat-home-services.webp",
isWide: false
}
];

View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { PlatformHero } from "@/components/platform/PlatformHero";
import { PlatformArchitecture } from "@/components/platform/PlatformArchitecture";
import { ProductFeatureGrid } from "@/components/platform/ProductFeatureGrid";

View File

@@ -1,7 +1,7 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {

View File

@@ -1,7 +1,7 @@
import React from "react";
import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import type { Metadata } from "next";
export const metadata: Metadata = {

View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PremiumPageShell } from "@/components/common/PremiumPageShell";
import { WhyNearleHero } from "@/components/why-nearle/WhyNearleHero";
import { CommerceEvolution } from "@/components/why-nearle/CommerceEvolution";
import { AICommerceExplainer } from "@/components/why-nearle/AICommerceExplainer";