Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Oct 4, 2025

Commit

28dd2ea

verified ·

1 Parent(s): 8ebbdf0

Manual changes saved

Browse files

Files changed (1) hide show

index.html +70 -71

index.html CHANGED Viewed

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

     <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="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-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>
             </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>
+    </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">
                         <strong>McGPT</strong> - Strategic tools enabling elite sales.
                     </p>
                     <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="value-mapper.html" class="bg-[#9B5CEB] hover:bg-purple-500 text-white px-8 py-3 rounded-lg font-semibold transition-colors shadow-lg text-center">
                             Start Mapping
                         </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>
                     </div>
     <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">
+                Strategic Tools for <span class="bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">ELITE</span> Sales Professionals
             </h2>
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+                <a href="value-mapper.html" class="block bg-white/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 their values to your solutions.</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">Execute our 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 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 Navigator. All rights reserved.</p>
         </div>
     </div>
 <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 ---