Spaces:

flen-crypto
/

fightingfit

Running

📍Next Steps in Build 🔐 Authentication & Subscription Flow: Add social login options (Google, Apple) or just email/password? Membership tier ideas? (e.g. “Gloves Off” = classes only, “Fighter Mode” = full access) 📱 Mobile App Sync: App will sync user plans/progress from web to device and work offline Push notifications will include: “Time to hit the bag” (workout reminder) “Meal prep alert” (based on diet plan) “New video from Tony” 📈 Admin CRM for Tony: Dashboard access via admin.tsx Tony can: See which members are active Upload new content (video tips, classes) Approve or cancel bookings Get alerts on class capacity - Initial Deployment

ba9b24b verified 10 months ago

raw

history blame contribute delete

86.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Fighting Fit Essex - Boxing & Fitness Training</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.hero-video {
	position: relative;
	height: 80vh;
	overflow: hidden;
	}
	.hero-video video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
	}
	.progress-ring {
	transform: rotate(-90deg);
	}
	.progress-ring__circle {
	transition: stroke-dashoffset 0.5s;
	}
	.form-step {
	display: none;
	}
	.form-step.active {
	display: block;
	animation: fadeIn 0.5s ease-in-out;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.workout-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body class="font-sans bg-gray-50">
	<!-- WhatsApp Floating Button -->
	<div class="fixed bottom-6 right-6 z-50">
	<a href="https://wa.me/447700900123" class="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-all flex items-center justify-center">
	<i class="fab fa-whatsapp text-2xl"></i>
	</a>
	</div>

	<!-- Navigation -->
	<nav class="bg-red-700 text-white shadow-lg sticky top-0 z-40">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<i class="fas fa-boxing-glove text-2xl"></i>
	<span class="font-bold text-xl">Fighting Fit Essex</span>
	</div>
	<div class="hidden md:flex items-center space-x-6">
	<a href="#" class="hover:text-yellow-300 transition">Home</a>
	<a href="#about" class="hover:text-yellow-300 transition">About</a>
	<a href="#plan" class="hover:text-yellow-300 transition">Get Your Plan</a>
	<a href="#classes" class="hover:text-yellow-300 transition">Classes</a>
	<a href="#contact" class="hover:text-yellow-300 transition">Contact</a>
	<button id="login-btn" class="bg-white text-red-700 px-4 py-1 rounded-full font-medium hover:bg-gray-100 transition">
	Sign In
	</button>
	</div>
	<button class="md:hidden text-2xl" id="menu-toggle">
	<i class="fas fa-bars"></i>
	</button>
	<a href="/admin" class="hidden md:flex items-center bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-medium px-4 py-1 rounded-full ml-4 transition">
	<i class="fas fa-lock mr-2"></i> Admin
	</a>
	</div>
	<!-- Mobile Menu -->
	<div class="md:hidden hidden bg-red-800 px-4 py-2" id="mobile-menu">
	<a href="#" class="block py-2 hover:text-yellow-300 transition">Home</a>
	<a href="#about" class="block py-2 hover:text-yellow-300 transition">About</a>
	<a href="#plan" class="block py-2 hover:text-yellow-300 transition">Get Your Plan</a>
	<a href="#classes" class="block py-2 hover:text-yellow-300 transition">Classes</a>
	<a href="#contact" class="block py-2 hover:text-yellow-300 transition">Contact</a>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="hero-video relative">
	<video autoplay muted loop class="w-full h-full object-cover">
	<source src="https://assets.mixkit.co/videos/preview/mixkit-boxer-training-with-punching-bag-1230-large.mp4" type="video/mp4">
	</video>
	<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
	<div class="text-center px-4">
	<h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Train Like A Fighter</h1>
	<p class="text-xl md:text-2xl text-white mb-8">Personalized boxing & fitness training in Braintree, Essex</p>
	<div class="flex flex-col md:flex-row justify-center gap-4">
	<a href="#plan" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
	Get Your Plan
	</a>
	<a href="#classes" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-full transition duration-300 transform hover:scale-105">
	Book a Class
	</a>
	</div>
	</div>
	</div>
	</section>

	<!-- About Section -->
	<section id="about" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">Meet Tony - Your Coach</h2>
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="md:w-1/2">
	<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
	alt="Coach Tony"
	class="rounded-lg shadow-xl w-full h-auto">
	</div>
	<div class="md:w-1/2">
	<h3 class="text-2xl font-semibold mb-4">20+ Years of Boxing Experience</h3>
	<p class="text-gray-700 mb-4">
	Tony has trained hundreds of fighters and fitness enthusiasts at Fighting Fit Essex. His philosophy combines traditional boxing techniques with modern fitness science to deliver results.
	</p>
	<p class="text-gray-700 mb-6">
	Whether you're looking to compete, get in shape, or just learn self-defense, Tony will create a personalized program that fits your goals and schedule.
	</p>
	<div class="grid grid-cols-2 gap-4">
	<div class="bg-gray-100 p-4 rounded-lg">
	<i class="fas fa-trophy text-red-600 text-2xl mb-2"></i>
	<h4 class="font-bold">Proven Results</h4>
	<p class="text-sm">100+ success stories</p>
	</div>
	<div class="bg-gray-100 p-4 rounded-lg">
	<i class="fas fa-heartbeat text-red-600 text-2xl mb-2"></i>
	<h4 class="font-bold">Holistic Approach</h4>
	<p class="text-sm">Fitness + nutrition</p>
	</div>
	<div class="bg-gray-100 p-4 rounded-lg">
	<i class="fas fa-users text-red-600 text-2xl mb-2"></i>
	<h4 class="font-bold">Community</h4>
	<p class="text-sm">Supportive environment</p>
	</div>
	<div class="bg-gray-100 p-4 rounded-lg">
	<i class="fas fa-calendar-check text-red-600 text-2xl mb-2"></i>
	<h4 class="font-bold">Flexible</h4>
	<p class="text-sm">Various class times</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Plan Generator Section -->
	<section id="plan" class="py-16 bg-gray-100">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Get Your Personalized Plan</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Answer a few questions and we'll create a customized workout and nutrition plan based on your goals.
	</p>

	<div class="bg-white rounded-xl shadow-lg p-6 max-w-3xl mx-auto">
	<div class="mb-6">
	<div class="flex justify-between mb-2">
	<span class="text-sm font-medium">Progress</span>
	<span class="text-sm font-medium" id="step-counter">Step 1 of 6</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-red-600 h-2.5 rounded-full" id="progress-bar" style="width: 16.66%"></div>
	</div>
	</div>

	<form id="plan-form">
	<!-- Step 1: Basic Info -->
	<div class="form-step active" id="step-1">
	<h3 class="text-xl font-semibold mb-4">Tell us about yourself</h3>
	<div class="grid md:grid-cols-2 gap-4 mb-6">
	<div>
	<label class="block text-gray-700 mb-2">Gender</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="gender" required>
	<option value="">Select</option>
	<option value="male">Male</option>
	<option value="female">Female</option>
	<option value="other">Other</option>
	</select>
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Age</label>
	<input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="age" min="16" max="99" required>
	</div>
	</div>
	<div class="grid md:grid-cols-2 gap-4 mb-6">
	<div>
	<label class="block text-gray-700 mb-2">Weight (kg)</label>
	<input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="weight" min="40" max="200" required>
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Height (cm)</label>
	<input type="number" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="height" min="140" max="220" required>
	</div>
	</div>
	<div class="flex justify-end">
	<button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="2">
	Next <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Step 2: Goals -->
	<div class="form-step" id="step-2">
	<h3 class="text-xl font-semibold mb-4">What are your goals?</h3>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Primary Goal</label>
	<div class="grid md:grid-cols-3 gap-3">
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="goal" value="fat_loss" class="hidden" required>
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Fat Loss</h4>
	<p class="text-sm text-gray-600">Burn fat and tone up</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="goal" value="muscle_gain" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Muscle Gain</h4>
	<p class="text-sm text-gray-600">Build strength and size</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="goal" value="endurance" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Endurance</h4>
	<p class="text-sm text-gray-600">Improve stamina</p>
	</div>
	</div>
	</label>
	</div>
	</div>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Timeframe</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="timeframe" required>
	<option value="">Select your goal timeframe</option>
	<option value="4_weeks">4 weeks</option>
	<option value="8_weeks">8 weeks</option>
	<option value="12_weeks">12 weeks</option>
	<option value="ongoing">Ongoing</option>
	</select>
	</div>
	<div class="flex justify-between">
	<button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="1">
	<i class="fas fa-arrow-left mr-2"></i> Back
	</button>
	<button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="3">
	Next <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Step 3: Diet -->
	<div class="form-step" id="step-3">
	<h3 class="text-xl font-semibold mb-4">Diet & Nutrition</h3>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Diet Type</label>
	<div class="grid md:grid-cols-3 gap-3">
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="diet" value="standard" class="hidden" required>
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Standard</h4>
	<p class="text-sm text-gray-600">No restrictions</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="diet" value="vegetarian" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Vegetarian</h4>
	<p class="text-sm text-gray-600">No meat</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio">
	<input type="radio" name="diet" value="vegan" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Vegan</h4>
	<p class="text-sm text-gray-600">No animal products</p>
	</div>
	</div>
	</label>
	</div>
	</div>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Food Allergies/Intolerances</label>
	<textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="allergies" rows="3" placeholder="List any food allergies or intolerances you have"></textarea>
	</div>
	<div class="flex justify-between">
	<button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="2">
	<i class="fas fa-arrow-left mr-2"></i> Back
	</button>
	<button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="4">
	Next <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Step 4: Activity Level -->
	<div class="form-step" id="step-4">
	<h3 class="text-xl font-semibold mb-4">Current Activity Level</h3>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">How active are you currently?</label>
	<div class="space-y-3">
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
	<input type="radio" name="activity" value="sedentary" class="hidden" required>
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Sedentary</h4>
	<p class="text-sm text-gray-600">Little to no exercise</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
	<input type="radio" name="activity" value="lightly_active" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Lightly Active</h4>
	<p class="text-sm text-gray-600">Exercise 1-3 days/week</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
	<input type="radio" name="activity" value="moderately_active" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Moderately Active</h4>
	<p class="text-sm text-gray-600">Exercise 3-5 days/week</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-radio block">
	<input type="radio" name="activity" value="very_active" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded-full border border-gray-400 flex items-center justify-center mr-3 radio-indicator">
	<div class="w-3 h-3 rounded-full bg-red-600 hidden"></div>
	</div>
	<div>
	<h4 class="font-medium">Very Active</h4>
	<p class="text-sm text-gray-600">Exercise 6-7 days/week</p>
	</div>
	</div>
	</label>
	</div>
	</div>
	<div class="flex justify-between">
	<button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="3">
	<i class="fas fa-arrow-left mr-2"></i> Back
	</button>
	<button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="5">
	Next <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Step 5: Availability -->
	<div class="form-step" id="step-5">
	<h3 class="text-xl font-semibold mb-4">Your Availability</h3>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">How many days per week can you commit to training?</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="days_per_week" required>
	<option value="">Select</option>
	<option value="2">2 days</option>
	<option value="3">3 days</option>
	<option value="4">4 days</option>
	<option value="5">5 days</option>
	<option value="6">6 days</option>
	<option value="7">7 days</option>
	</select>
	</div>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Preferred training times</label>
	<div class="grid md:grid-cols-3 gap-3">
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
	<input type="checkbox" name="morning" value="true" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
	<i class="fas fa-check text-white hidden"></i>
	</div>
	<div>
	<h4 class="font-medium">Morning</h4>
	<p class="text-sm text-gray-600">Before 12pm</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
	<input type="checkbox" name="afternoon" value="true" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
	<i class="fas fa-check text-white hidden"></i>
	</div>
	<div>
	<h4 class="font-medium">Afternoon</h4>
	<p class="text-sm text-gray-600">12pm-5pm</p>
	</div>
	</div>
	</label>
	<label class="border rounded-lg p-4 cursor-pointer hover:bg-red-50 transition has-checkbox">
	<input type="checkbox" name="evening" value="true" class="hidden">
	<div class="flex items-center">
	<div class="w-6 h-6 rounded border border-gray-400 flex items-center justify-center mr-3 checkbox-indicator">
	<i class="fas fa-check text-white hidden"></i>
	</div>
	<div>
	<h4 class="font-medium">Evening</h4>
	<p class="text-sm text-gray-600">After 5pm</p>
	</div>
	</div>
	</label>
	</div>
	</div>
	<div class="flex justify-between">
	<button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="4">
	<i class="fas fa-arrow-left mr-2"></i> Back
	</button>
	<button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition next-step" data-next="6">
	Next <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>

	<!-- Step 6: Contact Info -->
	<div class="form-step" id="step-6">
	<h3 class="text-xl font-semibold mb-4">Almost Done!</h3>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Email Address</label>
	<input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="email" required>
	</div>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Phone Number</label>
	<input type="tel" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" name="phone">
	</div>
	<div class="mb-6">
	<label class="flex items-center">
	<input type="checkbox" class="rounded border-gray-300 text-red-600 focus:ring-red-500 mr-2" name="consent" required>
	<span class="text-gray-700">I agree to receive emails with my plan and occasional fitness tips</span>
	</label>
	</div>
	<div class="flex justify-between">
	<button type="button" class="text-gray-600 font-bold py-2 px-6 rounded-lg transition prev-step" data-prev="5">
	<i class="fas fa-arrow-left mr-2"></i> Back
	</button>
	<button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition">
	Generate My Plan <i class="fas fa-magic ml-2"></i>
	</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</section>

	<!-- Plan Results (Hidden Initially) -->
	<section id="plan-results" class="py-16 bg-white hidden">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">Your Personalized Plan</h2>

	<div class="bg-gray-100 rounded-xl p-6 mb-8">
	<div class="flex flex-col md:flex-row justify-between items-center mb-6">
	<div>
	<h3 class="text-xl font-semibold">Nutrition Overview</h3>
	<p class="text-gray-600">Based on your goals and preferences</p>
	</div>
	<div class="mt-4 md:mt-0">
	<span class="bg-red-600 text-white px-4 py-1 rounded-full text-sm font-medium">Recommended</span>
	</div>
	</div>

	<div class="grid md:grid-cols-3 gap-6">
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center mb-3">
	<div class="bg-red-100 p-2 rounded-full mr-3">
	<i class="fas fa-fire text-red-600"></i>
	</div>
	<h4 class="font-semibold">Calories</h4>
	</div>
	<p class="text-2xl font-bold" id="calories">2,400</p>
	<p class="text-gray-600 text-sm">kcal per day</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center mb-3">
	<div class="bg-red-100 p-2 rounded-full mr-3">
	<i class="fas fa-dumbbell text-red-600"></i>
	</div>
	<h4 class="font-semibold">Protein</h4>
	</div>
	<p class="text-2xl font-bold" id="protein">180</p>
	<p class="text-gray-600 text-sm">grams per day</p>
	</div>
	<div class="bg-white p-4 rounded-lg shadow">
	<div class="flex items-center mb-3">
	<div class="bg-red-100 p-2 rounded-full mr-3">
	<i class="fas fa-utensils text-red-600"></i>
	</div>
	<h4 class="font-semibold">Meal Plan</h4>
	</div>
	<p class="text-lg font-semibold" id="meal-plan">Standard</p>
	<p class="text-gray-600 text-sm">3 meals + 2 snacks</p>
	</div>
	</div>

	<div class="mt-8">
	<h4 class="font-semibold mb-3">Sample Meal Ideas</h4>
	<div class="grid md:grid-cols-3 gap-4" id="meal-ideas">
	<!-- Filled by JavaScript -->
	</div>
	</div>
	</div>

	<div class="mb-12">
	<h3 class="text-2xl font-semibold mb-6">Your Weekly Workout Schedule</h3>
	<div class="space-y-4" id="workout-schedule">
	<!-- Filled by JavaScript -->
	</div>
	</div>

	<div class="text-center">
	<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition mr-4">
	<i class="fas fa-download mr-2"></i> Download PDF
	</button>
	<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full transition">
	<i class="fas fa-calendar-check mr-2"></i> Book a Session
	</button>
	</div>
	</div>
	</section>

	<!-- Classes Section -->
	<section id="classes" class="py-16 bg-gray-100">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Our Classes</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Choose from our variety of boxing and fitness classes designed for all levels.
	</p>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
	<div class="h-48 bg-red-700 flex items-center justify-center">
	<i class="fas fa-boxing-glove text-white text-6xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Boxing Fundamentals</h3>
	<p class="text-gray-600 mb-4">Learn proper technique for punches, footwork, and defense in this beginner-friendly class.</p>
	<div class="flex justify-between items-center">
	<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Beginner</span>
	<span class="font-medium">£12/session</span>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
	<div class="h-48 bg-red-700 flex items-center justify-center">
	<i class="fas fa-fire text-white text-6xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Boxing HIIT</h3>
	<p class="text-gray-600 mb-4">High-intensity interval training combining boxing drills with cardio exercises.</p>
	<div class="flex justify-between items-center">
	<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Intermediate</span>
	<span class="font-medium">£15/session</span>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
	<div class="h-48 bg-red-700 flex items-center justify-center">
	<i class="fas fa-trophy text-white text-6xl"></i>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Advanced Sparring</h3>
	<p class="text-gray-600 mb-4">For experienced boxers looking to test their skills in controlled sparring sessions.</p>
	<div class="flex justify-between items-center">
	<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">Advanced</span>
	<span class="font-medium">£18/session</span>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-lg p-6 max-w-4xl mx-auto">
	<h3 class="text-xl font-semibold mb-6 text-center">Class Timetable</h3>
	<div class="overflow-x-auto">
	<table class="w-full">
	<thead class="bg-gray-100">
	<tr>
	<th class="px-4 py-2 text-left">Time</th>
	<th class="px-4 py-2 text-left">Monday</th>
	<th class="px-4 py-2 text-left">Tuesday</th>
	<th class="px-4 py-2 text-left">Wednesday</th>
	<th class="px-4 py-2 text-left">Thursday</th>
	<th class="px-4 py-2 text-left">Friday</th>
	<th class="px-4 py-2 text-left">Saturday</th>
	</tr>
	</thead>
	<tbody>
	<tr class="border-b">
	<td class="px-4 py-3 font-medium">6:00 - 7:00 AM</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">-</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">-</td>
	</tr>
	<tr class="border-b">
	<td class="px-4 py-3 font-medium">9:00 - 10:00 AM</td>
	<td class="px-4 py-3">Fundamentals</td>
	<td class="px-4 py-3">-</td>
	<td class="px-4 py-3">Fundamentals</td>
	<td class="px-4 py-3">-</td>
	<td class="px-4 py-3">Fundamentals</td>
	<td class="px-4 py-3">Fundamentals</td>
	</tr>
	<tr class="border-b">
	<td class="px-4 py-3 font-medium">6:00 - 7:00 PM</td>
	<td class="px-4 py-3">Sparring</td>
	<td class="px-4 py-3">Fundamentals</td>
	<td class="px-4 py-3">Sparring</td>
	<td class="px-4 py-3">Fundamentals</td>
	<td class="px-4 py-3">Sparring</td>
	<td class="px-4 py-3">-</td>
	</tr>
	<tr>
	<td class="px-4 py-3 font-medium">7:30 - 8:30 PM</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">-</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">-</td>
	<td class="px-4 py-3">Boxing HIIT</td>
	<td class="px-4 py-3">-</td>
	</tr>
	</tbody>
	</table>
	</div>

	<div class="mt-8 text-center">
	<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition">
	<i class="fas fa-calendar-alt mr-2"></i> Book Your Class
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Progress Tracker Section -->
	<section class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Track Your Progress</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Log your workouts and see your improvement over time with our gamified tracking system.
	</p>

	<div class="grid md:grid-cols-2 gap-8 mb-12">
	<div class="bg-gray-100 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-6">This Week's Stats</h3>

	<div class="grid grid-cols-3 gap-4 mb-8">
	<div class="bg-white p-4 rounded-lg shadow text-center">
	<div class="text-2xl font-bold mb-1">3</div>
	<div class="text-sm text-gray-600">Workouts</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow text-center">
	<div class="text-2xl font-bold mb-1">5.2</div>
	<div class="text-sm text-gray-600">Hours</div>
	</div>
	<div class="bg-white p-4 rounded-lg shadow text-center">
	<div class="text-2xl font-bold mb-1">1,250</div>
	<div class="text-sm text-gray-600">Punches</div>
	</div>
	</div>

	<div class="mb-6">
	<div class="flex justify-between mb-2">
	<span class="font-medium">Weekly Goal</span>
	<span class="font-medium">60%</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-red-600 h-2.5 rounded-full" style="width: 60%"></div>
	</div>
	</div>

	<button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition">
	Log Today's Workout
	</button>
	</div>

	<div class="bg-gray-100 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-6">Your Achievements</h3>

	<div class="flex flex-wrap gap-4">
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
	<i class="fas fa-medal text-yellow-500 text-2xl mb-1"></i>
	<div class="text-xs font-medium">First Class</div>
	</div>
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
	<i class="fas fa-fire text-red-500 text-2xl mb-1"></i>
	<div class="text-xs font-medium">5 Workouts</div>
	</div>
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
	<i class="fas fa-dumbbell text-blue-500 text-2xl mb-1"></i>
	<div class="text-xs font-medium">Strength</div>
	</div>
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center">
	<i class="fas fa-bolt text-purple-500 text-2xl mb-1"></i>
	<div class="text-xs font-medium">Fast Hands</div>
	</div>
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center opacity-30">
	<i class="fas fa-trophy text-gray-400 text-2xl mb-1"></i>
	<div class="text-xs font-medium">10 Classes</div>
	</div>
	<div class="bg-white p-4 rounded-full shadow w-20 h-20 flex flex-col items-center justify-center text-center opacity-30">
	<i class="fas fa-star text-gray-400 text-2xl mb-1"></i>
	<div class="text-xs font-medium">Pro Boxer</div>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-gray-100 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-6">Progress Over Time</h3>
	<div class="bg-white p-4 rounded-lg shadow h-64 flex items-center justify-center">
	<p class="text-gray-500">Progress chart will appear here</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Tony's Tips Section -->
	<section class="py-16 bg-gray-100">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Tony's Weekly Tip</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Get expert boxing and fitness advice from Tony every week.
	</p>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden max-w-4xl mx-auto">
	<div class="md:flex">
	<div class="md:w-1/2 bg-red-700 flex items-center justify-center p-8">
	<div class="relative w-full" style="padding-bottom: 56.25%">
	<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	</div>
	<div class="md:w-1/2 p-8">
	<div class="flex items-center mb-4">
	<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded mr-2">New</span>
	<span class="text-sm text-gray-600">Posted 2 days ago</span>
	</div>
	<h3 class="text-xl font-bold mb-4">Perfecting Your Jab</h3>
	<p class="text-gray-700 mb-6">
	The jab is the most important punch in boxing. In this video, I break down common mistakes and show you drills to improve your speed, power, and accuracy.
	</p>
	<div class="mb-6">
	<h4 class="font-semibold mb-2">Key Takeaways:</h4>
	<ul class="list-disc list-inside text-gray-700 space-y-1">
	<li>Proper fist alignment to prevent injury</li>
	<li>Using your legs for power, not just arms</li>
	<li>Drills to improve speed and endurance</li>
	<li>How to set up combinations with your jab</li>
	</ul>
	</div>
	<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition">
	<i class="fas fa-video mr-2"></i> Watch More Tips
	</button>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-12">What Our Members Say</h2>

	<div class="grid md:grid-cols-3 gap-8 mb-12">
	<div class="bg-gray-100 p-6 rounded-xl">
	<div class="flex items-center mb-4">
	<div class="flex items-center space-x-1 text-yellow-400 mr-2">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<span class="text-sm text-gray-600">3 months ago</span>
	</div>
	<p class="text-gray-700 mb-4">
	"Tony's boxing classes have completely transformed my fitness. I've lost 12kg in 3 months and feel stronger than ever!"
	</p>
	<div class="flex items-center">
	<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah J." class="w-10 h-10 rounded-full mr-3">
	<div>
	<h4 class="font-medium">Sarah J.</h4>
	<p class="text-sm text-gray-600">Member since 2022</p>
	</div>
	</div>
	</div>

	<div class="bg-gray-100 p-6 rounded-xl">
	<div class="flex items-center mb-4">
	<div class="flex items-center space-x-1 text-yellow-400 mr-2">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	</div>
	<span class="text-sm text-gray-600">1 month ago</span>
	</div>
	<p class="text-gray-700 mb-4">
	"The personalized plan Tony created for me helped break through my plateau. I finally see abs for the first time in my life!"
	</p>
	<div class="flex items-center">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark T." class="w-10 h-10 rounded-full mr-3">
	<div>
	<h4 class="font-medium">Mark T.</h4>
	<p class="text-sm text-gray-600">Member since 2023</p>
	</div>
	</div>
	</div>

	<div class="bg-gray-100 p-6 rounded-xl">
	<div class="flex items-center mb-4">
	<div class="flex items-center space-x-1 text-yellow-400 mr-2">
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star"></i>
	<i class="fas fa-star-half-alt"></i>
	</div>
	<span class="text-sm text-gray-600">2 weeks ago</span>
	</div>
	<p class="text-gray-700 mb-4">
	"As a complete beginner, I was nervous to start boxing. The fundamentals class made me feel welcome and I'm hooked now!"
	</p>
	<div class="flex items-center">
	<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya K." class="w-10 h-10 rounded-full mr-3">
	<div>
	<h4 class="font-medium">Priya K.</h4>
	<p class="text-sm text-gray-600">New member</p>
	</div>
	</div>
	</div>
	</div>

	<div class="text-center">
	<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition">
	<i class="fas fa-comment-alt mr-2"></i> Leave a Review
	</button>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-16 bg-gray-100">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Get In Touch</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Have questions? Want to schedule a trial session? Contact us today!
	</p>

	<div class="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto">
	<div>
	<div class="bg-white rounded-xl shadow-lg p-6 h-full">
	<h3 class="text-xl font-semibold mb-6">Contact Information</h3>

	<div class="space-y-6">
	<div class="flex items-start">
	<div class="bg-red-100 p-3 rounded-full mr-4">
	<i class="fas fa-map-marker-alt text-red-600"></i>
	</div>
	<div>
	<h4 class="font-medium">Address</h4>
	<p class="text-gray-600">123 Boxing Lane, Braintree, Essex CM7 1AB</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="bg-red-100 p-3 rounded-full mr-4">
	<i class="fas fa-phone-alt text-red-600"></i>
	</div>
	<div>
	<h4 class="font-medium">Phone</h4>
	<p class="text-gray-600">01234 567890</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="bg-red-100 p-3 rounded-full mr-4">
	<i class="fas fa-envelope text-red-600"></i>
	</div>
	<div>
	<h4 class="font-medium">Email</h4>
	<p class="text-gray-600">info@fightingfitnessex.co.uk</p>
	</div>
	</div>

	<div class="flex items-start">
	<div class="bg-red-100 p-3 rounded-full mr-4">
	<i class="fas fa-clock text-red-600"></i>
	</div>
	<div>
	<h4 class="font-medium">Opening Hours</h4>
	<p class="text-gray-600">Mon-Fri: 6:00 AM - 9:00 PM</p>
	<p class="text-gray-600">Sat: 8:00 AM - 6:00 PM</p>
	<p class="text-gray-600">Sun: Closed</p>
	</div>
	</div>
	</div>

	<div class="mt-8">
	<h4 class="font-medium mb-3">Follow Us</h4>
	<div class="flex space-x-4">
	<a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
	<i class="fab fa-youtube"></i>
	</a>
	<a href="#" class="bg-gray-200 hover:bg-red-600 hover:text-white p-3 rounded-full transition">
	<i class="fab fa-tiktok"></i>
	</a>
	</div>
	</div>
	</div>
	</div>

	<div>
	<div class="bg-white rounded-xl shadow-lg p-6 h-full">
	<h3 class="text-xl font-semibold mb-6">Send Us a Message</h3>

	<form>
	<div class="grid md:grid-cols-2 gap-4 mb-4">
	<div>
	<label class="block text-gray-700 mb-2">First Name</label>
	<input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
	</div>
	<div>
	<label class="block text-gray-700 mb-2">Last Name</label>
	<input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
	</div>
	</div>

	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Email</label>
	<input type="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" required>
	</div>

	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Phone</label>
	<input type="tel" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500">
	</div>

	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Subject</label>
	<select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500">
	<option>General Inquiry</option>
	<option>Class Schedule</option>
	<option>Personal Training</option>
	<option>Membership</option>
	<option>Other</option>
	</select>
	</div>

	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Message</label>
	<textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500" rows="4"></textarea>
	</div>

	<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">
	Send Message
	</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12">
	<div class="container mx-auto px-4">
	<div class="grid md:grid-cols-4 gap-8 mb-8">
	<div>
	<div class="flex items-center space-x-2 mb-4">
	<i class="fas fa-boxing-glove text-2xl text-red-500"></i>
	<span class="font-bold text-xl">Fighting Fit Essex</span>
	</div>
	<p class="text-gray-400">
	Professional boxing and fitness training in Braintree, Essex. Transform your body and mind with our expert coaching.
	</p>
	</div>

	<div>
	<h3 class="font-semibold text-lg mb-4">Quick Links</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
	<li><a href="#about" class="text-gray-400 hover:text-white transition">About</a></li>
	<li><a href="#plan" class="text-gray-400 hover:text-white transition">Get Your Plan</a></li>
	<li><a href="#classes" class="text-gray-400 hover:text-white transition">Classes</a></li>
	<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
	</ul>
	</div>

	<div>
	<h3 class="font-semibold text-lg mb-4">Classes</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">Boxing Fundamentals</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Boxing HIIT</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Advanced Sparring</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Personal Training</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">Nutrition Coaching</a></li>
	</ul>
	</div>

	<div>
	<h3 class="font-semibold text-lg mb-4">Newsletter</h3>
	<p class="text-gray-400 mb-4">
	Subscribe to get weekly boxing tips and special offers.
	</p>
	<form class="flex">
	<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full">
	<button type="submit" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-r-lg">
	<i class="fas fa-paper-plane"></i>
	</button>
	</form>
	</div>
	</div>

	<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 mb-4 md:mb-0">
	© 2023 Fighting Fit Essex. All rights reserved.
	</p>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-youtube"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i class="fab fa-tiktok"></i>
	</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Mobile menu toggle
	document.getElementById('menu-toggle').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	});

	// Form steps navigation
	const formSteps = document.querySelectorAll('.form-step');
	const nextButtons = document.querySelectorAll('.next-step');
	const prevButtons = document.querySelectorAll('.prev-step');
	const stepCounter = document.getElementById('step-counter');
	const progressBar = document.getElementById('progress-bar');
	const totalSteps = 6;
	let currentStep = 1;

	function updateStepDisplay() {
	formSteps.forEach(step => step.classList.remove('active'));
	document.getElementById(`step-${currentStep}`).classList.add('active');
	stepCounter.textContent = `Step ${currentStep} of ${totalSteps}`;
	progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
	}

	nextButtons.forEach(button => {
	button.addEventListener('click', function() {
	const nextStep = parseInt(this.getAttribute('data-next'));
	// Validate current step before proceeding
	let isValid = true;
	const currentStepEl = document.getElementById(`step-${currentStep}`);
	const requiredInputs = currentStepEl.querySelectorAll('[required]');

	requiredInputs.forEach(input => {
	if (!input.value) {
	isValid = false;
	input.classList.add('border-red-500');
	setTimeout(() => {
	input.classList.remove('border-red-500');
	}, 2000);
	}
	});

	if (isValid) {
	currentStep = nextStep;
	updateStepDisplay();
	window.scrollTo({
	top: document.getElementById('plan').offsetTop + 100,
	behavior: 'smooth'
	});
	}
	});
	});

	prevButtons.forEach(button => {
	button.addEventListener('click', function() {
	const prevStep = parseInt(this.getAttribute('data-prev'));
	currentStep = prevStep;
	updateStepDisplay();
	window.scrollTo({
	top: document.getElementById('plan').offsetTop + 100,
	behavior: 'smooth'
	});
	});
	});

	// Radio button and checkbox styling
	document.querySelectorAll('.has-radio').forEach(item => {
	const radio = item.querySelector('input[type="radio"]');
	const indicator = item.querySelector('.radio-indicator div');

	item.addEventListener('click', function() {
	// Uncheck all radios in the group
	const name = radio.getAttribute('name');
	document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
	r.checked = false;
	r.parentElement.querySelector('.radio-indicator div').classList.add('hidden');
	});

	// Check this one
	radio.checked = true;
	indicator.classList.remove('hidden');
	});
	});

	document.querySelectorAll('.has-checkbox').forEach(item => {
	const checkbox = item.querySelector('input[type="checkbox"]');
	const indicator = item.querySelector('.checkbox-indicator i');

	item.addEventListener('click', function() {
	checkbox.checked = !checkbox.checked;
	if (checkbox.checked) {
	item.querySelector('.checkbox-indicator').classList.add('bg-red-600');
	indicator.classList.remove('hidden');
	} else {
	item.querySelector('.checkbox-indicator').classList.remove('bg-red-600');
	indicator.classList.add('hidden');
	}
	});
	});

	// Form submission
	document.getElementById('plan-form').addEventListener('submit', function(e) {
	e.preventDefault();

	// Get form data
	const formData = new FormData(this);
	const data = {};
	formData.forEach((value, key) => {
	data[key] = value;
	});

	// Generate plan (simplified version)
	const bmr = data.gender === 'male'
	? 10 * data.weight + 6.25 * data.height - 5 * data.age + 5
	: 10 * data.weight + 6.25 * data.height - 5 * data.age - 161;

	const calories = data.goal === 'fat_loss' ? bmr * 0.8 : bmr * 1.1;
	const protein = Math.round(data.weight * 2.2);

	// Set nutrition values
	document.getElementById('calories').textContent = Math.round(calories);
	document.getElementById('protein').textContent = protein;
	document.getElementById('meal-plan').textContent = data.diet.charAt(0).toUpperCase() + data.diet.slice(1);

	// Generate meal ideas based on diet
	const mealIdeasContainer = document.getElementById('meal-ideas');
	mealIdeasContainer.innerHTML = '';

	let mealIdeas = [];
	if (data.diet === 'vegan') {
	mealIdeas = [
	{ name: 'Tofu Scramble', desc: 'With spinach and turmeric' },
	{ name: 'Chickpea Curry', desc: 'With brown rice' },
	{ name: 'Lentil Soup', desc: 'With whole grain bread' }
	];
	} else if (data.diet === 'vegetarian') {
	mealIdeas = [
	{ name: 'Greek Yogurt', desc: 'With berries and nuts' },
	{ name: 'Vegetable Omelet', desc: 'With whole wheat toast' },
	{ name: 'Quinoa Salad', desc: 'With feta and veggies' }
	];
	} else {
	mealIdeas = [
	{ name: 'Grilled Chicken', desc: 'With sweet potatoes' },
	{ name: 'Salmon', desc: 'With quinoa and asparagus' },
	{ name: 'Lean Beef', desc: 'With roasted vegetables' }
	];
	}

	mealIdeas.forEach(meal => {
	const mealEl = document.createElement('div');
	mealEl.className = 'bg-white p-4 rounded-lg shadow';
	mealEl.innerHTML = `
	<h4 class="font-semibold">${meal.name}</h4>
	<p class="text-sm text-gray-600">${meal.desc}</p>
	`;
	mealIdeasContainer.appendChild(mealEl);
	});

	// Generate workout schedule
	const workoutSchedule = document.getElementById('workout-schedule');
	workoutSchedule.innerHTML = '';

	const days = parseInt(data.days_per_week) \|\| 4;
	const workouts = [
	{ day: 'Monday', focus: 'Boxing Drills + Core', time: '45 min' },
	{ day: 'Tuesday', focus: 'HIIT Conditioning', time: '40 min' },
	{ day: 'Wednesday', focus: 'Active Recovery or Yoga' },
	{ day: 'Thursday', focus: 'Pad Work & Footwork', time: '50 min' },
	{ day: 'Friday', focus: 'Strength Training + Plyo' },
	{ day: 'Saturday', focus: 'Endurance Bag Work' },
	{ day: 'Sunday', focus: 'Rest or Walk' }
	];

	// Only show the number of days they selected
	for (let i = 0; i < days; i++) {
	const workout = workouts[i];
	const workoutEl = document.createElement('div');
	workoutEl.className = 'bg-gray-100 p-4 rounded-lg workout-card transition-all';
	workoutEl.innerHTML = `
	<div class="flex justify-between items-center">
	<h4 class="font-bold text-lg">${workout.day}</h4>
	${workout.time ? `<span class="bg-red-600 text-white px-3 py-1 rounded-full text-xs">${workout.time}</span>` : ''}
	</div>
	<p class="text-gray-700 mt-2">${workout.focus}</p>
	`;
	workoutSchedule.appendChild(workoutEl);
	}

	// Show results
	document.getElementById('plan-results').classList.remove('hidden');
	window.scrollTo({
	top: document.getElementById('plan-results').offsetTop - 20,
	behavior: 'smooth'
	});

	// In a real app, you would send this data to your backend
	console.log('Form submitted:', data);
	});

	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	e.preventDefault();

	const targetId = this.getAttribute('href');
	if (targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	window.scrollTo({
	top: targetElement.offsetTop - 80,
	behavior: 'smooth'
	});

	// Close mobile menu if open
	document.getElementById('mobile-menu').classList.add('hidden');
	}
	});
	});
	<!-- Login Modal -->
	<div id="login-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
	<div class="bg-white rounded-xl max-w-md w-full p-6">
	<div class="flex justify-between items-center mb-6">
	<h3 class="text-2xl font-bold">Sign In</h3>
	<button id="close-login" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<div class="space-y-4">
	<button class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
	<i class="fab fa-google mr-2"></i> Continue with Google
	</button>
	<button class="w-full bg-black hover:bg-gray-800 text-white py-2 px-4 rounded-lg flex items-center justify-center">
	<i class="fab fa-apple mr-2"></i> Continue with Apple
	</button>

	<div class="flex items-center my-4">
	<div class="flex-grow border-t border-gray-300"></div>
	<span class="mx-4 text-gray-500">or</span>
	<div class="flex-grow border-t border-gray-300"></div>
	</div>

	<form id="email-login">
	<div class="mb-4">
	<label class="block text-gray-700 mb-2">Email</label>
	<input type="email" class="w-full px-4 py-2 border rounded-lg" required>
	</div>
	<div class="mb-6">
	<label class="block text-gray-700 mb-2">Password</label>
	<input type="password" class="w-full px-4 py-2 border rounded-lg" required>
	</div>
	<button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
	Sign In
	</button>
	</form>

	<div class="text-center text-sm text-gray-600 mt-4">
	Don't have an account? <a href="#" class="text-red-600 hover:underline">Sign up</a>
	</div>
	</div>
	</div>
	</div>

	<!-- Membership Tiers Section -->
	<section id="membership" class="py-16 bg-white">
	<div class="container mx-auto px-4">
	<h2 class="text-3xl font-bold text-center mb-4">Choose Your Membership</h2>
	<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
	Select the plan that fits your training goals and budget.
	</p>

	<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
	<div class="border rounded-xl p-6 hover:shadow-lg transition">
	<h3 class="text-xl font-bold mb-2">Gloves Off</h3>
	<p class="text-gray-600 mb-4">Access to group classes only</p>
	<div class="text-3xl font-bold mb-6">£29<span class="text-lg text-gray-500">/month</span></div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited group classes</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Basic progress tracking</li>
	<li class="flex items-center"><i class="fas fa-times text-gray-400 mr-2"></i> No personal plan</li>
	<li class="flex items-center"><i class="fas fa-times text-gray-400 mr-2"></i> No video tips</li>
	</ul>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-lg">
	Select Plan
	</button>
	</div>

	<div class="border-2 border-red-600 rounded-xl p-6 hover:shadow-lg transition transform scale-105">
	<div class="bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full inline-block mb-3">
	MOST POPULAR
	</div>
	<h3 class="text-xl font-bold mb-2">Fighter Mode</h3>
	<p class="text-gray-600 mb-4">Complete training system</p>
	<div class="text-3xl font-bold mb-6">£59<span class="text-lg text-gray-500">/month</span></div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Unlimited group classes</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Personalized workout plan</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Nutrition guidance</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Weekly video tips</li>
	</ul>
	<button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">
	Select Plan
	</button>
	</div>

	<div class="border rounded-xl p-6 hover:shadow-lg transition">
	<h3 class="text-xl font-bold mb-2">Champion</h3>
	<p class="text-gray-600 mb-4">VIP training experience</p>
	<div class="text-3xl font-bold mb-6">£199<span class="text-lg text-gray-500">/month</span></div>
	<ul class="space-y-3 mb-6">
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> All Fighter Mode benefits</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> 2 personal sessions/month</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Priority booking</li>
	<li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Exclusive workshops</li>
	</ul>
	<button class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded-lg">
	Select Plan
	</button>
	</div>
	</div>
	</div>
	</section>

	<script>
	// Login modal functionality
	const loginBtn = document.getElementById('login-btn');
	const loginModal = document.getElementById('login-modal');
	const closeLogin = document.getElementById('close-login');

	loginBtn.addEventListener('click', () => {
	loginModal.classList.remove('hidden');
	});

	closeLogin.addEventListener('click', () => {
	loginModal.classList.add('hidden');
	});

	// Close modal when clicking outside
	loginModal.addEventListener('click', (e) => {
	if (e.target === loginModal) {
	loginModal.classList.add('hidden');
	}
	});

	// Mobile sync notification
	if (navigator.userAgent.match(/Mobile/)) {
	const notification = document.createElement('div');
	notification.className = 'fixed bottom-4 left-4 right-4 bg-blue-600 text-white p-4 rounded-lg shadow-lg flex items-center justify-between z-50';
	notification.innerHTML = `
	<div class="flex items-center">
	<i class="fas fa-mobile-alt mr-3 text-xl"></i>
	<div>
	<p class="font-medium">Get the Fighting Fit app</p>
	<p class="text-sm">Sync your plan and track progress on the go</p>
	</div>
	</div>
	<button class="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-medium">
	Download
	</button>
	`;
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.remove();
	}, 10000);
	}
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=flen-crypto/fightingfit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>