146 lines
4.3 KiB
TypeScript
146 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { ReactNode, useEffect, useState } from 'react';
|
|
|
|
interface MockupStackProps {
|
|
children: ReactNode;
|
|
index?: number;
|
|
}
|
|
|
|
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}deg`,
|
|
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}deg`,
|
|
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 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={{
|
|
rotate: `${rotation1}deg`,
|
|
zIndex: 1,
|
|
top: '-8px',
|
|
left: '-8px',
|
|
right: '-8px',
|
|
bottom: '-8px',
|
|
boxShadow: '0 12px 40px rgba(0,0,0,0.3)',
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.92 }}
|
|
animate={{ opacity: 0.5, scale: 1 }}
|
|
transition={{ duration: 0.3, delay: 0.1 }}
|
|
/>
|
|
|
|
<motion.div
|
|
className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
|
|
style={{
|
|
rotate: `${rotation2}deg`,
|
|
zIndex: 2,
|
|
top: '-4px',
|
|
left: '-4px',
|
|
right: '-4px',
|
|
bottom: '-4px',
|
|
boxShadow: '0 16px 48px rgba(0,0,0,0.35)',
|
|
}}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
animate={{ opacity: 0.7, scale: 1 }}
|
|
transition={{ duration: 0.3, delay: 0.15 }}
|
|
/>
|
|
|
|
<motion.div
|
|
className="relative z-10 w-full h-full rounded-lg overflow-hidden"
|
|
style={{
|
|
boxShadow: '0 20px 60px rgba(0,0,0,0.45)',
|
|
}}
|
|
whileHover={
|
|
shouldReduceMotion
|
|
? {}
|
|
: {
|
|
scale: 1.02,
|
|
rotateY: 3,
|
|
rotateX: -2,
|
|
y: -12,
|
|
transition: {
|
|
type: 'spring',
|
|
stiffness: 200,
|
|
damping: 20,
|
|
},
|
|
}
|
|
}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
>
|
|
<motion.div
|
|
className="absolute inset-0 pointer-events-none rounded-lg"
|
|
whileHover={
|
|
shouldReduceMotion
|
|
? {}
|
|
: {
|
|
boxShadow: '0 0 40px rgba(25, 140, 255, 0.4)',
|
|
transition: { duration: 0.2 },
|
|
}
|
|
}
|
|
/>
|
|
{children}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
} |