index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./src/style.css" />
        <title>KOTION EACH G2000 Gaming Headset</title>
    </head>
    <body id="scroll-container data-scroll-container">
        <section id="hero">
            <div class="m-8 sm:mt-[300px]">
                <h1 class="text-5xl w-2/5 max-sm:w-3/5">
                    G2000 Over-ear Gaming Headphone with Mic & Stereo Bass LED
                    Light
                </h1>
                <button type="button" class="button block sm:ml-24 mt-4">
                    Shop Now
                </button>
                <div class="grow"></div>
            </div>
        </section>
        <section id="hero-text" data-scroll data-scroll-call="hero-entry">
            <div class="text-8xl font-bold text-center">
                Immerse Yourself in Game <br />
                Like Never Before!
            </div>
        </section>
        <section id="spec">
            <div class="flex flex-wrap">
                <div class="text-7xl md:text-9xl transparent-text">
                    The KOTION EACH G2000 is designed to give gamers the
                    ultimate sound experience. Featuring a high-precision 50mm
                    neodymium driver, it delivers powerful sound clarity and
                    immersive audio, making it ideal for various gaming genres.
                </div>
            </div>
            <div
                class="chips w-full flex flex-wrap gap-3 overflow-auto justify-center items-center">
                <div class="chip">
                    <span>Brand Name</span>
                    <span>KOTION EACH</span>
                </div>
                <div class="chip">
                    <span>Model Number</span>
                    <span>G2000</span>
                </div>
                <div class="chip">
                    <span>Style</span>
                    <span>Headband</span>
                </div>
                <div class="chip">
                    <span>Communication</span>
                    <span>Wired</span>
                </div>
                <div class="chip">
                    <span>Connectors</span>
                    <span>3.5mm stereo + USB (for LED lights)</span>
                </div>
                <div class="chip">
                    <span>Vocalism Principle</span>
                    <span>Hybrid technology</span>
                </div>
                <div class="chip">
                    <span>Control Button</span>
                    <span>Yes</span>
                </div>
                <div class="chip">
                    <span>Volume Control</span>
                    <span>Yes</span>
                </div>
                <div class="chip">
                    <span>Active Noise-Cancellation</span>
                    <span>Yes</span>
                </div>
                <div class="chip">
                    <span>Microphone</span>
                    <span>Yes (Built-in with glowing LED light)</span>
                </div>
            </div>
        </section>
        <section id="superior-sound-quality">
            <div class="reversed feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">SUPERIOR SOUND QUALITY</h1>
                    <span class="feature-text">
                        The G2000 uses high-precision 50mm neodymium drivers
                        that provide a vivid sound field and excellent sound
                        clarity. Perfect for gaming, movies, and music.
                    </span>
                </div>
            </div>
        </section>
        <section id="comfortable-for-long-sessions">
            <div class="feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">
                        COMFORTABLE FOR LONG SESSIONS
                    </h1>
                    <span class="feature-text">
                        Skin-friendly leather material and super-soft over-ear
                        pads ensure comfort even during extended gaming
                        sessions.
                    </span>
                </div>
            </div>
        </section>
        <section id="ambient-noise-isolation">
            <div class="reversed feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">AMBIENT NOISE ISOLATION</h1>
                    <span class="feature-text">
                        Block out distractions with effective ambient noise
                        isolation so you can focus on the game.
                    </span>
                </div>
            </div>
        </section>
        <section id="led-lighting-for-gaming-atmosphere">
            <div class="feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">
                        LED LIGHTING FOR GAMING ATMOSPHERE
                    </h1>
                    <span class="feature-text">
                        Glaring LED lights on the ear cups and microphone
                        enhance the gaming atmosphere with a cool glow.
                    </span>
                </div>
            </div>
        </section>
        <section id="durability">
            <div class="reversed feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">DURABILITY</h1>
                    <span class="feature-text">
                        Braided wire with strong tensile resistance prevents
                        tangling and ensures long-lasting use.
                    </span>
                </div>
            </div>
        </section>
        <section id="easy-controls">
            <div class="feature-section">
                <div class="flex-grow"></div>
                <div class="w-1/2">
                    <h1 class="feature-header">EASY CONTROLS</h1>
                    <span class="feature-text">
                        Equipped with a rotary volume controller and one-key mic
                        mute for easy access during gameplay.
                    </span>
                </div>
            </div>
        </section>
        <div
            class="fixed inset-0 pointer-events-none select-none -z-[1]"
            data-scroll
            data-scroll-sticky
            data-scroll-target="#scroll-container"
            id="canvas"></div>

        <!-- <div id="canvas" class="fixed inset-0"></div> -->
        <script type="module" defer src="./src/main.ts"></script>
    </body>
</html>