anurag.r/B42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev_khushi' into dev_anurag

Browse Source
This commit is contained in:
anurag.r
2026-01-08 09:52:34 +05:30
parent cc5123c057 108003da5e
commit 1369e9c968
19 changed files with 1139 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

721
at_django_boilerplate/core/templates/company/blog.html
View File

@@ -0,0 +1,721 @@
{% extends 'public_base.html' %}
{% load static %}
{% block content %}
<div class="bg-[#1d1d1d] py-12 px-4">
<div class="max-w-5xl mx-auto text-center">
<!-- Main heading -->
<h1 class="text-4xl md:text-5xl font-extrabold text-white mb-4">
Blog
</h1>
<!-- Description paragraph -->
<p class="text-white text-lg md:text-xl leading-relaxed max-w-3xl mx-auto mb-12">
On our blog, we provide you with in-depth insights into everything that counts on the pitch: effective training management, physical fitness, positive mentality, adapted diet and dealing with injuries.
</p>
<!-- Subheading -->
<h2 class="text-3xl md:text-4xl font-semibold text-white mb-8 ">
Most recent posts
</h2>
<!-- Posts container -->
<div class="flex flex-col md:flex-row gap-8 justify-center">
<!-- Post 1 -->
<div class="bg-[#303033] rounded-[4rem] shadow-lg max-w-sm flex flex-col overflow-hidden">
<!-- Image with all corners rounded -->
<img src="{% static 'images/prov.png' %}" alt="Recover like a Pro" class="w-full object-cover rounded-[4rem]" />
<div class="p-6 flex flex-col flex-grow justify-between text-left">
<p class="text-gray-300 text-sm mb-2 font-bold">November 5, 2025</p>
<h3 class="text-white text-xl font-semibold mb-4">Prove your Progress</h3>
<button
class="self-start bg-[#d0ff23] rounded-full p-4 hover:bg-lime-400 transition"
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>
<!-- Post 2 -->
<div class="bg-[#303033] rounded-[4rem] shadow-lg max-w-sm flex flex-col overflow-hidden">
<!-- Image with all corners rounded -->
<img src="{% static 'images/recover.png' %}" alt="Recover like a Pro" class="w-full object-cover rounded-[4rem]" />
<div class="p-6 flex flex-col flex-grow justify-between text-left">
<p class="text-gray-300 text-sm mb-2 font-bold">November 3, 2025</p>
<h3 class="text-white text-xl font-semibold mb-4">Recover like a Pro - Train. Sweat. Recover.</h3>
<button
class="self-start bg-[#d0ff23] rounded-full p-4 hover:bg-lime-400 transition"
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>
</div>
</div>
</div>
<div class="bg-[#1d1d1d] py-12 px-4 ">
<!-- Title -->
<h1 class="text-4xl font-semibold text-center mb-10 text-white">All posts</h1>
<!-- Categories -->
<div class="flex flex-wrap gap-3 justify-center mb-16 w-[90%] m-auto">
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Trainerentwicklung</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Teamentwicklung</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Progress</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Motivation</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Organisation</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Performance App</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Engagement</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">News</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Features</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Verletzungen</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Stories</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Regeneration</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Training</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Women's Soccer</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Challenges</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Coach Zone</button>
<button class="px-5 py-2 rounded-full bg-[#6d78ff] text-sm text-white">Ernährung</button>
</div>
<!-- Cards Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-8 justify-items-center m-auto w-[80%]">
<!-- Card -->
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/formal.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 items-center gap-4 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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="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>
<!-- Duplicate Cards -->
<div class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/prov.png' %}"
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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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="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 class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/recover.png' %}"
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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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="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 class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/disrupt.png' %}"
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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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="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 class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/ball.png' %}"
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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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="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 class="bg-[#303033] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/ball.png' %}"
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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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/close.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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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/july.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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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/women.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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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/pattelar.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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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-3 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">
News
</span>
<span class="px-4 py-1 rounded-full bg-[#6d78ff] text-sm font-medium">
Verletzungen
</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>
<!-- Copy same card structure as many times as needed -->
</div>
<div class="justify-items-center mt-10">
<button class="bg-white text-black rounded-full px-8 py-5 flex items-center gap-2 font-semibold hover:bg-gray-200 transition">
Next
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</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>
<!-- Add blinking animation -->
<!-- <style>
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}
.animate-blink {
animation: blink 1s infinite;
}
</style> -->
{% endblock %}

239
at_django_boilerplate/core/templates/company/success_stories.html
View File

@@ -0,0 +1,239 @@
{% extends 'public_base.html' %}
{% load static %}
{% 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-5xl font-bold leading-snug">How B42 delivers</h1>
<h1 class="text-white text-5xl font-bold leading-snug">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.png' %}"
alt="Success story image"
class="w-full max-w-md lg:max-w-lg h-56 sm:h-64 md:h-72 lg:h-96 object-cover rounded-3xl"/>
</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 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, you have the opportunity to improve your performance as a team in every part of the team and in every phase of the season.
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-y-8 justify-items-center m-auto w-[80%]">
<!-- Duplicate Cards -->
<div class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/prov.png' %}"
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-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</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="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 class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/recover.png' %}"
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-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</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="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 class="bg-[#6d78ff] rounded-[4rem] overflow-hidden flex flex-col">
<!-- Image -->
<img src="{% static 'images/disrupt.png' %}"
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-3 mb-4">
<span class="text-gray-300 text-sm font-bold">December 2021</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="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>
<!-- Copy same card structure as many times as needed -->
</div>
</div>
<div class="w-full bg-[#1a1a1a] py-20">
<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">Interviews</p>
<h1 class="text-white text-3xl lg:text-4xl font-bold leading-snug">
Inspiration for effective use of B42
</h1>
</div>
<!-- Right side: 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.
‍
In an interview, these trainers explain how you can use these tools effectively.
</div>
</div>
</div>
<div>
<div>
<img src="" alt="">
</div>
<p>Roland Hofmann</p>
<p>1. FC Nürnberg, U16w</p>
</div>
{% endblock %}

BIN
static/images/achills.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/images/ball.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
static/images/close.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
static/images/disrupt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
static/images/formal.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/images/july.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/images/pattelar.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/images/prevents.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
static/images/prov.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 121 KiB

BIN
static/images/recover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
static/images/sec-2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
static/images/sec-3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

BIN
static/images/sec-4.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

BIN
static/images/stoey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 MiB

BIN
static/images/train.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
static/images/women.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

276
templates/index.html
View File

@@ -1,118 +1,194 @@
{% extends 'public_base.html' %}
{% load static %}
{% block content %}
<div class="container">
<img src="static/images/sec-1.jpeg" alt="Soccer Player" class="background-image" />
<!-- Hero Section -->
<div class="relative w-full flex justify-center py-16 bg-black">
<div class="text-content">
<h1 class="title">PLAY IT REAL</h1>
<p class="subtitle">SOCCER TRAINING THAT HITS LIKE GAME DAY</p>
<!-- 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 " />
<!-- Using image as button -->
<button class="btn-image">
<img src="static/images/btn-2.png" alt="Boost Your Game" />
</button>
<button class="btn-image">
<img src="static/images/but-1.png" alt="Boost Your Game" />
</button>
<!-- 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>
<style>
.container {
position: relative;
height: 90vh;
overflow: hidden;
}
.background-image {
margin: auto;
width: 80%;
height: 100vh;
object-fit: cover;
object-position: bottom;
filter: brightness(0.85);
display: block;
}
.text-content {
position: absolute;
top: 35%;
width: 100%;
text-align: center;
left: 0;
color: #222;
}
.title {
font-size: 6vw;
font-weight: 900;
margin: 0;
}
.subtitle {
font-weight: 700;
font-size: 0.8vw;
margin-top: 0.5rem;
margin-bottom: 1.5rem;
letter-spacing: 0.1em;
color: #222;
}
.btn {
background-color: white;
color: #222;
border: none;
border-radius: 30px;
padding: 12px 30px;
font-weight: 700;
cursor: pointer;
font-size: 1rem;
}
.awards {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 20px;
}
.award {
background-color: #222;
color: #667;
padding: 15px 25px;
border-radius: 25px;
font-size: 0.7vw;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.award-title {
color: #99f;
font-weight: 700;
font-size: 0.85vw;
line-height: 1.1;
}
.award-subtitle {
font-size: 0.5vw;
color: #999;
}
<!-- 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>
.btn-image {
border: none;
background: none;
padding: 0;
cursor: pointer;
margin-top: 60px;
}
.btn-image img {
width: 180px; /* Adjust size as needed */
height: auto;
display: block;
margin-left: 10px;
}
</style>
{% endblock %}