update d2c brands

src/components/heroes/PeopleHero.tsx

@@ -3,12 +3,8 @@
 import Image from "next/image";
 import { motion } from "framer-motion";
 import { FeatureStatsRow } from "@/components/ui/FeatureStatsRow";
-import {
-  scaleInSpring,
-  fadeUpStrong,
-  fadeUp,
-  staggerFast,
-} from "@/lib/animations";
+import { HeroLogo } from "@/components/heroes/HeroLogo";
+import { staggerFast } from "@/lib/animations";
 
 const HERO_STATS = [
   { title: "Verified Local Stores", icon: "store", desc: "Growing local commerce" },
@@ -17,9 +13,21 @@ const HERO_STATS = [
   { title: "Trusted Platform", icon: "star", desc: "Loved by local shoppers" },
 ];
 
-const badgeVariant = scaleInSpring;
-const titleVariant = fadeUpStrong;
-const descVariant = fadeUp;
+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
+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 } },
+};
 
 export function PeopleHero() {
   return (
@@ -45,6 +53,8 @@ export function PeopleHero() {
             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"