Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 4, 2025

Commit

9ae839b

verified ·

1 Parent(s): cc477c0

Manual changes saved

Browse files

Files changed (2) hide show

index.html +139 -191
value-mapper.html +43 -1

index.html CHANGED Viewed

@@ -4,239 +4,187 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="McGPT - Your strategic sales companion">
-    <title> Pod Value Mapper | Home</title>
-    <link rel="icon" type="image/x-icon" href="https://www.scaleway.com/en">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#6366f1',
-                        secondary: '#8b5cf6',
-                        dark: '#1e293b'
-                    }
-                }
-            }
-        }
     </script>
     <style>
         .nav-link.active {
-            @apply text-primary font-medium border-b-2 border-primary;
         }
         .card-hover {
             @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
         }
-        .hamburger-line {
-            @apply w-6 h-0.5 bg-white transition-all duration-300;
-        }
-/* Styles for the animated hamburger icon when menu is open */
-        #mobileMenuButton.open .hamburger-line:nth-child(1) {
-            transform: rotate(45deg) translate(5px, 6px);
-        }
-        #mobileMenuButton.open .hamburger-line:nth-child(2) {
-            opacity: 0;
-        }
-        #mobileMenuButton.open .hamburger-line:nth-child(3) {
-            transform: rotate(-45deg) translate(5px, -6px);
-        }
     </style>
 </head>
-<body class="bg-[#3D1862] dark:bg-[#3D1862] text-blue-900 dark:text-blue-900 min-h-screen flex flex-col relative" style="background-image: radial-gradient(circle at 25% 25%, rgba(39, 8, 71, 0.6) 0%, rgba(39, 8, 71, 0) 50%), radial-gradient(circle at 75% 75%, rgba(59, 15, 110, 0.6) 0%, rgba(59, 15, 110, 0) 50%);">
-<header class="sticky top-0 z-50 bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-md shadow-sm">
     <div class="container mx-auto px-4 py-3">
         <div class="flex justify-between items-center">
             <a href="index.html" class="flex items-center space-x-2">
                 <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
-                <span class="text-xl font-bold text-white font-heading">McGPT</span>
-</a>
             <nav class="hidden md:flex space-x-8">
-                <a href="index.html" class="nav-link active py-2 px-1 text-white">Home</a>
-                <a href="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Mapper</a>
-                <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Scorecard</a>
-                <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-primary transition-colors">Method</a>
             </nav>
             <div class="flex items-center space-x-4">
-                <button id="themeToggle" class="p-2 rounded-full text-white hover:bg-gray-200 dark:hover:bg-gray-700">
                     <i data-feather="moon" class="hidden dark:block"></i>
                     <i data-feather="sun" class="block dark:hidden"></i>
                 </button>
-                <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-[#9B5CEB] rounded-lg">
                     <span class="hamburger-line"></span>
                     <span class="hamburger-line"></span>
                     <span class="hamburger-line"></span>
                 </button>
-</div>
         </div>
-    </div>
-</header>
-<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-purple-900">
-    <div class="flex flex-col items-center justify-center h-full space-y-8">
-        <a href="index.html" class="nav-link text-2xl text-white">Home</a>
-        <a href="value-mapper.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">Mapper</a>
-        <a href="scorecard.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">Scorecard</a>
-        <a href="strategy.html" class="nav-link text-2xl text-white hover:text-primary transition-colors">Method</a>
-    </div>
-</div>
-<section class="flex-grow bg-purple-800 backdrop-blur-sm">
-    <div class="container mx-auto px-4 py-16 md:py-24">
-        <div class="flex flex-col md:flex-row items-center">
-            <div class="md:w-1/2 mb-12 md:mb-0">
-                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight text-white">
-                    Raise
-<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#C43BFF]">your</span>
-game
-                </h1>
-                                <p class="text-xl mb-8 text-white dark:text-white font-light">
-                                    Sales intelligence anywhere, anytime helping you <span class="text-xl font-bold text-white font-heading">qualify</span>, <span class="text-xl font-bold text-white font-heading">quantify</span>  and <span class="text-xl font-bold text-white font-heading">justify</span> Scaleway's unique value proposition.
-                                </p>
-                                  <p class="text-xl mb-8 text-white dark:text-white font-light">
-                    <span class="text-xl font-bold text-white font-heading">McGPT</span> - <span class="text-xl font-bold text-white font-heading">strategic tools enabling elite sales</span>
-                </p>
-<div class="flex space-x-4">
-                    <a href="value-mapper.html" class="bg-[#9B5CEB] hover:bg-[#8B5CF6] text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
-                        Start Mapping
-                    </a>
-                    <a href="scorecard.html" class="bg-secondary hover:bg-[#7B4BEB] text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
-                        MEDDICC Scorecard
-                    </a>
-                </div>
-</div>
-            <div class="md:w-1/2"></div>
         </div>
     </div>
-<div class="container mx-auto px-4">
-        <div class="flex justify-center mb-6">
-                        <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MediaEntertainment-Illustration-transparent.png" alt="Strategic Toolkit Illustration" class="h-[24rem] w-auto ">
-</div>
-<h2 class="text-3xl font-bold text-center mb-12 text-white">Strategic tools for <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#C43BFF]">ELITE</span> sales professionals</h2>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-            <a href="value-mapper.html" class="bg-white/10 dark:bg-gray-700/30 text-white rounded-xl p-6 shadow-md card-hover backdrop-blur-sm border border-white/10">
-                <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center mb-4">
-                    <i data-feather="map" class="text-sky-400"></i>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">Value Mapping</h3>
-                <p class="text-gray-300 dark:text-gray-300">Qualify leads <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">effectively</span> by mapping their values to your solutions.</p>
-            </a>
-            <a href="scorecard.html" class="bg-white/10 dark:bg-gray-700/30 text-white rounded-xl p-6 shadow-md card-hover backdrop-blur-sm border border-white/10">
-                <div class="w-12 h-12 rounded-lg bg-secondary/20 flex items-center justify-center mb-4">
-                    <i data-feather="check-square" class="text-sky-400"></i>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">Value Scoring</h3>
-                <p class="text-gray-300 dark:text-gray-300">Utilise our MEDDICC Scorecard to build <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">real urgency</span> and improve forecasting.</p>
-            </a>
-            <a href="strategy.html" class="bg-white/10 dark:bg-gray-700/30 text-white rounded-xl p-6 shadow-md card-hover backdrop-blur-sm border border-white/10">
-                <div class="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center mb-4">
-                    <i data-feather="trending-up" class="text-sky-400"></i>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">Value-Centric</h3>
-                <p class="text-gray-300 dark:text-gray-300">Stand out from the competition by learning how to execute our proven <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">value-centric</span> sales methodology.</p>
-            </a>
-<a href="https://scaleway.360learning.com/group/66fbe9a4f3281e47975115a2/stats/courses/mine/active" class="bg-white/10 dark:bg-gray-700/30 text-white rounded-xl p-6 shadow-md card-hover backdrop-blur-sm border border-white/10">
-                <div class="w-12 h-12 rounded-lg bg-secondary/20 flex items-center justify-center mb-4">
-                    <i data-feather="bar-chart-2" class="text-sky-400"></i>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">Sales Academy</h3>
-                <p class="text-gray-300 dark:text-gray-300">Enroll in eLearning training courses designed to help you raise your sales game and become an <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">ELITE</span>seller.</p>
-            </a>
-        </div>
-    </div>
-</section>
-<section class="py-16 bg-[#8F1CC2] backdrop-blur-sm bg-opacity-90">
-<div class="container mx-auto px-4 text-center">
-        <h2 class="text-3xl font-bold text-white mb-6">Ready to Transform Your Sales Approach?</h2>
-        <p class="text-white/90 mb-8 max-w-2xl mx-auto">
-            Embrace solution selling tailored for B2B sellers looking to stand out in a busy market.
-        </p>
-        <div class="flex justify-center">
-            <a href="strategy.html" class="bg-[#9B5CEB] hover:bg-[#8B5CF6] text-white px-8 py-3 rounded-lg font-medium transition-colors">
-                Learn More
-            </a>
-        </div>
-    </div>
-</section>
-<footer class="bg-purple-800 backdrop-blur-sm border-t border-gray-700">
-    <div class="container mx-auto px-4 py-8">
-        <div class="flex flex-col md:flex-row justify-between items-center">
-            <div class="mb-6 md:mb-0">
-                <a href="index.html" class="flex items-center space-x-2">
-                    <span class="text-lg font-bold text-white font-heading">McGPT</span>
-                </a>
-                <p class="text-gray-400 dark:text-gray-300 mt-2 text-sm">
-                    Navigating your sales success with AI since 2023
-                </p>
-            </div>
-                <div class="col-span-2 md:col-span-1">
-                    <h3 class="text-sm font-semibold text-gray-400 dark:text-gray-400 uppercase tracking-wider mb-4">Connect</h3>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">
-                            <i data-feather="twitter"></i>
                         </a>
-                        <a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">
-                            <i data-feather="linkedin"></i>
-                        </a>
-                        <a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">
-                            <i data-feather="github"></i>
                         </a>
                     </div>
                 </div>
             </div>
-            <div class="mt-8 pt-8 border-t border-gray-700 text-center text-sm text-gray-400 dark:text-gray-400">
-                <p>&copy; 2023 McGPT Navigator. All rights reserved.</p>
             </div>
         </div>
-    </footer>
-    <script>
-        // Mobile Menu Toggle
-        const mobileMenuButton = document.getElementById('mobileMenuButton');
-        const mobileMenu = document.getElementById('mobileMenu');
-        mobileMenuButton.addEventListener('click', () => {
-            // Toggle visibility of the menu overlay
-            mobileMenu.classList.toggle('hidden');
-            // Toggle the animation class on the button
-            mobileMenuButton.classList.toggle('open');
-            // Prevent body from scrolling when menu is open
-            document.body.classList.toggle('overflow-hidden');
-        });
-        // Theme Toggle - Note: This site is dark by default.
-        const themeToggle = document.getElementById('themeToggle');
-        const html = document.documentElement;
-        // This function is kept for potential future use if a light mode is added.
-        themeToggle.addEventListener('click', () => {
-            // Example: Toggling between dark and a hypothetical light mode
-            // html.classList.toggle('dark');
-            // For now, it doesn't do anything as the site is always dark.
-        });
-        // Set initial theme - always dark by default
-        if (!html.classList.contains('dark')) {
-            html.classList.add('dark');
         }
-        // Set active nav link
-        const currentPage = window.location.pathname.split('/').pop() || 'index.html';
-        document.querySelectorAll('.nav-link').forEach(link => {
-            link.classList.remove('active'); // Remove active from all first
-            const linkHref = link.getAttribute('href');
-            if (linkHref === currentPage) {
-                link.classList.add('active');
-            }
-        });
-        // Feather Icons
-        feather.replace();
-    </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="McGPT - Your strategic sales companion">
+    <title>McGPT | Home</title>
+    <link rel="icon" type="image/x-icon" href="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png">
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
     <script>
+      tailwind.config = {
+        darkMode: 'class',
+      }
     </script>
     <style>
+        body { font-family: 'Poppins', sans-serif; }
+        .hamburger-line {
+             width: 20px; height: 2px; background-color: white; display: block; transition: all 0.3s;
+        }
+        .dark .hamburger-line { background-color: white; }
+        html:not(.dark) .hamburger-line { background-color: #4a5568; }
+        .open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
+        .open .hamburger-line:nth-child(2) { opacity: 0; }
+        .open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
         .nav-link.active {
+            font-weight: 600;
+            border-bottom: 2px solid #8b5cf6;
         }
         .card-hover {
             @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
         }
     </style>
 </head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
+<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
     <div class="container mx-auto px-4 py-3">
         <div class="flex justify-between items-center">
             <a href="index.html" class="flex items-center space-x-2">
                 <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
+                <span class="text-xl font-bold text-gray-800 dark:text-white font-heading">McGPT</span>
+            </a>
             <nav class="hidden md:flex space-x-8">
+                <a href="index.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Home</a>
+                <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Mapper</a>
+                <a href="scorecard.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Scorecard</a>
+                <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">Method</a>
             </nav>
             <div class="flex items-center space-x-4">
+                <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
                     <i data-feather="moon" class="hidden dark:block"></i>
                     <i data-feather="sun" class="block dark:hidden"></i>
                 </button>
+                <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 bg-gray-200 dark:bg-gray-700 rounded-lg">
                     <span class="hamburger-line"></span>
                     <span class="hamburger-line"></span>
                     <span class="hamburger-line"></span>
                 </button>
+            </div>
         </div>
+        <div id="mobileMenu" class="hidden md:hidden py-4 border-t border-gray-200 dark:border-gray-700 mt-3">
+            <div class="flex flex-col space-y-3">
+                <a href="index.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Home</a>
+                <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Mapper</a>
+                <a href="scorecard.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Scorecard</a>
+                <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Method</a>
+            </div>
         </div>
     </div>
+</header>
+<main class="flex-grow">
+    <section class="bg-gradient-to-br from-purple-600 to-indigo-700 text-white">
+        <div class="container mx-auto px-4 py-16 sm:py-24">
+            <div class="grid md:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h1 class="text-4xl lg:text-5xl font-extrabold mb-6 leading-tight">
+                        Raise <span class="bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">Your</span> Game
+                    </h1>
+                    <p class="text-xl mb-4 text-purple-200">
+                        Sales intelligence anywhere, anytime helping you <strong class="font-semibold text-white">qualify</strong>, <strong class="font-semibold text-white">quantify</strong>, and <strong class="font-semibold text-white">justify</strong> Scaleway's unique value proposition.
+                    </p>
+                    <p class="text-lg mb-8 text-purple-200">
+                        <strong>McGPT</strong> - Strategic tools enabling elite sales.
+                    </p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="value-mapper.html" class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold transition-transform transform hover:scale-105 shadow-lg text-center">
+                            Start Mapping
                         </a>
+                        <a href="scorecard.html" class="bg-purple-500/50 border border-purple-400 text-white px-8 py-3 rounded-lg font-semibold transition-transform transform hover:scale-105 shadow-lg text-center">
+                            MEDDICC Scorecard
                         </a>
                     </div>
                 </div>
+                <div class="hidden md:block">
+                    <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/MediaEntertainment-Illustration-transparent.png" alt="Strategic Toolkit Illustration" class="w-full h-auto">
+                </div>
             </div>
+        </div>
+    </section>
+    <section class="py-16 sm:py-24">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800 dark:text-white">
+                Strategic Tools for <span class="text-purple-600 dark:text-purple-400">Elite</span> Sales Professionals
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <a href="value-mapper.html" class="block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover border border-transparent dark:border-gray-700">
+                    <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-4">
+                        <i data-feather="map" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Value Mapping</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Qualify leads <strong class="text-purple-600 dark:text-purple-400 font-medium">effectively</strong> by mapping their values to your solutions.</p>
+                </a>
+                <a href="scorecard.html" class="block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover border border-transparent dark:border-gray-700">
+                    <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-4">
+                        <i data-feather="check-square" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Value Scoring</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Utilise our MEDDICC Scorecard to build <strong class="text-purple-600 dark:text-purple-400 font-medium">real urgency</strong> and improve forecasting.</p>
+                </a>
+                <a href="strategy.html" class="block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover border border-transparent dark:border-gray-700">
+                    <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-4">
+                        <i data-feather="trending-up" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Value-Centric</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Execute our proven <strong class="text-purple-600 dark:text-purple-400 font-medium">value-centric</strong> sales methodology.</p>
+                </a>
+                <a href="https://scaleway.360learning.com/" class="block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg card-hover border border-transparent dark:border-gray-700">
+                    <div class="w-12 h-12 rounded-lg bg-purple-100 dark:bg-purple-900/50 flex items-center justify-center mb-4">
+                        <i data-feather="bar-chart-2" class="text-purple-600 dark:text-purple-400"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-white">Sales Academy</h3>
+                    <p class="text-gray-600 dark:text-gray-400">Enroll in eLearning courses to become an <strong class="text-purple-600 dark:text-purple-400 font-medium">ELITE</strong> seller.</p>
+                </a>
             </div>
         </div>
+    </section>
+</main>
+<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+    <div class="container mx-auto px-4 py-6">
+        <div class="text-center text-sm text-gray-500 dark:text-gray-400">
+            <p>&copy; 2025 McGPT Navigator. All rights reserved.</p>
+        </div>
+    </div>
+</footer>
+<script>
+    feather.replace();
+    // --- Theme Toggle ---
+    const themeToggle = document.getElementById('themeToggle');
+    const html = document.documentElement;
+    themeToggle.addEventListener('click', () => {
+        html.classList.toggle('dark');
+        localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
+        feather.replace();
+    });
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        html.classList.add('dark');
+    } else {
+        html.classList.remove('dark');
+    }
+    // --- Mobile Menu ---
+    const mobileMenuButton = document.getElementById('mobileMenuButton');
+    const mobileMenu = document.getElementById('mobileMenu');
+    mobileMenuButton.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+        mobileMenuButton.classList.toggle('open');
+    });
+    // --- Active Nav Link ---
+    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
+    document.querySelectorAll('.nav-link').forEach(link => {
+        const linkHref = link.getAttribute('href');
+        if (linkHref === currentPage) {
+            link.classList.add('active');
+        } else {
+            link.classList.remove('active');
         }
+    });
+</script>
 </body>
 </html>

value-mapper.html CHANGED Viewed

@@ -179,4 +179,46 @@
         "Government and Public Sector": { valueDrivers: "Value Drivers: Strict Data Sovereignty (European Cloud), SecNumCloud Readiness, Compliance. Product Focus: Private Cloud, Elastic Metal, SecNumCloud options.", dq1: "In your digital transformation roadmap, what are the primary risks associated with relying on non-European cloud providers for sensitive citizen data?", pbo1: "When we speak with European leaders, data sovereignty is often a top priority. Do you mind if I share how Scaleway addresses those requirements with our certified, local infrastructure?", dq2: "How challenging is it for your organization to maintain strict European data sovereignty and pursue certifications like SecNumCloud while managing your core infrastructure needs?", pbo2: "Meeting public sector standards is non-negotiable. Can I show you how our SecNumCloud-ready Private Cloud is designed for this?" },
         "Cyber": { valueDrivers: "Value Drivers: Data Sovereignty as Defense, Private Networking, AI/ML for Threat Detection, Transparent Billing. Product Focus: Private Network (VPC), Elastic Metal, AI Inference Servers.", dq1: "How is your team utilizing (or planning to utilize) AI and European-local data processing to enhance your real-time threat detection capabilities?", pbo1: "I often hear that predictable billing is a key concern when scaling security operations. May I share how Scaleway ensures cost transparency compared to US hyperscalers?", dq2: "What is your current level of confidence in your existing private networking setup to leverage AI/ML for threat detection while upholding data sovereignty principles?", pbo2: "A secure foundation is key. Would you be open to seeing how our Elastic Metal servers combined with a Private Network (VPC) can enhance your security posture?" },
         "Manufacturing": { valueDrivers: "Value Drivers: Edge Computing (IoT Data), AI/ML for Predictive Maintenance, Open-Source Integration. Product Focus: Edge Services, AI Inference Servers, Object Storage.", dq1: "What percentage of unscheduled downtime could be saved if you could process IoT sensor data at the edge for instant, localized predictive maintenance?", pbo1: "Many companies are concerned about long-term vendor lock-in. Would it be helpful to discuss how our open-source ecosystem helps customers avoid those challenges?", dq2: "When deploying AI/ML for predictive maintenance using IoT data, what is the biggest technical roadblock you encounter regarding data storage, processing, or integration?", pbo2: "Processing data at the source is the future. Can I show you our Edge solutions designed specifically for predictive maintenance?" },
-        "Energy": { valueDrivers: "Value Drivers: Sustainability, AI/ML for Grid Optimization, Data Sovereignty. Product Focus: AI Inference Servers, Managed Databases.", dq1: "Given the move toward renewables, what is the biggest infrastructure challenge you face when trying to predict supply and demand volatility for grid optimization?", pbo1: "When we speak with European leaders, data sovereignty is often a top priority. Do you mind if I share how Scaleway addresses those requirements with our certified, local infrastructure?", dq2: "As you pursue sustainability goals, how are you deploying AI/ML tools for initiatives like grid optimization while also adhering to strict data sovereignty mandates?", pbo2: "Optimizing energy grids is a

         "Government and Public Sector": { valueDrivers: "Value Drivers: Strict Data Sovereignty (European Cloud), SecNumCloud Readiness, Compliance. Product Focus: Private Cloud, Elastic Metal, SecNumCloud options.", dq1: "In your digital transformation roadmap, what are the primary risks associated with relying on non-European cloud providers for sensitive citizen data?", pbo1: "When we speak with European leaders, data sovereignty is often a top priority. Do you mind if I share how Scaleway addresses those requirements with our certified, local infrastructure?", dq2: "How challenging is it for your organization to maintain strict European data sovereignty and pursue certifications like SecNumCloud while managing your core infrastructure needs?", pbo2: "Meeting public sector standards is non-negotiable. Can I show you how our SecNumCloud-ready Private Cloud is designed for this?" },
         "Cyber": { valueDrivers: "Value Drivers: Data Sovereignty as Defense, Private Networking, AI/ML for Threat Detection, Transparent Billing. Product Focus: Private Network (VPC), Elastic Metal, AI Inference Servers.", dq1: "How is your team utilizing (or planning to utilize) AI and European-local data processing to enhance your real-time threat detection capabilities?", pbo1: "I often hear that predictable billing is a key concern when scaling security operations. May I share how Scaleway ensures cost transparency compared to US hyperscalers?", dq2: "What is your current level of confidence in your existing private networking setup to leverage AI/ML for threat detection while upholding data sovereignty principles?", pbo2: "A secure foundation is key. Would you be open to seeing how our Elastic Metal servers combined with a Private Network (VPC) can enhance your security posture?" },
         "Manufacturing": { valueDrivers: "Value Drivers: Edge Computing (IoT Data), AI/ML for Predictive Maintenance, Open-Source Integration. Product Focus: Edge Services, AI Inference Servers, Object Storage.", dq1: "What percentage of unscheduled downtime could be saved if you could process IoT sensor data at the edge for instant, localized predictive maintenance?", pbo1: "Many companies are concerned about long-term vendor lock-in. Would it be helpful to discuss how our open-source ecosystem helps customers avoid those challenges?", dq2: "When deploying AI/ML for predictive maintenance using IoT data, what is the biggest technical roadblock you encounter regarding data storage, processing, or integration?", pbo2: "Processing data at the source is the future. Can I show you our Edge solutions designed specifically for predictive maintenance?" },
+        "Energy": { valueDrivers: "Value Drivers: Sustainability, AI/ML for Grid Optimization, Data Sovereignty. Product Focus: AI Inference Servers, Managed Databases.", dq1: "Given the move toward renewables, what is the biggest infrastructure challenge you face when trying to predict supply and demand volatility for grid optimization?", pbo1: "When we speak with European leaders, data sovereignty is often a top priority. Do you mind if I share how Scaleway addresses those requirements with our certified, local infrastructure?", dq2: "As you pursue sustainability goals, how are you deploying AI/ML tools for initiatives like grid optimization while also adhering to strict data sovereignty mandates?", pbo2: "Optimizing energy grids is a complex AI challenge. Can I share how our AI tools and managed databases are being used for this?" },
+        "Logistics": { valueDrivers: "Value Drivers: Edge Computing (Real-time Tracking), AI/ML for Optimization, Transparent Billing. Product Focus: Edge Services, Managed Databases, AI Inference Servers.", dq1: "If you could achieve a 5% improvement in route efficiency through real-time AI analysis, how quickly would that translate into measurable cost savings?", pbo1: "I often hear that predictable billing is a key concern when scaling. May I share how Scaleway ensures complete cost transparency compared to the major hyperscalers?", dq2: "In your real-time tracking projects, how are you ensuring both fast data processing at the edge and clear billing when leveraging AI/ML for optimization?", pbo2: "We can help you connect real-time data to real-world savings. Can I show you our Edge and AI solution that comes with clear, predictable pricing?" },
+        "Transport": { valueDrivers: "Value Drivers: Low-Latency, HPC for Simulation, Developer-Centric Tools. Product Focus: Edge Services, GPU Instances, High-Performance Compute (HPC) options.", dq1: "How satisfied are your engineering teams with the current cost and turnaround time of running large-scale simulations for new vehicle development?", pbo1: "Our customers appreciate a seamless, developer-centric experience. Are you open to a quick overview of how our tools simplify deployment and management for complex workloads?", dq2: "For your high-stakes HPC simulations, where are you currently seeing the most significant constraints on achieving optimal low-latency performance?", pbo2: "Simulation speed can be a real competitive advantage. Can I share how our GPU instances are used for low-latency, high-performance simulation?" },
+        "Technology/SaaS": { valueDrivers: "Value Drivers: Developer-Centric Tools, Cost-Effectiveness, Open-Source Agility, Transparent Billing. Product Focus: Managed Kubernetes (Kapsule), Managed Databases, GPU Instances.", dq1: "What is the highest friction point your development teams experience when trying to deploy, scale, or manage your core application?", pbo1: "Many SaaS companies are concerned about long-term vendor lock-in and rising egress fees. Would it be helpful to discuss how our open-source ecosystem helps avoid those challenges?", dq2: "As you scale, how are you balancing the need for rapid, open-source agility with the challenge of maintaining cost-effectiveness and transparent billing?", pbo2: "We specialize in helping scale-ups grow efficiently. Can I show you how our cost-effective Kubernetes (Kapsule) and managed databases can support your roadmap?" },
+        "Startup": { valueDrivers: "Value Drivers: Cost-Effectiveness, Developer-Centric Tools, Agility/Time-to-Market, Open-Source Ecosystem. Product Focus: Managed Kubernetes (Kapsule), Managed Databases, Free Tier options, GPU Instances.", dq1: "As you scale rapidly, what are your biggest concerns regarding unpredictable cloud costs, especially related to data egress and vendor lock-in?", pbo1: "I know that predictable billing and cost efficiency are key for startups. May I share how Scaleway ensures cost transparency compared to the big US providers?", dq2: "What friction points are your developers currently facing when deploying new features, and how important is using open-source tools to maintain agility?", pbo2: "We're passionate about helping startups avoid vendor lock-in. Can we discuss how our open ecosystem and developer-friendly tools can support your growth?" }
+    };
+    function updateContent() {
+        const selector = document.getElementById('industry-selector');
+        const industry = selector.value;
+        const dynamicArea = document.getElementById('dynamic-area');
+        const initialMessage = document.getElementById('initial-message');
+        if (!industry || industry === 'placeholder') {
+            dynamicArea.classList.add('hidden');
+            initialMessage.classList.remove('hidden');
+            return;
+        }
+        const data = INDUSTRY_DATA[industry];
+        document.getElementById('industry-title').textContent = industry;
+        const valueDriversElement = document.getElementById('value-drivers');
+        valueDriversElement.innerHTML = data.valueDrivers.replace(/Value Drivers: (.*?)\. Product Focus: (.*?)\./s,
+            `<p class="font-semibold text-lg mb-2 text-purple-600 dark:text-purple-400">Value Drivers:</p>
+             <p class="mb-4">${'$1'}</p>
+             <p class="font-semibold text-lg mb-2 text-purple-600 dark:text-purple-400">Product Focus:</p>
+             <p>${'$2'}</p>`);
+        document.getElementById('dq1').textContent = data.dq1;
+        document.getElementById('pbo1').textContent = data.pbo1;
+        document.getElementById('dq2').textContent = data.dq2;
+        document.getElementById('pbo2').textContent = data.pbo2;
+        initialMessage.classList.add('hidden');
+        dynamicArea.classList.remove('hidden');
+        dynamicArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    window.onload = updateContent;
+</script>
+</body>
+</html>