Luxury Sneaker & Watch Studio Landing Page

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxury Sneaker & Watch Studio Landing Page - Web App</title>
    
    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        outfit: ['Outfit', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        body { margin: 0; padding: 0; min-height: 100vh; background-color: #080c14; overflow-x: hidden; }
        .glow-ellipse {
            background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, rgba(8, 12, 20, 0) 70%);
        }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #080c14; }
        ::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.3); border-radius: 4px; }
    </style>
</head>
<body class="min-h-full text-slate-100 flex flex-col font-sans select-none bg-slate-950">

    <!-- Header Navigation -->
    <header class="h-20 border-b border-slate-800/80 px-6 lg:px-12 flex items-center justify-between z-30 sticky top-0 bg-slate-950/80 backdrop-blur-xl">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center text-slate-950 font-outfit font-black text-xl shadow-lg shadow-cyan-500/20">
                💎
            </div>
            <div>
                <span class="font-outfit font-black text-lg text-white tracking-wider uppercase">AURA STUDIO</span>
                <span class="block text-[10px] text-cyan-400 font-mono tracking-widest uppercase">Luxury Edition 2026</span>
            </div>
        </div>

        <nav class="hidden md:flex items-center gap-8 text-xs font-bold uppercase tracking-wider text-slate-400">
            <a href="#overview" class="hover:text-cyan-400 transition">Overview</a>
            <a href="#features" class="hover:text-cyan-400 transition">Specs</a>
            <a href="#reviews" class="hover:text-cyan-400 transition">Reviews</a>
        </nav>

        <div class="flex items-center gap-4">
            <button id="openCartBtn" class="relative p-2.5 rounded-2xl bg-slate-900 border border-slate-800 text-slate-200 hover:border-cyan-500 transition">
                <i class="fa-solid fa-bag-shopping text-base"></i>
                <span id="cartBadge" class="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-cyan-500 text-slate-950 font-outfit font-extrabold text-[10px] flex items-center justify-center">1</span>
            </button>
        </div>
    </header>

    <!-- Main Hero Showcase -->
    <main class="flex-1 max-w-7xl w-full mx-auto px-6 lg:px-12 py-12 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center relative">
        
        <!-- Background Ambient Glow -->
        <div class="absolute -top-20 left-1/4 w-[500px] h-[500px] glow-ellipse pointer-events-none"></div>

        <!-- Left Content -->
        <div class="space-y-6 z-10">
            <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30 text-cyan-400 text-xs font-bold uppercase tracking-widest">
                <span class="w-2 h-2 rounded-full bg-cyan-400 animate-ping"></span> Limited Flagship Drop
            </div>

            <h1 class="font-outfit font-black text-4xl sm:text-6xl text-white leading-tight tracking-tight">
                AURA X-1 <br><span class="bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-500 bg-clip-text text-transparent">CHRONO RUNNER</span>
            </h1>

            <p class="text-slate-400 text-sm sm:text-base leading-relaxed max-w-lg">
                Crafted with aerospace-grade carbon fiber weaves, reactive kinetic cushioning, and real-time biometric telemetry integrations for unmatched luxury performance.
            </p>

            <!-- Color Swatches & Size Picker -->
            <div class="space-y-4 pt-2">
                <div>
                    <span class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Select Color Edition</span>
                    <div class="flex gap-3">
                        <button onclick="selectColor('Obsidian Cyan', 'from-cyan-500 to-blue-600')" class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-cyan-500 to-blue-600 border-2 border-white ring-2 ring-cyan-500/50 shadow-lg shadow-cyan-500/30 transition hover:scale-105"></button>
                        <button onclick="selectColor('Neon Purple', 'from-purple-500 to-pink-600')" class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-purple-500 to-pink-600 border-2 border-transparent hover:border-white transition hover:scale-105"></button>
                        <button onclick="selectColor('Solar Gold', 'from-amber-400 to-orange-600')" class="w-10 h-10 rounded-2xl bg-gradient-to-tr from-amber-400 to-orange-600 border-2 border-transparent hover:border-white transition hover:scale-105"></button>
                    </div>
                </div>

                <div>
                    <span class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Select Size (US)</span>
                    <div class="flex flex-wrap gap-2.5">
                        <button onclick="selectSize(8)" class="size-btn px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-bold text-slate-300 hover:border-cyan-500 transition">8</button>
                        <button onclick="selectSize(9)" class="size-btn px-4 py-2 rounded-xl bg-cyan-500 border border-cyan-400 text-xs font-bold text-slate-950 shadow-md shadow-cyan-500/20">9</button>
                        <button onclick="selectSize(10)" class="size-btn px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-bold text-slate-300 hover:border-cyan-500 transition">10</button>
                        <button onclick="selectSize(11)" class="size-btn px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-bold text-slate-300 hover:border-cyan-500 transition">11</button>
                    </div>
                </div>
            </div>

            <!-- Price & Add to Cart -->
            <div class="flex items-center gap-6 pt-4">
                <div>
                    <span class="block text-xs text-slate-400 font-mono">Retail Price</span>
                    <span class="font-outfit font-black text-3xl text-white font-mono">$480.00</span>
                </div>
                <button id="addToCartBtn" class="flex-1 py-4 px-8 rounded-2xl bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-outfit font-extrabold text-sm uppercase tracking-widest transition shadow-xl shadow-cyan-500/20 flex items-center justify-center gap-2">
                    <i class="fa-solid fa-cart-shopping"></i>
                    <span>Add to Bag</span>
                </button>
            </div>
        </div>

        <!-- Right Product Showcase Card -->
        <div class="relative z-10 flex items-center justify-center">
            <div class="w-full max-w-lg bg-slate-900/60 backdrop-blur-2xl border border-slate-800/80 rounded-3xl p-8 shadow-2xl relative space-y-6 text-center group">
                
                <!-- Floating Spec Badges -->
                <div class="absolute top-4 left-4 bg-slate-950/80 border border-slate-800 rounded-xl px-3 py-1.5 text-[11px] font-mono text-cyan-400">
                    ⚡ Weight: 280g
                </div>
                <div class="absolute top-4 right-4 bg-slate-950/80 border border-slate-800 rounded-xl px-3 py-1.5 text-[11px] font-mono text-emerald-400">
                    🛡️ Carbon Fiber
                </div>

                <!-- Product Preview Graphic -->
                <div class="w-56 h-56 mx-auto rounded-full bg-gradient-to-tr from-cyan-500/20 to-purple-500/20 border border-cyan-500/30 flex items-center justify-center text-7xl shadow-2xl group-hover:scale-105 transition duration-500" id="productVisual">
                    👟
                </div>

                <div>
                    <h3 class="font-outfit font-extrabold text-xl text-white" id="selectedVariantTitle">AURA X-1 (Obsidian Cyan)</h3>
                    <p class="text-xs text-slate-400 mt-1">Edition Size: US 9 • Carbon Weave Sole</p>
                </div>

                <div class="grid grid-cols-3 gap-3 pt-2 text-xs border-t border-slate-800/80">
                    <div class="p-2 rounded-xl bg-slate-950/60">
                        <span class="block text-[10px] text-slate-500">Cushioning</span>
                        <span class="font-bold text-cyan-400">Kinetic V2</span>
                    </div>
                    <div class="p-2 rounded-xl bg-slate-950/60">
                        <span class="block text-[10px] text-slate-500">Traction</span>
                        <span class="font-bold text-cyan-400">Vibram® G3</span>
                    </div>
                    <div class="p-2 rounded-xl bg-slate-950/60">
                        <span class="block text-[10px] text-slate-500">Warranty</span>
                        <span class="font-bold text-cyan-400">Lifetime</span>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <!-- Slide-Out Shopping Cart Drawer -->
    <div id="cartDrawer" class="fixed inset-y-0 right-0 w-full max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl z-50 transform translate-x-full transition duration-300 flex flex-col">
        <div class="p-6 border-b border-slate-800 flex items-center justify-between">
            <h3 class="font-outfit font-extrabold text-base text-white flex items-center gap-2">
                <i class="fa-solid fa-bag-shopping text-cyan-400"></i> Shopping Bag
            </h3>
            <button id="closeCartBtn" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark text-lg"></i></button>
        </div>

        <div id="cartItemsContainer" class="flex-1 p-6 space-y-4 overflow-y-auto">
            <!-- Items rendered by JS -->
        </div>

        <div class="p-6 border-t border-slate-800 bg-slate-950 space-y-4">
            <div class="flex justify-between text-sm font-bold text-slate-300">
                <span>Subtotal</span>
                <span id="cartSubtotal" class="font-mono text-white">$480.00</span>
            </div>
            <button onclick="alert('Proceeding to Checkout...')" class="w-full py-4 rounded-2xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 font-outfit font-extrabold text-xs uppercase tracking-widest transition shadow-lg shadow-cyan-500/20">
                Checkout Now
            </button>
        </div>
    </div>

    <!-- JS Interactive Logic -->
    <script>
        let selectedVariant = 'Obsidian Cyan';
        let selectedSize = 9;
        let cartItems = [
            { id: 1, title: 'AURA X-1 Chrono Runner (Obsidian Cyan)', size: 9, price: 480.00, qty: 1 }
        ];

        const openCartBtn = document.getElementById('openCartBtn');
        const closeCartBtn = document.getElementById('closeCartBtn');
        const cartDrawer = document.getElementById('cartDrawer');
        const addToCartBtn = document.getElementById('addToCartBtn');
        const cartItemsContainer = document.getElementById('cartItemsContainer');
        const cartBadge = document.getElementById('cartBadge');
        const cartSubtotal = document.getElementById('cartSubtotal');
        const selectedVariantTitle = document.getElementById('selectedVariantTitle');

        function selectColor(name, gradientClass) {
            selectedVariant = name;
            selectedVariantTitle.innerText = `AURA X-1 (${name})`;
        }

        function selectSize(sz) {
            selectedSize = sz;
            document.querySelectorAll('.size-btn').forEach(btn => {
                if (parseInt(btn.innerText) === sz) {
                    btn.className = 'size-btn px-4 py-2 rounded-xl bg-cyan-500 border border-cyan-400 text-xs font-bold text-slate-950 shadow-md shadow-cyan-500/20';
                } else {
                    btn.className = 'size-btn px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 text-xs font-bold text-slate-300 hover:border-cyan-500 transition';
                }
            });
        }

        function renderCart() {
            cartItemsContainer.innerHTML = '';
            let total = 0;
            let count = 0;

            cartItems.forEach((item, index) => {
                total += item.price * item.qty;
                count += item.qty;

                const div = document.createElement('div');
                div.className = 'p-4 rounded-2xl bg-slate-950 border border-slate-800 flex items-center justify-between gap-4';
                div.innerHTML = `
                    <div class="flex items-center gap-3">
                        <div class="w-12 h-12 rounded-xl bg-slate-900 flex items-center justify-center text-2xl">👟</div>
                        <div>
                            <h4 class="font-bold text-xs text-white">${item.title}</h4>
                            <p class="text-[11px] text-slate-400 font-mono">Size US ${item.size} • $${item.price.toFixed(2)}</p>
                        </div>
                    </div>
                    <button onclick="removeCartItem(${index})" class="text-slate-500 hover:text-rose-400 text-xs"><i class="fa-solid fa-trash"></i></button>
                `;
                cartItemsContainer.appendChild(div);
            });

            cartBadge.innerText = count;
            cartSubtotal.innerText = '$' + total.toFixed(2);
        }

        function removeCartItem(index) {
            cartItems.splice(index, 1);
            renderCart();
        }

        addToCartBtn.addEventListener('click', () => {
            cartItems.push({
                id: Date.now(),
                title: `AURA X-1 (${selectedVariant})`,
                size: selectedSize,
                price: 480.00,
                qty: 1
            });
            renderCart();
            cartDrawer.classList.remove('translate-x-full');
        });

        openCartBtn.addEventListener('click', () => cartDrawer.classList.remove('translate-x-full'));
        closeCartBtn.addEventListener('click', () => cartDrawer.classList.add('translate-x-full'));

        renderCart();
    </script>
</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file