website landing page

apps/website/components/ui/MockupStack.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { motion, useReducedMotion } from 'framer-motion';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 interface MockupStackProps {
   children: ReactNode;
@@ -10,13 +10,68 @@ interface MockupStackProps {
 
 export default function MockupStack({ children, index = 0 }: MockupStackProps) {
   const shouldReduceMotion = useReducedMotion();
+  const [isMounted, setIsMounted] = useState(false);
+  const [isMobile, setIsMobile] = useState(true); // Default to mobile (no animations)
+
+  useEffect(() => {
+    setIsMounted(true);
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
 
   const seed = index * 1337;
   const rotation1 = ((seed * 17) % 80 - 40) / 20;
   const rotation2 = ((seed * 23) % 80 - 40) / 20;
 
+  // On mobile or before mount, render without animations
+  if (!isMounted || isMobile) {
+    return (
+      <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
+        <div
+          className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
+          style={{
+            rotate: rotation1,
+            zIndex: 1,
+            top: '-8px',
+            left: '-8px',
+            right: '-8px',
+            bottom: '-8px',
+            boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
+            opacity: 0.5,
+          }}
+        />
+        
+        <div
+          className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
+          style={{
+            rotate: rotation2,
+            zIndex: 2,
+            top: '-4px',
+            left: '-4px',
+            right: '-4px',
+            bottom: '-4px',
+            boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
+            opacity: 0.7,
+          }}
+        />
+
+        <div
+          className="relative z-10 w-full h-full rounded-lg overflow-hidden"
+          style={{
+            boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  // Desktop: render with animations
   return (
-    <div className="relative w-full h-full" style={{ perspective: '1200px' }}>
+    <div className="relative w-full h-full scale-60 sm:scale-70 md:scale-85 lg:scale-95 max-w-[85vw] mx-auto my-4 sm:my-0" style={{ perspective: '1200px' }}>
       <motion.div
         className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
         style={{