From 48cafd07c6bd864f5af161324bd2e3b6c227228f Mon Sep 17 00:00:00 2001 From: Aravind Date: Fri, 26 Jun 2026 10:58:24 +0530 Subject: [PATCH] footer section fix --- package-lock.json | 12 +- package.json | 3 +- src/app/about/page.tsx | 100 +++- src/app/businesses/page.tsx | 417 +++++++------ src/app/contact/page.tsx | 4 +- src/app/globals.css | 16 + src/app/people/page.tsx | 12 +- .../businesses/BusinessFeaturesGrid.tsx | 552 ++++++++++++++++++ src/components/home/HowItWorks.tsx | 145 +++-- src/components/home/ServiceCategories.tsx | 4 +- src/components/home/StoreQRSection.tsx | 6 +- src/components/layout/Footer.tsx | 70 ++- src/components/layout/PremiumFooter.tsx | 294 ++++++---- src/components/layout/PremiumNavbar.tsx | 120 ++-- src/components/layout/PremiumPageShell.tsx | 2 +- src/config/site-content.ts | 2 +- 16 files changed, 1276 insertions(+), 483 deletions(-) create mode 100644 src/components/businesses/BusinessFeaturesGrid.tsx diff --git a/package-lock.json b/package-lock.json index ce590f5..713b672 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8d97b2e..8e5224c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index a21acd9..567babd 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -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,19 +17,28 @@ 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 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: "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" } ]; @@ -110,7 +120,7 @@ export default function AboutPage() { {/* ─── Intro Description Block ─── */} -
+
Our Platform @@ -123,29 +133,73 @@ export default function AboutPage() {
{/* ─── Strategy Cards (Mission, Vision, Why) ─── */} -
-
- {STRATEGY_CARDS.map((card) => ( -
-
- +
+
+
+ {STRATEGY_CARDS.map((card) => ( +
+ {/* Content: icon, heading, description */} +
+
+ +
+

+ {card.title} +

+

+ {card.descr} +

+
+ {/* Image: inner rounded container with consistent spacing on all sides */} +
+ {card.imageAlt} +
-

- {card.title} -

-

- {card.descr} -

-
- ))} + ))} +
{/* ─── Global Stats counters ─── */} -
+
{LOCAL_COUNTERS.map((c) => (
@@ -162,7 +216,7 @@ export default function AboutPage() {
{/* ─── Brand Building Banner ─── */} -
+
Don't miss the opportunity diff --git a/src/app/businesses/page.tsx b/src/app/businesses/page.tsx index 13f1c80..9f46875 100644 --- a/src/app/businesses/page.tsx +++ b/src/app/businesses/page.tsx @@ -1,9 +1,11 @@ import React from "react"; +import Image from "next/image"; import Link from "next/link"; import { MaterialIcon } from "@/components/ui/MaterialIcon"; import { PremiumPageShell } from "@/components/layout/PremiumPageShell"; import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage"; import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow"; +import { BusinessFeaturesGrid } from "@/components/businesses/BusinessFeaturesGrid"; import type { Metadata } from "next"; export const metadata: Metadata = { @@ -12,71 +14,6 @@ export const metadata: Metadata = { "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 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" - } -]; - -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: "More", label: "Revenue From Local Reach", icon: "trending_up", bg: "bg-[#FAF7FD]" }, - { value: "Fast", label: "Reliable Order Fulfillment", icon: "groups", bg: "bg-[#6330D6] text-white" }, - { value: "Easy", label: "Direct Customer Access", 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" }, @@ -85,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 +
+ {/* Status bar */} +
+ 9:41 +
+ {[4, 6, 8, 10].map((h) => ( + + ))} +
+
+ + {/* Search bar */} +
+ + Search local stores + +
+ + {/* Map */} +
+ {/* Street grid */} +
+ {/* Subtle glow under main pin */} +
+ + {/* Large center pin */} + + {/* Green pin — top-right */} + + {/* Purple pin — upper-left */} + + {/* Green pin — lower-left */} + + {/* Purple pin — lower-right */} + +
+ + {/* Store preview card — bottom sheet inside phone */} +
+ {/* Store thumbnail */} +
+ +
+
+

Your Store

+
+ Open + • + 4.8 + ⭐ + • + 0.8 km +
+
+ +
+
+ ); +} + export default function BusinessesPage() { const collageCards = [ { text: "Nearby Customers", icon: "people" }, @@ -151,7 +193,7 @@ export default function BusinessesPage() {
{/* ─── Intro Highlight Banner ─── */} -
+
Together, we grow @@ -174,133 +216,146 @@ export default function BusinessesPage() {
- {/* ─── Timeline / Core Process Steps ─── */} -
-
- - How it works - -

- Build Your Neighborhood Brand -

-

- Three simple milestones to scale your retail reach from offline streets straight into neighborhood homes. -

-
- -
- {PROCESS_STEPS.map((ps) => ( -
-
- {ps.step} -
-
- -
-

- {ps.title} -

-

- {ps.descr} -

-
- ))} -
-
- - {/* ─── Grid Stats & Value Prop ─── */} -
-
- {/* Left side: features block (7 cols) */} -
- - Our features + {/* ─── Build Your Neighborhood Brand ─── */} +
+
+ {/* Header */} +
+ + How it works -

- Move Your Business Forward +

+ Build Your Neighborhood Brand

-

- Be a part of a community of like-minded people. Brand your business on Nearle and reach out to your neighborhood with ease. +

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

- -
- {FEATURES.map((feat) => ( -
-
- -
-
-

- {feat.title} -

-

- {feat.descr} -

-
-
- ))} -
- {/* Right side: stats quadrant (5 cols) */} -
- {STATS.map((stat, i) => ( -
-
-
- -
-
-
-

{stat.value}

-

- {stat.label} -

+ {/* Cards grid */} +
+ {/* Card 1 - Get Online */} +
+ + 01 + +
+ +
+
+

+ Get Online +

+

+ Introduce your business to your Neighbourhood. Compete with online businesses through your offline store. +

+
+
+
+ Local shop storefront with purple awning and now online board
- ))} +
+ + {/* Card 2 - Get Noticed */} +
+ + 02 + +
+ +
+
+

+ Get Noticed +

+

+ Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos. +

+
+
+ +
+
+ + {/* Card 3 - Get Simplified */} +
+ + 03 + +
+ +
+
+

+ Get Simplified +

+

+ Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further. +

+
+
+
+ {["Offers & Discounts", "Loyal Customers", "Repeat Orders"].map((chip) => ( +
+ {chip} +
+ ))} +
+
+ Nearle grocery bag filled with vegetables and packaged products +
+
+
+ {/* ─── Our Features / Business Grid ─── */} + + {/* ─── Join/Download Call to Action ─── */} -
-
-
-

- Nearle is Essential for Business Growth -

-

- Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today. -

-
- {/* TODO: Replace with real merchant onboarding URL once confirmed */} - - - Register Interest - - - - Contact Experts - +
+
+
+
+
+

+ Nearle is Essential for Business Growth +

+

+ Leverage the full potential of your neighborhood. Stand above the rest, increase customers, and scale your brand today. +

+
+ {/* TODO: Replace with real merchant onboarding URL once confirmed */} + + + Register Interest + + + + Contact Experts + +
+
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx index 27fdf84..80c65b7 100644 --- a/src/app/contact/page.tsx +++ b/src/app/contact/page.tsx @@ -13,7 +13,7 @@ export default function ContactPage() { return ( {/* ─── Contact Section ─── */} -
+
{/* Subtle Map Grid/Location decoration behind left content */}
@@ -101,7 +101,7 @@ export default function ContactPage() {
{/* ─── Map Section ─── */} -
+