Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <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> | |
| <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> | |
| /* --- UNIFIED HEADER STYLES --- */ | |
| .nav-link.active { | |
| @apply text-primary font-medium border-b-2 border-primary; | |
| } | |
| .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); | |
| } | |
| /* --- PAGE-SPECIFIC STYLES --- */ | |
| 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-sky-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="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Mapper</a> | |
| <a href="intel.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Products</a> | |
| <a href="scorecard.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Scorecard</a> | |
| <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Method</a> | |
| <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary 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> | |
| <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-purple-600 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-gray-900 bg-opacity-95 backdrop-blur-sm"> | |
| <div class="flex flex-col items-center justify-center h-full space-y-8"> | |
| <a href="index.html" class="nav-link text-3xl text-white">Home</a> | |
| <a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a> | |
| <a href="intel.html" class="nav-link text-3xl text-white">Products</a> | |
| <a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a> | |
| <a href="strategy.html" class="nav-link text-3xl text-white">Method</a> | |
| <a href="academy.html" class="nav-link text-3xl text-white">Academy</a> | |
| </div> | |
| </div> | |
| <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 leading-tight">Product Mapper</h1> | |
| <div class="flex items-center justify-center mb-3"> | |
| <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/3D_POP-Instances-Illustration-3D.png" alt="MEDDICC Illustration" class="w-40 mx-auto my-4"> | |
| </div> | |
| <p class="text-gray-700 dark:text-gray-300 max-w-2xl mx-auto mb-8">Match competitive products and identify key differentiators instantly.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <div class="text-center"> | |
| <label for="scaleway-product-selector" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Find Competitors 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 text-center"> | |
| <option value="">- Select a Scaleway Product -</option> | |
| </select> | |
| </div> | |
| <div class="text-center"> | |
| <label for="competitor-search" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Find Scaleway Equivalent 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 text-center"> | |
| </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-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"> | |
| <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm"> | |
| Strategic Tools Enabling Elite Sales | |
| </p> | |
| </div> | |
| <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>© 2025 McGPT. Always Be Connecting.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // --- UNIFIED HEADER & THEME LOGIC --- | |
| 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'); | |
| }); | |
| 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 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'); | |
| } | |
| }); | |
| feather.replace(); | |
| // --- PAGE-SPECIFIC MAPPER LOGIC --- | |
| const COMPETITOR_DATA = [ | |
| { ScalewayProduct: "Dedibox", Category: "Bare Metal (Legacy)", AWS: "(Legacy)", Azure: "(Legacy)", GCP: "(Legacy)", OVHcloud: "Dedicated Servers (Eco range)", Nebius: "N/A", Outscale: "N/A", Ionos: "Dedicated Servers", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Price & Reliability: For long-term workloads, Dedibox offers unbeatable monthly pricing on reliable dedicated hardware. A cornerstone of our offerings, trusted for years." }, | |
| { ScalewayProduct: "Apple silicon", Category: "Bare Metal (Specialized)", AWS: "EC2 Mac Instances", Azure: "N/A", GCP: "N/A", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Unique European CI/CD: The leading European cloud offering for native macOS/iOS development. Build and test your Apple apps in a sovereign environment with predictable, cost-effective hardware." }, | |
| { ScalewayProduct: "Elastic Metal", Category: "Bare Metal", AWS: "EC2 Bare Metal", Azure: "BareMetal Infra", GCP: "Bare Metal Solution", OVHcloud: "Dedicated Servers (Advance, HG)", Nebius: "Bare Metal (GPU only)", Outscale: "Bare Metal Servers", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "API-Driven & Flexible: Unlike traditional dedicated servers, our bare metal is fully API-driven and can be billed hourly, offering cloud-like flexibility with the raw power of dedicated hardware." }, | |
| { ScalewayProduct: "Production Instances", Category: "Virtual Machines", AWS: "EC2 (M, T series)", Azure: "VMs (D, B series)", GCP: "Compute Engine", OVHcloud: "Public Cloud Instances", Nebius: "Virtual Machines", Outscale: "Cloud Instances (ECU)", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Full Ecosystem & Simplicity: Beyond just a VM, get a high-performance instance that's part of a complete, easy-to-use cloud ecosystem. Simpler to navigate and price than hyperscalers and more PaaS-rich than other EU providers." }, | |
| { ScalewayProduct: "Cost-Optimized Instances", Category: "Virtual Machines", AWS: "EC2 (T series)", Azure: "VMs (B-series)", GCP: "Compute Engine", OVHcloud: "Public Cloud Instances", Nebius: "Virtual Machines", Outscale: "Cloud Instances (ECU)", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Predictable Low Cost: Ideal for dev/test, we offer a consistently low price without the complex credit systems or the volatility of the hyperscaler 'spot' market." }, | |
| { ScalewayProduct: "GPU Instances", Category: "Virtual Machines (GPU)", AWS: "EC2 (P, G series)", Azure: "VMs (N series)", GCP: "Compute Engine", OVHcloud: "Public Cloud GPU", Nebius: "GPU Instances", Outscale: "GPU Instances", Ionos: "GPU Cloud Server", Coreweave: "GPU Instances", CleverCloud: "N/A", KeyDifferentiator: "Sovereign AI Ecosystem: Access the latest NVIDIA hardware in a sovereign European cloud. Unlike specialized GPU providers, we offer a complete ecosystem (storage, DBs, networking) to support your entire AI application, not just the training." }, | |
| { ScalewayProduct: "Kubernetes Kapsule", Category: "Containers", AWS: "EKS", Azure: "AKS", GCP: "GKE", OVHcloud: "Managed Kubernetes", Nebius: "Managed Kubernetes", Outscale: "Managed Kubernetes", Ionos: "Managed Kubernetes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Cost-Effective & True Multi-Cloud: A CNCF-certified Kubernetes service at a fraction of the hyperscaler cost. Our free Kosmos tool lets you manage multi-cloud clusters from a single control plane—a unique feature no other European provider offers." }, | |
| { ScalewayProduct: "Serverless Functions", Category: "Serverless", AWS: "Lambda", Azure: "Functions", GCP: "Cloud Functions", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Pioneering European Serverless: The most mature European serverless functions platform. Built on open-source Knative for portability, fully integrated with our ecosystem (e.g., triggering from Object Storage events)." }, | |
| { ScalewayProduct: "Serverless Containers", Category: "Serverless", AWS: "Fargate", Azure: "Container Instances", GCP: "Cloud Run", OVHcloud: "N/A", Nebius: "Serverless Containers", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Open Standards & Simplicity: Deploy containers without managing servers. Our developer-friendly platform is built on open standards, offering a simpler, more portable alternative to hyperscaler-proprietary systems." }, | |
| { ScalewayProduct: "Container Registry", Category: "Containers", AWS: "ECR", Azure: "ACR", GCP: "Artifact Registry", OVHcloud: "Managed Private Registry", Nebius: "Container Registry", Outscale: "N/A", Ionos: "Container Registry", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Integrated & Simple: A private, secure Docker registry fully integrated with our Kubernetes and Serverless ecosystem. Simple, predictable pricing based purely on storage." }, | |
| { ScalewayProduct: "Object Storage", Category: "Storage", AWS: "S3", Azure: "Blob Storage", GCP: "Cloud Storage", OVHcloud: "S3 Object Storage", Nebius: "Object Storage", Outscale: "S3 Object Storage", Ionos: "S3 Object Storage", Coreweave: "N/A", CleverCloud: "Cellar S3", KeyDifferentiator: "Sovereign & Predictable Egress: Fully S3-compatible, hosted in Europe for data sovereignty. Our key differentiator is a simpler, more predictable pricing model with often significantly cheaper egress fees than the competition." }, | |
| { ScalewayProduct: "Glacier (Cold Storage)", Category: "Storage", AWS: "S3 Glacier", Azure: "Blob Archive", GCP: "Cloud Archive", OVHcloud: "Cloud Archive", Nebius: "Cold Storage", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Low-Cost European Archive: The most cost-effective solution for long-term data archiving and backups within the EU, ensuring compliance and DR at an unbeatable price point." }, | |
| { ScalewayProduct: "Block Storage", Category: "Storage", AWS: "EBS", Azure: "Disk Storage", GCP: "Persistent Disk", OVHcloud: "Block Storage", Nebius: "Block Storage", Outscale: "Block Storage", Ionos: "Block Storage", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "High Performance & Flexible: SSD-based block storage for your instances. Offers more predictable IOPS performance for the price compared to the complex, tiered offerings from other providers." }, | |
| { ScalewayProduct: "Managed Databases (PG/MySQL)", Category: "Databases", AWS: "RDS", Azure: "Azure DB", GCP: "Cloud SQL", OVHcloud: "Public Cloud Databases", Nebius: "Managed DBs", Outscale: "N/A", Ionos: "Managed DBs", Coreweave: "N/A", CleverCloud: "Managed DBs", KeyDifferentiator: "Simple, Reliable, Integrated: Get a production-ready database in minutes without the feature overload and complex pricing of hyperscalers. It's the perfect balance of performance and simplicity for developers." }, | |
| { ScalewayProduct: "Managed Database for Redis™", Category: "Databases", AWS: "ElastiCache", Azure: "Cache for Redis", GCP: "Memorystore", OVHcloud: "N/A", Nebius: "Managed Redis", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "Managed Redis", KeyDifferentiator: "Performance Caching: Deploy a high-performance in-memory cache with one click. Simple, instance-based pricing makes it a straightforward choice for real-time applications." }, | |
| { ScalewayProduct: "Serverless SQL DB", Category: "Databases", AWS: "Aurora Serverless", Azure: "SQL DB Serverless", GCP: "(No direct equivalent)", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Unique European Offering: A fully serverless SQL database that scales to zero. Perfect for apps with unpredictable traffic, you only pay for what you use. A unique, cost-saving product in the European market." }, | |
| { ScalewayProduct: "Private Networks (VPC)", Category: "Networking", AWS: "VPC", Azure: "Virtual Network", GCP: "VPC", OVHcloud: "vRack", Nebius: "Virtual Private Cloud", Outscale: "Virtual Private Cloud", Ionos: "Private LAN", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Free & Secure: Completely isolate your infrastructure in a private network, free of charge. A core security feature that other clouds often monetize through add-ons and complex gateway pricing." }, | |
| { ScalewayProduct: "Load Balancer", Category: "Networking", AWS: "ELB", Azure: "Load Balancer", GCP: "Cloud Load Balancing", OVHcloud: "Load Balancer", Nebius: "Load Balancer", Outscale: "Load Balancer", Ionos: "Load Balancer", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Affordable High Availability: Distribute traffic to ensure high availability for your applications. Our load balancers are easy to configure and significantly more cost-effective than hyperscaler equivalents." }, | |
| { ScalewayProduct: "Web Hosting", Category: "PaaS", AWS: "Amplify, Lightsail", Azure: "Static Web Apps", GCP: "Firebase Hosting", OVHcloud: "Web Hosting", Nebius: "N/A", Outscale: "N/A", Ionos: "Web Hosting", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Simple & All-in-One: The easiest way to host your sites. Unlike IaaS providers, we provide an all-inclusive package with email and databases, perfect for users who aren't cloud experts." }, | |
| { ScalewayProduct: "Transactional Email", Category: "PaaS", AWS: "SES", Azure: "Communication Services", GCP: "(Partners)", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "European Email Delivery: Ensure your application's emails are sent from European servers, improving deliverability and GDPR compliance. A rare PaaS offering among European IaaS providers." }, | |
| { ScalewayProduct: "IoT Hub", Category: "PaaS", AWS: "IoT Core", Azure: "IoT Hub", GCP: "IoT Core", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Secure & Scalable IoT: A straightforward, cost-effective, and sovereign solution for your European IoT deployments. An integrated PaaS product most IaaS providers lack." }, | |
| { ScalewayProduct: "IAM", Category: "Security & Account", AWS: "IAM", Azure: "Azure AD", GCP: "Cloud IAM", OVHcloud: "User Management", Nebius: "IAM", Outscale: "IAM", Ionos: "User Management", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Granular Control: A fundamental security tool included free with your account. Manage users, groups, and permissions with fine-grained control across all Scaleway products." }, | |
| { ScalewayProduct: "Cockpit (Monitoring)", Category: "Management Tools", AWS: "CloudWatch", Azure: "Monitor", GCP: "Cloud's ops suite", OVHcloud: "Metrics Data Platform", Nebius: "Monitoring", Outscale: "N/A", Ionos: "Monitoring", Coreweave: "N/A", CleverCloud: "Metrics", KeyDifferentiator: "Integrated Observability: Gain a unified view of your infrastructure's health and performance. Cockpit is included by default, providing easy monitoring without the complex setup of third-party tools." }, | |
| { ScalewayProduct: "Managed Inference", Category: "AI / ML", AWS: "SageMaker", Azure: "Azure ML", GCP: "Vertex AI", OVHcloud: "AI Deploy", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Effortless & Sovereign Model Serving: Deploy trained models with a fully managed API. We handle the infrastructure and scaling in a sovereign environment, offering a simpler and more integrated experience than setting up your own GPU servers." } | |
| ]; | |
| 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'); | |
| function populateScalewayDropdown() { | |
| const scalewayProducts = [...new Set(COMPETITOR_DATA.map(item => item.ScalewayProduct))].sort(); | |
| scalewayProducts.forEach(product => { | |
| const option = document.createElement('option'); | |
| option.value = product; | |
| option.textContent = product; | |
| scalewaySelector.appendChild(option); | |
| }); | |
| } | |
| function displayResults(html) { | |
| resultsArea.innerHTML = html; | |
| initialMessage.classList.add('hidden'); | |
| resultsArea.classList.remove('hidden'); | |
| resultsArea.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| } | |
| scalewaySelector.addEventListener('change', () => { | |
| const selectedProduct = scalewaySelector.value; | |
| competitorSearch.value = ''; | |
| if (!selectedProduct) { | |
| resultsArea.classList.add('hidden'); | |
| initialMessage.classList.remove('hidden'); | |
| return; | |
| } | |
| const row = COMPETITOR_DATA.find(r => r.ScalewayProduct === selectedProduct); | |
| if (!row) return; | |
| let html = `<div class="bg-slate-900/70 backdrop-blur-sm p-6 rounded-xl shadow-lg">`; | |
| html += `<h2 class="text-2xl font-bold text-white mb-4">Comparison for: <span class="text-purple-400">${selectedProduct}</span></h2>`; | |
| html += `<p class="text-sm text-gray-400 mb-6">Category: ${row.Category}</p>`; | |
| // Competitor Equivalents Section | |
| html += `<div class="mb-6"><h3 class="text-lg font-semibold text-white mb-3 flex items-center"><i data-feather="shuffle" class="w-5 h-5 mr-2 text-cyan-400"></i>Competitor Equivalents</h3><div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-base">`; | |
| const competitors = { AWS: row.AWS, Azure: row.Azure, GCP: row.GCP, OVHcloud: row.OVHcloud, Nebius: row.Nebius, Outscale: row.Outscale, Ionos: row.Ionos, Coreweave: row.Coreweave, CleverCloud: row.CleverCloud }; | |
| for (const [provider, product] of Object.entries(competitors)) { | |
| html += `<div><span class="font-semibold text-gray-100">${provider}:</span> <span class="text-gray-300">${product || 'N/A'}</span></div>`; | |
| } | |
| html += `</div></div>`; | |
| // Key Differentiation Section (MOVED HERE) | |
| html += `<div class="border-t border-purple-800 pt-6"><h3 class="text-lg font-semibold text-white mb-3 flex items-center"><i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-400"></i>Key Differentiation & Talking Points</h3><p class="text-gray-200 bg-purple-900/30 p-4 rounded-lg">${row.KeyDifferentiator}</p></div>`; | |
| html += `</div>`; | |
| displayResults(html); | |
| feather.replace(); | |
| }); | |
| competitorSearch.addEventListener('input', () => { | |
| const searchTerm = competitorSearch.value.trim().toLowerCase(); | |
| scalewaySelector.value = ''; | |
| if (!searchTerm) { | |
| resultsArea.classList.add('hidden'); | |
| initialMessage.classList.remove('hidden'); | |
| return; | |
| } | |
| const results = []; | |
| const providers = ["AWS", "Azure", "GCP", "OVHcloud", "Nebius", "Outscale", "Ionos", "Coreweave", "CleverCloud"]; | |
| COMPETITOR_DATA.forEach(row => { | |
| providers.forEach(provider => { | |
| if (row[provider] && row[provider].toLowerCase().includes(searchTerm)) { | |
| results.push({ | |
| provider: provider, | |
| competitorProduct: row[provider], | |
| scalewayProduct: row.ScalewayProduct, | |
| category: row.Category, | |
| differentiator: row.KeyDifferentiator | |
| }); | |
| } | |
| }); | |
| }); | |
| let html = `<h2 class="text-2xl font-bold text-white text-center mb-6">Results for "${competitorSearch.value}"</h2>`; | |
| if (results.length > 0) { | |
| results.forEach(res => { | |
| html += `<div class="bg-slate-900/70 backdrop-blur-sm p-6 rounded-xl shadow-lg">`; | |
| html += `<p class="text-gray-300 text-lg mb-2">Match for <span class="font-bold text-white">${res.competitorProduct}</span> (${res.provider})</p>`; | |
| html += `<p class="text-purple-400 font-bold text-2xl">Scaleway Equivalent: ${res.scalewayProduct}</p>`; | |
| html += `<p class="text-sm text-gray-400 mt-2 mb-4">Category: ${res.category}</p>`; | |
| html += `<div class="border-t border-purple-800 pt-4"><h4 class="font-semibold text-white mb-2 flex items-center"><i data-feather="zap" class="w-4 h-4 mr-2 text-yellow-400"></i>Talking Point</h4><p class="text-gray-200">${res.differentiator}</p></div>`; | |
| html += `</div>`; | |
| }); | |
| } else { | |
| html += `<p class="text-center text-white/80 mt-4">No matching competitor products found.</p>`; | |
| } | |
| displayResults(html); | |
| feather.replace(); | |
| }); | |
| window.onload = () => { | |
| populateScalewayDropdown(); | |
| }; | |
| </script> | |
| </body> | |
| </html> |