fix: enhance mobile navigation and adjust hero section layout for better responsiveness

Author: darmie

website/index.html

@@ -25,10 +25,14 @@
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
       min-height: 100vh;
-      overflow-x: hidden;
+      overflow: hidden;
       color: var(--text-primary);
     }
 
+    @media (max-width: 768px) {
+      body { overflow-y: auto; }
+    }
+
     /* ── Navigation ── */
     nav {
       position: fixed;
@@ -345,10 +349,18 @@
       }
 
       .hero-visual {
-        min-height: 400px;
+        min-height: 350px;
+        max-height: 400px;
         order: -1;
       }
 
+      #three-canvas {
+        top: -15%;
+        left: -15%;
+        width: 130%;
+        height: 130%;
+      }
+
       .hero-features {
         justify-content: center;
       }
@@ -364,28 +376,122 @@
     }
 
     @media (max-width: 768px) {
-      nav { padding: 0 1.25rem; }
+      nav {
+        padding: 0 1.25rem;
+      }
 
-      .nav-links { display: none; }
+      .nav-links {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 72px;
+        left: 0;
+        right: 0;
+        background: var(--bg-top);
+        gap: 0;
+        padding: 0.5rem 1.25rem 1rem;
+        border-bottom: 1px solid var(--border);
+        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-8px);
+        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
+        pointer-events: none;
+      }
 
-      .nav-toggle { display: block; }
+      .nav-links.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
 
-      .hero-features {
-        flex-direction: column;
-        gap: 1rem;
+      .nav-links li {
+        width: 100%;
+      }
+
+      .nav-links a {
+        display: block;
+        padding: 0.75rem 0;
+        font-size: 1rem;
+        border-bottom: 1px solid var(--border);
+      }
+
+      .nav-links li:last-child a {
+        border-bottom: none;
+      }
+
+      .nav-cta {
+        display: inline-flex !important;
         align-items: center;
+        gap: 0.4rem;
+        width: fit-content;
+        margin-top: 0.5rem;
+        padding: 0.75rem 1rem !important;
+      }
+
+      .nav-toggle.open span:nth-child(1) {
+        transform: rotate(45deg) translate(4px, 4px);
+      }
+      .nav-toggle.open span:nth-child(2) {
+        opacity: 0;
+      }
+      .nav-toggle.open span:nth-child(3) {
+        transform: rotate(-45deg) translate(4px, -4px);
+      }
+
+      .nav-toggle { display: block; }
+
+      .hero {
+        padding-top: 60px;
+        padding-bottom: 2rem;
       }
 
       .hero-visual {
-        min-height: 320px;
+        min-height: 240px;
+        max-height: 280px;
+        aspect-ratio: auto;
+      }
+
+      #three-canvas {
+        top: -10%;
+        left: -10%;
+        width: 120%;
+        height: 120%;
+      }
+
+      .hero-badge { margin-bottom: 1rem; }
+
+      .hero-code { display: none; }
+
+      .hero-title {
+        font-size: 2.4rem;
+        margin-bottom: 1rem;
+      }
+
+      .hero-description {
+        font-size: 0.95rem;
+        margin-bottom: 1.5rem;
       }
 
       .hero-actions {
         flex-direction: column;
         width: 100%;
+        margin-bottom: 2rem;
       }
 
       .btn { width: 100%; justify-content: center; }
+
+      .hero-features {
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 1rem 2rem;
+        justify-content: center;
+        margin-top: 1.5rem;
+        padding-top: 1rem;
+      }
+
+      .hero-feature { align-items: center; }
     }
   </style>
 </head>
@@ -484,6 +590,16 @@ <h1 class="hero-title">
     }
   }
   </script>
+  <script>
+    // ── Mobile nav toggle ──
+    const navToggle = document.querySelector('.nav-toggle');
+    const navLinks = document.querySelector('.nav-links');
+    navToggle.addEventListener('click', () => {
+      navToggle.classList.toggle('open');
+      navLinks.classList.toggle('open');
+    });
+  </script>
+
   <script type="module">
     import * as THREE from 'three';
 
@@ -781,6 +897,39 @@ <h1 class="hero-title">
       isHovering = false;
     });
 
+    // Touch support — tap to explode, tap again or wait to reassemble
+    let touchActive = false;
+    renderer.domElement.addEventListener('touchstart', (e) => {
+      const touch = e.touches[0];
+      const rect = container.getBoundingClientRect();
+      mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
+      mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
+
+      // Check if touch hits the sphere
+      raycaster.setFromCamera(mouse, camera);
+      const hits = raycaster.intersectObject(hitSphere);
+      if (hits.length > 0) {
+        touchActive = !touchActive;
+        isHovering = touchActive;
+        e.preventDefault();
+      }
+    }, { passive: false });
+
+    renderer.domElement.addEventListener('touchmove', (e) => {
+      if (!touchActive) return;
+      const touch = e.touches[0];
+      const rect = container.getBoundingClientRect();
+      if (prevMouseX !== null) {
+        mouseVelX = touch.clientX - prevMouseX;
+      }
+      prevMouseX = touch.clientX;
+      e.preventDefault();
+    }, { passive: false });
+
+    renderer.domElement.addEventListener('touchend', () => {
+      prevMouseX = null;
+    });
+
     function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }
     function easeInOutCubic(t) {
       return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
@@ -791,9 +940,12 @@ <h1 class="hero-title">
       const dt = clock.getDelta();
       const elapsed = clock.getElapsedTime();
 
-      raycaster.setFromCamera(mouse, camera);
-      const hits = raycaster.intersectObject(hitSphere);
-      isHovering = hits.length > 0;
+      // On touch devices, isHovering is toggled by tap; on desktop, by raycasting
+      if (!touchActive) {
+        raycaster.setFromCamera(mouse, camera);
+        const hits = raycaster.intersectObject(hitSphere);
+        isHovering = hits.length > 0;
+      }
 
       if (isHovering) {
         displaceFactor = Math.min(1, displaceFactor + dt * EXPAND_SPEED);