Compare commits
3 Commits
d3c7d93cef
...
fix/site-q
| Author | SHA1 | Date | |
|---|---|---|---|
| 48cafd07c6 | |||
| 7f6b42153a | |||
| b233992f30 |
12
package-lock.json
generated
12
package-lock.json
generated
@@ -12,7 +12,8 @@
|
||||
"next": "16.2.9",
|
||||
"puppeteer-core": "^24.43.1",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
"react-dom": "19.2.4",
|
||||
"react-icons": "^5.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
@@ -6468,6 +6469,15 @@
|
||||
"react": "^19.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz",
|
||||
"integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
"next": "16.2.9",
|
||||
"puppeteer-core": "^24.43.1",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4"
|
||||
"react-dom": "19.2.4",
|
||||
"react-icons": "^5.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
BIN
public/images/nearle-how/how-grocery-bag.webp
Normal file
BIN
public/images/nearle-how/how-grocery-bag.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/images/nearle-how/how-storefront.webp
Normal file
BIN
public/images/nearle-how/how-storefront.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
public/images/nearle-merchant/catalogue-ui.webp
Normal file
BIN
public/images/nearle-merchant/catalogue-ui.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/images/nearle-merchant/delivery-support.webp
Normal file
BIN
public/images/nearle-merchant/delivery-support.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
public/images/nearle-merchant/local-map.webp
Normal file
BIN
public/images/nearle-merchant/local-map.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
public/images/nearle-merchant/merchant-hero.webp
Normal file
BIN
public/images/nearle-merchant/merchant-hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
public/images/nearle-merchant/qr-stand.webp
Normal file
BIN
public/images/nearle-merchant/qr-stand.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
public/images/nearle-merchant/success-owner.webp
Normal file
BIN
public/images/nearle-merchant/success-owner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
public/images/nearle-redesign/better-local-value.webp
Normal file
BIN
public/images/nearle-redesign/better-local-value.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
public/images/nearle-redesign/choose-area.webp
Normal file
BIN
public/images/nearle-redesign/choose-area.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/images/nearle-redesign/delivery-doorstep.webp
Normal file
BIN
public/images/nearle-redesign/delivery-doorstep.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/images/nearle-redesign/easy-reordering.webp
Normal file
BIN
public/images/nearle-redesign/easy-reordering.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
public/images/nearle-redesign/heading-shopper.webp
Normal file
BIN
public/images/nearle-redesign/heading-shopper.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/images/nearle-redesign/heading-store.webp
Normal file
BIN
public/images/nearle-redesign/heading-store.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
public/images/nearle-redesign/pick-store.webp
Normal file
BIN
public/images/nearle-redesign/pick-store.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/images/nearle-redesign/shops-you-know.webp
Normal file
BIN
public/images/nearle-redesign/shops-you-know.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
public/images/nearle-redesign/support-local-business.webp
Normal file
BIN
public/images/nearle-redesign/support-local-business.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
@@ -1,4 +1,5 @@
|
||||
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";
|
||||
@@ -16,33 +17,42 @@ const STRATEGY_CARDS = [
|
||||
title: "Our Mission",
|
||||
descr: "To make mediocre, or average stores, perform as well as the great ones. By going beyond selling a product, to establish a solid brand identity and build a relationship with their customers using Nearle.",
|
||||
icon: "target",
|
||||
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
|
||||
iconClass: "bg-[#6330D6]/[0.07] text-[#6330D6] border-[#6330D6]/10",
|
||||
image: "/images/nearle-how/how-storefront.webp",
|
||||
imageAlt: "3D local store storefront with purple awning",
|
||||
imgFit: "object-contain object-bottom"
|
||||
},
|
||||
{
|
||||
title: "Our Vision",
|
||||
descr: "Our vision is to achieve Global Digital Transformation services leadership in providing value-added high quality solution to our customers.",
|
||||
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",
|
||||
color: "bg-secondary/5 text-secondary border-secondary/10"
|
||||
iconClass: "bg-secondary/[0.07] text-secondary border-secondary/10",
|
||||
image: "/images/nearle-merchant/local-map.webp",
|
||||
imageAlt: "Nearle local neighbourhood map",
|
||||
imgFit: "object-cover object-center"
|
||||
},
|
||||
{
|
||||
title: "Why Nearle",
|
||||
descr: "Nearly 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 from its Neighbourhoods.",
|
||||
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",
|
||||
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
|
||||
iconClass: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20",
|
||||
image: "/images/app-mockup.png",
|
||||
imageAlt: "Nearle app on a smartphone",
|
||||
imgFit: "object-contain object-bottom"
|
||||
}
|
||||
];
|
||||
|
||||
const LOCAL_COUNTERS = [
|
||||
{ count: "100+", label: "Customers Served", icon: "people" },
|
||||
{ count: "100+", label: "Active Businesses", icon: "store" },
|
||||
{ count: "100+", label: "Active Neighborhoods", icon: "location_city" }
|
||||
{ count: "Local", label: "Customer First Always", icon: "people" },
|
||||
{ count: "Verified", label: "Business Partners", icon: "store" },
|
||||
{ count: "Growing", label: "Neighbourhood Reach", icon: "location_city" }
|
||||
];
|
||||
|
||||
const HERO_STATS = [
|
||||
{ title: "2km Coverage", icon: "explore", desc: "Hyperlocal radius" },
|
||||
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce" },
|
||||
{ title: "50000+ Happy Customers", icon: "mood", desc: "Neighborhood residents" },
|
||||
{ title: "25+ Neighbourhoods", icon: "location_city", desc: "Active locations" }
|
||||
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
|
||||
{ title: "Happy Customers", icon: "mood", desc: "Neighbourhood community" },
|
||||
{ title: "Coimbatore & Beyond", icon: "location_city", desc: "Growing neighbourhood reach" }
|
||||
];
|
||||
|
||||
export default function AboutPage() {
|
||||
@@ -78,13 +88,13 @@ export default function AboutPage() {
|
||||
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<a
|
||||
href="#story-section"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
||||
>
|
||||
Our Story
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
|
||||
>
|
||||
Join Our Journey
|
||||
</Link>
|
||||
@@ -110,7 +120,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Description Block ─── */}
|
||||
<section id="story-section" className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<section id="story-section" className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
Our Platform
|
||||
</span>
|
||||
@@ -123,29 +133,73 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col text-left group hover:scale-[1.01] transition-transform duration-200"
|
||||
>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center border mb-6 shrink-0 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={22} />
|
||||
<section
|
||||
className="bg-[#FAF7FD] border-b border-[#6330D6]/10"
|
||||
style={{ paddingTop: "clamp(40px, 4.5vw, 64px)", paddingBottom: "clamp(40px, 4.5vw, 64px)" }}
|
||||
>
|
||||
<div
|
||||
className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
|
||||
style={{ maxWidth: 1800 }}
|
||||
>
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3"
|
||||
style={{ gap: "clamp(24px, 2.5vw, 36px)" }}
|
||||
>
|
||||
{STRATEGY_CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="bg-white border border-[#6330D6]/[0.10] shadow-[0_4px_28px_rgba(99,48,214,0.07)] flex flex-col overflow-hidden min-h-[480px] md:min-h-[520px] xl:min-h-[540px] 2xl:min-h-[560px]"
|
||||
style={{ borderRadius: 32 }}
|
||||
>
|
||||
{/* Content: icon, heading, description */}
|
||||
<div
|
||||
className="flex-none"
|
||||
style={{ padding: "clamp(28px, 2.8vw, 44px)", paddingBottom: 0 }}
|
||||
>
|
||||
<div
|
||||
className={`flex items-center justify-center rounded-full border shrink-0 ${card.iconClass}`}
|
||||
style={{ width: 72, height: 72 }}
|
||||
>
|
||||
<MaterialIcon icon={card.icon} size={28} />
|
||||
</div>
|
||||
<h3
|
||||
className="font-display font-black text-[#16001D]"
|
||||
style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
|
||||
>
|
||||
{card.title}
|
||||
</h3>
|
||||
<p
|
||||
className="text-[#5E5866]"
|
||||
style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
|
||||
>
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
{/* Image: inner rounded container with consistent spacing on all sides */}
|
||||
<div
|
||||
className="flex-1 relative overflow-hidden bg-[#F4ECFA]/40"
|
||||
style={{
|
||||
margin: "clamp(20px, 2vw, 32px) clamp(24px, 2.2vw, 36px) clamp(20px, 2vw, 28px)",
|
||||
borderRadius: 24,
|
||||
minHeight: 200
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={card.image}
|
||||
alt={card.imageAlt}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
|
||||
className={card.imgFit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-[#16001D] mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed">
|
||||
{card.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Global Stats counters ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{LOCAL_COUNTERS.map((c) => (
|
||||
<div key={c.label} className="flex flex-col items-center text-center">
|
||||
@@ -162,7 +216,7 @@ export default function AboutPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Brand Building Banner ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD]">
|
||||
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1 rounded-full">
|
||||
Don't miss the opportunity
|
||||
@@ -186,7 +240,7 @@ export default function AboutPage() {
|
||||
className="bg-white hover:bg-white/95 border border-[#6330D6]/10 text-[#16001D] font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="download" size={18} />
|
||||
<span>Download App</span>
|
||||
<span>Explore Nearle</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,77 +1,19 @@
|
||||
"use client";
|
||||
|
||||
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 { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
|
||||
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
||||
import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
const PROCESS_STEPS = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Get Online",
|
||||
descr: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
|
||||
icon: "storefront",
|
||||
color: "bg-[#6330D6]/5 text-[#6330D6] border-[#6330D6]/10"
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Get Noticed",
|
||||
descr: "Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.",
|
||||
icon: "campaign",
|
||||
color: "bg-secondary/5 text-secondary border-secondary/10"
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Get Simplified",
|
||||
descr: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.",
|
||||
icon: "auto_awesome",
|
||||
color: "bg-[#6330D6]/10 text-[#6330D6] border-[#6330D6]/20"
|
||||
}
|
||||
];
|
||||
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.",
|
||||
};
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Direct Customer Access",
|
||||
descr: "Build direct relationships and trust with residents in your immediate vicinity."
|
||||
},
|
||||
{
|
||||
title: "Become a Partner",
|
||||
descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs."
|
||||
},
|
||||
{
|
||||
title: "Build Your Brand",
|
||||
descr: "Brand your business on Nearle and reach out to your community with ease."
|
||||
},
|
||||
{
|
||||
title: "Huge Opportunity",
|
||||
descr: "Unlock revenue opportunities and marketing strategies that will take your business further."
|
||||
},
|
||||
{
|
||||
title: "Delight Your Customers",
|
||||
descr: "Delight customers in the neighborhood with a personalized online shopping experience."
|
||||
},
|
||||
{
|
||||
title: "Unique Model",
|
||||
descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs."
|
||||
},
|
||||
{
|
||||
title: "Reach Right Audience",
|
||||
descr: "We target your ideal customers — people in your neighborhood search for what you offer."
|
||||
},
|
||||
{
|
||||
title: "Increase Your Customers",
|
||||
descr: "Increase walk-in and online customers by targeting local demand."
|
||||
}
|
||||
];
|
||||
|
||||
const STATS = [
|
||||
{ value: "40%+", label: "Avg Revenue Increase", icon: "trending_up", bg: "bg-[#FAF7FD]" },
|
||||
{ value: "12k+", label: "Daily Orders Handled", icon: "groups", bg: "bg-[#6330D6] text-white" },
|
||||
{ value: "5k+", label: "Active Partners", icon: "storefront", bg: "bg-white border border-[#6330D6]/10" },
|
||||
{ value: "24/7", label: "Merchant Support", icon: "support_agent", bg: "bg-[#FAF7FD]" }
|
||||
];
|
||||
|
||||
const HERO_BENEFITS = [
|
||||
{ title: "More Visibility Across Nearle", icon: "visibility", desc: "Get discovered by locals" },
|
||||
@@ -80,6 +22,111 @@ const HERO_BENEFITS = [
|
||||
{ title: "Local Delivery Support", icon: "local_shipping", desc: "Deliver fast & verified" }
|
||||
];
|
||||
|
||||
function PhoneMapVisual() {
|
||||
return (
|
||||
// Single phone frame — no outer wrapper needed, no floating pills
|
||||
<div
|
||||
className="relative overflow-hidden bg-white shadow-[0_18px_48px_rgba(22,0,29,0.24)]"
|
||||
style={{ width: 195, height: 215, borderRadius: 32, border: "5px solid #16001D" }}
|
||||
>
|
||||
{/* Status bar */}
|
||||
<div className="flex items-center justify-between px-3 pt-2.5 pb-1">
|
||||
<span className="text-[7px] font-bold text-[#16001D]/50">9:41</span>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[4, 6, 8, 10].map((h) => (
|
||||
<span key={h} className="w-[2.5px] rounded-sm bg-[#16001D]" style={{ height: h, opacity: h < 8 ? 0.4 : 1 }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="mx-2.5 mb-2 flex h-6 shrink-0 items-center gap-1.5 rounded-full bg-[#F4ECFA] px-2.5">
|
||||
<svg viewBox="0 0 12 12" width="8" height="8" fill="none" aria-hidden="true">
|
||||
<circle cx="5" cy="5" r="3.5" stroke="#6330D6" strokeWidth="1.3"/>
|
||||
<path d="M8 8l1.5 1.5" stroke="#6330D6" strokeWidth="1.3" strokeLinecap="round"/>
|
||||
</svg>
|
||||
<span className="flex-1 text-[7.5px] font-medium text-[#5E5866]">Search local stores</span>
|
||||
<svg viewBox="0 0 12 10" width="10" height="8" fill="none" aria-hidden="true">
|
||||
<path d="M1 2h10M3 5h6M5 8h2" stroke="#6330D6" strokeWidth="1.2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div
|
||||
className="relative mx-2.5 overflow-hidden rounded-2xl"
|
||||
style={{ height: 108, background: "linear-gradient(145deg,#f3eafd,#eaf7ef)" }}
|
||||
>
|
||||
{/* Street grid */}
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: "linear-gradient(rgba(155,115,195,0.18) 1px,transparent 1px),linear-gradient(90deg,rgba(155,115,195,0.18) 1px,transparent 1px)",
|
||||
backgroundSize: "16px 16px",
|
||||
}} />
|
||||
{/* Subtle glow under main pin */}
|
||||
<div className="absolute rounded-full bg-[#6330D6]/10"
|
||||
style={{ width: 52, height: 52, left: "46%", top: "46%", transform: "translate(-50%,-50%)" }} />
|
||||
|
||||
{/* Large center pin */}
|
||||
<svg className="absolute" aria-hidden="true"
|
||||
style={{ left: "46%", top: "44%", transform: "translate(-50%,-50%)" }}
|
||||
width="24" height="30" viewBox="0 0 16 20" fill="none">
|
||||
<path d="M8 0C4.1 0 0 3.4 0 8.6 0 14.6 8 20 8 20s8-5.4 8-11.4C16 3.4 11.9 0 8 0z" fill="#6330D6"/>
|
||||
<circle cx="8" cy="8.6" r="3.2" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — top-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "16%", top: "12%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — upper-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "20%", top: "20%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Green pin — lower-left */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ left: "28%", bottom: "18%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#22C55E" opacity="0.7"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
{/* Purple pin — lower-right */}
|
||||
<svg className="absolute" aria-hidden="true" style={{ right: "22%", bottom: "16%" }}
|
||||
width="13" height="16" viewBox="0 0 8 10" fill="none">
|
||||
<path d="M4 0C1.8 0 0 1.8 0 4c0 2.5 4 6 4 6s4-3.5 4-6C8 1.8 6.2 0 4 0z" fill="#6330D6" opacity="0.4"/>
|
||||
<circle cx="4" cy="4" r="1.5" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Store preview card — bottom sheet inside phone */}
|
||||
<div className="absolute bottom-0 left-0 right-0 flex items-center gap-2.5 rounded-t-2xl bg-white px-3 py-2.5 shadow-[0_-4px_16px_rgba(22,0,29,0.10)]">
|
||||
{/* Store thumbnail */}
|
||||
<div className="relative flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-xl"
|
||||
style={{ background: "linear-gradient(135deg,#6330D6,#9d6af5)" }}>
|
||||
<svg viewBox="0 0 20 18" width="14" height="12" fill="none" aria-hidden="true">
|
||||
<path d="M1 8v9h18V8M0 8h20M7 8V5a3 3 0 016 0v3" stroke="white" strokeWidth="1.6" strokeLinecap="round"/>
|
||||
<rect x="8" y="10" width="4" height="7" rx="1" fill="white" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[9px] font-black leading-none text-[#16001D]">Your Store</p>
|
||||
<div className="mt-1 flex items-center gap-1">
|
||||
<span className="text-[7.5px] font-black text-[#16A34A]">Open</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">4.8</span>
|
||||
<span className="text-[7.5px] leading-none">⭐</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">•</span>
|
||||
<span className="text-[7.5px] text-[#5E5866]">0.8 km</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 12" width="6" height="10" fill="none" className="shrink-0 opacity-30" aria-hidden="true">
|
||||
<path d="M1 1l5 5-5 5" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BusinessesPage() {
|
||||
const collageCards = [
|
||||
{ text: "Nearby Customers", icon: "people" },
|
||||
@@ -111,17 +158,16 @@ export default function BusinessesPage() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
|
||||
>
|
||||
List Your Store
|
||||
</a>
|
||||
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
|
||||
<Link
|
||||
href="/contact"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
||||
>
|
||||
List Your Store
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
|
||||
>
|
||||
Explore Solutions
|
||||
</Link>
|
||||
@@ -147,7 +193,7 @@ export default function BusinessesPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Intro Highlight Banner ─── */}
|
||||
<section className="p-8 md:p-12 px-6 md:px-12 lg:px-16 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<section className="py-7 px-6 md:py-9 md:px-12 lg:px-16 xl:py-8 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 border-b border-[#6330D6]/10 bg-white">
|
||||
<div className="max-w-2xl text-left">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3 py-1 rounded-full">
|
||||
Together, we grow
|
||||
@@ -170,134 +216,146 @@ export default function BusinessesPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Timeline / Core Process Steps ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 border-b border-[#6330D6]/10 bg-white">
|
||||
<div className="text-center mb-12">
|
||||
<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">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-3 max-w-xl text-sm md:text-base text-[#5E5866]">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{PROCESS_STEPS.map((ps) => (
|
||||
<div
|
||||
key={ps.step}
|
||||
className="bg-white rounded-3xl p-8 border border-[#6330D6]/10 shadow-[0_4px_20px_rgba(99,48,214,0.02)] flex flex-col relative overflow-hidden group hover:scale-[1.01] transition-transform duration-300"
|
||||
>
|
||||
<div className="absolute top-4 right-6 text-5xl font-black text-[#6330D6]/5">
|
||||
{ps.step}
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-2xl flex items-center justify-center border mb-6 shrink-0 ${ps.color}`}>
|
||||
<MaterialIcon icon={ps.icon} size={22} />
|
||||
</div>
|
||||
<h3 className="font-display text-lg font-black text-[#16001D] mb-3 text-left">
|
||||
{ps.title}
|
||||
</h3>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] leading-relaxed text-left">
|
||||
{ps.descr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Grid Stats & Value Prop ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
||||
{/* Left side: features block (7 cols) */}
|
||||
<div className="lg:col-span-7 text-left">
|
||||
<span className="text-xs text-[#6330D6] uppercase tracking-widest font-black bg-[#6330D6]/5 px-3.5 py-1 rounded-full">
|
||||
Our features
|
||||
{/* ─── Build Your Neighborhood Brand ─── */}
|
||||
<section className="py-10 md:py-14 lg:py-16 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-[1800px] mx-auto">
|
||||
{/* Header */}
|
||||
<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]">
|
||||
How it works
|
||||
</span>
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black text-[#16001D] mt-4 mb-4">
|
||||
Move Your Business Forward
|
||||
<h2 className="font-display text-[30px] md:text-4xl lg:text-[44px] font-black text-[#16001D] mt-4 leading-tight tracking-tight">
|
||||
Build Your Neighborhood Brand
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-[#5E5866] mb-8 max-w-xl">
|
||||
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
|
||||
<p className="mx-auto mt-3 max-w-[700px] text-base md:text-lg text-[#5E5866] leading-relaxed">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{FEATURES.map((feat) => (
|
||||
<div key={feat.title} className="flex gap-3">
|
||||
<div className="w-5.5 h-5.5 rounded-full bg-secondary-container text-secondary flex items-center justify-center shrink-0 mt-0.5">
|
||||
<MaterialIcon icon="check" size={14} className="font-black" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-display text-sm font-black text-[#16001D] mb-1">
|
||||
{feat.title}
|
||||
</h4>
|
||||
<p className="text-xs text-[#5E5866] leading-relaxed">
|
||||
{feat.descr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right side: stats quadrant (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-2 gap-4 lg:gap-6 text-left">
|
||||
{STATS.map((stat, i) => (
|
||||
<div
|
||||
key={stat.label}
|
||||
className={`p-6 rounded-2xl flex flex-col justify-between aspect-square shadow-sm ${stat.bg} ${
|
||||
i % 2 === 1 ? "lg:mt-4" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className={`w-8.5 h-8.5 rounded-xl flex items-center justify-center ${
|
||||
stat.bg.includes("#6330D6") ? "bg-white/10 text-white" : "bg-[#6330D6]/5 text-[#6330D6]"
|
||||
}`}>
|
||||
<MaterialIcon icon={stat.icon} size={18} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<p className="text-3xl md:text-4xl font-display font-black tracking-tight">{stat.value}</p>
|
||||
<p className={`text-[10px] font-bold mt-1 uppercase tracking-wider ${
|
||||
stat.bg.includes("#6330D6") ? "text-white/80" : "text-[#5E5866]"
|
||||
}`}>
|
||||
{stat.label}
|
||||
</p>
|
||||
{/* Cards grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
|
||||
{/* Card 1 - Get Online */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
01
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
|
||||
<MaterialIcon icon="storefront" size={28} />
|
||||
</div>
|
||||
<div className="relative z-10 mt-6 max-w-[260px]">
|
||||
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
|
||||
Get Online
|
||||
</h3>
|
||||
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
|
||||
Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
|
||||
</p>
|
||||
</div>
|
||||
<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"
|
||||
alt="Local shop storefront with purple awning and now online board"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-contain object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</article>
|
||||
|
||||
{/* Card 2 - Get Noticed */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
02
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-secondary/7 text-secondary">
|
||||
<MaterialIcon icon="campaign" size={28} />
|
||||
</div>
|
||||
<div className="relative z-10 mt-6 max-w-[260px]">
|
||||
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
|
||||
Get Noticed
|
||||
</h3>
|
||||
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
|
||||
Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto h-[215px] lg:h-[230px] flex items-end justify-center">
|
||||
<PhoneMapVisual />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Card 3 - Get Simplified */}
|
||||
<article className="relative flex min-h-[360px] md:min-h-[390px] lg:min-h-[420px] flex-col overflow-hidden rounded-[32px] border border-[rgba(99,48,214,0.12)] bg-white p-7 md:p-8 shadow-[0_18px_45px_rgba(22,0,29,0.08)]">
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-[#6330D6]/[0.07] select-none">
|
||||
03
|
||||
</span>
|
||||
<div className="relative z-10 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#6330D6]/7 text-[#6330D6]">
|
||||
<MaterialIcon icon="auto_awesome" size={28} />
|
||||
</div>
|
||||
<div className="relative z-10 mt-6 max-w-[260px]">
|
||||
<h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
|
||||
Get Simplified
|
||||
</h3>
|
||||
<p className="mt-3 text-base leading-relaxed text-[#5E5866]">
|
||||
Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto pt-5 h-[170px] lg:h-[185px] flex items-end justify-center gap-4">
|
||||
<div className="hidden sm:flex flex-col gap-2 pb-2">
|
||||
{["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
|
||||
<div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm whitespace-nowrap">
|
||||
{chip}
|
||||
</div>
|
||||
))}
|
||||
</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"
|
||||
alt="Nearle grocery bag filled with vegetables and packaged products"
|
||||
fill
|
||||
sizes="(max-width: 768px) 50vw, 25vw"
|
||||
className="object-contain object-center"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ─── Our Features / Business Grid ─── */}
|
||||
<BusinessFeaturesGrid />
|
||||
|
||||
{/* ─── Join/Download Call to Action ─── */}
|
||||
<section className="p-12 md:p-16 text-center bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
|
||||
Nearle is Essential for Business Growth
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
|
||||
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3.5">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register as Partner</span>
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={18} />
|
||||
<span>Contact Experts</span>
|
||||
</Link>
|
||||
<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">
|
||||
<div className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#1A0322] to-[#0A000D] text-white">
|
||||
<div className="px-6 py-10 md:px-10 md:py-12 lg:px-14 lg:py-14 xl:py-12 text-center relative">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(99,48,214,0.15),transparent_50%)] pointer-events-none" />
|
||||
<div className="relative z-10 max-w-2xl mx-auto">
|
||||
<h2 className="font-display text-3xl md:text-4xl font-black mb-4 tracking-tight">
|
||||
Nearle is Essential for Business Growth
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-white/70 mb-8 leading-relaxed max-w-lg mx-auto">
|
||||
Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3.5">
|
||||
{/* TODO: Replace with real merchant onboarding URL once confirmed */}
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm hover:shadow-xl transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="bolt" size={18} />
|
||||
<span>Register Interest</span>
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white/10 hover:bg-white/15 border border-white/20 text-white font-black px-8 py-3.5 rounded-xl text-sm transition-all duration-200 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={18} />
|
||||
<span>Contact Experts</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -13,7 +13,7 @@ export default function ContactPage() {
|
||||
return (
|
||||
<PremiumPageShell>
|
||||
{/* ─── Contact Section ─── */}
|
||||
<section className="relative px-6 py-12 md:px-12 lg:px-16 border-b border-[#6330D6]/10">
|
||||
<section className="relative px-6 py-10 md:px-12 md:py-12 lg:px-16 xl:py-10 border-b border-[#6330D6]/10">
|
||||
|
||||
{/* Subtle Map Grid/Location decoration behind left content */}
|
||||
<div className="absolute left-[5%] top-[10%] w-[400px] h-[300px] opacity-[0.04] select-none pointer-events-none -z-10">
|
||||
@@ -101,7 +101,7 @@ export default function ContactPage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Map Section ─── */}
|
||||
<section className="p-6 md:p-8 bg-[#FAF7FD]">
|
||||
<section className="p-4 md:p-5 bg-[#FAF7FD] mb-2 md:mb-3 xl:mb-4">
|
||||
<div className="relative w-full h-[400px] rounded-2xl overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_24px_rgba(99,48,214,0.02)]">
|
||||
<iframe
|
||||
title="Nearle Coimbatore Location Map"
|
||||
|
||||
@@ -141,12 +141,12 @@
|
||||
/* ─── Base Styles ─── */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: #E8DCF2;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: #E8DCF2 !important;
|
||||
background: #ffffff !important;
|
||||
color: var(--on-surface);
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -1245,8 +1245,172 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Global Spacing & Layout System ─── */
|
||||
.page-container {
|
||||
width: min(100% - 48px, 1280px);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.page-container {
|
||||
width: min(100% - 128px, 1440px);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-block: 88px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.section { padding-block: 64px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.section { padding-block: 56px; }
|
||||
}
|
||||
|
||||
.section-tight {
|
||||
padding-block: 56px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.section-tight { padding-block: 40px; }
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.section-tight { padding-block: 36px; }
|
||||
}
|
||||
|
||||
.section-soft {
|
||||
background: #faf7ff;
|
||||
}
|
||||
|
||||
main {
|
||||
background: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.premium-footer-shell {
|
||||
width: calc(100% - 24px);
|
||||
max-width: 1800px;
|
||||
margin: 32px auto 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.premium-footer-shell {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.premium-footer-shell {
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.premium-footer-shell {
|
||||
width: calc(100% - 96px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Feature Cards (BusinessSection) ─── */
|
||||
.feature-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.feature-card {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.feature-card {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card__top {
|
||||
display: grid;
|
||||
grid-template-columns: 52px minmax(0, 1fr);
|
||||
column-gap: 14px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.feature-card__top {
|
||||
grid-template-columns: 72px minmax(0, 1fr);
|
||||
column-gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card__icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.feature-card__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card__icon span {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.feature-card__icon span {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card__content {
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
font-family: var(--font-display), sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: clamp(20px, 2vw, 32px);
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--brand-dark);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.feature-card h3 {
|
||||
font-size: clamp(24px, 2vw, 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin-top: 12px;
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.feature-card p {
|
||||
margin-top: 16px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card__image {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 1.25rem;
|
||||
background-color: var(--brand-accent-light);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,8 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Jost } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const jost = Jost({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700", "800"],
|
||||
variable: "--font-display",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const jostBody = Jost({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700"],
|
||||
variable: "--font-body",
|
||||
display: "swap",
|
||||
});
|
||||
const jost = { variable: "font-display" };
|
||||
const jostBody = { variable: "font-body" };
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL("https://nearle.in"),
|
||||
@@ -91,6 +79,10 @@ export default function RootLayout({
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
|
||||
{children}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
@@ -7,11 +5,18 @@ import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
|
||||
import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
|
||||
import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
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 2km neighbourhood.",
|
||||
};
|
||||
|
||||
const OFFERINGS = [
|
||||
{
|
||||
title: "Elegant Living",
|
||||
tag: "Join the #1 Neighbourhood App",
|
||||
tag: "Your Neighbourhood App",
|
||||
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",
|
||||
@@ -93,10 +98,10 @@ const OFFERINGS = [
|
||||
];
|
||||
|
||||
const LOCAL_STATS = [
|
||||
{ count: "100+", label: "Verified Restaurants", icon: "restaurant" },
|
||||
{ count: "100+", label: "Green Grocers", icon: "local_mall" },
|
||||
{ count: "100+", label: "Home Etailers", icon: "shopping_cart" },
|
||||
{ count: "100+", label: "Service Providers", icon: "handyman" }
|
||||
{ count: "Local", label: "Verified Restaurants", icon: "restaurant" },
|
||||
{ count: "Fresh", label: "Green Grocers", icon: "local_mall" },
|
||||
{ count: "Ready", label: "Home Stores", icon: "shopping_cart" },
|
||||
{ count: "Trusted", label: "Service Providers", icon: "handyman" }
|
||||
];
|
||||
|
||||
const APP_BENEFITS = [
|
||||
@@ -133,10 +138,10 @@ const APP_BENEFITS = [
|
||||
];
|
||||
|
||||
const HERO_STATS = [
|
||||
{ title: "1000+ Verified Stores", icon: "store", desc: "Local commerce active" },
|
||||
{ title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
|
||||
{ title: "2km Neighbourhood", icon: "location_on", desc: "Hyperlocal service radius" },
|
||||
{ title: "50000+ Happy Customers", icon: "mood", desc: "Active daily orders" },
|
||||
{ title: "4.7 Average Rating", icon: "star", desc: "Highly rated on stores" }
|
||||
{ title: "Happy Customers", icon: "mood", desc: "Growing neighbourhood community" },
|
||||
{ title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" }
|
||||
];
|
||||
|
||||
export default function PeoplePage() {
|
||||
@@ -172,13 +177,13 @@ export default function PeoplePage() {
|
||||
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<a
|
||||
href="#download-section"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
|
||||
className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
||||
>
|
||||
Get the App
|
||||
</a>
|
||||
<Link
|
||||
href="/"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-98"
|
||||
className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
|
||||
>
|
||||
Explore Stores
|
||||
</Link>
|
||||
@@ -204,8 +209,8 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Bento Grid of Offerings ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<div className="mb-12">
|
||||
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-[#FAF7FD] border-b border-[#6330D6]/10">
|
||||
<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">
|
||||
What we offer
|
||||
</span>
|
||||
@@ -221,13 +226,13 @@ export default function PeoplePage() {
|
||||
{OFFERINGS.map((offering) => (
|
||||
<article
|
||||
key={offering.title}
|
||||
className="experience-card"
|
||||
className={`experience-card${offering.isWide ? " experience-card--wide" : ""}`}
|
||||
>
|
||||
<Image
|
||||
src={offering.image}
|
||||
alt={offering.title}
|
||||
fill
|
||||
sizes="(max-width: 1023px) 100vw, 33vw"
|
||||
sizes={offering.isWide ? "(max-width: 1023px) 100vw, 66vw" : "(max-width: 1023px) 100vw, 33vw"}
|
||||
className="experience-card__image"
|
||||
/>
|
||||
<div className="experience-card__overlay" />
|
||||
@@ -244,13 +249,13 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Localized Stats Block ─── */}
|
||||
<section className="py-16 md:py-20 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<div className="mb-12">
|
||||
<section className="py-10 md:py-14 xl:py-10 px-6 md:px-12 lg:px-16 text-center bg-white border-b border-[#6330D6]/10">
|
||||
<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">
|
||||
Nearle Network
|
||||
</span>
|
||||
<h2 className="font-display text-2xl font-black text-[#16001D] mt-4">
|
||||
Join the #1 Neighbourhood App
|
||||
The Neighbourhood App
|
||||
</h2>
|
||||
<p className="text-xs md:text-sm text-[#5E5866] mt-2">
|
||||
Bringing local stores to your doorstep instantly.
|
||||
@@ -276,7 +281,8 @@ export default function PeoplePage() {
|
||||
</section>
|
||||
|
||||
{/* ─── Ready to Download Section ─── */}
|
||||
<section id="download-section" className="p-8 md:p-12 lg:p-16 relative text-center bg-gradient-to-br from-[#16001D] to-[#25002F] text-white">
|
||||
<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">
|
||||
{/* Subtle glow layers */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_-20%,rgba(99,48,214,0.15),transparent_70%)] pointer-events-none" />
|
||||
|
||||
@@ -304,14 +310,14 @@ export default function PeoplePage() {
|
||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
||||
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||
<div className="text-sm font-black text-white">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
|
||||
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||
<div className="text-sm font-black text-white">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -491,7 +497,7 @@ export default function PeoplePage() {
|
||||
<div className="flex flex-col gap-3.5 mt-6 w-full max-w-[320px]">
|
||||
{APP_BENEFITS.map((b) => (
|
||||
<div key={b.title} className="bg-white/[0.04] border border-white/5 rounded-xl p-3.5 flex gap-3.5 items-center text-left">
|
||||
<div className={`flex-shrink-0 w-8.5 h-8.5 rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
|
||||
<div className={`flex-shrink-0 w-[34px] h-[34px] rounded-lg flex items-center justify-center border shadow-inner ${b.iconClass}`}>
|
||||
<MaterialIcon icon={b.icon} size={16} />
|
||||
</div>
|
||||
<div>
|
||||
@@ -506,20 +512,21 @@ export default function PeoplePage() {
|
||||
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
||||
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
|
||||
<div className="text-left leading-none">
|
||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||
<div className="text-xs font-black text-white">App Store</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
|
||||
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
|
||||
<div className="text-left leading-none">
|
||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
|
||||
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
|
||||
<div className="text-xs font-black text-white">Google Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</PremiumPageShell>
|
||||
);
|
||||
}
|
||||
|
||||
552
src/components/businesses/BusinessFeaturesGrid.tsx
Normal file
552
src/components/businesses/BusinessFeaturesGrid.tsx
Normal file
@@ -0,0 +1,552 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
// ─── Feature SVG Illustrations ───────────────────────────────────────────────
|
||||
// Flat vector style · Nearle brand palette · no text inside SVGs
|
||||
|
||||
function DirectAccessSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Location pin top-center */}
|
||||
<path d="M68 4C64.1 4 60 7.4 60 12.6C60 18.6 68 28 68 28C68 28 76 18.6 76 12.6C76 7.4 71.9 4 68 4Z" fill="#6330D6"/>
|
||||
<circle cx="68" cy="12.6" r="3.5" fill="white"/>
|
||||
{/* Left person – customer (purple) */}
|
||||
<circle cx="34" cy="44" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<circle cx="34" cy="40" r="5" fill="#6330D6" opacity="0.55"/>
|
||||
<path d="M20 76Q20 60 34 60Q48 60 48 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
{/* Right person – merchant (green) */}
|
||||
<circle cx="102" cy="44" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
|
||||
<circle cx="102" cy="40" r="5" fill="#22C55E" opacity="0.55"/>
|
||||
{/* Green apron shape */}
|
||||
<rect x="96" y="54" width="12" height="14" rx="3" fill="#22C55E" opacity="0.6"/>
|
||||
<path d="M88 76Q88 60 102 60Q116 60 116 76" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
|
||||
{/* Handshake connector */}
|
||||
<circle cx="58" cy="64" r="6" fill="#6330D6" opacity="0.85"/>
|
||||
<circle cx="78" cy="64" r="6" fill="#22C55E" opacity="0.85"/>
|
||||
<path d="M58 64Q68 59 78 64" stroke="#16001D" strokeWidth="1.5" strokeLinecap="round" opacity="0.25"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function PartnerSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Puzzle piece 1 – purple */}
|
||||
<path d="M14 40L14 78L58 78L58 66Q70 66 70 58Q70 50 58 50L58 40Z" fill="#6330D6" opacity="0.88"/>
|
||||
<path d="M58 50Q64 50 64 58Q64 66 58 66" fill="#F5F3FF"/>
|
||||
{/* Puzzle piece 2 – lavender */}
|
||||
<path d="M78 40L78 50Q66 50 66 58Q66 66 78 66L78 78L122 78L122 40Z" fill="#A78BFA" opacity="0.82"/>
|
||||
<path d="M78 50Q72 50 72 58Q72 66 78 66" fill="#F5F3FF"/>
|
||||
{/* Top-left avatar */}
|
||||
<circle cx="34" cy="24" r="12" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<circle cx="34" cy="20" r="4.5" fill="#6330D6" opacity="0.45"/>
|
||||
<path d="M25 33Q25 28 34 28Q43 28 43 33" fill="#6330D6" opacity="0.35"/>
|
||||
{/* Top-right avatar */}
|
||||
<circle cx="100" cy="24" r="12" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.5"/>
|
||||
<circle cx="100" cy="20" r="4.5" fill="#22C55E" opacity="0.45"/>
|
||||
<path d="M91 33Q91 28 100 28Q109 28 109 33" fill="#22C55E" opacity="0.35"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function BrandSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Storefront body */}
|
||||
<rect x="20" y="42" width="76" height="48" rx="3" fill="white" stroke="#E9D5FF" strokeWidth="1.5"/>
|
||||
{/* Purple awning */}
|
||||
<rect x="14" y="34" width="88" height="14" rx="4" fill="#6330D6"/>
|
||||
<rect x="22" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
|
||||
<rect x="36" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
|
||||
<rect x="50" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
|
||||
<rect x="64" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
|
||||
<rect x="78" y="34" width="5" height="14" fill="#8B5CF6" opacity="0.4"/>
|
||||
{/* Roof line */}
|
||||
<path d="M12 36L58 16L104 36" stroke="#6330D6" strokeWidth="1.5" fill="none" opacity="0.45"/>
|
||||
{/* Door */}
|
||||
<rect x="49" y="64" width="18" height="26" rx="3" fill="#EDE9FE"/>
|
||||
<circle cx="64" cy="77" r="1.5" fill="#6330D6" opacity="0.5"/>
|
||||
{/* Windows */}
|
||||
<rect x="24" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
|
||||
<rect x="76" y="52" width="16" height="12" rx="2" fill="#DBEAFE"/>
|
||||
{/* Megaphone right */}
|
||||
<path d="M108 30L118 24L118 50L108 44Z" fill="#F59E0B" opacity="0.82"/>
|
||||
<rect x="104" y="34" width="6" height="8" rx="2" fill="#F59E0B"/>
|
||||
{/* Signal arcs */}
|
||||
<path d="M118 32Q126 30 128 37Q126 44 118 42" stroke="#F59E0B" strokeWidth="1.5" fill="none" strokeDasharray="2.5 2" opacity="0.7"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function OpportunitySVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Ascending bars */}
|
||||
<rect x="10" y="62" width="20" height="26" rx="3" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
|
||||
<rect x="38" y="48" width="20" height="40" rx="3" fill="#A78BFA"/>
|
||||
<rect x="66" y="32" width="20" height="56" rx="3" fill="#6330D6"/>
|
||||
{/* Curved green arrow */}
|
||||
<path d="M10 62Q52 20 100 10" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
|
||||
<path d="M91 6L103 10L95 20" fill="#22C55E"/>
|
||||
{/* Gold coin */}
|
||||
<circle cx="116" cy="72" r="17" fill="#FEF3C7"/>
|
||||
<circle cx="116" cy="72" r="12" fill="#FDE68A"/>
|
||||
<circle cx="116" cy="72" r="9" fill="#FCD34D"/>
|
||||
<text x="116" y="77" textAnchor="middle" fontSize="11" fontWeight="bold" fill="#78350F">₹</text>
|
||||
{/* Baseline */}
|
||||
<line x1="8" y1="88" x2="90" y2="88" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function DelightSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Person body */}
|
||||
<circle cx="44" cy="26" r="13" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<circle cx="44" cy="22" r="5" fill="#6330D6" opacity="0.5"/>
|
||||
<path d="M28 76Q28 56 44 56Q60 56 60 76" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
{/* Phone in hand */}
|
||||
<rect x="53" y="44" width="14" height="22" rx="3" fill="#6330D6" opacity="0.82"/>
|
||||
<rect x="55" y="46" width="10" height="16" rx="2" fill="white" opacity="0.55"/>
|
||||
{/* Shopping bag */}
|
||||
<rect x="76" y="52" width="32" height="28" rx="4" fill="#F5F3FF" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<path d="M82 52Q82 45 92 45Q102 45 102 52" stroke="#6330D6" strokeWidth="1.5" fill="none"/>
|
||||
<line x1="76" y1="63" x2="108" y2="63" stroke="#6330D6" strokeWidth="1" opacity="0.3"/>
|
||||
{/* Heart bubble */}
|
||||
<circle cx="98" cy="24" r="14" fill="white" stroke="#EDE9FE" strokeWidth="1.5"/>
|
||||
<path d="M98 31L90 23Q90 17 95 17Q98 17 98 20Q98 17 101 17Q106 17 106 23Z" fill="#EF4444" opacity="0.82"/>
|
||||
{/* Star row */}
|
||||
<text x="62" y="94" fontSize="11" fill="#F59E0B">★★★★★</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function UniqueModelSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Map area */}
|
||||
<rect x="10" y="8" width="116" height="78" rx="8" fill="#DBEAFE" opacity="0.5"/>
|
||||
{/* Main roads */}
|
||||
<path d="M10 48L126 48" stroke="white" strokeWidth="7"/>
|
||||
<path d="M68 8L68 86" stroke="white" strokeWidth="7"/>
|
||||
{/* Secondary roads */}
|
||||
<path d="M10 28Q40 28 40 48" stroke="white" strokeWidth="5"/>
|
||||
<path d="M96 48Q96 68 126 72" stroke="white" strokeWidth="5"/>
|
||||
{/* Purple pin (top-left block) */}
|
||||
<path d="M36 34C33 34 30 36.7 30 40.2C30 45 36 53 36 53C36 53 42 45 42 40.2C42 36.7 39 34 36 34Z" fill="#6330D6"/>
|
||||
<circle cx="36" cy="40" r="3" fill="white"/>
|
||||
{/* Green pin (bottom-right block) */}
|
||||
<path d="M96 58C93 58 90 60.7 90 64.2C90 69 96 77 96 77C96 77 102 69 102 64.2C102 60.7 99 58 96 58Z" fill="#22C55E"/>
|
||||
<circle cx="96" cy="64" r="3" fill="white"/>
|
||||
{/* Store badge at purple pin */}
|
||||
<rect x="50" y="16" width="34" height="24" rx="3" fill="white" stroke="#6330D6" strokeWidth="1.2"/>
|
||||
<rect x="50" y="15" width="34" height="9" rx="2" fill="#6330D6"/>
|
||||
<rect x="60" y="26" width="14" height="14" rx="2" fill="#EDE9FE"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function AudienceSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Bullseye rings */}
|
||||
<circle cx="68" cy="52" r="40" fill="#EDE9FE" opacity="0.3"/>
|
||||
<circle cx="68" cy="52" r="28" fill="#EDE9FE" opacity="0.55"/>
|
||||
<circle cx="68" cy="52" r="17" fill="#A78BFA" opacity="0.5"/>
|
||||
<circle cx="68" cy="52" r="9" fill="#6330D6"/>
|
||||
<circle cx="68" cy="52" r="3.5" fill="white"/>
|
||||
{/* Green arrow */}
|
||||
<path d="M110 8L70 49" stroke="#22C55E" strokeWidth="2.5" strokeLinecap="round"/>
|
||||
<path d="M103 4L114 8L109 19" fill="#22C55E"/>
|
||||
{/* Four corner avatars */}
|
||||
<circle cx="14" cy="22" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
|
||||
<circle cx="14" cy="18" r="4" fill="#6330D6" opacity="0.4"/>
|
||||
<circle cx="122" cy="20" r="11" fill="#DCFCE7" stroke="#22C55E" strokeWidth="1.2"/>
|
||||
<circle cx="122" cy="16" r="4" fill="#22C55E" opacity="0.4"/>
|
||||
<circle cx="12" cy="80" r="11" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.2"/>
|
||||
<circle cx="12" cy="76" r="4" fill="#F59E0B" opacity="0.4"/>
|
||||
<circle cx="122" cy="80" r="11" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.2"/>
|
||||
<circle cx="122" cy="76" r="4" fill="#6330D6" opacity="0.4"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function IncreaseSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 136 96" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
{/* Small figure */}
|
||||
<circle cx="22" cy="52" r="10" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<circle cx="22" cy="48" r="4" fill="#6330D6" opacity="0.4"/>
|
||||
<path d="M12 80Q12 66 22 66Q32 66 32 80" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
{/* Medium figure */}
|
||||
<circle cx="60" cy="44" r="13" fill="#A78BFA" opacity="0.72"/>
|
||||
<circle cx="60" cy="39" r="5.5" fill="#7C3AED" opacity="0.55"/>
|
||||
<path d="M46 80Q46 62 60 62Q74 62 74 80" fill="#A78BFA" opacity="0.72"/>
|
||||
{/* Large figure */}
|
||||
<circle cx="106" cy="34" r="17" fill="#6330D6" opacity="0.78"/>
|
||||
<circle cx="106" cy="28" r="7" fill="#4C1D95" opacity="0.55"/>
|
||||
<path d="M86 80Q86 54 106 54Q126 54 126 80" fill="#6330D6" opacity="0.78"/>
|
||||
{/* Growth arc */}
|
||||
<path d="M16 44Q52 14 106 18" stroke="#22C55E" strokeWidth="2" strokeLinecap="round" strokeDasharray="4 3"/>
|
||||
{/* Plus badge */}
|
||||
<rect x="124" y="16" width="10" height="2.5" rx="1.2" fill="#22C55E"/>
|
||||
<rect x="127.75" y="12.25" width="2.5" height="10" rx="1.2" fill="#22C55E"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Card SVG Illustrations ───────────────────────────────────────────────────
|
||||
|
||||
function MoreCardSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
|
||||
{/* Rising bars */}
|
||||
<rect x="14" y="110" width="32" height="64" rx="5" fill="#EDE9FE" stroke="#6330D6" strokeWidth="1.5"/>
|
||||
<rect x="58" y="86" width="32" height="88" rx="5" fill="#A78BFA"/>
|
||||
<rect x="102" y="56" width="32" height="118" rx="5" fill="#6330D6"/>
|
||||
{/* Curved green arrow */}
|
||||
<path d="M14 108Q72 42 152 22" stroke="#22C55E" strokeWidth="3" strokeLinecap="round"/>
|
||||
<path d="M143 16L157 22L147 34" fill="#22C55E"/>
|
||||
{/* Gold coin */}
|
||||
<circle cx="182" cy="134" r="32" fill="#FEF3C7"/>
|
||||
<circle cx="182" cy="134" r="25" fill="#FDE68A"/>
|
||||
<circle cx="182" cy="134" r="18" fill="#FCD34D"/>
|
||||
<text x="182" y="141" textAnchor="middle" fontSize="18" fontWeight="bold" fill="#78350F">₹</text>
|
||||
{/* Decorative leaves */}
|
||||
<ellipse cx="16" cy="162" rx="9" ry="14" fill="#22C55E" opacity="0.32" transform="rotate(-20 16 162)"/>
|
||||
<ellipse cx="5" cy="158" rx="7" ry="11" fill="#22C55E" opacity="0.22" transform="rotate(-36 5 158)"/>
|
||||
<line x1="8" y1="174" x2="138" y2="174" stroke="#D1D5DB" strokeWidth="1" strokeDasharray="3 2"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FastCardSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
|
||||
{/* Speed lines */}
|
||||
<line x1="4" y1="72" x2="52" y2="72" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
|
||||
<line x1="2" y1="90" x2="46" y2="90" stroke="white" strokeWidth="2" opacity="0.16" strokeLinecap="round"/>
|
||||
<line x1="4" y1="108" x2="50" y2="108" stroke="white" strokeWidth="2.5" opacity="0.22" strokeLinecap="round"/>
|
||||
{/* Clipboard body */}
|
||||
<rect x="52" y="14" width="96" height="114" rx="10" fill="white" opacity="0.96"/>
|
||||
<rect x="74" y="8" width="52" height="18" rx="8" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
|
||||
<circle cx="100" cy="8" r="5.5" fill="#7C3AED"/>
|
||||
{/* Checklist row 1 – done */}
|
||||
<circle cx="68" cy="48" r="6.5" fill="#22C55E"/>
|
||||
<path d="M65 48L67.5 50.5L72.5 44.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<rect x="80" y="42" width="58" height="12" rx="4" fill="#EDE9FE"/>
|
||||
<rect x="80" y="42" width="40" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
|
||||
{/* Row 2 – done */}
|
||||
<circle cx="68" cy="70" r="6.5" fill="#22C55E"/>
|
||||
<path d="M65 70L67.5 72.5L72.5 66.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<rect x="80" y="64" width="58" height="12" rx="4" fill="#EDE9FE"/>
|
||||
<rect x="80" y="64" width="48" height="12" rx="4" fill="#22C55E" opacity="0.55"/>
|
||||
{/* Row 3 – pending */}
|
||||
<circle cx="68" cy="92" r="6.5" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.2"/>
|
||||
<rect x="80" y="86" width="58" height="12" rx="4" fill="#EDE9FE"/>
|
||||
<rect x="80" y="86" width="26" height="12" rx="4" fill="#A78BFA" opacity="0.4"/>
|
||||
{/* Delivery boxes */}
|
||||
<rect x="112" y="106" width="54" height="44" rx="6" fill="#FEF3C7" stroke="#F59E0B" strokeWidth="1.5"/>
|
||||
<rect x="122" y="88" width="50" height="36" rx="6" fill="#FDE68A" stroke="#F59E0B" strokeWidth="1.5"/>
|
||||
<line x1="112" y1="128" x2="166" y2="128" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
|
||||
<line x1="139" y1="106" x2="139" y2="150" stroke="#F59E0B" strokeWidth="1" opacity="0.45"/>
|
||||
<circle cx="147" cy="120" r="9" fill="#6330D6" opacity="0.82"/>
|
||||
<text x="147" y="123.5" textAnchor="middle" fontSize="9.5" fontWeight="bold" fill="white">N</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function EasyCardSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
|
||||
{/* Laptop shell */}
|
||||
<rect x="14" y="22" width="162" height="108" rx="9" fill="#F1F5F9" stroke="#E2E8F0" strokeWidth="1.5"/>
|
||||
<rect x="22" y="30" width="146" height="92" rx="5" fill="white"/>
|
||||
{/* Bottom base */}
|
||||
<rect x="4" y="128" width="182" height="13" rx="6" fill="#E2E8F0"/>
|
||||
<rect x="72" y="141" width="46" height="6" rx="3" fill="#D1D5DB"/>
|
||||
{/* Screen rows */}
|
||||
<rect x="34" y="44" width="126" height="10" rx="3" fill="#EDE9FE"/>
|
||||
<rect x="34" y="44" width="90" height="10" rx="3" fill="#A78BFA" opacity="0.58"/>
|
||||
<rect x="34" y="62" width="126" height="10" rx="3" fill="#EDE9FE"/>
|
||||
<rect x="34" y="62" width="58" height="10" rx="3" fill="#6330D6" opacity="0.65"/>
|
||||
<rect x="34" y="80" width="126" height="10" rx="3" fill="#EDE9FE"/>
|
||||
<rect x="34" y="80" width="76" height="10" rx="3" fill="#A78BFA" opacity="0.45"/>
|
||||
<rect x="34" y="98" width="126" height="10" rx="3" fill="#EDE9FE"/>
|
||||
<rect x="34" y="98" width="44" height="10" rx="3" fill="#6330D6" opacity="0.38"/>
|
||||
{/* Big green check badge */}
|
||||
<circle cx="162" cy="108" r="36" fill="#DCFCE7" stroke="#22C55E" strokeWidth="2"/>
|
||||
<circle cx="162" cy="108" r="27" fill="#22C55E"/>
|
||||
<path d="M149 108L159 118L177 96" stroke="white" strokeWidth="4.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
{/* Small plant */}
|
||||
<ellipse cx="20" cy="170" rx="8" ry="12" fill="#22C55E" opacity="0.32" transform="rotate(-15 20 170)"/>
|
||||
<ellipse cx="9" cy="172" rx="6" ry="9" fill="#22C55E" opacity="0.22" transform="rotate(-30 9 172)"/>
|
||||
<rect x="18" y="164" width="3" height="14" rx="1.5" fill="#16A34A" opacity="0.28"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SupportCardSVG() {
|
||||
return (
|
||||
<svg viewBox="0 0 220 190" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full" aria-hidden="true">
|
||||
{/* Headset arc */}
|
||||
<path d="M42 108Q42 46 110 46Q178 46 178 108" stroke="#6330D6" strokeWidth="13" fill="none" strokeLinecap="round"/>
|
||||
{/* Left ear cup */}
|
||||
<rect x="24" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
|
||||
<rect x="30" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
|
||||
{/* Right ear cup */}
|
||||
<rect x="162" y="96" width="34" height="56" rx="15" fill="#7C3AED"/>
|
||||
<rect x="168" y="102" width="22" height="44" rx="11" fill="#A78BFA"/>
|
||||
{/* Mic arm */}
|
||||
<path d="M162 138Q186 138 190 164" stroke="#6330D6" strokeWidth="8" strokeLinecap="round" fill="none"/>
|
||||
<circle cx="190" cy="166" r="10" fill="#6330D6"/>
|
||||
{/* Chat bubble */}
|
||||
<rect x="58" y="50" width="104" height="56" rx="14" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5"/>
|
||||
<path d="M86 106L80 120L104 106" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1.5" strokeLinejoin="round"/>
|
||||
{/* 24/7 label in bubble */}
|
||||
<text x="110" y="87" textAnchor="middle" fontSize="26" fontWeight="900" fill="#6330D6">24/7</text>
|
||||
{/* Three chat dots below */}
|
||||
<circle cx="90" cy="160" r="7" fill="#EDE9FE" stroke="#8B5CF6" strokeWidth="1"/>
|
||||
<circle cx="110" cy="160" r="7" fill="#8B5CF6" opacity="0.55"/>
|
||||
<circle cx="130" cy="160" r="7" fill="#6330D6" opacity="0.38"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Section Data ──────────────────────────────────────────────────────────────
|
||||
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Direct Customer Access",
|
||||
descr: "Build direct relationships and trust with residents in your immediate vicinity.",
|
||||
Illus: DirectAccessSVG,
|
||||
},
|
||||
{
|
||||
title: "Become a Partner",
|
||||
descr: "Be part of a strong community of like-minded people. A unified partner for neighborhood needs.",
|
||||
Illus: PartnerSVG,
|
||||
},
|
||||
{
|
||||
title: "Build Your Brand",
|
||||
descr: "Brand your business on Nearle and reach out to your community with ease.",
|
||||
Illus: BrandSVG,
|
||||
},
|
||||
{
|
||||
title: "Huge Opportunity",
|
||||
descr: "Unlock revenue opportunities and marketing strategies that will take your business further.",
|
||||
Illus: OpportunitySVG,
|
||||
},
|
||||
{
|
||||
title: "Delight Your Customers",
|
||||
descr: "Delight customers in the neighborhood with a personalized online shopping experience.",
|
||||
Illus: DelightSVG,
|
||||
},
|
||||
{
|
||||
title: "Unique Model",
|
||||
descr: "Hyperlocal commerce is an effective, sustainable model to meet today's consumer needs.",
|
||||
Illus: UniqueModelSVG,
|
||||
},
|
||||
{
|
||||
title: "Reach Right Audience",
|
||||
descr: "We target your ideal customers — people in your neighborhood search for what you offer.",
|
||||
Illus: AudienceSVG,
|
||||
},
|
||||
{
|
||||
title: "Increase Your Customers",
|
||||
descr: "Increase walk-in and online customers by targeting local demand.",
|
||||
Illus: IncreaseSVG,
|
||||
},
|
||||
];
|
||||
|
||||
const CARDS = [
|
||||
{
|
||||
title: "More",
|
||||
subtitle: "REVENUE FROM LOCAL REACH",
|
||||
bg: "bg-white",
|
||||
titleColor: "text-[#16001D]",
|
||||
subtitleColor: "text-[#6330D6]/55",
|
||||
iconName: "trending_up",
|
||||
iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
|
||||
CardIllus: MoreCardSVG,
|
||||
stagger: false,
|
||||
},
|
||||
{
|
||||
title: "Fast",
|
||||
subtitle: "RELIABLE ORDER FULFILLMENT",
|
||||
bg: "bg-gradient-to-br from-[#5B21B6] to-[#6330D6]",
|
||||
titleColor: "text-white",
|
||||
subtitleColor: "text-white/65",
|
||||
iconName: "groups",
|
||||
iconBg: "bg-white/15 text-white",
|
||||
CardIllus: FastCardSVG,
|
||||
stagger: true,
|
||||
},
|
||||
{
|
||||
title: "Easy",
|
||||
subtitle: "SIMPLE TO START & MANAGE",
|
||||
bg: "bg-white",
|
||||
titleColor: "text-[#16001D]",
|
||||
subtitleColor: "text-[#6330D6]/55",
|
||||
iconName: "storefront",
|
||||
iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
|
||||
CardIllus: EasyCardSVG,
|
||||
stagger: false,
|
||||
},
|
||||
{
|
||||
title: "24/7",
|
||||
subtitle: "MERCHANT SUPPORT",
|
||||
bg: "bg-white",
|
||||
titleColor: "text-[#16001D]",
|
||||
subtitleColor: "text-[#6330D6]/55",
|
||||
iconName: "support_agent",
|
||||
iconBg: "bg-[#6330D6]/8 text-[#6330D6]",
|
||||
CardIllus: SupportCardSVG,
|
||||
stagger: true,
|
||||
},
|
||||
];
|
||||
|
||||
// ─── Main component ───────────────────────────────────────────────────────────
|
||||
|
||||
export function BusinessFeaturesGrid() {
|
||||
return (
|
||||
<section
|
||||
className="bg-[#FAF7FD] border-b border-[#6330D6]/10 overflow-hidden"
|
||||
style={{ paddingTop: "clamp(44px, 4.5vw, 64px)", paddingBottom: "clamp(44px, 4.5vw, 64px)" }}
|
||||
>
|
||||
{/* Centered page container */}
|
||||
<div
|
||||
className="mx-auto w-[calc(100%-48px)] md:w-[calc(100%-64px)] xl:w-[calc(100%-96px)]"
|
||||
style={{ maxWidth: 1800 }}
|
||||
>
|
||||
{/* Main two-column grid */}
|
||||
<div
|
||||
className="grid items-start xl:grid-cols-[minmax(0,1.58fr)_minmax(500px,0.92fr)]"
|
||||
style={{ gap: "clamp(48px, 5vw, 72px)" }}
|
||||
>
|
||||
|
||||
{/* ── LEFT — clean text feature grid, no illustrations ── */}
|
||||
<div>
|
||||
{/* Badge */}
|
||||
<span className="inline-flex items-center rounded-full bg-[#6330D6]/[0.08] px-3.5 py-1 text-xs font-black uppercase tracking-widest text-[#6330D6]">
|
||||
Our features
|
||||
</span>
|
||||
|
||||
{/* Heading */}
|
||||
<h2
|
||||
className="font-display font-black text-[#16001D] mt-4"
|
||||
style={{
|
||||
fontSize: "clamp(36px, 3.4vw, 60px)",
|
||||
lineHeight: 1.08,
|
||||
letterSpacing: "-0.04em",
|
||||
maxWidth: 780,
|
||||
marginBottom: 0,
|
||||
}}
|
||||
>
|
||||
Move Your Business Forward
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
<p
|
||||
className="text-[#5E5866]"
|
||||
style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 760, marginTop: 16, marginBottom: 36 }}
|
||||
>
|
||||
Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease.
|
||||
</p>
|
||||
|
||||
{/* Feature list – check + text only, no illustration columns */}
|
||||
<div
|
||||
className="grid grid-cols-1 md:grid-cols-2"
|
||||
style={{ columnGap: 48, rowGap: 32 }}
|
||||
>
|
||||
{FEATURES.map((feat) => (
|
||||
<div
|
||||
key={feat.title}
|
||||
className="grid items-start"
|
||||
style={{ gridTemplateColumns: "30px 1fr", columnGap: 16 }}
|
||||
>
|
||||
{/* Green check icon */}
|
||||
<div
|
||||
className="rounded-full bg-[#DCFCE7] flex items-center justify-center shrink-0"
|
||||
style={{ width: 30, height: 30, marginTop: 3 }}
|
||||
>
|
||||
<svg viewBox="0 0 16 16" fill="none" style={{ width: 15, height: 15 }} aria-hidden="true">
|
||||
<path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="#16A34A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Title + description */}
|
||||
<div className="min-w-0">
|
||||
<h4
|
||||
className="font-display font-black text-[#16001D]"
|
||||
style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 8 }}
|
||||
>
|
||||
{feat.title}
|
||||
</h4>
|
||||
<p className="text-[#5E5866]" style={{ fontSize: 15, lineHeight: 1.55 }}>
|
||||
{feat.descr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── RIGHT — 4 cards + illustration strip below ─────── */}
|
||||
<div className="self-start flex flex-col" style={{ gap: 28 }}>
|
||||
|
||||
{/* 2×2 feature benefit cards */}
|
||||
<div className="grid grid-cols-2" style={{ gap: 28 }}>
|
||||
{CARDS.map((card) => {
|
||||
const { CardIllus } = card;
|
||||
return (
|
||||
<div
|
||||
key={card.title}
|
||||
className={`relative flex flex-col overflow-hidden border border-[#6330D6]/10 shadow-[0_4px_28px_rgba(99,48,214,0.09)] ${card.bg}`}
|
||||
style={{ borderRadius: 34, padding: 28, minHeight: 330 }}
|
||||
>
|
||||
{/* Top icon */}
|
||||
<div className={`w-9 h-9 rounded-full flex items-center justify-center shrink-0 ${card.iconBg}`}>
|
||||
<MaterialIcon icon={card.iconName} size={18} />
|
||||
</div>
|
||||
|
||||
{/* Illustration */}
|
||||
<div
|
||||
className="flex-1 flex items-center justify-center overflow-hidden"
|
||||
style={{ margin: "8px 0" }}
|
||||
>
|
||||
<div className="w-full" style={{ height: 160 }}>
|
||||
<CardIllus />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom label */}
|
||||
<div className="mt-auto shrink-0">
|
||||
<p
|
||||
className={`font-display font-black leading-none tracking-tight ${card.titleColor}`}
|
||||
style={{ fontSize: "clamp(26px, 2.2vw, 42px)" }}
|
||||
>
|
||||
{card.title}
|
||||
</p>
|
||||
<p
|
||||
className={`font-black tracking-widest uppercase ${card.subtitleColor}`}
|
||||
style={{ fontSize: 10, marginTop: 6 }}
|
||||
>
|
||||
{card.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -2,148 +2,233 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const BENEFITS = [
|
||||
const FEATURES = [
|
||||
{
|
||||
title: "Digital Catalogue",
|
||||
desc: "Showcase your products online easily to nearby customers.",
|
||||
desc: "Showcase your products online and keep your catalogue updated.",
|
||||
icon: "menu_book",
|
||||
iconColor: "bg-primary/5 text-primary",
|
||||
visual: "/images/nearle-merchant/catalogue-ui.webp",
|
||||
alt: "Clean grocery catalogue interface preview",
|
||||
tone: "bg-primary/8 text-primary",
|
||||
},
|
||||
{
|
||||
title: "QR Ordering",
|
||||
desc: "Enable existing customers to scan and place orders directly at your counter.",
|
||||
desc: "Let customers scan, browse, and place orders directly from your store.",
|
||||
icon: "qr_code",
|
||||
iconColor: "bg-secondary/5 text-secondary",
|
||||
visual: "/images/nearle-merchant/qr-stand.webp",
|
||||
alt: "QR ordering stand on a local grocery store counter",
|
||||
tone: "bg-secondary/8 text-secondary",
|
||||
},
|
||||
{
|
||||
title: "Local Discovery",
|
||||
desc: "Get discovered by residents in your neighbourhood searching for your products.",
|
||||
icon: "explore",
|
||||
iconColor: "bg-[#de96f9]/10 text-primary",
|
||||
desc: "Get discovered by nearby customers searching for products you sell.",
|
||||
icon: "location_on",
|
||||
visual: "/images/nearle-merchant/local-map.webp",
|
||||
alt: "Local discovery map with purple pins and a store listing",
|
||||
tone: "bg-[#de96f9]/10 text-primary",
|
||||
},
|
||||
{
|
||||
title: "Delivery Support",
|
||||
desc: "Fulfill orders with your own staff or rely on Nearle's local delivery partners.",
|
||||
desc: "Deliver orders easily with your own staff or trusted local delivery partners.",
|
||||
icon: "local_shipping",
|
||||
iconColor: "bg-rose-500/5 text-rose-600",
|
||||
visual: "/images/nearle-merchant/delivery-support.webp",
|
||||
alt: "Local delivery partner handing a grocery bag to a customer",
|
||||
tone: "bg-rose-500/5 text-rose-600",
|
||||
},
|
||||
];
|
||||
|
||||
const BENEFITS = [
|
||||
{
|
||||
icon: "verified_user",
|
||||
title: "Verified & Trusted",
|
||||
desc: "All stores are verified for quality and reliability.",
|
||||
},
|
||||
{
|
||||
icon: "groups",
|
||||
title: "2L+ Customers",
|
||||
desc: "Join thousands of merchants already growing with Nearle.",
|
||||
},
|
||||
{
|
||||
icon: "trending_up",
|
||||
title: "Growing Together",
|
||||
desc: "We provide the tools, you focus on your customers.",
|
||||
},
|
||||
{
|
||||
icon: "headset_mic",
|
||||
title: "Support That Cares",
|
||||
desc: "Our team is always here to help you succeed.",
|
||||
},
|
||||
];
|
||||
|
||||
export function BusinessSection() {
|
||||
return (
|
||||
<section className="px-6 py-12 md:py-16">
|
||||
<div className="w-full">
|
||||
<section className="section bg-white w-full overflow-hidden">
|
||||
<div className="page-container">
|
||||
<div className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,#ffffff_0%,#fbf7ff_50%,#ede4f5_100%)] border border-primary/10 shadow-[0_24px_70px_rgba(22,0,29,0.08)] p-5 md:p-8 lg:p-10">
|
||||
<div className="pointer-events-none absolute -left-16 top-24 h-64 w-64 rounded-full bg-primary/5 blur-3xl" />
|
||||
<div className="pointer-events-none absolute -right-20 bottom-10 h-64 w-64 rounded-full bg-secondary/5 blur-3xl" />
|
||||
|
||||
{/* Merchant Section Grid */}
|
||||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||||
{/*
|
||||
* Grid layout:
|
||||
* mobile (<768px) : 1 col — text → cards (1/row) → success story [via CSS order]
|
||||
* tablet (768–1279px) : 1 col — text → success story → cards 2×2 [via CSS order]
|
||||
* desktop (≥1280px) : 2 col — [left: text + success story] | [right: cards 2×2]
|
||||
*/}
|
||||
<div className="relative grid gap-6 grid-cols-1 md:gap-7
|
||||
xl:grid-cols-[minmax(0,35fr)_minmax(0,65fr)] xl:gap-8 xl:items-start">
|
||||
|
||||
{/* Left Column: Feature copywriting (7 cols) */}
|
||||
<div className="lg:col-span-7">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/5 px-3.5 py-1.5 rounded-full border border-secondary/15">
|
||||
Merchant Partnerships
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-6 mb-6 leading-tight tracking-tight">
|
||||
Bring Your Store Online with Nearle.
|
||||
</h2>
|
||||
<p className="text-body-lg text-on-surface-variant mb-10 max-w-xl leading-relaxed">
|
||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4 mb-10 text-sm md:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
{/* ── 1. Left text content (always col-1 row-1) ── */}
|
||||
<div className="min-w-0 xl:col-start-1 xl:row-start-1">
|
||||
{/* Badge */}
|
||||
<div className="flex w-fit items-center gap-2 rounded-full border border-secondary/20 bg-secondary/5 px-3 py-1.5">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-secondary/15">
|
||||
<MaterialIcon icon="storefront" size={13} className="text-secondary" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Stay in control of your pricing and orders</span>
|
||||
<span className="text-[11px] font-black uppercase tracking-widest text-secondary">
|
||||
Merchant Partnerships
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-secondary/10 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-secondary font-bold" />
|
||||
|
||||
<h2 className="mt-5 mb-4 font-display font-black text-brand-dark leading-[1.06] tracking-tight text-[clamp(2.5rem,7vw,3.5rem)]">
|
||||
Bring Your Store Online with{" "}
|
||||
<span className="text-primary font-normal">Nearle.</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-base text-on-surface-variant leading-relaxed max-w-sm">
|
||||
Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.
|
||||
</p>
|
||||
|
||||
<div className="mt-5 space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
||||
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark text-sm md:text-base">
|
||||
Stay in control of your pricing and orders
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark">Build direct relationships with local families</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-secondary/10">
|
||||
<MaterialIcon icon="check" size={15} className="text-secondary font-bold" />
|
||||
</div>
|
||||
<span className="font-bold text-brand-dark text-sm md:text-base">
|
||||
Build direct relationships with local families
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-7 flex flex-col gap-3">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full bg-primary px-7 py-3.5 text-base font-black text-white shadow-sm transition-all duration-200 hover:bg-primary-container hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95"
|
||||
>
|
||||
Partner With Nearle
|
||||
<MaterialIcon icon="arrow_forward" size={18} />
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-full border border-outline-variant/40 bg-white px-7 py-3.5 text-base font-black text-brand-dark shadow-sm transition-all duration-300 hover:bg-surface-container-high hover:shadow-md active:scale-95"
|
||||
>
|
||||
Talk to Our Team
|
||||
<MaterialIcon icon="arrow_forward" size={18} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mt-8">
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="bg-primary hover:bg-primary-container text-white font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Partner With Nearle
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="bg-white hover:bg-surface-container-high text-brand-dark border border-outline-variant/30 font-black px-10 py-4 rounded-full text-sm md:text-base hover:shadow-md transition-all duration-300 active:scale-95 flex items-center gap-2"
|
||||
>
|
||||
Talk to Our Team
|
||||
</Link>
|
||||
{/* ── 2. Feature cards — 2×2 grid (right col on desktop) ──
|
||||
mobile : order-2 → appears after text, before success story
|
||||
tablet : order-3 → appears after text + success story
|
||||
desktop : explicit col-2, row-span-2
|
||||
*/}
|
||||
<div className="min-w-0
|
||||
order-2 md:order-3
|
||||
xl:order-none xl:col-start-2 xl:row-start-1 xl:row-span-2
|
||||
grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{FEATURES.map((feature) => (
|
||||
<article
|
||||
key={feature.title}
|
||||
className="merchant-feature-card flex min-w-0 flex-col overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white shadow-[0_4px_24px_rgba(22,0,29,0.07)]"
|
||||
>
|
||||
<div className="p-5">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ${feature.tone}`}>
|
||||
<MaterialIcon icon={feature.icon} size={22} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-auto w-full overflow-hidden">
|
||||
<Image
|
||||
src={feature.visual}
|
||||
alt={feature.alt}
|
||||
width={900}
|
||||
height={560}
|
||||
sizes="(max-width: 767px) 90vw, (max-width: 1279px) 45vw, 30vw"
|
||||
className="block h-auto w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Benefit Grid Cardless (5 cols) */}
|
||||
<div className="lg:col-span-5 grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10">
|
||||
{BENEFITS.map((benefit) => (
|
||||
<div key={benefit.title} className="flex flex-col items-start group">
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center mb-4 transition-transform duration-300 group-hover:-translate-y-0.5 shadow-sm ${benefit.iconColor}`}>
|
||||
<MaterialIcon icon={benefit.icon} size={28} />
|
||||
</div>
|
||||
<h3 className="text-xl md:text-2xl font-black tracking-tight text-brand-dark mb-2">
|
||||
{benefit.title}
|
||||
{/* ── 3. Success story ──
|
||||
mobile : order-3 → appears after feature cards
|
||||
tablet : order-2 → appears after text, before cards
|
||||
desktop : explicit col-1, row-2 (below text in left column)
|
||||
*/}
|
||||
<div className="min-w-0
|
||||
order-3 md:order-2
|
||||
xl:order-none xl:col-start-1 xl:row-start-2
|
||||
overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.07)]
|
||||
grid grid-cols-[100px_minmax(0,1fr)]">
|
||||
<div className="relative min-h-[128px] overflow-hidden bg-brand-accent-light">
|
||||
<Image
|
||||
src="/images/nearle-merchant/success-owner.webp"
|
||||
alt="Indian grocery shop owner using a smartphone inside a kirana store"
|
||||
fill
|
||||
sizes="100px"
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 px-4 py-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-primary">
|
||||
Success Story
|
||||
</span>
|
||||
<h3 className="mt-1.5 text-base font-black leading-tight text-brand-dark">
|
||||
Kumar Provision Store
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
|
||||
{benefit.desc}
|
||||
<p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
|
||||
Nearle helped us reach more customers in our area and manage orders effortlessly.
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* CURVED PROMO BANNER (Bottom CTA Block) */}
|
||||
<div className="mt-8 md:mt-10 relative overflow-hidden bg-brand-accent rounded-[3.5rem] p-10 md:p-20 flex flex-col md:flex-row justify-between items-center gap-12 border border-brand-accent/20 shadow-2xl">
|
||||
{/* Decorative background vectors */}
|
||||
<div className="absolute right-0 top-0 w-[400px] h-[400px] bg-white/10 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute left-10 bottom-0 w-[200px] h-[200px] bg-brand-dark/5 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
{/* Left copy column */}
|
||||
<div className="md:w-3/5 z-10 text-brand-dark">
|
||||
<span className="text-xs font-black uppercase tracking-widest bg-brand-dark/15 px-3.5 py-1.5 rounded-full">
|
||||
Piping Hot & Fresh
|
||||
</span>
|
||||
<h3 className="text-4xl md:text-5xl lg:text-[54px] mt-6 mb-4 leading-[1.1] font-display font-black tracking-tight">
|
||||
Everything Nearby, <br />From Stores You Trust.
|
||||
</h3>
|
||||
<p className="text-body-lg text-brand-dark/80 mb-8 max-w-md font-semibold leading-relaxed">
|
||||
Groceries, medicines, food, and everyday essentials — all from your neighbourhood.
|
||||
</p>
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-brand-dark hover:bg-brand-dark/90 text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-2xl transition-all hover:-translate-y-0.5 active:translate-y-0 active:scale-95 duration-200 inline-block shadow-md text-center"
|
||||
>
|
||||
Explore Stores Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Right visual column */}
|
||||
<div className="md:w-2/5 relative flex justify-center items-center">
|
||||
{/* Soft background shape */}
|
||||
<div className="absolute w-[260px] h-[260px] bg-brand-dark/10 rounded-full pointer-events-none scale-110" />
|
||||
|
||||
<div className="relative w-full max-w-[280px] aspect-square rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl rotate-3 hover:rotate-0 transition-transform duration-500">
|
||||
<Image
|
||||
src="/images/cat-hot-food.png"
|
||||
alt="Hot meals from Nearle local kitchen partners"
|
||||
width={400}
|
||||
height={400}
|
||||
className="w-full h-full object-cover scale-105"
|
||||
/>
|
||||
{/* ── Benefits strip ── */}
|
||||
<div className="relative mt-6 overflow-hidden rounded-[1.5rem] border border-primary/10 bg-white/90 shadow-[0_4px_24px_rgba(22,0,29,0.06)]">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 divide-y sm:divide-y-0 sm:divide-x divide-primary/8 xl:divide-x xl:divide-y-0">
|
||||
{BENEFITS.map((b) => (
|
||||
<div key={b.title} className="flex items-start gap-3 p-5">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary/10 text-secondary">
|
||||
<MaterialIcon icon={b.icon} size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-black text-brand-dark">{b.title}</div>
|
||||
<div className="mt-0.5 text-xs leading-relaxed text-on-surface-variant">{b.desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -3,15 +3,15 @@ import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const PROOF_ITEMS = [
|
||||
{ label: "1000+", text: "Verified Stores", icon: "store" },
|
||||
{ label: "Verified", text: "Local Stores", icon: "store" },
|
||||
{ label: "2km", text: "Neighbourhood Coverage", icon: "location_on" },
|
||||
{ label: "50,000+", text: "Happy Customers", icon: "mood" },
|
||||
{ label: "4.7 ★", text: "Average Rating", icon: "star" },
|
||||
{ label: "Growing", text: "Customer Community", icon: "mood" },
|
||||
{ label: "Trusted", text: "Local Platform", icon: "star" },
|
||||
];
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white select-none w-full">
|
||||
<section className="relative overflow-hidden bg-gradient-to-b from-[#FAF8FC] to-[#FFFFFF] select-none w-full">
|
||||
{/* ─── DECORATIONS (BEHIND CONTENT) ─── */}
|
||||
|
||||
{/* 1. Large pale lavender partial circle (top-left) */}
|
||||
@@ -47,7 +47,7 @@ export function Hero() {
|
||||
<div className="absolute bottom-[-100px] right-[-100px] w-[200px] h-[200px] rounded-full bg-[#7C3AED]/80 z-0 pointer-events-none" />
|
||||
|
||||
{/* ─── TWO-COLUMN CONTENT GRID ─── */}
|
||||
<div className="relative mx-auto grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center px-8 py-16 md:px-12 lg:px-16 xl:px-20 z-10 gap-12 lg:gap-6">
|
||||
<div className="page-container relative grid min-h-[650px] grid-cols-1 lg:grid-cols-[0.92fr_1.08fr] items-center py-16 md:py-20 lg:py-24 z-10 gap-12 lg:gap-6">
|
||||
|
||||
{/* LEFT COLUMN: Editorial Typography & Copy */}
|
||||
<div className="flex flex-col text-left max-w-xl z-20 relative">
|
||||
@@ -68,13 +68,13 @@ export function Hero() {
|
||||
<div className="flex flex-col sm:flex-row gap-3.5 mt-8 w-full sm:w-auto">
|
||||
<Link
|
||||
href="/people"
|
||||
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-98"
|
||||
className="bg-[#6D28D9] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
|
||||
>
|
||||
Explore Stores
|
||||
</Link>
|
||||
<Link
|
||||
href="/people#download-section"
|
||||
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-98"
|
||||
className="border-2 border-[#6D28D9]/20 hover:border-[#6D28D9]/40 text-[#6D28D9] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6D28D9]/5 active:scale-[0.98]"
|
||||
>
|
||||
Get the App
|
||||
</Link>
|
||||
@@ -97,16 +97,18 @@ export function Hero() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* middle image: absolute left-[38%] top-[8%] w-[190px] h-[430px] */}
|
||||
<div className="absolute left-[38%] top-[8%] w-[190px] h-[430px] rounded-[1.5rem] overflow-hidden shadow-xl border-2 border-white z-20 transition-transform duration-300 hover:scale-[1.02]">
|
||||
<Image
|
||||
src="/Nearle Business.png"
|
||||
alt="Local merchant delivery"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="190px"
|
||||
priority
|
||||
/>
|
||||
{/* middle image: central logo panel absolute left-[38%] top-[8%] */}
|
||||
<div className="absolute left-[38%] top-[8%] z-20 transition-transform duration-300 hover:scale-[1.02]">
|
||||
<div className="relative w-[180px] sm:w-[220px] h-[280px] sm:h-[340px] rounded-[24px] border-[5px] sm:border-[6px] border-white/95 shadow-[0_20px_40px_rgba(99,48,214,0.1)] bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-6">
|
||||
<Image
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Central logo panel"
|
||||
width={160}
|
||||
height={160}
|
||||
className="object-contain max-h-[140px] w-auto animate-[pulse_6s_infinite]"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* right image: absolute right-[2%] top-[18%] w-[180px] h-[390px] */}
|
||||
@@ -132,13 +134,14 @@ export function Hero() {
|
||||
sizes="95px"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-[115px] h-[240px] rounded-2xl overflow-hidden border border-white shadow-lg -mx-5 z-20">
|
||||
<div className="relative w-[115px] h-[240px] rounded-2xl border-4 border-white shadow-lg bg-[#FAF8FC] overflow-hidden flex items-center justify-center p-3 -mx-5 z-20">
|
||||
<Image
|
||||
src="/Nearle Business.png"
|
||||
alt="Merchant"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="115px"
|
||||
src="/nearlenewlogo.png"
|
||||
alt="Central logo panel"
|
||||
width={100}
|
||||
height={100}
|
||||
className="object-contain max-h-[90px] w-auto animate-[pulse_6s_infinite]"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="relative w-[105px] h-[220px] rounded-2xl overflow-hidden border border-white shadow-md z-10">
|
||||
@@ -157,20 +160,28 @@ export function Hero() {
|
||||
</div>
|
||||
|
||||
{/* ─── BOTTOM PROOF STATS ROW ─── */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-[#EEE7F4] bg-white px-8 py-8 md:px-12 lg:px-16 z-20 relative">
|
||||
{PROOF_ITEMS.map((item) => (
|
||||
<div key={item.label} className="flex flex-col items-start text-left pl-2 md:pl-4">
|
||||
<div className="w-8 h-8 rounded-full bg-[#6D28D9]/10 text-[#6D28D9] flex items-center justify-center mb-3">
|
||||
<MaterialIcon icon={item.icon} size={16} />
|
||||
<div className="border-t border-[#EEE7F4]/80 bg-white">
|
||||
<div className="page-container py-8 grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 relative z-20">
|
||||
{PROOF_ITEMS.map((item, idx) => (
|
||||
<div key={item.label} className="flex items-center gap-4 text-left md:justify-center relative">
|
||||
{/* Subtle vertical separator for desktop, except for the first item */}
|
||||
{idx > 0 && (
|
||||
<div className="hidden md:block absolute left-0 top-1/2 -translate-y-1/2 w-[1px] h-10 bg-[#EEE7F4]" />
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-full bg-[#6D28D9]/8 text-[#6D28D9] flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon={item.icon} size={18} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="text-xs text-[#6D6172] font-semibold mt-1">
|
||||
{item.text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-2xl md:text-3xl font-black text-[#16001D] leading-none tracking-tight">
|
||||
{item.label}
|
||||
</div>
|
||||
<div className="text-xs text-[#6D6172] font-semibold mt-1">
|
||||
{item.text}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -1,72 +1,277 @@
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const STEPS = [
|
||||
{
|
||||
num: "01",
|
||||
title: "Choose Your Area",
|
||||
desc: "See stores available around your neighbourhood.",
|
||||
icon: "location_on",
|
||||
color: "bg-primary/5 text-primary border-primary/10",
|
||||
icon: "storefront",
|
||||
title: "Get Online",
|
||||
desc: "Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.",
|
||||
visual: "store",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "Pick Your Favourite Store",
|
||||
desc: "Browse groceries, medicines, and daily essentials nearby.",
|
||||
icon: "storefront",
|
||||
color: "bg-secondary/5 text-secondary border-secondary/10",
|
||||
icon: "campaign",
|
||||
title: "Get Noticed",
|
||||
desc: "Your products get published to Nearle customers in your neighbourhood through the app. Customers search based on location, products, discounts, and promos.",
|
||||
visual: "phone",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "Place Order & Get Delivery",
|
||||
desc: "Order easily and get swift delivery from local partners.",
|
||||
icon: "local_shipping",
|
||||
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
|
||||
icon: "auto_awesome",
|
||||
title: "Get Simplified",
|
||||
desc: "Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that help your business grow further.",
|
||||
visual: "bag",
|
||||
},
|
||||
];
|
||||
|
||||
function OrdersCard() {
|
||||
return (
|
||||
<div className="absolute -left-4 top-6 hidden w-56 rounded-3xl border border-primary/10 bg-white/95 p-5 shadow-[0_22px_50px_rgba(22,0,29,0.16)] md:block xl:-left-6 xl:top-8">
|
||||
<p className="text-xs font-black uppercase tracking-widest text-brand-dark">
|
||||
Orders Received
|
||||
</p>
|
||||
<svg viewBox="0 0 150 46" className="mt-3 h-12 w-full" aria-hidden="true">
|
||||
<path d="M4 38 C 28 34, 34 20, 54 24 S 83 34, 102 18 S 126 8, 146 12" fill="none" stroke="#006d37" strokeWidth="5" strokeLinecap="round" />
|
||||
<circle cx="146" cy="12" r="5" fill="#006d37" />
|
||||
</svg>
|
||||
<div className="mt-3 space-y-2">
|
||||
{["Fresh groceries", "Daily essentials", "Local offers"].map((item) => (
|
||||
<div key={item} className="flex items-center gap-2 rounded-2xl bg-brand-accent-light/70 px-2.5 py-2">
|
||||
<span className="h-2.5 w-2.5 rounded-full bg-secondary" />
|
||||
<span className="text-xs font-bold text-on-surface-variant">{item}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StorePhone() {
|
||||
return (
|
||||
<div className="absolute -right-4 bottom-4 hidden w-44 rounded-[2.2rem] border-[7px] border-brand-dark bg-white p-3 shadow-[0_26px_55px_rgba(22,0,29,0.24)] md:block xl:-right-8">
|
||||
<div className="mx-auto mb-3 h-1 w-12 rounded-full bg-brand-dark/25" />
|
||||
<div className="rounded-2xl bg-brand-accent-light p-2">
|
||||
<div className="h-7 rounded-full bg-white px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
|
||||
Search groceries
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-4 gap-1.5">
|
||||
{["Rice", "Veg", "Milk", "Snacks"].map((label) => (
|
||||
<div key={label} className="rounded-xl bg-white px-1 py-1.5 text-center text-[7px] font-bold text-primary">
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-3 space-y-2">
|
||||
{["Kumar Provision", "Fresh Daily", "Neighbour Mart"].map((store, index) => (
|
||||
<div key={store} className="rounded-2xl bg-white p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`h-8 w-8 rounded-xl ${index === 1 ? "bg-secondary/15" : "bg-primary/12"}`} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-[8px] font-black text-brand-dark">{store}</p>
|
||||
<p className="text-[7px] font-bold text-on-surface-variant">Groceries nearby</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 w-full rounded-full bg-primary py-2 text-[9px] font-black text-white">
|
||||
Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GrowthPill() {
|
||||
return (
|
||||
<div className="absolute -right-8 top-10 hidden md:block xl:-right-16 xl:top-14">
|
||||
<svg className="absolute -left-32 top-9 h-12 w-36 text-primary/45" viewBox="0 0 144 44" fill="none" aria-hidden="true">
|
||||
<path d="M2 36 C 36 8, 72 36, 138 8" stroke="currentColor" strokeWidth="2.5" strokeDasharray="5 6" />
|
||||
<path d="M132 5 L140 7 L136 14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
<div className="rounded-full border border-primary/10 bg-white/95 px-5 py-3 text-sm font-black leading-tight text-brand-dark shadow-[0_18px_40px_rgba(22,0,29,0.13)]">
|
||||
More Customers
|
||||
<br />
|
||||
<span className="text-primary">More Growth</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PhoneMapVisual() {
|
||||
return (
|
||||
// Outer wrapper: position anchor for the floating pills (no overflow-hidden here)
|
||||
<div className="relative h-44 w-40">
|
||||
{/* Inner phone frame: overflow-hidden keeps rounded corners clean */}
|
||||
<div className="absolute inset-0 overflow-hidden rounded-[2rem] border-[6px] border-brand-dark bg-white p-3 shadow-[0_18px_40px_rgba(22,0,29,0.16)]">
|
||||
<div className="h-7 rounded-full bg-brand-accent-light px-3 py-1.5 text-[9px] font-bold text-on-surface-variant">
|
||||
Search local stores
|
||||
</div>
|
||||
<div className="relative mt-3 h-24 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#f8f1fb,#ffffff)]">
|
||||
<div className="absolute inset-0 opacity-40" style={{ backgroundImage: "linear-gradient(#d7c4dd 1px, transparent 1px), linear-gradient(90deg, #d7c4dd 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
|
||||
<MaterialIcon icon="location_on" size={30} className="absolute left-14 top-8 text-primary" />
|
||||
<span className="absolute left-4 top-5 h-2.5 w-2.5 rounded-full bg-primary" />
|
||||
<span className="absolute bottom-4 right-5 h-2.5 w-2.5 rounded-full bg-secondary" />
|
||||
</div>
|
||||
<div className="absolute bottom-3 left-5 right-5 rounded-2xl bg-white p-2 shadow-lg">
|
||||
<p className="text-[9px] font-black text-brand-dark">Your Store</p>
|
||||
<p className="text-[7px] font-bold text-on-surface-variant">Open nearby</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Pills: outside overflow-hidden so they float beyond the phone frame */}
|
||||
<span className="absolute -left-3 top-16 z-10 rounded-full bg-secondary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||
Offers
|
||||
</span>
|
||||
<span className="absolute -right-3 top-24 z-10 rounded-full bg-primary px-2 py-1 text-[8px] font-black text-white shadow-md">
|
||||
Shop
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StepVisual({ type }: { type: string }) {
|
||||
if (type === "store") {
|
||||
// Inset box gives the storefront image breathing room on all sides
|
||||
return (
|
||||
<div className="absolute inset-x-4 bottom-0 top-2">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
src="/images/nearle-how/how-storefront.webp"
|
||||
alt="3D local shop storefront with purple awning and now online board"
|
||||
fill
|
||||
sizes="(max-width: 768px) 80vw, 28vw"
|
||||
className="object-contain object-bottom"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type === "phone") {
|
||||
// Center the phone so the floating pills don't reach the card edges
|
||||
return (
|
||||
<div className="flex h-full items-end justify-center pb-2">
|
||||
<PhoneMapVisual />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Bag: chips on the left, image on the right – keep bag from overflowing right edge
|
||||
return (
|
||||
<div className="flex h-full items-end justify-end gap-2 px-2">
|
||||
<div className="mb-4 hidden shrink-0 space-y-2 sm:block">
|
||||
{["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => (
|
||||
<div key={chip} className="rounded-full border border-primary/10 bg-white px-3 py-2 text-[11px] font-black text-brand-dark shadow-sm">
|
||||
{chip}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative h-40 w-36 shrink-0">
|
||||
<Image
|
||||
src="/images/nearle-how/how-grocery-bag.webp"
|
||||
alt="Nearle grocery bag filled with vegetables and packaged products"
|
||||
fill
|
||||
sizes="(max-width: 768px) 60vw, 18vw"
|
||||
className="object-contain object-bottom"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HowItWorks() {
|
||||
return (
|
||||
<section className="px-6 py-12 md:py-16">
|
||||
<div className="w-full">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-12 md:mb-16">
|
||||
<span className="text-xs text-secondary uppercase tracking-widest font-black bg-secondary/10 px-3.5 py-1.5 rounded-full">
|
||||
Simple Process
|
||||
<section className="section bg-white w-full overflow-hidden">
|
||||
{/* HERO AREA */}
|
||||
<div className="mx-auto w-[calc(100%-96px)] max-w-[1720px]">
|
||||
<div className="grid min-w-0 grid-cols-1 items-center gap-10 lg:grid-cols-[38fr_62fr]">
|
||||
<div className="min-w-0">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-secondary/15 bg-secondary/5 px-4 py-2 text-xs font-black uppercase tracking-widest text-secondary">
|
||||
<MaterialIcon icon="eco" size={16} />
|
||||
Together, We Grow
|
||||
</span>
|
||||
<h2 className="mt-6 max-w-3xl font-display text-[clamp(2.5rem,8vw,3.75rem)] font-black leading-[1.02] tracking-tight text-brand-dark lg:text-[64px]">
|
||||
Get set in minutes and delight the{" "}
|
||||
<span className="text-primary font-normal">Neighbourhood</span>
|
||||
</h2>
|
||||
<p className="mt-6 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
|
||||
Nearle is built to help businesses like{" "}
|
||||
<span className="font-black text-primary">Yours</span>{" "}
|
||||
establish a local online presence and empower neighbourhood customers to discover and interact with you directly.
|
||||
</p>
|
||||
<button className="mt-8 inline-flex w-full items-center justify-center gap-2 rounded-full bg-primary px-8 py-4 text-base font-black text-white shadow-[0_16px_30px_rgba(101,20,154,0.22)] transition-transform duration-200 hover:-translate-y-0.5 sm:w-auto">
|
||||
<MaterialIcon icon="forum" size={20} />
|
||||
Talk to an Expert
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative flex min-h-[320px] justify-center md:min-h-[440px] xl:min-h-[400px]">
|
||||
<div className="relative w-full max-w-[680px]">
|
||||
<div className="relative h-[280px] overflow-hidden rounded-[2rem] bg-brand-accent-light shadow-[0_26px_70px_rgba(22,0,29,0.16)] md:h-[440px] xl:h-[400px]">
|
||||
<Image
|
||||
src="/images/nearle-merchant/merchant-hero.webp"
|
||||
alt="Indian kirana-store owner using a laptop inside a grocery shop"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
className="object-cover object-center"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-brand-dark/25 to-transparent" />
|
||||
</div>
|
||||
<OrdersCard />
|
||||
<StorePhone />
|
||||
<GrowthPill />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* SUBTLE DIVIDER */}
|
||||
<div className="mx-auto mt-10 w-[calc(100%-96px)] max-w-[1720px] md:mt-14 xl:mt-10">
|
||||
<div className="h-px w-full bg-gradient-to-r from-transparent via-primary/10 to-transparent" />
|
||||
</div>
|
||||
|
||||
{/* CARDS SECTION */}
|
||||
<div className="page-container">
|
||||
<div className="mt-10 text-center md:mt-14 xl:mt-10">
|
||||
<span className="inline-flex rounded-full bg-primary/8 px-4 py-2 text-xs font-black uppercase tracking-widest text-primary">
|
||||
How It Works
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
|
||||
From Your Neighbourhood Store <span className="text-secondary font-normal">to Your Doorstep</span>
|
||||
<h2 className="mt-5 font-display text-4xl font-black leading-tight tracking-tight text-brand-dark md:text-5xl lg:text-[54px]">
|
||||
Build Your Neighbourhood Brand
|
||||
</h2>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-base leading-relaxed text-on-surface-variant md:text-lg">
|
||||
Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Steps Layout - Timeline style */}
|
||||
<div className="relative mt-8 md:mt-12">
|
||||
{/* Connecting Line (Desktop Only) */}
|
||||
<div className="hidden lg:block absolute top-[32px] left-[8%] right-[8%] h-[1px] bg-primary/20 -z-0" />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16 relative z-10">
|
||||
{STEPS.map((step) => (
|
||||
<div key={step.num} className="flex flex-col items-center lg:items-start text-center lg:text-left group relative">
|
||||
{/* Icon Container with watermark number */}
|
||||
<div className="flex items-center justify-center w-16 h-16 rounded-2xl bg-white border border-primary/10 text-primary shadow-sm mb-6 relative z-10 transition-transform duration-300 group-hover:-translate-y-1">
|
||||
<MaterialIcon icon={step.icon} size={32} />
|
||||
<span className="absolute -top-3.5 -right-3.5 w-9 h-9 rounded-full bg-primary text-white font-display font-black text-sm flex items-center justify-center shadow-md">
|
||||
{step.num}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-display text-2xl md:text-3xl font-black text-brand-dark mb-3">
|
||||
<div className="mt-10 grid min-w-0 grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{STEPS.map((step) => (
|
||||
<article
|
||||
key={step.num}
|
||||
className="relative flex min-h-[380px] min-w-0 flex-col overflow-hidden rounded-3xl border border-primary/10 bg-white p-7 shadow-[0_18px_45px_rgba(22,0,29,0.08)] md:min-h-[420px] lg:min-h-[460px] xl:min-h-[420px] lg:p-8"
|
||||
>
|
||||
<span className="absolute right-5 top-4 font-display text-6xl font-black leading-none text-primary/[0.07]">
|
||||
{step.num}
|
||||
</span>
|
||||
<div className="relative z-10 flex h-13 w-13 items-center justify-center rounded-2xl bg-primary/7 text-primary">
|
||||
<MaterialIcon icon={step.icon} size={28} />
|
||||
</div>
|
||||
<div className="relative z-10 mt-7 max-w-[22rem] lg:mt-8">
|
||||
<h3 className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed max-w-sm">
|
||||
<p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
|
||||
{step.desc}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative z-0 mt-auto h-48 w-full overflow-hidden rounded-[1.5rem] bg-brand-accent-light/60 lg:h-52">
|
||||
<StepVisual type={step.visual} />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -27,118 +27,77 @@ const FEATURES = [
|
||||
|
||||
export function HyperlocalFeatures() {
|
||||
return (
|
||||
<section className="px-6 py-12 md:py-16 relative">
|
||||
{/* Scoped CSS styles for precise layout enforcement */}
|
||||
<style>{`
|
||||
@media (min-width: 901px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: minmax(500px, 1fr) minmax(560px, 1.1fr) !important;
|
||||
gap: 56px !important;
|
||||
width: min(1360px, 100%) !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 530px !important;
|
||||
height: 580px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: 580px !important;
|
||||
padding: 60px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.custom-care-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
gap: 40px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.custom-care-visual {
|
||||
max-width: 420px !important;
|
||||
height: 460px !important;
|
||||
}
|
||||
.custom-care-card {
|
||||
min-height: auto !important;
|
||||
padding: 36px 24px !important;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<section className="section bg-white w-full relative">
|
||||
{/* Subtle background radial glows */}
|
||||
<div className="absolute left-[15%] top-1/2 -translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-brand-accent/[0.03] blur-[130px] pointer-events-none z-0" />
|
||||
<div className="absolute right-[15%] top-1/2 translate-x-1/2 -translate-y-1/2 w-[55%] h-[55%] rounded-full bg-primary/[0.03] blur-[130px] pointer-events-none z-0" />
|
||||
|
||||
{/* Inner container */}
|
||||
<div className="custom-care-grid mx-auto grid items-center">
|
||||
<div className="page-container relative z-10">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[1fr_1.1fr] gap-12 lg:gap-16 items-center">
|
||||
|
||||
{/* Left Column: Visual Storytelling */}
|
||||
<div className="custom-care-visual w-full justify-self-center relative rounded-[32px] border border-outline-variant/15 bg-slate-100 shadow-[0_20px_50px_rgba(20,0,30,0.12)] z-10 overflow-hidden">
|
||||
{/* Left Column: Visual Storytelling */}
|
||||
<div className="w-full max-w-[530px] justify-self-center relative rounded-[2rem] border border-outline-variant/15 bg-slate-100/50 z-10 overflow-hidden aspect-[10/11] lg:h-[580px]">
|
||||
|
||||
{/* Main Background Cover Image */}
|
||||
<div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Local store background"
|
||||
fill
|
||||
sizes="(max-width: 900px) 420px, 470px"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Banner Label at Top */}
|
||||
<div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
|
||||
<span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
|
||||
<h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
|
||||
</div>
|
||||
|
||||
{/* Main Store/Product Card (Middle floating) */}
|
||||
<div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-4.5 border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
|
||||
<div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
|
||||
<Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
|
||||
{/* Main Background Cover Image */}
|
||||
<div className="absolute inset-0 w-full h-full select-none pointer-events-none opacity-40 filter saturate-[0.7] blur-[1px]">
|
||||
<Image
|
||||
src="/images/cat-daily-essentials.png"
|
||||
alt="Local store background"
|
||||
fill
|
||||
sizes="(max-width: 900px) 420px, 470px"
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
|
||||
<p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
|
||||
<div className="flex items-center gap-1 mt-1.5">
|
||||
<MaterialIcon icon="star" size={14} className="text-amber-500" />
|
||||
<span className="text-xs font-bold text-brand-dark">4.9</span>
|
||||
<span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
|
||||
|
||||
{/* Banner Label at Top */}
|
||||
<div className="absolute top-6 left-6 right-6 bg-white/95 backdrop-blur-sm p-4 rounded-2xl border border-outline-variant/20 shadow-lg z-30 text-center">
|
||||
<span className="text-xs text-primary font-black uppercase tracking-wider block mb-1">Local Order</span>
|
||||
<h4 className="text-sm md:text-base font-black text-brand-dark">“Your favourite local store, now online.”</h4>
|
||||
</div>
|
||||
|
||||
{/* Main Store/Product Card (Middle floating) */}
|
||||
<div className="absolute top-[34%] left-[6%] right-[6%] bg-white rounded-2xl p-[18px] border border-outline-variant/20 shadow-xl z-30 flex items-center gap-4 hover:scale-[1.01] transition-transform duration-300">
|
||||
<div className="w-14 h-14 rounded-xl relative overflow-hidden bg-brand-accent/10 shrink-0">
|
||||
<Image src="/images/cat-daily-essentials.png" alt="Local store" fill className="object-cover" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h5 className="text-sm md:text-base font-black text-brand-dark truncate">Sri Krishna Groceries</h5>
|
||||
<p className="text-xs text-on-surface-variant mt-0.5 truncate">Fresh Harvest & Daily Needs</p>
|
||||
<div className="flex items-center gap-1 mt-1.5">
|
||||
<MaterialIcon icon="star" size={14} className="text-amber-500" />
|
||||
<span className="text-xs font-bold text-brand-dark">Top Rated</span>
|
||||
<span className="text-xs text-on-surface-variant/80 ml-1">· Coimbatore</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Small Delivery Status Card (Bottom floating) */}
|
||||
<div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
|
||||
<div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-white font-bold" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs md:text-sm font-black">Order Confirmed</p>
|
||||
<p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Small Delivery Status Card (Bottom floating) */}
|
||||
<div className="absolute bottom-[6%] left-[6%] right-[6%] bg-[#006d37] text-white rounded-2xl p-4 border border-white/10 shadow-xl z-30 flex items-center gap-3 animate-pulse-subtle">
|
||||
<div className="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check" size={16} className="text-white font-bold" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs md:text-sm font-black">Order Confirmed</p>
|
||||
<p className="text-xs text-white/80 font-medium mt-0.5">Your local store is preparing your order</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Column: Dark Feature Panel */}
|
||||
<div className="custom-care-card w-full rounded-[36px] bg-[#16001d] text-white shadow-[0_24px_60px_rgba(20,0,30,0.18)] relative overflow-hidden z-10">
|
||||
{/* Internal ambient glows */}
|
||||
<div className="absolute right-0 top-0 w-64 h-64 bg-brand-accent/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute -left-16 -bottom-16 w-48 h-48 bg-primary/10 rounded-full blur-2xl pointer-events-none" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-xs text-brand-accent uppercase tracking-widest font-black bg-brand-accent/10 px-3.5 py-1.5 rounded-full border border-brand-accent/20">
|
||||
{/* Right Column: Feature Panel directly on page background */}
|
||||
<div className="w-full py-6 md:py-8 lg:py-10 relative z-10 text-[#16001D]">
|
||||
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3.5 py-1.5 rounded-full border border-primary/20">
|
||||
Community & Trust
|
||||
</span>
|
||||
|
||||
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-white mt-6 mb-8 leading-tight tracking-tight">
|
||||
<h3 className="text-4xl md:text-5xl lg:text-[44px] font-display font-black text-brand-dark mt-6 mb-8 leading-tight tracking-tight">
|
||||
Built Around Your<br />
|
||||
<span className="text-brand-accent font-black">Neighbourhood</span>
|
||||
<span className="text-primary font-black">Neighbourhood</span>
|
||||
</h3>
|
||||
|
||||
<p className="text-body-lg text-white/70 mb-10 max-w-lg leading-relaxed">
|
||||
<p className="text-body-lg text-on-surface-variant mb-10 max-w-lg leading-relaxed">
|
||||
Nearle brings the convenience of an app to the stores you already know and trust, making it easy to support local shops.
|
||||
</p>
|
||||
|
||||
@@ -146,25 +105,25 @@ export function HyperlocalFeatures() {
|
||||
<div className="relative space-y-8">
|
||||
|
||||
{/* Vertical connector line */}
|
||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-brand-accent/20 -translate-x-1/2 z-0" />
|
||||
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-primary/20 -translate-x-1/2 z-0" />
|
||||
|
||||
{FEATURES.map((item) => (
|
||||
<div key={item.title} className="flex gap-5 group relative z-10">
|
||||
|
||||
{/* Icon circle */}
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-brand-accent text-brand-dark flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-md relative z-10 group-hover:scale-105 transition-transform duration-300">
|
||||
<MaterialIcon
|
||||
icon={item.icon}
|
||||
className="text-brand-dark"
|
||||
className="text-white"
|
||||
size={22}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg md:text-xl font-black text-white group-hover:text-brand-accent transition-colors">
|
||||
<h4 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-sm md:text-base text-white/60 mt-1 leading-relaxed">
|
||||
<p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
|
||||
{item.desc}
|
||||
</p>
|
||||
</div>
|
||||
@@ -173,19 +132,19 @@ export function HyperlocalFeatures() {
|
||||
</div>
|
||||
|
||||
{/* Divider Line above CTA Area */}
|
||||
<hr className="border-t border-white/10 my-8 relative z-10" />
|
||||
<hr className="border-t border-[#EEE7F4] my-8 relative z-10" />
|
||||
|
||||
{/* Onboarding Call to Action */}
|
||||
<div className="mt-8 flex flex-wrap gap-6 items-center relative z-10">
|
||||
<Link
|
||||
href="/#download"
|
||||
className="bg-brand-accent hover:bg-brand-accent/90 text-brand-dark font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
className="bg-primary hover:bg-primary-container text-white font-black px-8 py-3.5 rounded-full text-sm md:text-base hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all duration-200"
|
||||
>
|
||||
Get Nearle App
|
||||
</Link>
|
||||
<Link
|
||||
href="/businesses"
|
||||
className="text-white hover:text-brand-accent font-bold text-sm md:text-base flex items-center gap-1 group py-2"
|
||||
className="text-[#6D28D9] hover:text-[#5225b8] font-black text-sm md:text-base flex items-center gap-1 group py-2"
|
||||
>
|
||||
<span>Learn How to Partner</span>
|
||||
<MaterialIcon
|
||||
|
||||
@@ -55,16 +55,16 @@ const CATEGORIES = [
|
||||
|
||||
export function ServiceCategories() {
|
||||
return (
|
||||
<section className="px-6 pt-20 md:pt-24 lg:pt-28 pb-12 md:pb-16">
|
||||
<div className="w-full">
|
||||
<section className="section bg-white w-full">
|
||||
<div className="page-container">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 md:mb-16 gap-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 md:mb-12 xl:mb-10 gap-6">
|
||||
<div>
|
||||
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3 py-1.5 rounded-full">
|
||||
Neighbourhood Offerings
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
|
||||
Explore Stores <span className="text-primary font-normal">Near You</span>
|
||||
Explore Stores <span className="text-primary font-normal">Near To You</span>
|
||||
</h2>
|
||||
<p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
|
||||
Groceries, medicines, food, and everyday essentials from nearby local shops.
|
||||
|
||||
@@ -9,7 +9,9 @@ const FLOW_STEPS = [
|
||||
|
||||
export function StoreQRSection() {
|
||||
return (
|
||||
<section id="download" className="section-card-dark py-16 md:py-20 px-6 md:px-12 lg:px-20 text-white relative flex items-center">
|
||||
<section className="mb-2 bg-white w-full px-2 pt-2 md:mb-3 md:px-3 md:pt-3 lg:mb-4 lg:px-4 lg:pt-4 xl:mb-4 xl:px-5 xl:pt-4 2xl:mb-4 2xl:px-6">
|
||||
<div className="w-full">
|
||||
<div id="download" className="w-full bg-gradient-to-br from-[#1A0322] to-[#0A000D] rounded-3xl md:rounded-[2rem] overflow-hidden text-white relative flex items-center py-12 md:py-16 px-6 md:px-12 lg:px-16 xl:px-20 border border-white/10 shadow-[0_20px_50px_rgba(20,0,30,0.22)]">
|
||||
{/* Background ambient glowing details */}
|
||||
<div className="absolute right-[-10%] top-[-10%] w-[50%] h-[50%] rounded-full bg-brand-accent/5 blur-[120px] pointer-events-none" />
|
||||
<div className="absolute left-[-10%] bottom-[-10%] w-[50%] h-[50%] rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
|
||||
@@ -17,7 +19,7 @@ export function StoreQRSection() {
|
||||
<div className="w-full relative z-10">
|
||||
|
||||
{/* ─── DESKTOP LAYOUT (lg and above) ─── */}
|
||||
<div className="hidden lg:grid lg:grid-cols-12 gap-20 xl:gap-24 items-center">
|
||||
<div className="hidden lg:grid lg:grid-cols-12 gap-12 xl:gap-16 items-center">
|
||||
|
||||
{/* Left Column: Heading, flow steps, download buttons */}
|
||||
<div className="lg:col-span-6">
|
||||
@@ -51,45 +53,35 @@ export function StoreQRSection() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* App Store Badges (Prominent White Buttons) */}
|
||||
{/* TODO: Replace with real app store URLs once app is confirmed live (siteContent.app.iosUrl / androidUrl) */}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
|
||||
<div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
|
||||
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
|
||||
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
|
||||
</svg>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
|
||||
Download on the
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
<div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
|
||||
App Store
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
Available on
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-[60px] border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-8 py-2 flex items-center gap-3.5 group hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-[rgba(255,255,255,0.15)] shrink-0"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
|
||||
<div className="h-[60px] border border-white/20 rounded-2xl bg-white/10 text-white/60 px-8 py-2 flex items-center gap-3.5 shrink-0 cursor-not-allowed select-none">
|
||||
<svg viewBox="0 0 24 24" className="w-7 h-7 shrink-0 fill-current opacity-60" fill="currentColor">
|
||||
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
|
||||
</svg>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
|
||||
GET IT ON
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
<div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
|
||||
Google Play
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
Available on
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -104,7 +96,7 @@ export function StoreQRSection() {
|
||||
|
||||
<div className="relative w-32 h-32 bg-white flex items-center justify-center">
|
||||
<Image
|
||||
src="/QR code .png"
|
||||
src="/nearle-qr-code.png"
|
||||
alt="Nearle Store QR Code"
|
||||
width={132}
|
||||
height={132}
|
||||
@@ -129,16 +121,7 @@ export function StoreQRSection() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Overlapping Confirmation Bubble */}
|
||||
<div className="absolute -left-8 bottom-[15%] z-20 hidden xl:flex bg-white p-4.5 rounded-2xl shadow-2xl border border-outline-variant/20 max-w-[210px] text-brand-dark items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-secondary-fixed flex items-center justify-center shrink-0">
|
||||
<MaterialIcon icon="check_circle" size={18} className="text-secondary" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-black">Order Confirmed</p>
|
||||
<p className="text-[10px] text-on-surface-variant font-medium mt-0.5 leading-tight">Your order is preparing</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -166,7 +149,7 @@ export function StoreQRSection() {
|
||||
|
||||
<div className="relative w-36 h-36 bg-white flex items-center justify-center">
|
||||
<Image
|
||||
src="/QR code .png"
|
||||
src="/nearle-qr-code.png"
|
||||
alt="Nearle Store QR Code"
|
||||
width={144}
|
||||
height={144}
|
||||
@@ -210,49 +193,41 @@ export function StoreQRSection() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 5. App store buttons */}
|
||||
{/* 5. App store buttons — TODO: replace with real URLs once app is live */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/nearle/id1596895375"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
|
||||
<div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
|
||||
<path d="M17.537 12.625c-.023-2.949 2.398-4.37 2.506-4.44-1.364-2.008-3.48-2.282-4.227-2.307-1.79-.186-3.504 1.064-4.413 1.064-.918 0-2.323-1.04-3.827-1.01-1.963.028-3.788 1.146-4.796 2.91-2.06 3.587-.526 8.9 1.466 11.808.98 1.428 2.147 3.035 3.685 2.975 1.47-.059 2.03-.964 3.807-.964 1.767 0 2.266.964 3.818.932 1.58-.03 2.58-1.453 3.536-2.89 1.116-1.628 1.57-3.21 1.596-3.29-.035-.016-3.057-1.18-3.087-4.678l.036-.002zM14.87 4.058c.821-.99 1.375-2.361 1.223-3.733-1.184.05-2.618.784-3.47 1.77-.762.875-1.43 2.28-1.25 3.623 1.327.102 2.673-.668 3.497-1.66z" />
|
||||
</svg>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
|
||||
Download on the
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
<div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
|
||||
App Store
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
Available on
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.nearle.gear"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="h-14 w-60 sm:w-auto border border-white/10 rounded-2xl bg-white text-brand-dark hover:bg-white/90 transition-all duration-300 px-6 py-2 flex items-center justify-center gap-3 group"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current text-brand-dark transition-colors" fill="currentColor">
|
||||
<div className="h-14 w-60 sm:w-auto border border-white/20 rounded-2xl bg-white/10 text-white/60 px-6 py-2 flex items-center justify-center gap-3 cursor-not-allowed select-none">
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 shrink-0 fill-current opacity-60" fill="currentColor">
|
||||
<path d="M3.609 1.814L13.414 12 3.609 22.186c-.244-.178-.395-.466-.395-.786V2.6c0-.32.151-.608.395-.786zM14.244 12.83l2.705 2.688-4.073 2.276-4.073 2.276L14.244 12.83zm1-1.66l2.838-2.8 4.153 2.336c.464.26.464.688 0 .948l-4.153 2.336-2.838-2.82zM8.803 4.93l4.073 2.276 4.073 2.276-2.705 2.688L8.803 4.93z" />
|
||||
</svg>
|
||||
<div className="text-left leading-tight">
|
||||
<div className="text-[10px] opacity-75 font-bold tracking-wider uppercase">
|
||||
GET IT ON
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
<div className="text-[10px] font-bold tracking-wider uppercase opacity-60">
|
||||
Google Play
|
||||
</div>
|
||||
<div className="text-sm font-black">
|
||||
Available on
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Image from "next/image";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const CARDS = [
|
||||
@@ -6,33 +7,59 @@ const CARDS = [
|
||||
desc: "Order from familiar neighbourhood stores near you.",
|
||||
icon: "store",
|
||||
color: "bg-primary/5 text-primary border-primary/10",
|
||||
image: "/images/nearle-redesign/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",
|
||||
color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
|
||||
image: "/images/nearle-redesign/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",
|
||||
},
|
||||
];
|
||||
|
||||
export function WhyNearle() {
|
||||
return (
|
||||
<section className="px-6 py-12 md:py-16">
|
||||
<div className="w-full">
|
||||
<section className="section section-soft w-full overflow-hidden">
|
||||
<div className="page-container relative">
|
||||
{/* Header Section */}
|
||||
<div className="text-center mb-8 md:mb-10">
|
||||
<div className="relative text-center mb-8 md:mb-10">
|
||||
<div className="pointer-events-none absolute -left-2 top-0 hidden h-36 w-36 overflow-hidden rounded-[2rem] bg-primary/5 shadow-[0_18px_45px_rgba(101,20,154,0.12)] md:block lg:-left-4 lg:h-44 lg:w-44">
|
||||
<Image
|
||||
src="/images/nearle-redesign/heading-shopper.webp"
|
||||
alt=""
|
||||
fill
|
||||
sizes="176px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute -right-2 top-1 hidden h-32 w-40 overflow-hidden rounded-[2rem] bg-secondary/5 shadow-[0_18px_45px_rgba(22,0,29,0.10)] md:block lg:-right-4 lg:h-40 lg:w-52">
|
||||
<Image
|
||||
src="/images/nearle-redesign/heading-store.webp"
|
||||
alt=""
|
||||
fill
|
||||
sizes="208px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/5 px-3.5 py-1.5 rounded-full">
|
||||
Our Philosophy
|
||||
</span>
|
||||
@@ -45,21 +72,30 @@ export function WhyNearle() {
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-7">
|
||||
{CARDS.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className="premium-card bg-white rounded-3xl p-10 lg:p-12 min-h-[300px] lg:min-h-[340px] border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
|
||||
className="premium-card bg-white rounded-3xl p-5 md:p-6 border border-outline-variant/15 shadow-lg flex flex-col h-full hover:scale-[1.02] transition-transform duration-300"
|
||||
>
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-8 shrink-0 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={28} />
|
||||
<div className={`w-14 h-14 rounded-2xl flex items-center justify-center border mb-5 shrink-0 ${card.color}`}>
|
||||
<MaterialIcon icon={card.icon} size={27} />
|
||||
</div>
|
||||
<h3 className="font-display text-xl font-black text-brand-dark mb-3">
|
||||
{card.title}
|
||||
</h3>
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed flex-grow">
|
||||
<p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
|
||||
{card.desc}
|
||||
</p>
|
||||
<div className="relative mt-6 aspect-[4/3] w-full overflow-hidden rounded-[1.35rem] bg-brand-accent-light shadow-[inset_0_0_0_1px_rgba(255,255,255,0.55)]">
|
||||
<Image
|
||||
src={card.image}
|
||||
alt={card.alt}
|
||||
fill
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -68,4 +104,3 @@ export function WhyNearle() {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -53,10 +53,18 @@ export function Footer() {
|
||||
</p>
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-3 mt-2">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Share">
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
|
||||
aria-label="Share"
|
||||
>
|
||||
<MaterialIcon icon="share" size={20} />
|
||||
</a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300" aria-label="Website">
|
||||
<a
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-[#E6D7EA] hover:text-[#17001F] transition-all duration-300"
|
||||
aria-label="Website"
|
||||
>
|
||||
<MaterialIcon icon="public" size={20} />
|
||||
</a>
|
||||
</div>
|
||||
@@ -64,11 +72,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 2: Company Links */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Company</h5>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
||||
Company
|
||||
</h5>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{COMPANY.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -78,11 +91,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 3: Partnerships */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Partnerships</h5>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
||||
Partnerships
|
||||
</h5>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{PARTNERSHIPS.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -92,11 +110,16 @@ export function Footer() {
|
||||
|
||||
{/* Col 4: Support / Legal */}
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">Support & Legal</h5>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-6">
|
||||
Support & Legal
|
||||
</h5>
|
||||
<ul className="flex flex-col gap-3">
|
||||
{LEGAL.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block">
|
||||
<Link
|
||||
href={l.href}
|
||||
className="text-sm text-white/70 hover:text-[#E6D7EA] hover:translate-x-1 transition-all inline-block"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
@@ -107,11 +130,16 @@ export function Footer() {
|
||||
{/* Col 5: HQ Address & Helpdesk */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">Visit Nearle HQ</h5>
|
||||
<h5 className="text-sm font-bold uppercase tracking-wider text-white/50 mb-4">
|
||||
Visit Nearle
|
||||
</h5>
|
||||
<p className="text-xs leading-relaxed text-white/60">
|
||||
424, Diwan Bahadur Rd,<br />
|
||||
Opposite to Sri Krishna Sweets,<br />
|
||||
R.S. Puram, Coimbatore,<br />
|
||||
424, Diwan Bahadur Rd,
|
||||
<br />
|
||||
Opposite to Sri Krishna Sweets,
|
||||
<br />
|
||||
R.S. Puram, Coimbatore,
|
||||
<br />
|
||||
Tamil Nadu 641002
|
||||
</p>
|
||||
<a
|
||||
@@ -126,13 +154,21 @@ export function Footer() {
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/10 pt-4 flex flex-col gap-2">
|
||||
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</p>
|
||||
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">
|
||||
Neighborhood Helpdesk
|
||||
</p>
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
href="tel:+919092068666"
|
||||
className="flex items-center gap-2 text-white hover:text-[#E6D7EA] transition-all"
|
||||
>
|
||||
<MaterialIcon icon="phone" size={16} className="text-[#E6D7EA] shrink-0" />
|
||||
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
|
||||
<MaterialIcon
|
||||
icon="phone"
|
||||
size={16}
|
||||
className="text-[#E6D7EA] shrink-0"
|
||||
/>
|
||||
<span className="text-sm font-black tracking-tight">
|
||||
+91 90920 68666
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ export function Navbar() {
|
||||
return (
|
||||
<div className="fixed top-0 left-0 right-0 z-50 w-full flex justify-center pointer-events-none">
|
||||
<div className="w-full max-w-[1920px] px-4 md:px-6 lg:px-8 xl:px-10 2xl:px-12 pt-[18px] md:pt-[24px] pointer-events-auto relative">
|
||||
<nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-white/88 border border-white/70 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
|
||||
<nav className="w-full h-[68px] lg:h-[76px] rounded-full bg-[rgba(61,45,143,0.88)] border border-white/20 shadow-sm backdrop-blur-md px-5 md:px-8 lg:px-10 flex items-center transition-all duration-300">
|
||||
<div className="grid grid-cols-2 md:grid-cols-[1fr_auto_1fr] items-center w-full h-full">
|
||||
{/* Left: Brand */}
|
||||
<div className="flex items-center justify-start">
|
||||
@@ -30,7 +30,7 @@ export function Navbar() {
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
>
|
||||
<Image
|
||||
src="/logo.png"
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={400}
|
||||
height={50}
|
||||
@@ -49,12 +49,12 @@ export function Navbar() {
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`relative py-2 text-[15px] font-semibold leading-5 transition-all duration-200 whitespace-nowrap ${
|
||||
isActive ? "text-[#2A1234]" : "text-[#2A1234]/70 hover:text-[#2A1234]"
|
||||
isActive ? "text-white" : "text-white/75 hover:text-white"
|
||||
} group`}
|
||||
>
|
||||
{link.label}
|
||||
<span
|
||||
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-[#65149A] rounded-full transition-all duration-300 ${
|
||||
className={`absolute bottom-[-6px] left-1/2 -translate-x-1/2 h-0.5 bg-white rounded-full transition-all duration-300 ${
|
||||
isActive
|
||||
? "w-5 opacity-100"
|
||||
: "w-0 opacity-0 group-hover:w-4 group-hover:opacity-60"
|
||||
@@ -69,14 +69,14 @@ export function Navbar() {
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Link
|
||||
href="/#download"
|
||||
className="hidden md:inline-flex items-center justify-center bg-[#65149A] text-white font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-[#7C3AED] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
|
||||
className="hidden md:inline-flex items-center justify-center bg-white text-[rgba(61,45,143,0.88)] font-bold px-7 h-[46px] rounded-full text-[15px] hover:bg-white/90 hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-300 whitespace-nowrap"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#2A1234]/5 text-[#2A1234] transition-all active:scale-90 cursor-pointer"
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-white/10 text-white transition-all active:scale-90 cursor-pointer"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
@@ -88,7 +88,7 @@ export function Navbar() {
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-white/95 border border-white/50 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
|
||||
<div className="absolute top-[calc(100%+12px)] left-4 right-4 z-40 bg-[rgba(61,45,143,0.95)] border border-white/20 rounded-2xl shadow-[0_20px_40px_rgba(100,60,120,0.15)] backdrop-blur-md p-4 md:hidden">
|
||||
<div className="flex flex-col gap-2">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
@@ -98,14 +98,14 @@ export function Navbar() {
|
||||
href={link.href}
|
||||
className={`px-4 py-3 text-body-md font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
|
||||
isActive
|
||||
? "bg-[#65149A]/10 text-[#65149A]"
|
||||
: "text-[#2A1234]/70 hover:text-[#2A1234] hover:bg-[#2A1234]/5"
|
||||
? "bg-white/10 text-white"
|
||||
: "text-white/70 hover:text-white hover:bg-white/5"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
{isActive && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#65149A] animate-pulse" />
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -3,145 +3,209 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { FaFacebookF, FaInstagram, FaLinkedinIn } from "react-icons/fa";
|
||||
import { MaterialIcon } from "@/components/ui/MaterialIcon";
|
||||
|
||||
const COMPANY = [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
{ label: "Press & News", href: "#" },
|
||||
// { label: "Press & News", href: "#" },
|
||||
{ label: "Help Center", href: "#" },
|
||||
];
|
||||
|
||||
const PARTNERSHIPS = [
|
||||
{ label: "Merchant Partner", href: "/businesses" },
|
||||
{ label: "Delivery Partner", href: "#" },
|
||||
{ label: "Corporate Gifting", href: "#" },
|
||||
{ label: "Local Real Estate", href: "#" },
|
||||
{ label: "Direct to Customer Brands", href: "#" },
|
||||
// { label: "Local Real Estate", href: "#" },
|
||||
];
|
||||
|
||||
const LEGAL = [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
{ label: "Sitemap", href: "#" },
|
||||
// { label: "Sitemap", href: "#" },
|
||||
];
|
||||
|
||||
const socialButtonClass =
|
||||
"flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white transition-all duration-300 xl:h-[54px] xl:w-[54px]";
|
||||
|
||||
export function PremiumFooter() {
|
||||
return (
|
||||
<footer className="bg-gradient-to-br from-[#16001D] to-[#25002F] rounded-[1.5rem] md:rounded-[2rem] overflow-hidden text-white p-8 md:p-12 select-none mx-3 sm:mx-4 md:mx-6 lg:mx-8 mb-3 sm:mb-4 md:mb-6 shadow-[0_12px_40px_rgba(22,0,29,0.22)]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 items-start text-left">
|
||||
{/* Column 1: Brand & Description */}
|
||||
<div className="flex flex-col gap-4 lg:col-span-2 pr-0 lg:pr-8">
|
||||
<Link href="/" className="inline-block">
|
||||
<Image
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={130}
|
||||
height={30}
|
||||
className="h-7 w-auto object-contain"
|
||||
/>
|
||||
</Link>
|
||||
<p className="text-xs md:text-sm leading-relaxed text-white/70 max-w-sm">
|
||||
India's leading hyperlocal neighborhood network, empowering communities and verified local businesses within a 2km radius.
|
||||
</p>
|
||||
{/* Social Icons */}
|
||||
<div className="flex gap-2.5 mt-2">
|
||||
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Share">
|
||||
<MaterialIcon icon="share" size={16} />
|
||||
</a>
|
||||
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Website">
|
||||
<MaterialIcon icon="public" size={16} />
|
||||
</a>
|
||||
<a href="#" className="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-white hover:text-[#16001D] transition-all duration-300" aria-label="Help">
|
||||
<MaterialIcon icon="help" size={16} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<section className="bg-white px-2 pb-2 md:px-3 md:pb-3 lg:px-4 lg:pb-4 xl:px-5 xl:pb-4 2xl:px-6 2xl:pb-5">
|
||||
<footer className="w-full overflow-hidden rounded-[28px] bg-gradient-to-br from-[#16001D] to-[#25002F] text-white shadow-[0_-12px_40px_rgba(22,0,29,0.12)]">
|
||||
<div className="flex flex-col px-6 pb-8 pt-10 md:px-8 md:pb-8 md:pt-12 xl:px-16 xl:pb-8 xl:pt-12 2xl:px-20 2xl:pt-10 2xl:pb-8">
|
||||
<div className="grid w-full grid-cols-1 items-start gap-10 text-left md:grid-cols-2 md:gap-x-12 md:gap-y-12 lg:grid-cols-[1.6fr_1fr_1fr_1fr] lg:gap-10 xl:gap-14">
|
||||
<div className="flex flex-col gap-5">
|
||||
<Link href="/" className="inline-block w-fit">
|
||||
<Image
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={240}
|
||||
height={60}
|
||||
className="h-auto w-[160px] object-contain md:w-[200px] xl:w-[240px]"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Column 2: Company */}
|
||||
<div>
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Company</h5>
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{COMPANY.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<p className="max-w-[430px] text-base leading-[1.65] text-white/70 md:text-lg xl:text-[19px]">
|
||||
India's leading hyperlocal neighborhood network, empowering
|
||||
communities and verified local businesses within a 2km radius.
|
||||
</p>
|
||||
|
||||
{/* Column 3: Nearle */}
|
||||
<div>
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Nearle</h5>
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{PARTNERSHIPS.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="mt-1 flex gap-3 xl:mt-2 xl:gap-4">
|
||||
<a
|
||||
href="https://www.facebook.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Facebook"
|
||||
className={`${socialButtonClass} hover:bg-[#1877F2]`}
|
||||
>
|
||||
<FaFacebookF size={20} />
|
||||
</a>
|
||||
|
||||
{/* Column 4: Support */}
|
||||
<div>
|
||||
<h5 className="text-xs font-black uppercase tracking-wider text-white/40 mb-4">Support</h5>
|
||||
<ul className="flex flex-col gap-2.5">
|
||||
{LEGAL.map((l) => (
|
||||
<li key={l.label}>
|
||||
<Link href={l.href} className="text-xs text-white/70 hover:text-white hover:translate-x-0.5 transition-all inline-block">
|
||||
{l.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://www.instagram.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
className={`${socialButtonClass} hover:bg-[#E4405F]`}
|
||||
>
|
||||
<FaInstagram size={21} />
|
||||
</a>
|
||||
|
||||
{/* HQ Address card at bottom-left and info */}
|
||||
<div className="mt-10 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||||
{/* HQ Address Card */}
|
||||
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 flex items-start gap-3.5 max-w-sm">
|
||||
<div className="w-8 h-8 rounded-lg bg-white/10 text-white flex items-center justify-center shrink-0 mt-0.5">
|
||||
<MaterialIcon icon="location_on" size={16} />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<h6 className="text-xs font-black text-white">Nearle HQ</h6>
|
||||
<p className="text-[11px] text-white/60 leading-normal mt-0.5">
|
||||
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram, Coimbatore, TN 641002
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call center */}
|
||||
<div className="flex flex-col items-start md:items-end gap-1">
|
||||
<span className="text-[10px] font-black text-white/40 uppercase tracking-widest">Neighborhood Helpdesk</span>
|
||||
<a
|
||||
href="tel:+918049123456"
|
||||
className="flex items-center gap-2 text-white hover:text-[#6330D6] transition-colors"
|
||||
>
|
||||
<div className="w-7 h-7 rounded-full bg-[#6330D6] flex items-center justify-center">
|
||||
<MaterialIcon icon="phone" size={14} className="text-white" />
|
||||
<a
|
||||
href="https://www.linkedin.com/company/nearledigital/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className={`${socialButtonClass} hover:bg-[#0A66C2]`}
|
||||
>
|
||||
<FaLinkedinIn size={20} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm font-black tracking-tight">+91 80 4912 3456</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Copyright & legal links */}
|
||||
<div className="mt-8 pt-6 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4 text-[11px] text-white/40 text-center sm:text-left">
|
||||
<p>© {new Date().getFullYear()} Nearle. All rights reserved.</p>
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-1 justify-center">
|
||||
<Link href="#" className="hover:text-white transition-colors">Privacy Policy</Link>
|
||||
<span className="opacity-50">•</span>
|
||||
<Link href="#" className="hover:text-white transition-colors">Terms of Service</Link>
|
||||
<span className="opacity-50">•</span>
|
||||
<Link href="#" className="hover:text-white transition-colors">Help Center</Link>
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Company
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{COMPANY.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Nearle
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{PARTNERSHIPS.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h5 className="mb-5 text-xs font-extrabold uppercase tracking-wider text-white/40 md:text-sm xl:mb-7 xl:text-[17px]">
|
||||
Support
|
||||
</h5>
|
||||
|
||||
<ul className="flex flex-col gap-4 xl:gap-5">
|
||||
{LEGAL.map((link) => (
|
||||
<li key={link.label}>
|
||||
<Link
|
||||
href={link.href}
|
||||
className="inline-block text-sm leading-normal text-white/70 transition-all hover:translate-x-0.5 hover:text-white md:text-base xl:text-[17px]"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-8 w-full border-t border-white/10 xl:my-10" />
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-between gap-8 md:flex-row xl:gap-12">
|
||||
<div className="flex min-h-[120px] w-full max-w-[560px] items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 md:w-auto md:p-5 xl:min-h-[130px] xl:gap-4 xl:p-6">
|
||||
<div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/10 text-white xl:h-[58px] xl:w-[58px] xl:rounded-2xl">
|
||||
<MaterialIcon icon="location_on" size={20} />
|
||||
</div>
|
||||
|
||||
<div className="text-left">
|
||||
<h6 className="text-sm font-black text-white md:text-base xl:text-lg">
|
||||
Nearle
|
||||
</h6>
|
||||
|
||||
<p className="mt-0.5 text-xs leading-normal text-white/60 md:text-sm xl:mt-1 xl:text-base">
|
||||
424, Diwan Bahadur Rd, Opp. Sri Krishna Sweets, R.S. Puram,
|
||||
Coimbatore, TN 641002
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 flex-col items-center gap-1.5 text-center md:items-end md:text-right xl:gap-2">
|
||||
<span className="text-xs font-black uppercase tracking-widest text-white/40 md:text-sm xl:text-base">
|
||||
Neighborhood Helpdesk
|
||||
</span>
|
||||
|
||||
<a
|
||||
href="tel:+919092068666"
|
||||
className="flex items-center gap-2 text-white transition-colors hover:text-[#8A5CFF] xl:gap-3"
|
||||
>
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-[#6330D6] xl:h-14 xl:w-14">
|
||||
<MaterialIcon icon="phone" size={20} className="text-white" />
|
||||
</div>
|
||||
|
||||
<span className="text-base font-black tracking-tight md:text-lg xl:text-[30px]">
|
||||
+91 90920 68666
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4 mt-8 w-full border-t border-white/5 xl:mb-6 xl:mt-10" />
|
||||
|
||||
<div className="flex w-full flex-col items-center justify-between gap-4 text-[13px] text-white/40 md:flex-row md:text-[14px] xl:text-[15px]">
|
||||
<p className="text-center md:text-left">
|
||||
© {new Date().getFullYear()} Nearle. All rights reserved.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<span className="select-none font-bold opacity-35">·</span>
|
||||
<Link href="#" className="transition-colors hover:text-white">
|
||||
Help Center
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,112 +18,102 @@ export function PremiumNavbar() {
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
const isActiveLink = (href: string) => {
|
||||
if (href === "/") return pathname === "/";
|
||||
return pathname.startsWith(href);
|
||||
};
|
||||
|
||||
return (
|
||||
<header className="w-full bg-white border-b border-[#EEE7F4] px-6 md:px-10 h-16 md:h-20 flex items-center relative z-40 select-none">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
{/* LOGO (LEFT) */}
|
||||
<header className="sticky top-0 z-50 w-full border-b border-white/10 bg-[#3D2D8F]/90 text-white backdrop-blur-xl">
|
||||
<div className="relative mx-auto flex h-16 w-full max-w-[1600px] items-center px-6 md:h-20 md:px-10 xl:px-16">
|
||||
{/* Logo - Left */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center hover:scale-[1.02] transition-transform active:scale-95 duration-200"
|
||||
className="flex shrink-0 items-center transition-transform duration-200 hover:scale-[1.02] active:scale-95"
|
||||
aria-label="Nearle Home"
|
||||
>
|
||||
<Image
|
||||
src="/logo.png"
|
||||
src="/logo-light.png"
|
||||
alt="Nearle"
|
||||
width={120}
|
||||
height={30}
|
||||
className="h-7 md:h-8 w-auto object-contain"
|
||||
width={180}
|
||||
height={45}
|
||||
className="h-7 w-auto object-contain md:h-8 xl:h-9"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* LINKS (CENTER) */}
|
||||
<nav className="hidden md:flex items-center gap-6 lg:gap-8">
|
||||
{/* Desktop Navigation - Center */}
|
||||
<nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-6 lg:flex lg:gap-8 xl:gap-10">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const isActive = isActiveLink(link.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`relative py-1 text-sm font-bold transition-all duration-200 ${
|
||||
isActive ? "text-[#6330D6]" : "text-[#5E5866] hover:text-[#16001D]"
|
||||
className={`relative whitespace-nowrap py-2 text-sm font-bold transition-colors duration-200 ${
|
||||
isActive
|
||||
? "text-white"
|
||||
: "text-white/70 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
{isActive && (
|
||||
<span className="absolute bottom-[-4px] left-0 right-0 h-0.5 bg-[#6330D6] rounded-full" />
|
||||
)}
|
||||
|
||||
<span
|
||||
className={`absolute bottom-0 left-1/2 h-0.5 -translate-x-1/2 rounded-full bg-white transition-all duration-300 ${
|
||||
isActive ? "w-full" : "w-0"
|
||||
}`}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* ACTIONS (RIGHT) */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<Link
|
||||
href="#"
|
||||
className="inline-flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold px-5 py-1.5 rounded-full text-xs hover:bg-[#6330D6]/5 active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/people#download-section"
|
||||
className="inline-flex items-center justify-center bg-[#6330D6] text-white font-bold px-5 py-2 rounded-full text-xs hover:bg-[#5225b8] hover:shadow-md hover:scale-[1.02] active:scale-95 transition-all duration-200 whitespace-nowrap"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu toggle */}
|
||||
{/* Mobile Toggle - Right */}
|
||||
<button
|
||||
className="md:hidden flex items-center justify-center w-10 h-10 rounded-full hover:bg-[#6330D6]/5 text-[#16001D] transition-all active:scale-90 cursor-pointer"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label="Toggle menu"
|
||||
type="button"
|
||||
className="ml-auto flex h-10 w-10 items-center justify-center rounded-full text-white transition-all duration-200 hover:bg-white/10 active:scale-90 lg:hidden"
|
||||
onClick={() => setMobileOpen((value) => !value)}
|
||||
aria-label={mobileOpen ? "Close menu" : "Open menu"}
|
||||
aria-expanded={mobileOpen}
|
||||
>
|
||||
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={22} />
|
||||
<MaterialIcon icon={mobileOpen ? "close" : "menu"} size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Drawer */}
|
||||
{mobileOpen && (
|
||||
<div className="absolute top-full left-0 right-0 z-50 bg-white border-b border-[#6330D6]/10 shadow-lg p-4 md:hidden animate-fade-in flex flex-col gap-2">
|
||||
{/* Mobile Menu */}
|
||||
<div
|
||||
className={`overflow-hidden border-t border-white/10 bg-[#30226F]/98 backdrop-blur-xl transition-all duration-300 lg:hidden ${
|
||||
mobileOpen
|
||||
? "max-h-[500px] opacity-100"
|
||||
: "pointer-events-none max-h-0 opacity-0"
|
||||
}`}
|
||||
>
|
||||
<nav className="mx-auto flex w-full max-w-[1600px] flex-col gap-1 px-6 py-5 md:px-10">
|
||||
{NAV_LINKS.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
const isActive = isActiveLink(link.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
className={`px-4 py-2.5 text-sm font-bold rounded-xl transition-all duration-200 flex items-center justify-between ${
|
||||
isActive
|
||||
? "bg-[#6330D6]/10 text-[#6330D6]"
|
||||
: "text-[#5E5866] hover:text-[#16001D] hover:bg-[#6330D6]/5"
|
||||
}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={`flex items-center justify-between rounded-xl px-4 py-3 text-sm font-bold transition-all duration-200 ${
|
||||
isActive
|
||||
? "bg-white/15 text-white"
|
||||
: "text-white/70 hover:bg-white/10 hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
|
||||
{isActive && (
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-[#6330D6]" />
|
||||
<span className="h-2 w-2 rounded-full bg-white" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
<div className="flex flex-col gap-2 pt-2 border-t border-[#6330D6]/5 mt-2">
|
||||
<Link
|
||||
href="#"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-center border-2 border-[#6330D6]/20 text-[#6330D6] font-bold py-2.5 rounded-xl text-sm"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<Link
|
||||
href="/people#download-section"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-center bg-[#6330D6] text-white font-bold py-2.5 rounded-xl text-sm"
|
||||
>
|
||||
Get App
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -9,35 +9,16 @@ type PremiumPageShellProps = {
|
||||
|
||||
export function PremiumPageShell({ children, className = "" }: PremiumPageShellProps) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#E8DCF2] p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8 font-body text-[#16001D] antialiased">
|
||||
<div className={`
|
||||
mx-auto
|
||||
w-full
|
||||
max-w-[1880px]
|
||||
overflow-hidden
|
||||
rounded-[1.5rem]
|
||||
sm:rounded-[2rem]
|
||||
md:rounded-[2.5rem]
|
||||
lg:rounded-[3rem]
|
||||
border
|
||||
border-white/80
|
||||
bg-white
|
||||
shadow-[0_20px_60px_rgba(93,57,128,0.16)]
|
||||
flex
|
||||
flex-col
|
||||
${className}
|
||||
`}>
|
||||
{/* Header/Navbar */}
|
||||
<PremiumNavbar />
|
||||
<div className={`min-h-screen bg-white font-body text-[#16001D] antialiased flex flex-col ${className}`}>
|
||||
{/* Header/Navbar */}
|
||||
<PremiumNavbar />
|
||||
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 w-full">
|
||||
{children}
|
||||
</main>
|
||||
{/* Page Content */}
|
||||
<main className="w-full overflow-x-hidden bg-white">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<PremiumFooter />
|
||||
</div>
|
||||
<PremiumFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
29
src/config/site-content.ts
Normal file
29
src/config/site-content.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
export const siteContent = {
|
||||
brand: {
|
||||
name: "Nearle",
|
||||
},
|
||||
|
||||
metrics: {
|
||||
// Only keep values that are verified and consistent.
|
||||
// TODO: Confirm all numeric metrics with the business team before adding them back.
|
||||
// Removed from UI: verifiedStores, happyCustomers, customerRating (unverifiable / conflicting)
|
||||
serviceRadius: "2km", // product specification — not a business metric
|
||||
},
|
||||
|
||||
app: {
|
||||
// TODO: Populate once app is confirmed live on both stores.
|
||||
// Candidate iOS: https://apps.apple.com/us/app/nearle/id1596895375
|
||||
// Candidate Android: https://play.google.com/store/apps/details?id=com.nearle.gear
|
||||
androidUrl: "",
|
||||
iosUrl: "",
|
||||
status: "coming-soon",
|
||||
},
|
||||
|
||||
contact: {
|
||||
// TODO: Confirm these details with the business team before launch.
|
||||
// These values are sourced from the existing codebase — not invented.
|
||||
phone: "+91 80 4912 3456",
|
||||
whatsappUrl: "https://wa.me/919092068666",
|
||||
email: "support@nearle.in",
|
||||
},
|
||||
} as const;
|
||||
@@ -24,8 +24,8 @@ const path = require('path');
|
||||
await page.screenshot({ path: desktopPath, fullPage: true });
|
||||
console.log('Saved desktop screenshot to:', desktopPath);
|
||||
|
||||
// Mobile Screenshot (390px)
|
||||
await page.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true });
|
||||
// Mobile Screenshot (375px)
|
||||
await page.setViewport({ width: 375, height: 844, isMobile: true, hasTouch: true });
|
||||
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2', timeout: 15000 });
|
||||
const mobilePath = path.join(__dirname, 'mobile_screenshot.png');
|
||||
await page.screenshot({ path: mobilePath, fullPage: true });
|
||||
|
||||
Reference in New Issue
Block a user