update merchant and delivery

src/app/about/page.tsx

@@ -102,12 +102,12 @@ export default function AboutPage() {
                   >
                     <MaterialIcon icon={card.icon} size={28} />
                   </div>
-                  <h3
+                  <p
                     className="font-display font-black text-[#16001D]"
                     style={{ fontSize: "clamp(22px, 1.8vw, 30px)", marginTop: 24, marginBottom: 14, lineHeight: 1.2 }}
                   >
                     {card.title}
-                  </h3>
+                  </p>
                   <p
                     className="text-[#5E5866]"
                     style={{ fontSize: "clamp(15px, 1.1vw, 18px)", lineHeight: 1.65 }}
@@ -146,7 +146,7 @@ export default function AboutPage() {
               <div className="w-12 h-12 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
                 <MaterialIcon icon={c.icon} size={22} />
               </div>
-              <h4 className="text-4xl font-display font-black text-[#16001D]">{c.count}</h4>
+              <p className="text-4xl font-display font-black text-[#16001D]">{c.count}</p>
               <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {c.label}
               </p>

src/app/brands/page.tsx

@@ -186,7 +186,7 @@ export default function BrandsPage() {
                   </span>
                 </div>
                 <div>
-                  <h3 className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</h3>
+                  <p className="text-base font-black text-[#16001D] leading-tight mb-2">{item.title}</p>
                   <p className="text-m text-[#5E5866] leading-relaxed">{item.desc}</p>
                 </div>
               </AnimatedCard>
@@ -307,9 +307,9 @@ export default function BrandsPage() {
                 <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
                   <MaterialIcon icon={step.icon} size={24} />
                 </div>
-                <h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
+                <p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
                   {step.title}
-                </h3>
+                </p>
                 <p className="text-md text-[#5E5866] leading-relaxed">{step.desc}</p>
               </AnimatedCard>
             ))}

src/app/businesses/page.tsx

@@ -152,9 +152,9 @@ export default function BusinessesPage() {
                 <MaterialIcon icon="storefront" size={28} />
               </div>
               <div className="relative z-10 mt-6 max-w-[260px]">
-                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Online
-                </h3>
+                </p>
                 <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                   Introduce your business to your Neighbourhood. Compete with online businesses through your offline store.
                 </p>
@@ -181,9 +181,9 @@ export default function BusinessesPage() {
                 <MaterialIcon icon="campaign" size={28} />
               </div>
               <div className="relative z-10 mt-6 max-w-[260px]">
-                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Noticed
-                </h3>
+                </p>
                 <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                   Your products get published to Nearle customers in your neighborhood through the app. Customers search based on location, products, discounts, and promos.
                 </p>
@@ -202,9 +202,9 @@ export default function BusinessesPage() {
                 <MaterialIcon icon="auto_awesome" size={28} />
               </div>
               <div className="relative z-10 mt-6 max-w-[260px]">
-                <h3 className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
+                <p className="font-display text-2xl lg:text-[26px] font-black text-[#16001D] leading-tight">
                   Get Simplified
-                </h3>
+                </p>
                 <p className="mt-3 text-base leading-relaxed text-[#5E5866]">
                   Delight the community with a personalized online experience. Unlock revenue opportunities and marketing strategies that will take your business further.
                 </p>

src/app/contact/page.tsx

@@ -38,7 +38,7 @@ export default function ContactPage() {
               <MaterialIcon icon="store" size={16} className="text-white" />
             </div>
             <div className="text-left">
-              <h4 className="text-xs font-black text-[#16001D]">R.S. Puram Hub</h4>
+              <p className="text-xs font-black text-[#16001D]">R.S. Puram Hub</p>
               <p className="text-[10px] text-[#5E5866] mt-0.5 leading-none">Connecting vendors & residents</p>
             </div>
           </div>

src/app/delivery-partners/page.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { DeliveryHero } from "@/components/heroes/DeliveryHero";
-import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
 import { FAQAccordion } from "@/components/ui/FAQAccordion";
 import { AnimatedSection } from "@/components/motion/AnimatedSection";
 import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -23,13 +22,6 @@ export const metadata: Metadata = {
   },
 };
 
-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 BENEFITS = [
   {
     icon: "access_time",
@@ -161,67 +153,9 @@ const FAQ_ITEMS = [
 ];
 
 export default function DeliveryPartnersPage() {
-  const collageCards = [
-    { text: "Flexible Hours", icon: "access_time" },
-    { text: "Weekly Payouts", icon: "payments" },
-    { text: "Local Deliveries", icon: "near_me" },
-  ];
-
   return (
     <PremiumPageShell>
-      {/* ─── Hero Section ─── */}
+      <DeliveryHero />
-      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        <div className="border-b border-[#6330D6]/10">
-          <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
-            <div className="flex flex-col text-left max-w-xl">
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
-                Delivery Partners
-              </span>
-
-              <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
-                Deliver Locally.
-                <br />
-                <span className="text-[#6330D6]">Earn Daily.</span>
-              </h1>
-
-              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-                Join the Nearle delivery network and earn by making short, local deliveries in your neighbourhood, on your own schedule, at your own pace.
-              </p>
-
-              <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
-                <Link
-                  href="/contact"
-                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-                >
-                  Join the Delivery Network
-                </Link>
-                <a
-                  href="#earnings"
-                  className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
-                >
-                  See Earnings
-                </a>
-              </div>
-            </div>
-
-            <div className="w-full">
-              <HeroVisualCollage
-                centerImage="/nearlenewlogo.png"
-                leftImage="/nearle-people.webp"
-                rightImage="/images/nearle-merchant/delivery-support.webp"
-                glassCards={collageCards}
-                isPhoneCenter={false}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
-          <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
-            <FeatureStatsRow items={HERO_STATS} />
-          </div>
-        </div>
-      </section>
 
       {/* ─── Benefits Grid ─── */}
       <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -250,7 +184,7 @@ export default function DeliveryPartnersPage() {
                   <MaterialIcon icon={benefit.icon} size={24} />
                 </div>
                 <div>
-                  <h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
+                  <p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
                   <p className="mt-2 text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
                 </div>
               </AnimatedCard>
@@ -291,7 +225,7 @@ export default function DeliveryPartnersPage() {
                     <MaterialIcon icon={req.icon} size={22} />
                   </div>
                   <div>
-                    <h4 className="text-sm font-black text-[#16001D]">{req.title}</h4>
+                    <p className="text-sm font-black text-[#16001D]">{req.title}</p>
                     <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{req.desc}</p>
                   </div>
                 </AnimatedCard>

src/app/globals.css

@@ -723,7 +723,7 @@ body {
   backdrop-filter: blur(10px);
 }
 
-.experience-card h3 {
+.experience-card__title {
   color: white;
   font-size: clamp(24px, 2vw, 34px);
   line-height: 1.1;

src/app/merchants/page.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { MaterialIcon } from "@/components/ui/MaterialIcon";
 import { PremiumPageShell } from "@/components/layout/PremiumPageShell";
-import { HeroVisualCollage } from "@/components/layout/HeroVisualCollage";
+import { MerchantsHero } from "@/components/heroes/MerchantsHero";
-import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
 import { FAQAccordion } from "@/components/ui/FAQAccordion";
 import { AnimatedSection } from "@/components/motion/AnimatedSection";
 import { AnimatedGrid, AnimatedCard } from "@/components/motion/AnimatedGrid";
@@ -22,13 +21,6 @@ export const metadata: Metadata = {
   },
 };
 
-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 BENEFITS = [
   {
     icon: "menu_book",
@@ -164,67 +156,9 @@ const FAQ_ITEMS = [
 ];
 
 export default function MerchantsPage() {
-  const collageCards = [
-    { text: "Digital Catalogue", icon: "menu_book" },
-    { text: "Local Orders", icon: "receipt_long" },
-    { text: "Nearby Customers", icon: "people_nearby" },
-  ];
-
   return (
     <PremiumPageShell>
-      {/* ─── Hero Section ─── */}
+      <MerchantsHero />
-      <section className="w-full flex flex-col pt-6 md:pt-10 select-none bg-gradient-to-br from-white via-[#FEFCFF] to-[#F4ECFA]">
-        <div className="border-b border-[#6330D6]/10">
-          <div className="grid grid-cols-1 lg:grid-cols-[45%_55%] items-center gap-10 lg:gap-6 px-6 md:px-12 lg:px-16 pb-12 max-w-[1600px] mx-auto">
-            <div className="flex flex-col text-left max-w-xl">
-              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-black tracking-widest bg-[#6330D6]/10 text-[#6330D6] uppercase mb-6 w-fit">
-                Merchant Partners
-              </span>
-
-              <h1 className="font-display text-4xl sm:text-5xl lg:text-[48px] xl:text-[54px] font-black text-[#16001D] leading-[1.1] tracking-tight">
-                Bring Your Store Online
-                <br />
-                <span className="text-[#6330D6]">with Nearle.</span>
-              </h1>
-
-              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-                Your neighbourhood customers are already looking for you online. Get discovered, take orders, and grow your business, without leaving your store.
-              </p>
-
-              <div className="hidden md:flex md:flex-row md:gap-3.5 mt-8">
-                <Link
-                  href="/contact"
-                  className="bg-[#6330D6] hover:bg-[#5225b8] text-white font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center shadow-md hover:shadow-lg transition-all duration-200 active:scale-[0.98]"
-                >
-                  Become a Merchant Partner
-                </Link>
-                <a
-                  href="#how-it-works"
-                  className="border-2 border-[#6330D6]/20 hover:border-[#6330D6]/40 text-[#6330D6] font-black px-8 py-3.5 rounded-xl text-sm md:text-base text-center transition-all duration-200 hover:bg-[#6330D6]/5 active:scale-[0.98]"
-                >
-                  See How It Works
-                </a>
-              </div>
-            </div>
-
-            <div className="w-full">
-              <HeroVisualCollage
-                centerImage="/nearlenewlogo.png"
-                leftImage="/images/nearle-merchant/catalogue-ui.webp"
-                rightImage="/nearle-business.webp"
-                glassCards={collageCards}
-                isPhoneCenter={false}
-              />
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-[#FAF7FD] border-b border-[#6330D6]/10">
-          <div className="px-6 md:px-12 lg:px-16 max-w-[1600px] mx-auto">
-            <FeatureStatsRow items={HERO_STATS} />
-          </div>
-        </div>
-      </section>
 
       {/* ─── Merchant Benefits Grid ─── */}
       <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">
@@ -253,7 +187,7 @@ export default function MerchantsPage() {
                   <MaterialIcon icon={benefit.icon} size={22} />
                 </div>
                 <div>
-                  <h3 className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</h3>
+                  <p className="text-base font-black text-[#16001D] leading-tight">{benefit.title}</p>
                   <p className="mt-1.5 text-xs md:text-sm text-[#5E5866] leading-relaxed">{benefit.desc}</p>
                 </div>
               </AnimatedCard>
@@ -291,9 +225,9 @@ export default function MerchantsPage() {
                 <div className={`w-12 h-12 rounded-2xl flex items-center justify-center ${step.color} mb-5`}>
                   <MaterialIcon icon={step.icon} size={24} />
                 </div>
-                <h3 className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
+                <p className="font-display text-xl font-black text-[#16001D] leading-tight mb-2">
                   {step.title}
-                </h3>
+                </p>
                 <p className="text-sm text-[#5E5866] leading-relaxed">{step.desc}</p>
               </AnimatedCard>
             ))}
@@ -342,7 +276,7 @@ export default function MerchantsPage() {
                     <MaterialIcon icon={reason.icon} size={20} />
                   </div>
                   <div>
-                    <h4 className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</h4>
+                    <p className="text-sm font-black text-[#16001D] leading-tight">{reason.title}</p>
                     <p className="mt-1 text-xs text-[#5E5866] leading-relaxed">{reason.desc}</p>
                   </div>
                 </AnimatedCard>

src/app/people/page.tsx

@@ -181,7 +181,7 @@ export default function PeoplePage() {
                 <div className="experience-card__icon">
                   <MaterialIcon icon={offering.icon} size={22} className="text-white" />
                 </div>
-                <h3>{offering.title}</h3>
+                <p className="experience-card__title">{offering.title}</p>
                 <p>{offering.descr}</p>
               </div>
             </article>
@@ -215,7 +215,7 @@ export default function PeoplePage() {
               <div className="w-10 h-10 rounded-full bg-[#6330D6]/5 text-[#6330D6] flex items-center justify-center mb-4">
                 <MaterialIcon icon={s.icon} size={20} />
               </div>
-              <h4 className="text-3xl font-display font-black text-[#16001D]">{s.count}</h4>
+              <p className="text-3xl font-display font-black text-[#16001D]">{s.count}</p>
               <p className="text-[10px] font-bold text-[#5E5866] mt-1.5 uppercase tracking-wider">
                 {s.label}
               </p>
@@ -293,7 +293,7 @@ export default function PeoplePage() {
                   <MaterialIcon icon={b.icon} size={20} />
                 </div>
                 <div className="text-left relative z-10">
-                  <h4 className="text-base font-black text-white leading-none">{b.title}</h4>
+                  <p className="text-base font-black text-white leading-none">{b.title}</p>
                   <p className="text-[9px] text-white/50 font-bold tracking-wider uppercase mt-1 mb-1">{b.microcopy}</p>
                   <p className="text-xs text-white/85 leading-relaxed">{b.text}</p>
                 </div>
@@ -458,7 +458,7 @@ export default function PeoplePage() {
                   <MaterialIcon icon={b.icon} size={16} />
                 </div>
                 <div>
-                  <h4 className="text-sm font-black text-white leading-tight">{b.title}</h4>
+                  <p className="text-sm font-black text-white leading-tight">{b.title}</p>
                   <p className="text-xs text-white/70 leading-relaxed mt-0.5">{b.text}</p>
                 </div>
               </div>

src/app/privacy/page.tsx

@@ -82,7 +82,7 @@ export default function PrivacyPolicyPage() {
                   <MaterialIcon icon={point.icon} size={20} />
                 </div>
                 <div>
-                  <h4 className="text-sm font-black text-[#16001D]">{point.title}</h4>
+                  <p className="text-sm font-black text-[#16001D]">{point.title}</p>
                   <p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{point.desc}</p>
                 </div>
               </div>
@@ -246,7 +246,7 @@ export default function PrivacyPolicyPage() {
               <PolicySection id="contact" title="Contact and Grievance Officer">
                 <p>If you have any questions, concerns, or complaints about this Privacy Policy or how Nearle handles your data, please contact:</p>
                 <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
-                  <h4 className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</h4>
+                  <p className="text-base font-black text-[#16001D] mb-3">Nearle Privacy Team</p>
                   <div className="space-y-2 text-sm text-[#5E5866]">
                     <div className="flex gap-2">
                       <MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />

src/app/terms/page.tsx

@@ -84,7 +84,7 @@ export default function TermsOfServicePage() {
                   <MaterialIcon icon={card.icon} size={20} />
                 </div>
                 <div>
-                  <h4 className="text-sm font-black text-[#16001D]">{card.title}</h4>
+                  <p className="text-sm font-black text-[#16001D]">{card.title}</p>
                   <p className="text-xs text-[#5E5866] mt-1 leading-relaxed">{card.desc}</p>
                 </div>
               </div>
@@ -254,7 +254,7 @@ export default function TermsOfServicePage() {
               <TermsSection id="contact" title="10. Contact and Disputes">
                 <p>For questions about these Terms of Service or to raise a dispute, contact:</p>
                 <div className="mt-5 p-6 rounded-2xl bg-[#FAF7FD] border border-[#6330D6]/10">
-                  <h4 className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</h4>
+                  <p className="text-base font-black text-[#16001D] mb-3">Nearle Legal Team</p>
                   <div className="space-y-2 text-sm text-[#5E5866]">
                     <div className="flex gap-2">
                       <MaterialIcon icon="mail" size={16} className="text-[#6330D6] shrink-0 mt-0.5" />

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>