|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Anker-fit | Fitness Accountability Coaching</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"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#1a56db', |
|
|
secondary: '#0f172a', |
|
|
accent: '#dc2626', |
|
|
light: '#f8fafc' |
|
|
}, |
|
|
fontFamily: { |
|
|
heading: ['Montserrat', 'sans-serif'], |
|
|
body: ['Roboto', 'sans-serif'] |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style type="text/css"> |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
.hero-bg { |
|
|
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
|
|
} |
|
|
.stat-card { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.stat-card:hover { |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
.pricing-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
.pricing-card:hover { |
|
|
border-color: #1a56db; |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.feature-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
border-radius: 50%; |
|
|
background: linear-gradient(135deg, #1a56db 0%, #0f172a 100%); |
|
|
} |
|
|
.testimonial-card { |
|
|
background: linear-gradient(to bottom right, #ffffff 0%, #f1f5f9 100%); |
|
|
} |
|
|
.charity-selector { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.charity-selector:hover { |
|
|
transform: scale(1.05); |
|
|
border-color: #1a56db; |
|
|
} |
|
|
.charity-selector.selected { |
|
|
border-color: #1a56db; |
|
|
background-color: #dbeafe; |
|
|
} |
|
|
.cta-section { |
|
|
background: linear-gradient(135deg, #1a56db 0%, #0f172a 100%); |
|
|
} |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #1a56db; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-anchor text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-heading font-bold text-secondary">Anker<span class="text-primary">-fit</span></h1> |
|
|
</div> |
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#how-it-works" class="nav-link text-secondary font-medium">How It Works</a> |
|
|
<a href="#features" class="nav-link text-secondary font-medium">Features</a> |
|
|
<a href="#pricing" class="nav-link text-secondary font-medium">Pricing</a> |
|
|
<a href="#testimonials" class="nav-link text-secondary font-medium">Success Stories</a> |
|
|
<a href="#charities" class="nav-link text-secondary font-medium">Charities</a> |
|
|
</nav> |
|
|
|
|
|
<button class="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition duration-300"> |
|
|
Get Started |
|
|
</button> |
|
|
|
|
|
<button class="md:hidden text-secondary"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-bg text-white"> |
|
|
<div class="container mx-auto px-4 py-20 md:py-28 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-6xl font-heading font-bold mb-6 leading-tight"> |
|
|
Stop Skipping The Gym.<br> |
|
|
<span class="text-primary">We'll Hold You Accountable.</span> |
|
|
</h1> |
|
|
<p class="text-xl mb-8 text-gray-300"> |
|
|
Our fitness accountability coaches ensure you show up when you commit. |
|
|
Miss a session? Your payment goes to charity. It's time to get serious. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-primary hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300"> |
|
|
Start Your Commitment |
|
|
</button> |
|
|
<button class="bg-white hover:bg-gray-100 text-secondary px-8 py-4 rounded-lg font-bold text-lg transition duration-300"> |
|
|
How It Works |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 md:h-[500px] flex items-center justify-center"> |
|
|
<div class="text-center p-4"> |
|
|
<i class="fas fa-user-check text-7xl text-gray-400 mb-4"></i> |
|
|
<p class="text-gray-500">Accountability Coach<br>Monitoring Your Progress</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -left-6 bg-white shadow-xl rounded-lg p-4 w-64"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-green-100 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-check-circle text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold">John D. checked in</p> |
|
|
<p class="text-sm text-gray-500">Today at 8:30 AM</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -top-6 -right-6 bg-white shadow-xl rounded-lg p-4 w-64"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-red-100 rounded-full p-2 mr-3"> |
|
|
<i class="fas fa-times-circle text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-bold">Sarah M. missed session</p> |
|
|
<p class="text-sm text-gray-500">$10 donated to charity</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<div class="text-5xl font-heading font-bold text-primary mb-4">98%</div> |
|
|
<h3 class="text-xl font-bold text-secondary mb-2">Attendance Rate</h3> |
|
|
<p class="text-gray-600">Clients who stick to their commitments</p> |
|
|
</div> |
|
|
<div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<div class="text-5xl font-heading font-bold text-primary mb-4">250k+</div> |
|
|
<h3 class="text-xl font-bold text-secondary mb-2">To Charity</h3> |
|
|
<p class="text-gray-600">Donated from missed sessions</p> |
|
|
</div> |
|
|
<div class="stat-card bg-white rounded-xl shadow-lg p-8 text-center"> |
|
|
<div class="text-5xl font-heading font-bold text-primary mb-4">72%</div> |
|
|
<h3 class="text-xl font-bold text-secondary mb-2">Fitness Progress</h3> |
|
|
<p class="text-gray-600">Average improvement in 3 months</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-20"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-heading font-bold text-secondary mb-4">How Our Accountability System Works</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">We've created a proven system to ensure you never skip the gym again</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<div class="feature-icon mb-6 mx-auto"> |
|
|
<i class="fas fa-calendar-check text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">1. Schedule Sessions</h3> |
|
|
<p class="text-gray-600">Plan your gym sessions in advance through our app. Be specific about date, time, and workout.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<div class="feature-icon mb-6 mx-auto"> |
|
|
<i class="fas fa-bell text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">2. Get Reminders</h3> |
|
|
<p class="text-gray-600">Receive notifications before your scheduled session. We'll make sure you don't forget.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<div class="feature-icon mb-6 mx-auto"> |
|
|
<i class="fas fa-check-circle text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">3. Check In</h3> |
|
|
<p class="text-gray-600">Check in via our app when you arrive at the gym. Simple geolocation verification.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8"> |
|
|
<div class="feature-icon mb-6 mx-auto"> |
|
|
<i class="fas fa-hands-helping text-white text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">4. Accountability</h3> |
|
|
<p class="text-gray-600">Missed a session? We'll call you immediately. Your payment goes to charity.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-heading font-bold text-secondary mb-4">Simple, Transparent Pricing</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Pay only for the accountability you need. Missed sessions benefit others.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
<div class="pricing-card bg-white rounded-xl shadow-lg p-8"> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">Basic Commitment</h3> |
|
|
<div class="text-4xl font-heading font-bold text-primary mb-4">$19<span class="text-xl text-gray-500">/month</span></div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>3 scheduled sessions/week</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>App notifications</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Missed session fee: $10</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times-circle mr-2"></i> |
|
|
<span>No personal coach calls</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-secondary py-3 rounded-lg font-bold transition duration-300"> |
|
|
Start Basic |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="pricing-card bg-white rounded-xl shadow-lg p-8 border-primary relative"> |
|
|
<div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 rounded-bl-lg rounded-tr-lg font-bold"> |
|
|
MOST POPULAR |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">Pro Accountability</h3> |
|
|
<div class="text-4xl font-heading font-bold text-primary mb-4">$39<span class="text-xl text-gray-500">/month</span></div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Unlimited scheduled sessions</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>App + SMS notifications</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Personal coach call if missed</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Missed session fee: $15</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-primary hover:bg-blue-700 text-white py-3 rounded-lg font-bold transition duration-300"> |
|
|
Start Pro |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="pricing-card bg-white rounded-xl shadow-lg p-8"> |
|
|
<h3 class="text-2xl font-bold text-secondary mb-4">Elite Coaching</h3> |
|
|
<div class="text-4xl font-heading font-bold text-primary mb-4">$99<span class="text-xl text-gray-500">/month</span></div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Everything in Pro</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Weekly check-in calls</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Personalized workout plans</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2"></i> |
|
|
<span>Missed session fee: $25</span> |
|
|
</li> |
|
|
</ul> |
|
|
<button class="w-full bg-gray-200 hover:bg-gray-300 text-secondary py-3 rounded-lg font-bold transition duration-300"> |
|
|
Start Elite |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center max-w-3xl mx-auto bg-white p-6 rounded-lg shadow"> |
|
|
<h3 class="text-xl font-bold text-secondary mb-2">Important Note on Missed Sessions</h3> |
|
|
<p class="text-gray-600"> |
|
|
When you miss a scheduled session, the fee is automatically donated to the charity of your choice. |
|
|
This creates a powerful incentive to honor your commitments while supporting worthy causes. |
|
|
We notify you immediately after a missed session and confirm the donation. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-20"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-heading font-bold text-secondary mb-4">Success Stories</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Hear from people who transformed their fitness journey with accountability</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="testimonial-card rounded-xl p-8 shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold text-lg">Michael T.</h4> |
|
|
<p class="text-gray-500">6 months with CommitFit</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
"Before CommitFit, I was skipping 50% of my gym sessions. Now I haven't missed one in 4 months. |
|
|
Knowing someone is holding me accountable makes all the difference." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card rounded-xl p-8 shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold text-lg">Sarah J.</h4> |
|
|
<p class="text-gray-500">Pro Plan member</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
"I missed one session and got a call from my coach within 10 minutes. |
|
|
I was embarrassed but it motivated me to never miss again. |
|
|
Plus, my $15 went to cancer research." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="testimonial-card rounded-xl p-8 shadow-lg"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-bold text-lg">David R.</h4> |
|
|
<p class="text-gray-500">Lost 30lbs with CommitFit</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
"The combination of accountability and knowing my money goes to charity if I skip |
|
|
has been revolutionary. I've gone from 3 missed sessions per week to zero in 6 months." |
|
|
</p> |
|
|
<div class="flex text-yellow-400"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="charities" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-heading font-bold text-secondary mb-4">Your Commitment Helps Others</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Choose where your missed session fees go. Turn skipped workouts into positive impact.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto"> |
|
|
<div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">Children's Health</h3> |
|
|
<p class="text-gray-600 text-center text-sm">Supporting medical care for children in need</p> |
|
|
</div> |
|
|
|
|
|
<div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">Environmental Action</h3> |
|
|
<p class="text-gray-600 text-center text-sm">Funding conservation and sustainability projects</p> |
|
|
</div> |
|
|
|
|
|
<div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">Education Access</h3> |
|
|
<p class="text-gray-600 text-center text-sm">Providing learning resources to underserved communities</p> |
|
|
</div> |
|
|
|
|
|
<div class="charity-selector bg-white rounded-xl p-6 shadow-md border-2 border-gray-200 cursor-pointer"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-center mb-2">Hunger Relief</h3> |
|
|
<p class="text-gray-600 text-center text-sm">Feeding families facing food insecurity</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<p class="text-xl font-bold text-secondary mb-4">Over $250,000 donated to date</p> |
|
|
<button class="bg-primary hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition duration-300"> |
|
|
Join Our Community |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="cta-section py-20 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-heading font-bold mb-6">Ready to Transform Your Fitness Commitment?</h2> |
|
|
<p class="text-xl max-w-3xl mx-auto mb-10 text-gray-200"> |
|
|
Stop disappointing yourself. Let us help you build the discipline you need to achieve your fitness goals. |
|
|
</p> |
|
|
<button class="bg-white hover:bg-gray-100 text-secondary px-10 py-5 rounded-lg font-bold text-xl transition duration-300"> |
|
|
Start Your 14-Day Trial |
|
|
</button> |
|
|
<p class="mt-6 text-gray-300">No credit card required. Cancel anytime.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-secondary text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-primary w-10 h-10 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-anchor text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-heading font-bold">Anker<span class="text-primary">-fit</span></h1> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Like an anchor keeps a ship steady, we'll keep you committed to your fitness goals. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Quick Links</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Success Stories</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Charities</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Legal</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Refund Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Charity Partners</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-6">Contact Us</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-envelope mt-1 mr-3 text-gray-400"></i> |
|
|
<span class="text-gray-400">support@commitfit.com</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-phone mt-1 mr-3 text-gray-400"></i> |
|
|
<span class="text-gray-400">(888) 555-1234</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-gray-400"></i> |
|
|
<span class="text-gray-400">123 Fitness Ave, Health City</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 CommitFit. All rights reserved. Accountability leads to transformation.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6"> |
|
|
<button class="bg-primary hover:bg-blue-700 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center"> |
|
|
<i class="fas fa-comment-alt text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.charity-selector').forEach(item => { |
|
|
item.addEventListener('click', event => { |
|
|
|
|
|
document.querySelectorAll('.charity-selector').forEach(el => { |
|
|
el.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
event.currentTarget.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=TimonKuik/anker-fit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
