{% 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-full 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-lg 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
  id="socialBar"
  class="fixed left-5 top-24 z-50
         flex flex-col items-center gap-5
         bg-lime-400
         px-3 py-4
         rounded-full
         shadow-lg
         transition-transform duration-300 ease-out"
>
  <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>

<!-- Dummy content to test scrolling -->
<div class="h-[2000px] p-20">
  <h1 class="text-3xl font-bold">Scroll Down</h1>
</div>


<script>
  const bar = document.getElementById("socialBar");

  window.addEventListener("scroll", () => {
    const y = window.scrollY * 0.3;
    bar.style.transform = `translateY(${y}px)`;
  });
</script>





{% endblock %}