"use client"; import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; import { useState } from "react"; const Card = ({ className, image, children, }: { className?: string; image?: string; children?: React.ReactNode; }) => { return (

{image && (

)} {children && (

{children}

)}

); }; interface CardData { image: string; title: string; description: string; } const StackedCardsInteraction = ({ cards, spreadDistance = 40, rotationAngle = 5, animationDelay = 0.1, }: { cards: CardData[]; spreadDistance?: number; rotationAngle?: number; animationDelay?: number; }) => { const [isHovering, setIsHovering] = useState(false); // Limit to maximum of 3 cards const limitedCards = cards.slice(0, 3); return (

{limitedCards.map((card, index) => { const isFirst = index === 0; let xOffset = 0; let rotation = 0; if (limitedCards.length > 1) { // First card stays in place // Second card goes left // Third card goes right if (index === 1) { xOffset = -spreadDistance; rotation = -rotationAngle; } else if (index === 2) { xOffset = spreadDistance; rotation = rotationAngle; } } return ( setIsHovering(true), onHoverEnd: () => setIsHovering(false), })} >

{card.title}

{card.description}

); })}

); }; export { StackedCardsInteraction, Card };