29 lines
820 B
TypeScript
29 lines
820 B
TypeScript
import { motion } from 'framer-motion';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface FloatingCardProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export default function FloatingCard({ children, className = '', delay = 0, style }: FloatingCardProps) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.85 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay }}
|
|
className={`bg-white rounded-2xl border border-[#E5E7EB] shadow-[0_8px_32px_rgba(0,0,0,0.12)] ${className}`}
|
|
style={style}
|
|
>
|
|
<motion.div
|
|
animate={{ y: [0, -8, 0] }}
|
|
transition={{ duration: 3.5, repeat: Infinity, ease: 'easeInOut', delay }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|