Spaces:

Hussi
/

anycoder-65cd901b

Running

App Files Files Community

Hussi commited on Apr 26

Commit

d321954

verified ·

1 Parent(s): ce392ec

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +626 -19

index.html CHANGED Viewed

@@ -1,19 +1,626 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AERO X1 | Next Gen Headphones</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=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
+                        body: ['Inter', 'system-ui', 'sans-serif'],
+                    },
+                    colors: {
+                        'void': '#05070a',
+                        'ink': '#080c12',
+                        'slate-950': '#02040a',
+                        'slate-900': '#0a0f1a',
+                        'slate-800': '#111827',
+                        'slate-700': '#1e293b',
+                        'slate-600': '#334155',
+                        'slate-500': '#475569',
+                        'slate-400': '#64748b',
+                        'slate-300': '#94a3b8',
+                        'slate-200': '#cbd5e1',
+                        'slate-100': '#f1f5f9',
+                        'slate-50': '#f8fafc',
+                        'neon': '#00d4ff',
+                        'neon-dim': 'rgba(0, 212, 255, 0.08)',
+                        'neon-glow': 'rgba(0, 212, 255, 0.3)',
+                        'neon-bright': 'rgba(0, 212, 255, 0.15)',
+                        'mauve': '#a78bfa',
+                        'mauve-dim': 'rgba(167, 139, 250, 0.06)',
+                        'mauve-glow': 'rgba(167, 139, 250, 0.2)',
+                    },
+                    spacing: {
+                        '18': '4.5rem',
+                        '22': '5.5rem',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        *, *::before, *::after {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        html {
+            scrollbar-width: thin;
+            scrollbar-color: #1e293b #02040a;
+        }
+        body {
+            font-family: 'Space Grotesk', system-ui, sans-serif;
+            background: #05070a;
+            color: #e2e8f0;
+            overflow-x: hidden;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        /* ── Scrollbar ── */
+        ::-webkit-scrollbar { width: 5px; }
+        ::-webkit-scrollbar-track { background: #02040a; }
+        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
+        ::-webkit-scrollbar-thumb:hover { background: #334155; }
+        /* ── Scroll Reveal ── */
+        .reveal {
+            opacity: 0;
+            transform: translateY(40px);
+            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .reveal.active {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .reveal-delay-1 { transition-delay: 0.08s; }
+        .reveal-delay-2 { transition-delay: 0.16s; }
+        .reveal-delay-3 { transition-delay: 0.24s; }
+        .reveal-delay-4 { transition-delay: 0.32s; }
+        .reveal-delay-5 { transition-delay: 0.4s; }
+        /* ── Hero gradient text ── */
+        .hero-title {
+            background: linear-gradient(180deg, #f8fafc 0%, #94a3b8 55%, #475569 100%);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        /* ── Thin separator line ── */
+        .sep-line {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(148,163,184,0.15), transparent);
+        }
+        /* ── Nav link underline ── */
+        .nav-link {
+            position: relative;
+            padding-bottom: 2px;
+        }
+        .nav-link::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 1px;
+            background: #00d4ff;
+            transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        /* ── Header scroll state ── */
+        .header-bg {
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .header-bg.scrolled {
+            background: rgba(5, 7, 10, 0.7);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border-bottom: 1px solid rgba(30, 41, 59, 0.3);
+        }
+        /* ── Hero 3D image ── */
+        .hero-img-wrap {
+            transition: transform 0.1s linear;
+            will-change: transform;
+        }
+        /* ── Gradient orbit behind product ── */
+        .orbit-glow {
+            position: absolute;
+            width: 600px;
+            height: 600px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(0,212,255,0.04) 0%, rgba(167,139,250,0.03) 40%, transparent 70%);
+            filter: blur(60px);
+            animation: orbitDrift 20s ease-in-out infinite;
+            pointer-events: none;
+        }
+        @keyframes orbitDrift {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(40px, -30px) scale(1.05); }
+            66% { transform: translate(-20px, 20px) scale(0.95); }
+        }
+        /* ── Marquee ── */
+        @keyframes marquee-left {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        @keyframes marquee-right {
+            0% { transform: translateX(-50%); }
+            100% { transform: translateX(0); }
+        }
+        .marquee-left {
+            animation: marquee-left 35s linear infinite;
+        }
+        .marquee-right {
+            animation: marquee-right 45s linear infinite;
+        }
+        /* ── Section label ── */
+        .sec-label {
+            font-size: 0.65rem;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            font-weight: 500;
+            color: #64748b;
+        }
+        /* ── Abstract fill text ── */
+        .abstract-text {
+            font-size: clamp(2rem, 5vw, 4.5rem);
+            line-height: 1.08;
+            letter-spacing: -0.03em;
+            font-weight: 600;
+        }
+        .abstract-line {
+            display: inline;
+            background: linear-gradient(90deg, #334155, #334155);
+            background-repeat: no-repeat;
+            background-size: 0% 100%;
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .abstract-line.revealed {
+            background-size: 100% 100%;
+            -webkit-text-fill-color: transparent;
+            background-image: linear-gradient(90deg, #f8fafc, #cbd5e1);
+        }
+        /* ── Progress bar ── */
+        .progress-bar {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 2px;
+            height: 100%;
+            background: #1e293b;
+            border-radius: 1px;
+        }
+        .progress-fill {
+            width: 100%;
+            background: #00d4ff;
+            border-radius: 1px;
+            transition: height 0.15s ease-out;
+        }
+        /* ── Spec card ── */
+        .spec-card {
+            border: 1px solid rgba(30, 41, 59, 0.4);
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .spec-card:hover {
+            border-color: rgba(0, 212, 255, 0.2);
+            background: rgba(0, 212, 255, 0.02);
+            transform: translateY(-4px);
+        }
+        /* ── Tab pill ── */
+        .tab-pill {
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .tab-pill.active {
+            background: rgba(0, 212, 255, 0.08);
+            color: #00d4ff;
+            border-color: rgba(0, 212, 255, 0.3);
+        }
+        /* ── Feature row ── */
+        .feat-row {
+            border-bottom: 1px solid rgba(30, 41, 59, 0.3);
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .feat-row:hover {
+            background: rgba(0, 212, 255, 0.02);
+            border-bottom-color: rgba(0, 212, 255, 0.15);
+            padding-left: 12px;
+        }
+        /* ── Gallery hover ── */
+        .gal-img {
+            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .gal-img:hover {
+            transform: scale(1.02);
+        }
+        .gal-img:hover .gal-overlay {
+            opacity: 1;
+        }
+        .gal-overlay {
+            opacity: 0;
+            transition: opacity 0.4s ease;
+        }
+        /* ── Price color selector ── */
+        .color-pick {
+            transition: all 0.3s ease;
+        }
+        .color-pick:hover {
+            transform: scale(1.15);
+        }
+        .color-pick.active {
+            box-shadow: 0 0 0 3px #05070a, 0 0 0 5px #00d4ff;
+        }
+        /* ── Buy button ── */
+        .buy-btn {
+            background: #e2e8f0;
+            color: #02040a;
+            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .buy-btn::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
+            transform: translateX(-100%);
+            transition: transform 0.6s ease;
+        }
+        .buy-btn:hover::before {
+            transform: translateX(100%);
+        }
+        .buy-btn:hover {
+            background: #fff;
+            box-shadow: 0 0 40px rgba(226, 232, 240, 0.15);
+            transform: translateY(-1px);
+        }
+        /* ── Input ── */
+        .form-input {
+            background: transparent;
+            border: 1px solid rgba(30, 41, 59, 0.5);
+            transition: all 0.4s ease;
+            color: #f1f5f9;
+        }
+        .form-input:focus {
+            border-color: #00d4ff;
+            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.06);
+            outline: none;
+        }
+        .form-input::placeholder {
+            color: #475569;
+        }
+        /* ── Lightbox ── */
+        .lightbox {
+            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        /* ── Footer link ── */
+        .footer-link {
+            transition: color 0.3s ease;
+        }
+        .footer-link:hover {
+            color: #00d4ff;
+        }
+        /* ── Toast ── */
+        .toast {
+            animation: toastIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        @keyframes toastIn {
+            from { opacity: 0; transform: translateY(20px) scale(0.95); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes toastOut {
+            from { opacity: 1; transform: translateY(0) scale(1); }
+            to { opacity: 0; transform: translateY(20px) scale(0.95); }
+        }
+        /* ── Noise overlay ── */
+        .noise {
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+            z-index: 9999;
+            opacity: 0.025;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+            background-repeat: repeat;
+        }
+        /* ── Pulsing dot for "In Stock" ── */
+        @keyframes pulse-soft {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(0.8); }
+        }
+        .pulse-dot {
+            animation: pulse-soft 2s ease-in-out infinite;
+        }
+        /* ── Underline animation on hover for CTAs ── */
+        .cta-underline {
+            position: relative;
+        }
+        .cta-underline::after {
+            content: '';
+            position: absolute;
+            bottom: -2px;
+            left: 0;
+            width: 100%;
+            height: 1px;
+            background: #00d4ff;
+            transform: scaleX(0);
+            transform-origin: right;
+            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        .cta-underline:hover::after {
+            transform: scaleX(1);
+            transform-origin: left;
+        }
+    </style>
+</head>
+<body class="antialiased">
+    <!-- Noise texture overlay -->
+    <div class="noise"></div>
+    <!-- ─── HEADER ─── -->
+    <header id="header" class="fixed top-0 left-0 right-0 z-50 header-bg">
+        <div class="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">
+            <div class="flex items-center justify-between h-16">
+                <!-- Logo -->
+                <a href="#" class="flex items-center gap-2.5 group">
+                    <div class="w-7 h-7 rounded border border-slate-600 flex items-center justify-center group-hover:border-neon transition-colors duration-500">
+                        <svg class="w-3.5 h-3.5 text-slate-300 group-hover:text-neon transition-colors duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+                        </svg>
+                    </div>
+                    <span class="text-sm font-semibold tracking-wide text-slate-100">AERO<span class="text-slate-500 font-normal">.</span></span>
+                </a>
+                <!-- Desktop Nav -->
+                <nav class="hidden md:flex items-center gap-8">
+                    <a href="#about" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">About</a>
+                    <a href="#features" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Features</a>
+                    <a href="#gallery" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Gallery</a>
+                    <a href="#specs" class="nav-link text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-slate-200 transition-colors">Specs</a>
+                </nav>
+                <!-- Actions -->
+                <div class="flex items-center gap-5">
+                    <a href="#pricing" class="hidden sm:inline-flex text-[0.75rem] tracking-[0.12em] uppercase text-slate-400 hover:text-neon transition-colors">Pricing</a>
+                    <a href="#buy" class="inline-flex items-center gap-2 px-4 py-1.5 bg-slate-100 text-slate-900 rounded text-xs font-semibold tracking-wider hover:bg-white transition-all duration-300 hover:shadow-lg hover:shadow-slate-100/10">
+                        Order
+                        <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/>
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- ─── HERO ─── -->
+    <section class="relative min-h-screen flex items-center overflow-hidden" id="hero">
+        <!-- Canvas particles -->
+        <canvas id="heroCanvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
+        <!-- Orbit glow -->
+        <div class="orbit-glow top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
+        <div class="relative z-10 max-w-7xl mx-auto px-5 sm:px-8 lg:px-12 w-full pt-24 pb-16">
+            <div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
+                <!-- Text -->
+                <div class="order-2 lg:order-1">
+                    <div class="reveal">
+                        <div class="flex items-center gap-3 mb-8">
+                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
+                            <span class="text-[0.65rem] tracking-[0.2em] uppercase text-emerald-400/80 font-medium">In Stock &mdash; Ships in 24h</span>
+                        </div>
+                    </div>
+                    <h1 class="reveal reveal-delay-1 hero-title text-5xl sm:text-6xl lg:text-7xl xl:text-[5.5rem] font-bold leading-[0.95] tracking-tight mb-6">
+                        Aero<br>
+                        <span class="text-transparent bg-clip-text" style="background: linear-gradient(180deg, #00d4ff 0%, #0ea5e9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">X1</span>
+                    </h1>
+                    <p class="reveal reveal-delay-2 text-slate-400 text-base sm:text-lg font-body leading-relaxed max-w-md mb-10">
+                        Wireless headphones engineered with graphene drivers, 50-hour battery life, and adaptive ANC that learns your environment.
+                    </p>
+                    <div class="reveal reveal-delay-3 flex flex-wrap items-center gap-4">
+                        <a href="#buy" class="buy-btn inline-flex items-center gap-3 px-7 py-3.5 rounded font-semibold text-sm tracking-wide">
+                            Buy Now &mdash; $349
+                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
+                            </svg>
+                        </a>
+                        <a href="#features" class="cta-underline inline-flex items-center gap-2 text-sm text-slate-400 hover:text-slate-200 transition-colors">
+                            Explore
+                        </a>
+                    </div>
+                    <!-- Spec badges -->
+                    <div class="reveal reveal-delay-4 mt-14 flex flex-wrap gap-x-8 gap-y-3">
+                        <div>
+                            <div class="text-lg font-semibold text-slate-100">50h</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">Battery</div>
+                        </div>
+                        <div class="w-px h-8 bg-slate-800"></div>
+                        <div>
+                            <div class="text-lg font-semibold text-slate-100">-42dB</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">ANC</div>
+                        </div>
+                        <div class="w-px h-8 bg-slate-800"></div>
+                        <div>
+                            <div class="text-lg font-semibold text-slate-100">5.3</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">Bluetooth</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Image -->
+                <div class="order-1 lg:order-2 flex justify-center lg:justify-end reveal reveal-delay-2">
+                    <div class="relative hero-img-wrap" id="heroImg">
+                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=700&q=85" alt="Aero X1 Headphones" class="w-full max-w-[420px] lg:max-w-[480px] object-contain drop-shadow-2xl">
+                        <!-- Subtle reflection -->
+                        <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-3/4 h-12 bg-gradient-to-t from-slate-400/5 to-transparent blur-2xl rounded-full"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Bottom fade -->
+        <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-void to-transparent pointer-events-none"></div>
+    </section>
+    <!-- ─── MARQUEE ─── -->
+    <div class="relative py-5 border-y border-slate-800/50 overflow-hidden">
+        <div class="marquee-left flex gap-12 whitespace-nowrap">
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Precision Engineered
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Adaptive ANC
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                50h Battery
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Spatial Audio
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Graphene Drivers
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Bluetooth 5.3
+            </span>
+            <!-- Duplicate -->
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Precision Engineered
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Adaptive ANC
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                50h Battery
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Spatial Audio
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Graphene Drivers
+            </span>
+            <span class="text-[0.7rem] tracking-[0.25em] uppercase text-slate-600 font-medium flex items-center gap-3">
+                <svg class="w-3 h-3 text-neon/50" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+                Bluetooth 5.3
+            </span>
+        </div>
+    </div>
+    <!-- ─── ABOUT ─── -->
+    <section id="about" class="relative py-28 sm:py-36 overflow-hidden">
+        <div class="max-w-7xl mx-auto px-5 sm:px-8 lg:px-12">
+            <div class="grid lg:grid-cols-12 gap-8 lg:gap-16">
+                <!-- Left: sticky progress -->
+                <div class="lg:col-span-5 lg:sticky lg:top-32 lg:self-start">
+                    <div class="reveal">
+                        <div class="sec-label mb-3">About</div>
+                        <h2 class="text-3xl sm:text-4xl font-bold text-slate-100 leading-tight mb-4">
+                            Redefining<br>how you listen
+                        </h2>
+                        <p class="text-slate-500 text-sm font-body leading-relaxed max-w-sm">
+                            The Aero X1 isn't just another pair of headphones. It is a statement of intent &mdash; a commitment to audio perfection in its purest form.
+                        </p>
+                    </div>
+                    <!-- Progress bar -->
+                    <div class="hidden lg:block mt-12 relative pl-6">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="scrollProgress" style="height: 0%"></div>
+                        </div>
+                        <div class="space-y-6">
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">01 &mdash; Philosophy</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">02 &mdash; Craft</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">03 &mdash; Innovation</div>
+                            <div class="text-[0.65rem] tracking-[0.15em] uppercase text-slate-600">04 &mdash; Experience</div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Right: large abstract text -->
+                <div class="lg:col-span-7">
+                    <div class="abstract-text text-slate-700 leading-snug" id="abstractText">
+                        <span class="abstract-line" data-idx="0">Sound that breathes</span>
+                        <span class="abstract-line" data-idx="1"> with you. Noise that </span>
+                        <span class="abstract-line" data-idx="2">disappears without a </span>
+                        <span class="abstract-line" data-idx="3">trace. Comfort that </span>
+                        <span class="abstract-line" data-idx="4">lasts all day &mdash; and </span>
+                        <span class="abstract-line" data-idx="5">all night. Every detail, </span>
+                        <span class="abstract-line" data-idx="6">obsessively refined. </span>
+                        <span class="abstract-line" data-idx="7">Every frequency, </span>
+                        <span class="abstract-line" data-idx="8">swept clean.</span>
+                    </div>
+                    <div class="reveal mt-16 grid grid-cols-1 sm:grid-cols-3 gap-6">
+                        <div class="spec-card p-6 rounded-lg">
+                            <div class="w-8 h-8 rounded-md border border-slate-700 flex items-center justify-center mb-4">
+                                <svg class="w-4 h-4 text-neon/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"/>
+                                </svg>
+                            </div>
+                            <div class="text-xs font-semibold text-slate-200 mb-1.5">AeroSound 2.0</div>
+                            <div class="text-[0.7rem] text-slate-500 font-body leading-relaxed">Custom 40mm beryllium-infused drivers tuned for extended low-end and crystalline highs.</div>
+                        </div>
+                        <div class="spec-card p-6 rounded-lg">
+                            <div class="w-8 h-8 rounded-md border border-slate-700 flex items-center justify-center mb-4">
+                                <svg class="w-4 h-4 text-neon/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"/>
+                                </svg>
+                            </div>
+                            <div class="text-xs font-semibold text-slate-200 mb-1.5">Zero Gravity</div>
+                            <div class="text