create index-page
This commit is contained in:
@@ -1,118 +1,195 @@
|
||||
|
||||
{% 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</div>
|
||||
<!-- 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="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>
|
||||
|
||||
<style>
|
||||
<!-- 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>
|
||||
|
||||
.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;
|
||||
}
|
||||
</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="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 %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user