create blog-page

This commit is contained in:
2026-01-07 17:09:09 +05:30
parent 5471314588
commit 25f067c328
17 changed files with 721 additions and 1 deletions

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 %}

BIN
static/images/achills.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/images/ball.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
static/images/close.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

BIN
static/images/disrupt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

BIN
static/images/formal.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/images/july.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
static/images/pattelar.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/images/prevents.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

BIN
static/images/prov.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

BIN
static/images/recover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

BIN
static/images/train.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
static/images/women.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View File

@@ -54,7 +54,6 @@
</div> </div>
<div class="bg-black text-white py-16 px-6"> <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"> <div class="max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center gap-12">