update merchant and delivery

src/components/businesses/BusinessFeaturesGrid.tsx

@@ -483,12 +483,12 @@ export function BusinessFeaturesGrid() {
                     </svg>
                   </div>
                   <div className="min-w-0">
-                    <h4
+                    <p
                       className="font-display font-black text-[#16001D]"
                       style={{ fontSize: 18, lineHeight: 1.25, marginBottom: 8 }}
                     >
                       {feat.title}
-                    </h4>
+                    </p>
                     <p className="text-[#5E5866]" style={{ fontSize: 15, lineHeight: 1.55 }}>
                       {feat.descr}
                     </p>

src/components/contact/ContactForm.tsx

@@ -259,7 +259,7 @@ export function ContactForm() {
             <MaterialIcon icon="check_circle" size={24} />
           </div>
           <div className="flex-1">
-            <h4 className="text-body-md font-black text-white">Message Sent!</h4>
+            <p className="text-body-md font-black text-white">Message Sent!</p>
             <p className="text-body-sm text-white/70 mt-1 leading-normal">
               Thank you for reaching out. We will get back to you within 24 hours.
             </p>

src/components/delivery/AnimatedTimeline.tsx

@@ -56,7 +56,7 @@ export function AnimatedTimeline({ items }: { items: TimelineItem[] }) {
             </div>
             <div className="flex-1 pb-2 pt-1">
               <div className="flex items-center gap-3 mb-1.5">
-                <h3 className="text-base font-black text-[#16001D] leading-tight">{item.title}</h3>
+                <p className="text-base font-black text-[#16001D] leading-tight">{item.title}</p>
                 <span className="px-2.5 py-0.5 rounded-full bg-[#6330D6]/8 text-[#6330D6] text-[10px] font-black uppercase tracking-wide shrink-0">
                   {item.time}
                 </span>

src/components/heroes/ContactHero.tsx

@@ -127,7 +127,7 @@ export function ContactHero() {
                     <MaterialIcon icon={item.icon} size={18} />
                   </div>
                   <div className="text-left">
-                    <h4 className="text-[#16001D] text-sm font-black">{item.label}</h4>
+                    <p className="text-[#16001D] text-sm font-black">{item.label}</p>
                     <p className="text-[#5E5866] text-sm font-semibold mt-0.5">{item.value}</p>
                   </div>
                 </motion.div>

src/components/heroes/DeliveryHero.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { HeroLogo } from "@/components/heroes/HeroLogo";
+import { staggerFast } from "@/lib/animations";
+
+const HERO_STATS = [
+  { title: "Flexible Hours", icon: "schedule", desc: "Work when it suits you" },
+  { title: "Weekly Payouts", icon: "payments", desc: "Earnings settled every week" },
+  { title: "Short Distances", icon: "near_me", desc: "Deliver within your neighbourhood" },
+  { title: "Local Support", icon: "support_agent", desc: "Our team is always there" },
+];
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
+// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description → CTA
+const badgeVariant = {
+  hidden: { opacity: 0, scale: 0.88 },
+  visible: { opacity: 1, scale: 1, transition: { type: "spring" as const, stiffness: 280, damping: 20, delay: 0.9 } },
+};
+const titleVariant = {
+  hidden: { opacity: 0, y: 36 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.65, delay: 1.05, ease: EASE } },
+};
+const descVariant = {
+  hidden: { opacity: 0, y: 24 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 1.25, ease: EASE } },
+};
+const ctaVariant = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.45, delay: 1.4, ease: EASE } },
+};
+
+export function DeliveryHero() {
+  return (
+    <section className="w-full flex flex-col select-none bg-white">
+      <div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
+        <Image
+          src="/delivery.png"
+          alt=""
+          fill
+          sizes="100vw"
+          className="absolute inset-0 z-0 h-full w-full object-cover object-center"
+          priority
+          fetchPriority="high"
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
+
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
+
+          <motion.div
+            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
+            variants={staggerFast}
+            initial="hidden"
+            animate="visible"
+          >
+            <HeroLogo />
+
+            <motion.span
+              variants={badgeVariant}
+              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
+            >
+              Delivery Partners
+            </motion.span>
+
+            <motion.h1
+              variants={titleVariant}
+              className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
+            >
+              Deliver Locally.
+              <br />
+              <span className="text-[#A855F7]">Earn Daily.</span>
+            </motion.h1>
+
+            <motion.p
+              variants={descVariant}
+              className="text-lg sm:text-xl md:text-xl lg:text-2xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
+            >
+              Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood, on your own schedule, at your own pace.
+            </motion.p>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
+          <FeatureStatsRow items={HERO_STATS} />
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/heroes/MerchantsHero.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { HeroLogo } from "@/components/heroes/HeroLogo";
+import { staggerContainer } from "@/lib/animations";
+
+const HERO_STATS = [
+  { title: "Digital Catalogue", icon: "menu_book", desc: "Showcase your products" },
+  { title: "QR Ordering", icon: "qr_code", desc: "Scan & order from your store" },
+  { title: "Local Discovery", icon: "location_on", desc: "Get found by nearby customers" },
+  { title: "Order Management", icon: "assignment", desc: "Track every order live" },
+];
+
+const EASE = [0.22, 1, 0.36, 1] as [number, number, number, number];
+
+// Shared cascade timing: logo settles at ~1.2s, then badge → heading → description → CTA
+const badgeVariant = {
+  hidden: { opacity: 0, x: -20 },
+  visible: { opacity: 1, x: 0, transition: { duration: 0.5, delay: 0.9, ease: EASE } },
+};
+const titleVariant = {
+  hidden: { opacity: 0, y: 28 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.05, ease: EASE } },
+};
+const descVariant = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition: { duration: 0.45, delay: 1.25, ease: "easeOut" as const } },
+};
+const ctaVariant = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.45, delay: 1.4, ease: EASE } },
+};
+
+export function MerchantsHero() {
+  return (
+    <section className="w-full flex flex-col select-none bg-white">
+      <div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
+        <Image
+          src="/merchant.png"
+          alt=""
+          fill
+          sizes="100vw"
+          className="absolute inset-0 z-0 h-full w-full object-cover object-[45%_center] md:object-[50%_center] xl:object-center"
+          priority
+          fetchPriority="high"
+          aria-hidden="true"
+        />
+        <div className="absolute inset-0 z-[1] bg-black/40 md:bg-[radial-gradient(ellipse_100%_100%_at_50%_45%,rgba(0,0,0,0.6)_0%,rgba(0,0,0,0.4)_40%,rgba(0,0,0,0.1)_100%)]" />
+
+        <div className="relative z-10 flex min-h-[560px] items-center justify-center px-6 pt-20 pb-10 sm:px-8 sm:pt-24 md:min-h-[85vh] md:px-12 md:py-16 lg:px-16 lg:py-16 max-w-[1600px] mx-auto">
+
+          <motion.div
+            className="flex flex-col items-center text-center w-full max-w-[860px] relative z-20 px-6 py-8 md:px-14 md:py-6 lg:py-8"
+            variants={staggerContainer}
+            initial="hidden"
+            animate="visible"
+          >
+            <HeroLogo />
+
+            <motion.span
+              variants={badgeVariant}
+              className="inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest bg-white text-[#6330D6] shadow-md uppercase mb-6 w-fit"
+            >
+              Merchant Partners
+            </motion.span>
+
+            <motion.h1
+              variants={titleVariant}
+              className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-extrabold text-white leading-[1.1] tracking-tight [text-shadow:0_4px_32px_rgba(0,0,0,0.5)]"
+            >
+              Bring Your Store Online
+              <br />
+              <span className="text-[#A855F7]">with Nearle.</span>
+            </motion.h1>
+
+            <motion.p
+              variants={descVariant}
+              className="max-w-[780px] text-lg sm:text-xl md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
+            >
+              Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business, without leaving your store.
+            </motion.p>
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
+        <div className="px-6 sm:px-10 max-w-[1600px] mx-auto">
+          <FeatureStatsRow items={HERO_STATS} />
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/BusinessSection.tsx

@@ -108,7 +108,7 @@ function LocalDiscoveryVisual() {
           <Image src="/images/nearle-merchant/success-owner.webp" alt="Owner" fill className="object-cover" />
         </div>
         <div className="p-3.5 sm:p-4">
-          <h4 className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</h4>
+          <p className="truncate text-[13px] font-black text-brand-dark sm:text-[15px]">Kumar Provision Store</p>
           <p className="mt-0.5 truncate text-[10px] font-medium text-on-surface-variant sm:text-[11px]">Gandhi Nagar, West Delhi</p>
           
           <div className="mt-2.5 flex gap-1.5">
@@ -238,9 +238,9 @@ export function BusinessSection() {
                         <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">
+                        <p className="text-[1rem] font-black leading-snug tracking-tight text-brand-dark">
                           {feature.title}
-                        </h3>
+                        </p>
                         <p className="mt-1.5 text-sm leading-relaxed text-on-surface-variant">
                           {feature.desc}
                         </p>
@@ -290,9 +290,9 @@ export function BusinessSection() {
                 <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">
+                <p className="mt-1.5 text-base font-black leading-tight text-brand-dark">
                   Kumar Provision Store
-                </h3>
+                </p>
                 <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>

src/components/home/HowItWorks.tsx

@@ -378,9 +378,9 @@ export function HowItWorks() {
                 <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]">
+                <p className="font-display text-2xl font-black text-brand-dark md:text-[28px]">
                   {step.title}
-                </h3>
+                </p>
                 <p className="mt-3 text-sm leading-relaxed text-on-surface-variant md:text-base">
                   {step.desc}
                 </p>

src/components/home/HyperlocalFeatures.tsx

@@ -115,9 +115,9 @@ export function HyperlocalFeatures() {
                   </div>
 
                   <div>
-                    <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
+                    <p className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors">
                       {item.title}
-                    </h3>
+                    </p>
                     <p className="text-sm md:text-base text-on-surface-variant mt-1 leading-relaxed">
                       {item.desc}
                     </p>

src/components/home/ServiceCategories.tsx

@@ -137,9 +137,9 @@ export function ServiceCategories() {
               {/* Card Body */}
               <div className="p-6 flex flex-col flex-grow justify-between min-h-[160px]">
                 <div>
-                  <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
+                  <p className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
                     {cat.name}
-                  </h3>
+                  </p>
                   <p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
                     {cat.desc}
                   </p>

src/components/home/WhyNearle.tsx

@@ -100,9 +100,9 @@ export function WhyNearle() {
               <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">
+              <p className="font-display text-xl font-black text-brand-dark mb-3">
                 {card.title}
-              </h3>
+              </p>
               <p className="text-sm md:text-base text-on-surface-variant leading-relaxed">
                 {card.desc}
               </p>