328 lines
8.9 KiB
HTML
328 lines
8.9 KiB
HTML
|
||
{% extends 'public_base.html' %}
|
||
{% load static %}
|
||
{% block content %}
|
||
|
||
<!-- Hero Section -->
|
||
<div class="relative w-full flex justify-center py-16 bg-black">
|
||
|
||
<!-- 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 " />
|
||
|
||
<!-- 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=""
|
||
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>
|
||
</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>
|
||
|
||
|
||
<!-- 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=""
|
||
class="inline-block bg-[#6d7cff] hover:bg-[#5b6bf5] transition px-8 py-3 rounded-full 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.jpg"
|
||
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.jpg"
|
||
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=""
|
||
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=""
|
||
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.jpg"
|
||
alt="Training Image"
|
||
class="w-full shadow-lg"
|
||
/>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="w-full bg-[#5b6bf5] h-[10rem]"></div> -->
|
||
|
||
|
||
<!-- Floating Social Bar -->
|
||
<div
|
||
class="fixed right-72 top-1/2 -translate-y-1/2 z-50
|
||
flex flex-col items-center gap-5
|
||
bg-lime-400
|
||
px-3 py-4
|
||
rounded-full
|
||
shadow-lg"
|
||
>
|
||
<a href="#" class="text-black text-xl hover:scale-125 transition">
|
||
<i class="fab fa-instagram"></i>
|
||
</a>
|
||
|
||
<a href="#" class="text-black text-xl hover:scale-125 transition">
|
||
<i class="fab fa-youtube"></i>
|
||
</a>
|
||
|
||
<a href="#" class="text-black text-xl hover:scale-125 transition">
|
||
<i class="fab fa-tiktok"></i>
|
||
</a>
|
||
|
||
<a href="#" class="text-black text-xl hover:scale-125 transition">
|
||
<i class="fab fa-linkedin-in"></i>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<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>
|
||
|
||
|
||
<a
|
||
href=""
|
||
class="inline-block bg-[#6d7cff] transition px-8 py-3 rounded-full font-bold text-white text-lg"
|
||
>
|
||
Zum Kurs anmelden
|
||
</a>
|
||
<!-- 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 -->
|
||
|
||
|
||
|
||
|
||
|
||
{% endblock %}
|
||
|
||
|
||
|
||
|