diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
new file mode 100644
index 0000000..8b40232
--- /dev/null
+++ b/src/components/Hero/Hero.jsx
@@ -0,0 +1,159 @@
+import { useEffect, useRef } from 'react'
+import { motion } from 'framer-motion'
+import { gsap } from 'gsap'
+import AudioVisualizer3D from './AudioVisualizer3D'
+import HeroParticles from './HeroParticles'
+
+const fadeUp = (delay = 0) => ({
+ initial: { opacity: 0, y: 32 },
+ animate: { opacity: 1, y: 0 },
+ transition: { duration: 0.85, ease: [0.22, 1, 0.36, 1], delay },
+})
+
+export default function Hero({ isPlaying, onTogglePlay }) {
+ const headingRef = useRef()
+
+ useEffect(() => {
+ const ctx = gsap.context(() => {
+ gsap.from('.hero-line', {
+ y: 80,
+ opacity: 0,
+ duration: 1,
+ stagger: 0.14,
+ ease: 'power4.out',
+ delay: 0.2,
+ })
+ })
+ return () => ctx.revert()
+ }, [])
+
+ return (
+
+
+ {/* Particle bg */}
+
+
+
+
+ {/* Ambient blobs */}
+
+
+
+
+ {/* 3D Visualizer */}
+
+
+ {/* Main content */}
+
+
+ {/* Badge */}
+
+
+ Now Streaming
+ ·
+ 40M tracks
+
+
+ {/* Headline */}
+
+
+ Feel The
+
+
+ Music
+
+
+ In Three Dimensions
+
+
+
+ {/* Subtitle */}
+
+ Where sound becomes sculpture. Every frequency, every beat — visualized in real time across a living 3D canvas.
+
+
+ {/* CTAs */}
+
+
+ {isPlaying
+ ? <> Pause
+ : <> Start Listening
+ }
+
+
+
+ Explore Collection
+
+
+
+
+ {/* Stats row */}
+
+ {[['40M+', 'Tracks'], ['2.1M', 'Artists'], ['180+', 'Countries'], ['99.9%', 'Uptime']].map(([num, label]) => (
+
+ ))}
+
+