Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 1, 2025

Commit

6f039c0

verified ·

1 Parent(s): ee4eb2a

Promote version 249a765 to main

Browse files

Promoted commit 249a765bfbc3b24e81e646572c08ed51736df1d9 to main branch

Files changed (1) hide show

value-mapper.html +329 -168

value-mapper.html CHANGED Viewed

@@ -9,8 +9,10 @@
     <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: {
@@ -33,214 +35,373 @@
         .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-purple-900 dark:bg-purple-900 text-blue-900 dark:text-blue-900 min-h-screen flex flex-col relative" style="background-image: radial-gradient(circle at 25% 25%, rgba(59, 7, 100, 0.4) 0%, rgba(59, 7, 100, 0) 50%), radial-gradient(circle at 75% 75%, rgba(76, 29, 149, 0.4) 0%, rgba(76, 29, 149, 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">
-                <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">
-                    McGPT offers strategic selling tools wherever you may be.
-                </p>
-                                <p class="text-xl mb-8 text-white dark:text-white font-light">
-                    Here to help you to <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">qualify</span>, <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">quantify</span> and more clearly <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#DB87FF]">justify</span> Scaleway's unique value proposition to prospective and existing customers.
-                </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>
-</section>
-<section id="features" class="py-8 bg-purple-800 backdrop-blur-sm">
-<div class="container mx-auto px-4">
-        <h2 class="text-3xl font-bold text-center mb-12 text-white">A Strategic Toolkit For <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#EC0BC3]">ELITE</span> B2B Sellers</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-primary"></i>
-                </div>
-                <h3 class="text-xl font-semibold mb-2">Value Mapper</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-secondary"></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-primary"></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-secondary"></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-gradient-to-r from-primary/90 to-secondary/90 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>

     <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>
+    <!-- Add jsPDF library for PDF generation -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script>
+tailwind.config = {
             darkMode: 'class',
             theme: {
                 extend: {
         .hamburger-line {
             @apply w-6 h-0.5 bg-white transition-all duration-300;
         }
+</style>
 </head>
 <body class="bg-purple-900 dark:bg-purple-900 text-blue-900 dark:text-blue-900 min-h-screen flex flex-col relative" style="background-image: radial-gradient(circle at 25% 25%, rgba(59, 7, 100, 0.4) 0%, rgba(59, 7, 100, 0) 50%), radial-gradient(circle at 75% 75%, rgba(76, 29, 149, 0.4) 0%, rgba(76, 29, 149, 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">
+                    <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 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-[#9B5CEB] 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 mt-3">
+                <div class="flex flex-col space-y-3">
+                    <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">About</a>
                 </div>
+            </div>
         </div>
+    </header>
+    <main class="flex-grow bg-gradient-to-b from-[#8B5CF6] to-[#A78BFA] backdrop-blur-sm">
+<div class="container mx-auto px-4 py-16 md:py-24">
+<div class="text-center mb-10 bg-[#F1EEFC] p-8 rounded-2xl shadow-2xl border-t-4 border-primary hover:border-secondary transition-all duration-300 backdrop-blur-sm">
+                    <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-purple-900 mb-3 leading-tight">
+Pod Value Mapper
+                    </h1>
+<div class="mb-10 p-6 bg-gradient-to-tr from-indigo-200 to-purple-200 rounded-xl shadow-xl no-print hover:shadow-2xl transition-shadow duration-300 backdrop-blur-sm hovered-element">
+<div class="relative">
+<select id="industry-selector" onchange="updateContent()" class="block w-full py-3 px-4 pr-10 border-2 border-white rounded-xl text-base font-semibold text-black bg-white/90 focus:ring-4 focus:ring-secondary focus:border-secondary transition duration-200 shadow-lg">
+<option value="placeholder" disabled="" selected="" class="text-gray-600">
+--- Choose an Industry to Map Value ---
+                        </option>
+                        <option value="Financial Services and Insurance">Financial Services and Insurance</option>
+                        <option value="Healthcare and Biotechnology">Healthcare and Biotechnology</option>
+                        <option value="E-commerce and Retail">E-commerce and Retail</option>
+                        <option value="Media and Entertainment">Media and Entertainment</option>
+                        <option value="Gaming">Gaming</option>
+                        <option value="Education and Research">Public Sector and Education</option>
+                        <option value="Government and Public Sector">Government and Public Sector</option>
+                        <option value="Cyber">Cyber</option>
+                        <option value="Manufacturing">Manufacturing</option>
+                        <option value="Energy">Energy</option>
+                        <option value="Logistics">Logistics</option>
+                        <option value="Transport">Transport</option>
+                        <option value="Technology/SaaS">Technology/SaaS</option>
+                        <option value="Startup">Startup</option>
+                    </select>
                 </div>
+            </div>
+<p class="text-lg text-[#792DD4] font-light text-center">
+<strong>Your essential tool for qualification and value articulation.</strong>
+                    </p>
+<div class="my-4 h-0.5 w-1/4 mx-auto bg-black"></div>
+                <p class="text-base text-gray-600 mb-4">
+Identify pain points and frame conversations around Scaleway's key values:
+               <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
+    <div class="bg-white/80 p-3 rounded-lg border-l-2 border-primary">
+        <p class="text-lg font-bold text-[#792DD4]">European Data Sovereignty</p>
     </div>
+    <div class="bg-white/80 p-3 rounded-lg border-l-2 border-indigo-400">
+        <p class="text-lg font-bold text-[#792DD4]">Cost-Effective GPU/AI Power</p>
+    </div>
+    <div class="bg-white/80 p-3 rounded-lg border-l-2 border-secondary">
+        <p class="text-lg font-bold text-[#792DD4]">Full Open-Source Stack</p>
+    </div>
+    <div class="bg-white/80 p-3 rounded-lg border-l-2 border-secondary">
+        <p class="text-lg font-bold text-[#792DD4]">Scalable & 100% Sustainable</p>
     </div>
+</div>
+</div>
             </div>
+            <div id="initial-message" class="text-center p-12 rounded-xl bg-gray-800/80 text-gray-300 border-2 border-dashed border-gray-600 hover:border-primary transition-colors duration-300 backdrop-blur-sm">
+                <p class="text-lg font-medium hovered-element">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
             </div>
+<div id="dynamic-area" class="hidden space-y-8 backdrop-blur-sm">
+                <h2 id="industry-title" class="text-2xl font-heading font-bold text-white text-center pt-4">
+<span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-[#C43BFF]"></span>
+</h2>
+                <div class="bg-gray-800/90 p-8 rounded-xl shadow-lg border-l-4 border-secondary backdrop-blur-sm">
+                    <h3 class="text-xl font-heading font-bold mb-6 text-white">Value Proposition & Suggested Product Focus</h3>
+                    <div id="value-drivers" class="space-y-4 text-gray-200 text-base">
+</div>
+                </div>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                    <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg border-l-4 border-indigo-400 backdrop-blur-sm hover:border-secondary transition-all duration-300">
+                        <h3 class="text-lg font-heading font-bold mb-4 text-white">Discovery Question 1</h3>
+                        <p id="dq1" class="text-gray-200 italic mb-6 text-base"></p>
+                        <h4 class="font-bold text-sm uppercase text-gray-300 mb-2">Permission-Based Opener 1</h4>
+                        <p id="pbo1" class="text-white font-medium text-base"></p>
+</div>
+                    <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg border-l-4 border-secondary backdrop-blur-sm hover:border-primary transition-all duration-300">
+                        <h3 class="text-lg font-heading font-bold mb-4 text-white">Discovery Question 2</h3>
+                        <p id="dq2" class="text-gray-200 italic mb-6 text-base"></p>
+                        <h4 class="font-bold text-sm uppercase text-gray-300 mb-2">Permission-Based Opener 2</h4>
+                        <p id="pbo2" class="text-white font-medium text-base mb-8"></p>
+                    </div>
+</div>
+        </div>
+    </main>
+    <footer class="bg-purple-800/80 dark:bg-purple-800/80 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-600 dark:text-gray-300 mt-2 text-sm">
+                    Navigating your sales success with AI since 2024
+</p>
+            <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 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', () => {
             mobileMenu.classList.toggle('hidden');
             mobileMenuButton.classList.toggle('open');
         });
+        // 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';
         });
         // Set initial theme - always dark by default
+        html.classList.add('dark');
+        localStorage.theme = 'dark';
+// Set active nav link
         const currentPage = window.location.pathname.split('/').pop() || 'index.html';
         document.querySelectorAll('.nav-link').forEach(link => {
             const linkHref = link.getAttribute('href');
+            if ((currentPage === 'index.html' && linkHref === 'index.html') ||
+                (currentPage !== 'index.html' && linkHref === currentPage)) {
                 link.classList.add('active');
+            } else {
+                link.classList.remove('active');
             }
         });
         // Feather Icons
         feather.replace();
+        // JavaScript for Dynamic Content Loading and PDF
+const INDUSTRY_DATA = {
+"Financial Services and Insurance": {
+                valueDrivers: "Value Drivers: Data Sovereignty, Security, Compliance (GDPR, PCI-DSS), Low-Latency. Product Focus: Private Cloud, Bare Metal.",
+                dq1: "How are you currently addressing the rising costs and complexity of maintaining GDPR and PCI-DSS compliance across your cloud infrastructure?",
+                pbo1: "Can I share how we help with data sovereignty using our EU-based infrastructure?",
+dq2: "To what extent are your current cloud/infrastructure choices impacting your ability to meet strict regulatory requirements like GDPR or PCI-DSS, especially around data sovereignty and low-latency access?",
+                pbo2: "Can we quickly discuss how our Private Cloud meets GDPR/PCI-DSS needs?"
+},
+            "Healthcare and Biotechnology": {
+                valueDrivers: "Value Drivers: Secure & Compliant Infrastructure (HDS), AI/ML for Research, HPC. Product Focus: Object Storage, GPU Instances, AI Tools.",
+                dq1: "What infrastructure challenges are currently slowing down your R&D teams when running large-scale AI models on sensitive patient data?",
+                pbo1: "Can I show you how our tools simplify deployment?",
+dq2: "When scaling your AI/ML research or HPC workloads, what are the biggest challenges you face today in ensuring both HDS compliance and getting performant access to massive data sets?",
+                pbo2: "Can I share how our GPU instances accelerate research securely?"
+},
+            "E-commerce and Retail": {
+                valueDrivers: "Value Drivers: Scalability, Performance (Peak Loads), Edge Computing, Real-time Analytics. Product Focus: Load Balancers, Edge Computing, Managed Kubernetes (Kapsule).",
+                dq1: "How quickly and cost-effectively can you scale your infrastructure to handle Black Friday-level traffic spikes without over-provisioning for the rest of the year?",
+                pbo1: "Can I show you our transparent pricing vs US hyperscalers?",
+dq2: "How is your current infrastructure handling unexpected peak loads and the demands of real-time analytics, particularly as you expand your footprint into Edge Computing environments?",
+                pbo2: "Can I show you how we handle traffic spikes with Load Balancers?"
+},
+            "Media and Entertainment": {
+                valueDrivers: "Value Drivers: Massive Object Storage, High-Bandwidth, Cost-Effective GPU Rendering, Open-Source Tools. Product Focus: Object Storage, Dedicated Servers, CDN.",
+                dq1: "Are you facing constraints or unexpected costs when archiving massive volumes of high-resolution content or delivering media globally at high quality?",
+                pbo1: "Can we discuss avoiding vendor lock-in with our open ecosystem?",
+dq2: "When you look at your overall rendering and distribution pipeline, where are you seeing the biggest bottlenecks in terms of high-bandwidth data transfer and cost-effective GPU access for large rendering jobs?",
+                pbo2: "Can I show you how we cut rendering costs with our storage?"
+},
+            "Gaming": {
+                valueDrivers: "Value Drivers: Low-Latency, High-Availability, Cost-Effective GPU Instances, Developer-Centric Tools. Product Focus: Load Balancers, Bare Metal, GPU Instances.",
+                dq1: "What are the key technical barriers your players are reporting around in-game latency or server downtime that directly impact retention rates?",
+                pbo1: "Most of our customers appreciate a seamless, developer-centric experience and easy-to-use console. Are you open to a quick overview of how our tools simplify deployment and management?",
+                dq2: "For your performance-critical applications, what is the key trade-off you are currently making between achieving low-latency/high-availability and maintaining a cost-effective environment for your GPU-intensive workloads?",
+                pbo2: "Can I share how our Bare Metal balances cost and performance?"
+},
+            "Education and Research": {
+                valueDrivers: "Value Drivers: Cost-Effective HPC/GPU, Secure & Scalable, Open-Source for Collaboration. Product Focus: GPU Instances, Kubernetes, IAM.",
+                dq1: "If budget weren't a constraint, what scientific or research challenges would your team tackle if they had access to significantly more computational (GPU) power?",
+                pbo1: "Many companies are concerned about long-term vendor lock-in and rising egress costs. Would it be helpful to discuss how our open-source ecosystem helps customers avoid those challenges?",
+                dq2: "Regarding your HPC and GPU projects, how effectively is your current Kubernetes environment balancing the need for cost-effective scaling with the security and access control required for collaborative work?",
+                pbo2: "Can I explain our GPU instances for secure HPC environments?"
+},
+            "Government and Public Sector": {
+                valueDrivers: "Value Drivers: Strict Data Sovereignty (European Cloud), SecNumCloud Readiness, Compliance. Product Focus: Private Cloud, Dedicated Servers.",
+                dq1: "In your digital transformation roadmap, what are the primary risks or hurdles 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 trying to manage your core infrastructure needs?",
+                pbo2: "Can I show you our SecNumCloud-ready Private Cloud?"
+},
+            "Cyber": {
+                valueDrivers: "Value Drivers: Data Sovereignty as Defense, Private Networking, AI/ML for Threat Detection, Transparent Billing. Product Focus: Private Network (VPC), Bare Metal, AI Tools.",
+                dq1: "How is your team utilizing (or planning to utilize) AI and European-local data processing to enhance your real-time threat detection and response capabilities?",
+                pbo1: "I often hear that predictable billing and cost efficiency are key concerns when scaling. May I share a few ways Scaleway ensures complete cost transparency compared to US hyperscalers?",
+                dq2: "What is the current level of confidence in your existing private networking setup regarding its ability to leverage AI/ML for threat detection while firmly upholding your data sovereignty principles?",
+                pbo2: "Can I share how Bare Metal + VPC enhances security?"
+},
+            "Manufacturing": {
+                valueDrivers: "Value Drivers: Edge Computing (IoT Data), AI/ML for Predictive Maintenance, Open-Source Integration. Product Focus: Edge Computing, AI Tools, 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 and rising egress costs. 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 at the edge, what is the biggest technical roadblock you encounter regarding data storage, processing, or open-source integration?",
+                pbo2: "Can I show you our Edge solutions for predictive maintenance?"
+},
+            "Energy": {
+                valueDrivers: "Value Drivers: Sustainability, AI/ML for Grid Optimization, Data Sovereignty. Product Focus: AI Tools, 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 successful has your team been in deploying AI/ML tools for initiatives like grid optimization while also adhering to strict data sovereignty mandates?",
+                pbo2: "Can I share how our AI tools optimize energy grids?"
+},
+            "Logistics": {
+                valueDrivers: "Value Drivers: Edge Computing (Real-time Tracking), AI/ML for Optimization, Transparent Billing. Product Focus: Edge Computing, Managed Databases, AI Tools.",
+                dq1: "If you could achieve a 5% improvement in route efficiency through real-time AI analysis, how quickly would that translate into measurable fuel and labor cost savings?",
+                pbo1: "I often hear that predictable billing and cost efficiency are key concerns when scaling. May I share a few ways Scaleway ensures complete cost transparency compared to US hyperscalers?",
+                dq2: "In your real-time tracking and Edge Computing projects, how are you ensuring both fast, reliable data processing and clear, transparent billing when leveraging AI/ML for optimization?",
+                pbo2: "Can I show our Edge + AI solution with clear pricing?"
+},
+            "Transport": {
+                valueDrivers: "Value Drivers: Low-Latency, HPC for Simulation, Developer-Centric Tools. Product Focus: Edge Computing, GPU Instances, HPC.",
+                dq1: "How satisfied are your engineering teams with the current cost and turnaround time of running large-scale simulations for new vehicle development or autonomous systems?",
+                pbo1: "Most of our customers appreciate a seamless, developer-centric experience and easy-to-use console. Are you open to a quick overview of how our tools simplify deployment and management?",
+                dq2: "For your high-stakes HPC simulations, where are you currently seeing the most significant constraints on achieving optimal low-latency performance and providing your developers with the best tools?",
+                pbo2: "Can I share our GPU instances for low-latency simulation?"
+},
+            "Technology/SaaS": {
+                valueDrivers: "Value Drivers: Developer-Centric Tools, Cost-Effectiveness for Scale-ups, Open-Source Agility, Transparent Billing. Product Focus: 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 across different environments?",
+                pbo1: "Many companies are concerned about long-term vendor lock-in and rising egress costs. Would it be helpful to discuss how our open-source ecosystem helps customers avoid those challenges?",
+                dq2: "As a scale-up, how are you balancing the need for rapid open-source agility and developer-centric tools with the challenge of maintaining long-term cost-effectiveness and transparent billing across your infrastructure?",
+                pbo2: "Can I show you our cost-effective Kubernetes for scale-ups?"
+},
+            // NEW CATEGORY ADDED: Startup
+            "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, GPU Instances (for early AI development).",
+                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 often hear that predictable billing and cost efficiency are key concerns when scaling. May I share a few ways Scaleway ensures complete cost transparency compared to US hyperscalers?",
+                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: "Can we discuss avoiding lock-in with our open ecosystem?"
+}
+        };
+        function updateContent() {
+            const selector = document.getElementById('industry-selector');
+            const industry = selector.value;
+            // Check if the default placeholder is selected
+            if (!industry || industry === 'placeholder') {
+                document.getElementById('dynamic-area').classList.add('hidden');
+                document.getElementById('initial-message').classList.remove('hidden');
+                return;
+            }
+            const data = INDUSTRY_DATA[industry];
+            // Update the dynamic content elements
+            document.getElementById('industry-title').textContent = industry;
+            // 1. Value Drivers & Product Focus
+            const valueDriversElement = document.getElementById('value-drivers');
+            if (data.valueDrivers) {
+                valueDriversElement.innerHTML = data.valueDrivers.replace(/Value Drivers: (.*?)\. Product Focus: (.*?)\./s, (match, drivers, focus) => {
+                    return `<p class="font-semibold text-lg mb-2 text-primary">Value Drivers:</p><p class="text-gray-300 mb-4">${drivers}</p>
+                            <p class="font-semibold text-lg mb-2 text-primary">Product Focus:</p><p class="text-gray-300">${focus}</p>`;
+                });
+            } else {
+                valueDriversElement.innerHTML = '';
+            }
+            // 2. Discovery Questions & Openers
+            document.getElementById('dq1').textContent = data.dq1;
+            document.getElementById('pbo1').textContent = data.pbo1;
+            document.getElementById('dq2').textContent = data.dq2;
+            document.getElementById('pbo2').textContent = data.pbo2;
+            // Toggle visibility
+            document.getElementById('initial-message').classList.add('hidden');
+            document.getElementById('dynamic-area').classList.remove('hidden');
+        }
+        // Function to export data as PDF
+        function exportToPDF() {
+            const industry = document.getElementById('industry-selector').value;
+            const valueDrivers = document.getElementById('value-drivers').textContent;
+            const dq1 = document.getElementById('dq1').textContent;
+            const dq2 = document.getElementById('dq2').textContent;
+            // Create PDF document
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            // Add title
+            doc.setFontSize(20);
+            doc.setTextColor(85, 33, 148); // #552194
+            doc.text(`Pod Value Mapper - ${industry}`, 105, 20, { align: 'center' });
+            // Add value drivers section
+            doc.setFontSize(16);
+            doc.setTextColor(85, 33, 148);
+            doc.text('Value Proposition & Product Focus', 15, 40);
+            doc.setFontSize(12);
+            doc.setTextColor(0, 0, 0);
+            const valueLines = doc.splitTextToSize(valueDrivers, 180);
+            doc.text(valueLines, 15, 50);
+            // Add discovery questions
+            doc.setFontSize(16);
+            doc.setTextColor(85, 33, 148);
+            doc.text('Discovery Questions', 15, 100);
+            // Question 1
+            doc.setFontSize(14);
+            doc.text('1:', 15, 110);
+            doc.setFont('normal');
+            doc.setFontSize(12);
+            doc.text(dq1, 25, 110);
+            // Question 2
+            doc.setFontSize(14);
+            doc.text('2:', 15, 130);
+            doc.setFont('normal');
+            doc.setFontSize(12);
+            doc.text(dq2, 25, 130);
+            // Save the PDF
+            doc.save(`McGPT_ValueMapper_${industry.replace(/\s+/g, '_')}.pdf`);
+        }
+// Initialize to ensure the hidden/shown states are correct on load
+        window.onload = updateContent;
     </script>
 </body>
 </html>