Spaces:

DjayChucko
/

EnablingSales

Running

App Files Files

DjayChucko commited on Sep 30, 2025

Commit

b84d67b

verified ·

1 Parent(s): 05726e7

Manual changes saved

Browse files

Files changed (1) hide show

index.html +169 -148

index.html CHANGED Viewed

@@ -31,166 +31,180 @@
             @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
         }
         .hamburger-line {
-            @apply w-6 h-0.5 bg-current 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">
-                        <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>
-    <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-transparent">your</span> game
-                    </h1>
-<p class="text-xl mb-8 text-white dark:text-white font-light">
-McGPT is here to assist you with strategic tools to qualify and quantify better, onboard more effectively, and implement winning sales strategies.
-                    </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>
-                    </div>
                 </div>
-                <div class="md:w-1/2"></div>
             </div>
         </div>
-    </section>
-    <section id="features" class="py-16 bg-purple-800 backdrop-blur-sm">
-<div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">Our Strategic Toolkit</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 dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
-                    <div class="w-12 h-12 rounded-lg bg-primary/10 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-600 dark:text-gray-300">Qualify leads effectively by mapping their values to your solutions.</p>
-                </a>
-                <a href="about.html" class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
-                    <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center mb-4">
-                        <i data-feather="users" class="text-secondary"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-2">Deal Scoring</h3>
-                    <p class="text-gray-600 dark:text-gray-300">Utilise our MEDDICC Scorecard to drive deals and improve forecasting accuracy.</p>
-                </a>
-                <a href="strategy.html" class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
-                    <div class="w-12 h-12 rounded-lg bg-primary/10 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">Sales Strategy</h3>
-                    <p class="text-gray-600 dark:text-gray-300">Implement our proven value-centric sales methodology.</p>
-                </a>
-                <div class="bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md card-hover">
-                    <div class="w-12 h-12 rounded-lg bg-secondary/10 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-600 dark:text-gray-300">Enroll in eLearning training courses to raise your sales game and become an elite seller.</p>
                 </div>
             </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 lookign 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-600 dark:text-gray-300 mt-2 text-sm">
                     Navigating your sales success with AI since 2023
-</p>
                 </div>
-                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h3>
-                        <ul class="space-y-2">
-                            <li><a href="about.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Onboarding</a></li>
-                            <li><a href="strategy.html" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Strategy</a></li>
-                            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Blog</a></li>
-                        </ul>
-                    </div>
-                    <div>
-                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h3>
-                        <ul class="space-y-2">
-                            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">About</a></li>
-                            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Careers</a></li>
-                            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Contact</a></li>
-                        </ul>
-                    </div>
-                    <div class="col-span-2 md:col-span-1">
-                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">Connect</h3>
-                        <div class="flex space-x-4">
-                            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
-                                <i data-feather="twitter"></i>
-                            </a>
-                            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
-                                <i data-feather="linkedin"></i>
-                            </a>
-                            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">
-                                <i data-feather="github"></i>
-                            </a>
-                        </div>
                     </div>
                 </div>
             </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>&copy; 2023 McGPT Navigator. All rights reserved.</p>
-</div>
         </div>
     </footer>
@@ -200,30 +214,37 @@ Learn More
         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');
             }
         });
@@ -231,4 +252,4 @@ Learn More
         feather.replace();
     </script>
 </body>
-</html

             @apply transition-all duration-300 hover:scale-105 hover:shadow-xl;
         }
         .hamburger-line {
+            @apply w-6 h-0.5 bg-white transition-all duration-300;
+        }
+        /* Styles for the animated hamburger icon when menu is open */
+        #mobileMenuButton.open .hamburger-line:nth-child(1) {
+            transform: rotate(45deg) translate(5px, 6px);
+        }
+        #mobileMenuButton.open .hamburger-line:nth-child(2) {
+            opacity: 0;
+        }
+        #mobileMenuButton.open .hamburger-line:nth-child(3) {
+            transform: rotate(-45deg) translate(5px, -6px);
         }
     </style>
 </head>
 <body class="bg-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">
+                    <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-transparent">your</span> game
+                </h1>
+                <p class="text-xl mb-8 text-white dark:text-white font-light">
+                    McGPT is here to assist you with strategic tools to qualify and quantify better, onboard more effectively, and implement winning sales strategies.
+                </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>
                 </div>
             </div>
+            <div class="md:w-1/2"></div>
         </div>
+    </div>
+</section>
+<section id="features" class="py-16 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">Our Strategic Toolkit</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 effectively 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">Deal Scoring</h3>
+                <p class="text-gray-300 dark:text-gray-300">Utilise our MEDDICC Scorecard to drive deals and improve forecasting accuracy.</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">Sales Strategy</h3>
+                <p class="text-gray-300 dark:text-gray-300">Implement our proven value-centric sales methodology.</p>
+            </a>
+            <div 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 to raise your sales game and become an elite seller.</p>
             </div>
         </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="grid grid-cols-2 md:grid-cols-3 gap-8">
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-400 dark:text-gray-400 uppercase tracking-wider mb-4">Resources</h3>
+                    <ul class="space-y-2">
+                        <li><a href="about.html" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">Onboarding</a></li>
+                        <li><a href="strategy.html" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">Strategy</a></li>
+                        <li><a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">Blog</a></li>
+                    </ul>
                 </div>
+                <div>
+                    <h3 class="text-sm font-semibold text-gray-400 dark:text-gray-400 uppercase tracking-wider mb-4">Company</h3>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">About</a></li>
+                        <li><a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">Careers</a></li>
+                        <li><a href="#" class="text-gray-300 dark:text-gray-300 hover:text-primary transition-colors">Contact</a></li>
+                    </ul>
+                </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>
         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.replace();
     </script>
 </body>
+</html>