create the section

templates/index.html

@@ -26,7 +26,7 @@
     <!-- CTA Button -->
     <div class="mt-6 pointer-events-auto">
       <a href="https://app.b-42.com/"
-         class="inline-block bg-white text-black px-8 py-3 rounded-full font-semibold transition-all hover:bg-gray-200">
+         class="inline-block bg-white text-black px-8 py-3 rounded-lg font-semibold transition-all hover:bg-gray-200">
         Boost your game
       </a>
     </div>
@@ -184,7 +184,7 @@
   </div>
 </div>
 
-<div class="w-full bg-[#5b6bf5] h-[10rem]"></div>
+<!-- <div class="w-full bg-[#5b6bf5] h-[10rem]"></div> -->
 
 
 <!-- Floating Social Bar -->
@@ -215,6 +215,97 @@
 
 
 
+<div
+  class="relative w-full py-20 px-6 bg-cover bg-center"
+  style="background-image: url('/static/images/boyball.jpeg');"
+>
+  <!-- Dark overlay (optional but recommended for readability) -->
+  <div class="absolute inset-0 "></div>
+
+  <!-- Content -->
+  <div class="relative max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12 z-10">
+
+    <!-- LEFT SIDE (empty or optional image removed since bg is used) -->
+    <div class="md:w-1/2"></div>
+
+    <!-- RIGHT CONTENT -->
+    <div class="md:w-1/2 text-right text-white">
+
+      <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-3 py-1">
+        Mentale Power
+      </h1>
+      <br />
+      <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-3 py-1 mt-3">
+        Durch aktive Entspannung
+      </h1>
+
+      <p class="text-[21px] mt-6 mb-4">
+        Du willst mental stabiler werden, souveräner unter Druck bleiben und dich
+        nach Training und Spielen schneller erholen?
+      </p>
+
+      <p class="text-[21px] mb-4">
+        In unserem 8-wöchigen Online-Präventionskurs lernst du mentale Techniken,
+        die dir helfen, deinen Fokus zu schärfen und deine Regeneration zu verbessern –
+        speziell entwickelt für Fußballer*innen.
+      </p>
+
+      <p class="text-[21px] mb-8 font-semibold">
+        Erhalte 12 Monate kostenlosen Zugang zu B42 Boost
+      </p>
+
+      <!-- IMAGE BUTTON -->
+    
+
+    </div>
+  </div>
+</div>
+
+
+<section class="w-full bg-[#6f7cf7] py-24 px-4">
+  <div class="max-w-4xl mx-auto text-center text-black">
+
+    <!-- Heading -->
+    <h1 class="text-2xl md:text-3xl font-extrabold uppercase tracking-wide mb-6">
+      Play it real – Auch in deinem Posteingang.
+    </h1>
+
+    <!-- Sub text -->
+    <p class="text-lg md:text-xl mb-4">
+      Erhalte exklusive Trainingstipps, mentale Unterstützung und Updates aus der B42
+      Arena.
+    </p>
+
+    <p class="text-lg md:text-xl mb-10">
+      Kein Spam. Nur reale Performance.
+    </p>
+
+    <!-- Email input + button -->
+    <div class="flex justify-center">
+      <div class="flex items-center bg-white rounded-full px-2 py-2 w-full max-w-xl shadow-lg">
+        
+        <input
+          type="email"
+          placeholder="E-Mail angeben"
+          class="flex-1 px-5 py-3 outline-none rounded-full text-gray-700 placeholder-gray-400"
+        />
+
+        <button
+          class="bg-black text-white px-8 py-3 rounded-full font-semibold hover:bg-gray-800 transition"
+        >
+          Anmelden
+        </button>
+
+      </div>
+    </div>
+
+  </div>
+</section>
+
+
+
+
+
 <!-- Dummy content to test scrolling -->