Stack

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Card Stack
6 * @version: 1.1.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion, useReducedMotion } from "motion/react";
14import Image from "next/image";
15import { useState } from "react";
16import { cn } from "@/lib/utils";
17 
18interface Specification {
19  label: string;
20  value: string;
21}
22 
23interface Product {
24  id: string;
25  title: string;
26  subtitle: string;
27  description: string;
28  image: string;
29  specs: Specification[];
30}
31 
32const products: Product[] = [
33  {
34    id: "instant-pay",
35    title: "Quick Pay",
36    subtitle: "Instant Transfers",
37    description:
38      "Move money in seconds with bank-grade security and zero surprises.",
39    image: "/undraw.svg",
40    specs: [
41      { label: "Speed", value: "Instant" },
42      { label: "Security", value: "256-bit" },
43      { label: "Limit", value: "$50,000" },
44      { label: "Fee", value: "0.5%" },
45    ],
46  },
47  {
48    id: "crypto-pay",
49    title: "Crypto Pay",
50    subtitle: "Web3 Payments",
51    description:
52      "Accept crypto across every major chain with optimized gas routing.",
53    image:
54      "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=800&auto=format&fit=crop&q=80",
55    specs: [
56      { label: "Network", value: "Multi-chain" },
57      { label: "Gas", value: "Optimized" },
58      { label: "Support", value: "24/7" },
59      { label: "Security", value: "Top-tier" },
60    ],
61  },
62  {
63    id: "business-pay",
64    title: "Business Pay",
65    subtitle: "Enterprise Solutions",
66    description:
67      "Built for high-volume teams with custom APIs and premium support.",
68    image:
69      "https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?w=800&auto=format&fit=crop&q=80",
70    specs: [
71      { label: "Volume", value: "Unlimited" },
72      { label: "API", value: "REST/SDK" },
73      { label: "Support", value: "Premium" },
74      { label: "Features", value: "Custom" },
75    ],
76  },
77  {
78    id: "global-pay",
79    title: "Global Pay",
80    subtitle: "International Transfers",
81    description:
82      "Send to 180+ countries with real-time FX and same-day settlement.",
83    image:
84      "https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?w=800&auto=format&fit=crop&q=80",
85    specs: [
86      { label: "Countries", value: "180+" },
87      { label: "FX Rate", value: "Real-time" },
88      { label: "Speed", value: "Same-day" },
89// … truncated