Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 8, 2025

Commit

8f9ffe1

verified ·

1 Parent(s): 749931f

Manual changes saved

Browse files

Files changed (2) hide show

intel.html +234 -121
scorecard.html +6 -6

intel.html CHANGED Viewed

@@ -4,189 +4,302 @@
     <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',
-        theme: {
-            extend: {
-                colors: {
-                    primary: '#6366f1',
-                    secondary: '#8b5cf6',
-                }
-            }
-        }
       }
     </script>
     <style>
         body { font-family: 'Poppins', sans-serif; }
         .nav-link.active {
             font-weight: 600;
-            border-bottom: 2px solid #8b5cf6;
         }
-        .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;
         }
-        #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] 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 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="value-mapper.html" class="nav-link py-2 px-1 text-white hover:text-purple-300 transition-colors">Mapper</a>
-                <a href="scorecard.html" class="nav-link py-2 px-1 text-white hover:text-purple-300 transition-colors">Scorecard</a>
-                <a href="strategy.html" class="nav-link py-2 px-1 text-white hover:text-purple-300 transition-colors">Method</a>
-                <a href="academy.html" class="nav-link py-2 px-1 text-white hover:text-purple-300 transition-colors">Academy</a>
-                <a href="intel.html" class="nav-link py-2 px-1 text-white hover:text-purple-300 transition-colors">Market</a>
-</nav>
             <div class="flex items-center space-x-4">
-                <button id="themeToggle" class="p-2 rounded-full text-white">
-                    <i data-feather="moon"></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">Mapper</a>
-        <a href="scorecard.html" class="nav-link text-2xl text-white">Scorecard</a>
-        <a href="strategy.html" class="nav-link text-2xl text-white">Method</a>
-        <a href="academy.html" class="nav-link text-2xl text-white">Academy</a>
-        <a href="intel.html" class="nav-link text-2xl text-white">Market</a>
-</div>
-</div>
-<main class="flex-grow">
-    <section class="py-16 sm:py-24">
-        <div class="container mx-auto px-4">
-            <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 text-white">
-                        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>
-                    <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-[#9B5CEB] hover:bg-purple-500 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg text-center">
-                            Pod Value Mapper
-                        </a>
-                        <a href="scorecard.html" class="bg-purple-500/50 border border-purple-400 hover:bg-purple-500/70 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg text-center">
-                            MEDDICC Scorecard
-                        </a>
-<a href="intel.html" class="bg-indigo-600 border border-indigo-700 hover:bg-indigo-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg text-center">
-                            Market Mapper
-                        </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-white">
-                A strategic toolkit for <span class="bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">ELITE</span> Sales!
-            </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/10 text-white rounded-xl p-6 shadow-lg card-hover backdrop-blur-sm border border-white/10">
-                    <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
-                        <i data-feather="map" class="text-purple-300"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2">Value Mapping</h3>
-                    <p class="text-purple-200">Qualify leads <strong class="text-white font-medium">effectively</strong> by mapping what they value to Scaleway differentiation.</p>
-                </a>
-                <a href="scorecard.html" class="block bg-white/10 text-white rounded-xl p-6 shadow-lg card-hover backdrop-blur-sm border border-white/10">
-                    <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
-                        <i data-feather="check-square" class="text-purple-300"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2">Value Scoring</h3>
-                    <p class="text-purple-200">Utilise our MEDDICC Scorecard to build <strong class="text-white font-medium">real urgency</strong> and improve forecasting.</p>
-                </a>
-                <a href="strategy.html" class="block bg-white/10 text-white rounded-xl p-6 shadow-lg card-hover backdrop-blur-sm border border-white/10">
-                    <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
-                        <i data-feather="trending-up" class="text-purple-300"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2">Value-Centric</h3>
-                    <p class="text-purple-200">Learn, perfect & execute Scaleway's proven <strong class="text-white font-medium">value-centric</strong> sales methodology.</p>
-                </a>
-                <a href="https://scaleway.360learning.com/" class="block bg-white/10 text-white rounded-xl p-6 shadow-lg card-hover backdrop-blur-sm border border-white/10">
-                    <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
-                        <i data-feather="bar-chart-2" class="text-purple-300"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2">Sales Academy</h3>
-                    <p class="text-purple-200">Enroll in eLearning courses to stay sharp, uncover more value and become an <strong class="text-white font-medium">ELITE</strong> seller.</p>
-                </a>
-            </div>
         </div>
-    </section>
 </main>
-<footer class="bg-purple-800/80 backdrop-blur-sm border-t border-purple-700/50">
     <div class="container mx-auto px-4 py-6">
-        <div class="text-center text-sm text-purple-300">
-            <p>&copy; 2025 McGPT. All rights reserved.</p>
         </div>
     </div>
 </footer>
 <script>
     feather.replace();
-    // --- Mobile Menu Toggle ---
     const mobileMenuButton = document.getElementById('mobileMenuButton');
     const mobileMenu = document.getElementById('mobileMenu');
     mobileMenuButton.addEventListener('click', () => {
         mobileMenu.classList.toggle('hidden');
         mobileMenuButton.classList.toggle('open');
-        document.body.classList.toggle('overflow-hidden');
     });
-    // --- 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>

     <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>Competitive Positioning Mapper</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <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;
+        }
+        .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 #9B5CEB;
         }
+        select, input[type="search"] {
+            -webkit-appearance: none; -moz-appearance: none; appearance: none;
         }
+        select {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.75rem center;
+            background-size: 1.25rem;
         }
+        .dark select {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
         }
     </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 py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">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="intel.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Market</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-purple-600 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 py-2 px-1 text-gray-600 dark:text-gray-300">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>
+                <a href="intel.html" class="nav-link active py-2 px-1 text-gray-600 dark:text-gray-300">Market</a>
+            </div>
+        </div>
     </div>
 </header>
+<main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700">
+    <div class="container mx-auto px-4 py-12">
+        <div class="bg-white/50 dark:bg-gray-900/50 backdrop-blur-md p-6 sm:p-8 rounded-2xl shadow-2xl mb-8">
+            <div class="text-center">
+                <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white mb-3 leading-tight">Market Mapper</h1>
+                <p class="text-gray-700 dark:text-gray-300 max-w-2xl mx-auto mb-8">Quickly identify competitor alternatives for Scaleway products or find the Scaleway equivalent for a competitor's service.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                 <div>
+                    <label for="scaleway-product-selector" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Competitor by Scaleway Product</label>
+                    <select id="scaleway-product-selector" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-200 shadow-lg">
+                        <option value="">- Select a Scaleway Product -</option>
+                    </select>
                 </div>
+                <div>
+                    <label for="competitor-search" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Scaleway Product by Competitor</label>
+                    <input type="search" id="competitor-search" placeholder="e.g., EC2, S3, Blob Storage..." class="block w-full py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-200 shadow-lg">
                 </div>
             </div>
         </div>
+        <div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm">
+            <p class="text-lg font-medium">Select a product or search for a competitor to begin.</p>
         </div>
+        <div id="results-area" class="hidden space-y-6">
+            </div>
+    </div>
 </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>
+    // --- UI & THEME LOGIC ---
     feather.replace();
+    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');
+    }
     const mobileMenuButton = document.getElementById('mobileMenuButton');
     const mobileMenu = document.getElementById('mobileMenu');
     mobileMenuButton.addEventListener('click', () => {
         mobileMenu.classList.toggle('hidden');
         mobileMenuButton.classList.toggle('open');
     });
+    // --- COMPETITOR DATA ---
+    const COMPETITOR_DATA = [
+        { Category: "Compute & Virtual Machines", AWS: "EC2", Azure: "Virtual Machines", GCP: "Compute Engine", OracleOCI: "Compute", Scaleway: "Instances", OVHcloud: "Public Cloud", Outscale: "Virtual Machines" },
+        { Category: "Compute & Virtual Machines", AWS: "Lightsail", Azure: "Azure VMware Solution", GCP: "App Engine", OracleOCI: "VMware Solution", Scaleway: "Bare Metal", OVHcloud: "Dedicated Servers", Outscale: "Bare Metal" },
+        { Category: "Compute & Virtual Machines", AWS: "ECS (Containers)", Azure: "Container Instances", GCP: "Cloud Run", OracleOCI: "Container Engine", Scaleway: "Serverless", OVHcloud: "VPS", Outscale: "Kubernetes" },
+        { Category: "Compute & Virtual Machines", AWS: "EKS (Kubernetes)", Azure: "AKS", GCP: "GKE", OracleOCI: "OKE", Scaleway: "Kubernetes", OVHcloud: "Managed K8s", Outscale: "OKS" },
+        { Category: "Storage", AWS: "S3", Azure: "Blob Storage", GCP: "Cloud Storage", OracleOCI: "Object Storage", Scaleway: "Object Storage", OVHcloud: "Object Storage", Outscale: "Object Storage" },
+        { Category: "Storage", AWS: "EBS", Azure: "Disk Storage", GCP: "Persistent Disk", OracleOCI: "Block Volumes", Scaleway: "Block Storage", OVHcloud: "Block Storage", Outscale: "Block Storage" },
+        { Category: "Storage", AWS: "EFS", Azure: "Azure Files", GCP: "Filestore", OracleOCI: "File Storage", Scaleway: "File Storage", OVHcloud: "File Storage", Outscale: "File Storage" },
+        { Category: "Storage", AWS: "Glacier", Azure: "Archive Storage", GCP: "Coldline Storage", OracleOCI: "Archive Storage", Scaleway: "Archive Storage", OVHcloud: "Archive Storage", Outscale: "Archive Storage" },
+        { Category: "Databases", AWS: "RDS", Azure: "Azure SQL Database", GCP: "Cloud SQL", OracleOCI: "Database", Scaleway: "Managed DB", OVHcloud: "Managed DB", Outscale: "Managed DB" },
+        { Category: "Databases", AWS: "DynamoDB", Azure: "Cosmos DB", GCP: "Firestore", OracleOCI: "NoSQL", Scaleway: "NoSQL", OVHcloud: "NoSQL", Outscale: "NoSQL" },
+        { Category: "Databases", AWS: "Aurora", Azure: "SQL Managed Instance", GCP: "AlloyDB", OracleOCI: "Autonomous DB", Scaleway: "SQL", OVHcloud: "SQL", Outscale: "SQL" },
+        { Category: "Databases", AWS: "Redshift", Azure: "Synapse Analytics", GCP: "BigQuery", OracleOCI: "Data Warehouse", Scaleway: "Data Warehouse", OVHcloud: "Data Warehouse", Outscale: "Data Warehouse" },
+        { Category: "Networking", AWS: "VPC", Azure: "Virtual Network", GCP: "VPC", OracleOCI: "VCN", Scaleway: "VPC", OVHcloud: "VPC", Outscale: "VPC" },
+        { Category: "Networking", AWS: "CloudFront", Azure: "Front Door", GCP: "Cloud CDN", OracleOCI: "CDN", Scaleway: "CDN", OVHcloud: "CDN", Outscale: "CDN" },
+        { Category: "Networking", AWS: "Direct Connect", Azure: "ExpressRoute", GCP: "Interconnect", OracleOCI: "FastConnect", Scaleway: "Direct Connect", OVHcloud: "Direct Connect", Outscale: "Direct Connect" },
+        { Category: "Networking", AWS: "Route 53", Azure: "Traffic Manager", GCP: "Cloud DNS", OracleOCI: "DNS", Scaleway: "DNS", OVHcloud: "DNS", Outscale: "DNS" },
+        { Category: "AI/ML & Analytics", AWS: "SageMaker", Azure: "Machine Learning", GCP: "Vertex AI", OracleOCI: "AI Services", Scaleway: "AI Suite", OVHcloud: "AI Tools", Outscale: "AI Services" },
+        { Category: "AI/ML & Analytics", AWS: "Redshift", Azure: "Synapse Analytics", GCP: "BigQuery", OracleOCI: "Analytics Cloud", Scaleway: "Analytics", OVHcloud: "Analytics", Outscale: "Analytics" },
+        { Category: "AI/ML & Analytics", AWS: "Athena", Azure: "Data Lake Analytics", GCP: "Dataflow", OracleOCI: "Data Flow", Scaleway: "Data Flow", OVHcloud: "Data Flow", Outscale: "Data Flow" },
+        { Category: "AI/ML & Analytics", AWS: "QuickSight", Azure: "Power BI", GCP: "Looker", OracleOCI: "Analytics", Scaleway: "BI Tools", OVHcloud: "BI Tools", Outscale: "BI Tools" },
+        { Category: "Security & Identity", AWS: "IAM", Azure: "Entra ID", GCP: "Cloud IAM", OracleOCI: "IAM", Scaleway: "IAM", OVHcloud: "IAM", Outscale: "IAM" },
+        { Category: "Security & Identity", AWS: "GuardDuty", Azure: "Security Center", GCP: "Security Command Center", OracleOCI: "Security Monitoring", Scaleway: "Security", OVHcloud: "Security", Outscale: "Security" },
+        { Category: "Security & Identity", AWS: "KMS", Azure: "Key Vault", GCP: "Cloud KMS", OracleOCI: "Vault", Scaleway: "KMS", OVHcloud: "KMS", Outscale: "KMS" },
+        { Category: "Security & Identity", AWS: "WAF & Shield", Azure: "DDoS Protection", GCP: "Cloud Armor", OracleOCI: "WAF", Scaleway: "WAF", OVHcloud: "WAF", Outscale: "WAF" },
+        { Category: "Serverless & Event-Driven", AWS: "Lambda", Azure: "Functions", GCP: "Cloud Functions", OracleOCI: "Functions", Scaleway: "Serverless", OVHcloud: "Serverless", Outscale: "Serverless" },
+        { Category: "Serverless & Event-Driven", AWS: "EventBridge", Azure: "Event Grid", GCP: "Eventarc", OracleOCI: "Events", Scaleway: "Events", OVHcloud: "Events", Outscale: "Events" },
+        { Category: "Serverless & Event-Driven", AWS: "Step Functions", Azure: "Logic Apps", GCP: "Workflows", OracleOCI: "Workflows", Scaleway: "Workflows", OVHcloud: "Workflows", Outscale: "Workflows" },
+        { Category: "DevOps & Management", AWS: "CloudFormation", Azure: "Resource Manager", GCP: "Deployment Manager", OracleOCI: "Resource Manager", Scaleway: "Terraform", OVHcloud: "Terraform", Outscale: "Terraform" },
+        { Category: "DevOps & Management", AWS: "CodePipeline", Azure: "DevOps", GCP: "Cloud Build", OracleOCI: "DevOps", Scaleway: "CI/CD", OVHcloud: "CI/CD", Outscale: "CI/CD" },
+        { Category: "DevOps & Management", AWS: "CloudWatch", Azure: "Monitor", GCP: "Operations Suite", OracleOCI: "Monitoring", Scaleway: "Monitoring", OVHcloud: "Monitoring", Outscale: "Monitoring" },
+        { Category: "DevOps & Management", AWS: "Systems Manager", Azure: "Automation", GCP: "Config", OracleOCI: "Management", Scaleway: "Management", OVHcloud: "Management", Outscale: "Management" },
+        { Category: "Edge & IoT", AWS: "IoT Core", Azure: "IoT Hub", GCP: "Cloud IoT Core", OracleOCI: "IoT", Scaleway: "IoT", OVHcloud: "IoT", Outscale: "IoT" },
+        { Category: "Edge & IoT", AWS: "Local Zones", Azure: "Edge Zones", GCP: "Edge Network", OracleOCI: "Edge", Scaleway: "Edge", OVHcloud: "Edge", Outscale: "Edge" },
+        { Category: "Edge & IoT", AWS: "Wavelength", Azure: "Private 5G", GCP: "Mobile Edge", OracleOCI: "Edge", Scaleway: "Edge", OVHcloud: "Edge", Outscale: "Edge" },
+        { Category: "Miscellaneous & Specialized", AWS: "Outposts", Azure: "Azure Stack", GCP: "Anthos", OracleOCI: "Dedicated Region", Scaleway: "Dedibox", OVHcloud: "Bare Metal Pod", Outscale: "Sovereign Cloud" },
+        { Category: "Miscellaneous & Specialized", AWS: "WorkSpaces", Azure: "Virtual Desktop", GCP: "BeyondCorp", OracleOCI: "Virtual Desktop", Scaleway: "Virtual Desktop", OVHcloud: "Virtual Desktop", Outscale: "Virtual Desktop" },
+        { Category: "Miscellaneous & Specialized", AWS: "AppSync", Azure: "API Management", GCP: "Apigee", OracleOCI: "API Gateway", Scaleway: "API Gateway", OVHcloud: "API Gateway", Outscale: "API Gateway" },
+        { Category: "Miscellaneous & Specialized", AWS: "Amplify", Azure: "Static Web Apps", GCP: "Firebase Hosting", OracleOCI: "Static Hosting", Scaleway: "Static Hosting", OVHcloud: "Static Hosting", Outscale: "Static Hosting" }
+    ];
+    // --- DOM ELEMENTS ---
+    const scalewaySelector = document.getElementById('scaleway-product-selector');
+    const competitorSearch = document.getElementById('competitor-search');
+    const resultsArea = document.getElementById('results-area');
+    const initialMessage = document.getElementById('initial-message');
+    // --- LOGIC ---
+    // 1. Populate Scaleway Products Dropdown
+    function populateScalewayDropdown() {
+        const scalewayProducts = [...new Set(COMPETITOR_DATA.map(item => item.Scaleway))].sort();
+        scalewayProducts.forEach(product => {
+            const option = document.createElement('option');
+            option.value = product;
+            option.textContent = product;
+            scalewaySelector.appendChild(option);
+        });
+    }
+    // 2. Handle Scaleway Product Selection
+    scalewaySelector.addEventListener('change', () => {
+        const selectedProduct = scalewaySelector.value;
+        competitorSearch.value = ''; // Clear other input
+        if (!selectedProduct) {
+            resultsArea.classList.add('hidden');
+            initialMessage.classList.remove('hidden');
+            return;
+        }
+        const matchingRows = COMPETITOR_DATA.filter(row => row.Scaleway === selectedProduct);
+        let html = `<h2 class="text-2xl font-bold text-white text-center">Competitors for ${selectedProduct}</h2>`;
+        matchingRows.forEach(row => {
+            html += `
+                <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
+                    <h3 class="text-lg font-bold text-purple-600 dark:text-purple-400 mb-4">Category: ${row.Category}</h3>
+                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
+            `;
+            const providers = { AWS: row.AWS, Azure: row.Azure, GCP: row.GCP, OracleOCI: row.OracleOCI, OVHcloud: row.OVHcloud, Outscale: row.Outscale };
+            for (const [provider, product] of Object.entries(providers)) {
+                html += `
+                    <div>
+                        <span class="font-semibold text-gray-700 dark:text-gray-300">${provider}:</span>
+                        <span class="text-gray-600 dark:text-gray-400">${product}</span>
+                    </div>
+                `;
+            }
+            html += `</div></div>`;
+        });
+        resultsArea.innerHTML = html;
+        initialMessage.classList.add('hidden');
+        resultsArea.classList.remove('hidden');
+        feather.replace();
+        // Scroll to results
+        resultsArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+    // 3. Handle Competitor Search Input
+    competitorSearch.addEventListener('input', () => {
+        const searchTerm = competitorSearch.value.trim().toLowerCase();
+        scalewaySelector.value = ''; // Clear other input
+        if (!searchTerm) {
+            resultsArea.classList.add('hidden');
+            initialMessage.classList.remove('hidden');
+            return;
+        }
+        const results = [];
+        const providers = ["AWS", "Azure", "GCP", "OracleOCI", "OVHcloud", "Outscale"];
+        COMPETITOR_DATA.forEach(row => {
+            providers.forEach(provider => {
+                if (row[provider] && row[provider].toLowerCase().includes(searchTerm)) {
+                    results.push({
+                        provider,
+                        competitorProduct: row[provider],
+                        scalewayProduct: row.Scaleway,
+                        category: row.Category
+                    });
+                }
+            });
+        });
+        let html = `<h2 class="text-2xl font-bold text-white text-center">Results for "${competitorSearch.value}"</h2>`;
+        if (results.length > 0) {
+            results.forEach(res => {
+                html += `
+                    <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
+                        <p class="text-gray-600 dark:text-gray-400 mb-2"><span class="font-bold text-gray-800 dark:text-gray-200">${res.competitorProduct}</span> (${res.provider})</p>
+                        <p class="text-purple-600 dark:text-purple-400 font-bold text-lg">Scaleway Equivalent: ${res.scalewayProduct}</p>
+                        <p class="text-xs text-gray-500 dark:text-gray-500 mt-2">Category: ${res.category}</p>
+                    </div>
+                `;
+            });
         } else {
+            html += `<p class="text-center text-white/80 mt-4">No matching competitor products found.</p>`;
         }
+        resultsArea.innerHTML = html;
+        initialMessage.classList.add('hidden');
+        resultsArea.classList.remove('hidden');
+        feather.replace();
+        // Scroll to results
+        resultsArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
     });
+    // --- INITIALIZATION ---
+    window.onload = () => {
+        populateScalewayDropdown();
+    };
 </script>
 </body>

scorecard.html CHANGED Viewed

@@ -44,17 +44,17 @@
 <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 py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition-colors">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="intel.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">Market</a>
                 <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
                 <a href="academy.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">Academy</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>
@@ -67,12 +67,12 @@
         </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 py-2 px-1 text-gray-600 dark:text-gray-300">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 active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
                 <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Academy</a>
-                <a href="intel.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Market</a>
-</div>
         </div>
     </div>
 </header>

 <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="value-mapper.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="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">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="intel.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">Market</a>
                 <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
                 <a href="academy.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">Academy</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>
         </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="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">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="intel.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Market</a>
                 <a href="scorecard.html" class="nav-link active py-2 px-1 text-gray-800 dark:text-gray-100">Scorecard</a>
                 <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300">Academy</a>
+            </div>
         </div>
     </div>
 </header>