theres some boxes with gray colour please fix, make those follow the look and feel of the May first box from road map section - Follow Up Deployment

index.html

@@ -61,19 +61,20 @@
             .speaker-card:hover .relative {
                 transform: 
                     perspective(1000px) 
-                    rotateY(10deg) 
+                    rotateY(7.5deg) 
                     rotateX(5deg) 
-                    translateY(-10px)
-                    translateZ(20px);
+                    translateY(-7px)
+                    translateZ(25px);
                 box-shadow: 0 30px 50px rgba(179, 0, 255, 0.4);
+                z-index: 10;
             }
             .speaker-card:hover::before {
                 content: '';
                 position: absolute;
-                top: -10%;
-                left: -10%;
-                right: -10%;
-                bottom: -10%;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
                 background: linear-gradient(45deg, 
                     rgba(0,245,255,0.1) 0%, 
                     rgba(179,0,255,0.1) 50%, 
@@ -82,6 +83,8 @@
                 filter: blur(30px);
                 animation: hologram 2s infinite alternate;
                 transform: translateZ(-20px);
+                border-radius: 1rem;
+                overflow: hidden;
             }
             @keyframes hologram {
                 0% { opacity: 0.3; }
@@ -97,6 +100,51 @@
             .text-3d {
                 text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
             }
+            .hover\:translate-z-50:hover {
+                transform: translateZ(50px);
+            }
+            .hover\:rotate-x-5:hover {
+                transform: rotateX(5deg);
+            }
+            .hover\:rotate-y-5:hover {
+                transform: rotateY(5deg);
+            }
+            .timeline-item {
+                perspective: 1000px;
+                transform-style: preserve-3d;
+            }
+            .timeline-item .relative {
+                transition: transform 0.5s ease, box-shadow 0.5s ease;
+                transform-style: preserve-3d;
+            }
+            .timeline-item:hover .relative {
+                transform: 
+                    perspective(1000px) 
+                    rotateY(7.5deg) 
+                    rotateX(5deg) 
+                    translateY(-7px)
+                    translateZ(25px);
+                box-shadow: 0 30px 50px rgba(179, 0, 255, 0.4);
+                z-index: 10;
+            }
+            .timeline-item:hover::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                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%);
+                z-index: -1;
+                filter: blur(30px);
+                animation: hologram 2s infinite alternate;
+                transform: translateZ(-20px);
+                border-radius: 1rem;
+                overflow: hidden;
+            }
         }
     </style>
 </head>
@@ -268,7 +316,7 @@
     </section>
 
     <!-- Roadmap Section -->
-    <section class="py-20 relative overflow-hidden bg-transparent">
+    <section class="py-20 relative overflow-hidden bg-white">
         <div class="container mx-auto px-4 relative z-10">
             <div class="text-center mb-16">
                 <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-900">
@@ -281,14 +329,13 @@
             <div class="max-w-4xl mx-auto relative">
                 <div class="relative">
                     <!-- May 2025 -->
-                    <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" data-aos="fade-up">
+                    <div class="mb-16 relative flex speaker-card">
+                        <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-disc pl-5 space-y-2 mt-8 text-purple-100">
+                            <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>
@@ -304,39 +351,37 @@
                     </div>
                     
                     <!-- June 2025 -->
-                    <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
-                        </div>
-                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full" data-aos="fade-up">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                    <div class="mb-16 relative flex speaker-card">
+                        <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">
                                 JUNE 2025 — LAUNCH PHASE
                             </div>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                                 <div>
                                     <h3 class="font-bold text-purple-300">🔥 PR & Media</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>🚀 Gary Vee Keynote Announcement</li>
                                         <li>Published across 15+ Top Web3/AI Media</li>
                                     </ul>
                                 </div>
                                 <div>
                                     <h3 class="font-bold text-purple-300">🎮 Quest Campaign</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>🛠️ Soft Launch of Quest Game</li>
                                         <li>🧭 Finalize phygital rollout plan</li>
                                     </ul>
                                 </div>
                                 <div>
                                     <h3 class="font-bold text-purple-300">📣 Community Engagement</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>🎁 Distribute 30% Discount Codes</li>
                                         <li>🚀 Launch 360º Social Media Campaign</li>
                                     </ul>
                                 </div>
                                 <div>
                                     <h3 class="font-bold text-purple-300">🎥 Content</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-white">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-white">
                                         <li>🎙️ Quantum Post Interview #1 goes live</li>
                                     </ul>
                                 </div>
@@ -345,18 +390,16 @@
                     </div>
                     
                     <!-- July 2025 -->
-                    <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
-                        </div>
-                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full" data-aos="fade-up">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                    <div class="mb-16 relative flex speaker-card">
+                        <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">
                                 JULY 2025 — GROWTH PHASE
                             </div>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                                 <div>
                                     <h3 class="font-bold text-purple-300">🧠 Thought Leadership</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-white">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-white">
                                         <li>🎤 Finalize & announce KOL Speaker Lineup</li>
                                         <li>Promote Web3District @ SBC Track</li>
                                     </ul>
@@ -370,7 +413,7 @@
                                 </div>
                                 <div class="md:col-span-2">
                                     <h3 class="font-bold text-purple-300">📣 Media & Reporting</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>📢 2nd PR Wave – highlight speakers + prizes</li>
                                         <li>🎥 Quantum Post Interview #2 drops</li>
                                         <li>📊 Begin weekly reporting to SBC</li>
@@ -381,18 +424,16 @@
                     </div>
                     
                     <!-- August 2025 -->
-                    <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
-                        </div>
-                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full" data-aos="fade-up">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                    <div class="mb-16 relative flex speaker-card">
+                        <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">
                                 AUGUST 2025 — INTENSIFICATION PHASE
                             </div>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                                 <div>
                                     <h3 class="font-bold text-purple-300">💥 Quest Expansion</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>🧭 Launch Lisboa DeFi Dash teaser quests</li>
                                         <li>🧵 Integrate partner-sponsored quests</li>
                                         <li>🛠️ Print & deploy NFC tag stickers IRL</li>
@@ -400,7 +441,7 @@
                                 </div>
                                 <div>
                                     <h3 class="font-bold text-purple-300">📣 Final Campaign Push</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">
+                                    <ul class="list-none pl-0 space-y-1 mt-2 text-purple-100">
                                         <li>📺 Quantum Post Interview #3</li>
                                         <li>🧾 "Last 200 VIP entries" campaign</li>
                                         <li>📰 Final PR burst to 15+ media outlets</li>
@@ -414,15 +455,13 @@
                     </div>
                     
                     <!-- September 1-15 -->
-                    <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
-                        </div>
-                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full" data-aos="fade-up">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                    <div class="mb-16 relative flex speaker-card">
+                        <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">
                                 SEPTEMBER 1-15 — ACTIVATION PHASE
                             </div>
-                            <ul class="list-disc pl-5 space-y-2 mt-8 text-purple-100">
+                            <ul class="list-none pl-0 space-y-2 mt-8 text-purple-100">
                                 <li>🧠 Drop exclusive quests (meet Gary Vee backstage)</li>
                                 <li>🚪 Launch DeFi Dash full citywide experience</li>
                                 <li>📲 Deploy mobile leaderboard & TG share UI</li>
@@ -434,12 +473,12 @@
                     </div>
                     
                     <!-- SBC Summit -->
-                    <div class="mb-16 relative flex">
+                    <div class="mb-16 relative flex speaker-card">
                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
                         </div>
-                        <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full" data-aos="fade-up">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                        <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">
                                 SEPTEMBER 16-18 — SBC SUMMIT LIVE
                             </div>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
@@ -453,7 +492,7 @@
                                 </div>
                                 <div class="bg-purple-900/50 p-4 rounded-lg md:col-span-2">
                                     <h3 class="font-bold text-purple-300">🎙️ Featured Speakers</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2">
+                                    <ul class="list-none pl-0 space-y-1 mt-2">
                                         <li>Gary Vee Keynote</li>
                                         <li>Lisbon Web3 x Culture x Future Speakers</li>
                                         <li>🎉 Prize Ceremony + Final Leaderboard</li>
@@ -465,18 +504,18 @@
                     </div>
                     
                     <!-- Post-Event -->
-                    <div class="relative flex">
+                    <div class="relative flex speaker-card">
                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>
                         </div>
-                        <div class="bg-gradient-to-br from-purple-900/80 to-fuchsia-900/80 backdrop-blur-sm border border-purple-700/50 p-6 rounded-2xl shadow-2xl w-full">
-                            <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">
+                        <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">
                                 OCTOBER 2025 — POST EVENT
                             </div>
                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                                 <div>
                                     <h3 class="font-bold text-purple-300">🌍 Rewards & Content</h3>
-                                    <ul class="list-disc pl-5 space-y-1 mt-2">
+                                    <ul class="list-none pl-0 space-y-1 mt-2">
                                         <li>Distribute NFT Certificates</li>
                                         <li>🎥 Publish Behind-the-Scenes Video</li>
                                         <li>📰 Summit Edition Quantum Post</li>
@@ -552,11 +591,25 @@
         // Initialize AOS for scroll animations
         AOS.init({
             duration: 800,
-            once: true
+            once: false,
+            mirror: true
         });
 
+        // Custom roadmap scroll handling
+        let lastScrollTop = 0;
+        const roadmapItems = document.querySelectorAll('.relative.flex.mb-16');
+        
         // Enhanced parallax effect
         document.addEventListener('scroll', function() {
+            // Handle roadmap items visibility
+            roadmapItems.forEach(item => {
+                if (isElementInViewport(item)) {
+                    item.style.opacity = '1';
+                    item.style.transform = 'translateY(0)';
+                    item.style.transition = 'all 0.3s ease-out';
+                }
+            });
+            lastScrollTop = st <= 0 ? 0 : st;
             const scrollY = window.scrollY;
             const parallaxElements = document.querySelectorAll('.parallax-bg');
             
@@ -582,6 +635,15 @@
             });
         });
 
+        // Helper function to check if element is in viewport
+        function isElementInViewport(el) {
+            const rect = el.getBoundingClientRect();
+            return (
+                rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rect.bottom >= 0
+            );
+        }
+
         // Initialize with scroll
         window.dispatchEvent(new Event('scroll'));
     </script>

prompts.txt

@@ -21,4 +21,25 @@ please centralize the road map boxes and make them appear on scroll, and lets tr
 plese remove the lost bullet points outside the boxes of roadmap, fix the colour background of all boxes.
 the boxes of the road map must be purple with white text, as it was, the bullet points outside the boxes arent fixed 
 the back ground of the boxes are still white and they are suppose to be the purple
-please remove this element: <div class="w-3 h-3 bg-white rounded-full"></div>
+please remove this element: <div class="w-3 h-3 bg-white rounded-full"></div>
+when scroll up the boxes of the road map must disappear as they apear on scrool down
+please make all boxes react the same in the road map
+please make all the boxes with the same scroll effect as the june box in the road map
+box dont disappear when roll down
+make this section with white background and the boxes also white background but with the thin  line as you used in the  speakers card, please also make the text with the colour that is the back ground of the speakers card, remove bullet points  and leave the icons to keep the text format (bullet points but without the bullets)
+make this element with the same style as before to create legibility: <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>
+the title of the box MAY should have gradient background and white letters: <div class="relative">                     <!-- May 2025 -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-white border border-purple-700/50 p-6 rounded-2xl shadow-lg w-full aos-init aos-animate" 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>                             <div class="space-y-2 mt-8 text-gray-900 pl-0">                                 <div class="flex items-start"><span class="mr-2">✅</span> TON FEST Activation Completed</div>                                 <div class="flex items-start"><span class="mr-2">✅</span> SBC brand seeded across Telegram &amp; Lisbon Web3</div>                                 <div class="flex items-start"><span class="mr-2">✅</span> Telegram Quest Bot &amp; Strategy Blueprint completed</div>                                 <div class="flex items-start"><span class="mr-2">✅</span> VIP HQ secured at Avenida da Liberdade</div>                                 <div class="flex items-start"><span class="mr-2">✅</span> Initial Quest narrative, XP logic, and sponsor prize tiers structured</div>                             </div>                             <div class="flex flex-wrap gap-2 mt-4">                                 <span class="bg-gray-100 text-gray-900 text-xs px-2 py-1 rounded border border-gray-300">Telegram</span>                                 <span class="bg-gray-100 text-gray-900 text-xs px-2 py-1 rounded border border-gray-300">VIP HQ</span>                                 <span class="bg-gray-100 text-gray-900 text-xs px-2 py-1 rounded border border-gray-300">Narrative Design</span>                             </div>                         </div>                     </div>                                          <!-- June 2025 -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-white border border-purple-700/50 p-6 rounded-2xl shadow-lg w-full aos-init aos-animate" data-aos="fade-up">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 JUNE 2025 — LAUNCH PHASE                             </div>                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">                                 <div>                                     <h3 class="font-bold text-gray-900">🔥 PR &amp; Media</h3>                                     <div class="space-y-1 mt-2 text-gray-900 pl-0">                                         <div class="flex items-start"><span class="mr-2">🚀</span> Gary Vee Keynote Announcement</div>                                         <div class="flex items-start"><span class="mr-2">📰</span> Published across 15+ Top Web3/AI Media</div>                                     </div>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">🎮 Quest Campaign</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>🛠️ Soft Launch of Quest Game</li>                                         <li>🧭 Finalize phygital rollout plan</li>                                     </ul>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">📣 Community Engagement</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>🎁 Distribute 30% Discount Codes</li>                                         <li>🚀 Launch 360º Social Media Campaign</li>                                     </ul>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">🎥 Content</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-white">                                         <li>🎙️ Quantum Post Interview #1 goes live</li>                                     </ul>                                 </div>                             </div>                         </div>                     </div>                                          <!-- July 2025 -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full aos-init" data-aos="fade-up">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 JULY 2025 — GROWTH PHASE                             </div>                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">                                 <div>                                     <h3 class="font-bold text-purple-300">🧠 Thought Leadership</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-white">                                         <li>🎤 Finalize &amp; announce KOL Speaker Lineup</li>                                         <li>Promote Web3District @ SBC Track</li>                                     </ul>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">🏁 Quest Mechanics</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-white">                                         <li>⚡ Weekly "boss quests" &amp; mid-season leaderboard</li>                                         <li>📦 Add SBC merch &amp; NFTs</li>                                     </ul>                                 </div>                                 <div class="md:col-span-2">                                     <h3 class="font-bold text-purple-300">📣 Media &amp; Reporting</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>📢 2nd PR Wave – highlight speakers + prizes</li>                                         <li>🎥 Quantum Post Interview #2 drops</li>                                         <li>📊 Begin weekly reporting to SBC</li>                                     </ul>                                 </div>                             </div>                         </div>                     </div>                                          <!-- August 2025 -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full aos-init" data-aos="fade-up">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 AUGUST 2025 — INTENSIFICATION PHASE                             </div>                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">                                 <div>                                     <h3 class="font-bold text-purple-300">💥 Quest Expansion</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>🧭 Launch Lisboa DeFi Dash teaser quests</li>                                         <li>🧵 Integrate partner-sponsored quests</li>                                         <li>🛠️ Print &amp; deploy NFC tag stickers IRL</li>                                     </ul>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">📣 Final Campaign Push</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>📺 Quantum Post Interview #3</li>                                         <li>🧾 "Last 200 VIP entries" campaign</li>                                         <li>📰 Final PR burst to 15+ media outlets</li>                                     </ul>                                 </div>                             </div>                             <div class="mt-4 p-3 bg-purple-800/50 rounded-lg border border-purple-700/50">                                 <p class="text-xs text-purple-300">📰 Featured Media: Decrypt, BeInCrypto, Cointelegraph, BSC News</p>                             </div>                         </div>                     </div>                                          <!-- September 1-15 -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full aos-init" data-aos="fade-up">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 SEPTEMBER 1-15 — ACTIVATION PHASE                             </div>                             <ul class="list-disc pl-5 space-y-2 mt-8 text-purple-100">                                 <li>🧠 Drop exclusive quests (meet Gary Vee backstage)</li>                                 <li>🚪 Launch DeFi Dash full citywide experience</li>                                 <li>📲 Deploy mobile leaderboard &amp; TG share UI</li>                                 <li>💻 Add "Meet at Web3District HQ" Quest</li>                                 <li>📦 Final merch kits prepared for winners</li>                                 <li>📊 Prep final reports &amp; community metrics</li>                             </ul>                         </div>                     </div>                                          <!-- SBC Summit -->                     <div class="mb-16 relative flex" style="opacity: 1; transform: translateY(0px); transition: 0.3s ease-out;">                         <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-gradient-to-br from-purple-900 to-fuchsia-900 text-white p-6 rounded-2xl shadow-lg w-full aos-init" data-aos="fade-up">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 SEPTEMBER 16-18 — SBC SUMMIT LIVE                             </div>                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">                                 <div>                                     <h3 class="font-bold text-purple-300">📍 On-Site Activations</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2 text-purple-100">                                         <li>🧭 Quest Checkpoint Booth</li>                                         <li>🎙️ Web3District @ SBC Track</li>                                         <li>🥂 VIP Office (Liberdade Ave)</li>                                     </ul>                                 </div>                                 <div class="bg-purple-900/50 p-4 rounded-lg md:col-span-2">                                     <h3 class="font-bold text-purple-300">🎙️ Featured Speakers</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2">                                         <li>Gary Vee Keynote</li>                                         <li>Lisbon Web3 x Culture x Future Speakers</li>                                         <li>🎉 Prize Ceremony + Final Leaderboard</li>                                         <li>📸 Real-time capture for social</li>                                     </ul>                                 </div>                             </div>                         </div>                     </div>                                          <!-- Post-Event -->                     <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 class="w-3 h-3 bg-gray-900 rounded-full"></div>                         </div>                         <div class="bg-white border border-purple-700/50 p-6 rounded-2xl shadow-2xl w-full">                             <div class="absolute -top-3 right-4 bg-gradient-to-r from-purple-start to-fuchsia-end text-white text-sm font-bold px-4 py-1 rounded-full">                                 OCTOBER 2025 — POST EVENT                             </div>                             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">                                 <div>                                     <h3 class="font-bold text-purple-300">🌍 Rewards &amp; Content</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2">                                         <li>Distribute NFT Certificates</li>                                         <li>🎥 Publish Behind-the-Scenes Video</li>                                         <li>📰 Summit Edition Quantum Post</li>                                     </ul>                                 </div>                                 <div>                                     <h3 class="font-bold text-purple-300">📢 Final Communication</h3>                                     <ul class="list-disc pl-5 space-y-1 mt-2">                                         <li>Final push on Telegram, Twitter, IG</li>                                         <li>📬 Email newsletter blast</li>                                         <li>🗓️ Set stage for 2026 Quest</li>                                     </ul>                                 </div>                             </div>                         </div>                     </div>                 </div>
+please remove the visible white bullet points from here: <ul class="list-disc pl-5 space-y-2 mt-8 text-purple-100">                                 <li>✅ TON FEST Activation Completed</li>                                 <li>✅ SBC brand seeded across Telegram &amp; Lisbon Web3</li>                                 <li>✅ Telegram Quest Bot &amp; 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>
+please remove the white bullet points from all boxes from the road map
+make the back gorund of engament roadmap white
+please delete this bullet pint form all boxes from the road map: <div class="w-3 h-3 bg-gray-900 rounded-full"></div>
+other boxes still have a black dot please remove all them
+make the boxeslook like 3D on mouse over, like a button get out from the background
+can you apply the 3d effect you used on speakers card on all boxes from timeline?
+the 3D effect looks really great, make it 30% less perspective on mouse over
+can you make less distorted the perspective on mouse over
+theres some lines appearing on the top of the first box when gets 3D, can you fix it
+please copy to all other boxes from the road map the effect you used in the  box of MAY
+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