[V0_FILE]typescriptreact:file="app/components/BeatsSection.tsx" "use client" import { useState, useEffect } from "react" import { motion, useAnimation } from "framer-motion" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Play, Pause, ExternalLink } from "lucide-react" import { Skeleton } from "@/components/ui/skeleton" import { useInView } from "react-intersection-observer" interface Beat { id: string name: string price: string audio: string image: string beatstarsUrl: string } export default function BeatsSection() { const [beats, setBeats] = useState([]) const [loading, setLoading] = useState(true) const [playing, setPlaying] = useState(null) const controls = useAnimation() const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1, }) useEffect(() => { if (inView) { controls.start("visible") } }, [controls, inView]) useEffect(() => { fetchBeats() }, []) const fetchBeats = async () => { // Simulated API call setTimeout(() => { setBeats([ { id: "1", name: "Urban Groove", price: "$49.99", audio: "/placeholder.mp3", image: "/placeholder.svg?height=200&width=200", beatstarsUrl: "https://www.beatstars.com/beat/urban-groove", }, { id: "2", name: "Chill Vibes", price: "$39.99", audio: "/placeholder.mp3", image: "/placeholder.svg?height=200&width=200", beatstarsUrl: "https://www.beatstars.com/beat/chill-vibes", }, { id: "3", name: "Trap Fusion", price: "$59.99", audio: "/placeholder.mp3", image: "/placeholder.svg?height=200&width=200", beatstarsUrl: "https://www.beatstars.com/beat/trap-fusion", }, ]) setLoading(false) }, 1500) } const togglePlay = (id: string) => { setPlaying((current) => (current === id ? null : id)) } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, }, } return (

Featured Beats {loading ? Array(3) .fill(0) .map((_, index) => ( )) : beats.map((beat) => (

{beat.name}

{beat.price}

))}

) } [V0_FILE]typescriptreact:file="app/components/AboutSection.tsx" "use client" import { useRef } from "react" import Image from "next/image" import { motion, useScroll, useTransform } from "framer-motion" import { Headphones, Music, Mic2, Award } from "lucide-react" const achievements = [ { icon: , label: "Years of Experience", value: "10+" }, { icon: , label: "Tracks Produced", value: "500+" }, { icon: , label: "Artists Collaborated", value: "100+" }, { icon: , label: "Awards Won", value: "15+" }, ] export default function AboutSection() { const ref = useRef(null) const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"], }) const y = useTransform(scrollYProgress, [0, 1], [100, -100]) const opacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 1], [0, 1, 1, 0]) return (

About drannel

drannel is not just a beat maker; he's a sonic architect crafting the soundscapes of tomorrow. With a decade of experience and an ear for innovation, drannel pushes the boundaries of what's possible in music production.

From chart-topping hits to underground anthems, drannel's versatile style and meticulous attention to detail ensure that each beat is not just a track, but a journey waiting to be explored by the right artist.

{achievements.map((achievement, index) => (

{achievement.icon}

{achievement.value}

{achievement.label}

))}

) } [V0_FILE]typescriptreact:file="app/components/ContactSection.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, useAnimation } from "framer-motion" import { useInView } from "react-intersection-observer" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Loader2, Send, CheckCircle } from "lucide-react" export default function ContactSection() { const [formData, setFormData] = useState({ name: "", email: "", message: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const controls = useAnimation() const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1, }) useEffect(() => { if (inView) { controls.start("visible") } }, [controls, inView]) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prevState) => ({ ...prevState, [name]: value })) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulating an API call await new Promise((resolve) => setTimeout(resolve, 2000)) console.log("Form submitted:", formData) setIsSubmitting(false) setIsSubmitted(true) // Reset form after 3 seconds setTimeout(() => { setIsSubmitted(false) setFormData({ name: "", email: "", message: "" }) }, 3000) } const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const itemVariants = { hidden: { y: 20, opacity: 0 }, visible: { y: 0, opacity: 1, }, } return (

Get in Touch

</div>
            <Button
              type="submit"
              className="w-full bg-white text-black hover:bg-zinc-200 transition-colors relative overflow-hidden group"
              disabled={isSubmitting || isSubmitted}
            >
              <span className="relative z-10 flex items-center justify-center">
                {isSubmitting ? (
                  <>
                    <Loader2 className="animate-spin mr-2" size={18} />
                    Sending...
                  </>
                ) : isSubmitted ? (
                  <>
                    <CheckCircle className="mr-2" size={18} />
                    Sent!
                  </>
                ) : (
                  <>
                    <Send className="mr-2" size={18} />
                    Send Message
                  </>
                )}
              </span>
              <span className="absolute inset-0 bg-gradient-to-r from-zinc-200 to-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left" />
            </Button>
          </form>
        </motion.div>
      </motion.div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/components/Footer.tsx" isQuickEdit="true"
import { Facebook, Twitter, Instagram } from "lucide-react"

export default function Footer() {
  return (
    <footer className="bg-black py-8 border-t border-white/10">
      <div className="container mx-auto px-4">
        <div className="flex flex-col md:flex-row justify-between items-center">
          <p className="text-zinc-400 mb-4 md:mb-0">© 2023 drannel. All rights reserved.</p>
          <div className="flex space-x-4">
            <a href="#" className="text-zinc-400 hover:text-white transition-colors">
              <Facebook />
            </a>
            <a href="#" className="text-zinc-400 hover:text-white transition-colors">
              <Twitter />
            </a>
            <a href="#" className="text-zinc-400 hover:text-white transition-colors">
              <Instagram />
            </a>
          </div>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true"
import "./globals.css"
import type { Metadata } from "next"
import { Space_Grotesk } from "next/font/google"
import type React from "react" // Import React

const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "drannel - Premium Beats",
  description: "Discover and purchase unique beats crafted by drannel",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${spaceGrotesk.className} bg-black text-white pb-20`}>{children}</body>
    </html>
  )
}

[V0_FILE]css:file="app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --card: 0 0% 0%;
  --card-foreground: 0 0% 100%;
  --popover: 0 0% 0%;
  --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 10%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 10%;
  --input: 0 0% 10%;
  --ring: 0 0% 100%;
}

body {
  background: black;
  min-height: 100vh;
  color: white;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.animate-glow {
  animation: glow 4s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 0px white;
  }
  to {
    box-shadow: 0 0 20px white;
  }
}

[V0_FILE]typescriptreact:file="app/components/InteractiveBackground.tsx"
"use client"

import type React from "react"
import { useEffect, useRef } from "react"

const InteractiveBackground: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

let animationFrameId: number
    let mouseX = 0
    let mouseY = 0

const particles: Particle[] = []
    const particleCount = 100

class Particle {
      x: number
      y: number
      size: number
      speedX: number
      speedY: number
      color: string

constructor() {
        this.x = Math.random() * canvas.width
        this.y = Math.random() * canvas.height
        this.size = Math.random() * 5 + 1
        this.speedX = Math.random() * 3 - 1.5
        this.speedY = Math.random() * 3 - 1.5
        this.color = `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 255, 0.7)`
      }

update() {
        this.x += this.speedX + (mouseX - canvas.width / 2) * 0.01
        this.y += this.speedY + (mouseY - canvas.height / 2) * 0.01

if (this.x < 0 || this.x > canvas.width) this.speedX *= -1
        if (this.y < 0 || this.y > canvas.height) this.speedY *= -1
      }

draw() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fill()
      }
    }

const init = () => {
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle())
      }
    }

const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      for (const particle of particles) {
        particle.update()
        particle.draw()
      }
      animationFrameId = requestAnimationFrame(animate)
    }

const handleResize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

const handleMouseMove = (event: MouseEvent) => {
      mouseX = event.clientX
      mouseY = event.clientY
    }

handleResize()
    init()
    animate()

window.addEventListener("resize", handleResize)
    window.addEventListener("mousemove", handleMouseMove)

return () => {
      window.removeEventListener("resize", handleResize)
      window.removeEventListener("mousemove", handleMouseMove)
      cancelAnimationFrame(animationFrameId)
    }
  }, [])

return <canvas ref={canvasRef} className="fixed inset-0 w-full h-full -z-10" />
}

export default InteractiveBackground

[V0_FILE]typescriptreact:file="app/components/LicenseOptionsSection.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import { motion, useAnimation, useInView } from "framer-motion"
import { Check, X, Crown, Zap, Star, Globe } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

const licenseOptions = [
  {
    name: "Standard License",
    price: "$2.99",
    icon: <Star className="w-6 h-6" />,
    features: [
      "Used for Music Recording",
      "Distribute up to 5,000 copies",
      "75,000 Online Audio Streams",
      "1 Music Video",
      "For Profit Live Performances",
      "Radio Broadcasting rights (2 Stations)",
    ],
    bulkDeal: "BUY 1 TRACK, GET 1 FREE!",
  },
  {
    name: "Advanced License",
    price: "$4.99",
    icon: <Zap className="w-6 h-6" />,
    features: [
      "Used for Music Recording",
      "Distribute up to 10,000 copies",
      "150,000 Online Audio Streams",
      "1 Music Video",
      "For Profit Live Performances",
      "Radio Broadcasting rights (UNLIMITED Stations)",
    ],
    popular: true,
  },
  {
    name: "Premium License",
    price: "$7.99",
    icon: <Crown className="w-6 h-6" />,
    features: [
      "Used for Music Recording",
      "Distribute up to 20,000 copies",
      "500,000 Online Audio Streams",
      "1 Music Video",
      "Non-profit Live Performances only",
    ],
    notIncluded: ["No Radio Broadcasting rights"],
  },
  {
    name: "Commercial License",
    price: "$8.99",
    icon: <Globe className="w-6 h-6" />,
    features: [
      "Used for Music Recording",
      "Distribute up to UNLIMITED copies",
      "UNLIMITED Online Audio Streams",
      "UNLIMITED Music Video",
      "For Profit Live Performances",
      "Radio Broadcasting rights (UNLIMITED Stations)",
    ],
  },
]

export default function LicenseOptionsSection() {
  const [hoveredCard, setHoveredCard] = useState<number | null>(null)
  const controls = useAnimation()
  const ref = useRef(null)
  const inView = useInView(ref, { once: true })

useEffect(() => {
    if (inView) {
      controls.start("visible")
    }
  }, [controls, inView])

return (
    <section ref={ref} id="license-options" className="py-20 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-black via-zinc-900/20 to-black"></div>

<div className="container mx-auto px-4 relative">
        <motion.div
          initial="hidden"
          animate={controls}
          variants={{
            hidden: { opacity: 0, y: 20 },
            visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
          }}
          className="text-center mb-16"
        >
          <h2 className="text-5xl md:text-6xl font-bold mb-6">Choose Your License</h2>
          <p className="text-xl text-zinc-400 max-w-2xl mx-auto">
            Select the perfect license for your needs and start creating amazing music today
          </p>
        </motion.div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {licenseOptions.map((option, index) => (
            <motion.div
              key={option.name}
              variants={{
                hidden: { opacity: 0, y: 20 },
                visible: { opacity: 1, y: 0, transition: { duration: 0.5, delay: index * 0.1 } },
              }}
              initial="hidden"
              animate={controls}
              onHoverStart={() => setHoveredCard(index)}
              onHoverEnd={() => setHoveredCard(null)}
            >
              <Card
                className={`relative h-full ${
                  hoveredCard === index ? "scale-105" : "scale-100"
                } transition-all duration-300`}
              >
                <div className="absolute inset-0 rounded-lg p-[1px] bg-gradient-to-br from-white/20 to-white/0">
                  <div className="absolute inset-0 rounded-lg bg-black"></div>
                </div>

{option.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span className="bg-white text-black px-4 py-1 rounded-full text-sm font-semibold animate-pulse">
                      Most Popular
                    </span>
                  </div>
                )}

<CardContent className="relative p-6 rounded-lg h-full flex flex-col">
                  <div className="text-center mb-6">
                    <div className="inline-flex p-3 rounded-full bg-zinc-900 border border-white/10 mb-4">
                      {option.icon}
                    </div>
                    <h3 className="text-xl font-bold mb-2">{option.name}</h3>
                    <div className="text-3xl font-bold">{option.price}</div>
                  </div>

<div className="flex-grow">
                    <ul className="space-y-3 mb-6">
                      {option.features.map((feature, i) => (
                        <motion.li
                          key={i}
                          className="flex items-start"
                          initial={{ opacity: 0, x: -20 }}
                          animate={hoveredCard === index ? { opacity: 1, x: 0 } : {}}
                          transition={{ duration: 0.3, delay: i * 0.05 }}
                        >
                          <Check className="h-5 w-5 text-white mr-2 shrink-0 mt-0.5" />
                          <span className="text-sm text-zinc-300">{feature}</span>
                        </motion.li>
                      ))}
                      {option.notIncluded?.map((feature, i) => (
                        <motion.li
                          key={i}
                          className="flex items-start text-zinc-500"
                          initial={{ opacity: 0, x: -20 }}
                          animate={hoveredCard === index ? { opacity: 1, x: 0 } : {}}
                          transition={{ duration: 0.3, delay: (option.features.length + i) * 0.05 }}
                        >
                          <X className="h-5 w-5 text-zinc-500 mr-2 shrink-0 mt-0.5" />
                          <span className="text-sm">{feature}</span>
                        </motion.li>
                      ))}
                    </ul>
                  </div>

{option.bulkDeal && (
                    <div className="mb-4">
                      <p className="text-sm font-semibold text-white bg-white/5 py-2 px-3 rounded-lg border border-white/10 animate-pulse">
                        {option.bulkDeal}
                      </p>
                    </div>
                  )}

<Button asChild className={`w-full bg-white text-black hover:bg-zinc-200 transition-colors`}>
                    <a href="https://drqnnel.beatstars.com" target="_blank" rel="noopener noreferrer">
                      Get Started
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/components/Header.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu } from "lucide-react"

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isMenuOpen, setIsMenuOpen] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0)
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <header className={`fixed w-full z-10 transition-all duration-300 ${isScrolled ? "bg-black" : "bg-transparent"}`}>
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        <Link href="/" className="text-3xl font-bold tracking-tighter">
          drannel
        </Link>
        <div className="md:hidden">
          <Button variant="ghost" size="icon" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            <Menu />
          </Button>
        </div>
        <nav
          className={`${isMenuOpen ? "block" : "hidden"} md:block absolute md:relative top-full left-0 w-full md:w-auto bg-black md:bg-transparent`}
        >
          <ul className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 p-4 md:p-0">
            <li>
              <Link href="#beats" className="hover:text-purple-400 transition-colors">
                Beats
              </Link>
            </li>
            <li>
              <Link href="#about" className="hover:text-purple-400 transition-colors">
                About
              </Link>
            </li>
            <li>
              <Link href="#contact" className="hover:text-purple-400 transition-colors">
                Contact
              </Link>
            </li>
          </ul>
        </nav>
        <Button asChild variant="outline" className="hidden md:block">
          <a href="https://drqnnel.beatstars.com" target="_blank" rel="noopener noreferrer">
            BeatStars
          </a>
        </Button>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/components/HeroSection.tsx" isQuickEdit="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { motion, useScroll, useTransform, useMotionValue, useSpring } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Play, Disc3, Music2, AudioWaveformIcon as Waveform } from "lucide-react"

const FloatingParticle = ({ delay }: { delay: number }) => {
  const y = useMotionValue(0)
  const ySpring = useSpring(y, { stiffness: 100, damping: 10 })

useEffect(() => {
    const moveParticle = () => {
      y.set(Math.random() * -100)
      setTimeout(moveParticle, Math.random() * 5000 + 3000)
    }
    setTimeout(moveParticle, delay)
  }, [y, delay])

return (
    <motion.div
      className="absolute w-1 h-1 bg-white rounded-full"
      style={{
        x: `${Math.random() * 100}%`,
        y: ySpring,
        opacity: 0.5,
      }}
    />
  )
}

export default function HeroSection() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"],
  })

const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])
  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0])

const [isHovered, setIsHovered] = useState(false)

const stats = [
    { icon: <Play className="w-6 h-6" />, label: "Beats Sold", value: "500+" },
    { icon: <Disc3 className="w-6 h-6" />, label: "Unique Tracks", value: "1000+" },
    { icon: <Music2 className="w-6 h-6" />, label: "Happy Artists", value: "200+" },
    { icon: <Waveform className="w-6 h-6" />, label: "Genres", value: "10+" },
  ]

return (
    <section ref={containerRef} className="min-h-screen relative overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-zinc-900/50 to-black"></div>
        {[...Array(50)].map((_, i) => (
          <FloatingParticle key={i} delay={i * 100} />
        ))}
      </div>

<motion.div style={{ y, opacity }} className="relative pt-32 pb-16 px-4">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-center mb-16"
          >
            <h1 className="text-7xl md:text-8xl font-bold mb-6 tracking-tight relative">
              <span className="bg-clip-text text-transparent bg-gradient-to-r from-white to-zinc-500">
                Elevate Your Sound
              </span>
              <motion.span
                className="absolute -inset-1 bg-white rounded-full blur-3xl"
                initial={{ opacity: 0 }}
                animate={{ opacity: [0, 0.1, 0] }}
                transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
              />
            </h1>
            <p className="text-xl md:text-2xl mb-8 text-zinc-400 max-w-3xl mx-auto">
              Crafting unique beats that help artists stand out. From trap to lo-fi, find your perfect sound and take
              your music to the next level.
            </p>
            <div className="relative inline-block">
              <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="relative z-10">
                <Button
                  size="lg"
                  className="bg-white text-black hover:bg-zinc-200 text-lg px-8 py-6 rounded-full transition-colors relative overflow-hidden group"
                  onMouseEnter={() => setIsHovered(true)}
                  onMouseLeave={() => setIsHovered(false)}
                  asChild
                >
                  <a href="https://drqnnel.beatstars.com" target="_blank" rel="noopener noreferrer">
                    <span className="relative z-10">Visit BeatStars</span>
                    <motion.span
                      className="absolute inset-0 bg-gradient-to-r from-zinc-200 to-white"
                      initial={{ x: "100%" }}
                      animate={{ x: isHovered ? "0%" : "100%" }}
                      transition={{ duration: 0.3 }}
                    />
                    <motion.span
                      animate={{ x: isHovered ? 5 : 0 }}
                      transition={{ duration: 0.2 }}
                      className="ml-2 relative z-10"
                    >
                      →
                    </motion.span>
                  </a>
                </Button>
              </motion.div>
            </div>
          </motion.div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
            {stats.map((stat, index) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 + index * 0.1 }}
                className="text-center"
              >
                <motion.div
                  whileHover={{ scale: 1.05 }}
                  className="bg-zinc-900/50 rounded-xl p-6 backdrop-blur-lg border border-white/10 transition-colors hover:border-white/20"
                >
                  <div className="mb-2 text-white/70 flex justify-center">{stat.icon}</div>
                  <motion.div
                    className="text-3xl font-bold mb-1"
                    initial={{ opacity: 0 }}
                    whileInView={{ opacity: 1 }}
                    viewport={{ once: true }}
                  >
                    {stat.value}
                  </motion.div>
                  <div className="text-sm text-zinc-400">{stat.label}</div>
                </motion.div>
              </motion.div>
            ))}
          </div>
        </div>
      </motion.div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="app/components/FloatingPlayer.tsx" isDeleted="true"
...deleted...

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"
import Header from "./components/Header"
import HeroSection from "./components/HeroSection"
import LicenseOptionsSection from "./components/LicenseOptionsSection"
import AboutSection from "./components/AboutSection"
import ContactSection from "./components/ContactSection"
import Footer from "./components/Footer"
import InteractiveBackground from "./components/InteractiveBackground"

export default function Home() {
  // const [beats, setBeats] = useState([])

// useEffect(() => {
  //   // In a real scenario, you'd fetch this data from the BeatStars API
  //   // For this example, we'll use mock data
  //   setBeats([
  //     { id: "1", name: "Urban Groove", audio: "/placeholder.mp3" },
  //     { id: "2", name: "Chill Vibes", audio: "/placeholder.mp3" },
  //     { id: "3", name: "Trap Fusion", audio: "/placeholder.mp3" },
  //   ])
  // }, [])

return (
    <div className="min-h-screen text-white relative">
      <InteractiveBackground />
      <div className="relative z-10">
        <Header />
        <main className="container mx-auto px-4">
          <HeroSection />
          <LicenseOptionsSection />
          <AboutSection />
          <ContactSection />
        </main>
        <Footer />
        {/* <FloatingPlayer beats={beats} /> */}
      </div>
    </div>
  )
}
</article></body></html>