create the page of success-stories

This commit is contained in:
2026-01-08 11:28:52 +05:30
parent 8162326ff9
commit 78217c4736
28 changed files with 546 additions and 15 deletions

View File

@@ -163,7 +163,7 @@
</div>
<div class="w-full bg-[#1a1a1a] py-20">
<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">
@@ -186,21 +186,21 @@
</div>
<!-- Profile Cards -->
<div class="max-w-7xl mx-auto mt-12 flex flex-col md:flex-row justify-between">
<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-[32rem]">
<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.png' %}"
alt="Roland Hofmann"
class="w-16 h-16 rounded-full object-cover" />
alt="Roland Hofmann"
class="w-20 h-20 rounded-full object-cover" />
<div>
<h1 class="text-white text-lg font-semibold">Roland Hofmann</h1>
<p class="text-gray-300 text-sm">1. FC Nürnberg, U16w</p>
<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>
@@ -221,17 +221,17 @@
</div>
<!-- Profile 2 -->
<div class="flex items-center justify-between bg-[#6d78ff] p-4 rounded-2xl w-full md:w-[32rem]">
<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.png' %}"
alt="Roland Hofmann"
class="w-16 h-16 rounded-full object-cover" />
<img src="{% static 'images/febian.png' %}"
alt="Roland Hofmann"
class="w-20 h-20 rounded-full object-cover" />
<div>
<h1 class="text-white text-lg font-semibold">Roland Hofmann</h1>
<p class="text-gray-300 text-sm">1. FC Nürnberg, U16w</p>
<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>
@@ -250,8 +250,193 @@
</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.png' %}" alt="Story 1" class="w-[28rem] h-[16rem] object-cover rounded-[4rem]" />
<img src="{% static 'images/player2.png' %}" 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, 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>
@@ -264,4 +449,9 @@
{% endblock %}