-
-
+ {/* Middle Column: Benefit Cards (Desktop Only - staggered layout) */}
+
+ {APP_BENEFITS.map((b) => (
+
+
+
+
+
+
+
+
+
{b.title}
+
{b.microcopy}
+
{b.text}
+
+
+ ))}
+
+
+ {/* Right Column: Phone Mockup (Desktop Only) */}
+
+ {/* Subtle soft glow behind phone */}
+
+
+ {/* Label above phone */}
+
+ Made for your neighbourhood
+
+
+ {/* iPhone style phone container */}
+
+ {/* Status Bar */}
+
+
Good evening 👋
+
+
+
-
Nearle App
-
Coimbatore neighborhood orders delivered in 15 mins.
-
+ {/* Mock Search Field */}
+
+
+ Search nearby stores
+
+
+ {/* Mock Category Icons */}
+
+
+
+ Grocery
+
+
+
+ Pharmacy
+
+
+
+ Food
+
+
+
+ {/* Mock Store Cards */}
+
+
+
+
+
+
+
Daily Groceries
+
Verified Store • Nearby
+
+
+
+
+
+
+
+
+
Health & Care
+
Verified Pharmacy • Nearby
+
+
+
+
+ {/* Subtitle / Nearle App Label */}
+
+
Nearle App
+
Your nearby stores, all in one place.
+
+
+ {/* Mock Bottom Navigation */}
+
+
+
+
+
+
+
+
+
+
+ {/* Overlapping alert bubble */}
+
+
+
+
+
+
Order Confirmed
+
Your local store is preparing your order
+
+
+
+
+
+ {/* ──────────────────────────────────────────────────────── */}
+ {/* 📱 MOBILE / TABLET LAYOUT (below lg) */}
+ {/* ──────────────────────────────────────────────────────── */}
+
+ {/* Heading and Description */}
+
+ NEARLE APP
+
+
+ Your Neighbourhood,
Now in Your Pocket.
+
+
+ Browse nearby stores, save your favourites, and order everyday essentials with ease.
+
+
+ Discover groceries, medicines, food, and local offers from stores you already know and trust.
+
+
+ {/* Made for your neighbourhood eyebrow */}
+
+ Made for your neighbourhood
+
+
+ {/* Compact Phone Preview */}
+
+ {/* Status Bar */}
+
+
Good evening 👋
+
+
+
+
+
+
+ {/* Mock Search Field */}
+
+
+ Search nearby stores
+
+
+ {/* Mock Category Icons */}
+
+
+
+ Grocery
+
+
+
+ Pharmacy
+
+
+
+ Food
+
+
+
+ {/* Mock Store Cards (Only One Card on Mobile) */}
+
+
+
+
+
+
+
Daily Groceries
+
Verified Store • Nearby
+
+
+
+
+ {/* Subtitle / Nearle App Label */}
+
+
Nearle App
+
Your nearby stores, all in one place.
+
+
+ {/* Mock Bottom Navigation */}
+
+
+
+
+
+
+
+
+
+
+ {/* Order Confirmation Card */}
+
+
+
+
+
+
Order Confirmed
+
Your local store is preparing your order
+
+
+
+ {/* Compact Benefits List */}
+
+ {APP_BENEFITS.map((b) => (
+
+ ))}
+
+
+ {/* Coming Soon Download Buttons */}
+
+
+
+
+
+
Coming Soon
+
App Store
+
+
+
+
+
+
Coming Soon
+
Google Play
+
+
diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
index e62c76d..4b244ce 100644
--- a/src/components/home/Hero.tsx
+++ b/src/components/home/Hero.tsx
@@ -3,24 +3,25 @@ import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const QUICK_LINKS = [
+ {
+ name: "Daily Groceries",
+ icon: "shopping_basket",
+ label: "Fresh & On-Time",
+ },
+
{
name: "Hot Meals",
icon: "fastfood",
label: "Quick & tasty",
},
{
- name: "Daily Groceries",
- icon: "shopping_basket",
- label: "Fresh & On-Time",
- },
- {
- name: "Health & Care",
+ name: "wellness ",
icon: "medical_services",
label: "Essential & Trusted",
},
{
name: "More Services",
- icon: "grid_view",
+ icon: "store",
label: "Explore More",
},
];
@@ -56,11 +57,11 @@ export function Hero() {
Neighbourhood commerce, made simple
-
- Your Favourite
+
+ Your Favourite Local Stores,
- Local Stores, Now at Your Doorstep.
+ Now at Your Doorstep.
@@ -69,16 +70,16 @@ export function Hero() {
{/* CTAs */}
-
+
Explore Nearby Stores
List Your Store
@@ -98,10 +99,7 @@ export function Hero() {
Neighbourhood delivery
-
-
- Available in Coimbatore
-
+
-
- Groceries
-
-
-
- Pharmacy
-
-
-
- Food
-
+