{% extends 'public_base.html' %}
{% load static %}
{% block content %}

<!-- Hero Section -->
<div class="relative w-full flex justify-center py-16 bg-black">

  <!-- Main Image -->
  <img src="static/images/sec-1.jpeg" alt="Soccer Player" 
       class="w-4/5 h-[50rem] md:h-[60rem] shadow-lg object-cover " />

  <!-- Overlay content (Heading, Subtitle, CTA) -->
  <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4/5 h-full flex flex-col justify-center items-center text-center pointer-events-none">
    
    <!-- Heading -->
    <h1 class="text-7xl md:text-9xl font-extrabold text-black drop-shadow-lg pointer-events-auto">
      PLAY IT REAL
    </h1>

    <!-- Subtitle -->
    <p class="text-sm md:text-lg text-black mt-4 drop-shadow-md font-bold pointer-events-auto">
      SOCCER TRAINING THAT HITS LIKE GAME DAY
    </p>

    <!-- 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-lg font-semibold transition-all hover:bg-gray-200">
        Boost your game
      </a>
    </div>
  </div>

  <!-- Image Buttons at Bottom-Left (Inside Image) -->
  <div class="absolute bottom-20 left-[15%] flex gap-4 pointer-events-auto">
    <img src="static/images/but-1.png" alt="Boost Your Game" class="h-16 md:h-20 cursor-pointer" />
    <img src="static/images/btn-2.png" alt="Another Action" class="h-16 md:h-20 cursor-pointer" />
  </div>

</div>


<!-- App Download Section -->
<div class="bg-black py-8">
  <div class="flex justify-center gap-8">
    <a href="#" class="block">
      <img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-16 w-auto" />
    </a>
    <a href="#" class="block">
      <img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-16 w-auto" />
    </a>
  </div>
</div>


<div class="bg-black text-white py-16 px-6">
  <div class="max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center gap-12">
    
    <!-- LEFT CONTENT -->
    <div class="md:w-1/2">
      <h1 class="text-2xl md:text-3xl font-bold mb-6">
        TRAIN — No excuses, just skills.
      </h1>

      <p class="text-lg text-gray-300 mb-8 ">
        Over 500 soccer specific training-sessions and individualized training-plans,
        designed to push you past your limits. Every session is tailored to your level,
        so you’re always leveling up – no matter if you’re grinding alone or with your squad.
      </p>

       <a
         href="https://app.b-42.com/"
         class="inline-block bg-[#6d7cff] hover:bg-[#5b6bf5] transition px-8 py-3 rounded-full font-semibold text-white"
       >
         Boost your game
       </a>

    </div>

    <!-- RIGHT IMAGE -->
    <div class="md:w-1/2 flex justify-center">
      <img
        src="/static/images/sec-2.jpeg"
        alt="Training Image"
        class="max-w-full  shadow-lg"
      />
    </div>

  </div>
</div>

<div class="bg-black py-16 px-6">
  <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12">

    <!-- LEFT IMAGE -->
    <div class="md:w-1/2">
      <img
        src="static/images/sec-3.jpeg"
        alt="Training Image"
        class="w-full  shadow-lg"
      />
    </div>

    <!-- RIGHT CONTENT -->
    <div class="md:w-1/2 text-black">
        
    <div class="text-right">
       <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-2 py-1">
         Sweat – Grind Harder,
       </h1>
       <br>
       <h1 class="inline-block text-3xl md:text-4xl font-bold bg-white text-black px-2 py-1 mt-3">
         flex louder.
       </h1>

      <p class="text-[21px] text-white mb-8 mt-5">
        Every drop of sweat counts. Earn SweatPoints with every drill and stack them to climb the Road to Glory. The more you grind, the higher you rise – show the world how hard you’re willing to work for your spot at the top of your league table.
       CTA Boost your game
      </p>

       <a
        href="https://app.b-42.com/"
        class="inline-block bg-black text-[#d0ff23] border-2 border-[#d0ff23]
               px-8 py-3 rounded-full font-semibold
               transition-all duration-300 hover:bg-[#d0ff23] hover:text-black"
      >
        Boost your game
      </a>
</div>


    
     
    </div>

  </div>
</div>




<div class="bg-white px-6">
  <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-12">

    <!-- LEFT IMAGE -->
   

    <!-- RIGHT CONTENT -->
    <div class="md:w-1/2 text-black">
        
    <div class="text-right">
       <h1 class="inline-block text-2xl md:text-3xl font-semibold bg-white text-black px-2 py-1">
        WIN – Turn grind into glory.
       </h1>

      <p class="text-[21px] text-black mb-8 mt-5">
        Every drop of sweat counts. Earn SweatPoints with every drill and stack them to climb the Road to Glory. The more you grind, the higher you rise – show the world how hard you’re willing to work for your spot at the top of your league table.
       CTA Boost your game
      </p>

     
</div>

     <div class="mt-[7rem]">
          <a
              href="https://app.b-42.com/"
              class="inline-block bg-[#6d7cff] hover:bg-[#5b6bf5] transition px-8 py-3 rounded-full font-semibold text-white"
            >
              Boost your game
            </a>
     </div>

    </div>

     <div class="md:w-1/2">
      <img
        src="static/images/sec-4.jpeg"
        alt="Training Image"
        class="w-full  shadow-lg"
      />
    </div>

  </div>
</div>

<!-- <div class="w-full bg-[#5b6bf5] h-[10rem]"></div> -->


<!-- Floating Social Bar -->
<div
  class="fixed right-72 top-1/2 -translate-y-1/2 z-50
         flex flex-col items-center gap-5
         bg-lime-400
         px-3 py-4
         rounded-full
         shadow-lg"
>
  <a href="#" class="text-black text-xl hover:scale-125 transition">
    <i class="fab fa-instagram"></i>
  </a>

  <a href="#" class="text-black text-xl hover:scale-125 transition">
    <i class="fab fa-youtube"></i>
  </a>

  <a href="#" class="text-black text-xl hover:scale-125 transition">
    <i class="fab fa-tiktok"></i>
  </a>

  <a href="#" class="text-black text-xl hover:scale-125 transition">
    <i class="fab fa-linkedin-in"></i>
  </a>
</div>



<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 -->





{% endblock %}