updated html and ui
This commit is contained in:
@@ -5,316 +5,263 @@
|
||||
{% block meta_description %}Affordable registered address services in India and abroad. Establish your business presence with professional address solutions for startups and growing businesses.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
/* Glassmorphism Effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||
::-webkit-scrollbar-thumb { background: #6b7280; border-radius: 4px; }
|
||||
/* Smooth animations */
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
|
||||
/* Gradient text */
|
||||
.gradient-text { background: linear-gradient(90deg, #4f46e5, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
</style>
|
||||
<section class="bg-[#1E1E1E] text-white py-24">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">
|
||||
|
||||
<!-- LEFT TEXT -->
|
||||
<div class="text-center lg:text-left">
|
||||
<h2 class="text-xl md:text-2xl lg:text-3xl font-bold tracking-wide">
|
||||
OUR MOTIVATION — WE LIVE SOCCER
|
||||
</h2>
|
||||
|
||||
<!-- underline -->
|
||||
<div class="mt-4 w-40 h-1 ml-auto bg-gradient-to-r from-green-400 to-transparent rounded-full"></div>
|
||||
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="py-16 md:py-24 bg-[#B6C3FD]">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:w-1/2 mb-10 md:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4 leading-tight pt-10">
|
||||
Welcome to <span class="gradient-text">RYS</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-xl">
|
||||
Simplifying business setup and expansion in India and globally. Your trusted partner for seamless company incorporation and compliance.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<a href="#services" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-medium hover:bg-indigo-700 transition text-center">Our Services</a>
|
||||
<a href="{% url 'contact_us_form' %}" class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-indigo-50 transition text-center">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 flex justify-center relative">
|
||||
<div class="w-80 h-80 bg-gradient-to-br from-indigo-200 to-purple-200 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-rocket text-6xl text-indigo-600"></i>
|
||||
</div>
|
||||
<div class="absolute -top-4 -right-4 w-40 h-40 bg-gradient-to-br from-pink-200 to-orange-200 rounded-full opacity-70"></div>
|
||||
<div class="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-br from-green-200 to-blue-200 rounded-full opacity-70"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-10 text-lg leading-relaxed max-w-2xl mx-auto lg:mx-0">
|
||||
We stood or are standing on the pitch ourselves, have got to know
|
||||
the soccer fields and turf fields of this republic and know the smell
|
||||
of freshly cut grass coming out of Eff Eff. It is this passion that drives us.
|
||||
<br><br>
|
||||
We want to get back to the soccer that captivated us as a child.
|
||||
Where gender, sexual orientation or skin color did not play a role.
|
||||
We stand for equality, respect and community cooperation in amateur sports.
|
||||
For us, “EqualGame” or “FairPlay” are more than trendy hashtags on social
|
||||
media platforms — they are the basis of our corporate culture.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT IMAGE -->
|
||||
<div class="flex justify-center lg:justify-end">
|
||||
<img
|
||||
src="{% static 'images/about1.png' %}"
|
||||
alt="Player Jumping"
|
||||
class=" w-full max-w-xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-[#1E1E1E] text-white py-24">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">
|
||||
|
||||
<!-- LEFT IMAGE -->
|
||||
<div class="flex justify-center lg:justify-start">
|
||||
<img
|
||||
src="{% static 'images/about2.png' %}"
|
||||
alt="Players Team"
|
||||
class="rounded-lg w-full max-w-xl object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CONTENT -->
|
||||
<div class="text-center lg:text-left max-w-2xl mx-auto lg:mx-0">
|
||||
|
||||
<!-- TITLES -->
|
||||
<h2 class="inline-block bg-white text-black font-bold px-4 py-2 mb-2 text-lg md:text-xl">
|
||||
OUR GOAL - BETTER TEAMS
|
||||
</h2>
|
||||
<br />
|
||||
<h2 class="inline-block bg-white text-black font-bold px-4 py-2 mb-6 text-lg md:text-xl">
|
||||
BETTER SOCCER
|
||||
</h2>
|
||||
|
||||
<!-- PARAGRAPH -->
|
||||
<p class="text-lg leading-relaxed mt-4">
|
||||
As a startup, we have set ourselves an ambitious goal: nothing less
|
||||
than taking amateur soccer to a new level. With our soccer platform
|
||||
for ambitious players, coaches and clubs, we give you the tools to
|
||||
significantly improve your performance on the pitch.
|
||||
</p>
|
||||
|
||||
<p class="text-lg leading-relaxed mt-6">
|
||||
With advanced methods and expertise from professional sports, B42 makes it
|
||||
possible to improve the skills of each individual player for optimal team performance.
|
||||
</p>
|
||||
|
||||
<!-- BUTTON -->
|
||||
<div class="mt-10 flex justify-center lg:justify-start">
|
||||
<a href="#"
|
||||
class="border-2 border-lime-400 text-white font-semibold rounded-full px-6 py-3 text-sm tracking-wide hover:bg-lime-400 hover:text-black transition">
|
||||
BOOST YOUR GAME
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-[#E8E8F2] py-24">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center px-6">
|
||||
|
||||
<!-- LEFT: TEAM GRID -->
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<img src="{% static 'images/about3.png' %}"
|
||||
alt="Team 1"
|
||||
class="rounded-3xl w-full h-full object-cover" />
|
||||
|
||||
<img src="{% static 'images/about4.jpg' %}"
|
||||
alt="Team 2"
|
||||
class="rounded-3xl w-full h-full object-cover" />
|
||||
|
||||
<img src="{% static 'images/about5.png' %}"
|
||||
alt="Team 3"
|
||||
class="rounded-3xl w-full h-full object-cover" />
|
||||
|
||||
<img src="{% static 'images/about6.jpeg' %}"
|
||||
alt="Team 4"
|
||||
class="rounded-3xl w-full h-full object-cover" />
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: CONTENT -->
|
||||
<div class="text-center lg:text-left max-w-2xl mx-auto lg:mx-0">
|
||||
|
||||
<h2 class="inline-block bg-black text-white font-bold px-4 py-2 mb-2 text-lg md:text-xl">
|
||||
THAT'S US - THE
|
||||
</h2>
|
||||
<br />
|
||||
<h2 class="inline-block bg-black text-white font-bold px-4 py-2 mb-6 text-lg md:text-xl">
|
||||
B42 DREAMTEAM
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-gray-800 leading-relaxed">
|
||||
The game is ruled by those who have the courage,
|
||||
ambition, and ability to move forward, cross borders,
|
||||
and challenge the status quo.
|
||||
</p>
|
||||
|
||||
<div class="mt-10 flex justify-center lg:justify-start">
|
||||
<a href="#"
|
||||
class="bg-[#6C63FF] hover:bg-[#5a52e0] text-white font-semibold rounded-full px-6 py-3 text-sm tracking-wide transition">
|
||||
VACANCIES
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="relative bg-[#161616] py-20 overflow-hidden">
|
||||
|
||||
<!-- BG pattern layer -->
|
||||
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/diagonal-stripes.png')] opacity-20"></div>
|
||||
|
||||
<div class="relative max-w-7xl mx-auto px-6">
|
||||
|
||||
<!-- Heading -->
|
||||
<h2 class="text-white font-bold text-2xl md:text-3xl mb-10 text-center lg:text-left">
|
||||
OUR COMMITMENT — FOR A BETTER SOCCER
|
||||
</h2>
|
||||
|
||||
<!-- Slider -->
|
||||
<div id="slider" class="relative">
|
||||
|
||||
<!-- Slide 1 -->
|
||||
<div class="slide grid grid-cols-1 lg:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden">
|
||||
<!-- Left: Text -->
|
||||
<div class="p-10 flex flex-col justify-center text-center lg:text-left space-y-4">
|
||||
<span class="inline-block bg-black text-white font-bold px-4 py-2 text-sm">
|
||||
slide tackle against Right
|
||||
</span>
|
||||
|
||||
|
||||
<p class="text-gray-800 leading-relaxed text-lg">
|
||||
Young soccer players will shape our society and define our values in the future. On and off the square
|
||||
|
||||
Through sport, but also in everyday life in general, they have the opportunity and responsibility to construct social cooperation that does not ostracize and discriminate, but above all respect, diversity and tolerance.
|
||||
</p>
|
||||
|
||||
<p class="text-gray-800 leading-relaxed text-lg">
|
||||
With this in mind, we have created a platform for
|
||||
women’s soccer with Play for Her.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Image -->
|
||||
<div class="h-80 lg:h-auto">
|
||||
<img
|
||||
src="{% static 'images/about7.png' %}"
|
||||
alt="Women Soccer"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2 -->
|
||||
<div class="slide hidden grid grid-cols-1 lg:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden">
|
||||
<!-- Left: Text -->
|
||||
<div class="p-10 flex flex-col justify-center text-center lg:text-left space-y-4">
|
||||
<span class="inline-block bg-black text-white font-bold px-4 py-2 text-sm">
|
||||
Play 4 Her
|
||||
</span>
|
||||
|
||||
<p class="text-gray-800 leading-relaxed text-lg">
|
||||
Women's football is of great importance to B42. We are convinced that football can break down barriers and bring significant social benefits. Supporting women who want to pursue their passion is undoubtedly linked to this goal.
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
<p class="text-gray-800 leading-relaxed text-lg">
|
||||
With this in mind, we have created Play for Her, a platform for women's football.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Right: Image -->
|
||||
<div class="h-80 lg:h-auto">
|
||||
<img
|
||||
src="{% static 'images/about8.png' %}"
|
||||
alt="Another Soccer Image"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Slider dots -->
|
||||
<div class="flex justify-center gap-3 mt-8">
|
||||
<button class="dot w-4 h-1 rounded-full bg-white" onclick="showSlide(0)"></button>
|
||||
<button class="dot w-4 h-1 rounded-full bg-white/30" onclick="showSlide(1)"></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-blue-500 min-h-80 flex items-center justify-center px-4">
|
||||
<div class="text-center text-white">
|
||||
<h1 class="text-3xl md:text-4xl font-bold mb-4">PLAY IT REAL - EVEN IN YOUR INBOX.</h1>
|
||||
<p class="text-lg md:text-xl mb-6">Receive exclusive training tips, mental support and updates from the B42 Arena.</p>
|
||||
<p class="text-lg md:text-xl mb-10">No spam. Just real performance.</p>
|
||||
|
||||
<form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter your email address"
|
||||
class="px-6 py-4 rounded-full text-gray-800 text-lg flex-1 focus:outline-none"
|
||||
required
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-black text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-900 transition"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
const slides = document.querySelectorAll('#slider .slide');
|
||||
const dots = document.querySelectorAll('.dot');
|
||||
|
||||
<!-- About Us Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">About Us</h2>
|
||||
<p class="text-gray-600 max-w-3xl mx-auto">Your trusted partner for business setup and expansion in India and globally.</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<p class="text-gray-700 mb-6 text-lg">
|
||||
At RegisterYourStartup.com, we simplify the process of starting and expanding a business in India & abroad. Whether you're an entrepreneur, a startup founder, or an international company looking to enter the Indian market, we provide end-to-end support to navigate the legal and regulatory landscape seamlessly.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-6">
|
||||
With India's dynamic business environment and growing global significance, we ensure that businesses of all sizes—domestic and foreign—can establish their presence effortlessly. Our platform offers expert guidance on company incorporation, compliance, taxation, and regulatory approvals, allowing you to focus on innovation and growth while we handle the complexities.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-6">
|
||||
We specialize in assisting foreign companies in setting up their Subsidiary, Branch Office, or Liaison Office in India, ensuring complete compliance with legal, accounting, taxation, and regulatory requirements. From obtaining RBI and ROC approvals to handling ongoing corporate governance, we provide comprehensive solutions for a smooth business setup in India.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Beyond India, we assist businesses in setting up and expanding across multiple international markets, including the UAE, Saudi Arabia, the US, Singapore, Malaysia, the Philippines, Sri Lanka, and Bangladesh. From company registration to legal, accounting, and regulatory compliance, RegisterYourStartup.com is your trusted partner for seamless global business expansion.
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-8 rounded-2xl">
|
||||
<div class="text-center mb-6">
|
||||
<i class="fas fa-globe-americas text-6xl text-indigo-600 mb-4"></i>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-2">Our Global Reach</h3>
|
||||
<p class="text-gray-700">We help businesses establish presence across multiple countries</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-landmark text-indigo-600 text-xl mb-2"></i> <!-- Taj Mahal vibe -->
|
||||
<p class="font-medium text-gray-800">India</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-landmark-dome text-purple-600 text-xl mb-2"></i> <!-- Capitol/White House -->
|
||||
<p class="font-medium text-gray-800">USA</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-building text-orange-600 text-xl mb-2"></i> <!-- Burj Khalifa -->
|
||||
<p class="font-medium text-gray-800">UAE</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-building-columns text-red-600 text-xl mb-2"></i> <!-- Modern Singapore architecture -->
|
||||
<p class="font-medium text-gray-800">Singapore</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-landmark text-yellow-600 text-xl mb-2"></i> <!-- Petronas Towers feel -->
|
||||
<p class="font-medium text-gray-800">Malaysia</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-white p-4 rounded-lg text-center">
|
||||
<i class="fas fa-landmark text-green-700 text-xl mb-2"></i> <!-- Modern KSA architecture -->
|
||||
<p class="font-medium text-gray-800">KSA</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CEO Message Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Message from Our CEO</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Leading with expertise and commitment to your success</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto">
|
||||
<div class="md:flex">
|
||||
<div class="md:w-1/3 bg-gradient-to-br from-indigo-500 to-purple-600 p-8 flex flex-col items-center justify-center text-white">
|
||||
<div class="w-50 h-50 bg-white mb-6 flex items-center justify-center overflow-hidden">
|
||||
<img src="{% static 'img/ceo_image.jpg' %}" alt="User" class="w-full h-full">
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">Kashif Raza</h3>
|
||||
<p class="text-indigo-100 text-center">Founder & CEO</p>
|
||||
<div class="mt-4 flex space-x-4">
|
||||
<a href="#" class="text-white hover:text-indigo-200">
|
||||
<i class="fab fa-linkedin text-xl"></i>
|
||||
</a>
|
||||
<a href="#" class="text-white hover:text-indigo-200">
|
||||
<i class="fab fa-twitter text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-2/3 p-8">
|
||||
<div class="mb-6">
|
||||
<h4 class="text-xl font-semibold text-gray-900 mb-4">Welcome Entrepreneurs,</h4>
|
||||
<p class="text-gray-700 mb-4">
|
||||
At RegisterYourStartup.com, we are dedicated to making business incorporation and expansion effortless by providing comprehensive legal, regulatory, and compliance support. Our mission is to empower entrepreneurs like you to focus on building and scaling your vision while we handle the complexities of business setup.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
With extensive expertise in corporate law and compliance, I am a proud member of the All India Bar Association, Delhi High Court Bar Association, and a Fellow of the Institute of Company Secretaries of India. Additionally, I hold certifications in VAT, GST, POSH, Labour Laws, and Company Incorporation, with hands-on experience in FEMA (FDI), GST, and establishing subsidiary companies across India, US, The GCC (Dubai, Riyadh), Singapore, Malaysia, Phillipines, China, Hong Kong, Bangladesh, Srilanka and Thailand.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Whether you are a startup, an SME, or a multinational enterprise, RegisterYourStartup.com is here to be your trusted partner in business formation, compliance, and expansion—both in India and globally.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Let's build your success story together!
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-6">
|
||||
<p class="text-gray-800 font-medium">Warm regards,</p>
|
||||
<p class="text-gray-900 font-bold">Kashif Raza</p>
|
||||
<p class="text-gray-600">Founder & CEO, registeryourstartup.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Services</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Comprehensive business incorporation solutions for diverse needs</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-building text-indigo-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Private Limited Company</h3>
|
||||
<p class="text-gray-600">Complete incorporation services for private limited companies in India with full compliance support.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-globe-americas text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Foreign Subsidiary in India</h3>
|
||||
<p class="text-gray-600">Assistance for international companies setting up subsidiaries in India with regulatory compliance.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-code-branch text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Branch Office Establishment</h3>
|
||||
<p class="text-gray-600">Setting up branch offices for foreign companies in India with all necessary approvals.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-project-diagram text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Project Office Formation</h3>
|
||||
<p class="text-gray-600">Establishing project offices for specific contracts or projects in India with compliance support.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-handshake text-yellow-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Liaison Office Setup</h3>
|
||||
<p class="text-gray-600">Setting up liaison offices for foreign companies to represent their interests in India.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover-lift">
|
||||
<div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<i class="fas fa-plane-departure text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">International Company Setup</h3>
|
||||
<p class="text-gray-600">Assistance with company registration and setup in multiple countries outside India.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How We Work Section -->
|
||||
<section class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">How We Work</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">A simple, streamlined process to get your business started</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover-lift">
|
||||
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-indigo-600 font-bold text-xl">1</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Get in Touch</h3>
|
||||
<p class="text-gray-600">Register through our website (www.registeryourstartup.com), call us at <strong>+91-92204-33466</strong>, or email us at <strong> info@registeryourstartup.com</strong> with your requirements.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover-lift">
|
||||
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-purple-600 font-bold text-xl">2</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Tailored Assistance</h3>
|
||||
<p class="text-gray-600">Our expert Registration Team will guide you, answer your queries, and provide a detailed overview of the process.</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover-lift">
|
||||
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-blue-600 font-bold text-xl">3</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Quick Access to Resources</h3>
|
||||
<p class="text-gray-600">Visit the website and click "Get Started Now" to fill in the fully automated online form to get your company formed or compliance done</p>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 text-center hover-lift">
|
||||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span class="text-green-600 font-bold text-xl">4</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 mb-2">Hassle-Free Process</h3>
|
||||
<p class="text-gray-600">Once all required documents are received, we initiate the registration process and keep you updated on the progress</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Happy Customers</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">What our clients say about our services</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
|
||||
<i class="fas fa-user text-indigo-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Rajesh Kumar</h4>
|
||||
<p class="text-gray-600 text-sm">Startup Founder</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">"RegisterYourStartup made the entire company registration process so smooth. Their expertise in compliance saved us valuable time and resources."</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
|
||||
<i class="fas fa-user text-purple-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Sarah Johnson</h4>
|
||||
<p class="text-gray-600 text-sm">International Business Owner</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">"As a foreign company entering India, the regulatory landscape seemed daunting. RYS guided us through every step with professionalism and expertise."</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-6 rounded-xl border border-gray-200">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
|
||||
<i class="fas fa-user text-blue-600"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Amit Sharma</h4>
|
||||
<p class="text-gray-600 text-sm">Tech Entrepreneur</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-700">"The team at RegisterYourStartup provided end-to-end support for our international expansion. Their global expertise was invaluable to our success."</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
function showSlide(index) {
|
||||
slides.forEach((slide, i) => {
|
||||
slide.classList.toggle('hidden', i !== index);
|
||||
dots[i].classList.toggle('bg-white', i === index);
|
||||
dots[i].classList.toggle('bg-white/30', i !== index);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,301 +1,480 @@
|
||||
<style>
|
||||
/* Global Styles with AC Repair Aesthetic */
|
||||
:root {
|
||||
--primary-color: #005f99;
|
||||
--secondary-color: #003e66;
|
||||
--light-color: #f5faff;
|
||||
--accent-color: #00aaff;
|
||||
--gray-color: #5f6a7d;
|
||||
}
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
{% block title %}Your Digital Assistant Coach{% endblock %}
|
||||
{% block meta_description %}The app for successful coaches & teams that play to win.{% endblock %}
|
||||
|
||||
section {
|
||||
padding: 40px 0;
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
{% block content %}
|
||||
<section class="bg-[#1a1a1a] text-white py-20">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
|
||||
<!-- Title -->
|
||||
<h2 class="text-6xl font-bold mb-4">FAQ</h2>
|
||||
<p class="text-lg text-gray-300 mb-14">Everything you need to know.</p>
|
||||
|
||||
h2 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: clamp(1.7rem, 4.5vw, 2.3rem);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
color: var(--primary-color);
|
||||
position: relative;
|
||||
}
|
||||
<!-- Category -->
|
||||
<h3 class="text-3xl font-semibold mb-10">Generally</h3>
|
||||
|
||||
h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10px;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
/* FAQ Section Specific Styles */
|
||||
.faq-section {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.faq-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.faq-column {
|
||||
flex: 1;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
background: var(--light-color);
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
background: var(--light-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.faq-question:hover {
|
||||
background: rgba(0, 170, 255, 0.1);
|
||||
}
|
||||
|
||||
.faq-question.active {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
stroke: var(--primary-color);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.faq-question.active .faq-icon {
|
||||
transform: rotate(180deg);
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
padding: 0 18px;
|
||||
background: var(--light-color);
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
color: var(--gray-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.faq-question.active + .faq-answer {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
section {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.faq-container {
|
||||
max-width: 95%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.faq-column {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
section {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.faq-container {
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
font-size: 0.85rem;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.faq-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
{% if show_sample %}
|
||||
<section class="faq-section">
|
||||
<h2>Frequently Asked <span class="text-primary">Questions</span></h2>
|
||||
<div class="faq-container">
|
||||
<div class="faq-column">
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>How long does an AC repair take?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>Most AC repairs, such as fixing leaks or replacing parts, take 1-2 hours, depending on the issue.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>Do you offer a warranty on repairs?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>We provide a 90-day warranty on all repairs and parts for your peace of mind.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>Can you service commercial AC units?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>Yes, we service both residential and commercial AC systems, including central and ductless units.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-column">
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>How much does an AC repair cost?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>Costs vary by unit type and issue, typically ranging from $100 to $500. Contact us for a free quote.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>Do I need to schedule a service?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>Appointments are recommended for faster service, but we also accept walk-in diagnostics.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>What AC brands do you repair?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>We repair Daikin, Carrier, LG, Mitsubishi Electric, Trane, Samsung, and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FAQ Item 1 (Open by default) -->
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-indigo-500 text-white p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
×
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
What is the B42 Coach Zone?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 block">
|
||||
The B42 Coach Zone is the desktop solution for coaches and clubs. Different roles come with different permissions,
|
||||
enabling the entire club to collaborate across teams<br><br>
|
||||
Coaches can easily create appointments, plan match days and team training,
|
||||
send load assessments and workouts, edit player data,
|
||||
and view statistics and insights.<br><br>
|
||||
Depending on their permissions, athletic trainers can also distribute workout and load assessments,
|
||||
conduct performance tests, manually enter results, or leave notes about injured players.<br><br>
|
||||
Players can make entries in the team's account.<br><br>
|
||||
This way, all data is in one place and everyone is informed.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
<section class="faq-section">
|
||||
<h2>{{ faq_section_name|default:"Frequently Asked Questions"|truncatechars:25 }}</h2>
|
||||
<div class="faq-container">
|
||||
<div class="faq-column">
|
||||
{% for faq in faq_list %}
|
||||
<div class="faq-item">
|
||||
<button class="faq-question">
|
||||
<span>{{ faq.question|default:"How long does an AC repair take?" }}</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24">
|
||||
<path d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="faq-answer">
|
||||
<p>{{ faq.answers|default:"Most AC repairs, such as fixing leaks or replacing parts, take 1-2 hours, depending on the issue." }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- FAQ Item 2 -->
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
What is the B42 Performance App?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
The B42 Performance App is the solution for players. Workouts, load assessments, and appointments created by the coach in the Coach Zone appear on the app in real time and can be completed conveniently and clearly by the players. They can complete additional training sessions and compete with their team and players worldwide in the team feed.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
Why should my team use B42?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
Only together can you achieve your goals. But sometimes it's difficult to keep track of everything.
|
||||
With B42, you can organize match days and team training sessions, plan and share the team lineup,
|
||||
track your players' athletic achievements and progress, and distribute prevention, fitness,
|
||||
and technical workouts individually according to the team's performance level and workload.B42 –
|
||||
The all-in-one solution for teams that want more.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
Can I use B42 without a team?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
Can't convince your team to use the B42 app? No problem. You can also register as an individual player. Whether you're fit or injured, create your personalized training plan, perfectly tailored to the season and your performance level. Get your player card now, just like in FIFA, work specifically on your strengths and weaknesses, and compete against players worldwide!
|
||||
<br><br>
|
||||
B42 – for the best season of your life.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
Which league is B42 suitable for?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
The league doesn't matter – only your desire to improve and explore new paths. Training is individually tailored to each player's skill level. You can find more information in the team solution.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Duplicate FAQ items below if needed -->
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
Which league is B42 suitable for?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
The league doesn't matter – only your desire to improve and explore new paths. Training is individually tailored to each player's skill level. You can find more information in the team solution.
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="text-3xl font-semibold mb-10">training</h3>
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
How often should I run a performance test?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
Ideally, test yourself every four to six weeks. Shorter periods of time make no sense as the body needs time to adapt. By the way, you can find out more about the theory behind the tests in the blog article about Performance tests .
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
What is the advantage of B42 compared to other fitness apps?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
B42 is 100% designed for footballers.
|
||||
<br><br>
|
||||
We ourselves are out on the pitch in all kinds of weather, even on muddy fields, so we know exactly what's really important in football. We noticed that almost all amateur players lacked access to good training and rehabilitation facilities.
|
||||
<br><br>
|
||||
So we sought out experts and tried to change that. Our team of professional athletes, sports physicians, therapists, and coaches combines all the experience and knowledge from elite sports into one app.</p>
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
What are the benefits of training with B42?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
With B42, you'll lay the foundation to perform at your peak fitness level for the full 90 minutes on the pitch. Work on your power with our football app and get yourself into a physical condition that will boost your tackle success rate.
|
||||
<br><br>
|
||||
Improve your football-specific stamina and prevent dips in performance during matches. Become faster and more agile with our supplementary football training – and win crucial sprint duels. And if you're a goalkeeper, we've got something for you too.</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
At what stage of the season can I train with B42?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
In absolutely everything. Whether it's running training during the winter break, mobility and recovery training during preseason, or ball-specific drills during the season. B42 is your mobile coach for the entire season.
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
What is the B42 Gamechanger?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
The B42 Gamechanger is the combined expertise of our team of renowned sports physicians, athletic trainers, and professional athletes.
|
||||
<br><br>
|
||||
Whether you're fit or injured, based on your input regarding the season phase, performance level, position, and training days, we automatically create a 6-week personalized training plan perfectly tailored to you. This allows you to effectively work on your strengths and weaknesses at any time, even without prior knowledge.
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
How does the player card work?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
Only those who know their current status can improve sustainably. That's why, in collaboration with our expert team of doctors, therapists, and athletic trainers, we've designed the B42 performance tests, also known as the Champions Workouts.
|
||||
<br><br>
|
||||
Based on the results, you'll receive scores in strength, mobility, endurance, and speed. This allows you to use the B42 Workouts or the appropriate Gamechanger to specifically target your strengths and weaknesses, and to regularly monitor your progress with further performance tests.
|
||||
<br><br>
|
||||
Plus, you can use your Playercard to compare yourself with footballers worldwide!
|
||||
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
How often should I perform a performance test?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
Ideally, you should test yourself every four to six weeks. Shorter intervals are pointless, as the body needs time to adapt. You can find more information about the theory behind the tests in the blog article on performance tests .
|
||||
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
How do I protect myself from overtraining?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
If you've made it through the first two weeks of the Gamechanger program, your body will already be more accustomed to it and better able to handle the overall training load. However, if you're feeling very tired one day, it's best to skip the workout. Remember that you're training to improve, not just to tick off a workout. Push yourself to your limit, but always listen to your body.
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="text-3xl font-semibold mb-10">Administration & Support</h3>
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
How can I cancel my B42 subscription?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
If you subscribed to the Performance App through the Apple App Store or Google Play Store, you can cancel your subscription in the respective app store's subscription management section.
|
||||
<br><br>
|
||||
If you subscribed through our website, you can cancel your subscription via a link in the email you received upon signup. Look for the email from Stripe in your inbox. You will find a cancellation link there.
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
Who can I contact if I have questions?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
We've compiled answers to the most frequently asked questions about our products in our Help Center .
|
||||
<br><br>
|
||||
If we haven't been able to answer your question, please feel free to contact our customer support at support@b-42.com.
|
||||
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
How can I delete my B42 account?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
|
||||
You can delete your B42 account via the app. In the settings under your profile, you can use the "Delete Account" button. Your personal data will be deleted immediately. If you have any problems, please feel free to contact our support team.
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
How can I delete my B42 Nutrition account?
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
|
||||
You can delete your Nutrition account via the Nutrition app. In the settings under your profile, you can use the "Delete profile" button. Your personal data will be deleted immediately. If you have any problems, please feel free to contact our support team.
|
||||
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="mb-10">
|
||||
<button
|
||||
onclick="toggleFAQ(this)"
|
||||
class="w-full flex items-start gap-6 group"
|
||||
>
|
||||
<span class="bg-lime-400 text-black p-3 rounded-full text-xl w-12 h-12 flex items-center justify-center flex-shrink-0">
|
||||
+
|
||||
</span>
|
||||
<div class="text-left">
|
||||
<h4 class="text-xl font-semibold mb-3">
|
||||
|
||||
|
||||
|
||||
GPS running tracking stops (Android)
|
||||
</h4>
|
||||
<p class="faq-answer text-gray-300 text-sm leading-6 hidden">
|
||||
|
||||
|
||||
Unfortunately, every manufacturer handles shutting down apps differently to save battery. Here you can find instructions for the usual manufacturers on how to fix the problem:
|
||||
<br><br>
|
||||
If you still have problems, feel free to contact our support via the customer service form .
|
||||
</p></div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
document.querySelectorAll('.faq-question').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const currentlyActive = document.querySelector('.faq-question.active');
|
||||
if (currentlyActive && currentlyActive !== button) {
|
||||
currentlyActive.classList.remove('active');
|
||||
currentlyActive.nextElementSibling.style.maxHeight = 0;
|
||||
}
|
||||
function toggleFAQ(btn) {
|
||||
const answer = btn.querySelector(".faq-answer");
|
||||
const icon = btn.querySelector("span");
|
||||
|
||||
button.classList.toggle('active');
|
||||
const answer = button.nextElementSibling;
|
||||
if (button.classList.contains('active')) {
|
||||
answer.style.maxHeight = answer.scrollHeight + 'px';
|
||||
} else {
|
||||
answer.style.maxHeight = 0;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
answer.classList.toggle("hidden");
|
||||
|
||||
if (answer.classList.contains("hidden")) {
|
||||
icon.textContent = "+";
|
||||
icon.classList.remove("bg-indigo-500", "text-white");
|
||||
icon.classList.add("bg-lime-400", "text-black");
|
||||
} else {
|
||||
icon.textContent = "×";
|
||||
icon.classList.remove("bg-lime-400", "text-black");
|
||||
icon.classList.add("bg-indigo-500", "text-white");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
@@ -1,393 +1,522 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static%}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Secretarial Compliance Services | Register Your Startup{% endblock %}
|
||||
{% block meta_description %}Expert secretarial compliance services for startups in India and beyond. Ensure smooth corporate governance with our comprehensive compliance solutions.{% endblock %}
|
||||
{% block title %}Your Digital Assistant Coach{% endblock %}
|
||||
{% block meta_description %}The app for successful coaches & teams that play to win.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<style>
|
||||
/* Glassmorphism Effect */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* Custom Scrollbar */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||
::-webkit-scrollbar-thumb { background: #6b7280; border-radius: 4px; }
|
||||
/* Smooth animations */
|
||||
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
|
||||
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); }
|
||||
/* Gradient text */
|
||||
.gradient-text { background: linear-gradient(90deg, #4f46e5, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50">
|
||||
<!-- Navigation would be included from base.html -->
|
||||
<section class="bg-black py-20 relative overflow-hidden">
|
||||
<!-- Decorative lime curved lines background (top-right) -->
|
||||
<div class="absolute top-0 right-0 w-full max-w-2xl opacity-30 pointer-events-none -z-10">
|
||||
<img
|
||||
src="https://www.shutterstock.com/image-vector/lime-green-wavy-lines-on-600nw-2639041765.jpg"
|
||||
alt=""
|
||||
class="w-full h-auto object-cover"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="py-16 md:py-24 bg-[#B6C3FD]">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col md:flex-row items-center">
|
||||
<div class="md:w-1/2 mb-10 md:mb-0">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4 leading-tight pt-10">
|
||||
Our <span class="gradient-text">Leadership</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-700 mb-8 max-w-xl">
|
||||
Meet the experienced professionals guiding RegisterYourStartup.com towards excellence in business incorporation and global expansion.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<a href="#board" class="bg-indigo-600 text-white px-8 py-3 rounded-full font-medium hover:bg-indigo-700 transition text-center">Meet Our Board</a>
|
||||
<a href="{% url 'contact_us_form' %}" class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-indigo-50 transition text-center">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 flex justify-center relative">
|
||||
<div class="w-80 h-80 bg-gradient-to-br from-indigo-200 to-purple-200 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-users text-6xl text-indigo-600"></i>
|
||||
</div>
|
||||
<div class="absolute -top-4 -right-4 w-40 h-40 bg-gradient-to-br from-pink-200 to-orange-200 rounded-full opacity-70"></div>
|
||||
<div class="absolute -bottom-4 -left-4 w-32 h-32 bg-gradient-to-br from-green-200 to-blue-200 rounded-full opacity-70"></div>
|
||||
<div class="max-w-7xl mx-auto px-6 relative z-10">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<!-- Left: Text Content -->
|
||||
<div class="space-y-10 text-white">
|
||||
<h1 class="text-5xl lg:text-6xl font-bold leading-tight">
|
||||
Your digital<br>assistant coach
|
||||
</h1>
|
||||
<p class="text-xl text-gray-300">
|
||||
The app for successful coaches & teams that play to win.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
<a href="#" class="inline-block px-8 py-4 bg-gradient-to-r from-purple-500 to-blue-500 text-white font-semibold rounded-xl hover:from-purple-600 hover:to-blue-600 transition duration-300">
|
||||
Start now
|
||||
</a>
|
||||
<a href="#" class="inline-block px-8 py-4 bg-white text-gray-900 font-semibold rounded-xl hover:bg-gray-100 transition duration-300">
|
||||
Learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CEO Message Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Message from Our CEO</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Leading with expertise and commitment to your success</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-4xl mx-auto">
|
||||
<div class="md:flex">
|
||||
<div class="md:w-1/3 bg-gradient-to-br from-indigo-500 to-purple-600 p-8 flex flex-col items-center justify-center text-white">
|
||||
<div class="w-50 h-50 bg-white mb-6 flex items-bottom justify-center overflow-hidden">
|
||||
<!-- Placeholder for CEO image -->
|
||||
<img src="{% static 'img/ceo_image.jpg' %}" alt="User" class="w-full h-full">
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2 ">Kashif Raza</h3>
|
||||
<p class="text-indigo-100 text-center">Founder & CEO</p>
|
||||
<div class="mt-4 flex space-x-4">
|
||||
<a href="#" class="text-white hover:text-indigo-200">
|
||||
<i class="fab fa-linkedin text-xl"></i>
|
||||
</a>
|
||||
<a href="#" class="text-white hover:text-indigo-200">
|
||||
<i class="fab fa-twitter text-xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-2/3 p-8">
|
||||
<div class="mb-6">
|
||||
<h4 class="text-xl font-semibold text-gray-900 mb-4">Welcome Entrepreneurs,</h4>
|
||||
<p class="text-gray-700 mb-4">
|
||||
At RegisterYourStartup.com, we are dedicated to making business incorporation and expansion effortless by providing comprehensive legal, regulatory, and compliance support. Our mission is to empower entrepreneurs like you to focus on building and scaling your vision while we handle the complexities of business setup and its compliances thereafter.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
With extensive expertise in corporate law and compliance, Mr. Raza is a proud member of the All India Bar Association, Delhi High Court Bar Association, and a Fellow member of the Institute of Company Secretaries of India. Additionally, he holds certifications in VAT, GST, POSH, Labour Laws, and Company Incorporation. Mr Raza have hands-on experience in FEMA (FDI), GST, and has extensively worked in establishing foreign Subsidiary Companies/Branch Offices across India, United States of America, The GCC (Dubai, Riyadh), Singapore, Malaysia, Phillipines, China, Hong Kong, Bangladesh, Srilanka and Thailand.
|
||||
</p>
|
||||
<p class="text-gray-700 mb-4">
|
||||
Whether you are a startup, SME, or a multinational enterprise, RegisterYourStartup.com is here to be your trusted partner in business formation, compliance, and expansion—both in India and globally.
|
||||
</p>
|
||||
<p class="text-gray-700">
|
||||
Let's build your success story together!
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-6">
|
||||
<p class="text-gray-800 font-medium">Warm regards,</p>
|
||||
<p class="text-gray-900 font-bold">Kashif Raza</p>
|
||||
<p class="text-gray-600">Founder & CEO, registeryourstartup.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Board of Directors Section -->
|
||||
<section id="board" class="py-16 bg-gray-50">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Board of Directors</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Our experienced leadership team driving global business success</p>
|
||||
<!-- Right: Layered Images -->
|
||||
<div class="relative h-[500px] lg:h-[650px]">
|
||||
<!-- Back layer: team1a (aerial team huddle - shaped like a circle) -->
|
||||
<div class="absolute inset-0 overflow-hidden shadow-2xl opacity-90">
|
||||
<img
|
||||
src="{% static 'images/team1a.jpg' %}"
|
||||
alt="Soccer team in motivational huddle circle on the field"
|
||||
class="w-full h-full object-cover rounded-tl-[25%]"
|
||||
>
|
||||
</div>
|
||||
<!-- Front layer: team1 (coach with tactical board) - positioned to overlap nicely -->
|
||||
<div class="absolute bottom-0 right-[-80px] w-full max-w-2xl rounded-3xl">
|
||||
<img
|
||||
src="{% static 'images/team1.png' %}"
|
||||
alt="Soccer coach explaining tactics with board to players"
|
||||
class="w-full h-full object-cover"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Managing Partner -->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Managing Partners</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Tabish Raza -->
|
||||
<div class="bg-white shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class="flex justify-center items-center h-48">
|
||||
<img src="/static/img/adv.avif" alt="Tabish Raza" class="w-48 h-48 rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Tabish Raza</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">Advocate / Managing Partner</p>
|
||||
<p class="text-gray-700">Tabish Raza, an Advocate and Managing Partner, brings exceptional legal expertise and strategic leadership to the team.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-16 px-4 max-w-6xl mx-auto">
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-sm text-blue-600 mb-4">Have time for what really counts:</p>
|
||||
<h2 class="text-4xl font-bold text-gray-900">Make your team better and celebrate success</h2>
|
||||
</div>
|
||||
|
||||
<!-- Rachel China -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class="flex justify-center items-center">
|
||||
<img src="/static/img/rachal.avif"
|
||||
alt="Rachal"
|
||||
class="w-48 h-48 rounded-full object-cover object-top">
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-lg mb-12 max-w-3xl mx-auto">
|
||||
So that you can develop your full potential as a coach and get the best out of your team, we provide you with your digital assistant trainer. It saves you valuable time and takes care of:
|
||||
</p>
|
||||
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Rachel China</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">CFA - China & Hong Kong Senior Partner</p>
|
||||
<p class="text-gray-700">Rachel is the CFA (China and Hong Kong Senior Partner) at Register Your Startup, providing expert guidance on business incorporation and financial strategies.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Malang Shaikh -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class="flex justify-center items-center">
|
||||
<img src="/static/img/malang.avif" alt="Malang" class="w-48 h-48 rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Malang Shaikh</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">Advocate / COO</p>
|
||||
<p class="text-gray-700">Malang Shaikh, an Advocate and Overseas Head, excels in managing international operations with legal proficiency and a global perspective.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-12">
|
||||
<!-- Organization -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">organization</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">He organizes your team.<br><span class="text-green-600 font-medium">Free. 24/7.</span></p>
|
||||
<p class="text-sm text-gray-600">Squad planning, team calendar, training participation and much more.</p>
|
||||
</div>
|
||||
|
||||
<!-- Senior Partners -->
|
||||
<div class="mb-16">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Senior Partners</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Alagappan Perinan -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class=" flex items-center justify-center ">
|
||||
<img src="/static/img/alagpa.avif" alt="Alagpa" class="w-48 h-48 rounded-full object-top">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Alagappan Perinan</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">CA - Singapore Senior Partner</p>
|
||||
<p class="text-gray-700">Alagappan Perinan, a Chartered Accountant and Senior Associate Partner – Singapore, leads with financial expertise and drives business growth in the Singaporean market.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rashika Ahuja -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class=" flex items-center justify-center">
|
||||
<img src="/static/img/rashika.avif" alt="Rashika" class="w-48 h-48 rounded-full object-top">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Rashika Ahuja</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">CA - India Partner</p>
|
||||
<p class="text-gray-700">CA Rashika Ahuja is a qualified Chartered Accountant and helps in Direct tax and overseas tax planning and compliances in India.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Venkatachalaman -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class=" flex items-center justify-center">
|
||||
<img src="/static/img/venka.avif" alt="Venka" class="w-48 h-48 rounded-full object-cover">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Venkatachalaman</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">CA - Malaysian Senior Partner</p>
|
||||
<p class="text-gray-700">Venkatachalaman, a Chartered Accountant and Senior Associate Partner – Malaysia, provides expert financial leadership and strategic direction for the region.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Motivation -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">motivation</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">It motivates your team.<br><span class="text-green-600 font-medium">Every day.</span></p>
|
||||
<p class="text-sm text-gray-600">Cohesion and motivation through an open feedback culture and leader boards.</p>
|
||||
</div>
|
||||
|
||||
<!-- Company Secretaries -->
|
||||
<!-- Team Development -->
|
||||
<div class="text-center">
|
||||
<div class="flex justify-center mb-6">
|
||||
<div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-2">team development</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">He trains your team.<br><span class="text-green-600 font-medium">All year round.</span></p>
|
||||
<p class="text-sm text-gray-600">Individual training plans for athletics, technique and after injuries.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="max-w-6xl mx-auto mt-28 mb-12 overflow-hidden flex flex-col lg:flex-row">
|
||||
<!-- Image Section -->
|
||||
<div class="w-full lg:w-1/2 relative">
|
||||
<img
|
||||
src="{% static 'images/team2.png' %}"
|
||||
alt="Tennis coach celebrating victory with arms raised"
|
||||
class="w-full h-full object-cover"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="w-full lg:w-1/2 p-10 lg:p-16 flex flex-col justify-center bg-gray-50">
|
||||
<p class="text-blue-500 text-sm font-semibold mb-4">Try it now</p>
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-8">
|
||||
Get your assistant coach on the team
|
||||
</h2>
|
||||
|
||||
<ul class="space-y-6 mb-10">
|
||||
<li class="flex items-start">
|
||||
<span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
|
||||
<p class="text-gray-700 text-lg">
|
||||
7-day trial period for your assistant trainer — get one week of free support
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
|
||||
<p class="text-gray-700 text-lg">
|
||||
Your assistant trainer shows you all features — you keep full control
|
||||
</p>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-purple-500 text-2xl mr-4 mt-1">✔</span>
|
||||
<p class="text-gray-700 text-lg">
|
||||
Save yourself time: Let your assistant coach organize, motivate and develop your team
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="bg-lime-400 hover:bg-lime-500 text-black font-bold text-xl py-4 px-10 rounded-lg shadow-lg transition duration-300 w-fit">
|
||||
Try it now for free
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="max-w-6xl mx-auto mt-28 mb-12 overflow-hidden flex flex-col lg:flex-row">
|
||||
<!-- Content Section (Left) -->
|
||||
<div class="w-full lg:w-1/2 p-10 lg:p-20 flex flex-col justify-center">
|
||||
<p class="text-blue-500 text-sm font-semibold mb-4">Fit team - without injuries</p>
|
||||
<h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mb-8">
|
||||
Get the most out of your preparation!
|
||||
</h2>
|
||||
<p class="text-gray-700 text-lg mb-10 leading-relaxed">
|
||||
In preparation for the second half, the foundation for success is laid! With individual training plans and optimal load management, our assistant trainer will assist you during this phase - and will also be there for you in case of injuries.
|
||||
</p>
|
||||
<button class="bg-lime-400 hover:bg-lime-500 text-black font-bold text-xl py-4 px-10 rounded-lg shadow-lg transition duration-300 w-fit">
|
||||
Try it now for free
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Image Section (Right) -->
|
||||
<div class="w-full lg:w-1/2 relative bg-gray-50 flex items-center justify-center p-8">
|
||||
<img
|
||||
src="{% static 'images/team3.png' %}"
|
||||
alt="Mockup of smartphones displaying dark-themed sports coaching app with dashboard, training plans, and player stats"
|
||||
class="w-full max-w-lg object-contain drop-shadow-2xl"
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="max-w-7xl mt-36 mb-28 mx-auto">
|
||||
<!-- Top Intro -->
|
||||
<div class="text-left mb-10">
|
||||
<p class="text-blue-600 text-sm font-semibold mb-2">
|
||||
Organization, motivation & team development
|
||||
</p>
|
||||
<h2 class="text-2xl md:text-4xl font-bold text-gray-900 leading-tight">
|
||||
This is what your digital assistant trainer can do<br />
|
||||
for you
|
||||
</h2>
|
||||
<p class="text-gray-700 text-lg mt-6 max-w-3xl">
|
||||
Focus on what counts: making your team better and celebrating success together.
|
||||
Your digital assistant trainer will do the rest.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Layout -->
|
||||
<div class="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
|
||||
|
||||
<!-- LEFT IMAGE AREA -->
|
||||
<div class="w-full lg:w-1/2 flex justify-center">
|
||||
<img
|
||||
id="featureImage"
|
||||
src="{% static 'images/team3.png' %}"
|
||||
class="max-w-full h-auto transition-opacity duration-500 opacity-100 drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT TEXT AREA -->
|
||||
<div class="w-full lg:w-1/2 space-y-10 border-l-4 border-blue-600 pl-6">
|
||||
|
||||
<div class="featureItem cursor-pointer" data-img="{% static 'images/team3.png' %}">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-2">Everything you need to organize it's done.</h3>
|
||||
<p class="text-gray-700">
|
||||
Training a soccer team always involves planning, administration and organization.
|
||||
Topics that take a lot of time but don’t make any player better.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="featureItem cursor-pointer opacity-60" data-img="{% static 'images/team4.png' %}">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-2">Let your team's fire burn.</h3>
|
||||
<p class="text-gray-700">
|
||||
Increase training participation. Through transparent communication and a
|
||||
motivating and performance-related feedback culture.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="featureItem cursor-pointer opacity-60" data-img="{% static 'images/team5.png' %}">
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-2">Get the most out of your players.</h3>
|
||||
<p class="text-gray-700">
|
||||
Successful coaches not only make their team better, but also every team member.
|
||||
Professional coaches have an entire coaching staff for this. You have your
|
||||
digital assistant trainer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-black py-28">
|
||||
<div class="max-w-7xl mx-auto ">
|
||||
<!-- Heading -->
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl text-white md:text-4xl font-bold">A good assistant coach is priceless. Until now.</h2>
|
||||
<p class="text-gray-300 mt-2">7-day free trial period. No credit card required!</p>
|
||||
</div>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||
|
||||
<!-- Free -->
|
||||
<div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col">
|
||||
<h3 class="text-xl font-semibold mb-3">Free</h3>
|
||||
<p class="text-4xl font-bold">€0</p>
|
||||
<p class="text-sm text-gray-600 mb-6">Free forever</p>
|
||||
|
||||
<button class="w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition">
|
||||
Get started now
|
||||
</button>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team calendar</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Event feedback</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Announcements</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team Treasury</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team absences</li>
|
||||
</ul>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
<p class="text-gray-500 text-sm">Access for a team of 25 players</p>
|
||||
</div>
|
||||
|
||||
<!-- Basic -->
|
||||
<div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col">
|
||||
<h3 class="text-xl font-semibold mb-3">Basic</h3>
|
||||
<p class="text-4xl font-bold">€299.90</p>
|
||||
<p class="text-sm text-gray-600 mb-6">Annual payment</p>
|
||||
|
||||
<button class="w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition">
|
||||
Get started now
|
||||
</button>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Everything from Free</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Athletic, Technical & Rehab Training</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Individual performance tests & workouts</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team challenges</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Team leaderboards</li>
|
||||
</ul>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
<p class="text-gray-500 text-sm">Access for a team of 25 players</p>
|
||||
</div>
|
||||
|
||||
<!-- Pro -->
|
||||
<div class="bg-white text-gray-900 rounded-2xl px-8 py-10 shadow-xl flex flex-col relative">
|
||||
|
||||
<!-- Discount Badge -->
|
||||
<span class="absolute top-3 right-4 text-xs bg-lime-400 text-black font-bold px-2 py-1 rounded">50% OFF</span>
|
||||
<span class="absolute top-3 left-4 text-xs bg-indigo-100 text-indigo-700 font-bold px-2 py-1 rounded">Popular</span>
|
||||
|
||||
<h3 class="text-xl font-semibold mb-3">Pro</h3>
|
||||
|
||||
<p class="text-4xl font-bold">€499.90
|
||||
<span class="text-gray-400 line-through text-lg">€999</span>
|
||||
</p>
|
||||
|
||||
<p class="text-sm text-gray-600 mb-6">Annual payment</p>
|
||||
|
||||
<button class="w-full py-3 rounded-md bg-indigo-500 text-white font-semibold hover:bg-indigo-600 transition">
|
||||
Get started now
|
||||
</button>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
|
||||
<ul class="space-y-3 text-gray-700">
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Everything from Basic</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Personalized training plans</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Individual performance tests & workouts</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Load control</li>
|
||||
<li class="flex items-start gap-2"><span class="text-lime-500">✔</span> Workout editor</li>
|
||||
</ul>
|
||||
|
||||
<!-- Blue highlight box -->
|
||||
<div class="bg-indigo-100 text-indigo-700 rounded-lg p-4 mt-6 font-semibold text-sm">
|
||||
Plus: Premium access for all players<br>
|
||||
<span class="font-normal">25x B42 Premium App included<br>(Value: 25 × 99.99€ = 2499.75€)</span>
|
||||
</div>
|
||||
|
||||
<div class="border-t my-6"></div>
|
||||
<p class="text-gray-500 text-sm">Access for a team of 25 players</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Bottom banner -->
|
||||
<div class="mt-14 bg-white text-center rounded-2xl py-10 px-6 border border-white/10">
|
||||
<p class="text-lg font-medium">Are you looking for a solution for the entire club or an academy?</p>
|
||||
<p class="text-gray-300 mt-1">Individualized offers for the entire club/academy and all teams</p>
|
||||
<button class="mt-6 px-6 py-3 bg-indigo-500 hover:bg-indigo-600 rounded-md font-semibold text-white">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- =============================
|
||||
TESTIMONIALS + CTA SECTION
|
||||
============================= -->
|
||||
<section class="bg-[#F5F5F7] py-20 px-6">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
|
||||
<!-- Heading -->
|
||||
<h2 class="text-center text-2xl md:text-3xl font-semibold mb-12">
|
||||
Visionary trainers & clubs trust us
|
||||
</h2>
|
||||
|
||||
<!-- Slider container -->
|
||||
<div class="overflow-x-auto scrollbar-hide">
|
||||
<div class="flex space-x-6 min-w-max pb-4">
|
||||
|
||||
<!-- Testimonial Card -->
|
||||
<div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“Football training starts at home. The progress of our Academy players
|
||||
has been unbelievable — that's exactly what we've been missing.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold text-gray-900 mb-8 text-center">Company Secretaries</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<!-- Mirza Aftab Alam -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class=" flex items-center justify-center">
|
||||
<img src="/static/img/mirza.avif" alt="Mirza" class="w-48 h-48 rounded-full object-top">
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Mirza Aftab Alam</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">Company Secretary (Global)</p>
|
||||
<p class="text-gray-700">Mirza Aftab Alam, Company Secretary (Global), ensures corporate compliance and governance across international operations, bringing precision and integrity to global regulatory frameworks.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Anusree Chatatarjee -->
|
||||
<div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-lift">
|
||||
<div class="h-48 flex items-center justify-center">
|
||||
<div class=" flex items-center justify-center ">
|
||||
<i class="fas fa-handshake text-4xl text-purple-600"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<h4 class="text-xl font-bold text-gray-900 mb-2 text-center">Anusree Chatatarjee</h4>
|
||||
<p class="text-indigo-600 font-semibold mb-4 text-center">Company Secretary (India Partner)</p>
|
||||
<p class="text-gray-700">Anusree Chatatarjee is Fellow Company Secretary (India Partner) helps in Custom handling and Foreign Company establishment.</p>
|
||||
<div class="mt-4 flex space-x-3">
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
<a href="#" class="text-gray-400 hover:text-indigo-600">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
|
||||
<p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global Expertise Section -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Global Expertise</h2>
|
||||
<p class="text-gray-600 max-w-2xl mx-auto">Strategic partnerships across key international markets</p>
|
||||
<!-- Duplicate this card for more testimonials -->
|
||||
<div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“In team training, the boys naturally prefer to be on the field than
|
||||
stability workouts. With B42, we outsource this & save time.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
|
||||
<p class="text-xs text-gray-500">DFI Bad Aibling</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 max-w-5xl mx-auto">
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-flag text-indigo-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">India</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-landmark text-purple-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">USA</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-building text-blue-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">UAE</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-university text-green-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Singapore</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-globe-asia text-yellow-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Malaysia</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-dragon text-red-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">China</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-shopping-bag text-indigo-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Hong Kong</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-map text-purple-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Bangladesh</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-leaf text-blue-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Sri Lanka</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-sun text-green-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Thailand</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-island-tropical text-yellow-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Philippines</p>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-4 rounded-lg text-center">
|
||||
<i class="fas fa-oil-well text-red-600 text-2xl mb-2"></i>
|
||||
<p class="font-medium text-gray-800">Saudi Arabia</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“Football training starts at home. The progress of our Academy players
|
||||
has been unbelievable — that's exactly what we've been missing.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
|
||||
<p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-16 bg-gradient-to-r from-indigo-500 to-purple-600">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Ready to Work with Our Expert Team?</h2>
|
||||
<p class="text-indigo-100 text-lg mb-8 max-w-2xl mx-auto">Leverage our global expertise and experienced leadership for your business success</p>
|
||||
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
|
||||
<a href="{% url 'contact_us_form' %}" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-medium hover:bg-indigo-50 transition">Contact Our Team</a>
|
||||
<a href="{% url 'book_appointment' %}" class="border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-600 transition">Book Appointment</a>
|
||||
<!-- Duplicate this card for more testimonials -->
|
||||
<div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“In team training, the boys naturally prefer to be on the field than
|
||||
stability workouts. With B42, we outsource this & save time.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
|
||||
<p class="text-xs text-gray-500">DFI Bad Aibling</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> <div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“Football training starts at home. The progress of our Academy players
|
||||
has been unbelievable — that's exactly what we've been missing.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Leonardo Pinto</p>
|
||||
<p class="text-xs text-gray-500">ELLE FOOTBALL ACADEMY</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
<!-- Duplicate this card for more testimonials -->
|
||||
<div class="bg-white shadow-sm rounded-2xl p-6 w-80 flex-shrink-0">
|
||||
<div class="text-yellow-400 mb-2">★★★★★</div>
|
||||
<p class="text-gray-700 text-sm mb-6">
|
||||
“In team training, the boys naturally prefer to be on the field than
|
||||
stability workouts. With B42, we outsource this & save time.”
|
||||
</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="https://via.placeholder.com/40" class="w-8 h-8 rounded-full" alt="">
|
||||
<div>
|
||||
<p class="text-gray-900 text-sm font-semibold">Fabian Stierle</p>
|
||||
<p class="text-xs text-gray-500">DFI Bad Aibling</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add as many as needed -->
|
||||
<!-- ... copy & customize ... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Navigation (static demo icons) -->
|
||||
<div class="flex justify-center gap-3 mt-4">
|
||||
<button class="w-8 h-8 grid place-items-center bg-white shadow rounded-full hover:bg-gray-100">
|
||||
←
|
||||
</button>
|
||||
<button class="w-8 h-8 grid place-items-center bg-white shadow rounded-full hover:bg-gray-100">
|
||||
→
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- CTA Banner -->
|
||||
<div class="mt-20 max-w-6xl mx-auto bg-indigo-500 text-white rounded-2xl p-6
|
||||
flex flex-col lg:flex-row items-center justify-between gap-10">
|
||||
|
||||
<!-- CTA Text -->
|
||||
<div class="max-w-sm flex-1">
|
||||
<h3 class="text-2xl md:text-3xl font-semibold mb-4">Start your free trial now</h3>
|
||||
<p class="text-white/80 text-sm mb-6">
|
||||
Try it out: Use your digital assistant trainer and save yourself time.
|
||||
It’s free.
|
||||
</p>
|
||||
<button class="px-5 py-3 bg-black rounded-md text-white text-sm font-semibold hover:bg-gray-900 transition">
|
||||
Try it now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- CTA Image -->
|
||||
<img
|
||||
src="{% static 'images/team3.png' %}"
|
||||
class="rounded-xl w-full lg:w-1/2"
|
||||
alt="app preview"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const featureItems = document.querySelectorAll(".featureItem");
|
||||
const featureImage = document.getElementById("featureImage");
|
||||
|
||||
featureItems.forEach(item => {
|
||||
item.addEventListener("click", () => {
|
||||
const newImg = item.getAttribute("data-img");
|
||||
|
||||
// Fade effect
|
||||
featureImage.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
featureImage.src = newImg;
|
||||
featureImage.style.opacity = 1;
|
||||
}, 200);
|
||||
|
||||
// Active visual state
|
||||
featureItems.forEach(f => f.classList.add("opacity-60"));
|
||||
item.classList.remove("opacity-60");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,221 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Press | B42 Partnership Information{% endblock %}
|
||||
{% block meta_description %}To best present your partnership with B42 to your coaches, players, fans and members, we have compiled some helpful information and content for you here.{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<!-- Dark background for the entire page -->
|
||||
<div class="bg-custom-dark text-white min-h-screen">
|
||||
|
||||
<!-- Header with "Press" title -->
|
||||
<header class="py-12 text-center">
|
||||
<h1 class="text-6xl md:text-8xl font-bold uppercase tracking-wider">Press</h1>
|
||||
<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
|
||||
and members, we have compiled some helpful information and content
|
||||
for you here.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="max-w-7xl mx-auto px-6 pb-20">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<!-- Left Column: Sticky Press Kit + Download Button (narrower, sticky on desktop) -->
|
||||
<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>
|
||||
<div class="bg-custom-light rounded-3xl shadow-2xl overflow-hidden">
|
||||
<!-- Single full-cover image instead of grid -->
|
||||
<div class="relative w-full h-40"> <!-- Adjust aspect ratio if needed -->
|
||||
<img
|
||||
src="{% static 'images/press1.jpg' %}"
|
||||
alt="B42 App Previews"
|
||||
class="absolute object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<!-- Optional: small text or nothing, to keep it clean like the screenshot -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Download Button below the press kit (visible on all screens) -->
|
||||
<div class="mt-8 text-center">
|
||||
<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">
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Wider article cards -->
|
||||
<div class="lg:col-span-8 space-y-2">
|
||||
|
||||
<!-- Card 1: 2nd anniversary -->
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bg-[#6366f1] text-white rounded-3xl 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">
|
||||
<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 class="p-8 md:p-12 md:w-2/3 flex flex-col justify-center">
|
||||
<h3 class="text-2xl md:text-3xl font-bold mb-4">
|
||||
2nd anniversary of the B42 Premium Partnership!
|
||||
</h3>
|
||||
<p class="text-lg opacity-90">
|
||||
We say !Thank you! to B42 and look forward to our future together!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Add more cards if needed -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bg-custom-dark {
|
||||
background-color: #0f172a;
|
||||
}
|
||||
.bg-custom-blue {
|
||||
background-color: #818cf8;
|
||||
}
|
||||
.bg-custom-light {
|
||||
background-color: #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,461 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}
|
||||
Privacy Policy | Register Your Startup
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen bg-black flex flex-col justify-between text-white">
|
||||
|
||||
<!-- Main Content Wrapper with same max-width as navbar -->
|
||||
<div class="w-full">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
|
||||
<!-- Upper Section -->
|
||||
<div class="flex flex-col md:flex-row items-center justify-between py-12 md:py-10 gap-12 lg:gap-20">
|
||||
<div class="max-w-lg text-left">
|
||||
<p class="text-blue-400 text-sm mb-2">Training</p>
|
||||
<h1 class="text-5xl md:text-6xl font-bold leading-tight">
|
||||
Football-specific<br>
|
||||
training via app
|
||||
</h1>
|
||||
<p class="text-gray-300 text-xl mt-6">
|
||||
100% for soccer players
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-shrink-0">
|
||||
<img
|
||||
src="{% static 'images/training1.png' %}"
|
||||
alt="Soccer player celebrating on the field"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom CTA Banner (full width, but inner content respects same max-width) -->
|
||||
<!-- 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 -->
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-12">
|
||||
<div class="flex items-center justify-between relative z-10">
|
||||
<p class="text-xl md:text-3xl font-bold text-white leading-tight">
|
||||
Play the best season<br>
|
||||
of your life.
|
||||
</p>
|
||||
|
||||
<!-- Neon yellow ball with bold arrow + hover animation -->
|
||||
<div class="ml-8 relative">
|
||||
<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">
|
||||
<!-- Circle background - neon yellow -->
|
||||
<circle cx="50" cy="50" r="48" fill="#CCFF00" stroke="#000000" stroke-width="3"/>
|
||||
|
||||
<!-- 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>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
@keyframes shine {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(200%); }
|
||||
}
|
||||
.animate-shine {
|
||||
animation: shine 3s infinite linear;
|
||||
}
|
||||
.drop-shadow-glow {
|
||||
filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.8));
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Section 1: The B42 Gamechanger -->
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Personalized training plans</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
The B42 Gamechanger
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
Achieve your goals with the personalized 6-week plans from B42 Gamechanger. Perfectly tailored to your performance level and season stage – whether you're looking to get back on the pitch or maximize your stamina. Optimize your training and become the best footballer you can be!
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"Everyone has to give 100% on the pitch. Then nobody can blame themselves at the end of the season."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg"
|
||||
alt="Daniel Hofer"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Daniel Hofer, Spieler</p>
|
||||
<p class="font-semibold">SpVgg Hankofen-Hailing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training2.png' %}"
|
||||
alt="Soccer players celebrating"
|
||||
class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: Frighteningly effective -->
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training3.png' %}"
|
||||
alt="Soccer players celebrating" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Fitness training</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Frighteningly effective
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
With B42, you'll lay the foundation to perform at your peak fitness level for the full 90 minutes on the pitch.
|
||||
Work on your power with our football app and get yourself into a physical condition that will significantly improve your tackle success rate.
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
“The big advantage of B42 over the gym is clearly that all workouts promote football-specific fitness. This way, our players are actually training something meaningful.”
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg"
|
||||
alt="Tobias Beck"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Tobias Beck, player-coach</p>
|
||||
<p class="font-semibold">SpVgg Hankofen-Hailing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Section 3: -->
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Prevention training</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Safety first
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
The best injury is the one that never happens. With our prevention programs, you can fight back against football injuries. They help you protect yourself from the most common injuries and specifically target the areas you need for greater stability on the pitch.
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"I've completely changed my training ethic. You always think, 'If I don't have anything acute, why should I do anything?' And I think that's been underestimated all along. You can prevent a lot of problems, especially through mobility exercises."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg"
|
||||
alt="Daniel Hofer"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Aleksandro Petrovic, player</p>
|
||||
<p class="font-semibold">TSV Buchbach</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training4.png' %}"
|
||||
alt="Soccer players celebrating"
|
||||
class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training5.png' %}"
|
||||
alt="Soccer players celebrating" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Comeback training</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Come back stronger
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-2">
|
||||
Injuries are unfortunately part of football. But while the pros have access to professional sports medicine every day, your rehabilitation is limited to half an hour of physiotherapy – at most.
|
||||
</p>
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
With B42, you receive professional guidance and return to the pitch stronger. Your path to a full recovery starts here.
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"I have regained my physical fitness and am getting playing time again after the injury."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg"
|
||||
alt="Tobias Beck"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Florian Sommersberger, player</p>
|
||||
<p class="font-semibold">SpVgg Hankofen-Hailing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Ball-specific training
|
||||
</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Professional Skills
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
Tailor-made drills improve precise passing, dribbling, and ball control. Adjust the difficulty level and playfully develop your ball skills. Become a technically skilled footballer!
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"I wish I had had access to such tools and workouts 5 years earlier..."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg"
|
||||
alt="Daniel Hofer"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Bence Tóth, player
|
||||
</p>
|
||||
<p class="font-semibold">SV Straßwalchen (AT)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training6.png' %}"
|
||||
alt="Soccer players celebrating"
|
||||
class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training7.png' %}"
|
||||
alt="Soccer players celebrating" >
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">
|
||||
Performance diagnostics
|
||||
</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Next Level Training
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
Gain detailed insights into strength, mobility, endurance, and speed. With precise data and tailored recommendations, you can specifically address your weaknesses and improve your game. Get the edge on the field!
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"The videos explain very clearly what the players need to do. Afterwards, each player receives their strengths and weaknesses profile. This allows us as coaches to compare players and use the data for further workload management. It was interesting to see where the players have deficits that can be compensated for and where they have already improved compared to their teammates."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://img.heimatsport.de/ezplatform/images/_aliases/detail_teaser_item_image_variation/3/0/4/2/358102403-1-ger-DE/18cdefacf9ac-29-119530096.jpg"
|
||||
alt="Tobias Beck"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Tobias Beck, player-coach</p>
|
||||
<p class="font-semibold">SpVgg Hankofen-Hailing</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-gray-950 py-28 lg:py-36 text-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
|
||||
<!-- Left: Text Content -->
|
||||
<div class="max-w-xl">
|
||||
<p class="text-blue-400 text-sm mb-2">Stress management</p>
|
||||
<h2 class="text-2xl lg:text-4xl font-bold mb-6">
|
||||
Smart instead of harsh
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-300 text-m leading-relaxed mb-4">
|
||||
Maintaining a balance between exertion and recovery is essential not only from session to session, but also in the long term. B42 helps prevent premature performance decline and injuries, and ensures sustainable training progress.
|
||||
</p>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="mt-8">
|
||||
<p class="italic text-m text-gray-200 mb-4">
|
||||
"We can see how much and how intensely players train. Players and coaches can leave notes and give feedback."
|
||||
</p>
|
||||
<div class="flex items-center">
|
||||
<img src="https://image.fupa.net/news/SWW8YCB9vJ9r/2000x1125.jpeg"
|
||||
alt="Daniel Hofer"
|
||||
class="w-12 h-12 rounded-full object-cover mr-4 border-2 border-red-600">
|
||||
<div>
|
||||
<p class="text-sm text-gray-400">Musa Avlayici, U13 Coach</p>
|
||||
<p class="font-semibold">
|
||||
SC Pfullendorf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Mockup -->
|
||||
<div class="relative flex justify-center lg:justify-end">
|
||||
<div class="relative z-10">
|
||||
<img src="{% static 'images/training8.png' %}"
|
||||
alt="Soccer players celebrating"
|
||||
class="w-full max-w-md rounded-3xl shadow-2xl object-cover">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</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 -->
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-8 py-12">
|
||||
<div class="flex items-center justify-between relative z-10">
|
||||
<p class="text-3xl md:text-4xl font-bold text-white leading-tight">
|
||||
Play the best season<br>
|
||||
of your life.
|
||||
</p>
|
||||
|
||||
<!-- Neon yellow ball with bold arrow + hover animation -->
|
||||
<div class="ml-8 relative">
|
||||
<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">
|
||||
<!-- Circle background - neon yellow -->
|
||||
<circle cx="50" cy="50" r="48" fill="#CCFF00" stroke="#000000" stroke-width="3"/>
|
||||
|
||||
<!-- 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>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
@keyframes shine {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(200%); }
|
||||
}
|
||||
.animate-shine {
|
||||
animation: shine 3s infinite linear;
|
||||
}
|
||||
.drop-shadow-glow {
|
||||
filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.8));
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user