From dd8207e6184ff72689724705fb472581daf89713 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Fri, 19 Jun 2026 04:46:49 +0000
Subject: [PATCH] Bob AI: Added full-screen hero section with mic drop
 animation

---
 src/pages/HomePage/sections/Hero.tsx | 141 +++++++++++++++++----------
 1 file changed, 91 insertions(+), 50 deletions(-)

diff --git a/src/pages/HomePage/sections/Hero.tsx b/src/pages/HomePage/sections/Hero.tsx
index 1f86b25..2357b0f 100644
--- a/src/pages/HomePage/sections/Hero.tsx
+++ b/src/pages/HomePage/sections/Hero.tsx
@@ -5,6 +5,9 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AvatarGroup from "@/components/ui/AvatarGroup";
+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
+import { Mic } from "lucide-react";
 
 const avatarsSrc = [
   "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",
@@ -41,61 +44,99 @@ type HeroCenteredLogosProps = {
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const HeroInline = () => {
+  const [stage, setStage] = useState<'dropping' | 'hit' | 'revealed'>('dropping');
+
+  useEffect(() => {
+    const hitTimer = setTimeout(() => setStage('hit'), 800);
+    const revealTimer = setTimeout(() => setStage('revealed'), 1100);
+    return () => {
+      clearTimeout(hitTimer);
+      clearTimeout(revealTimer);
+    };
+  }, []);
+
   return (
-    <section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
+    <motion.section
+      aria-label="Hero section"
+      className="relative h-svh w-full flex flex-col items-center justify-center overflow-hidden bg-[#060000] mb-20"
+      animate={
+        stage === 'hit'
+          ? { x: [-15, 15, -10, 10, -5, 5, 0], y: [-15, 15, -10, 10, -5, 5, 0] }
+          : { x: 0, y: 0 }
+      }
+      transition={{ duration: 0.5 }}
+    >
       <HeroBackgroundSlot />
-      {!undefined && (
-        <div className="absolute inset-0 z-0">
-          <ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg"} className="size-full object-cover" />
-          <div className="absolute inset-0 bg-background/80" />
-        </div>
-      )}
-
-      <div className="relative z-10 flex-1 flex items-center justify-center">
-        <div className="flex flex-col items-center gap-3 pt-8 w-content-width mx-auto text-center">
-          <AvatarGroup avatarsSrc={avatarsSrc} label={"Join our community of visionaries"} size="lg" />
-
-          <TextAnimation
-            text={"YungHondo"}
-            variant="slide-up"
-            gradientText={true}
-            tag="h1"
-            className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance font-serif"
-          />
-
-          <TextAnimation
-            text={"Built Different."}
-            variant="slide-up"
-            gradientText={false}
-            tag="h2"
-            className="text-3xl md:text-5xl font-bold text-[#721c24] mt-2 tracking-tight uppercase"
-          />
-
-          <TextAnimation
-            text={"Representing those who left home to build a future."}
-            variant="slide-up"
-            gradientText={false}
-            tag="p"
-            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
-          />
-
-          <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
-            <Button text={"Listen Now"} href={"https://spotify.com"} variant="primary" />
-            <Button text={"Watch Now"} href={"https://youtube.com"} variant="secondary" animationDelay={0.1} />
-          </div>
-        </div>
+      {/* Background Effects */}
+      <div className="absolute inset-0 z-0 pointer-events-none">
+        <div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[1000px] h-[1000px] bg-[radial-gradient(circle_at_center,_rgba(255,61,74,0.15),_transparent_60%)]" />
+        <div className="absolute bottom-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[radial-gradient(circle_at_center,_rgba(123,45,45,0.2),_transparent_60%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_30%,_#060000_100%)]" />
       </div>
 
-      <div className="relative z-10 w-content-width mx-auto pb-8 overflow-hidden mask-fade-x">
-        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
-          {[...names, ...names, ...names, ...names].map((name, index) => (
-            <div key={index} className="shrink-0 mx-3 px-4 py-2 card rounded">
-              <span className="text-xl font-semibold whitespace-nowrap text-foreground/75">{name}</span>
-            </div>
-          ))}
-        </div>
+      {/* Mic Drop Container */}
+      <div className="absolute top-[35%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
+        <motion.div
+          initial={{ y: '-100vh', rotate: -45 }}
+          animate={
+            stage === 'dropping'
+              ? { y: '-100vh', rotate: -45 }
+              : { y: 0, rotate: 0 }
+          }
+          transition={{ type: 'spring', bounce: 0.6, duration: 0.8 }}
+        >
+          <Mic className="w-20 h-20 md:w-24 md:h-24 text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.5)]" />
+        </motion.div>
+
+        {/* Sound Waves */}
+        {stage !== 'dropping' && (
+          <>
+            <motion.div
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[6px] border-[#ff3d4a]"
+              initial={{ width: 80, height: 80, opacity: 0.8 }}
+              animate={{ width: 2500, height: 2500, opacity: 0 }}
+              transition={{ duration: 1.2, ease: 'easeOut' }}
+            />
+            <motion.div
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[4px] border-[#7b2d2d]"
+              initial={{ width: 80, height: 80, opacity: 0.6 }}
+              animate={{ width: 2000, height: 2000, opacity: 0 }}
+              transition={{ duration: 1.2, delay: 0.15, ease: 'easeOut' }}
+            />
+            <motion.div
+              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[2px] border-white"
+              initial={{ width: 80, height: 80, opacity: 0.4 }}
+              animate={{ width: 1500, height: 1500, opacity: 0 }}
+              transition={{ duration: 1.2, delay: 0.3, ease: 'easeOut' }}
+            />
+          </>
+        )}
       </div>
-    </section>
+
+      {/* Content Reveal */}
+      <motion.div
+        className="relative z-30 flex flex-col items-center mt-40 text-center w-content-width mx-auto"
+        initial={{ opacity: 0, scale: 0.8, y: 40 }}
+        animate={
+          stage === 'revealed'
+            ? { opacity: 1, scale: 1, y: 0 }
+            : { opacity: 0, scale: 0.8, y: 40 }
+        }
+        transition={{ duration: 0.7, ease: 'easeOut' }}
+      >
+        <h1 className="text-6xl sm:text-8xl md:text-[10rem] leading-none font-black text-white uppercase tracking-tighter drop-shadow-[0_0_50px_rgba(255,61,74,0.5)]">
+          YungHondo
+        </h1>
+        <p className="mt-6 text-lg sm:text-2xl md:text-3xl text-white/90 font-bold uppercase tracking-[0.3em] drop-shadow-lg">
+          Built Different.
+        </p>
+
+        <div className="flex flex-wrap justify-center gap-4 mt-12">
+          <Button text="Listen Now" href="#listen" variant="primary" />
+          <Button text="Watch Videos" href="#watch" variant="secondary" />
+        </div>
+      </motion.div>
+    </motion.section>
   );
 };
 
-- 
2.49.1