Make text easier to read, move background images to right of screen'

index.html

@@ -40,16 +40,16 @@
     body::before {
         content: "";
         background-image: url('https://huggingface.co/spaces/DjayChucko/valuevortex-navigator/resolve/main/images/Gemini_Generated_Image_r9rw8yr9rw8yr9rw.png');
-        background-size: cover;
-        background-position: center;
+        background-size: contain;
+        background-position: right center;
         background-repeat: no-repeat;
-        background-attachment: fixed;
-        position: absolute;
+        position: fixed;
         top: 0;
-        left: 0;
         right: 0;
-        bottom: 0;
+        width: 50%;
+        height: 100%;
         z-index: -1;
+        opacity: 0.8;
     }
 </style>
 <!-- Header -->
@@ -94,38 +94,31 @@
 </div>
         </div>
     </header>
-
     <!-- Hero Section -->
     <section class="flex-grow">
         <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">
+                    <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-lg mb-8 text-gray-600 dark:text-gray-300">
+                    <p class="text-xl mb-8 text-gray-200 dark:text-gray-100 font-medium">
                         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-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md font-medium transition-colors">
+                        <a href="value-mapper.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
                             Start Mapping
                         </a>
-                        <a href="#features" class="border border-primary text-primary hover:bg-primary/10 px-4 py-2 rounded-md font-medium transition-colors">
+                        <a href="#features" class="border-2 border-primary text-white hover:bg-primary/10 px-6 py-3 rounded-lg font-medium transition-colors shadow-lg">
                             Scorecard
                         </a>
-</div>
-                </div>
-                <div class="md:w-1/2 flex justify-center">
-                    <div class="relative w-full max-w-md">
-                        <div class="absolute -top-6 -left-6 w-32 h-32 rounded-full bg-secondary/20 blur-xl"></div>
-                        <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-primary/20 blur-xl"></div>
                     </div>
                 </div>
-</div>
+                <div class="md:w-1/2"></div>
+            </div>
         </div>
     </section>
-
-    <!-- Features Section -->
+<!-- Features Section -->
     <section id="features" class="py-16 bg-gray-100/80 dark:bg-gray-800/80 backdrop-blur-sm">
 <div class="container mx-auto px-4">
             <h2 class="text-3xl font-bold text-center mb-12">Our Strategic Toolkit</h2>

value-mapper.html

@@ -40,16 +40,16 @@
     body::before {
         content: "";
         background-image: url('https://huggingface.co/spaces/DjayChucko/valuevortex-navigator/resolve/main/images/Gemini_Generated_Image_r9rw8yr9rw8yr9rw.png');
-        background-size: cover;
-        background-position: center;
+        background-size: contain;
+        background-position: right center;
         background-repeat: no-repeat;
-        background-attachment: fixed;
-        position: absolute;
+        position: fixed;
         top: 0;
-        left: 0;
         right: 0;
-        bottom: 0;
+        width: 50%;
+        height: 100%;
         z-index: -1;
+        opacity: 0.8;
     }
 </style>
 <!-- Navigation Bar (Updated for four pages) -->
@@ -77,14 +77,14 @@
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
             
             <!-- Introduction Section -->
-            <div class="text-center mb-10 bg-gray-800 p-8 rounded-2xl shadow-2xl border-t-4 border-sc-primary hover:border-sc-accent2 transition-all duration-300">
-                <h1 class="text-4xl sm:text-5xl font-heading font-extrabold text-sc-accent2 mb-3 leading-tight">
-                    Pod Value Mapper
-                </h1>
-                <p class="text-lg text-gray-300">
-                    Your essential tool for qualification and value articulation.
-                </p>
-                <div class="my-4 h-0.5 w-1/4 mx-auto bg-gradient-to-r from-transparent via-sc-primary to-transparent"></div>
+                <div class="text-center mb-10 bg-gray-800/90 p-8 rounded-2xl shadow-2xl border-t-4 border-sc-primary hover:border-sc-accent2 transition-all duration-300 backdrop-blur-sm">
+                    <h1 class="text-4xl sm:text-5xl font-heading font-extrabold text-white mb-3 leading-tight">
+                        Pod Value Mapper
+                    </h1>
+                    <p class="text-xl text-gray-200 font-medium">
+                        Your essential tool for qualification and value articulation.
+                    </p>
+<div class="my-4 h-0.5 w-1/4 mx-auto bg-gradient-to-r from-transparent via-sc-primary to-transparent"></div>
                 <p class="text-lg text-gray-300 mb-4">
                     Identify pain points and frame conversations around Scaleway's key values:
                 </p>
@@ -101,14 +101,14 @@
                 </div>
             </div>
             <!-- Industry Selector -->
-            <div class="mb-10 p-6 bg-gradient-to-tr from-sc-primary to-sc-secondary rounded-xl shadow-xl no-print hover:shadow-2xl transition-shadow duration-300">
-<label for="industry-selector" class="block text-xl font-bold text-white mb-3">
-                    Select Your Industry Sector:
-                </label>
-                <div class="relative">
-                    <select id="industry-selector" onchange="updateContent()" 
-                        class="block w-full py-3 px-4 pr-10 border border-transparent rounded-lg text-xl font-semibold text-sc-primary focus:ring-4 focus:ring-sc-accent2 focus:border-sc-accent2 transition duration-200 shadow-inner">
-                        <option value="placeholder" disabled selected class="text-gray-500">
+                <div class="mb-10 p-6 bg-gradient-to-tr from-sc-primary to-sc-secondary rounded-xl shadow-xl no-print hover:shadow-2xl transition-shadow duration-300 backdrop-blur-sm">
+                    <label for="industry-selector" class="block text-2xl font-bold text-white mb-4">
+                        Select Your Industry Sector:
+                    </label>
+                    <div class="relative">
+                        <select id="industry-selector" onchange="updateContent()" 
+                            class="block w-full py-4 px-6 pr-12 border-2 border-white/20 rounded-xl text-xl font-semibold text-white bg-gray-900/50 focus:ring-4 focus:ring-sc-accent2 focus:border-sc-accent2 transition duration-200 shadow-lg">
+<option value="placeholder" disabled selected class="text-gray-500">
                             --- Choose an Industry to Map Value ---
                         </option>
                         <option value="Financial Services and Insurance">Financial Services and Insurance</option>
@@ -131,37 +131,37 @@
             </div>
 
             <!-- Dynamic Content Area -->
-            <div id="initial-message" class="text-center p-12 rounded-xl bg-gray-800/50 text-gray-400 border-2 border-dashed border-gray-700 hover:border-sc-primary transition-colors duration-300">
-<p class="text-lg">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p>
+            <div id="initial-message" class="text-center p-12 rounded-xl bg-gray-800/80 text-gray-300 border-2 border-dashed border-gray-600 hover:border-sc-primary transition-colors duration-300 backdrop-blur-sm">
+                <p class="text-xl 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 backdrop-blur-sm">
+<div id="dynamic-area" class="hidden space-y-8 backdrop-blur-sm">
                 <!-- Industry Title -->
                 <h2 id="industry-title" class="text-3xl font-heading font-bold text-sc-accent2 text-center pt-4">
                     <span class="bg-gradient-to-r from-sc-primary to-sc-accent2 bg-clip-text text-transparent"></span>
                 </h2>
                 <!-- Section 1: Value Drivers & Product Focus -->
-                <div class="bg-gray-800/80 p-6 rounded-xl shadow-lg border-l-4 border-sc-secondary backdrop-blur-sm">
-                    <h3 class="text-2xl font-heading font-bold mb-4 text-sc-accent1">Value Proposition & Product Focus</h3>
-                    <div id="value-drivers" class="space-y-4 text-gray-300">
+                <div class="bg-gray-800/90 p-8 rounded-xl shadow-lg border-l-4 border-sc-secondary backdrop-blur-sm">
+                    <h3 class="text-2xl font-heading font-bold mb-6 text-white">Value Proposition & Product Focus</h3>
+                    <div id="value-drivers" class="space-y-4 text-gray-200 text-lg">
 <!-- Content will be injected here -->
                     </div>
                 </div>
                 <!-- Section 2: Discovery Questions & Openers -->
                 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     <!-- Discovery Question 1 -->
-                    <div class="bg-gray-800/80 p-6 rounded-xl shadow-lg border-l-4 border-sc-accent1 backdrop-blur-sm hover:border-sc-secondary transition-all duration-300">
-                        <h3 class="text-xl font-heading font-bold mb-3 text-sc-accent1">Discovery Question 1</h3>
-                        <p id="dq1" class="text-gray-300 italic mb-4"></p>
-                        <h4 class="font-bold text-sm uppercase text-gray-400 mb-1">Permission-Based Opener 1</h4>
-                        <p id="pbo1" class="text-sc-accent1 font-medium"></p>
+                    <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg border-l-4 border-sc-accent1 backdrop-blur-sm hover:border-sc-secondary transition-all duration-300">
+                        <h3 class="text-xl font-heading font-bold mb-4 text-white">Discovery Question 1</h3>
+                        <p id="dq1" class="text-gray-200 italic mb-6 text-lg"></p>
+                        <h4 class="font-bold text-md uppercase text-gray-300 mb-2">Permission-Based Opener 1</h4>
+                        <p id="pbo1" class="text-white font-medium text-lg"></p>
                     </div>
 
                     <!-- Discovery Question 2 -->
-                    <div class="bg-gray-800/80 p-6 rounded-xl shadow-lg border-l-4 border-sc-accent2 backdrop-blur-sm hover:border-sc-primary transition-all duration-300">
-                        <h3 class="text-xl font-heading font-bold mb-3 text-sc-accent2">Discovery Question 2</h3>
-                        <p id="dq2" class="text-gray-300 italic mb-4"></p>
-                        <h4 class="font-bold text-sm uppercase text-gray-400 mb-1">Permission-Based Opener 2</h4>
-                        <p id="pbo2" class="text-sc-accent2 font-medium"></p>
+                    <div class="bg-gray-800/90 p-6 rounded-xl shadow-lg border-l-4 border-sc-accent2 backdrop-blur-sm hover:border-sc-primary transition-all duration-300">
+                        <h3 class="text-xl font-heading font-bold mb-4 text-white">Discovery Question 2</h3>
+                        <p id="dq2" class="text-gray-200 italic mb-6 text-lg"></p>
+                        <h4 class="font-bold text-md uppercase text-gray-300 mb-2">Permission-Based Opener 2</h4>
+                        <p id="pbo2" class="text-white font-medium text-lg"></p>
                     </div>
 </div>
                 <!-- Call-to-Action / Export -->