create the section

This commit is contained in:
2026-01-08 14:46:38 +05:30
parent 29bf45cad0
commit 0cc9443e5d
5 changed files with 234 additions and 58 deletions

View File

@@ -118,7 +118,7 @@
<!-- Date + Tags -->
<div>
<div class="flex items-center gap-4 mb-4">
<div class="flex items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
@@ -133,7 +133,7 @@
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Former DFB physiotherapist now rehab partner of B42
</h3>
</div>
@@ -169,21 +169,24 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-1 mb-4">
<span class="text-gray-300 text-sm font-bold">November 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
progress
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
training
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Prove your progress
</h3>
</div>
@@ -218,21 +221,25 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Features
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Recover lika a Pro - Train. Sweat. Recover.
</h3>
</div>
@@ -268,21 +275,25 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Challenges
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
training
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Your move decides
</h3>
</div>
@@ -317,21 +328,26 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
progress
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
training
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
From professional ball to amateur training
</h3>
</div>
@@ -356,7 +372,7 @@
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/ball.png' %}"
<img src="{% static 'images/ras.png' %}"
alt="Former DFB physio"
class="w-full h-64 object-cover rounded-[4rem]"
/>
@@ -366,21 +382,24 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">September 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Features
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
training
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Avoid ankle injuries before they happen
</h3>
</div>
@@ -415,21 +434,25 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">August 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
progress
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
LET'S CLOSE THE GAP
</h3>
</div>
@@ -464,15 +487,19 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">July 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Stories
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
engagement
</span>
</div>
@@ -513,15 +540,70 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">June 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
training
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Injuries
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
</h3>
</div>
<!-- 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="images/prevents.png"
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 class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/train.jpg' %}"
alt="Former DFB physio"
class="w-full h-64 object-cover rounded-[4rem]"
/>
<!-- Content -->
<div class="p-8 flex flex-col flex-grow justify-between text-left">
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">June 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Women's football
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
training
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Injuries
</span>
</div>
@@ -562,21 +644,24 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">January 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Performance App
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
regeneration
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Patellar tendon problems - B42 can help
</h3>
</div>
@@ -598,10 +683,11 @@
</div>
</div>
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/train.jpg' %}"
<img src="{% static 'images/pattelar.jpg' %}"
alt="Former DFB physio"
class="w-full h-64 object-cover rounded-[4rem]"
/>
@@ -611,21 +697,24 @@
<!-- Date + Tags -->
<div>
<div class="flex flex-wrap items-center gap-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</span>
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-gray-300 text-sm font-bold">January 2025</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
News
Performance App
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
Injuries
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
regeneration
</span>
</div>
<!-- Title -->
<h3 class="text-white text-xl font-semibold mb-6 leading-snug">
Former DFB physio now rehab partner of B42
Achilles tendon pain - B42 can help
</h3>
</div>
@@ -646,10 +735,6 @@
</div>
</div>
<!-- Copy same card structure as many times as needed -->
</div>

BIN
static/images/boyball.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/images/down.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

BIN
static/images/ras.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

View File

@@ -26,7 +26,7 @@
<!-- 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">
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>
@@ -184,7 +184,7 @@
</div>
</div>
<div class="w-full bg-[#5b6bf5] h-[10rem]"></div>
<!-- <div class="w-full bg-[#5b6bf5] h-[10rem]"></div> -->
<!-- Floating Social Bar -->
@@ -215,6 +215,97 @@
<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 -->