make the box 20% more transparent for the title: GOALS FOR 2025 SBC I SUMMIT - Follow Up Deployment

index.html

@@ -26,6 +26,27 @@
     </script>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <style type="text/tailwindcss">
+        /* Confetti styles */
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #00f5ff;
+            opacity: 0;
+            animation: confetti-fall 3s ease-in-out forwards;
+        }
+        
+        @keyframes confetti-fall {
+            0% {
+                transform: translateY(-100px) rotate(0deg);
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(100px) rotate(360deg);
+                opacity: 0;
+            }
+        }
+
         @layer base {
             body {
                 @apply bg-gray-900 text-white font-sans;
@@ -259,6 +280,12 @@
                     </p>
                 </div>
                 
+                <div class="speaker-card group relative max-w-md mx-auto mb-4">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/24 to-fuchsia-900/24 rounded-2xl shadow-2xl"></div>
+                    <div class="relative bg-gray-900/60 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 text-center">
+                        <h3 class="text-xl md:text-2xl font-bold gradient-text confetti-trigger drop-shadow-lg">GOALS FOR 2025 SBC I SUMMIT</h3>
+                    </div>
+                </div>
                 <div class="bg-gradient-to-r from-purple-start to-fuchsia-end p-1 rounded-xl mb-8 mx-auto max-w-xl">
                     <div class="bg-gray-900 rounded-xl px-6 py-4">
                         <div class="grid grid-cols-3 gap-2">
@@ -1130,6 +1157,35 @@
         // Initialize with scroll
         window.dispatchEvent(new Event('scroll'));
 
+        // Confetti creation on hover
+        const confettiTriggers = document.querySelectorAll('.confetti-trigger');
+        
+        confettiTriggers.forEach(trigger => {
+            trigger.addEventListener('mouseenter', (e) => {
+            const colors = ['#00f5ff', '#b300ff', '#ff00b3', '#ffffff'];
+            const rect = e.target.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            
+            // Create 30 confetti pieces
+            for (let i = 0; i < 30; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.left = `${centerX - 5 + Math.random() * 100 - 50}px`;
+                confetti.style.top = `${rect.top - 10}px`;
+                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                confetti.style.animationDuration = `${1 + Math.random() * 2}s`;
+                confetti.style.width = `${5 + Math.random() * 10}px`;
+                confetti.style.height = `${5 + Math.random() * 10}px`;
+                
+                document.body.appendChild(confetti);
+                
+                // Remove confetti after animation
+                setTimeout(() => {
+                    confetti.remove();
+                }, 3000);
+            }
+        });
+
         // Video Modal Handling
         const videoModal = document.getElementById('videoModal');
         const watchTrailerBtn = document.getElementById('watchTrailer');
@@ -1157,5 +1213,5 @@
             }
         });
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=web3district/sbcxweb3dstrict" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=web3district/sbcxweb3dstrict" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=web3district/sbcxweb3dstrict" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>