724 lines
21 KiB
HTML
724 lines
21 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<meta name="description" content="quiXzoom — The fastest way to dominate your sport." />
|
||
|
|
<title>quiXzoom — Level Up Your Game</title>
|
||
|
|
<link rel="canonical" href="https://www.quixzoom.com/">
|
||
|
|
|
||
|
|
<!-- Fonts: Inter for display weight -->
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet" />
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
|
||
|
|
:root {
|
||
|
|
/* Grayscale */
|
||
|
|
--qx-white: #FFFFFF;
|
||
|
|
--qx-gray-100: #F0F0F0;
|
||
|
|
--qx-gray-400: #888888;
|
||
|
|
--qx-gray-700: #2A2A2A;
|
||
|
|
--qx-deep-carbon: #0D0D0D;
|
||
|
|
|
||
|
|
/* Accents */
|
||
|
|
--qx-neon-primary: #00FF87;
|
||
|
|
--qx-neon-secondary: #00D1FF;
|
||
|
|
--qx-neon-primary-20: rgba(0, 255, 135, 0.20);
|
||
|
|
--qx-neon-primary-08: rgba(0, 255, 135, 0.08);
|
||
|
|
--qx-neon-secondary-15: rgba(0, 209, 255, 0.15);
|
||
|
|
|
||
|
|
/* Spacing */
|
||
|
|
--qx-space-sm: 8px;
|
||
|
|
--qx-space-md: 16px;
|
||
|
|
--qx-space-lg: 32px;
|
||
|
|
--qx-space-xl: 64px;
|
||
|
|
|
||
|
|
/* Type scale */
|
||
|
|
--qx-text-xs: 12px;
|
||
|
|
--qx-text-sm: 16px;
|
||
|
|
--qx-text-md: 24px;
|
||
|
|
--qx-text-lg: 48px;
|
||
|
|
--qx-text-xl: 64px;
|
||
|
|
|
||
|
|
/* Easing */
|
||
|
|
--qx-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
--qx-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
|
||
|
|
|
||
|
|
/* Duration */
|
||
|
|
--qx-dur-fast: 150ms;
|
||
|
|
--qx-dur-base: 300ms;
|
||
|
|
--qx-dur-hero: 900ms;
|
||
|
|
|
||
|
|
/* Radius */
|
||
|
|
--qx-radius-sm: 4px;
|
||
|
|
--qx-radius-md: 8px;
|
||
|
|
--qx-radius-pill: 9999px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── RESET ──────────────────────────────────────────────────────────────── */
|
||
|
|
*, *::before, *::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
/* scroll-behavior disabled to prevent auto-scroll on page load */
|
||
|
|
-webkit-text-size-adjust: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--qx-deep-carbon);
|
||
|
|
color: var(--qx-white);
|
||
|
|
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
min-height: 100dvh;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── KEYFRAME ANIMATIONS ────────────────────────────────────────────────── */
|
||
|
|
@keyframes qx-fade-up {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(32px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes qx-fade-in {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes qx-slide-in-left {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-24px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes qx-neon-pulse {
|
||
|
|
0%, 100% {
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 0 rgba(0, 255, 135, 0),
|
||
|
|
0 0 24px rgba(0, 255, 135, 0.3);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
box-shadow:
|
||
|
|
0 0 0 4px rgba(0, 255, 135, 0.08),
|
||
|
|
0 0 40px rgba(0, 255, 135, 0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes qx-gradient-shift {
|
||
|
|
0% { background-position: 0% 50%; }
|
||
|
|
50% { background-position: 100% 50%; }
|
||
|
|
100% { background-position: 0% 50%; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes qx-scan-line {
|
||
|
|
0% { transform: translateY(-100%); opacity: 0; }
|
||
|
|
10% { opacity: 0.6; }
|
||
|
|
90% { opacity: 0.6; }
|
||
|
|
100% { transform: translateY(100vh); opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── NAV ────────────────────────────────────────────────────────────────── */
|
||
|
|
.nav {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 100;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: var(--qx-space-md) var(--qx-space-lg);
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
|
backdrop-filter: blur(16px) saturate(1.2);
|
||
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.2);
|
||
|
|
background: rgba(13, 13, 13, 0.85);
|
||
|
|
animation: qx-fade-in var(--qx-dur-base) var(--qx-ease-snap) 0.1s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-logo {
|
||
|
|
font-size: var(--qx-text-sm);
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
color: var(--qx-white);
|
||
|
|
text-decoration: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-logo span {
|
||
|
|
color: var(--qx-neon-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links {
|
||
|
|
display: none;
|
||
|
|
gap: var(--qx-space-lg);
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links a {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--qx-gray-400);
|
||
|
|
text-decoration: none;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
transition: color var(--qx-dur-fast) var(--qx-ease-snap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links a:hover {
|
||
|
|
color: var(--qx-white);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-cta {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--qx-deep-carbon);
|
||
|
|
background: var(--qx-neon-primary);
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--qx-radius-sm);
|
||
|
|
padding: 9px 18px;
|
||
|
|
cursor: pointer;
|
||
|
|
letter-spacing: 0.04em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
text-decoration: none;
|
||
|
|
transition:
|
||
|
|
transform var(--qx-dur-fast) var(--qx-ease-snap),
|
||
|
|
box-shadow var(--qx-dur-base) var(--qx-ease-snap),
|
||
|
|
background var(--qx-dur-fast) var(--qx-ease-snap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-cta:hover {
|
||
|
|
background: #12ffa0;
|
||
|
|
transform: translateY(-1px);
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 255, 135, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-cta:active {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── HERO SECTION ───────────────────────────────────────────────────────── */
|
||
|
|
.hero {
|
||
|
|
position: relative;
|
||
|
|
min-height: 100dvh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
padding: calc(var(--qx-space-xl) + 56px) var(--qx-space-lg) var(--qx-space-xl);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Radial glow background */
|
||
|
|
.hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background:
|
||
|
|
radial-gradient(ellipse 80% 60% at 60% 40%, rgba(0, 255, 135, 0.07) 0%, transparent 65%),
|
||
|
|
radial-gradient(ellipse 50% 40% at 90% 10%, rgba(0, 209, 255, 0.06) 0%, transparent 60%);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Grid overlay texture */
|
||
|
|
.hero::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
|
||
|
|
background-size: 40px 40px;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-inner {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── EYEBROW LABEL ──────────────────────────────────────────────────────── */
|
||
|
|
.hero-eyebrow {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--qx-space-sm);
|
||
|
|
font-size: var(--qx-text-xs);
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.15em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--qx-neon-primary);
|
||
|
|
margin-bottom: var(--qx-space-md);
|
||
|
|
animation: qx-slide-in-left var(--qx-dur-hero) var(--qx-ease-enter) 0.2s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-eyebrow::before {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
width: 24px;
|
||
|
|
height: 2px;
|
||
|
|
background: var(--qx-neon-primary);
|
||
|
|
box-shadow: 0 0 8px var(--qx-neon-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── HEADLINE ───────────────────────────────────────────────────────────── */
|
||
|
|
.hero-headline {
|
||
|
|
font-size: clamp(48px, 14vw, 64px);
|
||
|
|
font-weight: 900;
|
||
|
|
line-height: 1.0;
|
||
|
|
letter-spacing: -0.03em;
|
||
|
|
color: var(--qx-white);
|
||
|
|
margin-bottom: var(--qx-space-md);
|
||
|
|
animation: qx-fade-up var(--qx-dur-hero) var(--qx-ease-enter) 0.35s both;
|
||
|
|
max-width: 12ch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-headline .accent {
|
||
|
|
display: block;
|
||
|
|
background: linear-gradient(
|
||
|
|
135deg,
|
||
|
|
var(--qx-neon-primary) 0%,
|
||
|
|
var(--qx-neon-secondary) 100%
|
||
|
|
);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── SUBHEADLINE ────────────────────────────────────────────────────────── */
|
||
|
|
.hero-sub {
|
||
|
|
font-size: clamp(16px, 4vw, 20px);
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 1.5;
|
||
|
|
color: var(--qx-gray-400);
|
||
|
|
max-width: 36ch;
|
||
|
|
margin-bottom: var(--qx-space-lg);
|
||
|
|
animation: qx-fade-up var(--qx-dur-hero) var(--qx-ease-enter) 0.5s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-sub strong {
|
||
|
|
color: var(--qx-white);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── CTA GROUP ──────────────────────────────────────────────────────────── */
|
||
|
|
.hero-cta-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: var(--qx-space-md);
|
||
|
|
animation: qx-fade-up var(--qx-dur-hero) var(--qx-ease-enter) 0.65s both;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Primary CTA */
|
||
|
|
.btn-primary {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: var(--qx-space-sm);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: var(--qx-text-sm);
|
||
|
|
font-weight: 700;
|
||
|
|
letter-spacing: 0.04em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--qx-deep-carbon);
|
||
|
|
background: var(--qx-neon-primary);
|
||
|
|
border: none;
|
||
|
|
border-radius: var(--qx-radius-sm);
|
||
|
|
padding: 18px 28px;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 100%;
|
||
|
|
transition:
|
||
|
|
transform var(--qx-dur-fast) var(--qx-ease-snap),
|
||
|
|
box-shadow var(--qx-dur-base) var(--qx-ease-snap),
|
||
|
|
background var(--qx-dur-fast) var(--qx-ease-snap);
|
||
|
|
animation: qx-neon-pulse 3s ease-in-out 1.5s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background: #12ffa0;
|
||
|
|
transform: translateY(-2px) scale(1.01);
|
||
|
|
box-shadow:
|
||
|
|
0 8px 32px rgba(0, 255, 135, 0.45),
|
||
|
|
0 2px 8px rgba(0, 255, 135, 0.25);
|
||
|
|
animation: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:active {
|
||
|
|
transform: translateY(0) scale(0.99);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary-arrow {
|
||
|
|
display: inline-block;
|
||
|
|
transition: transform var(--qx-dur-fast) var(--qx-ease-snap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover .btn-primary-arrow {
|
||
|
|
transform: translateX(4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Secondary CTA */
|
||
|
|
.btn-secondary {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: var(--qx-space-sm);
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: var(--qx-text-sm);
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--qx-white);
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
|
|
border-radius: var(--qx-radius-sm);
|
||
|
|
padding: 17px 28px;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 100%;
|
||
|
|
transition:
|
||
|
|
border-color var(--qx-dur-fast) var(--qx-ease-snap),
|
||
|
|
background var(--qx-dur-fast) var(--qx-ease-snap),
|
||
|
|
transform var(--qx-dur-fast) var(--qx-ease-snap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary:hover {
|
||
|
|
border-color: rgba(255, 255, 255, 0.35);
|
||
|
|
background: rgba(255, 255, 255, 0.04);
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── SOCIAL PROOF ───────────────────────────────────────────────────────── */
|
||
|
|
.hero-social-proof {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: var(--qx-space-md);
|
||
|
|
margin-top: var(--qx-space-lg);
|
||
|
|
animation: qx-fade-in var(--qx-dur-hero) var(--qx-ease-snap) 0.9s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.proof-avatars {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.proof-avatar {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 2px solid var(--qx-deep-carbon);
|
||
|
|
background: linear-gradient(135deg, var(--qx-gray-700), var(--qx-gray-400));
|
||
|
|
margin-right: -8px;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 13px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: var(--qx-white);
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.proof-avatar:nth-child(1) { background: linear-gradient(135deg, #2a4a6e, #4a8ab8); }
|
||
|
|
.proof-avatar:nth-child(2) { background: linear-gradient(135deg, #4a2a6e, #8a4ab8); }
|
||
|
|
.proof-avatar:nth-child(3) { background: linear-gradient(135deg, #6e4a2a, #b88a4a); }
|
||
|
|
.proof-avatar:nth-child(4) { background: linear-gradient(135deg, #2a6e3a, #4ab85a); }
|
||
|
|
|
||
|
|
.proof-text {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--qx-gray-400);
|
||
|
|
line-height: 1.35;
|
||
|
|
}
|
||
|
|
|
||
|
|
.proof-text strong {
|
||
|
|
color: var(--qx-white);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── STATS STRIP ────────────────────────────────────────────────────────── */
|
||
|
|
.hero-stats {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1px;
|
||
|
|
margin-top: var(--qx-space-xl);
|
||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
|
padding-top: var(--qx-space-lg);
|
||
|
|
width: 100%;
|
||
|
|
animation: qx-fade-up var(--qx-dur-hero) var(--qx-ease-snap) 1.0s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat {
|
||
|
|
padding: var(--qx-space-md) 0;
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat-value {
|
||
|
|
font-size: var(--qx-text-md);
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
color: var(--qx-white);
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat-value .unit {
|
||
|
|
font-size: var(--qx-text-sm);
|
||
|
|
font-weight: 500;
|
||
|
|
color: var(--qx-neon-primary);
|
||
|
|
margin-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat-label {
|
||
|
|
font-size: var(--qx-text-xs);
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--qx-gray-400);
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── FLOATING BADGE ─────────────────────────────────────────────────────── */
|
||
|
|
.hero-badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
background: var(--qx-neon-primary-08);
|
||
|
|
border: 1px solid var(--qx-neon-primary-20);
|
||
|
|
border-radius: var(--qx-radius-pill);
|
||
|
|
padding: 6px 14px;
|
||
|
|
font-size: var(--qx-text-xs);
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.06em;
|
||
|
|
color: var(--qx-neon-primary);
|
||
|
|
margin-bottom: var(--qx-space-lg);
|
||
|
|
animation: qx-slide-in-left var(--qx-dur-hero) var(--qx-ease-enter) 0.1s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-dot {
|
||
|
|
width: 6px;
|
||
|
|
height: 6px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: var(--qx-neon-primary);
|
||
|
|
box-shadow: 0 0 8px var(--qx-neon-primary);
|
||
|
|
animation: qx-neon-pulse 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── MEDIA QUERIES ──────────────────────────────────────────────────────── */
|
||
|
|
|
||
|
|
/* Tablet 640px+ */
|
||
|
|
@media (min-width: 640px) {
|
||
|
|
.hero {
|
||
|
|
padding-left: var(--qx-space-xl);
|
||
|
|
padding-right: var(--qx-space-xl);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-cta-group {
|
||
|
|
flex-direction: row;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary,
|
||
|
|
.btn-secondary {
|
||
|
|
width: auto;
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stats {
|
||
|
|
flex-direction: row;
|
||
|
|
gap: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat {
|
||
|
|
flex: 1;
|
||
|
|
padding: var(--qx-space-md) var(--qx-space-lg) var(--qx-space-md) 0;
|
||
|
|
border-bottom: none;
|
||
|
|
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-stat:last-child {
|
||
|
|
border-right: none;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-links {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Desktop 1024px+ */
|
||
|
|
@media (min-width: 1024px) {
|
||
|
|
.hero {
|
||
|
|
padding: calc(var(--qx-space-xl) + 80px) 96px var(--qx-space-xl);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-headline {
|
||
|
|
font-size: var(--qx-text-xl); /* 64px locked */
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-sub {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Large Desktop 1440px+ */
|
||
|
|
@media (min-width: 1440px) {
|
||
|
|
.hero {
|
||
|
|
padding-left: 128px;
|
||
|
|
padding-right: 128px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-headline {
|
||
|
|
font-size: 80px; /* Allow above-locked for XL screens */
|
||
|
|
max-width: 14ch;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── SCROLL INDICATOR ───────────────────────────────────────────────────── */
|
||
|
|
.scroll-indicator {
|
||
|
|
position: absolute;
|
||
|
|
bottom: var(--qx-space-lg);
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
animation: qx-fade-in 1s var(--qx-ease-snap) 1.5s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-label {
|
||
|
|
font-size: var(--qx-text-xs);
|
||
|
|
font-weight: 600;
|
||
|
|
letter-spacing: 0.12em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--qx-gray-400);
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-line {
|
||
|
|
width: 1px;
|
||
|
|
height: 40px;
|
||
|
|
background: linear-gradient(to bottom, var(--qx-gray-400), transparent);
|
||
|
|
animation: qx-scan-line 2.5s var(--qx-ease-snap) infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- NAV -->
|
||
|
|
<nav class="nav" aria-label="Main navigation">
|
||
|
|
<a href="/" class="nav-logo">quiX<span>zoom</span></a>
|
||
|
|
<ul class="nav-links" role="list">
|
||
|
|
<li><a href="#features">Features</a></li>
|
||
|
|
<li><a href="#pricing">Pricing</a></li>
|
||
|
|
<li><a href="#athletes">Athletes</a></li>
|
||
|
|
</ul>
|
||
|
|
<a href="#get-started" class="nav-cta">Get Started</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- HERO SECTION -->
|
||
|
|
<section class="hero" aria-labelledby="hero-headline">
|
||
|
|
|
||
|
|
<div class="hero-inner">
|
||
|
|
|
||
|
|
<!-- Live badge -->
|
||
|
|
<div class="hero-badge" aria-label="Live platform">
|
||
|
|
<span class="badge-dot" aria-hidden="true"></span>
|
||
|
|
Live Platform · 50K+ Athletes
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Eyebrow -->
|
||
|
|
<p class="hero-eyebrow">Sport Performance Tech</p>
|
||
|
|
|
||
|
|
<!-- Main headline -->
|
||
|
|
<h1 class="hero-headline" id="hero-headline">
|
||
|
|
quiXzoom — Train Like You're Already Winning
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<!-- Subheadline -->
|
||
|
|
<p class="hero-sub">
|
||
|
|
quiXzoom turns <strong>real-time movement data</strong> into
|
||
|
|
the exact feedback your body needs.
|
||
|
|
No guesswork. Pure performance.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- CTA group -->
|
||
|
|
<div class="hero-cta-group">
|
||
|
|
<a href="#get-started" class="btn-primary">
|
||
|
|
Start Free Trial
|
||
|
|
<span class="btn-primary-arrow" aria-hidden="true">→</span>
|
||
|
|
</a>
|
||
|
|
<a href="#how-it-works" class="btn-secondary">
|
||
|
|
See How It Works
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Social proof -->
|
||
|
|
<div class="hero-social-proof" aria-label="User reviews">
|
||
|
|
<div class="proof-avatars" aria-hidden="true">
|
||
|
|
<div class="proof-avatar">J</div>
|
||
|
|
<div class="proof-avatar">A</div>
|
||
|
|
<div class="proof-avatar">M</div>
|
||
|
|
<div class="proof-avatar">S</div>
|
||
|
|
</div>
|
||
|
|
<p class="proof-text">
|
||
|
|
<strong>4.9 / 5.0</strong> from 2,300+ reviews.<br/>
|
||
|
|
Trusted by pro athletes worldwide.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Stats -->
|
||
|
|
<div class="hero-stats" aria-label="Key metrics">
|
||
|
|
<div class="hero-stat">
|
||
|
|
<div class="hero-stat-value">
|
||
|
|
2.4<span class="unit">ms</span>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat-label">Sensor Latency</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat">
|
||
|
|
<div class="hero-stat-value">
|
||
|
|
98<span class="unit">%</span>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat-label">Accuracy Score</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat">
|
||
|
|
<div class="hero-stat-value">
|
||
|
|
50<span class="unit">K+</span>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat-label">Active Athletes</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat">
|
||
|
|
<div class="hero-stat-value">
|
||
|
|
€29<span class="unit">/mo</span>
|
||
|
|
</div>
|
||
|
|
<div class="hero-stat-label">Starting Price</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Scroll indicator -->
|
||
|
|
<div class="scroll-indicator" aria-hidden="true">
|
||
|
|
<span class="scroll-label">Scroll</span>
|
||
|
|
<div class="scroll-line"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|