---
// ABOUTME: Custom landing page for Pierre Fitness Intelligence
// ABOUTME: Marketing homepage with modern design, B2B section, and streamlined messaging
import '../styles/global.css';
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pierre - AI-Powered Fitness Intelligence</title>
<meta name="description" content="Get smarter insights from your fitness data. Pierre analyzes your Strava, Garmin, Fitbit, WHOOP, and Coros data using sports science formulas to help you train better and recover smarter.">
<meta name="keywords" content="fitness insights, AI fitness coach, Strava analysis, Garmin insights, training load, recovery score, nutrition tracking, sleep analysis">
<!-- Open Graph -->
<meta property="og:title" content="Pierre - AI-Powered Fitness Intelligence">
<meta property="og:description" content="Smarter insights from your fitness data using real sports science.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pierre.async-io.org">
<meta property="og:image" content="https://pierre.async-io.org/pierre-logo.svg">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/pierre-favicon.svg">
<style>
:root {
--banner-height: 2.5rem;
--hero-padding-with-banner: 11rem;
--hero-padding-without-banner: 8rem;
}
@media (prefers-reduced-motion: reduce) {
#main-nav, #hero-section { transition: none !important; }
}
</style>
</head>
<body class="bg-[#0F0F1A] text-white font-sans antialiased">
<!-- Announcement Banner -->
<div id="announcement-banner" class="fixed top-0 left-0 right-0 z-[60] gradient-pierre text-white text-center py-2.5 px-4 text-sm font-medium">
<div class="max-w-7xl mx-auto flex items-center justify-center gap-1 sm:gap-2 pr-10 sm:pr-0">
<span class="hidden sm:inline">🚀</span>
<span class="text-xs sm:text-sm"><strong class="hidden sm:inline">Pierre Fitness Intelligence</strong><strong class="sm:hidden">Pierre</strong> is coming soon!</span>
<a href="#early-access" class="ml-1 sm:ml-2 underline underline-offset-2 hover:no-underline font-semibold text-xs sm:text-sm whitespace-nowrap">Sign Up →</a>
<button id="banner-dismiss" class="absolute right-1 sm:right-2 top-1/2 -translate-y-1/2 w-9 h-9 sm:w-11 sm:h-11 flex items-center justify-center hover:bg-white/20 rounded transition-colors focus:outline-none focus:ring-2 focus:ring-white/60" aria-label="Dismiss banner">
<svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Navigation -->
<nav id="main-nav" class="fixed top-10 left-0 right-0 z-50 bg-[#0F0F1A]/90 backdrop-blur-md border-b border-white/10 transition-[top] duration-300 ease-out">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center gap-3">
<img src="/pierre-logo.svg" alt="Pierre" class="h-10 w-10">
<span class="text-xl font-semibold hidden sm:inline">Pierre</span>
</div>
<!-- Desktop Navigation -->
<div class="hidden md:flex items-center gap-8">
<a href="#features" class="text-gray-300 hover:text-white transition-colors">Features</a>
<a href="#intelligence" class="text-gray-300 hover:text-white transition-colors">Intelligence</a>
<a href="#developers" class="text-gray-300 hover:text-white transition-colors">Developers</a>
<a href="#early-access" class="gradient-pierre px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity">
Get Early Access
</a>
</div>
<!-- Mobile Hamburger Button -->
<button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-white/10 transition-colors" aria-label="Open menu" aria-expanded="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path id="hamburger-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
<path id="close-icon" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden pb-4">
<div class="flex flex-col gap-2 mobile-menu-enter">
<a href="#features" class="px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors">Features</a>
<a href="#intelligence" class="px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors">Intelligence</a>
<a href="#developers" class="px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors">Developers</a>
<a href="#early-access" class="gradient-pierre px-4 py-3 rounded-lg font-medium text-center mt-2">Get Early Access</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section with Gradient Mesh -->
<section id="hero-section" class="relative pt-44 pb-20 px-4 overflow-hidden transition-[padding] duration-300 ease-out">
<!-- Animated Gradient Mesh Background -->
<div class="absolute inset-0 gradient-mesh"></div>
<!-- Floating Logo Elements (decorative) -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<img src="/pierre-logo.svg" alt="" class="absolute top-20 left-[10%] w-16 h-16 opacity-10 float-slow" aria-hidden="true">
<img src="/pierre-logo.svg" alt="" class="absolute top-40 right-[15%] w-12 h-12 opacity-10 float-medium" aria-hidden="true">
<img src="/pierre-logo.svg" alt="" class="absolute bottom-32 left-[20%] w-10 h-10 opacity-10 float-fast" aria-hidden="true">
<img src="/pierre-logo.svg" alt="" class="absolute bottom-20 right-[25%] w-14 h-14 opacity-10 float-slow" aria-hidden="true">
</div>
<div class="relative max-w-7xl mx-auto text-center">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
<span class="gradient-pierre-text">Fitness Intelligence</span><br>
for Everyone
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
Get smarter insights from your <strong class="text-white">Strava</strong>,
<strong class="text-white">Garmin</strong>, <strong class="text-white">Fitbit</strong>,
<strong class="text-white">WHOOP</strong>, <strong class="text-white">Coros</strong>, or <strong class="text-white">Terra</strong> data.
Real sports science to help you train better, eat smarter, and recover faster.
</p>
<!-- Device Badges (moved up for visual break) -->
<div class="flex flex-wrap justify-center gap-3 mb-10">
<span class="protocol-badge px-4 py-2 rounded-full bg-orange-500/20 border border-orange-500/30 text-orange-400 text-sm font-medium">
Strava
</span>
<span class="protocol-badge px-4 py-2 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-400 text-sm font-medium">
Garmin
</span>
<span class="protocol-badge px-4 py-2 rounded-full bg-teal-500/20 border border-teal-500/30 text-teal-400 text-sm font-medium">
Fitbit
</span>
<span class="protocol-badge px-4 py-2 rounded-full bg-red-500/20 border border-red-500/30 text-red-400 text-sm font-medium">
WHOOP
</span>
<span class="protocol-badge px-4 py-2 rounded-full bg-lime-500/20 border border-lime-500/30 text-lime-400 text-sm font-medium">
Coros
</span>
<span class="protocol-badge px-4 py-2 rounded-full bg-purple-500/20 border border-purple-500/30 text-purple-400 text-sm font-medium">
Terra
</span>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#early-access" class="gradient-pierre px-8 py-3 rounded-lg font-semibold text-lg hover:opacity-90 transition-opacity">
Get Early Access
</a>
<a href="#features" class="px-8 py-3 rounded-lg font-semibold text-lg border border-white/20 hover:bg-white/5 transition-colors">
See How It Works
</a>
</div>
</div>
</section>
<!-- Section Divider -->
<div class="section-divider max-w-4xl mx-auto"></div>
<!-- Three Pillars Section -->
<section id="features" class="py-20 px-4 node-pattern">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Complete Fitness Picture</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Not just numbers—real insights across three pillars of wellness using proven sports science.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Training Pillar (Clickable) -->
<div id="training-pillar-card" class="card-hover bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-8 border border-emerald-500/20 cursor-pointer group transition-all hover:border-emerald-500/50 hover:shadow-lg hover:shadow-emerald-500/10">
<div class="icon-container w-14 h-14 gradient-activity mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-emerald-400">Training</h3>
<p class="text-gray-400 mb-4">Understand how hard you're training and when to push or rest.</p>
<ul class="space-y-2 text-sm text-gray-500">
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Training load & stress scores
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Fitness vs fatigue balance
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Race time predictions
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Training pattern analysis
</li>
</ul>
<div class="flex items-center justify-center gap-1 mt-4 text-emerald-400 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
<span>Click to learn more</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</div>
</div>
<!-- Nutrition Pillar (Clickable) -->
<div id="nutrition-pillar-card" class="card-hover bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-8 border border-amber-500/20 cursor-pointer group transition-all hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/10">
<div class="icon-container w-14 h-14 gradient-nutrition mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-amber-400">Nutrition & Recipes</h3>
<p class="text-gray-400 mb-4">Know exactly what to eat and build your personal recipe collection.</p>
<ul class="space-y-2 text-sm text-gray-500">
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
Daily calorie & macro targets
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
Pre/post-workout meal timing
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
Save & search your recipes
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
350,000+ USDA food database
</li>
</ul>
<div class="flex items-center justify-center gap-1 mt-4 text-amber-400 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
<span>Click to learn more</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</div>
</div>
<!-- Recovery Pillar (Clickable) -->
<div id="recovery-pillar-card" class="card-hover bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-8 border border-indigo-500/20 cursor-pointer group transition-all hover:border-indigo-500/50 hover:shadow-lg hover:shadow-indigo-500/10">
<div class="icon-container w-14 h-14 gradient-recovery mb-6 group-hover:scale-110 transition-transform">
<svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3 text-indigo-400">Recovery</h3>
<p class="text-gray-400 mb-4">Optimize your rest and know when you're ready to go again.</p>
<ul class="space-y-2 text-sm text-gray-500">
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
Sleep quality scoring
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
HRV-based readiness
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
Recovery recommendations
</li>
<li class="flex items-center gap-2">
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>
Rest day suggestions
</li>
</ul>
<div class="flex items-center justify-center gap-1 mt-4 text-indigo-400 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
<span>Click to learn more</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</div>
</div>
</div>
</div>
<!-- Training Pillar Modal -->
<div id="training-modal" class="fixed inset-0 z-[100] hidden">
<div id="training-modal-backdrop" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<div class="absolute inset-4 md:inset-8 lg:inset-12 overflow-y-auto">
<div class="min-h-full flex items-start justify-center py-8">
<div class="bg-[#0F0F1A] rounded-2xl border border-emerald-500/20 w-full max-w-4xl shadow-2xl shadow-emerald-500/20 pillar-modal-content">
<div class="sticky top-0 bg-[#0F0F1A] border-b border-white/10 p-6 rounded-t-2xl flex items-center justify-between z-10">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl gradient-activity flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold text-emerald-400">Training Intelligence</h2>
<p class="text-gray-400 text-sm">Science-backed metrics for optimal performance</p>
</div>
</div>
<button id="close-training-modal" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="p-6 space-y-8">
<!-- Key Value Proposition -->
<div class="bg-gradient-to-r from-emerald-500/10 to-transparent rounded-xl p-6 border border-emerald-500/20">
<h3 class="text-xl font-semibold text-white mb-3">Know Exactly When to Push & When to Rest</h3>
<p class="text-gray-300 leading-relaxed">
Most athletes train by feel—sometimes too hard, sometimes too easy. Pierre uses proven training science formulas (TRIMP, TSS, CTL/ATL/TSB) to quantify your training load and tell you exactly where you are in the fitness-fatigue balance. No more guessing if you're overtraining or undertrained.
</p>
</div>
<!-- What You Get -->
<div>
<h3 class="text-lg font-semibold text-white mb-4">What Pierre Tells You</h3>
<div class="grid sm:grid-cols-2 gap-4">
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-emerald-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">📊</span>
<span class="font-medium text-white">Training Load Score</span>
</div>
<p class="text-gray-400 text-sm">How hard was that workout? Get a precise number based on intensity, duration, and heart rate—not just distance.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-emerald-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">⚖️</span>
<span class="font-medium text-white">Fitness vs Fatigue</span>
</div>
<p class="text-gray-400 text-sm">See your long-term fitness (CTL) versus short-term fatigue (ATL). Know when you're building fitness vs. just accumulating tiredness.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-emerald-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🎯</span>
<span class="font-medium text-white">Race Predictions</span>
</div>
<p class="text-gray-400 text-sm">Get accurate predictions for 5K, 10K, half marathon, and marathon based on your actual training data—not generic calculators.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-emerald-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">📈</span>
<span class="font-medium text-white">Pattern Detection</span>
</div>
<p class="text-gray-400 text-sm">Spot overtraining before injury. Pierre identifies training blocks, consistency trends, and early warning signs of overreaching.</p>
</div>
</div>
</div>
<!-- Science Behind It -->
<div class="bg-[#1E1E2E] rounded-xl p-6 border border-white/5">
<h3 class="text-lg font-semibold text-white mb-3">The Science Behind It</h3>
<div class="space-y-3 text-sm text-gray-400">
<p><strong class="text-emerald-400">TRIMP (Training Impulse)</strong> — Developed by Dr. Eric Banister, combines workout duration with heart rate intensity to measure total physiological stress.</p>
<p><strong class="text-emerald-400">CTL/ATL/TSB</strong> — The same fitness/fatigue model used by Olympic athletes and professional cycling teams to peak for competition.</p>
<p><strong class="text-emerald-400">VDOT Predictions</strong> — Jack Daniels' validated formula for predicting race performance from training data.</p>
</div>
</div>
<!-- CTA -->
<div class="text-center pt-4">
<a href="#early-access" id="training-modal-cta" class="inline-flex items-center gap-2 gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
Get Training Intelligence
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Nutrition Pillar Modal -->
<div id="nutrition-modal" class="fixed inset-0 z-[100] hidden">
<div id="nutrition-modal-backdrop" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<div class="absolute inset-4 md:inset-8 lg:inset-12 overflow-y-auto">
<div class="min-h-full flex items-start justify-center py-8">
<div class="bg-[#0F0F1A] rounded-2xl border border-amber-500/20 w-full max-w-4xl shadow-2xl shadow-amber-500/20 pillar-modal-content">
<div class="sticky top-0 bg-[#0F0F1A] border-b border-white/10 p-6 rounded-t-2xl flex items-center justify-between z-10">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl gradient-nutrition flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold text-amber-400">Nutrition & Recipes</h2>
<p class="text-gray-400 text-sm">Fuel your training with precision</p>
</div>
</div>
<button id="close-nutrition-modal" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="p-6 space-y-8">
<!-- Key Value Proposition -->
<div class="bg-gradient-to-r from-amber-500/10 to-transparent rounded-xl p-6 border border-amber-500/20">
<h3 class="text-xl font-semibold text-white mb-3">Your Personal Nutrition Coach</h3>
<p class="text-gray-300 leading-relaxed">
Stop guessing what to eat. Pierre calculates your exact calorie and macro needs based on your body and activity level, then adjusts recommendations based on your training schedule. Pre-workout? More carbs. Recovery day? More protein. Rest day? Balanced macros with strategic carb reduction.
</p>
</div>
<!-- What You Get -->
<div>
<h3 class="text-lg font-semibold text-white mb-4">What Pierre Tells You</h3>
<div class="grid sm:grid-cols-2 gap-4">
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-amber-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🔢</span>
<span class="font-medium text-white">Personalized Macros</span>
</div>
<p class="text-gray-400 text-sm">Your exact protein, carbs, and fat targets calculated using Mifflin-St Jeor BMR formula—the most accurate method for athletes.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-amber-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">⏰</span>
<span class="font-medium text-white">Nutrient Timing</span>
</div>
<p class="text-gray-400 text-sm">Know exactly when to eat what. Pre-workout windows (2-4 hours), post-workout recovery (within 30 minutes), and optimal meal spacing.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-amber-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">📚</span>
<span class="font-medium text-white">Recipe Collection</span>
</div>
<p class="text-gray-400 text-sm">Build your personal recipe library. Save meals tagged by training phase (pre-workout, post-workout, rest day) with validated nutrition data.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-amber-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🔍</span>
<span class="font-medium text-white">350K+ Food Database</span>
</div>
<p class="text-gray-400 text-sm">Search USDA FoodData Central for accurate nutrition info on any food. No guessing, no marketing claims—just verified data.</p>
</div>
</div>
</div>
<!-- Training-Aware Nutrition -->
<div class="bg-[#1E1E2E] rounded-xl p-6 border border-white/5">
<h3 class="text-lg font-semibold text-white mb-4">Training-Aware Meal Targets</h3>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="w-24 text-sm font-medium text-amber-400">Pre-Training</div>
<div class="flex-1 h-3 bg-[#0F0F1A] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-600 to-amber-400" style="width: 55%"></div>
</div>
<div class="w-20 text-right text-sm text-gray-400">55% carbs</div>
</div>
<div class="flex items-center gap-4">
<div class="w-24 text-sm font-medium text-emerald-400">Post-Training</div>
<div class="flex-1 h-3 bg-[#0F0F1A] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-600 to-emerald-400" style="width: 30%"></div>
</div>
<div class="w-20 text-right text-sm text-gray-400">30% protein</div>
</div>
<div class="flex items-center gap-4">
<div class="w-24 text-sm font-medium text-indigo-400">Rest Day</div>
<div class="flex-1 h-3 bg-[#0F0F1A] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-indigo-600 to-indigo-400" style="width: 40%"></div>
</div>
<div class="w-20 text-right text-sm text-gray-400">Balanced</div>
</div>
</div>
<p class="text-gray-500 text-xs mt-4">Based on ISSN (International Society of Sports Nutrition) guidelines</p>
</div>
<!-- CTA -->
<div class="text-center pt-4">
<a href="#early-access" id="nutrition-modal-cta" class="inline-flex items-center gap-2 gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
Get Nutrition Intelligence
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Recovery Pillar Modal -->
<div id="recovery-modal" class="fixed inset-0 z-[100] hidden">
<div id="recovery-modal-backdrop" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<div class="absolute inset-4 md:inset-8 lg:inset-12 overflow-y-auto">
<div class="min-h-full flex items-start justify-center py-8">
<div class="bg-[#0F0F1A] rounded-2xl border border-indigo-500/20 w-full max-w-4xl shadow-2xl shadow-indigo-500/20 pillar-modal-content">
<div class="sticky top-0 bg-[#0F0F1A] border-b border-white/10 p-6 rounded-t-2xl flex items-center justify-between z-10">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl gradient-recovery flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold text-indigo-400">Recovery Intelligence</h2>
<p class="text-gray-400 text-sm">Rest smarter, come back stronger</p>
</div>
</div>
<button id="close-recovery-modal" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<div class="p-6 space-y-8">
<!-- Key Value Proposition -->
<div class="bg-gradient-to-r from-indigo-500/10 to-transparent rounded-xl p-6 border border-indigo-500/20">
<h3 class="text-xl font-semibold text-white mb-3">Recovery Is Where Fitness Happens</h3>
<p class="text-gray-300 leading-relaxed">
Training breaks you down. Recovery builds you back stronger. But most athletes treat rest as "not training" instead of an active part of their program. Pierre combines sleep data, HRV trends, and training load to tell you exactly when you're ready to train hard again—and when you need another day.
</p>
</div>
<!-- What You Get -->
<div>
<h3 class="text-lg font-semibold text-white mb-4">What Pierre Tells You</h3>
<div class="grid sm:grid-cols-2 gap-4">
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-indigo-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">😴</span>
<span class="font-medium text-white">Sleep Quality Score</span>
</div>
<p class="text-gray-400 text-sm">Not just hours slept—actual sleep quality. Deep sleep, REM cycles, efficiency, and how it compares to your baseline.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-indigo-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">💓</span>
<span class="font-medium text-white">HRV-Based Readiness</span>
</div>
<p class="text-gray-400 text-sm">Heart Rate Variability is the gold standard for recovery. Pierre tracks your HRV trends and compares to your personal baseline.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-indigo-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🔋</span>
<span class="font-medium text-white">Recovery Score</span>
</div>
<p class="text-gray-400 text-sm">One number that combines sleep, HRV, and training stress balance. Know at a glance if you're ready for intensity or need easy work.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-4 border border-indigo-500/10">
<div class="flex items-center gap-3 mb-2">
<span class="text-2xl">🛑</span>
<span class="font-medium text-white">Rest Day Suggestions</span>
</div>
<p class="text-gray-400 text-sm">AI-powered recommendations that consider your training history, sleep trends, and upcoming goals. Sometimes rest IS the workout.</p>
</div>
</div>
</div>
<!-- Cross-Provider Integration -->
<div class="bg-[#1E1E2E] rounded-xl p-6 border border-white/5">
<h3 class="text-lg font-semibold text-white mb-3">Works With Your Devices</h3>
<p class="text-gray-400 text-sm mb-4">
Pierre integrates sleep and HRV data from multiple sources for the most complete recovery picture:
</p>
<div class="flex flex-wrap gap-3">
<span class="px-3 py-1.5 rounded-full bg-red-500/20 border border-red-500/30 text-red-400 text-sm">WHOOP</span>
<span class="px-3 py-1.5 rounded-full bg-teal-500/20 border border-teal-500/30 text-teal-400 text-sm">Fitbit</span>
<span class="px-3 py-1.5 rounded-full bg-blue-500/20 border border-blue-500/30 text-blue-400 text-sm">Garmin</span>
<span class="px-3 py-1.5 rounded-full bg-purple-500/20 border border-purple-500/30 text-purple-400 text-sm">Terra (150+ devices)</span>
</div>
</div>
<!-- The Science -->
<div class="bg-[#1E1E2E] rounded-xl p-6 border border-white/5">
<h3 class="text-lg font-semibold text-white mb-3">The Science Behind It</h3>
<div class="space-y-3 text-sm text-gray-400">
<p><strong class="text-indigo-400">HRV (RMSSD)</strong> — The root mean square of successive differences between heartbeats. Higher values indicate better parasympathetic recovery.</p>
<p><strong class="text-indigo-400">Sleep Stage Analysis</strong> — Following NSF/AASM guidelines for optimal sleep stage distribution and efficiency scoring.</p>
<p><strong class="text-indigo-400">TSB Integration</strong> — Combines recovery metrics with Training Stress Balance for holistic readiness assessment.</p>
</div>
</div>
<!-- CTA -->
<div class="text-center pt-4">
<a href="#early-access" id="recovery-modal-cta" class="inline-flex items-center gap-2 gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
Get Recovery Intelligence
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Section (Redesigned) -->
<section class="py-16 px-4 bg-gradient-to-b from-[#1E1E2E]/50 to-transparent">
<div class="max-w-5xl mx-auto">
<div id="stats-container" class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<!-- Stat 1: Fitness Insights (Clickable) -->
<div id="tools-stat-card" class="stat-glow bg-[#0F0F1A] rounded-2xl p-8 border border-white/10 text-center group cursor-pointer transition-all hover:border-emerald-500/50 hover:shadow-lg hover:shadow-emerald-500/10">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl gradient-activity flex items-center justify-center group-hover:scale-110 transition-transform">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div class="text-5xl font-bold gradient-pierre-text mb-2" data-count="34">34</div>
<div class="text-gray-400 font-medium">Fitness Insights</div>
<p class="text-gray-500 text-sm mt-2">Training, nutrition & recovery metrics</p>
<div class="flex items-center justify-center gap-1 mt-3 text-emerald-400 text-xs font-medium opacity-0 group-hover:opacity-100 transition-opacity">
<span>Click to explore</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</div>
</div>
<!-- Stat 2: Supported Devices -->
<div class="stat-glow bg-[#0F0F1A] rounded-2xl p-8 border border-white/10 text-center group cursor-default">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl gradient-pierre flex items-center justify-center group-hover:scale-110 transition-transform">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
</div>
<div class="text-5xl font-bold gradient-pierre-text mb-2" data-count="150">150+</div>
<div class="text-gray-400 font-medium">Supported Devices</div>
<p class="text-gray-500 text-sm mt-2">Via Terra, Strava, Garmin & more</p>
</div>
<!-- Stat 3: Foods Database -->
<div class="stat-glow bg-[#0F0F1A] rounded-2xl p-8 border border-white/10 text-center group cursor-default">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl gradient-nutrition flex items-center justify-center group-hover:scale-110 transition-transform">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
</svg>
</div>
<div class="text-5xl font-bold gradient-pierre-text mb-2" data-count="350000">350k+</div>
<div class="text-gray-400 font-medium">Foods in Database</div>
<p class="text-gray-500 text-sm mt-2">USDA FoodData Central</p>
</div>
</div>
</div>
</section>
<!-- Intelligence Section -->
<section id="intelligence" class="pt-20 pb-10 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Real Sports Science, Not Guesswork</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Pierre uses the same methods trusted by elite coaches and sports scientists around the world.
</p>
</div>
<div class="bg-[#1E1E2E] rounded-xl p-8 border border-white/10">
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="icon-container w-12 h-12 bg-emerald-500/20 mx-auto mb-4">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Training Load</h3>
<p class="text-gray-400 text-sm">
Measures how hard each workout is based on intensity and duration so you know exactly how much stress you're putting on your body.
</p>
</div>
<div class="text-center">
<div class="icon-container w-12 h-12 bg-cyan-500/20 mx-auto mb-4">
<svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Fitness vs Fatigue</h3>
<p class="text-gray-400 text-sm">
Tracks your long-term fitness gains against short-term fatigue to find the sweet spot for peak performance on race day.
</p>
</div>
<div class="text-center">
<div class="icon-container w-12 h-12 bg-violet-600/20 mx-auto mb-4">
<svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Race Predictions</h3>
<p class="text-gray-400 text-sm">
Get accurate predictions for 5K, 10K, half marathon, and marathon distances based on your actual training data.
</p>
</div>
</div>
</div>
<!-- Nutrition Feature Highlight -->
<div class="mt-8 bg-[#1E1E2E] rounded-xl p-8 border border-amber-500/20">
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-amber-500/20 border border-amber-500/30 text-amber-400 text-xs font-medium mb-4">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
Recipe Management
</div>
<h3 class="text-2xl font-semibold mb-4">Training-Aware Meal Planning</h3>
<p class="text-gray-400 mb-6">
Build your personal recipe collection with meals optimized for your training schedule. Pierre validates nutrition using USDA data and adjusts macros based on whether you're fueling up, recovering, or resting.
</p>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span class="text-amber-500 mt-0.5">✓</span>
<span class="text-gray-300 text-sm"><strong class="text-white">Pre-training meals</strong> — High-carb focus (55%) for energy</span>
</div>
<div class="flex items-start gap-3">
<span class="text-amber-500 mt-0.5">✓</span>
<span class="text-gray-300 text-sm"><strong class="text-white">Post-training meals</strong> — High-protein (30%) for recovery</span>
</div>
<div class="flex items-start gap-3">
<span class="text-amber-500 mt-0.5">✓</span>
<span class="text-gray-300 text-sm"><strong class="text-white">Rest day meals</strong> — Balanced macros with strategic carb reduction</span>
</div>
</div>
</div>
<div class="bg-[#0F0F1A] rounded-lg p-6 border border-white/5">
<div class="text-xs text-gray-500 mb-3 font-mono">Recipe validation based on ISSN guidelines</div>
<div class="space-y-4">
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-400">Pre-Training</span>
<span class="text-amber-400">55% carbs</span>
</div>
<div class="h-2 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-600 to-amber-400" style="width: 55%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-400">Post-Training</span>
<span class="text-emerald-400">30% protein</span>
</div>
<div class="h-2 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-600 to-emerald-400" style="width: 30%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-400">Rest Day</span>
<span class="text-indigo-400">35% fat</span>
</div>
<div class="h-2 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-indigo-600 to-indigo-400" style="width: 35%"></div>
</div>
</div>
</div>
<div class="mt-4 pt-4 border-t border-white/5 text-xs text-gray-500">
Macros adjust automatically based on your TDEE and meal timing
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Example AI Report Section -->
<section class="py-6 px-4">
<div class="max-w-7xl mx-auto">
<!-- Example AI Report (Clickable) -->
<div id="example-report-card" class="bg-[#1E1E2E] rounded-xl p-8 border border-white/10 cursor-pointer transition-all hover:border-violet-500/50 hover:shadow-lg hover:shadow-violet-500/10 group">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-3">
<div class="icon-container w-10 h-10 bg-violet-600/20">
<svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h3 class="text-xl font-semibold">Example: AI-Generated Fitness Report</h3>
</div>
<div class="flex items-center gap-2 text-violet-400 text-sm font-medium group-hover:text-violet-300 transition-colors">
<span>Click to explore</span>
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</div>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Multi-Year Summary -->
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-emerald-500">
<div class="text-2xl font-bold text-emerald-400 mb-1">1,350</div>
<div class="text-sm text-gray-400">Activities over 5 years</div>
<div class="text-xs text-gray-500 mt-2">8 different sports tracked</div>
</div>
<!-- Fitness Score -->
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-violet-500">
<div class="text-2xl font-bold text-violet-400 mb-1">60/100</div>
<div class="text-sm text-gray-400">Current Fitness Score</div>
<div class="text-xs text-gray-500 mt-2">Based on TSB, sleep & recovery</div>
</div>
<!-- Weekly Volume -->
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-amber-500">
<div class="text-2xl font-bold text-amber-400 mb-1">8.5 hrs</div>
<div class="text-sm text-gray-400">Weekly Activity Volume</div>
<div class="text-xs text-gray-500 mt-2">+15% vs previous week</div>
</div>
<!-- AI Recommendation -->
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-cyan-500">
<div class="text-2xl font-bold text-cyan-400 mb-1">Rest Day</div>
<div class="text-sm text-gray-400">AI Recommendation</div>
<div class="text-xs text-gray-500 mt-2">Training load spike detected</div>
</div>
</div>
<p class="text-gray-500 text-xs mt-4 text-center">
Real data from 5 years of training. Click to see the full breakdown.
</p>
</div>
<!-- Report Modal -->
<div id="report-modal" class="fixed inset-0 z-[100] hidden">
<!-- Backdrop -->
<div id="modal-backdrop" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<!-- Modal Content -->
<div class="absolute inset-4 md:inset-8 lg:inset-16 overflow-y-auto">
<div class="min-h-full flex items-start justify-center py-8">
<div class="bg-[#0F0F1A] rounded-2xl border border-white/10 w-full max-w-4xl shadow-2xl shadow-violet-500/20 modal-content">
<!-- Modal Header -->
<div class="sticky top-0 bg-[#0F0F1A] border-b border-white/10 p-6 rounded-t-2xl flex items-center justify-between">
<div class="flex items-center gap-4">
<img src="/pierre-logo.svg" alt="" class="w-10 h-10">
<div>
<h2 class="text-2xl font-bold">5-Year Fitness Journey</h2>
<p class="text-gray-400 text-sm">Generated by Pierre + Claude</p>
</div>
</div>
<button id="close-modal" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Modal Body -->
<div class="p-6 space-y-8">
<!-- Hero Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="text-center p-4 bg-gradient-to-br from-emerald-500/20 to-emerald-500/5 rounded-xl border border-emerald-500/20">
<div class="text-3xl font-bold text-emerald-400 counter" data-target="1350">0</div>
<div class="text-sm text-gray-400">Total Activities</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-violet-500/20 to-violet-500/5 rounded-xl border border-violet-500/20">
<div class="text-3xl font-bold text-violet-400">5</div>
<div class="text-sm text-gray-400">Years Tracked</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-amber-500/20 to-amber-500/5 rounded-xl border border-amber-500/20">
<div class="text-3xl font-bold text-amber-400 counter" data-target="8">0</div>
<div class="text-sm text-gray-400">Sports</div>
</div>
<div class="text-center p-4 bg-gradient-to-br from-cyan-500/20 to-cyan-500/5 rounded-xl border border-cyan-500/20">
<div class="text-3xl font-bold text-cyan-400">0.7</div>
<div class="text-sm text-gray-400">Avg/Day</div>
</div>
</div>
<!-- Sport Distribution -->
<div>
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
Sport Distribution
</h3>
<div class="space-y-3">
<!-- Running -->
<div class="sport-bar" data-percent="40">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Running</span>
<span class="text-emerald-400 font-medium">540 activities (40%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
<!-- Cycling -->
<div class="sport-bar" data-percent="30">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Cycling</span>
<span class="text-orange-400 font-medium">405 activities (30%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-orange-500 to-orange-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
<!-- Hiking -->
<div class="sport-bar" data-percent="12">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Hiking</span>
<span class="text-amber-400 font-medium">162 activities (12%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-amber-500 to-amber-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
<!-- Nordic Ski -->
<div class="sport-bar" data-percent="8">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Nordic Ski</span>
<span class="text-cyan-400 font-medium">108 activities (8%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-cyan-500 to-cyan-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
<!-- Walking -->
<div class="sport-bar" data-percent="5">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Walking</span>
<span class="text-violet-400 font-medium">68 activities (5%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-violet-500 to-violet-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
<!-- Other Sports -->
<div class="sport-bar" data-percent="5">
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-300">Other (3 sports)</span>
<span class="text-gray-400 font-medium">67 activities (5%)</span>
</div>
<div class="h-3 bg-[#1E1E2E] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-gray-500 to-gray-400 rounded-full sport-progress" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<!-- Year by Year -->
<div>
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
Year-by-Year Progression
</h3>
<div class="grid grid-cols-5 gap-2 text-center">
<div class="year-bar">
<div class="h-24 bg-[#1E1E2E] rounded-lg flex flex-col justify-end p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-violet-500/50 to-violet-500/20 year-fill" style="height: 0%" data-height="71%"></div>
<span class="relative text-lg font-bold text-violet-400">220</span>
</div>
<span class="text-xs text-gray-500 mt-1 block">2021</span>
</div>
<div class="year-bar">
<div class="h-24 bg-[#1E1E2E] rounded-lg flex flex-col justify-end p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-violet-500/50 to-violet-500/20 year-fill" style="height: 0%" data-height="84%"></div>
<span class="relative text-lg font-bold text-violet-400">260</span>
</div>
<span class="text-xs text-gray-500 mt-1 block">2022</span>
</div>
<div class="year-bar">
<div class="h-24 bg-[#1E1E2E] rounded-lg flex flex-col justify-end p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-violet-500/50 to-violet-500/20 year-fill" style="height: 0%" data-height="95%"></div>
<span class="relative text-lg font-bold text-violet-400">295</span>
</div>
<span class="text-xs text-gray-500 mt-1 block">2023</span>
</div>
<div class="year-bar">
<div class="h-24 bg-[#1E1E2E] rounded-lg flex flex-col justify-end p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-emerald-500/50 to-emerald-500/20 year-fill" style="height: 0%" data-height="100%"></div>
<span class="relative text-lg font-bold text-emerald-400">310</span>
</div>
<span class="text-xs text-emerald-400 mt-1 block font-medium">2024</span>
</div>
<div class="year-bar">
<div class="h-24 bg-[#1E1E2E] rounded-lg flex flex-col justify-end p-2 relative overflow-hidden">
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-amber-500/50 to-amber-500/20 year-fill" style="height: 0%" data-height="85%"></div>
<span class="relative text-lg font-bold text-amber-400">265</span>
</div>
<span class="text-xs text-gray-500 mt-1 block">2025</span>
</div>
</div>
</div>
<!-- Athlete Evolution -->
<div class="bg-gradient-to-r from-violet-500/10 to-cyan-500/10 rounded-xl p-6 border border-violet-500/20">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
</svg>
Athlete Evolution
</h3>
<p class="text-gray-300 leading-relaxed">
Transitioned from primarily <span class="text-orange-400 font-medium">cycling</span> in 2021 to becoming a dedicated
<span class="text-emerald-400 font-medium">runner</span> by 2022-2023. By 2024-2025, evolved into a
<span class="text-violet-400 font-medium">multi-sport athlete</span> with strong focus on trail running,
Nordic skiing, and cross-training activities.
</p>
</div>
<!-- CTA -->
<div class="text-center pt-4">
<p class="text-gray-400 mb-4">Want a report like this for your fitness journey?</p>
<a href="#early-access" id="modal-cta" class="inline-flex items-center gap-2 gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
Get Early Access
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tools Modal -->
<div id="tools-modal" class="fixed inset-0 z-[100] hidden">
<!-- Backdrop -->
<div id="tools-modal-backdrop" class="absolute inset-0 bg-black/80 backdrop-blur-sm"></div>
<!-- Modal Content -->
<div class="absolute inset-4 md:inset-8 lg:inset-12 overflow-y-auto">
<div class="min-h-full flex items-start justify-center py-8">
<div class="bg-[#0F0F1A] rounded-2xl border border-white/10 w-full max-w-5xl shadow-2xl shadow-emerald-500/20 tools-modal-content">
<!-- Modal Header -->
<div class="sticky top-0 bg-[#0F0F1A] border-b border-white/10 p-6 rounded-t-2xl flex items-center justify-between z-10">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-xl gradient-activity flex items-center justify-center">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<div>
<h2 class="text-2xl font-bold">34 Fitness Insights</h2>
<p class="text-gray-400 text-sm">Training, nutrition & recovery tools powered by real sports science</p>
</div>
</div>
<button id="close-tools-modal" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
<!-- Modal Body -->
<div class="p-6 space-y-8">
<!-- Training Analysis Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-emerald-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-emerald-400">Training Analysis</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">9 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="get-activities" data-example="Your last 10 workouts: 3 runs (32km), 2 bike rides (45km), 5 strength sessions. Total distance this week: 77km.">
<div class="text-sm font-medium text-white mb-1">Get Activities</div>
<div class="text-xs text-gray-400">See all your workouts in one place</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="get-athlete" data-example="Sarah, 34 years old, running since 2019. Weight: 62kg. Preferred activities: Running, Cycling. Best 5K: 24:30.">
<div class="text-sm font-medium text-white mb-1">Get Athlete</div>
<div class="text-xs text-gray-400">Your complete fitness profile</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="get-stats" data-example="This year: 847km run, 1,240km cycled. You've burned 89,450 calories. That's equivalent to running 34 marathons!">
<div class="text-sm font-medium text-white mb-1">Get Stats</div>
<div class="text-xs text-gray-400">Your yearly totals and achievements</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="activity-intel" data-example="Your Tuesday run was 15% faster than usual! The cool weather (18°C) and flat route helped. You ran through Central Park - beautiful choice!">
<div class="text-sm font-medium text-white mb-1">Activity Intelligence</div>
<div class="text-xs text-gray-400">Smart insights with weather & location</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="analyze-activity" data-example="Morning Run Analysis: You started too fast (first km was 5:10/km) but found your rhythm by km 3. Heart rate stayed in Zone 3. Great pacing overall!">
<div class="text-sm font-medium text-white mb-1">Analyze Activity</div>
<div class="text-xs text-gray-400">Detailed breakdown of any workout</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="calc-metrics" data-example="Training stress this week: 320 points. You burned 2,847 calories. Your efficiency improved 8% compared to last month!">
<div class="text-sm font-medium text-white mb-1">Calculate Metrics</div>
<div class="text-xs text-gray-400">Training load and calorie burn</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="compare-activities" data-example="Same 5K route comparison: January: 28:30, Today: 25:45. You're 2:45 faster! Your heart rate was lower too - you're getting fitter.">
<div class="text-sm font-medium text-white mb-1">Compare Activities</div>
<div class="text-xs text-gray-400">Track your progress over time</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="detect-patterns" data-example="Pattern detected: You perform best on Tuesday mornings after rest days. Your weekend runs tend to be slower - probably tired from the week.">
<div class="text-sm font-medium text-white mb-1">Detect Patterns</div>
<div class="text-xs text-gray-400">Discover what works for you</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-emerald-500/10 cursor-pointer hover:border-emerald-500/40 hover:bg-emerald-500/5 transition-all" data-tool="performance-trends" data-example="6-month trend: Your average pace improved from 6:30/km to 5:45/km. Heart rate for same effort dropped 8 bpm. Excellent progress!">
<div class="text-sm font-medium text-white mb-1">Performance Trends</div>
<div class="text-xs text-gray-400">See how you're improving</div>
</div>
</div>
</div>
<!-- Performance & Fitness Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-violet-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-violet-400">Performance & Fitness</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">5 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-violet-500/10 cursor-pointer hover:border-violet-500/40 hover:bg-violet-500/5 transition-all" data-tool="fitness-score" data-example="Your fitness score is 72/100. You're in good shape! Slight fatigue from yesterday's hard workout. Consider an easy day today.">
<div class="text-sm font-medium text-white mb-1">Fitness Score</div>
<div class="text-xs text-gray-400">How fit are you right now?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-violet-500/10 cursor-pointer hover:border-violet-500/40 hover:bg-violet-500/5 transition-all" data-tool="predict-perf" data-example="Based on your training, you could run: 5K in 24:30, 10K in 51:15, Half marathon in 1:58:00, Marathon in 4:12:00.">
<div class="text-sm font-medium text-white mb-1">Predict Performance</div>
<div class="text-xs text-gray-400">What race times can you achieve?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-violet-500/10 cursor-pointer hover:border-violet-500/40 hover:bg-violet-500/5 transition-all" data-tool="training-load" data-example="This week's load: Moderate. You've built up good fitness over 6 weeks. Form is peaking - great time for a race or hard workout!">
<div class="text-sm font-medium text-white mb-1">Training Load</div>
<div class="text-xs text-gray-400">Are you training too hard or easy?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-violet-500/10 cursor-pointer hover:border-violet-500/40 hover:bg-violet-500/5 transition-all" data-tool="recommendations" data-example="This week: Do 2 easy runs, 1 tempo run, and 1 long run. Focus on Zone 2 training. You're ready for more intensity next week.">
<div class="text-sm font-medium text-white mb-1">Recommendations</div>
<div class="text-xs text-gray-400">What should you do next?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-violet-500/10 cursor-pointer hover:border-violet-500/40 hover:bg-violet-500/5 transition-all" data-tool="rest-day" data-example="Take a rest day tomorrow! You've done 4 hard workouts in a row. Your body needs recovery to get stronger. Light stretching is OK.">
<div class="text-sm font-medium text-white mb-1">Suggest Rest Day</div>
<div class="text-xs text-gray-400">Do you need a break?</div>
</div>
</div>
</div>
<!-- Goals Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-cyan-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-cyan-400">Goals & Planning</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">4 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-cyan-500/10 cursor-pointer hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all" data-tool="set-goal" data-example="Goal created: Run a sub-25 minute 5K by June 15th. I'll track your progress and let you know how you're doing each week!">
<div class="text-sm font-medium text-white mb-1">Set Goal</div>
<div class="text-xs text-gray-400">Set a target to work towards</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-cyan-500/10 cursor-pointer hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all" data-tool="track-progress" data-example="Sub-25 5K goal: You're 68% there! Current best: 26:15. At this rate, you'll hit your goal 2 weeks early. Keep it up!">
<div class="text-sm font-medium text-white mb-1">Track Progress</div>
<div class="text-xs text-gray-400">How close are you to your goals?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-cyan-500/10 cursor-pointer hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all" data-tool="suggest-goals" data-example="Based on your history, try these goals: Run 100km this month (you averaged 85km), or try a new 10K PR - you're close to breaking 50 minutes!">
<div class="text-sm font-medium text-white mb-1">Suggest Goals</div>
<div class="text-xs text-gray-400">What goals make sense for you?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-cyan-500/10 cursor-pointer hover:border-cyan-500/40 hover:bg-cyan-500/5 transition-all" data-tool="goal-feasibility" data-example="Marathon under 4 hours by October? Very achievable! Your current fitness suggests 4:05. With consistent training, you'll make it with time to spare.">
<div class="text-sm font-medium text-white mb-1">Goal Feasibility</div>
<div class="text-xs text-gray-400">Can you actually achieve this?</div>
</div>
</div>
</div>
<!-- Nutrition Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-amber-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-amber-400">Nutrition</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">5 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-amber-500/10 cursor-pointer hover:border-amber-500/40 hover:bg-amber-500/5 transition-all" data-tool="daily-nutrition" data-example="Today you need 2,450 calories: 150g protein (for muscle), 280g carbs (for energy), 85g fat (for hormones). That's about 4 balanced meals.">
<div class="text-sm font-medium text-white mb-1">Daily Nutrition</div>
<div class="text-xs text-gray-400">How much should you eat today?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-amber-500/10 cursor-pointer hover:border-amber-500/40 hover:bg-amber-500/5 transition-all" data-tool="nutrient-timing" data-example="Before your run: Eat a banana and toast 1 hour before. After: Have 25g protein (like Greek yogurt) + carbs within 30 minutes for best recovery.">
<div class="text-sm font-medium text-white mb-1">Nutrient Timing</div>
<div class="text-xs text-gray-400">What to eat before & after workouts</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-amber-500/10 cursor-pointer hover:border-amber-500/40 hover:bg-amber-500/5 transition-all" data-tool="search-food" data-example="Searching 'chicken breast': Found! 165 calories per 100g, 31g protein, 0g carbs, 3.6g fat. Great post-workout protein source.">
<div class="text-sm font-medium text-white mb-1">Search Food</div>
<div class="text-xs text-gray-400">Find nutrition for any food</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-amber-500/10 cursor-pointer hover:border-amber-500/40 hover:bg-amber-500/5 transition-all" data-tool="food-details" data-example="Salmon (100g): 208 calories, 20g protein, 13g healthy fats. Rich in Omega-3, Vitamin D, and B12. Excellent for recovery!">
<div class="text-sm font-medium text-white mb-1">Food Details</div>
<div class="text-xs text-gray-400">Complete nutrition breakdown</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-amber-500/10 cursor-pointer hover:border-amber-500/40 hover:bg-amber-500/5 transition-all" data-tool="meal-analysis" data-example="Your lunch: 645 calories, 42g protein, 58g carbs, 28g fat. Good balance! The protein will help with this afternoon's recovery.">
<div class="text-sm font-medium text-white mb-1">Meal Analysis</div>
<div class="text-xs text-gray-400">Analyze any meal you eat</div>
</div>
</div>
</div>
<!-- Recipes Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-orange-400">Recipes</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">7 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="recipe-constraints" data-example="Pre-workout meal targets: 300-400 calories, 50-60g carbs, 15-20g protein, low fat. Try oatmeal with banana and honey!">
<div class="text-sm font-medium text-white mb-1">Recipe Constraints</div>
<div class="text-xs text-gray-400">What nutrients does this meal need?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="validate-recipe" data-example="Your smoothie recipe: 385 calories (verified), 28g protein, 45g carbs. Perfect for post-workout! All ingredients matched to USDA data.">
<div class="text-sm font-medium text-white mb-1">Validate Recipe</div>
<div class="text-xs text-gray-400">Check the real nutrition numbers</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="save-recipe" data-example="Recipe saved: 'Power Protein Smoothie' added to your collection. Tagged as post-workout. Ready whenever you need it!">
<div class="text-sm font-medium text-white mb-1">Save Recipe</div>
<div class="text-xs text-gray-400">Keep your favorite recipes</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="list-recipes" data-example="Your recipes: 12 total. 4 pre-workout meals, 5 post-workout smoothies, 3 recovery dinners. Want to see your high-protein options?">
<div class="text-sm font-medium text-white mb-1">List Recipes</div>
<div class="text-xs text-gray-400">Browse your recipe collection</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="get-recipe" data-example="Recovery Bowl: Rice, salmon, avocado, edamame. 580 cal, 35g protein. Step 1: Cook rice... Takes 20 mins. Perfect after long runs!">
<div class="text-sm font-medium text-white mb-1">Get Recipe</div>
<div class="text-xs text-gray-400">Full recipe with instructions</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="delete-recipe" data-example="Recipe 'Old Protein Shake' removed from your collection. You still have 11 recipes saved.">
<div class="text-sm font-medium text-white mb-1">Delete Recipe</div>
<div class="text-xs text-gray-400">Remove recipes you don't need</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-orange-500/10 cursor-pointer hover:border-orange-500/40 hover:bg-orange-500/5 transition-all" data-tool="search-recipes" data-example="Found 3 'high protein' recipes: Power Smoothie (28g), Chicken Bowl (42g), Recovery Dinner (38g). Which one would you like?">
<div class="text-sm font-medium text-white mb-1">Search Recipes</div>
<div class="text-xs text-gray-400">Find recipes by name or tag</div>
</div>
</div>
</div>
<!-- Sleep & Recovery Category -->
<div>
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center">
<svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>
</div>
<h3 class="text-lg font-semibold text-indigo-400">Sleep & Recovery</h3>
<span class="text-xs text-gray-500 bg-gray-800 px-2 py-0.5 rounded">4 tools</span>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-indigo-500/10 cursor-pointer hover:border-indigo-500/40 hover:bg-indigo-500/5 transition-all" data-tool="sleep-quality" data-example="Last night: 7.5 hours, 85% efficiency. Good deep sleep (1.5 hrs). You woke up twice briefly. Overall: Great night - you're well rested!">
<div class="text-sm font-medium text-white mb-1">Sleep Quality</div>
<div class="text-xs text-gray-400">How well did you sleep?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-indigo-500/10 cursor-pointer hover:border-indigo-500/40 hover:bg-indigo-500/5 transition-all" data-tool="recovery-score" data-example="Recovery score: 78/100. Good sleep + low training stress yesterday = you're ready for a moderate to hard workout today!">
<div class="text-sm font-medium text-white mb-1">Recovery Score</div>
<div class="text-xs text-gray-400">How recovered is your body?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-indigo-500/10 cursor-pointer hover:border-indigo-500/40 hover:bg-indigo-500/5 transition-all" data-tool="sleep-trends" data-example="2-week trend: Average 7.2 hrs (up from 6.8). Deep sleep improving. Your Tuesday/Thursday sleep is worst - consider earlier bedtime those nights.">
<div class="text-sm font-medium text-white mb-1">Sleep Trends</div>
<div class="text-xs text-gray-400">Is your sleep getting better?</div>
</div>
<div class="tool-card bg-[#1E1E2E] rounded-lg p-3 border border-indigo-500/10 cursor-pointer hover:border-indigo-500/40 hover:bg-indigo-500/5 transition-all" data-tool="optimize-sleep" data-example="For tomorrow's long run: Go to bed by 10:00 PM to get 8 hours. Avoid screens after 9 PM. You perform best with 7.5+ hours before hard workouts.">
<div class="text-sm font-medium text-white mb-1">Optimize Sleep</div>
<div class="text-xs text-gray-400">When should you go to bed?</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="text-center pt-4 border-t border-white/10">
<p class="text-gray-400 mb-4">Ready to unlock these fitness insights for your training?</p>
<a href="#early-access" id="tools-modal-cta" class="inline-flex items-center gap-2 gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity">
Get Early Access
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">How It Works</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Get personalized fitness insights in three simple steps.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-violet-600/20 flex items-center justify-center mx-auto mb-6 relative">
<span class="text-2xl font-bold gradient-pierre-text">1</span>
<div class="absolute -right-4 top-1/2 hidden md:block">
<svg class="w-8 h-8 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
</div>
<h3 class="text-xl font-semibold mb-3">Connect Your Devices</h3>
<p class="text-gray-400">Link your Strava, Garmin, Fitbit, WHOOP, Coros, or Terra accounts with one click.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-cyan-500/20 flex items-center justify-center mx-auto mb-6 relative">
<span class="text-2xl font-bold gradient-pierre-text">2</span>
<div class="absolute -right-4 top-1/2 hidden md:block">
<svg class="w-8 h-8 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</div>
</div>
<h3 class="text-xl font-semibold mb-3">Ask Questions</h3>
<p class="text-gray-400">Chat naturally with your AI assistant about your training, nutrition, or recovery.</p>
</div>
<div class="text-center">
<div class="w-16 h-16 rounded-full bg-emerald-500/20 flex items-center justify-center mx-auto mb-6">
<span class="text-2xl font-bold gradient-pierre-text">3</span>
</div>
<h3 class="text-xl font-semibold mb-3">Get Smart Insights</h3>
<p class="text-gray-400">Receive personalized recommendations backed by real sports science formulas.</p>
</div>
</div>
<div class="mt-16 bg-[#1E1E2E] rounded-xl p-8 border border-white/10">
<h3 class="text-xl font-semibold mb-6 text-center">Example Conversations</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-3">
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-emerald-500">
<p class="text-gray-300 text-sm">"Am I ready for a hard workout today?"</p>
</div>
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-violet-500">
<p class="text-gray-300 text-sm">"What's my predicted marathon time based on recent training?"</p>
</div>
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-amber-500">
<p class="text-gray-300 text-sm">"How many calories should I eat today?"</p>
</div>
</div>
<div class="space-y-3">
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-amber-500">
<p class="text-gray-300 text-sm">"Create a high-protein post-workout meal and save it to my recipes."</p>
</div>
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-indigo-500">
<p class="text-gray-300 text-sm">"How was my sleep quality this week?"</p>
</div>
<div class="bg-[#0F0F1A] rounded-lg p-4 border-l-2 border-emerald-500">
<p class="text-gray-300 text-sm">"Show me my training load trend for the past month."</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Available Everywhere Section -->
<section class="py-12 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-10">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Available Everywhere You Train</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Whether you're at the gym, on a trail, or reviewing your week at home - Pierre is with you.
</p>
</div>
<div class="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
<!-- Mobile App Card -->
<div class="bg-[#1E1E2E] rounded-2xl p-6 border border-white/10 text-center group hover:border-violet-500/30 transition-colors">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-violet-600 to-cyan-500 flex items-center justify-center group-hover:scale-110 transition-transform">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">Mobile App</h3>
<p class="text-gray-400 text-sm mb-4">Track workouts, check recovery, and get insights on the go.</p>
<div class="space-y-2">
<!-- App Store Button (Disabled) -->
<div class="flex items-center justify-center gap-2 bg-[#0F0F1A]/60 border border-white/5 rounded-lg px-4 py-2 opacity-50 cursor-not-allowed">
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
</svg>
<span class="text-xs text-gray-400">App Store - Coming Soon</span>
</div>
<!-- Google Play Button (Disabled) -->
<div class="flex items-center justify-center gap-2 bg-[#0F0F1A]/60 border border-white/5 rounded-lg px-4 py-2 opacity-50 cursor-not-allowed">
<svg class="w-5 h-5 grayscale opacity-60" viewBox="0 0 24 24">
<path fill="#34A853" d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92z"/>
<path fill="#FBBC04" d="M16.247 15.055l-2.455-2.457L3.609 22.186a1.12 1.12 0 001.159.182l11.479-7.313z"/>
<path fill="#4285F4" d="M21.6 12c0-.376-.125-.751-.371-1.058l-3.982-2.537-3.455 3.595 3.455 3.455 3.982-2.397c.246-.307.371-.682.371-1.058z"/>
<path fill="#EA4335" d="M3.609 1.814l10.183 10.184 3.455-3.455L4.768 1.632a1.12 1.12 0 00-1.16.182z"/>
</svg>
<span class="text-xs text-gray-400">Google Play - Coming Soon</span>
</div>
</div>
</div>
<!-- Web Dashboard Card -->
<div class="bg-[#1E1E2E] rounded-2xl p-6 border border-white/10 text-center group hover:border-emerald-500/30 transition-colors">
<div class="w-16 h-16 mx-auto mb-4 rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center group-hover:scale-110 transition-transform">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<h3 class="text-xl font-bold mb-2">Web Dashboard</h3>
<p class="text-gray-400 text-sm mb-4">Full analysis with charts, trends, and AI-powered insights.</p>
<div class="space-y-2">
<!-- Web App Button -->
<a href="#early-access" class="flex items-center justify-center gap-2 gradient-pierre hover:opacity-90 rounded-lg px-4 py-2 transition-opacity">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
</svg>
<span class="text-sm font-semibold text-white">Get Early Access</span>
</a>
<!-- Browser Support -->
<p class="text-xs text-gray-500">Chrome, Safari, Firefox, Edge</p>
</div>
</div>
</div>
<!-- Sync Note -->
<div class="text-center mt-6">
<div class="inline-flex items-center gap-2 bg-[#1E1E2E]/50 rounded-full px-3 py-1.5 border border-white/5">
<svg class="w-3.5 h-3.5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
</svg>
<span class="text-xs text-gray-400">Your data syncs automatically between all devices</span>
</div>
</div>
</div>
</section>
<!-- Privacy Section (Updated) -->
<section class="py-20 px-4 bg-[#1E1E2E]/50 node-pattern">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Your Data, Your Control</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Pierre respects your privacy. Your fitness data stays secure and under your control.
</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-6 border border-white/10 text-center">
<div class="icon-container w-14 h-14 bg-emerald-500/20 mx-auto mb-4">
<svg class="w-7 h-7 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3 class="font-semibold mb-2">Encrypted & Secure</h3>
<p class="text-gray-400 text-sm">Your data is encrypted end-to-end and never shared with third parties.</p>
</div>
<div class="bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-6 border border-white/10 text-center">
<div class="icon-container w-14 h-14 bg-violet-600/20 mx-auto mb-4">
<svg class="w-7 h-7 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
</div>
<h3 class="font-semibold mb-2">Code on GitHub</h3>
<p class="text-gray-400 text-sm">Review the source code, run it yourself, or contribute to development.</p>
</div>
<div class="bg-[#0F0F1A]/80 backdrop-blur-sm rounded-xl p-6 border border-white/10 text-center">
<div class="icon-container w-14 h-14 bg-cyan-500/20 mx-auto mb-4">
<svg class="w-7 h-7 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</div>
<h3 class="font-semibold mb-2">You're in Control</h3>
<p class="text-gray-400 text-sm">Connect and disconnect your devices anytime. Delete your data whenever you want.</p>
</div>
</div>
</div>
</section>
<!-- Section Divider -->
<div class="section-divider max-w-4xl mx-auto"></div>
<!-- For Developers Section (B2B) -->
<section id="developers" class="py-20 px-4 bg-[#1E1E2E]/30">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-violet-600/20 border border-violet-500/30 text-violet-400 text-sm font-medium mb-4">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
</svg>
For Developers
</div>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Build with Pierre</h2>
<p class="text-gray-400 max-w-2xl mx-auto">
Integrate fitness intelligence into your applications using industry-standard protocols.
</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- MCP Protocol -->
<div class="bg-[#0F0F1A] rounded-xl p-8 border border-violet-500/20">
<div class="flex items-center gap-4 mb-6">
<div class="icon-container w-12 h-12 bg-violet-600/20">
<svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold">MCP Protocol</h3>
<p class="text-gray-500 text-sm">Model Context Protocol</p>
</div>
</div>
<p class="text-gray-400 mb-6">
Connect Pierre to Claude, ChatGPT, or any MCP-compatible AI assistant. Your AI gains access to 34 fitness tools.
</p>
<div class="code-block rounded-lg p-4 text-sm overflow-x-auto">
<code class="text-gray-300">
<span class="text-violet-400">"mcpServers"</span>: {<br>
<span class="text-emerald-400">"pierre"</span>: {<br>
<span class="text-amber-400">"url"</span>: <span class="text-cyan-400">"https://api.pierre.fitness/mcp"</span><br>
}<br>
}
</code>
</div>
</div>
<!-- A2A Protocol -->
<div class="bg-[#0F0F1A] rounded-xl p-8 border border-cyan-500/20">
<div class="flex items-center gap-4 mb-6">
<div class="icon-container w-12 h-12 bg-cyan-500/20">
<svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
</svg>
</div>
<div>
<h3 class="text-xl font-semibold">A2A Protocol</h3>
<p class="text-gray-500 text-sm">Agent-to-Agent Communication</p>
</div>
</div>
<p class="text-gray-400 mb-6">
Enable your AI agents to communicate with Pierre using Google's A2A protocol for seamless multi-agent workflows.
</p>
<div class="code-block rounded-lg p-4 text-sm overflow-x-auto">
<code class="text-gray-300">
<span class="text-cyan-400">GET</span> <span class="text-gray-500">/.well-known/agent.json</span><br>
<span class="text-cyan-400">POST</span> <span class="text-gray-500">/a2a/tasks</span><br>
<span class="text-cyan-400">WS</span> <span class="text-gray-500">/a2a/stream</span>
</code>
</div>
</div>
</div>
<div class="text-center mt-8">
<a href="https://github.com/Async-IO/pierre_mcp_server" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-6 py-3 rounded-lg border border-white/20 hover:bg-white/5 transition-colors font-medium">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
View on GitHub
</a>
</div>
</div>
</section>
<!-- Early Access Section -->
<section id="early-access" class="py-20 px-4">
<div class="max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-violet-600/20 border border-violet-500/30 text-violet-400 text-sm font-medium mb-6">
<span class="relative flex h-2 w-2">
<span class="pulse-ring absolute inline-flex h-full w-full rounded-full bg-violet-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-violet-500"></span>
</span>
Coming Soon
</div>
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Get Early Access</h2>
<p class="text-gray-300 max-w-2xl mx-auto mb-8">
Pierre is launching soon. Be the first to know when we go live and help shape the future of fitness insights.
</p>
<!-- Signup Form -->
<form id="early-access-form" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto mb-4">
<input
type="email"
name="email"
id="bd-email"
placeholder="you@example.com"
required
class="flex-1 px-4 py-3 rounded-lg bg-[#0F0F1A] border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all"
/>
<button
type="submit"
id="submit-btn"
class="gradient-pierre px-6 py-3 rounded-lg font-semibold hover:opacity-90 transition-opacity inline-flex items-center justify-center gap-2 whitespace-nowrap"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<span id="btn-text">Join Waitlist</span>
</button>
</form>
<p id="form-message" class="text-sm mb-2 h-6"></p>
<p class="text-gray-500 text-sm">No spam, ever. Unsubscribe anytime.</p>
<!-- Benefits -->
<div class="mt-12 grid sm:grid-cols-3 gap-6 text-left">
<div class="bg-[#1E1E2E] rounded-lg p-5 border border-white/5">
<div class="icon-container w-10 h-10 bg-emerald-500/20 mb-3">
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3 class="font-semibold mb-1">Early Access</h3>
<p class="text-gray-400 text-sm">Be among the first to try Pierre before public launch.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-5 border border-white/5">
<div class="icon-container w-10 h-10 bg-violet-600/20 mb-3">
<svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
</svg>
</div>
<h3 class="font-semibold mb-1">Shape the Product</h3>
<p class="text-gray-400 text-sm">Your feedback will directly influence features and direction.</p>
</div>
<div class="bg-[#1E1E2E] rounded-lg p-5 border border-white/5">
<div class="icon-container w-10 h-10 bg-amber-500/20 mb-3">
<svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</div>
<h3 class="font-semibold mb-1">Exclusive Updates</h3>
<p class="text-gray-400 text-sm">Get development updates and behind-the-scenes insights.</p>
</div>
</div>
</div>
</section>
<!-- Footer (Simplified) -->
<footer class="py-12 px-4 border-t border-white/10">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
<div class="flex items-center gap-3">
<img src="/pierre-logo.svg" alt="Pierre" class="h-10 w-10">
<span class="text-xl font-semibold">Pierre</span>
</div>
<div class="flex items-center gap-6">
<a href="https://github.com/Async-IO/pierre_mcp_server" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/>
</svg>
<span>GitHub</span>
</a>
<a href="https://github.com/Async-IO/pierre_mcp_server/discussions" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-white transition-colors">
Discussions
</a>
</div>
<div class="text-gray-500 text-sm">
© 2025 Pierre Fitness Intelligence
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script is:inline>
// Mobile Menu Toggle
(function() {
const menuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const hamburgerIcon = document.getElementById('hamburger-icon');
const closeIcon = document.getElementById('close-icon');
if (menuBtn && mobileMenu) {
menuBtn.addEventListener('click', function() {
const isOpen = !mobileMenu.classList.contains('hidden');
mobileMenu.classList.toggle('hidden');
hamburgerIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
menuBtn.setAttribute('aria-expanded', !isOpen);
});
// Close menu when clicking a link
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
hamburgerIcon.classList.remove('hidden');
closeIcon.classList.add('hidden');
menuBtn.setAttribute('aria-expanded', 'false');
});
});
}
})();
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
// Early Access Form
(function() {
const form = document.getElementById('early-access-form');
const emailInput = document.getElementById('bd-email');
const submitBtn = document.getElementById('submit-btn');
const btnText = document.getElementById('btn-text');
const message = document.getElementById('form-message');
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
const email = emailInput.value.trim();
if (!email) return;
submitBtn.disabled = true;
btnText.textContent = 'Joining...';
message.textContent = '';
message.className = 'text-sm mb-2 h-6';
try {
const formData = new FormData();
formData.append('email', email);
formData.append('embed', '1');
await fetch('https://buttondown.com/api/emails/embed-subscribe/pierrefitness', {
method: 'POST',
body: formData,
mode: 'no-cors'
});
message.textContent = '✓ You\'re on the list! Check your email to confirm.';
message.className = 'text-sm mb-2 h-6 text-emerald-400';
emailInput.value = '';
btnText.textContent = 'Joined!';
setTimeout(() => {
btnText.textContent = 'Join Waitlist';
submitBtn.disabled = false;
}, 3000);
} catch (error) {
message.textContent = 'Something went wrong. Please try again.';
message.className = 'text-sm mb-2 h-6 text-red-400';
btnText.textContent = 'Join Waitlist';
submitBtn.disabled = false;
}
});
}
})();
// Announcement Banner
(function() {
const BANNER_KEY = 'pierre_banner_dismissed';
const banner = document.getElementById('announcement-banner');
const nav = document.getElementById('main-nav');
const hero = document.getElementById('hero-section');
const dismissBtn = document.getElementById('banner-dismiss');
const styles = getComputedStyle(document.documentElement);
function getCssVar(name, fallback) {
const value = styles.getPropertyValue(name).trim();
return value || fallback;
}
function hideBanner() {
if (banner) banner.style.display = 'none';
if (nav) nav.style.top = '0';
if (hero) hero.style.paddingTop = getCssVar('--hero-padding-without-banner', '8rem');
localStorage.setItem(BANNER_KEY, 'true');
}
function showBanner() {
if (banner) banner.style.display = 'block';
if (nav) nav.style.top = getCssVar('--banner-height', '2.5rem');
if (hero) hero.style.paddingTop = getCssVar('--hero-padding-with-banner', '11rem');
}
if (localStorage.getItem(BANNER_KEY) === 'true') {
hideBanner();
} else {
showBanner();
}
if (dismissBtn) {
dismissBtn.addEventListener('click', hideBanner);
}
})();
// Stats animation on scroll
(function() {
const statsContainer = document.getElementById('stats-container');
if (!statsContainer) return;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.querySelectorAll('.stat-glow').forEach((stat, index) => {
stat.style.animationDelay = `${index * 0.15}s`;
stat.classList.add('stat-animate');
});
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
observer.observe(statsContainer);
})();
// Example Report Modal
(function() {
const card = document.getElementById('example-report-card');
const modal = document.getElementById('report-modal');
const backdrop = document.getElementById('modal-backdrop');
const closeBtn = document.getElementById('close-modal');
const modalCta = document.getElementById('modal-cta');
let animationRan = false;
function openModal() {
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Animate entrance
setTimeout(() => {
modal.querySelector('.modal-content').style.transform = 'scale(1)';
modal.querySelector('.modal-content').style.opacity = '1';
}, 10);
// Run animations only once
if (!animationRan) {
animationRan = true;
setTimeout(runAnimations, 300);
}
}
function closeModal() {
modal.classList.add('hidden');
document.body.style.overflow = '';
}
function runAnimations() {
// Animate counters
document.querySelectorAll('.counter').forEach(counter => {
const target = parseInt(counter.dataset.target);
const duration = 1500;
const step = target / (duration / 16);
let current = 0;
const updateCounter = () => {
current += step;
if (current < target) {
counter.textContent = Math.floor(current).toLocaleString();
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target.toLocaleString();
}
};
updateCounter();
});
// Animate sport progress bars
document.querySelectorAll('.sport-bar').forEach((bar, index) => {
const percent = bar.dataset.percent;
const progress = bar.querySelector('.sport-progress');
setTimeout(() => {
progress.style.transition = 'width 1s ease-out';
progress.style.width = percent + '%';
}, index * 100);
});
// Animate year bars
document.querySelectorAll('.year-fill').forEach((fill, index) => {
const height = fill.dataset.height;
setTimeout(() => {
fill.style.transition = 'height 0.8s ease-out';
fill.style.height = height;
}, 800 + index * 150);
});
}
if (card) {
card.addEventListener('click', openModal);
}
if (closeBtn) {
closeBtn.addEventListener('click', closeModal);
}
if (backdrop) {
backdrop.addEventListener('click', closeModal);
}
if (modalCta) {
modalCta.addEventListener('click', closeModal);
}
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
})();
// Tools Modal (34 Fitness Insights)
(function() {
const toolsCard = document.getElementById('tools-stat-card');
const toolsModal = document.getElementById('tools-modal');
const toolsBackdrop = document.getElementById('tools-modal-backdrop');
const toolsCloseBtn = document.getElementById('close-tools-modal');
const toolsModalCta = document.getElementById('tools-modal-cta');
function openToolsModal() {
toolsModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Animate entrance
setTimeout(() => {
const content = toolsModal.querySelector('.tools-modal-content');
if (content) {
content.style.transform = 'scale(1)';
content.style.opacity = '1';
}
}, 10);
}
function closeToolsModal() {
toolsModal.classList.add('hidden');
document.body.style.overflow = '';
}
if (toolsCard) {
toolsCard.addEventListener('click', openToolsModal);
}
if (toolsCloseBtn) {
toolsCloseBtn.addEventListener('click', closeToolsModal);
}
if (toolsBackdrop) {
toolsBackdrop.addEventListener('click', closeToolsModal);
}
if (toolsModalCta) {
toolsModalCta.addEventListener('click', closeToolsModal);
}
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && toolsModal && !toolsModal.classList.contains('hidden')) {
closeToolsModal();
}
});
})();
// Pillar Modals (Training, Nutrition, Recovery)
(function() {
// Helper function to create modal handlers
function setupPillarModal(cardId, modalId, backdropId, closeBtnId, ctaId) {
const card = document.getElementById(cardId);
const modal = document.getElementById(modalId);
const backdrop = document.getElementById(backdropId);
const closeBtn = document.getElementById(closeBtnId);
const cta = document.getElementById(ctaId);
if (!modal) return;
function openModal() {
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
// Animate entrance
setTimeout(() => {
const content = modal.querySelector('.pillar-modal-content');
if (content) {
content.style.transform = 'scale(1)';
content.style.opacity = '1';
}
}, 10);
}
function closeModal() {
modal.classList.add('hidden');
document.body.style.overflow = '';
}
if (card) card.addEventListener('click', openModal);
if (closeBtn) closeBtn.addEventListener('click', closeModal);
if (backdrop) backdrop.addEventListener('click', closeModal);
if (cta) cta.addEventListener('click', closeModal);
// Close on Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
closeModal();
}
});
}
// Setup each pillar modal
setupPillarModal('training-pillar-card', 'training-modal', 'training-modal-backdrop', 'close-training-modal', 'training-modal-cta');
setupPillarModal('nutrition-pillar-card', 'nutrition-modal', 'nutrition-modal-backdrop', 'close-nutrition-modal', 'nutrition-modal-cta');
setupPillarModal('recovery-pillar-card', 'recovery-modal', 'recovery-modal-backdrop', 'close-recovery-modal', 'recovery-modal-cta');
})();
// Tool Example Tooltip (shows what Pierre tells you)
(function() {
// Create tooltip element
const tooltip = document.createElement('div');
tooltip.id = 'tool-example-tooltip';
tooltip.className = 'fixed z-[110] max-w-sm bg-[#1a1a2e] border border-violet-500/30 rounded-xl shadow-2xl shadow-violet-500/20 p-4 hidden';
tooltip.innerHTML = `
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-8 h-8 rounded-lg gradient-pierre flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
</svg>
</div>
<div>
<div class="text-xs text-violet-400 font-medium mb-1">Pierre says:</div>
<div id="tooltip-text" class="text-sm text-gray-300 leading-relaxed"></div>
</div>
</div>
<div class="absolute -top-2 left-6 w-4 h-4 bg-[#1a1a2e] border-l border-t border-violet-500/30 transform rotate-45"></div>
`;
document.body.appendChild(tooltip);
const tooltipText = document.getElementById('tooltip-text');
let activeCard = null;
// Close tooltip when clicking outside
document.addEventListener('click', (e) => {
if (!tooltip.contains(e.target) && !e.target.closest('.tool-card')) {
tooltip.classList.add('hidden');
if (activeCard) {
activeCard.classList.remove('ring-2', 'ring-violet-500/50');
activeCard = null;
}
}
});
// Handle tool card clicks
document.querySelectorAll('.tool-card').forEach(card => {
card.addEventListener('click', (e) => {
e.stopPropagation();
const example = card.dataset.example;
if (!example) return;
// Remove highlight from previous card
if (activeCard && activeCard !== card) {
activeCard.classList.remove('ring-2', 'ring-violet-500/50');
}
// Toggle tooltip for same card
if (activeCard === card && !tooltip.classList.contains('hidden')) {
tooltip.classList.add('hidden');
card.classList.remove('ring-2', 'ring-violet-500/50');
activeCard = null;
return;
}
// Show tooltip
tooltipText.textContent = example;
activeCard = card;
card.classList.add('ring-2', 'ring-violet-500/50');
// Position tooltip below the card (fixed positioning uses viewport coords)
const rect = card.getBoundingClientRect();
tooltip.classList.remove('hidden');
// Get tooltip dimensions
const tooltipRect = tooltip.getBoundingClientRect();
// Calculate position - try below first, then above if no room
let top = rect.bottom + 8;
let left = rect.left;
// If tooltip would go below viewport, position above the card
if (top + tooltipRect.height > window.innerHeight - 20) {
top = rect.top - tooltipRect.height - 8;
}
// Keep tooltip within horizontal viewport bounds
if (left + tooltipRect.width > window.innerWidth - 20) {
left = window.innerWidth - tooltipRect.width - 20;
}
if (left < 20) left = 20;
tooltip.style.top = top + 'px';
tooltip.style.left = left + 'px';
});
});
// Close on Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
tooltip.classList.add('hidden');
if (activeCard) {
activeCard.classList.remove('ring-2', 'ring-violet-500/50');
activeCard = null;
}
}
});
})();
</script>
</body>
</html>
