990 lines
47 KiB
HTML
990 lines
47 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VITALITY FRAME — Fitness Coaching</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
navy: { 50: '#f0f4f8', 100: '#d9e2ec', 200: '#bcccdc', 300: '#9fb3c8', 400: '#7a8ba3', 500: '#5c6f8a', 600: '#4a5a74', 700: '#3a4a60', 800: '#2a3648', 900: '#1a2030' },
|
||
teal: { 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488' },
|
||
coral: { 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48' },
|
||
sand: { 50: '#faf8f5', 100: '#f0ebe3', 200: '#e6d9c3', 300: '#d4c4a0', 400: '#c4a97d' }
|
||
},
|
||
fontFamily: {
|
||
display: ['Playfair Display', 'serif'],
|
||
body: ['DM Sans', 'sans-serif']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
:root {
|
||
--bg: #0f1419;
|
||
--bg-card: #1a2030;
|
||
--bg-elevated: #232b3d;
|
||
--fg: #f0ebe3;
|
||
--fg-muted: #9fb3c8;
|
||
--accent: #2dd4bf;
|
||
--accent-warm: #fb7185;
|
||
--border: #2a3648;
|
||
--gold: #c4a97d;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
body {
|
||
font-family: 'DM Sans', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
overflow-x: hidden;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
::selection {
|
||
background: var(--accent);
|
||
color: var(--bg);
|
||
}
|
||
|
||
/* Scrollbar */
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: var(--bg); }
|
||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
|
||
|
||
/* Loading screen */
|
||
#loader {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
background: var(--bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
transition: opacity 0.6s ease, visibility 0.6s ease;
|
||
}
|
||
#loader.hidden {
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
}
|
||
.loader-bar {
|
||
width: 120px;
|
||
height: 2px;
|
||
background: var(--border);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
}
|
||
.loader-bar-inner {
|
||
width: 0%;
|
||
height: 100%;
|
||
background: var(--accent);
|
||
border-radius: 2px;
|
||
animation: loaderSlide 1.2s ease-in-out forwards;
|
||
}
|
||
@keyframes loaderSlide {
|
||
0% { width: 0%; }
|
||
50% { width: 70%; }
|
||
100% { width: 100%; }
|
||
}
|
||
|
||
/* Hero image styling */
|
||
.hero-img-container {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 1.5rem;
|
||
}
|
||
.hero-img-container img {
|
||
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
.hero-img-container:hover img {
|
||
transform: scale(1.04);
|
||
}
|
||
.hero-img-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, rgba(15,20,25,0.9) 0%, rgba(15,20,25,0.4) 50%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Floating particles */
|
||
.particle {
|
||
position: fixed;
|
||
width: 3px;
|
||
height: 3px;
|
||
background: var(--accent);
|
||
border-radius: 50%;
|
||
opacity: 0.15;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
animation: floatParticle 14s linear infinite;
|
||
}
|
||
@keyframes floatParticle {
|
||
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
||
10% { opacity: 0.15; }
|
||
90% { opacity: 0.15; }
|
||
100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
|
||
}
|
||
|
||
/* Section reveal */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
}
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Card hover */
|
||
.card-lift {
|
||
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
|
||
}
|
||
.card-lift:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
|
||
}
|
||
|
||
/* Button shine */
|
||
.btn-shine {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.btn-shine::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
|
||
transition: left 0.6s ease;
|
||
}
|
||
.btn-shine:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
/* Pulse ring */
|
||
.pulse-ring {
|
||
animation: pulseRing 2.5s ease-out infinite;
|
||
}
|
||
@keyframes pulseRing {
|
||
0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.5); }
|
||
100% { box-shadow: 0 0 0 30px rgba(45, 212, 191, 0); }
|
||
}
|
||
|
||
/* Counter animation */
|
||
.counter {
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* Gradient text */
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
/* Mobile nav */
|
||
.nav-menu {
|
||
transform: translateX(100%);
|
||
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
.nav-menu.open {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Progress bar */
|
||
.progress-bar {
|
||
height: 6px;
|
||
background: var(--border);
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
.progress-fill {
|
||
height: 100%;
|
||
border-radius: 3px;
|
||
background: var(--accent);
|
||
transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||
}
|
||
|
||
/* Testimonial quote line */
|
||
.quote-line {
|
||
width: 3px;
|
||
background: var(--accent);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* Marquee */
|
||
.marquee {
|
||
display: flex;
|
||
animation: marquee 30s linear infinite;
|
||
}
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
|
||
/* Focus visible */
|
||
*:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 3px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Stagger */
|
||
.stagger-item {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
animation: staggerIn 0.6s ease forwards;
|
||
}
|
||
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
|
||
.stagger-item:nth-child(2) { animation-delay: 0.15s; }
|
||
.stagger-item:nth-child(3) { animation-delay: 0.25s; }
|
||
.stagger-item:nth-child(4) { animation-delay: 0.35s; }
|
||
.stagger-item:nth-child(5) { animation-delay: 0.45s; }
|
||
.stagger-item:nth-child(6) { animation-delay: 0.55s; }
|
||
@keyframes staggerIn {
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
/* Reduced motion */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
.reveal { opacity: 1; transform: none; }
|
||
.stagger-item { opacity: 1; transform: none; }
|
||
}
|
||
|
||
/* Parallax background blobs */
|
||
.bg-blob {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(80px);
|
||
opacity: 0.15;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Loader -->
|
||
<div id="loader" aria-live="polite">
|
||
<div class="loader-bar"><div class="loader-bar-inner"></div></div>
|
||
<span class="text-sm text-teal-400 font-body tracking-widest uppercase">Loading</span>
|
||
</div>
|
||
|
||
<!-- Particles -->
|
||
<div id="particles" aria-hidden="true"></div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="fixed top-0 left-0 w-full z-50 transition-all duration-500" id="navbar" role="navigation" aria-label="Main navigation">
|
||
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
||
<a href="#" class="font-display text-xl font-bold tracking-tight flex items-center gap-2" aria-label="VITALITY FRAME Home">
|
||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" aria-hidden="true">
|
||
<circle cx="14" cy="14" r="13" stroke="#2dd4bf" stroke-width="2"/>
|
||
<path d="M8 14 Q14 6 20 14 Q14 22 8 14" fill="#2dd4bf" opacity="0.8"/>
|
||
<circle cx="14" cy="14" r="3" fill="#fb7185"/>
|
||
</svg>
|
||
<span class="text-sand-50">VITALITY</span>
|
||
<span class="text-sand-400 ml-1">FRAME</span>
|
||
</a>
|
||
|
||
<div class="hidden md:flex items-center gap-8">
|
||
<a href="#about" class="text-sm text-sand-300 hover:text-teal-400 transition-colors duration-300 font-medium">About</a>
|
||
<a href="#services" class="text-sm text-sand-300 hover:text-teal-400 transition-colors duration-300 font-medium">Services</a>
|
||
<a href="#testimonials" class="text-sm text-sand-300 hover:text-teal-400 transition-colors duration-300 font-medium">Stories</a>
|
||
<a href="#contact" class="text-sm text-sand-300 hover:text-teal-400 transition-colors duration-300 font-medium">Contact</a>
|
||
</div>
|
||
|
||
<button id="mobile-toggle" class="md:hidden text-sand-300 text-xl" aria-label="Toggle menu" aria-expanded="false">
|
||
<i class="fa-solid fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Mobile Menu -->
|
||
<div id="mobile-menu" class="nav-menu absolute top-full left-0 w-full bg-navy-900/95 backdrop-blur-xl border-t border-navy-700" role="menu">
|
||
<div class="px-6 py-6 flex flex-col gap-4">
|
||
<a href="#about" class="text-sand-200 hover:text-teal-400 transition-colors font-medium py-2" role="menuitem">About</a>
|
||
<a href="#services" class="text-sand-200 hover:text-teal-400 transition-colors font-medium py-2" role="menuitem">Services</a>
|
||
<a href="#testimonials" class="text-sand-200 hover:text-teal-400 transition-colors font-medium py-2" role="menuitem">Stories</a>
|
||
<a href="#contact" class="text-sand-200 hover:text-teal-400 transition-colors font-medium py-2" role="menuitem">Contact</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="relative min-h-screen flex items-center overflow-hidden" id="hero">
|
||
<!-- Background blobs -->
|
||
<div class="bg-blob w-96 h-96 bg-teal-500 top-20 -left-48" aria-hidden="true"></div>
|
||
<div class="bg-blob w-80 h-80 bg-coral-500 bottom-20 -right-40" aria-hidden="true"></div>
|
||
<div class="bg-blob w-64 h-64 bg-sand-500 top-1/2 left-1/2" aria-hidden="true"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6 w-full pt-28 pb-20 relative z-10">
|
||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||
<!-- Left Column -->
|
||
<div class="space-y-8">
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span class="px-4 py-1.5 bg-coral-500/15 text-coral-400 text-xs font-semibold rounded-full border border-coral-500/20 uppercase tracking-widest">Transforming Lives</span>
|
||
<span class="px-4 py-1.5 bg-teal-500/15 text-teal-400 text-xs font-semibold rounded-full border border-teal-500/20 uppercase tracking-widest">Personalized Training</span>
|
||
</div>
|
||
|
||
<h1 class="font-display text-5xl md:text-7xl lg:text-8xl font-black leading-[1.05] tracking-tight">
|
||
<span class="gradient-text">Your Body</span>, <br>Your Story,
|
||
<br>Your Victory.
|
||
</h1>
|
||
|
||
<p class="text-lg md:text-xl text-sand-300 max-w-lg leading-relaxed">
|
||
I help ambitious individuals build lasting strength, reclaim confidence, and achieve the fitness results they deserve — not through suffering, but through smart, sustainable transformation.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap gap-4">
|
||
<a href="#contact" class="btn-shine px-8 py-4 bg-teal-500 text-navy-900 font-bold rounded-full text-sm uppercase tracking-wide hover:bg-teal-400 transition-colors duration-300 shadow-lg shadow-teal-500/20">
|
||
Start Your Journey
|
||
</a>
|
||
<a href="#about" class="px-8 py-4 border border-sand-400/30 text-sand-100 font-semibold rounded-full text-sm uppercase tracking-wide hover:border-sand-400/50 hover:bg-sand-400/5 transition-colors duration-300">
|
||
Learn More
|
||
</a>
|
||
</div>
|
||
|
||
<div class="flex gap-12 pt-4">
|
||
<div>
|
||
<p class="text-3xl font-bold text-sand-100 counter" data-target="250">0</p>
|
||
<p class="text-xs text-sand-400 mt-1">Happy Clients</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl font-bold text-sand-100 counter" data-target="98">0</p>
|
||
<p class="text-xs text-sand-400 mt-1">% Satisfaction</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl font-bold text-sand-100 counter" data-target="12">0</p>
|
||
<p class="text-xs text-sand-400 mt-1">Years Experience</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Column — Image -->
|
||
<div class="hero-img-container relative">
|
||
<div class="aspect-[4/5] rounded-2xl overflow-hidden">
|
||
<img src="https://images.pexels.com/photos/398177/pexels-photo-398177.jpeg?auto=compress&cs=tinysrgb&w=1260&h=1500" alt="Individual in a gym performing strength training with focused expression" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="absolute -bottom-6 -left-6 bg-navy-900/90 backdrop-blur-sm p-4 rounded-2xl shadow-xl border border-navy-700">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 rounded-full bg-teal-500/20 flex items-center justify-center">
|
||
<i class="fa-solid fa-dumbbell text-teal-400"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-semibold">Certified Coach</p>
|
||
<p class="text-xs text-sand-400">12 years of experience</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute -top-4 -right-4 bg-coral-500/20 p-3 rounded-2xl shadow-xl border border-coral-500/30 pulse-ring">
|
||
<div class="flex items-center gap-2">
|
||
<span class="w-2 h-2 bg-coral-400 rounded-full animate-pulse"></span>
|
||
<p class="text-xs text-coral-400 font-semibold">Verified</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scroll indicator -->
|
||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-60" aria-hidden="true">
|
||
<span class="text-xs text-sand-400 uppercase tracking-widest">Scroll</span>
|
||
<div class="w-px h-8 bg-sand-400/30"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Marquee Banner -->
|
||
<div class="py-4 bg-navy-800/50 border-y border-navy-700/50 overflow-hidden" aria-hidden="true">
|
||
<div class="marquee">
|
||
<div class="flex items-center gap-8 px-4 whitespace-nowrap">
|
||
<span class="text-sm text-sand-400">Strength Building</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Cardiovascular Fitness</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Mental Clarity</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Recovery & Balance</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Sustainable Results</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Nutrition Planning</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Personalized Programs</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Long-term Transformation</span><span class="text-sand-700">|</span>
|
||
</div>
|
||
<div class="flex items-center gap-8 px-4 whitespace-nowrap">
|
||
<span class="text-sm text-sand-400">Strength Building</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Cardiovascular Fitness</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Mental Clarity</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Recovery & Balance</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Sustainable Results</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Nutrition Planning</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Personalized Programs</span><span class="text-sand-700">|</span>
|
||
<span class="text-sm text-sand-400">Long-term Transformation</span><span class="text-sand-700">|</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- About / Mission Section -->
|
||
<section id="about" class="py-24 md:py-32 relative">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||
<div class="reveal">
|
||
<span class="text-teal-400 text-xs font-bold uppercase tracking-widest">Our Philosophy</span>
|
||
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4 mb-6 leading-tight">
|
||
Fitness Is a <span class="text-sand-100">Personal</span> Journey
|
||
</h2>
|
||
<p class="text-sand-300 text-lg leading-relaxed mb-6">
|
||
Every individual is unique. What works for someone else is not necessarily what you need. At Vitality Frame, we design training plans that align with your goals, lifestyle, and personality.
|
||
</p>
|
||
<p class="text-sand-400 leading-relaxed mb-8">
|
||
I combine evidence-based methods with hands-on coaching to help you build strength that lasts long after the gym. No shortcuts, no wasted effort — just real, sustainable transformation.
|
||
</p>
|
||
|
||
<div class="grid grid-cols-3 gap-6">
|
||
<div class="text-center p-4 bg-navy-800/40 rounded-xl border border-navy-700/50">
|
||
<div class="text-3xl font-bold text-teal-400 mb-1">12</div>
|
||
<p class="text-xs text-sand-400">Years coaching</p>
|
||
</div>
|
||
<div class="text-center p-4 bg-navy-800/40 rounded-xl border border-navy-700/50">
|
||
<div class="text-3xl font-bold text-coral-400 mb-1">4.9</div>
|
||
<p class="text-xs text-sand-400">Avg. rating</p>
|
||
</div>
|
||
<div class="text-center p-4 bg-navy-800/40 rounded-xl border border-navy-700/50">
|
||
<div class="text-3xl font-bold text-sand-400 mb-1">98%</div>
|
||
<p class="text-xs text-sand-400">Satisfaction</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal">
|
||
<div class="space-y-5">
|
||
<div class="flex gap-5 group">
|
||
<div class="w-12 h-12 rounded-xl bg-teal-500/15 flex items-center justify-center flex-shrink-0 group-hover:bg-teal-500/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-bullseye text-teal-400 group-hover:text-teal-300 transition-colors duration-300"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-sand-100 mb-1">Goal Alignment</h3>
|
||
<p class="text-sand-400 text-sm">Every training program is tailored to your specific objectives. No one-size-fits-all approaches — we meet you where you are.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-5 group">
|
||
<div class="w-12 h-12 rounded-xl bg-coral-500/15 flex items-center justify-center flex-shrink-0 group-hover:bg-coral-500/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-people-group text-coral-400 group-hover:text-coral-300 transition-colors duration-300"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-sand-100 mb-1">Community Support</h3>
|
||
<p class="text-sand-400 text-sm">Access to a network of motivated individuals. Accountability, encouragement, and shared success are at the heart of every session.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-5 group">
|
||
<div class="w-12 h-12 rounded-xl bg-sand-400/15 flex items-center justify-center flex-shrink-0 group-hover:bg-sand-400/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-chart-line text-sand-400 group-hover:text-sand-300 transition-colors duration-300"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-semibold text-sand-100 mb-1">Data-Driven Results</h3>
|
||
<p class="text-sand-400 text-sm">Progress tracking, performance metrics, and adaptive programming ensure every workout moves you forward.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section -->
|
||
<section id="services" class="py-24 md:py-32 bg-navy-900/50 relative">
|
||
<div class="bg-blob w-80 h-80 bg-teal-500 -top-40 right-0" aria-hidden="true"></div>
|
||
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-16 reveal">
|
||
<span class="text-teal-400 text-xs font-bold uppercase tracking-widest">What We Offer</span>
|
||
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4 text-sand-100">Programs That Match Your Life</h2>
|
||
<p class="text-sand-400 mt-4 max-w-2xl mx-auto">From foundational strength-building to advanced performance optimization, our programs are built around evidence and your personal needs.</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="reveal group bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-teal-500/30 transition-all duration-500 card-lift cursor-pointer">
|
||
<div class="w-14 h-14 rounded-xl bg-teal-500/15 flex items-center justify-center mb-6 group-hover:bg-teal-500/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-dumbbell text-teal-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold mb-3">Strength Foundations</h3>
|
||
<p class="text-sand-400 mb-6 leading-relaxed">Perfect for beginners. Build a solid base of compound movements, proper form, and consistent habits that last a lifetime.</p>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-teal-400 text-xs"></i> Form & technique coaching</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-teal-400 text-xs"></i> Progressive overload plan</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-teal-400 text-xs"></i> 12-month accountability plan</li>
|
||
</ul>
|
||
<a href="#contact" class="inline-flex items-center gap-2 text-teal-400 text-sm font-semibold hover:text-teal-300 transition-colors group">
|
||
Start Free Session <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reveal group bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-coral-500/30 transition-all duration-500 card-lift cursor-pointer">
|
||
<div class="w-14 h-14 rounded-xl bg-coral-500/15 flex items-center justify-center mb-6 group-hover:bg-coral-500/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-person-running text-coral-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold mb-3">Performance Elite</h3>
|
||
<p class="text-sand-400 mb-6 leading-relaxed">For those ready to push limits. Advanced training protocols, nutrition optimization, and mental performance coaching.</p>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-coral-400 text-xs"></i> Advanced training protocols</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-coral-400 text-xs"></i> Recovery science integration</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-coral-400 text-xs"></i> Monthly progress reviews</li>
|
||
</ul>
|
||
<a href="#contact" class="inline-flex items-center gap-2 text-coral-400 text-sm font-semibold hover:text-coral-300 transition-colors group">
|
||
Upgrade Now <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="reveal group bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-sand-400/30 transition-all duration-500 card-lift cursor-pointer">
|
||
<div class="w-14 h-14 rounded-xl bg-sand-400/15 flex items-center justify-center mb-6 group-hover:bg-sand-400/25 transition-colors duration-300">
|
||
<i class="fa-solid fa-heart-pulse text-sand-400 text-xl"></i>
|
||
</div>
|
||
<h3 class="font-display text-2xl font-bold mb-3">Wellness Transformation</h3>
|
||
<p class="text-sand-400 mb-6 leading-relaxed">Holistic approach combining movement, nutrition, and mindset. Designed for those wanting sustainable lifestyle change, not just quick results.</p>
|
||
<ul class="space-y-3 mb-6">
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-sand-400 text-xs"></i> Mindset & habit building</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-sand-400 text-xs"></i> Meal planning & prep guides</li>
|
||
<li class="flex items-center gap-2 text-sm text-sand-300"><i class="fa-solid fa-check text-sand-400 text-xs"></i> Ongoing coaching sessions</li>
|
||
</ul>
|
||
<a href="#contact" class="inline-flex items-center gap-2 text-sand-400 text-sm font-semibold hover:text-sand-200 transition-colors group">
|
||
Learn More <i class="fa-solid fa-arrow-right text-xs transition-transform group-hover:translate-x-1"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials Section -->
|
||
<section id="testimonials" class="py-24 md:py-32 relative overflow-hidden">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-16 reveal">
|
||
<span class="text-coral-400 text-xs font-bold uppercase tracking-widest">Success Stories</span>
|
||
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4 text-sand-100">Real Outcomes, Real People</h2>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="reveal bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-coral-500/30 transition-all duration-500 card-lift">
|
||
<div class="flex items-center gap-1 mb-4">
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
</div>
|
||
<p class="text-sand-200 leading-relaxed mb-6 italic">"After years of failed attempts, this coach finally understood what I needed. The structured plan is so intuitive that I'm not even thinking about it anymore — I'm just getting results."</p>
|
||
<div class="flex items-center gap-4">
|
||
<img src="https://images.pexels.com/photos/1238955/pexels-photo-1238955.jpeg?auto=compress&cs=tinysrgb&w=120&h=120" alt="Alex Morgan" class="w-10 h-10 rounded-full object-cover">
|
||
<div>
|
||
<p class="text-sm font-semibold text-sand-100">Alex Morgan</p>
|
||
<p class="text-xs text-sand-400">Runner, 6 months</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-coral-500/30 transition-all duration-500 card-lift">
|
||
<div class="flex items-center gap-1 mb-4">
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
</div>
|
||
<p class="text-sand-200 leading-relaxed mb-6 italic">"I came in with a shattered sense of self-esteem. Within 6 months, I had rebuilt my body and my confidence. This is the best decision I ever made."</p>
|
||
<div class="flex items-center gap-4">
|
||
<img src="https://images.pexels.com/photos/1079267/pexels-photo-1079267.jpeg?auto=compress&cs=tinysrgb&w=120&h=120" alt="Jordan Chen" class="w-10 h-10 rounded-full object-cover">
|
||
<div>
|
||
<p class="text-sm font-semibold text-sand-100">Jordan Chen</p>
|
||
<p class="text-xs text-sand-400">Former athlete, 12 months</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reveal bg-navy-800/40 border border-navy-700/50 rounded-2xl p-8 hover:border-coral-500/30 transition-all duration-500 card-lift">
|
||
<div class="flex items-center gap-1 mb-4">
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
<i class="fa-solid fa-star text-coral-400 text-sm"></i>
|
||
</div>
|
||
<p class="text-sand-200 leading-relaxed mb-6 italic">"The holistic approach changed everything for me. My mind and my body are finally in sync. This is more than a coaching service — it's a lifestyle."</p>
|
||
<div class="flex items-center gap-4">
|
||
<img src="https://images.pexels.com/photos/4008935/pexels-photo-4008935.jpeg?auto=compress&cs=tinysrgb&w=120&h=120" alt="Maya Okonkwo" class="w-10 h-10 rounded-full object-cover">
|
||
<div>
|
||
<p class="text-sm font-semibold text-sand-100">Maya Okonkwo</p>
|
||
<p class="text-xs text-sand-400">New parent, 9 months</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section id="contact" class="py-24 md:py-32 relative">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
||
<div class="reveal">
|
||
<span class="text-teal-400 text-xs font-bold uppercase tracking-widest">Get Started</span>
|
||
<h2 class="font-display text-4xl md:text-5xl font-bold mt-4 mb-6">Ready to Begin?</h2>
|
||
<p class="text-sand-300 leading-relaxed mb-8">Whether you're just starting out or looking to optimize what you already have, I'd love to hear from you. Let's start a conversation.</p>
|
||
|
||
<form id="contact-form" class="space-y-5" novalidate>
|
||
<div>
|
||
<label for="name" class="block text-sm text-sand-300 mb-1.5 font-medium">Your Name</label>
|
||
<input type="text" id="name" name="name" required autocomplete="name" class="w-full bg-navy-800 border border-navy-700 rounded-xl px-4 py-3 text-sand-100 placeholder-sand-400/40 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition-all duration-300" placeholder="Enter your full name">
|
||
<p class="text-xs text-coral-400 mt-1 hidden" id="name-error">Please enter your name</p>
|
||
</div>
|
||
<div>
|
||
<label for="email" class="block text-sm text-sand-300 mb-1.5 font-medium">Email Address</label>
|
||
<input type="email" id="email" name="email" required autocomplete="email" class="w-full bg-navy-800 border border-navy-700 rounded-xl px-4 py-3 text-sand-100 placeholder-sand-400/40 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition-all duration-300" placeholder="you@example.com">
|
||
<p class="text-xs text-coral-400 mt-1 hidden" id="email-error">Please enter a valid email address</p>
|
||
</div>
|
||
<div>
|
||
<label for="phone" class="block text-sm text-sand-300 mb-1.5 font-medium">Phone (Optional)</label>
|
||
<input type="tel" id="phone" name="phone" autocomplete="tel" class="w-full bg-navy-800 border border-navy-700 rounded-xl px-4 py-3 text-sand-100 placeholder-sand-400/40 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition-all duration-300" placeholder="(555) 123-4567">
|
||
</div>
|
||
<div>
|
||
<label for="message" class="block text-sm text-sand-300 mb-1.5 font-medium">What Are You Looking For?</label>
|
||
<textarea id="message" name="message" rows="4" required class="w-full bg-navy-800 border border-navy-700 rounded-xl px-4 py-3 text-sand-100 placeholder-sand-400/40 focus:outline-none focus:border-teal-500 focus:ring-2 focus:ring-teal-500/20 transition-all duration-300 resize-none" placeholder="Tell me about your fitness goals..."></textarea>
|
||
<p class="text-xs text-coral-400 mt-1 hidden" id="message-error">Please share what you're looking for</p>
|
||
</div>
|
||
<button type="submit" class="btn-shine w-full py-4 bg-teal-500 text-navy-900 font-bold rounded-xl text-sm uppercase tracking-wide hover:bg-teal-400 transition-colors duration-300 shadow-lg shadow-teal-500/20">
|
||
Send Message
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="space-y-6 reveal">
|
||
<div class="flex gap-5">
|
||
<div class="w-12 h-12 rounded-xl bg-teal-500/15 flex items-center justify-center flex-shrink-0">
|
||
<i class="fa-solid fa-phone text-teal-400 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-sand-300 font-medium">Call Us</p>
|
||
<p class="text-sand-200 font-semibold">+1 (555) 123-4567</p>
|
||
<p class="text-xs text-sand-400 mt-1">Mon–Fri, 9am–6pm</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-5">
|
||
<div class="w-12 h-12 rounded-xl bg-coral-500/15 flex items-center justify-center flex-shrink-0">
|
||
<i class="fa-solid fa-envelope text-coral-400 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-sand-300 font-medium">Email Us</p>
|
||
<p class="text-sand-200 font-semibold">hello@vitalityframe.com</p>
|
||
<p class="text-xs text-sand-400 mt-1">We respond within 2 hours</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex gap-5">
|
||
<div class="w-12 h-12 rounded-xl bg-sand-400/15 flex items-center justify-center flex-shrink-0">
|
||
<i class="fa-solid fa-location-dot text-sand-400 text-lg"></i>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-sand-300 font-medium">Our Office</p>
|
||
<p class="text-sand-200 font-semibold">Suite 14, 420 Wellness Blvd</p>
|
||
<p class="text-xs text-sand-400 mt-1">Downtown, Portland, OR</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Social Links -->
|
||
<div class="flex gap-4 pt-4">
|
||
<a href="#" class="w-10 h-10 rounded-xl bg-navy-800 border border-navy-700 flex items-center justify-center text-sand-400 hover:border-teal-500 hover:text-teal-400 hover:bg-teal-500/10 transition-all duration-300" aria-label="Instagram">
|
||
<i class="fa-brands fa-instagram"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-xl bg-navy-800 border border-navy-700 flex items-center justify-center text-sand-400 hover:border-teal-500 hover:text-teal-400 hover:bg-teal-500/10 transition-all duration-300" aria-label="Twitter / X">
|
||
<i class="fa-brands fa-x-twitter"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-xl bg-navy-800 border border-navy-700 flex items-center justify-center text-sand-400 hover:border-teal-500 hover:text-teal-400 hover:bg-teal-500/10 transition-all duration-300" aria-label="YouTube">
|
||
<i class="fa-brands fa-youtube"></i>
|
||
</a>
|
||
<a href="#" class="w-10 h-10 rounded-xl bg-navy-800 border border-navy-700 flex items-center justify-center text-sand-400 hover:border-teal-500 hover:text-teal-400 hover:bg-teal-500/10 transition-all duration-300" aria-label="LinkedIn">
|
||
<i class="fa-brands fa-linkedin-in"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-navy-900 border-t border-navy-700/50 py-16">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
||
<div>
|
||
<p class="font-display text-2xl font-bold text-sand-100 mb-3">VITALITY</p>
|
||
<p class="text-sand-400 text-sm leading-relaxed">Transforming lives through personalized fitness. We help you build strength, confidence, and lasting habits.</p>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-sand-200 mb-4">Programs</p>
|
||
<ul class="space-y-2">
|
||
<li><a href="#services" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Strength Foundations</a></li>
|
||
<li><a href="#services" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Performance Elite</a></li>
|
||
<li><a href="#services" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Wellness Transformation</a></li>
|
||
<li><a href="#contact" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Custom Plans</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-sand-200 mb-4">Company</p>
|
||
<ul class="space-y-2">
|
||
<li><a href="#about" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">About Us</a></li>
|
||
<li><a href="#contact" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Contact</a></li>
|
||
<li><a href="#" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Blog</a></li>
|
||
<li><a href="#" class="text-sm text-sand-400 hover:text-teal-400 transition-colors">Careers</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-sand-200 mb-4">Stay Connected</p>
|
||
<p class="text-sand-400 text-sm mb-4">Weekly insights, training tips, and exclusive content.</p>
|
||
<form id="newsletter-form" class="flex gap-2" novalidate>
|
||
<input type="email" id="newsletter-email" required placeholder="Your email" class="flex-1 bg-navy-800 border border-navy-700 rounded-lg px-3 py-2 text-sm text-sand-100 placeholder-sand-400/40 focus:outline-none focus:border-teal-500 transition-all">
|
||
<button type="submit" class="px-4 py-2 bg-teal-500 text-navy-900 font-semibold text-sm rounded-lg hover:bg-teal-400 transition-colors">
|
||
<i class="fa-solid fa-paper-plane"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-navy-700/50 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
||
<p class="text-xs text-sand-400">© 2025 Vitality Frame. All rights reserved.</p>
|
||
<div class="flex gap-6">
|
||
<a href="#" class="text-xs text-sand-400 hover:text-teal-400 transition-colors">Privacy Policy</a>
|
||
<a href="#" class="text-xs text-sand-400 hover:text-teal-400 transition-colors">Terms of Service</a>
|
||
<a href="#" class="text-xs text-sand-400 hover:text-teal-400 transition-colors">Cookie Settings</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Toast notification -->
|
||
<div id="toast" class="fixed top-6 right-6 z-[100] bg-navy-800 border border-teal-500/30 rounded-xl px-6 py-4 shadow-2xl translate-x-[120%] transition-transform duration-500" role="alert" aria-live="polite">
|
||
<p class="text-sm text-sand-200 font-medium" id="toast-message">Message sent successfully!</p>
|
||
</div>
|
||
|
||
<script>
|
||
// ── Loader ──
|
||
window.addEventListener('load', () => {
|
||
setTimeout(() => {
|
||
document.getElementById('loader').classList.add('hidden');
|
||
}, 1400);
|
||
});
|
||
|
||
// ── Particles ──
|
||
(function createParticles() {
|
||
const container = document.getElementById('particles');
|
||
for (let i = 0; i < 20; i++) {
|
||
const p = document.createElement('div');
|
||
p.className = 'particle';
|
||
p.style.left = Math.random() * 100 + '%';
|
||
p.style.top = Math.random() * 100 + '%';
|
||
p.style.animationDuration = (8 + Math.random() * 12) + 's';
|
||
p.style.animationDelay = (Math.random() * 10) + 's';
|
||
p.style.opacity = (0.05 + Math.random() * 0.1).toString();
|
||
p.style.width = (2 + Math.random() * 3) + 'px';
|
||
p.style.height = p.style.width;
|
||
p.setAttribute('aria-hidden', 'true');
|
||
container.appendChild(p);
|
||
}
|
||
})();
|
||
|
||
// ── Navbar scroll effect ──
|
||
const navbar = document.getElementById('navbar');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 80) {
|
||
navbar.classList.add('bg-navy-900/90', 'backdrop-blur-xl', 'border-b', 'border-navy-700/50');
|
||
} else {
|
||
navbar.classList.remove('bg-navy-900/90', 'backdrop-blur-xl', 'border-b', 'border-navy-700/50');
|
||
}
|
||
});
|
||
|
||
// ── Mobile menu ──
|
||
const mobileToggle = document.getElementById('mobile-toggle');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
let mobileOpen = false;
|
||
|
||
mobileToggle.addEventListener('click', () => {
|
||
mobileOpen = !mobileOpen;
|
||
mobileMenu.classList.toggle('open');
|
||
mobileToggle.setAttribute('aria-expanded', mobileOpen);
|
||
mobileToggle.innerHTML = mobileOpen
|
||
? '<i class="fa-solid fa-xmark"></i>'
|
||
: '<i class="fa-solid fa-bars"></i>';
|
||
});
|
||
|
||
// Close mobile menu on link click
|
||
mobileMenu.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => {
|
||
mobileOpen = false;
|
||
mobileMenu.classList.remove('open');
|
||
mobileToggle.setAttribute('aria-expanded', 'false');
|
||
mobileToggle.innerHTML = '<i class="fa-solid fa-bars"></i>';
|
||
});
|
||
});
|
||
|
||
// ── Reveal on scroll ──
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
e.target.classList.add('visible');
|
||
}
|
||
});
|
||
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
||
|
||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||
|
||
// ── Counter animation ──
|
||
const counterEls = document.querySelectorAll('.counter');
|
||
const counterObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) {
|
||
const el = e.target;
|
||
const target = parseInt(el.dataset.target);
|
||
const duration = 2000;
|
||
const start = performance.now();
|
||
const tick = (now) => {
|
||
const elapsed = now - start;
|
||
const progress = Math.min(elapsed / duration, 1);
|
||
const eased = 1 - Math.pow(1 - progress, 3);
|
||
const current = Math.round(eased * target);
|
||
el.textContent = current.toLocaleString();
|
||
if (progress < 1) requestAnimationFrame(tick);
|
||
};
|
||
requestAnimationFrame(tick);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
counterEls.forEach(el => counterObserver.observe(el));
|
||
|
||
// ── Contact form ──
|
||
const contactForm = document.getElementById('contact-form');
|
||
const newsletterForm = document.getElementById('newsletter-form');
|
||
|
||
function showToast(msg) {
|
||
const toast = document.getElementById('toast');
|
||
const msgEl = document.getElementById('toast-message');
|
||
msgEl.textContent = msg;
|
||
toast.style.transform = 'translateX(0)';
|
||
setTimeout(() => {
|
||
toast.style.transform = 'translateX(120%)';
|
||
}, 4000);
|
||
}
|
||
|
||
function validateEmail(email) {
|
||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||
}
|
||
|
||
contactForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const name = document.getElementById('name');
|
||
const email = document.getElementById('email');
|
||
const message = document.getElementById('message');
|
||
|
||
let valid = true;
|
||
|
||
if (!name.value.trim() || name.value.trim().length < 2) {
|
||
document.getElementById('name-error').classList.remove('hidden');
|
||
valid = false;
|
||
} else {
|
||
document.getElementById('name-error').classList.add('hidden');
|
||
}
|
||
|
||
if (!validateEmail(email.value.trim())) {
|
||
document.getElementById('email-error').classList.remove('hidden');
|
||
valid = false;
|
||
} else {
|
||
document.getElementById('email-error').classList.add('hidden');
|
||
}
|
||
|
||
if (!message.value.trim() || message.value.trim().length < 10) {
|
||
document.getElementById('message-error').classList.remove('hidden');
|
||
valid = false;
|
||
} else {
|
||
document.getElementById('message-error').classList.add('hidden');
|
||
}
|
||
|
||
if (valid) {
|
||
showToast('Message sent! We will reach out within 2 hours.');
|
||
contactForm.reset();
|
||
}
|
||
});
|
||
|
||
newsletterForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const email = document.getElementById('newsletter-email');
|
||
if (validateEmail(email.value.trim())) {
|
||
showToast('Subscribed! Welcome to the Vitality community.');
|
||
email.value = '';
|
||
} else {
|
||
showToast('Please enter a valid email address.');
|
||
}
|
||
});
|
||
|
||
// ── Smooth scroll for anchor links ──
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
const target = document.querySelector(a.getAttribute('href'));
|
||
if (target) {
|
||
const offset = 80;
|
||
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||
window.scrollTo({ top, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
// ── Keyboard accessibility for mobile menu ──
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && mobileOpen) {
|
||
mobileOpen = false;
|
||
mobileMenu.classList.remove('open');
|
||
mobileToggle.setAttribute('aria-expanded', 'false');
|
||
mobileToggle.innerHTML = '<i class="fa-solid fa-bars"></i>';
|
||
}
|
||
});
|
||
|
||
// ── Intersection observer for counter ──
|
||
// (Already handled above, but we add a fallback)
|
||
const observerOptions = { threshold: 0.3 };
|
||
const counterObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const el = entry.target;
|
||
const target = parseInt(el.dataset.target);
|
||
const duration = 2000;
|
||
const start = performance.now();
|
||
const animate = (now) => {
|
||
const elapsed = now - start;
|
||
const progress = Math.min(elapsed / duration, 1);
|
||
const eased = 1 - Math.pow(1 - progress, 3);
|
||
el.textContent = Math.round(eased * target).toLocaleString();
|
||
if (progress < 1) requestAnimationFrame(animate);
|
||
};
|
||
requestAnimationFrame(animate);
|
||
counterObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.5 });
|
||
|
||
counterObserver.observe(document.querySelector('.counter'));
|
||
</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 89.27s<br>Model: bloomer010/Ling-3.0-tiny-GGUF:Q4_K_M</div></body>
|
||
</html>
|
||
``` |