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

base setup

Browse Source
This commit is contained in:
anurag.r
2026-01-07 12:09:20 +05:30
commit 0c275efea1
278 changed files with 11228 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
templates/includes/footer.html Executable file
View File

@@ -0,0 +1,149 @@
{% load static %}
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<!-- Mobile Layout: Stacked, centered (visible only on mobile) -->
<div class="space-y-12 md:hidden">
<!-- Logo + Copyright -->
<div class="text-center">
<img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto mx-auto mb-4">
<p class="text-sm">© 2025 SFY GmbH</p>
</div>
<!-- PRODUCTS -->
<div class="text-center">
<h3 class="text-white font-semibold uppercase mb-6">Products</h3>
<ul class="space-y-4 text-lg">
<li><a href="#" class="text-white hover:text-indigo-400 transition">training</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Team solution</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Blog</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Success Stories</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">FAQs</a></li>
</ul>
</div>
<!-- PURSUE -->
<div class="text-center">
<h3 class="text-white font-semibold uppercase mb-6">Pursue</h3>
<ul class="space-y-4 text-lg">
<li><a href="#" class="text-white hover:text-indigo-400 transition">About Us</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">press</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
</ul>
</div>
<!-- LEGAL -->
<div class="text-center">
<h3 class="text-white font-semibold uppercase mb-6">Legal</h3>
<ul class="space-y-4 text-lg">
<li><a href="#" class="text-white hover:text-indigo-400 transition">Terms and Conditions</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Data protection</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">imprint</a></li>
</ul>
</div>
<!-- SOCIAL -->
<div class="text-center">
<h3 class="text-white font-semibold uppercase mb-6">Social</h3>
<ul class="space-y-4 text-lg">
<li><a href="#" class="text-white hover:text-indigo-400 transition">Facebook</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Instagram</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">YouTube</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">TikTok</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">LinkedIn</a></li>
</ul>
</div>
<!-- App Store Buttons (centered, side-by-side) -->
<div class="flex justify-center gap-8">
<a href="#" class="block">
<img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-16 w-auto" />
</a>
<a href="#" class="block">
<img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-16 w-auto" />
</a>
</div>
<!-- Language Selector (centered) -->
<div class="flex justify-center">
<button class="border border-gray-600 rounded px-6 py-3 text-base hover:border-gray-400 transition">
Language ▼
</button>
</div>
</div>
<!-- Desktop Layout: 5 columns (hidden on mobile, shown on md+) -->
<div class="hidden md:grid md:grid-cols-5 gap-8">
<!-- Logo, Copyright, App Buttons, Language -->
<div class="space-y-8">
<div>
<img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto">
</div>
<p class="text-sm">© 2025 SFY GmbH</p>
<!-- App Store Buttons -->
<div class="flex flex-col items-start space-y-4">
<a href="#" class="block">
<img src="{% static 'images/googleplay.png' %}" alt="Get it on Google Play" class="h-12 w-auto" />
</a>
<a href="#" class="block">
<img src="{% static 'images/AppStore.png' %}" alt="Download on the App Store" class="h-12 w-auto" />
</a>
</div>
<!-- Language Selector -->
<div>
<button class="border border-gray-600 rounded px-4 py-2 text-sm hover:border-gray-400 transition">
Language ▼
</button>
</div>
</div>
<!-- PRODUCTS -->
<div>
<h3 class="text-white font-semibold uppercase mb-4">Products</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-white hover:text-indigo-400 transition">training</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Team solution</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Blog</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Success Stories</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">FAQs</a></li>
</ul>
</div>
<!-- PURSUE -->
<div>
<h3 class="text-white font-semibold uppercase mb-4">Pursue</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-white hover:text-indigo-400 transition">About Us</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Jobs</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">press</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Help & Support</a></li>
</ul>
</div>
<!-- LEGAL -->
<div>
<h3 class="text-white font-semibold uppercase mb-4">Legal</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-white hover:text-indigo-400 transition">Terms and Conditions</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Data protection</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">imprint</a></li>
</ul>
</div>
<!-- SOCIAL -->
<div>
<h3 class="text-white font-semibold uppercase mb-4">Social</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-white hover:text-indigo-400 transition">Facebook</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">Instagram</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">YouTube</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">TikTok</a></li>
<li><a href="#" class="text-white hover:text-indigo-400 transition">LinkedIn</a></li>
</ul>
</div>
</div>
</div>
</footer>

30
templates/includes/public_navbar.html Executable file
View File

@@ -0,0 +1,30 @@
{% load static %}
<nav class="bg-[#111111] text-white">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="flex items-center justify-between h-20"> <!-- h-20 ≈ py-5 equivalent for consistent height -->
<!-- Left: Logo -->
<div class="flex items-center">
<img src="{% static 'images/logo.svg' %}" alt="B42 Logo" class="h-10 w-auto">
</div>
<!-- Right: CTA Button (visible on all screens) -->
<div class="flex items-center">
<a href="#" class="bg-white text-black font-bold text-lg px-8 py-3 rounded-full hover:bg-gray-200 transition duration-200">
BOOST YOUR GAME
</a>
</div>
<!-- Mobile menu button (optional - hidden on md+ if you don't need a mobile menu) -->
<!-- Uncomment if you plan to add a mobile menu later -->
<!--
<div class="md:hidden">
<button type="button" class="text-white hover:text-gray-300 focus:outline-none">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
-->
</div>
</div>
</nav>

2
templates/index.html Normal file
View File

@@ -0,0 +1,2 @@
{% extends 'public_base.html' %}

354
templates/public_base.html Normal file
View File

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