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

fixed ui and created new page ui

Browse Source
This commit is contained in:
anurag.r
2026-01-08 11:29:02 +05:30
parent 1369e9c968
commit 79c9cd6012
8 changed files with 501 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
{% extends 'public_base.html' %} {% extends 'public_base.html' %}
{% load static %} {% load static %}
{% block content %} {% block content %}
{% block title %}Blog{% endblock %}
<div class="bg-[#1d1d1d] py-12 px-4"> <div class="bg-[#1d1d1d] py-12 px-4">
<div class="max-w-5xl mx-auto text-center"> <div class="max-w-5xl mx-auto text-center">
@@ -666,25 +666,43 @@
</div> </div>
<section class="bg-black" >
<div class="mx-auto">
<div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
<!-- Inner container that matches the main content width (same as navbar area) -->
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<div class="bg-[#1d1d1d]"> <!-- Left Text -->
<div class="w-full bg-[#5b6bf5] h-[10rem] rounded-[2rem] flex items-center justify-between px-8"> <div class="text-white max-w-md z-10">
<!-- Text on the left --> <h2 class="text-3xl md:text-[32px] font-medium leading-snug">
<p class="text-white text-xl font-semibold"> Play the best season <br />
Get everything your team needs to be successful of your life.
</p> </h2>
<!-- 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>
<!-- Circle Button -->
<button
class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
hover:scale-125 transition-transform duration-300 ease-out shrink-0"
>
<span class="text-black text-xl">↗</span>
</button>
</div>
<!-- Curved Lines Background - full bleed behind the rounded section -->
<div
class="absolute inset-0 opacity-70"
style="
background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
background-size: cover;
background-position: center;
"
></div>
</div>
</div>
</section>
</div> </div>
<!-- Add blinking animation --> <!-- Add blinking animation -->

232
at_django_boilerplate/core/templates/company/help_and_support.html
View File

@@ -0,0 +1,232 @@
{% extends 'public_base.html' %}
{% load static %}
{% block title %}
Privacy Policy | Register Your Startup
{% endblock %}
{% block content %}
<!-- Support Center Section -->
<section class="bg-slate-50">
<!-- Hero Header -->
<div class="bg-[#6366f1] py-20 text-center text-white">
<h1 class="text-5xl md:text-6xl font-bold uppercase tracking-wider">B-42 Support Center</h1>
<p class="mt-8 text-lg md:text-xl max-w-3xl mx-auto px-4 opacity-90">
Everything you need to know about B-42. And more.
</p>
</div>
<!-- Contact Options -->
<div class="max-w-7xl mx-auto px-6 mt-16">
<!-- "contact" heading and description - left-aligned -->
<div class="mb-12">
<h2 class="text-3xl font-bold text-gray-900">contact</h2>
<p class="mt-4 text-lg text-gray-700 max-w-5xl">
Do you have questions about your account or are you experiencing technical problems? We're here to help.
</p>
</div>
<!-- Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Card 1: Contact Form -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Contact form</h3>
<p class="text-gray-700 mb-8 flex-1">
Write to us for general questions and answers
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
Get in touch
</a>
</div>
<!-- Card 2: Support Request -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Support request</h3>
<p class="text-gray-700 mb-8 flex-1">
Write to us if you have technical problems.
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
Create ticket
</a>
</div>
<!-- Card 3: Appointment Scheduling -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Appointment scheduling</h3>
<p class="text-gray-700 mb-8 flex-1">
Interested in the B-42 solution?<br>
Book an appointment with us directly here!
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
make an appointment
</a>
</div>
</div>
</div>
</section>
<section class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-6">
<hr class="mt-16 mb-10 border-t-1 border-black">
<!-- "information" heading and description - left-aligned -->
<div class="mb-12">
<h2 class="text-3xl font-bold text-gray-900">information</h2>
<p class="mt-4 text-lg text-gray-700 max-w-4xl">
Here you will find useful information about the use of B-42.
</p>
</div>
<!-- Cards Grid - 4 columns on md+ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Card 1: Get Started -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<!-- Menu / List icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Get Started</h3>
<p class="text-gray-700 mb-8 flex-1">
Are you just starting out with the B-42 Coach Zone? Here you'll find a starter guide.
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
Download
</a>
</div>
<!-- Card 2: FAQ -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<!-- Question mark icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">FAQ</h3>
<p class="text-gray-700 mb-8 flex-1">
All important questions about the B-42 Performance App & B-42 Coach Zone
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
View FAQs
</a>
</div>
<!-- Card 3: Downloads -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<!-- Document / Download icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Downloads</h3>
<p class="text-gray-700 mb-8 flex-1">
Valuable resources on fitness, training planning & nutrition
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
Downloads
</a>
</div>
<!-- Card 4: Case Studies -->
<div class="bg-white rounded-3xl shadow-xl p-8 flex flex-col">
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<!-- Thumbs up icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-1.105 0-2.115.448-2.844 1.174l-2.096 2.096a1 1 0 00-.293.707V19a2 2 0 002 2h8" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-3">Case Studies</h3>
<p class="text-gray-700 mb-8 flex-1">
This is how coaches, teams and athletes successfully use the B-42 app.
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition self-start">
Read case studies
</a>
</div>
</div>
</div>
</section>
<section class="mb-16 bg-slate-50">
<div class="max-w-7xl mx-auto px-6">
<hr class="mt-16 mb-10 border-t-1 border-black">
<!-- Heading -->
<div class="mb-12">
<h2 class="text-3xl font-bold text-gray-900">Features</h2>
<p class="mt-3 text-lg text-gray-700">
Step-by-step instructions for using the features in B42 Coach Zone & B42 Performance App
</p>
</div>
<!-- 2 Columns -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
<!-- Card 1 -->
<div class="bg-white rounded-3xl shadow-xl p-10 flex flex-col">
<!-- Icon -->
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 20h5v-2a6 6 0 00-5-5.917V20zM7 20H2v-2a6 6 0 015-5.917V20zm5-6a4 4 0 100-8 4 4 0 000 8z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">B-42 Coach Zone</h3>
<p class="text-gray-700 mb-4">Our product for coaches and teams.</p>
<p class="text-gray-700 mb-8 flex-1">
Athlete management, game and training organization and player development for ambitious coaches and teams.
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition">
B-42 Coach Zone Guides
</a>
</div>
<!-- Card 2 -->
<div class="bg-white rounded-3xl shadow-xl p-10 flex flex-col">
<!-- Icon -->
<div class="w-20 h-20 bg-[#6366f1] rounded-full flex items-center justify-center mb-6 shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">B-42 Performance App</h3>
<p class="text-gray-700 mb-4">Our product for single players</p>
<p class="text-gray-700 mb-8 flex-1">
Fitness, rehabilitation and ball-specific training for ambitious football players in a modern mobile app.
</p>
<a href="#" class="inline-block bg-[#6366f1] text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition">
Create ticket
</a>
</div>
</div>
</div>
</section>
{% endblock %}

4
at_django_boilerplate/core/templates/company/ourcoreteam.html
View File

@@ -1,8 +1,8 @@
{% extends 'public_base.html' %} {% extends 'public_base.html' %}
{% load static %} {% load static %}
{% block title %}Your Digital Assistant Coach{% endblock %} {% block title %}B42 solution for coaches{% endblock %}
{% block meta_description %}The app for successful coaches & teams that play to win.{% endblock %}
{% block content %} {% block content %}
<section class="bg-black py-20 relative overflow-hidden"> <section class="bg-black py-20 relative overflow-hidden">

225
at_django_boilerplate/core/templates/company/press.html
View File

@@ -11,7 +11,7 @@
<!-- Header with "Press" title --> <!-- Header with "Press" title -->
<header class="py-12 text-center"> <header class="py-12 text-center">
<h1 class="text-6xl md:text-8xl font-bold uppercase tracking-wider">Press</h1> <h1 class="text-3xl md:text-5xl font-bold uppercase tracking-wider">Press</h1>
<p class="mt-8 max-w-3xl mx-auto text-lg md:text-xl px-4"> <p class="mt-8 max-w-3xl mx-auto text-lg md:text-xl px-4">
To best present your partnership with B42 to your coaches, players, fans To best present your partnership with B42 to your coaches, players, fans
and members, we have compiled some helpful information and content and members, we have compiled some helpful information and content
@@ -22,24 +22,23 @@
<!-- Main content --> <!-- Main content -->
<div class="max-w-7xl mx-auto px-6 pb-20"> <div class="max-w-7xl mx-auto px-6 pb-20">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
<!-- Left Column: Sticky Press Kit + Download Button (narrower, sticky on desktop) --> <!-- Left Column: Sticky Press Kit + Download Button -->
<div class="lg:col-span-4 space-y-8 lg:sticky lg:top-24 lg:self-start"> <div class="lg:col-span-4 space-y-8 lg:sticky lg:top-24 lg:self-start">
<h2 class="text-3xl font-bold">B42 Press Kit</h2> <h2 class="text-3xl font-bold">B42 Press Kit</h2>
<div class="bg-custom-light rounded-3xl shadow-2xl overflow-hidden"> <div class="bg-custom-light rounded-3xl shadow-2xl overflow-hidden">
<!-- Single full-cover image instead of grid --> <div class="relative w-full h-64"> <!-- Adjusted height for better visual -->
<div class="relative w-full h-40"> <!-- Adjust aspect ratio if needed -->
<img <img
src="{% static 'images/press1.jpg' %}" src="{% static 'images/press1.jpg' %}"
alt="B42 App Previews" alt="B42 App Previews"
class="absolute object-cover" class="absolute inset-0 w-full h-full object-cover"
/> />
</div> </div>
<div class="p-6"> <div class="p-6">
<!-- Optional: small text or nothing, to keep it clean like the screenshot --> <!-- Optional description can go here -->
</div> </div>
</div> </div>
<!-- Download Button below the press kit (visible on all screens) --> <!-- Download Button -->
<div class="mt-8 text-center"> <div class="mt-8 text-center">
<a href="https://b42-assets.azureedge.net/presse/B42%20Press%20Kit.zip" <a href="https://b42-assets.azureedge.net/presse/B42%20Press%20Kit.zip"
class="inline-block bg-yellow-400 text-black font-bold px-8 py-4 rounded-full hover:bg-yellow-300 transition shadow-lg text-xl"> class="inline-block bg-yellow-400 text-black font-bold px-8 py-4 rounded-full hover:bg-yellow-300 transition shadow-lg text-xl">
@@ -48,171 +47,179 @@
</div> </div>
</div> </div>
<!-- Right Column: Wider article cards --> <!-- Right Column: Article cards -->
<div class="lg:col-span-8 space-y-2"> <div class="lg:col-span-8 space-y-12">
<!-- Card 1: 2nd anniversary --> <!-- Reusable card pattern – image now fully covers the left section -->
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden"> <!-- Fixed height on mobile -->
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32"> <img src="{% static 'images/press2.svg' %}" alt="SVE Logo" class="w-full h-full object-cover">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">
2nd anniversary of the B42 Premium Partnership! 2nd anniversary of the B42 Premium Partnership!
</h3> </h3>
<p class="text-lg opacity-90"> <p class="text-lg opacity-90 leading-snug">
We say !Thank you! to B42 and look forward to our future together! We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32"> <img src="{% static 'images/press3.jpg' %}" alt="Press image" class="w-full h-full object-cover">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">B42 Doubles</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> Football and FIFA are inextricably linked. Attempts to merge them are made repeatedly – this time with an app.
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32"> <img src="{% static 'images/press4.jpg' %}" alt="Press image" class="w-full h-full object-cover">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">Training programs like those used in professional football</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> How training with apps and video analysis is changing amateur football.
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press5.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">If you don't move with the times, you'll be left behind</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> Between professional and amateur - With Andreas Gschaider & Leo Preschi
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press6.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">Major innovation at BFV partner B42</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> New app version with many new team features
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press7.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">B42 becomes a UEFA partner</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> An Erding police officer becomes an app developer and gets footballers all over Europe moving with B42.
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press8.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">When Uli Hoeneß suddenly calls...</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> Football start-up B42
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press9.png' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">Fit Friends meets B42</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> Paulick vs. Boss - Your training counts!
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press10.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">Kick Off Your Best Season Yet with Andreas Gschaider</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> A Dive into B42's Sport Tech Phenomenon
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<div class="bg-[#6366f1] text-white rounded-[3rem] overflow-hidden shadow-2xl flex flex-col md:flex-row">
<div class="bg-[#6366f1] text-white rounded-3xl overflow-hidden shadow-2xl flex flex-col md:flex-row"> <div class="bg-white md:w-1/3 h-48 md:h-auto overflow-hidden">
<div class="bg-white p-8 md:w-1/3 flex items-center justify-center"> <img src="{% static 'images/press11.jpg' %}" alt="Press image" class="w-full h-full object-cover">
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/8/8c/SV_Eintracht_Altenberge_Logo.svg/1200px-SV_Eintracht_Altenberge_Logo.svg.png" alt="SVE Logo" class="h-32">
</div> </div>
<div class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center"> <div class="p-6 md:p-8 md:w-2/3 flex flex-col justify-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4"> <h3 class="text-2xl font-bold mb-3">From punk to police officer to entrepreneur</h3>
2nd anniversary of the B42 Premium Partnership! <p class="text-lg opacity-90 leading-snug">
</h3> The crazy biography of startup founder Andreas Gschaider in the podcast
<p class="text-lg opacity-90">
We say !Thank you! to B42 and look forward to our future together!
</p> </p>
</div> </div>
</div> </div>
<!-- Add more cards if needed -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<section class="py-10 bg-[#1e1e1e]">
<div class="mx-auto">
<div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
<!-- Inner container that matches the main content width (same as navbar area) -->
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<!-- Left Text -->
<div class="text-white max-w-md z-10">
<h2 class="text-3xl md:text-[32px] font-medium leading-snug">
Give your team <br />
what it needs <br />
to be successful .
</h2>
</div>
<!-- Circle Button -->
<button
class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
hover:scale-125 transition-transform duration-300 ease-out shrink-0"
>
<span class="text-black text-xl">↗</span>
</button>
</div>
<!-- Curved Lines Background - full bleed behind the rounded section -->
<div
class="absolute inset-0 opacity-70"
style="
background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
background-size: cover;
background-position: center;
"
></div>
</div>
</div>
</section>
<style> <style>
.bg-custom-dark { .bg-custom-dark {
background-color: #0f172a; background-color: #0f172a;
} }
.bg-custom-blue {
background-color: #818cf8;
}
.bg-custom-light { .bg-custom-light {
background-color: #f1f5f9; background-color: #f1f5f9;
} }

125
at_django_boilerplate/core/templates/company/training.html
View File

@@ -2,7 +2,7 @@
{% load static %} {% load static %}
{% block title %} {% block title %}
Privacy Policy | Register Your Startup training
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@@ -36,42 +36,43 @@ Privacy Policy | Register Your Startup
</div> </div>
</div> </div>
<!-- Bottom CTA Banner (full width, but inner content respects same max-width) --> <section >
<!-- Bottom CTA Banner (full width, constrained inner content) --> <div class="mx-auto">
<a href="" class="block w-full"> <div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
<div class="bg-gradient-to-r from-purple-600 to-blue-500 rounded-3xl relative overflow-hidden cursor-pointer transition-all duration-300 hover:scale-[1.02] group"> <!-- Inner container that matches the main content width (same as navbar area) -->
<!-- Shine effect --> <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<div class="absolute inset-0 opacity-20 pointer-events-none">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -skew-x-12 translate-x-full animate-shine"></div>
</div>
<!-- Inner content with constrained width --> <!-- Left Text -->
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-12"> <div class="text-white max-w-md z-10">
<div class="flex items-center justify-between relative z-10"> <h2 class="text-3xl md:text-[32px] font-medium leading-snug">
<p class="text-xl md:text-3xl font-bold text-white leading-tight"> Play the best season <br />
Play the best season<br>
of your life. of your life.
</p> </h2>
</div>
<!-- Neon yellow ball with bold arrow + hover animation --> <!-- Circle Button -->
<div class="ml-8 relative"> <button
<svg width="100" height="100" viewBox="0 0 100 100" class="drop-shadow-2xl transition-all duration-300 group-hover:scale-110 group-hover:drop-shadow-glow"> class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
<!-- Circle background - neon yellow --> hover:scale-125 transition-transform duration-300 ease-out shrink-0"
<circle cx="50" cy="50" r="48" fill="#CCFF00" stroke="#000000" stroke-width="3"/> >
<span class="text-black text-xl">↗</span>
</button>
</div>
<!-- Curved Lines Background - full bleed behind the rounded section -->
<div
class="absolute inset-0 opacity-70"
style="
background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
background-size: cover;
background-position: center;
"
></div>
<!-- Bold right arrow -->
<path d="M 28 50 L 68 50 L 58 35 M 68 50 L 58 65"
stroke="#000000"
stroke-width="12"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"/>
</svg>
</div> </div>
</div> </div>
</div> </section>
</div>
</a>
<style> <style>
@keyframes shine { @keyframes shine {
@@ -409,42 +410,44 @@ SC Pfullendorf</p>
</div> </div>
</section> </section>
<!-- Bottom CTA Banner (full width, constrained inner content) -->
<a href="" class="block w-full">
<div class="bg-gradient-to-r from-purple-600 to-blue-500 rounded-3xl relative overflow-hidden cursor-pointer transition-all duration-300 hover:scale-[1.02] group">
<!-- Shine effect -->
<div class="absolute inset-0 opacity-20 pointer-events-none">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -skew-x-12 translate-x-full animate-shine"></div>
</div>
<!-- Inner content with constrained width --> <section >
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-12"> <div class="mx-auto">
<div class="flex items-center justify-between relative z-10"> <div class="relative overflow-hidden rounded-[70px] bg-[#6D77FF] py-24">
<p class="text-3xl md:text-4xl font-bold text-white leading-tight"> <!-- Inner container that matches the main content width (same as navbar area) -->
Play the best season<br> <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<!-- Left Text -->
<div class="text-white max-w-md z-10">
<h2 class="text-3xl md:text-[32px] font-medium leading-snug">
Play the best season <br />
of your life. of your life.
</p> </h2>
</div>
<!-- Neon yellow ball with bold arrow + hover animation --> <!-- Circle Button -->
<div class="ml-8 relative"> <button
<svg width="100" height="100" viewBox="0 0 100 100" class="drop-shadow-2xl transition-all duration-300 group-hover:scale-110 group-hover:drop-shadow-glow"> class="w-16 h-16 bg-[#D4FF24] rounded-full flex items-center justify-center z-10 shadow-md
<!-- Circle background - neon yellow --> hover:scale-125 transition-transform duration-300 ease-out shrink-0"
<circle cx="50" cy="50" r="48" fill="#CCFF00" stroke="#000000" stroke-width="3"/> >
<span class="text-black text-xl">↗</span>
</button>
<!-- Bold right arrow -->
<path d="M 28 50 L 68 50 L 58 35 M 68 50 L 58 65"
stroke="#000000"
stroke-width="12"
stroke-linecap="round"
stroke-linejoin="round"
fill="none"/>
</svg>
</div> </div>
</div>
</div>
</div>
</a>
<!-- Curved Lines Background - full bleed behind the rounded section -->
<div
class="absolute inset-0 opacity-70"
style="
background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221440%22 height=%22840%22 viewBox=%220 0 1440 840%22%3E%3Cg fill=%22none%22 stroke=%22%23aabcff%22 stroke-width=%223%22 opacity=%220.3%22%3E%3Cpath d=%22M-300 950 Q700 -150 1700 950%22/%3E%3Cpath d=%22M-300 850 Q700 -250 1700 850%22/%3E%3Cpath d=%22M-300 750 Q700 -350 1700 750%22/%3E%3Cpath d=%22M-300 650 Q700 -450 1700 650%22/%3E%3Cpath d=%22M-300 550 Q700 -550 1700 550%22/%3E%3Cpath d=%22M-300 450 Q700 -650 1700 450%22/%3E%3C/g%3E%3C/svg%3E');
background-size: cover;
background-position: center;
"
></div>
</div>
</div>
</section>
<style> <style>
@keyframes shine { @keyframes shine {
0% { transform: translateX(-100%); } 0% { transform: translateX(-100%); }

4
templates/includes/footer.html
View File

@@ -27,7 +27,7 @@
<h3 class="text-white font-semibold uppercase mb-6">Pursue</h3> <h3 class="text-white font-semibold uppercase mb-6">Pursue</h3>
<ul class="space-y-4 text-lg"> <ul class="space-y-4 text-lg">
<li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li> <li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li>
<li><a href="{% url 'careers' %}" class="text-white hover:text-indigo-400 transition">Jobs</a></li> <li><a href="" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
<li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li> <li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li>
<li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li> <li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
</ul> </ul>
@@ -117,7 +117,7 @@
<h3 class="text-white font-semibold uppercase mb-4">Pursue</h3> <h3 class="text-white font-semibold uppercase mb-4">Pursue</h3>
<ul class="space-y-3 text-sm"> <ul class="space-y-3 text-sm">
<li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li> <li><a href="{% url 'about' %}" class="text-white hover:text-indigo-400 transition">About Us</a></li>
<li><a href="{% url 'careers' %}" class="text-white hover:text-indigo-400 transition">Jobs</a></li> <li><a href="" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
<li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li> <li><a href="{% url 'press' %}" class="text-white hover:text-indigo-400 transition">press</a></li>
<li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li> <li><a href="{% url 'help_and_support' %}" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
</ul> </ul>

17
templates/includes/public_navbar.html
View File

@@ -1,15 +1,22 @@
{% load static %} {% load static %}
<nav class="bg-[#111111] text-white"> <nav class="fixed top-0 left-0 right-0 z-50 w-full bg-[#111111] text-white shadow-lg backdrop-blur-md bg-opacity-95 transition-all">
<div class="max-w-7xl mx-auto px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20"> <!-- h-20 ≈ py-5 equivalent for consistent height --> <div class="flex items-center justify-between h-20">
<!-- Left: Logo --> <!-- Left: Logo -->
<div class="flex items-center"> <div class="flex items-center">
<a href="/">
<img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto"> <img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto">
</a>
</div> </div>
<!-- Right: CTA Button (visible on all screens) --> <!-- Right: CTA Button -->
<div class="flex items-center"> <div class="flex items-center">
<a href="#" class="bg-white text-black font-bold text-lg px-8 py-3 rounded-full hover:bg-gray-200 transition duration-200"> <a href="#" class="
bg-white text-black font-bold rounded-full hover:bg-gray-200 transition duration-200
px-5 py-2.5 text-sm
md:px-8 md:py-3 md:text-lg
">
BOOST YOUR GAME BOOST YOUR GAME
</a> </a>
</div> </div>

283
templates/public_base.html
View File

@@ -5,21 +5,6 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}B42-Play it real{% endblock %}</title> <title>{% block title %}B42-Play it real{% endblock %}</title>
<link rel="apple-touch-icon" sizes="180x180"
href="{% static 'img/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32"
href="{% static 'img/favicon-32x32.png' %}">
<link rel="icon" type="image/png" sizes="16x16"
href="{% static 'img/favicon-16x16.png' %}">
<link rel="manifest"
href="{% static 'img/site.webmanifest' %}">
<!-- Tailwind CSS --> <!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script> <script>
@@ -51,39 +36,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style> <style>
/* -------------------------------------------
ROOT VARIABLES (Updated & Clean)
-------------------------------------------- */
:root {
/* Brand Colors */
--color-navy: #0A1D3A;
--color-green: #28A745;
--color-green-dark: #1F8A38;
--color-blue: #0056D2;
--color-purple: #6F42C1;
/* Text Colors */
--color-text-dark: #333333;
--color-text-gray: #3A3A3A;
--color-text-light: #6C757D;
/* Neutral */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-900: #111827;
/* Shadows */
--shadow-soft: rgba(0, 0, 0, 0.08);
--shadow-medium: rgba(0, 0, 0, 0.15);
/* Button Defaults */
--btn-radius: 14px;
--btn-transition: all 0.3s ease;
}
/* -------------------------------------------
GLOBAL BASE
-------------------------------------------- */
html { html {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -95,218 +47,6 @@
line-height: 1.6; line-height: 1.6;
background-color: var(--color-gray-50); background-color: var(--color-gray-50);
} }
/* -------------------------------------------
TYPOGRAPHY CLASSES (Reusable across site)
-------------------------------------------- */
/* Hero Heading (H1) */
.hero-heading {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.2px;
color: var(--color-navy);
}
@media (min-width: 640px) {
.hero-heading { font-size: 3.5rem; } /* ~56px */
}
@media (min-width: 768px) {
.hero-heading { font-size: 4rem; } /* ~64px */
}
@media (max-width: 639px) {
.hero-heading { font-size: 2rem; } /* ~32px */
}
/* Hero Subheading (H2) */
.hero-subheading {
font-family: 'Poppins', sans-serif;
font-weight: 400;
line-height: 1.4;
color: var(--color-text-gray);
}
@media (min-width: 640px) {
.hero-subheading { font-size: 1.5rem; } /* 24px */
}
@media (max-width: 639px) {
.hero-subheading { font-size: 1.125rem; } /* 18px */
}
/* Section Title (e.g., "Choose Where to Incorporate") */
.section-title {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.2px;
text-align: center;
color: var(--color-navy);
}
@media (min-width: 640px) {
.section-title { font-size: 2.75rem; } /* ~44px */
}
@media (max-width: 639px) {
.section-title { font-size: 1.875rem; } /* ~30px */
}
/* Card Title (H3 inside cards) */
.card-title {
font-family: 'Poppins', sans-serif;
font-weight: 500;
line-height: 1.3;
color: var(--color-navy);
}
@media (min-width: 640px) {
.card-title { font-size: 1.75rem; } /* ~28px */
}
@media (max-width: 639px) {
.card-title { font-size: 1.375rem; } /* ~22px */
}
/* Sub-items / Tags (e.g., Pvt Ltd | LLP | OPC) */
.card-tags {
font-family: 'Inter', sans-serif;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.1px;
color: var(--color-blue);
}
@media (min-width: 640px) {
.card-tags { font-size: 1.125rem; } /* 18px */
}
@media (max-width: 639px) {
.card-tags { font-size: 1rem; } /* 16px */
}
/* Card Description / Body Text */
.card-description, .body-text {
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-text-gray);
}
@media (min-width: 640px) {
.card-description, .body-text { font-size: 1.125rem; } /* 18px */
}
@media (max-width: 639px) {
.card-description, .body-text { font-size: 1rem; } /* 16px */
}
/* Caption / Trust Line */
.caption-text {
font-family: 'Inter', sans-serif;
font-weight: 300;
text-align: center;
color: var(--color-text-light);
}
@media (min-width: 640px) {
.caption-text { font-size: 0.875rem; } /* 14px */
}
@media (max-width: 639px) {
.caption-text { font-size: 0.8125rem; } /* 13px */
}
/* -------------------------------------------
BUTTON CLASSES (Reusable)
-------------------------------------------- */
.btn-cta {
font-family: 'Poppins', sans-serif;
font-weight: 500;
border-radius: var(--btn-radius);
padding: 0.75rem 1.75rem;
text-align: center;
transition: var(--btn-transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
@media (min-width: 640px) {
.btn-cta { font-size: 1.125rem; } /* 18px */
}
@media (max-width: 639px) {
.btn-cta { font-size: 1rem; } /* 16px */
}
.btn-primary-green {
background-color: var(--color-green);
color: var(--color-white);
}
.btn-primary-green:hover {
background-color: var(--color-green-dark);
transform: scale(1.05);
}
.btn-primary-blue {
background-color: var(--color-blue);
color: white;
}
.btn-primary-blue:hover {
background-color: #0044a8;
transform: scale(1.05);
}
.btn-primary-purple {
background-color: var(--color-purple);
color: var(--color-white);
}
.btn-primary-purple:hover {
background-color: #5a32a3;
transform: scale(1.05);
}
.btn-secondary-blue {
background-color: var(--color-white);
color: var(--color-blue);
border: 2px solid var(--color-blue);
}
.btn-secondary-blue:hover {
background-color: var(--color-blue);
color: var(--color-white);
}
/* -------------------------------------------
CARD STYLES
-------------------------------------------- */
.service-card {
background: var(--color-white);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 6px 18px var(--shadow-soft);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 24px var(--shadow-medium);
}
.service-card-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* -------------------------------------------
LAYOUT UTILITIES
-------------------------------------------- */
.section-padding {
padding: clamp(40px, 6vw, 80px) 0;
}
.max-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Back to top animation (kept from original) */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style> </style>
</head> </head>
@@ -322,33 +62,10 @@
{% endblock %} {% endblock %}
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer> <footer>
{% include "includes/footer.html" %} {% include "includes/footer.html" %}
</footer> </footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-6 right-6 bg-indigo-600 text-white p-3 rounded-full shadow-lg transition-all duration-300 z-40 hidden">
<i class="fas fa-chevron-up"></i>
</button>
<script>
// Back to top functionality
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTop.classList.remove('hidden');
} else {
backToTop.classList.add('hidden');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</body> </body>
</html> </html>