- Get groceries, hot meals, daily essentials, and local professional
- services delivered from trusted partners within{" "}
- 25-30 minutes.
+
+ Order groceries, medicines, food and everyday essentials from trusted stores near you — all in one convenient app.
- {/* Mobile/Tablet Only Nearle Bag Logo */}
-
{QUICK_LINKS.map((item) => (
@@ -178,10 +182,10 @@ export function Hero() {
/>
-
+
{item.name}
-
+
{item.label}
diff --git a/src/components/home/HowItWorks.tsx b/src/components/home/HowItWorks.tsx
new file mode 100644
index 0000000..ad3112b
--- /dev/null
+++ b/src/components/home/HowItWorks.tsx
@@ -0,0 +1,74 @@
+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",
+ },
+ {
+ num: "02",
+ title: "Pick Your Favourite Store",
+ desc: "Browse groceries, medicines, food, and daily essentials from nearby shops.",
+ icon: "storefront",
+ color: "bg-secondary/5 text-secondary border-secondary/10",
+ },
+ {
+ num: "03",
+ title: "Place Order & Get Delivery",
+ desc: "Order easily and get it delivered by the store or a Nearle delivery partner.",
+ icon: "local_shipping",
+ color: "bg-[#de96f9]/10 text-primary border-[#de96f9]/20",
+ },
+];
+
+export function HowItWorks() {
+ return (
+
+
+ {/* Header Section */}
+
+
+ Simple Process
+
+
+ From Your Neighbourhood Store to Your Doorstep
+
+
+
+ {/* Steps Layout */}
+
+ {/* Connector Line (Desktop Only) */}
+
+
+ {STEPS.map((step) => (
+
+ {/* Step number watermark */}
+
+ {step.num}
+
+
+ {/* Step Circle with Icon */}
+
+
+
+
+ {/* Title & Description */}
+
+ {step.title}
+
+
+ {step.desc}
+
+
+ ))}
+
+
+ );
+}
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx
index 910dba2..47a1188 100644
--- a/src/components/home/HyperlocalFeatures.tsx
+++ b/src/components/home/HyperlocalFeatures.tsx
@@ -1,27 +1,33 @@
import Image from "next/image";
+import Link from "next/link";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
const FEATURES = [
{
- title: "Verified Community Partners",
- icon: "verified_user",
- desc: "Every merchant on Nearle is manually verified for food hygiene, service quality, and local licensing.",
+ title: "Trusted Nearby Stores",
+ icon: "store",
+ desc: "Connect directly with the local merchants you know and shop from regularly.",
},
{
- title: "Eco-Friendly 2KM Logistics",
- icon: "electric_moped",
- desc: "By capping deliveries at 2km, we run a fast, eco-friendly moped fleet that reduces emissions and saves fuel.",
+ title: "Short-Distance Local Delivery",
+ icon: "local_shipping",
+ desc: "Delivered quickly from shops in your immediate area to keep food hot and groceries fresh.",
},
{
- title: "Exclusive Society Discounting",
- icon: "local_activity",
- desc: "We coordinate with housing societies to negotiate collective discount rates and free scheduled delivery runs.",
+ title: "Easy Reorders",
+ icon: "replay",
+ desc: "Save your favourite stores and reorder your weekly essentials in seconds.",
+ },
+ {
+ title: "Support Local Businesses",
+ icon: "favorite",
+ desc: "Help neighbourhood stores thrive and remain competitive in a digital world.",
},
];
export function HyperlocalFeatures() {
return (
-
+
{/* Scoped CSS styles for precise layout enforcement */}