feat: add BirthdayBanner with confetti animation

src/components/BirthdayBanner.jsx

@@ -0,0 +1,65 @@
+import { useEffect } from 'react'
+import confetti from 'canvas-confetti'
+
+export default function BirthdayBanner({ name = "Linh" }) {
+  useEffect(() => {
+    // Fire confetti on load
+    const duration = 3 * 1000
+    const animationEnd = Date.now() + duration
+    const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
+
+    function randomInRange(min, max) {
+      return Math.random() * (max - min) + min
+    }
+
+    const interval = setInterval(function() {
+      const timeLeft = animationEnd - Date.now()
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval)
+      }
+
+      const particleCount = 50 * (timeLeft / duration)
+      confetti({
+        ...defaults,
+        particleCount,
+        origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
+      })
+      confetti({
+        ...defaults,
+        particleCount,
+        origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
+      })
+    }, 250)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  const handleClick = () => {
+    confetti({
+      particleCount: 100,
+      spread: 70,
+      origin: { y: 0.6 }
+    })
+  }
+
+  return (
+    <header
+      className="relative bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white py-16 md:py-24 cursor-pointer overflow-hidden"
+      onClick={handleClick}
+    >
+      <div className="absolute inset-0 bg-black/10"></div>
+      <div className="relative z-10 max-w-4xl mx-auto text-center px-4">
+        <h1 className="text-4xl md:text-6xl font-bold mb-4 animate-bounce">
+          🎂 Happy Birthday {name}! 🎉
+        </h1>
+        <p className="text-xl md:text-2xl font-medium opacity-90">
+          Chúc mừng sinh nhật! Click để ăn confetti! ✨
+        </p>
+        <p className="mt-4 text-lg opacity-75">
+          (Click anywhere for more confetti 🎊)
+        </p>
+      </div>
+    </header>
+  )
+}