<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liftband: The Future of Strength Tracking</title>
<!-- Tailwind CSS CDN --><script src="<https://cdn.tailwindcss.com>"></script>
<!-- Fonts: Oswald (Headlines) and Inter (Body) --><link href="<https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&family=Inter:wght@400;600&display=swap>" rel="stylesheet">
<!-- Font Awesome for Icons --><link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>">
<style>
/* Define the custom dark red accent */
:root {
--lift-red: #D91A21; /* Deep Red Accent */
--deep-black: #000000; /* Absolute black for background */
--off-black: #0F0F0F; /* Slightly lighter black for sections */
}
body {
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
background-color: var(--deep-black);
color: #f3f4f6;
}
/* Styling for Oswald headings */
.oswald {
font-family: 'Oswald', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.text-lift-red {
color: var(--lift-red);
}
.bg-lift-red {
background-color: var(--lift-red);
}
/* Hero Section Styling */
.hero-section {
background-color: var(--deep-black);
position: relative;
overflow: hidden;
padding: 8rem 0;
}
/* Diagonal lines background pattern */
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(
-45deg,
transparent,
transparent 10px,
rgba(217, 26, 33, 0.1) 10px,
rgba(217, 26, 33, 0.1) 11px /* Thin red line */
);
opacity: 0.3;
z-index: 1;
}
.hero-content-wrapper {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.hero-text-content {
flex: 1;
padding-right: 4rem;
text-align: left;
}
.hero-product-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.hero-product-image img {
max-width: 100%;
height: auto;
max-height: 500px; /* Increased size slightly for impact */
filter: drop-shadow(0 0 50px rgba(217, 26, 33, 0.5)); /* Red glow behind product */
transform: translateY(-20px);
}
/* JOLT-inspired pre-order tag */
.pre-order-tag {
display: inline-flex;
align-items: center;
background-color: var(--off-black);
padding: 0.4rem 1rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
color: #a3a3a3;
border: 1px solid #333;
margin-bottom: 1.5rem;
}
.pre-order-tag .dot {
width: 8px;
height: 8px;
background-color: var(--lift-red);
border-radius: 50%;
margin-right: 0.5rem;
}
.shadow-lift-red {
box-shadow: 0 0 40px rgba(217, 26, 33, 0.4);
}
.title-bar-accent {
border-left: 8px solid var(--lift-red);
padding-left: 1.5rem;
}
.button-checkmark {
display: inline-flex;
align-items: center;
font-weight: 600;
color: #a3a3a3;
margin-left: 1.5rem;
}
.button-checkmark svg {
color: var(--lift-red);
margin-right: 0.5rem;
}
@media (max-width: 768px) {
.hero-content-wrapper {
flex-direction: column-reverse;
text-align: center;
}
.hero-text-content {
padding-right: 0;
padding-top: 2rem;
}
.hero-product-image img {
max-height: 300px;
transform: translateY(0);
}
.pre-order-tag {
margin-left: auto;
margin-right: auto;
}
.button-checkmark {
margin-top: 1rem;
margin-left: 0;
justify-content: center;
}
.md\\:grid-cols-2 > div {
padding: 1rem 0;
width: 100%;
}
}
</style>
</head>
<body class="antialiased">
<!-- Header / Navigation --><header class="sticky top-0 z-50 bg-black/90 backdrop-blur-sm shadow-lg border-b border-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<a href="#" class="text-3xl font-extrabold oswald text-white hover:text-lift-red transition duration-300">LIFTBAND<span class="text-lift-red">.</span></a>
<nav class="hidden md:flex space-x-8 text-sm font-medium oswald text-gray-400">
<a href="#metrics" class="hover:text-lift-red transition duration-300">Metrics</a>
<a href="#tech" class="hover:text-lift-red transition duration-300">Technology</a>
<a href="#app" class="hover:text-lift-red transition duration-300">App</a>
<a href="#pricing" class="hover:text-lift-red transition duration-300">Shop</a>
</nav>
<a href="#pricing" class="px-6 py-2 bg-lift-red hover:bg-red-700 text-white font-bold oswald rounded-sm shadow-lg transition duration-300 transform hover:scale-[1.03] tracking-widest">PRE-ORDER</a>
</div>
</header>
<!-- 1. Hero Section --><section class="hero-section">
<div class="hero-content-wrapper">
<div class="hero-text-content">
<div class="pre-order-tag">
<span class="dot"></span> Pre-orders Open Now
</div>
<h1 class="text-6xl md:text-8xl font-extrabold oswald leading-none mb-6 text-white">
<span class="text-lift-red">TRAIN</span> <br class="md:hidden"> SMARTER.
</h1>
<p class="mt-4 text-xl md:text-2xl text-gray-400 max-w-lg">
Stop guessing. Start dominating. Liftband delivers real-time velocity, form analysis, and readiness scores straight to your wrist.
</p>
<div class="mt-10 flex flex-col sm:flex-row items-center justify-start sm:space-x-6">
<a href="#pricing" class="px-8 py-3 text-lg font-bold text-white bg-lift-red rounded-sm shadow-lift-red hover:bg-red-700 transition duration-300 transform hover:scale-105 oswald tracking-widest">
GET STARTED NOW
</a>
<div class="button-checkmark">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="<http://www.w3.org/2000/svg>"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
Free Shipping
</div>
</div>
</div>
<div class="hero-product-image">
<!-- IMPORTANT: To use your local file, replace the src below with "wmremove-transformed (7).jpg" -->
<img
src="<https://images.unsplash.com/photo-1557935728-e6d1eaed5539?q=80&w=1000&auto=format&fit=crop>"
alt="Liftband sleek fitness tracker product shot"
>
</div>
</div>
</section>
<!-- 2. Core Metrics / Features --><section id="metrics" class="py-24 bg-off-black border-t border-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-1 gap-16 items-center">
<div>
<p class="text-lift-red font-bold oswald text-xl mb-2">PERFORMANCE DATA</p>
<h2 class="text-4xl md:text-6xl font-extrabold oswald mb-8 title-bar-accent">
VBT & READINESS. <br class="hidden md:block">THE NEW STANDARD.
</h2>
<p class="text-xl text-gray-400 mb-8">
Traditional wearables fail in the weight room. Liftband's sensor fusion technology is calibrated to track and analyze barbell movement dynamics, giving you the only true measure of strength effort.
</p>
<div class="space-y-6">
<div class="flex items-start">
<span class="text-lift-red text-3xl mr-4"><i class="fa-solid fa-gauge-high"></i></span>
<div>
<h3 class="text-2xl font-bold oswald">VELOCITY ZONES</h3>
<p class="text-gray-500">Auto-adjust intensity (M/S) to match daily fatigue levels. Never miss a PR window.</p>
</div>
</div>
<div class="flex items-start">
<span class="text-lift-red text-3xl mr-4"><i class="fa-solid fa-brain"></i></span>
<div>
<h3 class="text-2xl font-bold oswald">CNS FATIGUE</h3>
<p class="text-gray-500">HRV and sleep analysis predict neurological readiness, separating muscle recovery from true systemic fatigue.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 3. Technology / Bar Sensor --><section id="tech" class="py-24 bg-deep-black border-t border-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-1 gap-16 items-center">
<div>
<p class="text-lift-red font-bold oswald text-xl mb-2">PRECISION HARDWARE</p>
<h2 class="text-4xl md:text-6xl font-extrabold oswald mb-8 title-bar-accent">
THE BAR SENSOR. <br class="hidden md:block"><span class="text-gray-400">ABSOLUTE ACCURACY.</span>
</h2>
<p class="text-gray-400 text-xl mb-6">
For lifts that demand zero error, the optional Bar Sensor magnetically clips to the barbell, eliminating measurement uncertainty. It provides Gold Standard data on bar path, stability, and true linear velocity.
</p>
<a href="#pricing" class="text-lift-red font-bold oswald hover:text-white transition duration-300 flex items-center">
<span class="mr-2">GET THE PRO BUNDLE</span> <i class="fa-solid fa-arrow-right-long"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 4. App & Data --><section id="app" class="py-24 bg-off-black border-t border-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-1 gap-16 items-center">
<div>
<p class="text-lift-red font-bold oswald text-xl mb-2">DECONSTRUCT YOUR WORKOUT</p>
<h2 class="text-4xl md:text-6xl font-extrabold oswald mb-8 title-bar-accent">
THE <span class="text-gray-400">COMMAND</span> CENTER.
</h2>
<p class="text-gray-400 text-xl mb-6">
Visualize your Force-Velocity profile over time. Track cumulative training volume and receive automated, data-driven recommendations on when to deload or push for a new peak.
</p>
<ul class="space-y-4 text-gray-300">
<li class="flex items-center text-lg"><span class="text-lift-red mr-3"><i class="fa-solid fa-chart-line"></i></span> Full Force-Velocity Profiling</li>
<li class="flex items-center text-lg"><span class="text-lift-red mr-3"><i class="fa-solid fa-user-group"></i></span> Connect & Compete on Leaderboards</li>
<li class="flex items-center text-lg"><span class="text-lift-red mr-3"><i class="fa-solid fa-calendar-check"></i></span> Automated Training Guidance</li>
</ul>
</div>
</div>
</div>
</section>
<!-- 5. Pricing / CTA --><section id="pricing" class="py-24 bg-deep-black border-t border-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-5xl font-extrabold oswald mb-4">
SECURE YOUR <span class="text-lift-red">EDGE</span>
</h2>
<p class="text-xl text-gray-500 mb-16 max-w-2xl mx-auto">
Select the hardware engineered for your commitment to strength.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
<!-- Plan 1: Core Liftband --><div class="bg-gray-800 p-8 rounded-sm shadow-xl border-2 border-gray-700 transition duration-300 hover:border-lift-red">
<h3 class="text-3xl font-bold oswald mb-2 text-white">CORE</h3>
<p class="text-gray-400 mb-6">Wrist-based tracking & recovery.</p>
<div class="text-6xl font-extrabold mb-6 text-white">$199</div>
<ul class="text-left text-gray-300 space-y-3 mb-8 text-lg">
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Liftband Wrist Unit</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Sleep & HRV Monitoring</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Estimated Velocity</li>
<li class="flex items-center"><span class="text-gray-500 mr-3"><i class="fa-solid fa-minus"></i></span> Precision Bar Sensor</li>
</ul>
<a href="#" class="w-full block py-4 bg-gray-700 text-white font-bold oswald rounded-sm hover:bg-gray-600 transition duration-300 tracking-widest">ORDER CORE</a>
</div>
<!-- Plan 2: Pro Liftband (Recommended) --><div class="bg-gray-800 p-8 rounded-sm shadow-lift-red ring-4 ring-lift-red">
<p class="text-sm font-bold text-white bg-lift-red py-1 px-4 rounded-full inline-block mb-4 oswald">THE ADVANTAGE</p>
<h3 class="text-4xl font-extrabold oswald mb-2 text-white">PRO BUNDLE</h3>
<p class="text-gray-200 mb-6 text-xl">The ultimate performance system.</p>
<div class="text-7xl font-extrabold mb-6 text-white">$299</div>
<ul class="text-left text-gray-100 space-y-3 mb-8 text-lg">
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> **Liftband Wrist Unit**</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> **Liftband Bar Sensor**</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Precision VBT & Bar Path</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> 12 Months App Subscription</li>
</ul>
<a href="#" class="w-full block py-4 bg-lift-red text-white text-xl font-bold oswald rounded-sm shadow-xl hover:bg-red-700 transition duration-300 tracking-widest">SECURE PRO BUNDLE</a>
</div>
<!-- Plan 3: Elite Coach --><div class="bg-gray-800 p-8 rounded-sm shadow-xl border-2 border-gray-700 transition duration-300 hover:border-lift-red">
<h3 class="text-3xl font-bold oswald mb-2">ELITE COACH</h3>
<p class="text-gray-400 mb-6">For professional teams and gyms.</p>
<div class="text-6xl font-extrabold mb-6 text-white">Custom</div>
<ul class="text-left text-gray-300 space-y-3 mb-8 text-lg">
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> 5+ Pro Bundles</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Coach Dashboard Access</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> API Integration Support</li>
<li class="flex items-center"><span class="text-lift-red mr-3"><i class="fa-solid fa-check"></i></span> Dedicated Support</li>
</ul>
<a href="#" class="w-full block py-4 bg-gray-700 text-white font-bold oswald rounded-sm hover:bg-gray-600 transition duration-300 tracking-widest">CONTACT SALES</a>
</div>
</div>
</div>
</section>
<!-- Footer --><footer class="bg-black border-t border-gray-900 mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="flex flex-col md:flex-row justify-between items-center text-gray-500 text-sm space-y-4 md:space-y-0">
<div class="oswald text-lg text-gray-400">LIFTBAND<span class="text-lift-red">.</span> | TRAIN SMARTER. LIFT FASTER.</div>
<div class="flex space-x-6">
<a href="#" class="hover:text-lift-red transition duration-300">Privacy</a>
<a href="#" class="hover:text-lift-red transition duration-300">Support</a>
<a href="#" class="hover:text-lift-red transition duration-300">Careers</a>
</div>
</div>
</div>
</footer>
</body>
</html>