Nearle/nearle_web_nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update why nearle page

Browse Source
This commit is contained in:
Aravind
2026-07-19 23:07:18 +05:30
parent 4073dc8386
commit 9abd59ec85
51 changed files with 3748 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/brands/page.tsx
View File

@@ -22,6 +22,7 @@ export const metadata: Metadata = {
"Partner with Nearle to get your brand into neighbourhood stores. Distribution, retail visibility, marketing campaigns, and real-time analytics, all in one platform.",
url: "https://nearle.in/brands",
},
alternates: { canonical: "/brands" },
};
const WHAT_WE_OFFER = [
@@ -35,7 +36,7 @@ const WHAT_WE_OFFER = [
{
icon: "storefront",
title: "Retail Shelf Visibility",
desc: "Premium placement in Nearle's digital catalogue and in-store QR listings. Customers browsing nearby stores see your brand first, creating daily brand touchpoints at zero extra cost.",
desc: "Premium placement in Nearle's AI catalogue by ProductLLM and in-store QR listings. Customers browsing nearby stores see your brand first, creating daily brand touchpoints at zero extra cost.",
tone: "bg-secondary/8 text-secondary",
badge: "Visibility",
},

65
src/app/businesses/page.tsx
View File

@@ -14,8 +14,23 @@ export const metadata: Metadata = {
title: "Nearle for Business",
description:
"Grow your local business with Nearle. Get discovered by nearby customers, manage online orders, run local offers, and build repeat sales, all from one simple hyperlocal platform.",
openGraph: {
title: "Nearle for Business — MerchantOS for Neighbourhood Stores",
description:
"Bring your store online with MerchantOS: a free POS, an AI catalog by ProductLLM, QR ordering, and local discovery. Keep your customers — add the technology.",
url: "https://nearle.in/businesses",
},
alternates: { canonical: "/businesses" },
};
const GROWTH_STEPS = [
{ icon: "storefront", title: "Merchant", desc: "Onboard your store in minutes with a free POS." },
{ icon: "auto_awesome", title: "AI Catalog", desc: "ProductLLM builds your catalog from a photo." },
{ icon: "receipt_long", title: "Orders", desc: "Take QR and online orders from nearby customers." },
{ icon: "analytics", title: "Analytics", desc: "See what sells and who's buying, in real time." },
{ icon: "trending_up", title: "Growth", desc: "Turn local demand into repeat business." },
];
function PhoneMapVisual() {
@@ -235,6 +250,56 @@ export default function BusinessesPage() {
{/* ─── Our Features / Business Grid ─── */}
<BusinessFeaturesGrid />
{/* ─── Business Growth Workflow ─── */}
<section className="py-10 md:py-14 xl:py-12 border-b border-[#6330D6]/10 bg-white overflow-hidden">
<div className="w-[calc(100%-32px)] lg:w-[calc(100%-64px)] max-w-[1280px] mx-auto">
<AnimatedSection>
<div className="text-center mb-10 lg:mb-12 xl:mb-10">
<span className="inline-flex items-center rounded-full bg-[#6330D6]/5 px-4 py-1.5 text-xs font-black uppercase tracking-widest text-[#6330D6]">
Growth Workflow
</span>
<h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
From shelf to steady growth
</h2>
<p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
Every step on Nearle builds on the last — powered by MerchantOS and
an AI catalog from ProductLLM.
</p>
</div>
</AnimatedSection>
<AnimatedGrid className="flex flex-col items-stretch gap-4 lg:flex-row lg:items-center lg:gap-2">
{GROWTH_STEPS.map((step, i) => (
<div key={step.title} className="contents">
<AnimatedCard className="flex-1 rounded-[24px] border border-[#6330D6]/10 bg-white p-6 text-center shadow-[0_10px_30px_rgba(22,0,29,0.05)]">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-[#6330D6]/8 text-[#6330D6]">
<MaterialIcon icon={step.icon} size={24} />
</div>
<p className="mt-4 font-display font-black text-[#16001D] text-lg leading-tight">
{step.title}
</p>
<p className="mt-2 text-sm leading-relaxed text-[#5E5866]">
{step.desc}
</p>
</AnimatedCard>
{i < GROWTH_STEPS.length - 1 && (
<div aria-hidden="true" className="flex shrink-0 items-center justify-center py-1 lg:px-0.5">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6]/8 text-[#6330D6]">
<span className="flex lg:hidden">
<MaterialIcon icon="arrow_downward" size={18} />
</span>
<span className="hidden lg:flex">
<MaterialIcon icon="arrow_forward" size={18} />
</span>
</div>
</div>
)}
</div>
))}
</AnimatedGrid>
</div>
</section>
{/* ─── Join/Download Call to Action ─── */}
<CTABanner
heading="Nearle is Essential for Business Growth"

33
src/app/layout.tsx
View File

@@ -70,6 +70,35 @@ export const viewport: Viewport = {
initialScale: 1,
};
const jsonLd = {
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://nearle.in/#organization",
name: "Nearle",
url: "https://nearle.in",
logo: "https://nearle.in/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: [
"https://www.instagram.com/nearle",
"https://www.linkedin.com/company/nearle",
"https://www.facebook.com/nearle",
],
},
{
"@type": "WebSite",
"@id": "https://nearle.in/#website",
url: "https://nearle.in",
name: "Nearle",
description:
"AI Commerce platform for neighbourhood stores. MerchantOS, ProductLLM, and ConsumerOS.",
publisher: { "@id": "https://nearle.in/#organization" },
},
],
};
export default function RootLayout({
children,
}: {
@@ -83,6 +112,10 @@ export default function RootLayout({
suppressHydrationWarning
>
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<MotionProvider>
<div className="min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col">
<PremiumNavbar />

16
src/app/page.tsx
View File

@@ -1,3 +1,4 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { Hero } from "@/components/home/Hero";
import { ServiceCategories } from "@/components/home/ServiceCategories";
@@ -5,8 +6,22 @@ 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 { 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.",
openGraph: {
title: "Nearle — AI Commerce Platform for Neighbourhood Stores",
description:
"Not another delivery app. Nearle adds AI, a digital storefront, and ordering to the local stores you already trust.",
url: "https://nearle.in",
},
alternates: { canonical: "/" },
};
export default function HomePage() {
return (
<PremiumPageShell>
@@ -16,6 +31,7 @@ export default function HomePage() {
<HowItWorks />
<HyperlocalFeatures />
<BusinessSection />
<WhyAICommerceWins />
<StoreQRSection />
</PremiumPageShell>
);

111
src/app/people/page.tsx
View File

@@ -5,6 +5,7 @@ import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PeopleHero } from "@/components/heroes/PeopleHero";
import { AnimatedSection } from "@/components/motion/AnimatedSection";
import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
import { AnimatedTimeline } from "@/components/delivery/AnimatedTimeline";
import { siteContent } from "@/config/site-content";
import type { Metadata } from "next";
@@ -12,8 +13,65 @@ export const metadata: Metadata = {
title: "Nearle for People",
description:
"Discover verified local stores, save your favourite merchants, and order everyday essentials with superfast local delivery from shops within your neighbourhood.",
openGraph: {
title: "Nearle for People — Shop Your Neighbourhood",
description:
"Find verified local stores near you, with accurate AI-generated listings by ProductLLM. Discover, order, and reorder from the shops you already trust.",
url: "https://nearle.in/people",
},
alternates: { canonical: "/people" },
};
const HOW_IT_WORKS = [
{
step: "01",
title: "Discover stores near you",
desc: "Open the app and see verified neighbourhood shops within walking distance — not warehouses across town.",
time: "Discover",
},
{
step: "02",
title: "Order in a few taps",
desc: "Browse live catalogs built by ProductLLM, add what you need, and check out. Prices and stock stay accurate.",
time: "Order",
},
{
step: "03",
title: "Pickup or local delivery",
desc: "Grab it on your way past, or get a short local delivery straight from the store to your door.",
time: "Fulfil",
},
{
step: "04",
title: "Reorder in one tap",
desc: "Your favourite stores and usuals stay saved, so buying again is instant.",
time: "Reorder",
},
];
const TRUST_POINTS = [
{
icon: "verified_user",
title: "Verified Merchants",
desc: "Every store on Nearle is a real, verified neighbourhood business.",
},
{
icon: "auto_awesome",
title: "Accurate AI Listings",
desc: "Product listings are generated by ProductLLM, so details and prices stay right.",
},
{
icon: "storefront",
title: "Real Neighbourhood Stores",
desc: "You shop the shops on your street — the ones your community already trusts.",
},
{
icon: "lock",
title: "Safe Ordering",
desc: "Order with confidence, from discovery to doorstep.",
},
];
const OFFERINGS = [
{
title: "Elegant Living",
@@ -224,6 +282,59 @@ export default function PeoplePage() {
</AnimatedGrid>
</section>
{/* ─── How It Works ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 bg-[#FAF7FD] border-b border-[#6330D6]/10">
<AnimatedSection>
<div className="text-center mb-10 xl:mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
How It Works
</span>
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
From your street to your doorstep
</h2>
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
Shopping your neighbourhood on Nearle takes just a few taps.
</p>
</div>
</AnimatedSection>
<AnimatedTimeline items={HOW_IT_WORKS} />
</section>
{/* ─── Trust Section ─── */}
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 xl:px-20 2xl:px-24 text-center bg-white border-b border-[#6330D6]/10">
<AnimatedSection>
<div className="mb-10 xl:mb-8">
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
Trust &amp; Safety
</span>
<h2 className="font-display text-3xl font-black text-[#16001D] mt-4">
Every Store is Verified
</h2>
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
Real shops, accurate listings, and safe ordering — so you always know
exactly who you&rsquo;re buying from.
</p>
</div>
</AnimatedSection>
<AnimatedGrid className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 text-left">
{TRUST_POINTS.map((t) => (
<AnimatedCard
key={t.title}
className="premium-card bg-white rounded-[24px] p-6 border border-[#6330D6]/10 shadow-[0_10px_30px_rgba(22,0,29,0.05)]"
>
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#6330D6]/8 text-[#6330D6]">
<MaterialIcon icon={t.icon} size={24} />
</div>
<p className="mt-4 font-display font-black text-[#16001D] text-lg leading-tight">
{t.title}
</p>
<p className="mt-2 text-sm leading-relaxed text-[#5E5866]">{t.desc}</p>
</AnimatedCard>
))}
</AnimatedGrid>
</section>
{/* ─── Ready to Download Section ─── */}
<section className="bg-white px-2 pt-2 pb-2 md:px-3 md:pt-3 md:pb-3 lg:px-4 lg:pt-4 lg:pb-4 xl:px-5 xl:pt-4 xl:pb-4 2xl:px-6 2xl:pb-5">
<section id="download-section" className="relative w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] p-8 text-center text-white md:p-10 lg:p-12 xl:p-10">

78
src/app/platform/page.tsx Normal file
View File

@@ -0,0 +1,78 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { PlatformHero } from "@/components/platform/PlatformHero";
import { PlatformArchitecture } from "@/components/platform/PlatformArchitecture";
import { ProductFeatureGrid } from "@/components/platform/ProductFeatureGrid";
import { ProductLLMWorkflow } from "@/components/platform/ProductLLMWorkflow";
import { CTABanner } from "@/components/ui/CTABanner";
export const metadata: Metadata = {
title: "Platform — MerchantOS, ConsumerOS & ProductLLM",
description:
"The Nearle platform: MerchantOS runs the store, ProductLLM builds the catalog from a shelf photo, and ConsumerOS brings the neighbourhood to shop. AI infrastructure for local retail.",
openGraph: {
title: "The Nearle Platform | MerchantOS · ProductLLM · ConsumerOS",
description:
"AI infrastructure behind every neighbourhood store — a free POS and AI catalog for merchants, and local discovery, ordering, and rewards for shoppers.",
url: "https://nearle.in/platform",
},
alternates: { canonical: "/platform" },
};
const MERCHANT_OS = [
{ icon: "point_of_sale", title: "Free POS", desc: "A complete point-of-sale, free for every merchant." },
{ icon: "wifi_off", title: "Offline Billing", desc: "Keep billing customers even when the network drops." },
{ icon: "inventory_2", title: "Inventory", desc: "Live stock counts that stay accurate across channels." },
{ icon: "analytics", title: "Analytics", desc: "See what sells, when, and to whom — in real time." },
{ icon: "loyalty", title: "Loyalty", desc: "Reward regulars and bring them back more often." },
{ icon: "auto_awesome", title: "AI Catalog", desc: "A shoppable catalog built by ProductLLM from a photo." },
{ icon: "qr_code", title: "QR Ordering", desc: "Customers scan, browse, and order in seconds." },
{ icon: "dashboard", title: "Store Dashboard", desc: "Run the whole store from one simple screen." },
];
const CONSUMER_OS = [
{ icon: "explore", title: "Local Discovery", desc: "Find the stores and products right around you." },
{ icon: "photo_camera", title: "Camera Search", desc: "Point your camera to find a product nearby." },
{ icon: "favorite", title: "Favorites", desc: "Save the stores and items you buy again and again." },
{ icon: "storefront", title: "Nearby Stores", desc: "Shop shops within walking distance, not warehouses." },
{ icon: "shopping_bag", title: "Pickup", desc: "Order ahead and grab it on your way past." },
{ icon: "local_shipping", title: "Delivery", desc: "Short, local trips from the store to your door." },
{ icon: "redeem", title: "Rewards", desc: "Earn as you shop your neighbourhood." },
{ icon: "history", title: "Fast Reordering", desc: "Re-buy your usuals in a single tap." },
];
export default function PlatformPage() {
return (
<PremiumPageShell>
<PlatformHero />
<PlatformArchitecture />
<ProductFeatureGrid
id="merchantos"
eyebrow="MerchantOS"
name="Everything a store needs to run"
tagline="A free operating system for the neighbourhood shop — billing, inventory, catalog, and orders, working online and off."
features={MERCHANT_OS}
variant="light"
showcase="dashboard"
footnote="AI Catalog powered by ProductLLM."
/>
<ProductLLMWorkflow />
<ProductFeatureGrid
id="consumeros"
eyebrow="ConsumerOS"
name="How the neighbourhood shops"
tagline="Discovery, search, ordering, and rewards — the app that brings local customers to nearby stores."
features={CONSUMER_OS}
variant="lavender"
showcase="phone"
/>
<CTABanner
badge={{ icon: "hub", label: "Built on Nearle" }}
heading="Put your store on the platform"
body="Join the neighbourhood stores already running on MerchantOS — with an AI catalog by ProductLLM and a growing base of local shoppers on ConsumerOS."
primary={{ href: "/businesses", icon: "storefront", label: "For Business" }}
secondary={{ href: "/why-nearle", icon: "auto_awesome", label: "Why AI Commerce" }}
/>
</PremiumPageShell>
);
}

14
src/app/robots.ts Normal file
View File

@@ -0,0 +1,14 @@
import type { MetadataRoute } from "next";
const BASE_URL = "https://nearle.in";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
},
sitemap: `${BASE_URL}/sitemap.xml`,
host: BASE_URL,
};
}

30
src/app/sitemap.ts Normal file
View File

@@ -0,0 +1,30 @@
import type { MetadataRoute } from "next";
const BASE_URL = "https://nearle.in";
export default function sitemap(): MetadataRoute.Sitemap {
const now = new Date();
const routes: { path: string; priority: number; changeFrequency: MetadataRoute.Sitemap[number]["changeFrequency"] }[] = [
{ path: "/", priority: 1, changeFrequency: "weekly" },
{ path: "/why-nearle", priority: 0.9, changeFrequency: "monthly" },
{ path: "/platform", priority: 0.9, changeFrequency: "monthly" },
{ path: "/businesses", priority: 0.8, changeFrequency: "monthly" },
{ path: "/people", priority: 0.8, changeFrequency: "monthly" },
{ path: "/brands", priority: 0.8, changeFrequency: "monthly" },
{ path: "/merchants", priority: 0.6, changeFrequency: "monthly" },
{ path: "/delivery-partners", priority: 0.6, changeFrequency: "monthly" },
{ path: "/about", priority: 0.5, changeFrequency: "monthly" },
{ path: "/contact", priority: 0.5, changeFrequency: "monthly" },
{ path: "/privacy", priority: 0.2, changeFrequency: "yearly" },
{ path: "/terms", priority: 0.2, changeFrequency: "yearly" },
{ path: "/cookies", priority: 0.2, changeFrequency: "yearly" },
];
return routes.map((route) => ({
url: `${BASE_URL}${route.path}`,
lastModified: now,
changeFrequency: route.changeFrequency,
priority: route.priority,
}));
}

61
src/app/why-nearle/page.tsx Normal file
View File

@@ -0,0 +1,61 @@
import type { Metadata } from "next";
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
import { WhyNearleHero } from "@/components/why-nearle/WhyNearleHero";
import { CommerceEvolution } from "@/components/why-nearle/CommerceEvolution";
import { AICommerceExplainer } from "@/components/why-nearle/AICommerceExplainer";
import { BeforeAfterFlow } from "@/components/why-nearle/BeforeAfterFlow";
import { NeighborhoodStores } from "@/components/why-nearle/NeighborhoodStores";
import { EcosystemDiagram } from "@/components/why-nearle/EcosystemDiagram";
import { ProductLLMPipeline } from "@/components/why-nearle/ProductLLMPipeline";
import { ProductLLMCompare } from "@/components/why-nearle/ProductLLMCompare";
import { AICommerceComparison } from "@/components/ui/AICommerceComparison";
import { FutureVision } from "@/components/why-nearle/FutureVision";
import { PullQuote } from "@/components/ui/PullQuote";
import { AICommerceCTA } from "@/components/why-nearle/AICommerceCTA";
export const metadata: Metadata = {
title: "What is AI Commerce?",
description:
"AI Commerce starts where quick commerce stops. Nearle digitizes neighbourhood stores with AI, digital storefronts, and ordering — instead of replacing them. Learn how AI Commerce works.",
openGraph: {
title: "What is AI Commerce? | Nearle",
description:
"Neighbourhood stores already have trust, customers, and location. Nearle adds AI, a digital storefront, inventory, and ordering. This is AI Commerce.",
url: "https://nearle.in/why-nearle",
},
alternates: { canonical: "/why-nearle" },
};
export default function WhyNearlePage() {
return (
<PremiumPageShell>
<WhyNearleHero />
{/* 1 · Why AI Commerce — evolution timeline */}
<CommerceEvolution />
{/* 2 · The Problem — stores already have vs Nearle adds */}
<AICommerceExplainer />
{/* 3 · Before vs After — traditional vs AI commerce flow */}
<BeforeAfterFlow />
{/* 4 · Why neighborhood stores matter */}
<NeighborhoodStores />
{/* 5 · The AI Commerce ecosystem */}
<EcosystemDiagram />
{/* 6 · ProductLLM workflow pipeline */}
<ProductLLMPipeline />
{/* 7 · Why ProductLLM — manual vs AI catalogs */}
<ProductLLMCompare />
{/* Supporting comparison — AI Commerce vs Quick Commerce */}
<AICommerceComparison />
<PullQuote
lines={[
"Quick commerce tried to out-run the neighborhood.",
"AI Commerce runs on it.",
]}
/>
{/* 8 · Future vision roadmap */}
<FutureVision />
{/* 9 · Premium closing CTA */}
<AICommerceCTA />
</PremiumPageShell>
);
}