{% extends 'public_base.html' %}
{% load static %}
{% block title %}
Case Studies
{% endblock %}
{% block content %}

<div class="w-full bg-[#1a1a1a] py-12">
  <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-between px-4 lg:px-8 gap-8">
    
    <!-- Text on the left -->
    <div class="flex flex-col gap-4 lg:w-1/2">
      <p class="text-indigo-500 font-semibold">Success stories</p>
      <h1 class="text-white text-6xl font-semibold leading-snug ">How B42 India delivers <br> success</h1>
      <h2 class="text-white text-xl font-medium mt-2">
       Digitalization is the key to <br>
      football training of the future
      </h2>
    </div>

    <!-- Image on the right -->
    <div class="lg:w-1/2 flex justify-end">
     <img src="{% static 'images/stoey.jpg' %}" 
     alt="Success story image" 
  class="w-full max-w-md lg:max-w-[33rem] h-60 sm:h-70 md:h-76 lg:h-[30rem] object-cover rounded-[4rem]">



</div>

  </div>
</div>


<div class="w-full bg-[#1a1a1a] py-12">
  <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-start gap-8 px-8">

    <!-- Left side: heading -->
    <div class="lg:w-1/2 flex flex-col gap-4">
      <p class="text-indigo-500 font-semibold">Success stories</p>
      <h1 class="text-white text-3xl lg:text-4xl font-bold leading-snug">
        This is how coaches & clubs use <br>
        B42 India for their team success
      </h1>
    </div>

    <!-- Right side: paragraph -->
    <div class="lg:w-1/2 text-white text-sm leading-relaxed">
      The nice thing about the team? You win together, you lose together. Nevertheless, it is annoying when the last percent is missing in the decisive game in order to be successful. With B42 India, you have the opportunity to improve your performance as a team in every part of the team and in every phase of the season. <br>
      These trainers tell you which functions they use and how.
    </div>

  </div>
</div>



<div class="bg-[#1d1d1d] py-12 px-4">

  <!-- Cards Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 justify-items-center m-auto w-[68%]">

    <!-- Card 1 -->
    <div class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
      <img src="{% static 'images/svg.png' %}"
        alt="Former DFB physio"
        class="w-full h-64 object-cover rounded-[4rem]"
      />

      <div class="py-8 px-6 flex flex-col flex-grow justify-between text-left">
        <div>
          <div class="flex flex-wrap items-center gap-3 mb-4 py-2">
            <h1 class="text-white text-2xl font-semibold">SpVgg Hankofen</h1>
          </div>

          <p class="text-white text-sm  mb-6 leading-snug">
           How a tiny village turns amateur soccer on its head.
          </p>
        </div>

        <button
          class="w-14 h-14 bg-[#d0ff23] rounded-full flex items-center justify-center hover:bg-lime-400 transition"
          aria-label="Read more"
        >
          <svg xmlns="http://www.w3.org/2000/svg"
               class="w-6 h-6 text-black"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
               stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
      <img src="{% static 'images/sv.jpg' %}"
        alt="Former DFB physio"
        class="w-full h-64 object-cover rounded-[4rem]"
      />

      <div class="py-8 px-6 flex flex-col flex-grow justify-between text-left">
        <div>
          <div class="flex flex-wrap items-center gap-3 mb-4 py-2">
            <h1 class="text-white text-2xl font-semibold">SV Eidelstedt</h1>
          </div>

          <p class="text-white text-sm  mb-6 leading-snug">
           This is how this Hamburg club is revolutionizing soccer training.
          </p>
        </div>

        <button
          class="w-14 h-14 bg-[#d0ff23] rounded-full flex items-center justify-center hover:bg-lime-400 transition"
          aria-label="Read more"
        >
          <svg xmlns="http://www.w3.org/2000/svg"
               class="w-6 h-6 text-black"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
               stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
      <img src="{% static 'images/stoey.jpg' %}"
        alt="Former DFB physio"
        class="w-full h-64 object-cover rounded-[4rem]"
      />

      <div class="py-8 px-6 flex flex-col flex-grow justify-between text-left">
        <div>
          <div class="flex flex-wrap items-center gap-3 mb-4 py-2">
            <h1 class="text-white text-2xl font-semibold">SC Pfullendorf</h1>
          </div>

           <p class="text-white text-sm  mb-6 leading-snug">
           How SC Pfullendorf benefits from B42 India with the entire club.
          </p>
        </div>

        <button
          class="w-14 h-14 bg-[#d0ff23] rounded-full flex items-center justify-center hover:bg-lime-400 transition"
          aria-label="Read more"
        >
          <svg xmlns="http://www.w3.org/2000/svg"
               class="w-6 h-6 text-black"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
               stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>

  </div>
</div>


<div class="w-full bg-[#1d1d1d] py-48">

  <!-- Top Section: Heading + Paragraph -->
  <div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-start gap-8 px-8">

    <!-- Left: Heading -->
    <div class="lg:w-1/2 flex flex-col gap-4">
      <p class="text-indigo-500 font-semibold">Interviews</p>
      <h1 class="text-white text-3xl lg:text-4xl font-bold leading-snug">
        Inspiration for effective use of B42 India
      </h1>
    </div>

    <!-- Right: Paragraph -->
    <div class="lg:w-1/2 text-white text-sm leading-relaxed">
      What actually makes good trainers stand out? They make every player better every day. But that takes time, which is scarce in team training. That's why we give you lots of tools to work on each individual's strengths and weaknesses.
      <br /><br />
      In an interview, these trainers explain how you can use these tools effectively.
    </div>

  </div>

  <!-- Profile Cards -->
  <div class="max-w-7xl mx-auto mt-12 flex flex-col md:flex-row justify-between gap-2">


    <!-- Profile 1 -->
    <div class="flex items-center justify-between bg-[#6d78ff] p-4 rounded-2xl w-full md:w-[40rem] py-10 px-10 rounded-full">
      
      <!-- Left: Image + Text -->
      <div class="flex items-center gap-4">
        <img src="{% static 'images/roland.jpg' %}" 
     alt="Roland Hofmann"
     class="w-20 h-20 rounded-full object-cover" />
        
        <div >
          <h1 class="text-white text-2xl font-semibold py-2">Roland Hofmann</h1>
          <p class="text-white text-sm font-semibold">1.FC Nürnberg, U16w</p>
        </div>
      </div>

      <!-- Right: Button -->
      <button
        class="w-14 h-14 bg-[#d0ff23] rounded-full flex items-center justify-center hover:bg-lime-400 transition"
        aria-label="Read more"
      >
        <svg xmlns="http://www.w3.org/2000/svg"
             class="w-6 h-6 text-black"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="3">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>

    <!-- Profile 2 -->
    <div class="flex items-center justify-between bg-[#6d78ff] p-4 rounded-2xl w-full md:w-[40rem] py-10 px-10 rounded-full">
      
      <!-- Left: Image + Text -->
      <div class="flex items-center gap-4">
        <img src="{% static 'images/febian.png' %}" 
     alt="Roland Hofmann"
     class="w-20 h-20 rounded-full object-cover" />
        
        <div >
          <h1 class="text-white text-2xl font-semibold py-2">Fabien Stierle</h1>
          <p class="text-white text-sm font-semibold">DFI Bad Aibling, U15m</p>
        </div>
      </div>

      <!-- Right: Button -->
      <button
        class="w-14 h-14 bg-[#d0ff23] rounded-full flex items-center justify-center hover:bg-lime-400 transition"
        aria-label="Read more"
      >
        <svg xmlns="http://www.w3.org/2000/svg"
             class="w-6 h-6 text-black"
             fill="none"
             viewBox="0 0 24 24"
             stroke="currentColor"
             stroke-width="3">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>

</div>



<div class="bg-[#1d1d1d] py-16">

  <!-- Centered Text -->
  <div class="text-center mb-12">
    <p class="text-indigo-500 font-medium">Stories</p>
    <h1 class="text-white text-3xl lg:text-[40px] font-medium leading-snug">
      Players and teams <br>tell their story
    </h1>
  </div>

  <!-- Images Row -->
<div class="flex flex-row justify-center gap-2 flex-wrap">
    <img src="{% static 'images/player1.jpg' %}" alt="Story 1" class="w-[28rem] h-[16rem] object-cover rounded-[4rem]" />
    <img src="{% static 'images/player2.jpg' %}" alt="Story 2" class="w-[28rem] h-[16rem] object-cover rounded-[4rem]" />
    <img src="{% static 'images/player3.png' %}" alt="Story 3" class="w-[28rem] h-[16rem] object-cover rounded-[4rem]" />
</div>



</div>


<div class="bg-[#1d1d1d] py-32"> <!-- background full width -->

  <div class="w-[75%] mx-auto px-8"> <!-- content width 75% and centered -->

    <!-- Cards Container -->
    <div class="flex flex-col md:flex-row gap-2 justify-center ">

      <!-- Card 1 -->
      <div class="bg-[#1d1d1d] border border-indigo-500 rounded-4xl p-12 flex flex-col gap-8 w-[28rem] h-[17rem] rounded-[4rem]">
        <p class="text-white text-sm">
          Everyone doesn't cook their own soup anymore. As a team, we work together across trainers using an app. Whether training or playing, all data is in one place.
        </p>
        <div class="flex items-center gap-6">
          <img src="{% static 'images/musa.png' %}" alt="Musa Avlayici" class="w-12 h-12 rounded-full object-cover" />
          <div class="text-white">
            <h3 class="font-semibold text-lg">Musa Avlayici</h3>
            <p class="text-sm">SC Pfullendorf, U13</p>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-[#1d1d1d] border border-indigo-500 rounded-4xl p-12 flex flex-col gap-8 w-[28rem] h-[17rem] rounded-[4rem]">
        <p class="text-white text-sm">
          Everyone doesn't cook their own soup anymore. As a team, we work together across trainers using an app. Whether training or playing, all data is in one place.
        </p>
        <div class="flex items-center gap-6">
          <div class="bg-white p-1 rounded-full">
    <img src="{% static 'images/jokhim.webp' %}" 
         alt="Joachim Kehl" 
         class="w-12 h-12 rounded-full object-cover" />
  </div>

  <!-- Text -->
  <div class="text-white">
    <h3 class="font-semibold text-lg">Joachim Kehl</h3>
    <p class="text-sm">SV Oberwolfach, Landesliga</p>
  </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-[#1d1d1d] border border-indigo-500 rounded-4xl p-12 flex flex-col gap-8 w-[28rem] h-[17rem] rounded-[4rem]">
        <p class="text-white text-sm">
          Everyone doesn't cook their own soup anymore. As a team, we work together across trainers using an app. Whether training or playing, all data is in one place.
        </p>
        <div class="flex items-center gap-6">
          <img src="{% static 'images/halfman.png' %}" alt="Musa Avlayici" class="w-12 h-12 rounded-full object-cover" />
          <div class="text-white">
            <h3 class="font-semibold text-lg">Roland Hofmann</h3>
            <p class="text-sm">1. FC Nuremberg, U16</p>
          </div>
        </div>
      </div>

    </div>

  </div>
</div>



<div class="bg-[#1d1d1d] py-16 px-8">

  <!-- Top section: Left text, Right paragraph -->
  <div class="flex flex-col lg:flex-row gap-12 w-[75%] mx-auto">
    
    <!-- Left column -->
    <div class="lg:w-1/3">
      <p class="text-indigo-500 font-semibold">Teams</p>
      <h1 class="text-white text-4xl font-bold leading-snug mt-2">
        Visionary clubs <br>trust us
      </h1>
    </div>

    <!-- Right column -->
    <div class="lg:w-2/3 text-white text-sm leading-relaxed">
      <p>
        Real innovation breaks down traditional thought patterns. For us at B42 India, digitization is the key to soccer training of the future.
      </p>
      <p class="mt-4">
        These and many other future-oriented associations are already taking this path with us.
      </p>
    </div>

  </div>

  <!-- Image grid -->
<div class="grid grid-cols-5 grid-rows-4 gap-x-2 gap-y-4 mt-12 w-[75%] mx-auto">

  <!-- Row 1 -->
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/acadmy.svg' %}" alt="Player 1" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/albera.svg' %}" alt="Player 2" class="w-28 h-28 object-cover rounded-full">
  </div>
 <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/defi.svg' %}" alt="Player 3" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/fnc.svg' %}" alt="Player 4" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/urdu.svg' %}" alt="Player 5" class="w-28 h-28 object-cover rounded-full">
  </div>

  <!-- Row 2 -->
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/w.svg' %}" alt="Player 6" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/panja.svg' %}" alt="Player 7" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/new.svg' %}" alt="Player 8" class="w-28 h-28 object-cover rounded-full">
  </div>
<div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/austria.svg' %}" alt="Player 9" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/sve.svg' %}" alt="Player 10" class="w-28 h-28 object-cover rounded-full">
  </div>

  <!-- Row 3 -->
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/fwk.svg' %}" alt="Player 11" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/ffc.svg' %}" alt="Player 12" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/sport.svg' %}" alt="Player 13" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/bush.svg' %}" alt="Player 14" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/fcunion.svg' %}" alt="Player 15" class="w-28 h-28 object-cover rounded-full">
  </div>

  <!-- Row 4 -->
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/fclock.svg' %}" alt="Player 16" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/singen.svg' %}" alt="Player 17" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/tsv.svg' %}" alt="Player 18" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/alzial.svg' %}" alt="Player 19" class="w-28 h-28 object-cover rounded-full">
  </div>
  <div class="w-62 h-60 bg-white flex items-center justify-center rounded-[4rem]">
    <img src="{% static 'images/spvgg.svg' %}" alt="Player 20" class="w-28 h-28 object-cover rounded-full">
  </div>

</div>

</div>

<div class="bg-[#1d1d1d]">
    <div class="w-full bg-[#5b6bf5] h-[10rem] rounded-[2rem] flex items-center justify-between px-8">
  <!-- Text on the left -->
  <p class="text-white text-xl font-semibold">
    Get everything your team needs to be successful
  </p>

  <!-- Button on the right -->
  <button
    class="bg-[#d0ff23] rounded-full p-4 hover:bg-lime-400 transition flex items-center justify-center animate-blink"
    aria-label="Read more"
  >
    <!-- Arrow icon SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
    </svg>
  </button>
</div>
</div>
















{% endblock %}