feat: add app download section to landing page and improve hero 3D background responsiveness

src/components/ui/3d/HeroBackground3D.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Suspense, useMemo, useRef } from 'react';
-import { Canvas, useFrame, useLoader } from '@react-three/fiber';
+import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
 import {
   Float,
   ContactShadows,
@@ -85,17 +85,24 @@ function AeroxModel() {
     return clone;
   }, [obj]);
 
+  const { size } = useThree();
+  const isMobile = size.width < 1024;
+  const targetX = isMobile ? 0 : 2.5;
+
   useFrame((state) => {
     if (!group.current) return;
     const t = state.clock.elapsedTime;
     // Continuous turntable so all sides are appreciated.
     group.current.rotation.y = t * 0.4;
     group.current.position.y = Math.sin(t * 1.5) * 0.08;
+    
+    // Smoothly animate position X to be responsive
+    group.current.position.x += (targetX - group.current.position.x) * 0.1;
   });
 
   return (
     <Float speed={1.2} rotationIntensity={0.1} floatIntensity={0.3}>
-      <group ref={group} rotation={[0, -0.5, 0]} position={[2.5, -0.1, -1]}>
+      <group ref={group} rotation={[0, -0.5, 0]} position={[isMobile ? 0 : 2.5, -0.1, -1]}>
         <primitive object={model} />
       </group>
     </Float>