1286 lines
60 KiB
HTML
1286 lines
60 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VITAL EDGE | Fitness Coaching</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #0a0a0a;
|
|
--bg-light: #141414;
|
|
--fg: #f5f5f5;
|
|
--muted: #888;
|
|
--accent: #ff4d2e;
|
|
--accent-glow: #ff4d2e33;
|
|
--card: #1a1a1a;
|
|
--border: #2a2a2a;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--accent) var(--bg);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
overflow-x: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
/* Scroll progress */
|
|
.scroll-progress {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
background: var(--accent);
|
|
z-index: 9999;
|
|
transition: width 0.1s linear;
|
|
}
|
|
|
|
/* Hero background */
|
|
.hero-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% 40%, var(--accent-glow) 0%, transparent 70%),
|
|
linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Animated gradient border */
|
|
.glow-border {
|
|
position: relative;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.glow-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -1px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(135deg, var(--accent), transparent, var(--accent));
|
|
opacity: 0;
|
|
z-index: -1;
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.glow-border:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Floating shapes */
|
|
.float-shape {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
opacity: 0.3;
|
|
animation: float 20s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
33% { transform: translateY(-30px) rotate(5deg); }
|
|
66% { transform: translateY(15px) rotate(-3deg); }
|
|
}
|
|
|
|
/* Pulse ring */
|
|
.pulse-ring {
|
|
position: absolute;
|
|
border: 2px solid var(--accent);
|
|
border-radius: 50%;
|
|
animation: pulse-ring 2s infinite ease-out;
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0% { transform: scale(0.8); opacity: 1; }
|
|
100% { transform: scale(2); opacity: 0; }
|
|
}
|
|
|
|
/* Text reveal */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.delay-1 { transition-delay: 0.1s; }
|
|
.delay-2 { transition-delay: 0.2s; }
|
|
.delay-3 { transition-delay: 0.3s; }
|
|
.delay-4 { transition-delay: 0.4s; }
|
|
.delay-5 { transition-delay: 0.5s; }
|
|
|
|
/* Button hover */
|
|
.btn-primary {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--accent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 40px var(--accent-glow);
|
|
}
|
|
|
|
.btn-primary span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.btn-outline {
|
|
border: 1px solid var(--accent);
|
|
color: var(--accent);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
/* Image overlay */
|
|
.img-overlay {
|
|
position: relative;
|
|
}
|
|
|
|
.img-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 40%;
|
|
background: linear-gradient(0deg, var(--bg) 0%, transparent 100%);
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Card hover */
|
|
.card-hover {
|
|
transition: transform 0.4s, box-shadow 0.4s;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* Noise texture */
|
|
.noise-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Nav */
|
|
.nav-link {
|
|
position: relative;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--accent);
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Mobile menu */
|
|
.mobile-menu {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.4s ease;
|
|
}
|
|
|
|
.mobile-menu.open {
|
|
max-height: 400px;
|
|
}
|
|
|
|
/* Testimonial */
|
|
.testimonial-card {
|
|
position: relative;
|
|
}
|
|
|
|
.testimonial-card::before {
|
|
content: '\201C';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 20px;
|
|
font-size: 80px;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
color: var(--accent);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Stats counter */
|
|
.stat-number {
|
|
background: linear-gradient(135deg, var(--accent), #ff7a5c);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Horizontal scroll */
|
|
.horizontal-scroll {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.horizontal-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Loading */
|
|
.page-loader {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: var(--bg);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.6s, visibility 0.6s;
|
|
}
|
|
|
|
.page-loader.hidden {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.loader-bar {
|
|
width: 200px;
|
|
height: 2px;
|
|
background: var(--border);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.loader-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 0%;
|
|
background: var(--accent);
|
|
animation: load 2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes load {
|
|
to { width: 100%; }
|
|
}
|
|
|
|
/* Focus visible */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Line clamp */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Tag pill */
|
|
.tag-pill {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 100px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.tag-pill.active {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: var(--accent-glow);
|
|
}
|
|
|
|
/* Image placeholder */
|
|
.img-placeholder {
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
font-size: 0.875rem;
|
|
text-align: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Badge */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 10px;
|
|
border-radius: 100px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Section divider */
|
|
.section-divider {
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--border), transparent);
|
|
}
|
|
|
|
/* Stagger animation */
|
|
.stagger-item {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
|
}
|
|
|
|
.stagger-item.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.stagger-item:nth-child(1) { transition-delay: 0.05s; }
|
|
.stagger-item:nth-child(2) { transition-delay: 0.1s; }
|
|
.stagger-item:nth-child(3) { transition-delay: 0.15s; }
|
|
.stagger-item:nth-child(4) { transition-delay: 0.2s; }
|
|
.stagger-item:nth-child(5) { transition-delay: 0.25s; }
|
|
|
|
/* Input */
|
|
.form-input {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
color: var(--fg);
|
|
transition: border-color 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px var(--accent-glow);
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Horizontal line accent */
|
|
.accent-line {
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent), transparent);
|
|
}
|
|
|
|
/* Reduced */
|
|
.reduced-motion * {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Loading Screen -->
|
|
<div class="page-loader" id="page-loader">
|
|
<div class="text-center">
|
|
<div class="font-display text-2xl font-bold" style="color: var(--accent);">VITAL EDGE</div>
|
|
<div class="loader-bar mt-6 mx-auto"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Progress -->
|
|
<div class="scroll-progress" id="scroll-progress"></div>
|
|
|
|
<!-- Noise Overlay -->
|
|
<div class="noise-overlay" aria-hidden="true"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500" role="navigation" aria-label="Main navigation">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<a href="#hero" class="font-display text-xl font-bold tracking-tight flex items-center gap-2" aria-label="Vital Edge Home">
|
|
<span class="w-8 h-8 rounded-full bg-[#ff4d2e] flex items-center justify-center text-white text-sm font-bold">V</span>
|
|
<span>Vital Edge</span>
|
|
</a>
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#about" class="nav-link text-sm font-medium text-[#888] hover:text-white transition-colors">About</a>
|
|
<a href="#programs" class="nav-link text-sm font-medium text-[#888] hover:text-white transition-colors">Programs</a>
|
|
<a href="#results" class="nav-link text-sm font-medium text-[#888] hover:text-white transition-colors">Results</a>
|
|
<a href="#coaching" class="nav-link text-sm font-medium text-[#888] hover:text-white transition-colors">Coaching</a>
|
|
<a href="#contact" class="nav-link text-sm font-medium text-[#888] hover:text-white transition-colors">Contact</a>
|
|
</div>
|
|
<button id="mobile-menu-btn" class="md:hidden text-[#888] hover:text-white transition-colors" aria-label="Toggle menu" aria-expanded="false" aria-controls="mobile-menu">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
</div>
|
|
<div id="mobile-menu" class="mobile-menu md:hidden" aria-hidden="true">
|
|
<div class="px-6 pb-4 flex flex-col gap-4">
|
|
<a href="#about" class="text-sm font-medium text-[#888] hover:text-white transition-colors py-2">About</a>
|
|
<a href="#programs" class="text-sm font-medium text-[#888] hover:text-white transition-colors py-2">Programs</a>
|
|
<a href="#results" class="text-sm font-medium text-[#888] hover:text-white transition-colors py-2">Results</a>
|
|
<a href="#coaching" class="text-sm font-medium text-[#888] hover:text-white transition-colors py-2">Coaching</a>
|
|
<a href="#contact" class="text-sm font-medium text-[#888] hover:text-white transition-colors py-2">Contact</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
|
|
<div class="hero-bg" aria-hidden="true"></div>
|
|
|
|
<!-- Floating shapes -->
|
|
<div class="float-shape w-[500px] h-[500px] bg-[#ff4d2e] top-[10%] -left-[10%]" aria-hidden="true"></div>
|
|
<div class="float-shape w-[300px] h-[300px] bg-[#ff4d2e] bottom-[20%] right-[5%]" aria-hidden="true"></div>
|
|
<div class="float-shape w-[200px] h-[200px] bg-[#ff4d2e] top-[60%] right-[15%]" style="animation-delay: -7s;" aria-hidden="true"></div>
|
|
|
|
<div class="hero-content max-w-7xl mx-auto px-6 w-full">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<span class="badge bg-[#ff4d2e] text-white">New: Precision Training</span>
|
|
<span class="badge border-[#ff4d2e] text-[#ff4d2e]">2025 Launch</span>
|
|
</div>
|
|
<h1 class="font-display text-5xl md:text-7xl font-bold leading-[1.05] mb-6">
|
|
Transform Your<br>
|
|
<span class="text-[#ff4d2e]">Body</span><br>
|
|
& With Purpose
|
|
</h1>
|
|
<p class="text-lg text-[#888] max-w-lg mb-8 leading-relaxed">
|
|
A personalized fitness coaching journey built for real results. No vague promises — just science-driven training and accountability that works.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a href="#programs" class="btn-primary bg-[#ff4d2e] text-white px-8 py-4 rounded-full font-semibold text-sm tracking-wide">
|
|
<span>Start Your Journey</span>
|
|
</a>
|
|
<a href="#about" class="btn-outline px-8 py-4 rounded-full font-semibold text-sm tracking-wide">
|
|
Learn More
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero Image -->
|
|
<div class="relative flex items-center justify-center">
|
|
<div class="img-overlay w-full max-w-md aspect-[4/5] rounded-3xl overflow-hidden bg-cover bg-center" style="background-image: url('https://images.pexels.com/photos/406611/pexels-photo-406611.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/40"></div>
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-4 shadow-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 rounded-full bg-[#ff4d2e]/20 flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-[#ff4d2e]" 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>
|
|
<p class="text-sm font-semibold">1,200+</p>
|
|
<p class="text-xs text-[#888]">Clients Transformed</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-12 pt-8 border-t border-[#2a2a2a]">
|
|
<div class="text-center">
|
|
<p class="stat-number font-display text-3xl font-bold">98%</p>
|
|
<p class="text-xs text-[#888] mt-1">Success Rate</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="stat-number font-display text-3xl font-bold">18+</p>
|
|
<p class="text-xs text-[#888] mt-1">Years Experience</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="stat-number font-display text-3xl font-bold">24/7</p>
|
|
<p class="text-xs text-[#888] mt-1">Support</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<p class="stat-number font-display text-3xl font-bold">100</p>
|
|
<p class="text-xs text-[#888] mt-1">Online Now</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce" aria-hidden="true">
|
|
<span class="text-xs text-[#888]">Scroll</span>
|
|
<svg class="w-4 h-4 text-[#888]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7-7-7"/></svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section id="about" class="relative py-24 md:py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<span class="text-[#ff4d2e] text-sm font-semibold tracking-widest uppercase">Why Us</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4 mb-6">Fitness That Fits Your Life</h2>
|
|
<p class="text-[#888] leading-relaxed mb-6">
|
|
We don't believe in one-size-fits-all solutions. Every program is built around your goals, schedule, and body. Our coaching blends strength training, recovery science, and nutritional guidance into a comprehensive system.
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold mb-1">Personalized Programs</p>
|
|
<p class="text-sm text-[#888]">Every plan is designed uniquely for you</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold mb-1">Evidence-Based</p>
|
|
<p class="text-sm text-[#888]">Research-backed methods, not trends</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-10 h-10 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold mb-1">Accountability</p>
|
|
<p class="text-sm text-[#888]">Regular check-ins and progress tracking</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image -->
|
|
<div class="relative">
|
|
<div class="rounded-3xl overflow-hidden shadow-2xl shadow-[#ff4d2e]/10">
|
|
<div class="img-overlay aspect-[3/4] rounded-3xl" style="background-image: url('https://images.pexels.com/photos/336025/pexels-photo-336025.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/30"></div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -bottom-6 -right-6 bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-6 shadow-xl">
|
|
<p class="text-[#888] text-sm mb-1">Our Approach</p>
|
|
<p class="font-semibold">3 Pillars</p>
|
|
<div class="flex gap-3 mt-4">
|
|
<div class="flex-1 text-center">
|
|
<div class="w-10 h-10 rounded-full bg-[#ff4d2e]/20 mx-auto flex items-center justify-center text-[#ff4d2e] mb-2">
|
|
<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="M5 3l14 9-14 9V3z"/></svg>
|
|
</div>
|
|
<p class="text-xs font-semibold">Strength</p>
|
|
</div>
|
|
<div class="flex-1 text-center">
|
|
<div class="w-10 h-10 rounded-full bg-[#ff4d2e]/20 mx-auto flex items-center justify-center text-[#ff4d2e] mb-2">
|
|
<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="M12 19l9 2-9-18-9 18 9-18z"/></svg>
|
|
</div>
|
|
<p class="text-xs font-semibold">Recovery</p>
|
|
</div>
|
|
<div class="flex-1 text-center">
|
|
<div class="w-10 h-10 rounded-full bg-[#ff4d2e]/20 mx-auto flex items-center justify-center text-[#ff4d2e] mb-2">
|
|
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<p class="text-xs font-semibold">Nutrition</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Programs Section -->
|
|
<section id="programs" class="relative py-24 md:py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<span class="text-[#ff4d2e] text-sm font-semibold tracking-widest uppercase">Programs</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4">Choose Your Path</h2>
|
|
<p class="text-[#888] mt-4 max-w-xl mx-auto">Three pathways tailored to your goals, lifestyle, and current fitness level. All backed by science and your own data.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Program 1 -->
|
|
<div class="glow-border bg-[#1a1a1a] rounded-3xl overflow-hidden group">
|
|
<div class="img-overlay aspect-[4/5] rounded-3xl" style="background-image: url('https://images.pexels.com/photos/355224/pexels-photo-355224.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/80"></div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="tag-pill">Popular</span>
|
|
<span class="text-sm text-[#888]">6 Months</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Foundations</h3>
|
|
<p class="text-sm text-[#888] mb-4">Build the base. Learn proper form, develop consistent habits, and establish a strong foundation for all future progress.</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="tag-pill">Strength</span>
|
|
<span class="tag-pill">Beginner</span>
|
|
<span class="tag-pill">Nutrition</span>
|
|
</div>
|
|
<a href="#contact" class="btn-outline w-full py-3 rounded-xl font-semibold text-sm text-center inline-flex items-center justify-center gap-2">
|
|
<span>Get Started</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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Program 2 -->
|
|
<div class="glow-border bg-[#1a1a1a] rounded-3xl overflow-hidden group">
|
|
<div class="img-overlay aspect-[4/5] rounded-3xl" style="background-image: url('https://images.pexels.com/photos/479386/pexels-photo-479386.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/80"></div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="tag-pill">New</span>
|
|
<span class="text-sm text-[#888]">12 Months</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Transformation</h3>
|
|
<p class="text-sm text-[#888] mb-4">Level up fast. Structured hypertrophy, advanced programming, and real transformation tracking with quarterly check-ins.</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="tag-pill">Hypertrophy</span>
|
|
<span class="tag-pill">Intermediate</span>
|
|
<span class="tag-pill">Nutrition</span>
|
|
</div>
|
|
<a href="#contact" class="btn-outline w-full py-3 rounded-xl font-semibold text-sm text-center inline-flex items-center justify-center gap-2">
|
|
<span>Start Now</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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Program 3 -->
|
|
<div class="glow-border bg-[#1a1a1a] rounded-3xl overflow-hidden group">
|
|
<div class="img-overlay aspect-[4/5] rounded-3xl" style="background-image: url('https://images.pexels.com/photos/406611/pexels-photo-406611.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/80"></div>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="tag-pill">Advanced</span>
|
|
<span class="text-sm text-[#888]">12 Months</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Elite</h3>
|
|
<p class="text-sm text-[#888] mb-4">Maximum results. Performance optimization, advanced nutrition protocols, and a dedicated coaching team for precision training.</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="tag-pill">Performance</span>
|
|
<span class="tag-pill">Advanced</span>
|
|
<span class="tag-pill">Recovery</span>
|
|
</div>
|
|
<a href="#contact" class="btn-outline w-full py-3 rounded-xl font-semibold text-sm text-center inline-flex items-center justify-center gap-2">
|
|
<span>Level Up</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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Grid -->
|
|
<div class="grid md:grid-cols-4 gap-6 mt-12">
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636z"/></svg>
|
|
</div>
|
|
<h4 class="font-semibold mb-1">Custom Plans</h4>
|
|
<p class="text-sm text-[#888]">Every workout and meal plan is built around you</p>
|
|
</div>
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] mb-4">
|
|
<svg class="w-6 h-6" 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>
|
|
<h4 class="font-semibold mb-1">Progress Tracking</h4>
|
|
<p class="text-sm text-[#888]">Real-time metrics and visual progress reports</p>
|
|
</div>
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-1.282-1.05-2.306-1.513M17 20H7v-2c0-.656 1.282-1.05 2.306-1.513M20 20h-5v-2a3 3 0 01-5.356-1.857M20 20h5v-2c0 .656-1.282 1.05-2.306 1.513"/></svg>
|
|
</div>
|
|
<h4 class="font-semibold mb-1">24/7 Support</h4>
|
|
<p class="text-sm text-[#888]">Coach available anytime for questions and guidance</p>
|
|
</div>
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] mb-4">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L12 20l5-3 5 3z"/></svg>
|
|
</div>
|
|
<h4 class="font-semibold mb-1">Guaranteed Results</h4>
|
|
<p class="text-sm text-[#888]">Monthly progress reviews with adjustments</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Results Section -->
|
|
<section id="results" class="relative py-24 md:py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<span class="text-[#ff4d2e] text-sm font-semibold tracking-widest uppercase">Results</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4">Real Outcomes</h2>
|
|
<p class="text-[#888] mt-4 max-w-xl mx-auto">Data that matters. Outcomes we've achieved with thousands of clients across different fitness levels and goals.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-8 h-8 text-[#ff4d2e]" 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>
|
|
<span class="text-[#ff4d2e] font-semibold">+24%</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Strength Gains</h3>
|
|
<p class="text-sm text-[#888]">Average increase of 24% in maximum strength over 6 months</p>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<div class="flex-1 h-2 rounded-full bg-[#2a2a2a] overflow-hidden">
|
|
<div class="h-full bg-[#ff4d2e] rounded-full" style="width: 85%"></div>
|
|
</div>
|
|
<span class="text-sm text-[#888]">85%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-8 h-8 text-[#ff4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132M12 6.876l-3.296 1.826-3.625-2.138M12 11.5l2.468-3.288 3.625 2.132m11.332 5.818l-1.697 1.276-3.197 2.132-1.697-1.276M12 17.25l1.697-1.276 3.197 2.132 1.697-1.276"/></svg>
|
|
<span class="text-[#ff4d2e] font-semibold">+31%</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Body Recomposition</h3>
|
|
<p class="text-sm text-[#888]">Average body recomposition: fat loss 4.2kg and muscle gain 1.8kg</p>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<div class="flex-1 h-2 rounded-full bg-[#2a2a2a] overflow-hidden">
|
|
<div class="h-full bg-[#ff4d2e] rounded-full" style="width: 72%"></div>
|
|
</div>
|
|
<span class="text-sm text-[#888]">72%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] hover:border-[#ff4d2e] transition-all">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<svg class="w-8 h-8 text-[#ff4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l4-4m4 4l4-4M9 1h12M12 15l4-4m4 4l4-4M20 15l4-4m4-4l-4-4"/></svg>
|
|
<span class="text-[#ff4d2e] font-semibold">+48%</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Fitness Consistency</h3>
|
|
<p class="text-sm text-[#888]">98% of clients maintain their training regimen after 3 months</p>
|
|
<div class="mt-4 flex items-center gap-2">
|
|
<div class="flex-1 h-2 rounded-full bg-[#2a2a2a] overflow-hidden">
|
|
<div class="h-full bg-[#ff4d2e] rounded-full" style="width: 98%"></div>
|
|
</div>
|
|
<span class="text-sm text-[#888]">98%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Testimonial -->
|
|
<div class="mt-16">
|
|
<div class="bg-[#1a1a1a] rounded-3xl p-8 md:p-12 border border-[#2a2a2a]">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="md:col-span-1">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 rounded-full bg-[#1a1a1a] border border-[#ff4d2e] flex items-center justify-center mx-auto mb-4">
|
|
<span class="font-display text-2xl font-bold text-[#ff4d2e]">SR</span>
|
|
</div>
|
|
<div class="flex gap-0.5 mt-2">
|
|
<svg class="w-4 h-4 text-[#ff4d2e]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.152 1.021c1.013.344 2.193.033 2.574.814l3.051 3.05c.814.814.814 2.193 0 2.574a1 1 0 00-1.02.152l-3.051 3.051c-.344 2.193-.033 2.574-.814 1.014a1 1 0 00-1.021 1.022l-1.07 3.292c-.308.921-.938.921-1.256 0l-3.051-3.05a1 1 0 00-1.021-1.022 1 1 0 00-1.021 1.022l-1.07 3.292c-.308.921-.938.921-1.256 0l-1.07-3.292c-.308-.921-.938-.921-1.256 0l-1.07 3.292a1 1 0 00-1.021 1.022 1 1 0 001.021 1.022l1.07 3.292c.308.921 1.012.921 1.256 0a1 1 0 001.02-1.022l3.051-3.051c.814-.814.814-2.193 0-2.574a1 1 0 00-1.021-1.022z"/></svg>
|
|
</div>
|
|
<p class="text-sm font-semibold">Sarah R.</p>
|
|
<p class="text-xs text-[#888]">Certified Coach</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<blockquote class="text-lg font-display font-bold leading-relaxed mb-4 italic">
|
|
"I was skeptical about getting results, but Vital Edge completely transformed my approach. The 3-pillar system is the best I've ever used. I've lost 15kg in 6 months and have never felt better."
|
|
</blockquote>
|
|
<div class="flex items-center gap-4">
|
|
<img src="https://images.pexels.com/photos/1497162/pexels-photo-1497162.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Sarah R. photo" class="w-12 h-12 rounded-full object-cover" loading="lazy">
|
|
<div>
|
|
<p class="font-semibold text-sm">Sarah R.</p>
|
|
<p class="text-xs text-[#888]">Results after 6 months</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="tag-pill text-[#ff4d2e]">Verified</span>
|
|
</div>
|
|
<p class="text-sm text-[#888] mt-4">This testimonial is based on a real client transformation. All metrics are verifiable.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coaching Section -->
|
|
<section id="coaching" class="relative py-24 md:py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<span class="text-[#ff4d2e] text-sm font-semibold tracking-widest uppercase">Coaching</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4">Your Personal Coach</h2>
|
|
<p class="text-[#888] leading-relaxed mt-6">
|
|
Every client gets a dedicated coach who understands their unique journey. We don't just work out — we build a partnership that adapts to your progress, challenges, and lifestyle.
|
|
</p>
|
|
|
|
<div class="mt-10 space-y-6">
|
|
<div class="flex gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold">1-on-1 Coaching</p>
|
|
<p class="text-sm text-[#888]">Weekly sessions tailored to your progress and goals</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold">Progress Tracking</p>
|
|
<p class="text-sm text-[#888]">Comprehensive metrics dashboard with weekly reports</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="w-12 h-12 rounded-xl bg-[#ff4d2e]/10 flex items-center justify-center flex-shrink-0">
|
|
<svg class="w-6 h-6 text-[#ff4d2e]" 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>
|
|
<p class="font-semibold">Community Access</p>
|
|
<p class="text-sm text-[#888]">Join our private community for motivation and support</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coach Photo -->
|
|
<div class="relative">
|
|
<div class="rounded-3xl overflow-hidden shadow-2xl shadow-[#ff4d2e]/10">
|
|
<div class="img-overlay aspect-[4/5] rounded-3xl" style="background-image: url('https://images.pexels.com/photos/431157/pexels-photo-431157.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');">
|
|
<div class="absolute inset-0 bg-[#0a0a0a]/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -bottom-6 -right-6 bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-4 shadow-xl">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-14 h-14 rounded-full bg-[#ff4d2e]/20 flex items-center justify-center">
|
|
<svg class="w-7 h-7 text-[#ff4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a2 2 0 100-4 2 2 0 000 4z"/></svg>
|
|
</div>
|
|
<div>
|
|
<p class="font-semibold">Alex Morgan, CPT</p>
|
|
<p class="text-xs text-[#888]">Head Coach</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="relative py-24 md:py-32">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<span class="text-[#ff4d2e] text-sm font-semibold tracking-widest uppercase">Get Started</span>
|
|
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4">Begin Your Journey</h2>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12">
|
|
<div>
|
|
<form id="contact-form" class="bg-[#1a1a1a] rounded-2xl p-8 border border-[#2a2a2a] shadow-xl" novalidate>
|
|
<div class="mb-6">
|
|
<label for="name" class="block text-sm font-medium mb-2">Full Name</label>
|
|
<input type="text" id="name" name="name" required
|
|
class="form-input w-full px-4 py-3 rounded-xl text-sm"
|
|
placeholder="Your full name"
|
|
autocomplete="name">
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="email" class="block text-sm font-medium mb-2">Email Address</label>
|
|
<input type="email" id="email" name="email" required
|
|
class="form-input w-full px-4 py-3 rounded-xl text-sm"
|
|
placeholder="your@email.com"
|
|
autocomplete="email">
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="goal" class="block text-sm font-medium mb-2">Your Goal</label>
|
|
<select id="goal" name="goal" required
|
|
class="form-input w-full px-4 py-3 rounded-xl text-sm">
|
|
<option value="" disabled selected>Select your goal</option>
|
|
<option value="strength">Strength Building</option>
|
|
<option value="weight-loss">Weight Loss</option>
|
|
<option value="endurance">Endurance Training</option>
|
|
<option value="general">General Fitness</option>
|
|
<option value="sport">Sport Performance</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="message" class="block text-sm font-medium mb-2">Message</label>
|
|
<textarea id="message" name="message" rows="3" required
|
|
class="form-input w-full px-4 py-3 rounded-xl text-sm resize-none"
|
|
placeholder="Tell us about your goals..."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-primary w-full bg-[#ff4d2e] text-white py-4 rounded-xl font-semibold text-sm tracking-wide">
|
|
<span>Start Free Consultation</span>
|
|
</button>
|
|
<p class="text-xs text-[#888] mt-4 text-center">
|
|
No commitment required. Get a free 20-minute strategy session.
|
|
</p>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a]">
|
|
<h4 class="font-semibold mb-3 text-sm">Contact Info</h4>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" 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>
|
|
<span class="text-[#888]">hello@vitaledge.com</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" 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 class="text-[#888]">321 Fitness District, Suite 4B</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.68l3.14 3.14a1 1 0 01.02.2l3.98 3.98a1 1 0 010 1.41l-3.98 3.98a1 1 0 01-.2.2H9a1 1 0 01-.94-.68L3.5 8.28a2 2 0 012-2H2a2 2 0 01-2-2z"/></svg>
|
|
<span class="text-[#888]">+1 (555) 123-4567</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-[#ff4d2e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.68l3.14 3.14a1 1 0 01.02.2l3.98 3.98a1 1 0 010 1.41l-3.98 3.98a1 1 0 01-.2.2H9a1 1 0 01-.94-.68L3.5 8.28a2 2 0 012-2H2a2 2 0 01-2-2z"/></svg>
|
|
<span class="text-[#888]">Mon-Fri: 9AM - 6PM EST</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-[#1a1a1a] rounded-2xl p-6 border border-[#2a2a2a]">
|
|
<h4 class="font-semibold mb-3 text-sm">Our Process</h4>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] text-xs font-bold">1</div>
|
|
<span class="text-[#888]">Free consultation call</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] text-xs font-bold">2</div>
|
|
<span class="text-[#888]">Needs assessment & goals</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] text-xs font-bold">3</div>
|
|
<span class="text-[#888]">Custom program created</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-[#ff4d2e]/10 flex items-center justify-center text-[#ff4d2e] text-xs font-bold">4</div>
|
|
<span class="text-[#888]">Follow-up & support</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-[#2a2a2a] pt-12 pb-6">
|
|
<div class="max-w-7xl mx-auto px-6">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<span class="w-8 h-8 rounded-full bg-[#ff4d2e] flex items-center justify-center text-white text-sm font-bold">V</span>
|
|
<span class="font-display text-lg font-bold">Vital Edge</span>
|
|
</div>
|
|
<p class="text-sm text-[#888]">Transforming lives through science-backed fitness coaching.</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-semibold text-sm mb-4">Programs</h5>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#programs" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Foundations</a></li>
|
|
<li><a href="#programs" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Transformation</a></li>
|
|
<li><a href="#programs" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Elite</a></li>
|
|
<li><a href="#programs" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Pricing</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-semibold text-sm mb-4">Resources</h5>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Blog</a></li>
|
|
<li><a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Trainer Stories</a></li>
|
|
<li><a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors">FAQ</a></li>
|
|
<li><a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors">Success Stories</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-semibold text-sm mb-4">Stay Updated</h5>
|
|
<p class="text-sm text-[#888] mb-3">Get weekly fitness tips and exclusive offers.</p>
|
|
<form id="newsletter-form" class="flex gap-2" novalidate>
|
|
<input type="email" id="newsletter-email" required
|
|
class="form-input flex-1 px-4 py-2 rounded-lg text-sm"
|
|
placeholder="Your email"
|
|
autocomplete="email">
|
|
<button type="submit" class="bg-[#ff4d2e] text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-[#e0452e] transition-colors flex-shrink-0">
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
<p class="text-xs text-[#888] mt-3">No spam, ever. Unsubscribe anytime.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-[#2a2a2a] pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<p class="text-xs text-[#888]">© 2025 Vital Edge. All rights reserved.</p>
|
|
<div class="flex gap-6">
|
|
<a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors" aria-label="Instagram">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.203 0 3.585.012 4.878.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.07 1.645.07 4.879c0 4.877 0 3.585.07 4.879.1 3.252 1.691 4.771 4.919 4.919 1.266.074 1.645.074 4.879.074 3.203 0 3.585-.012 4.878-.07 3.252-.148 4.771-1.691 4.919-4.919.058-1.265.07-1.645.07-4.879c0-4.877 0-3.585-.07-4.877-.1-3.252-1.691-4.771-4.919-4.919-1.266-.074-1.645-.074-4.879-.074zm0 2.163c-2.983.014-3.273.003-4.902.007-1.595.042-2.404 1.382-2.404 3.692v3.693c0 2.209 1.382 3.692 2.404 3.692.96.074 1.691.138 2.506.138 2.982 0 3.273-.003 4.902-.007 1.595-.042 2.404-1.382 2.404-3.692v-3.693c0-2.209 1.382-3.692 2.404-3.692.96-.074 1.691-.138 2.506-.138zm0 5.236c-2.983.014-3.273.003-4.902.007-1.595.042-2.404 1.382-2.404 3.692v3.693c0 2.209 1.382 3.692 2.404 3.692.96.074 1.691.138 2.506.138 2.982 0 3.273-.003 4.902-.007 1.595-.042 2.404-1.382 2.404-3.692v-3.693c0-2.209 1.382-3.692 2.404-3.692.96-.074 1.691-.138 2.506-.138zm0 2.163c-3.203.014-3.585.012-4.879.07-1.595.042-2.404 1.382-2.404 3.692v3.693c0 2.209 1.382 3.692 2.404 3.692.96.074 1.691.138 2.506.138 2.982 0 3.273-.003 4.902-.007 1.595-.042 2.404-1.382 2.404-3.692v-3.693c0-2.209 1.382-3.692 2.404-3.692.96-.074 1.691-.138 2.506-.138z"/><circle cx="12" cy="2" r="1.5" fill="currentColor"/></svg>
|
|
</a>
|
|
<a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors" aria-label="Twitter">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.65l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.528 3.337h3.134L7.084 12.085H4.019l5.007 6.553 5.029-6.553h-3.02z"/></svg>
|
|
</a>
|
|
<a href="#" class="text-[#888] hover:text-[#ff4d2e] transition-colors" aria-label="YouTube">
|
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.246-15.23 0-3.897.266-4.356 2.62-4.356 2.62l-1.455.844c-.355.196-.76.446-1.06 1.07L2.57 6.083c-2.472 1.423-3.6 3.516-3.6 5.831 0 2.756 1.185 5.136 3.2 6.91 1.928 1.782 4.433 2.464 6.53 2.464 3.068 0 6.194-.437 8.437-1.256.495-.142.91-.366 1.268-.663l.164-.206c1.966-.543 3.796-1.468 5.193-2.734 1.84-1.903 3.167-3.995 3.983-6.637l.195.188.332.495c2.66.642.536 1.92.536 3.12s-1.494 2.923-3.788 3.14a5.666 5.666 0 01-1.634 1.282c-.034.001-.068.003-.103.003h-3.801c-.215 0-.39-.019-.485-.038-1.496-.196-2.806-1.905-3.441-3.392l-.131-.263c-.353-.703-.511-1.553-.511-2.366 0-2.54.007-4.577.195-6.062 1.69-3.392 3.977-6.221 6.534-9.034l.127.134c.18.134.37.224.57.262.32.076.633.038.905-.036l.153-.093c2.664-.355.493-1.636.493-2.68 0-1.11-.078-2.149-.23-3.027.015-.004-.004-.005-.005-.008-.004-.013.002-.016.003-.018l-.008-.009c-.005-.002-.014-.001-.019.002l-.017.015-.012.018c-.014.012-.02.024-.021.043l-.017.012c-.013.014-.019.023-.019.043 0 .015.011.024.02.021l.011.005c.012.009.019.018.019.038 0 .015-.008.024-.019.022l-.016-.007c-.019-.009-.026-.017-.03-.019c-.004.001-.01.003-.012.002-.01.002-.006.003-.011.012-.016.034-.013.084-.023.16-.023h.01z"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Page loader
|
|
window.addEventListener('load', () => {
|
|
setTimeout(() => {
|
|
document.getElementById('page-loader').classList.add('hidden');
|
|
}, 1500);
|
|
});
|
|
|
|
// Scroll progress
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progress = (scrollTop / docHeight) * 100;
|
|
document.getElementById('scroll-progress').style.width = progress + '%';
|
|
});
|
|
|
|
// Nav scroll effect
|
|
const nav = document.getElementById('main-nav');
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
nav.style.background = 'rgba(10, 10, 10, 0.95)';
|
|
nav.style.backdropFilter = 'blur(10px)';
|
|
nav.style.borderBottom = '1px solid #2a2a2a';
|
|
} else {
|
|
nav.style.background = 'transparent';
|
|
nav.style.backdropFilter = 'none';
|
|
nav.style.borderBottom = 'none';
|
|
}
|
|
});
|
|
|
|
// Mobile menu toggle
|
|
const mobileBtn = document.getElementById('mobile-menu-btn');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
let mobileOpen = false;
|
|
|
|
mobileBtn.addEventListener('click', () => {
|
|
mobileOpen = !mobileOpen;
|
|
mobileMenu.classList.toggle('open');
|
|
mobileBtn.setAttribute('aria-expanded', mobileOpen);
|
|
mobileBtn.querySelector('svg').innerHTML = mobileOpen
|
|
? '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>'
|
|
: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
|
|
mobileBtn.setAttribute('aria-label', mobileOpen ? 'Close menu' : 'Open menu');
|
|
});
|
|
|
|
// Close mobile menu on link click
|
|
mobileMenu.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileOpen = false;
|
|
mobileMenu.classList.remove('open');
|
|
mobileBtn.setAttribute('aria-expanded', 'false');
|
|
mobileBtn.querySelector('svg').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
|
|
mobileBtn.setAttribute('aria-label', 'Open menu');
|
|
});
|
|
});
|
|
|
|
// Reveal animations on scroll
|
|
const revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => {
|
|
revealObserver.observe(el);
|
|
});
|
|
|
|
// Stagger items
|
|
const staggerObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
entry.target.classList.add('visible');
|
|
staggerObserver.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.stagger-item').forEach(el => {
|
|
staggerObserver.observe(el);
|
|
});
|
|
|
|
// Animate stat numbers
|
|
function animateStats() {
|
|
document.querySelectorAll('.stat-number').forEach(el => {
|
|
const target = el.textContent;
|
|
const isPercent = target.includes('%');
|
|
const hasPlus = target.includes('+');
|
|
|
|
el.textContent = isPercent ? target : hasPlus ? target : '0';
|
|
|
|
const finalText = target.replace(/[^\d.]/g, '');
|
|
const finalNum = parseFloat(finalText);
|
|
const duration = 2000;
|
|
const start = performance.now();
|
|
|
|
function update(now) {
|
|
const elapsed = now - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const ease = 1 - Math.pow(1 - progress, 3);
|
|
const current = finalNum * ease;
|
|
|
|
if (isPercent) {
|
|
el.textContent = Math.round(current) + '%';
|
|
} else if (hasPlus) {
|
|
el.textContent = '+' + Math.round(current) + '%';
|
|
}
|
|
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
});
|
|
}
|
|
|
|
// Scroll progress bar
|
|
const scrollProgress = document.getElementById('scroll-progress');
|
|
let lastScrollY = 0;
|
|
let ticking = false;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(() => {
|
|
const currentScrollY = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progress = (currentScrollY / docHeight) * 100;
|
|
scrollProgress.style.width = progress + '%';
|
|
|
|
if (currentScrollY > lastScrollY && currentScrollY > 100) {
|
|
nav.style.transform = 'translateY(-100%)';
|
|
nav.style.transition = 'transform 0.3s';
|
|
} else {
|
|
nav.style.transform = 'translateY(0)';
|
|
nav.style.transition = 'transform 0.3s';
|
|
}
|
|
|
|
lastScrollY = currentScrollY;
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
|
|
// Contact form submission
|
|
document.getElementById('contact-form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const btn = e.target.querySelector('button[type="submit"]');
|
|
btn.textContent = 'Sending...';
|
|
btn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
btn.textContent = 'Message Sent!';
|
|
btn.style.background = '#2ecc71';
|
|
|
|
setTimeout(() => {
|
|
btn.textContent = 'Start Free Consultation';
|
|
btn.style.background = '#ff4d2e';
|
|
btn.disabled = false;
|
|
e.target.reset();
|
|
}, 2000);
|
|
}, 1500);
|
|
});
|
|
|
|
// Newsletter form
|
|
document.getElementById('newsletter-form').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const email = document.getElementById('newsletter-email');
|
|
email.value = 'your@email.com';
|
|
email.classList.add('border-[#ff4d2e]');
|
|
setTimeout(() => {
|
|
email.classList.remove('border-[#ff4d2e]');
|
|
}, 3000);
|
|
});
|
|
|
|
// Smooth scroll for anchor links
|
|
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' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 139.06s<br>Model: bloomer010/Ling-3.0-tiny-GGUF:Q4_K_M</div></body>
|
|
</html> |