create the page of success-stories
This commit is contained in:
@@ -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 %}
|
||||
Reference in New Issue
Block a user