update d2c brands

src/components/heroes/BrandsHero.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Image from "next/image";
+import { motion, useReducedMotion } from "framer-motion";
+import { HeroLogo } from "@/components/heroes/HeroLogo";
+
+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 → trust
+const badgeVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: 0.9, ease: EASE } },
+};
+
+const headingVariant = {
+  hidden: { opacity: 0, y: 24 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.6, delay: 1.0, ease: EASE } },
+};
+
+const descVariant = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.55, delay: 1.1, ease: EASE } },
+};
+
+
+
+export function BrandsHero() {
+  const shouldReduce = useReducedMotion();
+
+  return (
+    <section className="w-full flex flex-col select-none bg-white">
+      <div className="relative overflow-hidden border-b border-[#6330D6]/10 bg-[#FAF8FC]">
+        {/* Background: modern Indian shopping street — boutique storefronts, real photography */}
+        <motion.div
+          className="absolute inset-0 z-0"
+          initial={shouldReduce ? undefined : { scale: 1.08 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 3, ease: "easeOut" }}
+        >
+          <Image
+            src="/Gemini_Generated_Image_lxh416lxh416lxh4.png"
+            alt=""
+            fill
+            sizes="100vw"
+            className="absolute inset-0 h-full w-full object-cover object-[70%_center] md:object-[66%_center] xl:object-[60%_center]"
+            priority
+            fetchPriority="high"
+            aria-hidden="true"
+            unoptimized={true}
+          />
+        </motion.div>
+
+        {/* Overlay: dark behind the text on the left, fading out so the storefront stays vivid on the right */}
+        <div className="absolute inset-0 z-[1] bg-black/45 md:bg-[linear-gradient(90deg,rgba(9,4,19,0.82)_0%,rgba(9,4,19,0.62)_30%,rgba(9,4,19,0.28)_52%,rgba(9,4,19,0.04)_68%,rgba(9,4,19,0)_82%)]" />
+
+        <div className="page-container 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:py-20 lg:py-24">
+          <div className="relative z-20 flex w-full max-w-[860px] flex-col items-center text-center px-6 py-10 md:px-14 md:py-12">
+            <HeroLogo />
+
+            <motion.span
+              variants={badgeVariant}
+              initial="hidden"
+              animate="visible"
+              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"
+            >
+              Nearle for D2C Brands
+            </motion.span>
+
+            <motion.h1
+              variants={headingVariant}
+              initial="hidden"
+              animate="visible"
+              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)]"
+            >
+              Grow Your <span className="text-[#A855F7]">Brand,</span>
+              <br />
+              Right Around
+              <br />
+              Your <span className="text-[#A855F7]">Customers.</span>
+            </motion.h1>
+
+            <motion.p
+              variants={descVariant}
+              initial="hidden"
+              animate="visible"
+              className="max-w-[520px] text-lg md:text-xl text-white/95 font-medium mt-6 leading-[1.6] [text-shadow:0_2px_16px_rgba(0,0,0,0.6)]"
+            >
+              Help your D2C brand reach nearby customers, increase repeat purchases, and build a loyal local community—all from one powerful platform.
+            </motion.p>
+
+
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}