can you make the video play in a dialog box inside the website instead of opening google drive? - Follow Up Deployment

index.html

@@ -55,37 +55,42 @@
                 transform-style: preserve-3d;
             }
             .speaker-card .relative {
-                transition: transform 0.5s ease, box-shadow 0.5s ease;
+                transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
                 transform-style: preserve-3d;
+                transform: translateZ(0);
             }
             .speaker-card:hover .relative {
                 transform: 
                     perspective(1000px) 
-                    rotateY(7.5deg) 
+                    rotateY(10deg) 
                     rotateX(5deg) 
-                    translateY(-7px)
-                    translateZ(25px);
-                box-shadow: 0 30px 50px rgba(179, 0, 255, 0.4);
-                z-index: 10;
+                    translateY(-10px)
+                    translateZ(50px);
+                box-shadow: 0 35px 60px rgba(179, 0, 255, 0.5);
+                z-index: 20;
             }
             .speaker-card:hover::before {
                 content: '';
                 position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
+                top: -10px;
+                left: -10px;
+                right: -10px;
+                bottom: -10px;
                 background: linear-gradient(45deg, 
-                    rgba(0,245,255,0.1) 0%, 
-                    rgba(179,0,255,0.1) 50%, 
-                    rgba(255,0,179,0.2) 100%);
+                    rgba(0,245,255,0.2) 0%, 
+                    rgba(179,0,255,0.2) 50%, 
+                    rgba(255,0,179,0.3) 100%);
                 z-index: -1;
-                filter: blur(30px);
-                animation: hologram 2s infinite alternate;
-                transform: translateZ(-20px);
-                border-radius: 1rem;
+                filter: blur(40px);
+                animation: hologram 1.5s infinite alternate;
+                transform: translateZ(-30px);
+                border-radius: 1.5rem;
                 overflow: hidden;
             }
+            .speaker-card:hover .absolute {
+                transform: rotate(3deg) scale(1.05);
+                box-shadow: 0 25px 50px rgba(179, 0, 255, 0.5);
+            }
             @keyframes hologram {
                 0% { opacity: 0.3; }
                 100% { opacity: 0.7; }
@@ -152,8 +157,8 @@
     <!-- Hero Section -->
     <section class="min-h-screen flex items-center relative">
         <!-- Parallax Background Layers -->
-        <div class="parallax-bg" style="background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover; transform: translateZ(-1px) scale(2); z-index: -2;"></div>
-        <div class="parallax-bg" style="background: linear-gradient(45deg, rgba(0,245,255,0.7), rgba(179,0,255,0.7), rgba(255,0,179,0.7)); transform: translateZ(-0.5px) scale(1.5); z-index: -1;"></div>
+        <div class="parallax-bg" style="background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') center/cover; transform: translate3d(0, 0, -1px) scale(2); z-index: -2;"></div>
+        <div class="parallax-bg" style="background: linear-gradient(45deg, rgba(0,245,255,0.7), rgba(179,0,255,0.7), rgba(255,0,179,0.7)); transform: translate3d(0, 0, -0.5px) scale(1.5); z-index: -1;"></div>
         <div class="parallax-bg" style="background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%); z-index: -1;"></div>
         
         <!-- Hero Content -->
@@ -186,7 +191,7 @@
                     <button class="bg-gradient-to-r from-purple-start to-fuchsia-end hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105">
                         Join the Quest
                     </button>
-                    <button class="bg-transparent border-2 border-purple-500 hover:border-purple-300 text-purple-300 hover:text-white font-bold py-3 px-8 rounded-full transition-colors">
+                    <button id="watchTrailer" class="bg-transparent border-2 border-purple-500 hover:border-purple-300 text-purple-300 hover:text-white font-bold py-3 px-8 rounded-full transition-colors">
                         <i class="ph ph-play-circle mr-2"></i> Watch Trailer
                     </button>
                 </div>
@@ -234,8 +239,8 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
                 <!-- Speaker 1 -->
                 <div class="speaker-card group relative h-full">
-                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl transform transition-all duration-300 group-hover:rotate-1 group-hover:scale-105 group-hover:shadow-[0_20px_50px_rgba(179,0,255,0.3)]"></div>
-                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center transform transition-all duration-300 group-hover:-translate-y-2">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl"></div>
+                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center">
                         <div class="w-[calc(100%+48px)] h-48 -mx-6 -mt-6 overflow-hidden rounded-t-2xl">
                             <img src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?q=80&w=2560&auto=format&fit=crop" alt="Gary Vee" class="w-full h-full object-cover object-center">
                         </div>
@@ -254,8 +259,8 @@
 
                 <!-- Speaker 2 -->
                 <div class="speaker-card group relative h-full">
-                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl transform transition-all duration-300 group-hover:rotate-1 group-hover:scale-105 group-hover:shadow-[0_20px_50px_rgba(179,0,255,0.3)]"></div>
-                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center transform transition-all duration-300 group-hover:-translate-y-2">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl"></div>
+                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center">
                         <div class="w-[calc(100%+48px)] h-48 -mx-6 -mt-6 overflow-hidden rounded-t-2xl">
                             <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=2560&auto=format&fit=crop" alt="Speaker" class="w-full h-full object-cover object-center">
                         </div>
@@ -274,8 +279,8 @@
 
                 <!-- Speaker 3 -->
                 <div class="speaker-card group relative h-full">
-                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl transform transition-all duration-300 group-hover:rotate-1 group-hover:scale-105 group-hover:shadow-[0_20px_50px_rgba(179,0,255,0.3)]"></div>
-                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center transform transition-all duration-300 group-hover:-translate-y-2">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl"></div>
+                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center">
                         <div class="w-[calc(100%+48px)] h-48 -mx-6 -mt-6 overflow-hidden rounded-t-2xl">
                             <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2560&auto=format&fit=crop" alt="Speaker" class="w-full h-full object-cover object-center">
                         </div>
@@ -294,8 +299,8 @@
 
                 <!-- Speaker 4 -->
                 <div class="speaker-card group relative h-full">
-                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl transform transition-all duration-300 group-hover:rotate-1 group-hover:scale-105 group-hover:shadow-[0_20px_50px_rgba(179,0,255,0.3)]"></div>
-                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center transform transition-all duration-300 group-hover:-translate-y-2">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-900/30 to-fuchsia-900/30 rounded-2xl shadow-2xl"></div>
+                    <div class="relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50 rounded-2xl p-6 h-full flex flex-col items-center text-center">
                         <div class="w-[calc(100%+48px)] h-48 -mx-6 -mt-6 overflow-hidden rounded-t-2xl">
                             <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2560&auto=format&fit=crop" alt="Speaker" class="w-full h-full object-cover object-center">
                         </div>
@@ -329,29 +334,64 @@
             <div class="max-w-4xl mx-auto relative">
                 <div class="relative">
                     <!-- May 2025 -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
                                 MAY 2025 — FOUNDATION PHASE
                             </div>
-                            <ul class="list-none pl-0 space-y-2 mt-8 text-purple-100">
-                                <li>✅ TON FEST Activation Completed</li>
-                                <li>✅ SBC brand seeded across Telegram & Lisbon Web3</li>
-                                <li>✅ Telegram Quest Bot & Strategy Blueprint completed</li>
-                                <li>✅ VIP HQ secured at Avenida da Liberdade</li>
-                                <li>✅ Initial Quest narrative, XP logic, and sponsor prize tiers structured</li>
-                            </ul>
+                            <h3 class="text-xl font-bold mb-3 text-white mt-8">Initial Activation</h3>
+                            <p class="text-purple-100 mb-4">Our TON FEST quest with the SBC brand crushed it—putting SBC in front of 29k+ verified users worldwide (exposed to 29k verified users), adding 700+ fresh members to the SBC Summit Telegram channel, and pumping SBC Gaming's X (Twitter) followership by 10%.</p>
+                            
                             <div class="flex flex-wrap gap-2 mt-4">
-                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Telegram</span>
-                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">VIP HQ</span>
-                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Narrative Design</span>
+                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Telegram 700+</span>
+                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Twitter +10%</span>
+                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Exposed to 29k Users</span>
+                            </div>
+
+                            <div class="bg-gray-900/50 p-4 rounded-xl shadow-sm mt-6 border border-purple-700/30">
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div class="bg-gray-800/50 p-2 rounded-lg">
+                                        <img src="https://drive.google.com/thumbnail?id=1PMmkbc5gGBGd_hSlV-EuGfJn6oAzdgl9&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
+                                    </div>
+                                    <div class="bg-gray-800/50 p-2 rounded-lg">
+                                        <img src="https://drive.google.com/thumbnail?id=1UtRHiou6MiI7Ty5GFPKrS1S0KG5wCap2&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
+                                    </div>
+                                    <div class="bg-gray-800/50 p-2 rounded-lg">
+                                        <img src="https://drive.google.com/thumbnail?id=1Dofmf0Xgh3NAXfKa44mMaN-dEc1qZnSa&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
+                                    </div>
+                                    <div class="bg-gray-800/50 p-2 rounded-lg">
+                                        <img src="https://drive.google.com/thumbnail?id=1bd2Gbb09zGjEMb5jmGRiTdfjwpSJKgNX&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- May 2025 - Second Box -->
+                    <div class="mb-16 relative flex">
+                        <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
+                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
+                            <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
+                                MAY 2025 — PORTUGAL ACTIVATION
+                            </div>
+                            <h3 class="text-xl font-bold mb-3 text-white mt-8">Web3/AI Portugal Activation</h3>
+                            <p class="text-purple-100 mb-4">The kickoff TON activation got an extra boost—our event post was shared across Portugal's top-tier Web3 Telegram groups, reaching 8 000+ highly engaged members.</p>
+                            
+                            <div class="flex flex-wrap gap-2 mt-4">
+                                <span class="bg-purple-800 text-purple-200 text-xs px-2 py-1 rounded">Exposed to 8K Web3/AI Portuguese</span>
+                            </div>
+
+                            <div class="bg-gray-900/50 p-4 rounded-xl shadow-sm mt-6 border border-purple-700/30 w-1/2">
+                                <div class="bg-gray-800/50 p-2 rounded-lg">
+                                    <img src="https://drive.google.com/thumbnail?id=1qoNoY_hNEqRgqwrYJgBeHpD4ha4UpZrL&sz=w1000" alt="Planning Strategy" class="rounded-lg w-full h-auto">
+                                </div>
                             </div>
                         </div>
                     </div>
                     
                     <!-- June 2025 -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -390,7 +430,7 @@
                     </div>
                     
                     <!-- July 2025 -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -424,7 +464,7 @@
                     </div>
                     
                     <!-- August 2025 -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -455,7 +495,7 @@
                     </div>
                     
                     <!-- September 1-15 -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -473,7 +513,7 @@
                     </div>
                     
                     <!-- SBC Summit -->
-                    <div class="mb-16 relative flex speaker-card">
+                    <div class="mb-16 relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50" data-aos="fade-up">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -502,7 +542,7 @@
                     </div>
                     
                     <!-- Post-Event -->
-                    <div class="relative flex speaker-card">
+                    <div class="relative flex">
                         <div class="hidden md:block absolute -left-4 top-4 w-8 h-8 rounded-full bg-gradient-to-r from-purple-start to-fuchsia-end flex items-center justify-center z-10"></div>
                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full relative bg-gray-900/80 backdrop-blur-sm border border-purple-700/50">
                             <div class="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full whitespace-nowrap">
@@ -577,6 +617,18 @@
         </div>
     </footer>
 
+    <!-- Video Modal -->
+    <div id="videoModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80 hidden">
+        <div class="relative w-full max-w-4xl mx-4">
+            <button id="closeModal" class="absolute -top-10 right-0 text-white hover:text-purple-300 text-2xl">
+                <i class="ph ph-x"></i>
+            </button>
+            <div class="aspect-w-16 aspect-h-9">
+                <iframe id="videoFrame" class="w-full h-96 md:h-[32rem] rounded-lg" src="https://drive.google.com/file/d/1nVi1lALKDSSFVNFlYUrw56b4iK2EwSd7/preview" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+    </div>
+
     <!-- Floating Quest Button -->
     <button class="fixed bottom-6 right-6 bg-gradient-to-r from-purple-start to-fuchsia-end text-white w-14 h-14 rounded-full shadow-2xl flex items-center justify-center hover:scale-110 transition-all z-50">
         <i class="ph ph-flag text-2xl"></i>
@@ -610,9 +662,17 @@
             const parallaxElements = document.querySelectorAll('.parallax-bg');
             
             parallaxElements.forEach(element => {
-                const depth = element.style.transform.includes('-1px') ? 0.5 : 0.2;
-                const offset = scrollY * depth;
-                element.style.transform = `translate3d(0, ${offset}px, 0)`;
+                let depth = 0;
+                if (element.style.transform.includes('-1px')) {
+                    depth = 0.5;
+                    element.style.transform = `translate3d(0, ${scrollY * depth}px, -1px) scale(2)`;
+                } else if (element.style.transform.includes('-0.5px')) {
+                    depth = 0.3;
+                    element.style.transform = `translate3d(0, ${scrollY * depth}px, -0.5px) scale(1.5)`;
+                } else {
+                    depth = 0.1;
+                    element.style.transform = `translate3d(0, ${scrollY * depth}px, 0)`;
+                }
             });
 
             // Fade in effect for sections
@@ -642,6 +702,33 @@
 
         // Initialize with scroll
         window.dispatchEvent(new Event('scroll'));
+
+        // Video Modal Handling
+        const videoModal = document.getElementById('videoModal');
+        const watchTrailerBtn = document.getElementById('watchTrailer');
+        const closeModalBtn = document.getElementById('closeModal');
+        const videoFrame = document.getElementById('videoFrame');
+
+        watchTrailerBtn.addEventListener('click', () => {
+            videoModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        });
+
+        closeModalBtn.addEventListener('click', () => {
+            videoModal.classList.add('hidden');
+            document.body.style.overflow = '';
+            // Reset video when closing
+            videoFrame.src = videoFrame.src;
+        });
+
+        // Close modal when clicking outside
+        videoModal.addEventListener('click', (e) => {
+            if (e.target === videoModal) {
+                videoModal.classList.add('hidden');
+                document.body.style.overflow = '';
+                videoFrame.src = videoFrame.src;
+            }
+        });
     </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>
 </html>

prompts.txt

@@ -43,4 +43,13 @@ please copy to all other boxes from the road map the effect you used in the  box
 please copy the same style CSS from May box to all others , fix the grey colour and pay attention in the last boxes theres still bullet points and a weird error on the effect
 please copy the same style CSS from May box to all others , fix the grey colour and pay attention in the last boxes theres still bullet points and a weird error on the effect
 theres some boxes with gray colour please fix, make those follow the look and feel of the May first box from road map section
-please remove the 2 black bullet points from the last 2 boxes from the roadmap
+please remove the 2 black bullet points from the last 2 boxes from the roadmap
+can you bring back the parallax effect in the header background?
+please remove the effect on mouse over and transfer the effect to the speakers card
+please remove the effect on mouse over from the boxes of engagement roadmap and transfer the effect to the speakers card
+please remove the 3d effect mouse over from all boxes form the Engagement Roadmap 
+now apply the 3D effect of perspective on mouse over on all Featured Speakers cards
+please adapt this infos and photos from another code on this code in the box of May: <div class="timeline-item pl-12 sm:pl-0" style="opacity: 1; transform: translateY(0px); transition: 0.6s;">                     <div class="bg-white p-6 rounded-xl shadow-lg">                         <div class="text-sm font-semibold text-accent mb-2">MAY</div>                         <h3 class="text-xl font-bold mb-3">Initial Activation</h3>                         <p>Our TON FEST quest with the SBC brand crushed it—putting SBC in front of 29k+ verified users worldwide (exposed to 29k verified users), adding 700+ fresh members to the SBC Summit Telegram channel, and pumping SBC Gaming's X (Twitter) followership by 10%.</p>                         <div class="mt-4 flex flex-wrap gap-2 mb-4">                             <span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">Telegram 700+</span>                             <span class="bg-secondary/10 text-secondary text-xs font-medium px-3 py-1 rounded-full">Twitter +10%</span>                             <span class="bg-accent/10 text-accent text-xs font-medium px-3 py-1 rounded-full">Exposed to 29k Verified Users</span>                         </div>                         <div class="bg-white p-4 rounded-xl shadow-sm">                             <div class="grid grid-cols-2 gap-4">                                 <div class="bg-gray-50 p-2 rounded-lg">                                     <img src="https://drive.google.com/thumbnail?id=1PMmkbc5gGBGd_hSlV-EuGfJn6oAzdgl9&amp;sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">                                 </div>                                 <div class="bg-gray-50 p-2 rounded-lg">                                     <img src="https://drive.google.com/thumbnail?id=1UtRHiou6MiI7Ty5GFPKrS1S0KG5wCap2&amp;sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">                                 </div>                                 <div class="bg-gray-50 p-2 rounded-lg">                                     <img src="https://drive.google.com/thumbnail?id=1Dofmf0Xgh3NAXfKa44mMaN-dEc1qZnSa&amp;sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">                                 </div>                                 <div class="bg-gray-50 p-2 rounded-lg">                                     <img src="https://drive.google.com/thumbnail?id=1bd2Gbb09zGjEMb5jmGRiTdfjwpSJKgNX&amp;sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">                                 </div>                             </div>                         </div>                     </div>                 </div>
+lets do the same with this one creating another box of may bellow the first one: <div class="bg-white p-6 rounded-xl shadow-lg">                         <div class="text-sm font-semibold text-accent mb-2">MAY</div>                         <h3 class="text-xl font-bold mb-3">Web3/Ai Portugal Activation</h3>                         <p>The kickoff TON activation got an extra boost—our event post was shared across Portugal's top-tier Web3 Telegram groups, reaching 8 000+ highly engaged members.</p>                         <div class="mt-4 flex flex-wrap gap-2">                             <span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">Exposed to 8K Web3/AI Portuguese</span>                         </div>                         <div class="bg-white p-4 rounded-xl shadow-sm mt-4 w-1/2">                             <div class="bg-gray-50 p-2 rounded-lg">                                 <img src="https://drive.google.com/thumbnail?id=1qoNoY_hNEqRgqwrYJgBeHpD4ha4UpZrL&amp;sz=w1000" alt="Planning Strategy" class="rounded-lg w-full h-auto">                             </div>                         </div>                     </div>
+when watch trailler is clcked, opens a video from the google drive link: https://drive.google.com/file/d/1nVi1lALKDSSFVNFlYUrw56b4iK2EwSd7/view?usp=sharing
+can you make the video play in a dialog box inside the website instead of opening google drive?