diff --git a/public/images/nearle-how/how-grocery-bag.webp b/public/images/nearle-how/how-grocery-bag.webp new file mode 100644 index 0000000..f67ded0 Binary files /dev/null and b/public/images/nearle-how/how-grocery-bag.webp differ diff --git a/public/images/nearle-how/how-storefront.webp b/public/images/nearle-how/how-storefront.webp new file mode 100644 index 0000000..d901409 Binary files /dev/null and b/public/images/nearle-how/how-storefront.webp differ diff --git a/src/app/globals.css b/src/app/globals.css index 9610e31..57b587f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1274,8 +1274,127 @@ main { 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); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7bb4cf9..1955e21 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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" /> + {children} diff --git a/src/app/people/page.tsx b/src/app/people/page.tsx index bba8e86..ba33214 100644 --- a/src/app/people/page.tsx +++ b/src/app/people/page.tsx @@ -309,14 +309,14 @@ export default function PeoplePage() {
-
Coming Soon
+
Available on
App Store
-
Coming Soon
+
Available on
Google Play
@@ -511,14 +511,14 @@ export default function PeoplePage() {
-
Coming Soon
+
Available on
App Store
-
Coming Soon
+
Available on
Google Play
diff --git a/src/components/home/BusinessSection.tsx b/src/components/home/BusinessSection.tsx index f53cc34..70bd387 100644 --- a/src/components/home/BusinessSection.tsx +++ b/src/components/home/BusinessSection.tsx @@ -9,7 +9,7 @@ const FEATURES = [ icon: "menu_book", visual: "/images/nearle-merchant/catalogue-ui.webp", alt: "Clean grocery catalogue interface preview", - tone: "bg-primary/5 text-primary", + tone: "bg-primary/8 text-primary", }, { title: "QR Ordering", @@ -17,7 +17,7 @@ const FEATURES = [ icon: "qr_code", visual: "/images/nearle-merchant/qr-stand.webp", alt: "QR ordering stand on a local grocery store counter", - tone: "bg-secondary/5 text-secondary", + tone: "bg-secondary/8 text-secondary", }, { title: "Local Discovery", @@ -38,59 +38,96 @@ const FEATURES = [ ]; const BENEFITS = [ - "No Commission on your orders", - "Full Control on pricing", - "Dedicated Support for your business", - "Grow Your Sales in your area", + { + 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 (
-
-
+
+
-
+ {/* + * 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] + */} +
+ + {/* ── 1. Left text content (always col-1 row-1) ── */}
- - Merchant Partnerships - -

- Bring Your Store Online
- with Nearle. + {/* Badge */} +
+
+ +
+ + Merchant Partnerships + +
+ +

+ Bring Your Store Online with{" "} + Nearle.

-

+ +

Reach more nearby customers, accept online orders, promote local offers, and grow repeat sales — while staying in control of your business.

-
+
-
- +
+
- Stay in control of your pricing and orders + + Stay in control of your pricing and orders +
-
- +
+
- Build direct relationships with local families + + Build direct relationships with local families +
-
+
Partner With Nearle Talk to Our Team @@ -98,85 +135,98 @@ export function BusinessSection() {
-
- Indian local grocery shop owner managing store orders on a laptop -
+ {/* ── 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 + */} +
+ {FEATURES.map((feature) => ( +
+
+
+
+ +
+
+

+ {feature.title} +

+

+ {feature.desc} +

+
+
+
+
+ {feature.alt} +
+
+ ))}
-
-
+ {/* ── 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) + */} +
+
Indian grocery shop owner using a smartphone inside a kirana store
-
- +
+ Success Story -

+

Kumar Provision Store

-

+

Nearle helped us reach more customers in our area and manage orders effortlessly.

+
-
- {FEATURES.map((feature) => ( -
-
-
- -
-
-

- {feature.title} -

-

- {feature.desc} -

-
+ {/* ── Benefits strip ── */} +
+
+ {BENEFITS.map((b) => ( +
+
+
-
- {feature.alt} +
+
{b.title}
+
{b.desc}
))}
- -
- {BENEFITS.map((benefit) => ( -
-
- -
- - {benefit} - -
- ))} -
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx index 783716c..fc143c3 100644 --- a/src/components/home/HowItWorks.tsx +++ b/src/components/home/HowItWorks.tsx @@ -4,88 +4,253 @@ 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", - image: "/images/nearle-redesign/choose-area.webp", - alt: "Hand holding a smartphone with a local map and purple location pins", + 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", - image: "/images/nearle-redesign/pick-store.webp", - alt: "Customer selecting groceries from a nearby store shelf", + 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", - image: "/images/nearle-redesign/delivery-doorstep.webp", - alt: "Nearle delivery partner handing a grocery bag to a customer", + 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 ( +
+

+ Orders Received +

+ +
+ {["Fresh groceries", "Daily essentials", "Local offers"].map((item) => ( +
+ + {item} +
+ ))} +
+
+ ); +} + +function StorePhone() { + return ( +
+
+
+
+ Search groceries +
+
+ {["Rice", "Veg", "Milk", "Snacks"].map((label) => ( +
+ {label} +
+ ))} +
+
+ {["Kumar Provision", "Fresh Daily", "Neighbour Mart"].map((store, index) => ( +
+
+ +
+

{store}

+

Groceries nearby

+
+
+
+ ))} +
+ +
+
+ ); +} + +function GrowthPill() { + return ( +
+ +
+ More Customers +
+ More Growth +
+
+ ); +} + +function PhoneMapVisual() { + return ( +
+
+ Search local stores +
+
+
+ + + +
+
+

Your Store

+

Open nearby

+
+ + Offers + + + Shop + +
+ ); +} + +function StepVisual({ type }: { type: string }) { + if (type === "store") { + return ( + 3D local shop storefront with purple awning and now online board + ); + } + + if (type === "phone") { + return ( +
+ +
+ ); + } + + return ( +
+
+ {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => ( +
+ {chip} +
+ ))} +
+
+ Nearle grocery bag filled with vegetables and packaged products +
+
+ ); +} + export function HowItWorks() { return (
- {/* Header Section */} -
- - Simple Process - -

- From Your Neighbourhood Store to Your Doorstep -

+
+
+
+ + + Together, We Grow + +

+ Get set in minutes and delight the{" "} + Neighbourhood +

+

+ Nearle is built to help businesses like{" "} + Yours{" "} + establish a local online presence and empower neighbourhood customers to discover and interact with you directly. +

+ +
+ +
+
+ Indian kirana-store owner using a laptop inside a grocery shop +
+
+ + + +
+
- {/* Steps Layout - Timeline style */} -
- {/* Connecting Line (Desktop Only) */} -
+
+ + How It Works + +

+ Build Your Neighbourhood Brand +

+

+ Three simple milestones to scale your retail reach from offline streets straight into neighbourhood homes. +

+
-
- {STEPS.map((step) => ( -
- {/* Icon Container with watermark number */} -
- - - {step.num} - -
- -
-
- {step.alt} -
-
-

- {step.title} -

-

- {step.desc} -

-
-
+
+ {STEPS.map((step) => ( +
+ + {step.num} + +
+
- ))} -
+
+

+ {step.title} +

+

+ {step.desc} +

+
+
+ +
+ + ))}
); } - diff --git a/src/components/home/StoreQRSection.tsx b/src/components/home/StoreQRSection.tsx index 4b7779c..c8df7e2 100644 --- a/src/components/home/StoreQRSection.tsx +++ b/src/components/home/StoreQRSection.tsx @@ -64,7 +64,7 @@ export function StoreQRSection() { App Store
- Coming Soon + Available on
@@ -78,7 +78,7 @@ export function StoreQRSection() { Google Play
- Coming Soon + Available on
@@ -204,7 +204,7 @@ export function StoreQRSection() { App Store
- Coming Soon + Available on
@@ -218,7 +218,7 @@ export function StoreQRSection() { Google Play
- Coming Soon + Available on
diff --git a/src/components/layout/PremiumFooter.tsx b/src/components/layout/PremiumFooter.tsx index ea3b84c..7e88d96 100644 --- a/src/components/layout/PremiumFooter.tsx +++ b/src/components/layout/PremiumFooter.tsx @@ -28,8 +28,8 @@ const LEGAL = [ export function PremiumFooter() { return ( -