"use client"; /** * @author: @dorianbaffier * @description: Card Stack * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { motion } from "motion/react"; import { useState } from "react"; import { cn } from "@/lib/utils"; interface Specification { label: string; value: string; } interface Product { id: string; title: string; subtitle: string; image: string; specs: Specification[]; } // Dummy Products Data const products: Product[] = [ { id: "instant-pay", title: "Quick Pay", subtitle: "Instant Transfers", image: "/undraw.svg", specs: [ { label: "Speed", value: "Instant" }, { label: "Security", value: "256-bit" }, { label: "Limit", value: "$50,000" }, { label: "Fee", value: "0.5%" }, ], }, { id: "crypto-pay", title: "Crypto Pay", subtitle: "Web3 Payments", image: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Network", value: "Multi-chain" }, { label: "Gas", value: "Optimized" }, { label: "Support", value: "24/7" }, { label: "Security", value: "Top-tier" }, ], }, { id: "business-pay", title: "Business Pay", subtitle: "Enterprise Solutions", image: "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Volume", value: "Unlimited" }, { label: "API", value: "REST/SDK" }, { label: "Support", value: "Premium" }, { label: "Features", value: "Custom" }, ], }, { id: "global-pay", title: "Global Pay", subtitle: "International Transfers", image: "https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?w=800&auto=format&fit=crop&q=80", specs: [ { label: "Countries", value: "180+" }, { label: "FX Rate", value: "Real-time" }, { label: "Speed", value: "Same-day" }, { label: "Support", value: "Local" }, ], }, ]; interface CardProps { product: Product; index: number; totalCards: number; isExpanded: boolean; } const Card = ({ product, index, totalCards, isExpanded }: CardProps) => { // Calculate center offset based on total cards const centerOffset = (totalCards - 1) * 5; // Initial stacked position - centered with slight overlap const defaultX = index * 10 - centerOffset; const defaultY = index * 2; const defaultRotate = index * 1.5; const defaultScale = 1; // Calculate the total width of expanded cards and center offset const cardWidth = 320; // Width of each card const cardOverlap = 240; // Amount of overlap between cards const totalExpandedWidth = cardWidth + (totalCards - 1) * (cardWidth - cardOverlap); // Total width including overlap const expandedCenterOffset = totalExpandedWidth / 2; // Fanned out position - centered spread with overlap const spreadX = index * (cardWidth - cardOverlap) - expandedCenterOffset + cardWidth / 2; const spreadY = 0; const spreadRotate = index * 5 - (totalCards - 1) * 2.5; // Increased rotation for better visual effect const spreadScale = 1; return ( {/* Inner Card */}

{/* Specs Grid moved to top */}

{spec.value}
{spec.label}

{product.title}

{product.subtitle}

Experience the iconic design that revolutionized technology

); }; interface CardStackProps { className?: string; } export default function CardStackExample({ className }: CardStackProps) { const [isExpanded, setIsExpanded] = useState(false); const handleToggle = () => setIsExpanded(!isExpanded); return ( ); }

Stack

Instalação

Dependências