IImmersive Scroll-Driven SaaS Landing Page Implementation

[0xarchit]

🚀 Overview
This PR introduces a high-fidelity, production-grade landing page for PauseCat, built entirely in the website/ directory. Designed with a custom "Morning Mist" aesthetic, the page
uses scroll-driven storytelling to demonstrate the problem of overworking and the elegant solution provided by the app.

The implementation is 100% vanilla (HTML/CSS/JS) to maintain a sub-2.5MB footprint, echoing the optimized nature of the Rust binary.

✨ Key Features

• Narrative Scroll Story: 7 pinned "Acts" that lock to the viewport using CSS Scroll Snapping. Includes scroll-synced text highlighting in the hero section and a custom cat cursor
  for immersive navigation.
• Live PauseCat Simulator: A full sandbox in Act III that lets users try the app's settings live in the browser.
  • Toggle between Media (using default.webm) and 3D Text modes.
  • Proportional UI scaling (Timer, Bubble, and Buttons scale perfectly without overflow).
  • Real-time configuration of opacity, text animations (Float, Rotate, Pulse), and Break Modes (Soft/Hard).
• Intelligent UI/UX Handshakes:
  • Interaction Gateway: A branded loader that requires a "Start Experience" click to unlock the Web Audio API.
  • Directional Sound: Direction-aware audio blips (High-pitch for scrolling down, lower-pitch for up).
  • Time-of-Day Theming: Automatically switches to "Midnight Ink" dark mode if the user visits after 7:00 PM.
  • OS-Detection: Dynamically updates all Download CTAs to show "Windows Only" fallbacks for macOS/Linux users.
• Developer-Centric Details:
  • Live GitHub stats (Stars, Downloads, Version) with a 5-minute local cache.
  • Interactive PowerShell terminal with typewriter animation and a functional "Copy-to-Clipboard" utility.
  • Floating glassmorphic developer testimonials for social proof.

🛠️ Technical Optimizations

• Performance: Integrated IntersectionObserver to throttle/pause CSS animations when sections are out of view, ensuring 60fps scrolling on mobile.
• Accessibility (a11y): Full semantic pass with ARIA roles, labels, and aria-live status updates for the simulator.
• Responsiveness: Robust flex-basis logic (replacing modern min() which fails on some mobile engines) and vertical scaling to ensure no content is clipped on smaller screens.
• Zero Dependencies: No frameworks, no libraries, no external fonts (using Google Fonts API), ensuring lightning-fast load times.

📁 Structure

• website/index.html: The 7-Act narrative structure.
• website/css/: Modular CSS (Morning Mist palette, Simulator, Scroll Story, SaaS Enhancements).
• website/js/: Modular ES6 scripts (GitHub API, Scroll Engine, Audio Design, Typewriter).
• website/assets/: Integrated project assets (logo.svg, default.webm, Cat_Cursor.png).

---

[0xarchit]

changes reviewed