Promote version 28dd2ea to main

Promoted commit 28dd2eab293819fb1f763649749407eb05275899 to main branch

value-mapper.html

@@ -10,6 +10,7 @@
     <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',
@@ -18,18 +19,14 @@
     <style>
         body { font-family: 'Poppins', sans-serif; }
         .hamburger-line {
-             width: 20px; height: 2px;
-             transition: all 0.3s;
+             width: 20px; height: 2px; background-color: white; display: block; transition: all 0.3s;
         }
-        html:not(.dark) .hamburger-line { background-color: #4a5568; }
-        html.dark .hamburger-line { background-color: white; }
-        
         .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;
+            border-bottom: 2px solid #9B5CEB;
         }
         select {
             -webkit-appearance: none; -moz-appearance: none; appearance: none;
@@ -54,7 +51,7 @@
             </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 active py-2 px-1 text-gray-800 dark:text-gray-100">Mapper</a>
+                <a href="value-mapper.html" class="nav-link active 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 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>
@@ -63,7 +60,7 @@
                     <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">
+                <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>
@@ -73,7 +70,7 @@
         <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 active py-2 px-1 text-gray-800 dark:text-gray-100">Mapper</a>
+                <a href="value-mapper.html" class="nav-link active 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>
@@ -81,19 +78,19 @@
     </div>
 </header>
 
-<main class="flex-grow bg-gray-100 dark:bg-gray-900">
+<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-purple-900 dark:bg-purple-900 p-6 sm:p-8 rounded-2xl shadow-lg mb-8">
-<div class="text-center">
-                <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-white mb-3 leading-tight">Pod Value Mapper</h1>
-<div class="flex justify-center mb-6">
-                <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/PublicEducationPod-Illustration-transparent.png" alt="Pod Value Mapper" class="h-48 w-auto invert">
-</div>
+        <div class="bg-white dark:bg-gray-800 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">Pod Value Mapper</h1>
+                <div class="flex justify-center mb-6">
+                    <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/PublicEducationPod-Illustration-transparent.png" alt="Pod Value Mapper" class="h-48 w-auto">
+                </div>
             </div>
             <div class="max-w-md mx-auto">
-                <select id="industry-selector" onchange="updateContent()" class="block w-full py-3 px-4 pr-10 border border-white/50 rounded-xl text-base font-semibold text-white bg-purple-800/30 focus:ring-2 focus:ring-white focus:outline-none transition duration-200 shadow-sm">
-                    <option value="placeholder" disabled selected class="text-purple-200">- Choose Industry to Map -</option>
-<option value="Financial Services and Insurance">Financial Services and Insurance</option>
+                <select id="industry-selector" onchange="updateContent()" 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="placeholder" disabled selected class="text-gray-500">- Choose Industry to Map -</option>
+                    <option value="Financial Services and Insurance">Financial Services and Insurance</option>
                     <option value="Healthcare and Biotechnology">Healthcare and Biotechnology</option>
                     <option value="E-commerce and Retail">E-commerce and Retail</option>
                     <option value="Media and Entertainment">Media and Entertainment</option>
@@ -111,12 +108,12 @@
             </div>
         </div>
 
-        <div id="initial-message" class="text-center p-12 rounded-xl bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-300 dark:border-gray-700">
+        <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">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
         </div>
 
         <div id="dynamic-area" class="hidden space-y-8">
-            <h2 id="industry-title" class="text-3xl font-heading font-bold text-gray-800 dark:text-white text-center pt-4"></h2>
+            <h2 id="industry-title" class="text-3xl font-heading font-bold text-white text-center pt-4"></h2>
             
             <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg">
                 <h3 class="text-xl font-heading font-bold mb-6 text-gray-800 dark:text-white">Recommended Value Proposition & Suggested Product Focus</h3>
@@ -132,7 +129,7 @@
                 </div>
                 <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg">
                     <h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Discovery Question 2</h3>
-                    <p id="dq2" class="text-gray-600 dark:text-gray-400 italic mb-6 text-base"></p>
+                    <p id=dq2 class="text-gray-600 dark:text-gray-400 italic mb-6 text-base"></p>
                     <h4 class="font-bold text-sm uppercase text-gray-500 dark:text-gray-400 mb-2">Permission-Based Opener 2</h4>
                     <p id="pbo2" class="text-gray-800 dark:text-white font-medium text-base"></p>
                 </div>