update d2c brands

src/app/brands/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 { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
+import { BrandsHero } from "@/components/heroes/BrandsHero";
 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: "Distribution Network", icon: "hub", desc: "Neighbourhood stores across city" },
-  { title: "Retail Visibility", icon: "visibility", desc: "Premium shelf positioning" },
-  { title: "Brand Campaigns", icon: "campaign", desc: "Hyperlocal promotions" },
-  { title: "Real-Time Analytics", icon: "analytics", desc: "Sales & reach data" },
-];
-
 const WHAT_WE_OFFER = [
   {
     icon: "hub",
@@ -153,67 +145,10 @@ const FAQ_ITEMS = [
 ];
 
 export default function BrandsPage() {
-  const collageCards = [
-    { text: "Local Distribution", icon: "hub" },
-    { text: "Brand Campaigns", icon: "campaign" },
-    { text: "Retail Analytics", icon: "analytics" },
-  ];
-
   return (
     <PremiumPageShell>
       {/* ─── Hero Section ─── */}
-      <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">
-                Brand Partnerships
-              </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">
-                Expand Your Brand Across
-                <br />
-                <span className="text-[#6330D6]">Local Communities.</span>
-              </h1>
-
-              <p className="text-sm md:text-base text-[#5E5866] font-bold mt-6 leading-relaxed">
-                Nearle connects FMCG brands, food companies, and local manufacturers with verified neighbourhood stores and their loyal customer communities.
-              </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]"
-                >
-                  Talk to Sales
-                </Link>
-                <a
-                  href="#partnership"
-                  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 Partnership Process
-                </a>
-              </div>
-            </div>
-
-            <div className="w-full">
-              <HeroVisualCollage
-                centerImage="/nearlenewlogo.png"
-                leftImage="/images/cat-daily-essentials.webp"
-                rightImage="/images/nearle-merchant/local-map.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>
+      <BrandsHero />
 
       {/* ─── What We Offer ─── */}
       <section className="py-10 md:py-14 xl:py-12 bg-white border-b border-[#6330D6]/10">