"use client"; import * as React from "react"; import { motion } from "framer-motion"; function TestimonialCard({ handleShuffle, testimonial, position, id, author, image, }: { handleShuffle: () => void; testimonial: string; position: string; id: number; author: string; image: string; }) { const dragRef = React.useRef(0); const isFront = position === "front"; return ( { dragRef.current = "clientX" in e ? e.clientX : 0; }} onDragEnd={(e) => { const clientX = "clientX" in e ? e.clientX : 0; if (dragRef.current - clientX > 150) { handleShuffle(); } dragRef.current = 0; }} transition={{ duration: 0.35 }} className={`absolute left-0 top-0 grid h-[450px] w-[350px] select-none place-content-center rounded-xl border border-white/[0.04] bg-neutral-900/40 p-8 shadow-2xl shadow-emerald-500/[0.02] backdrop-blur-lg ${ isFront ? "cursor-grab active:cursor-grabbing" : "" }`} >

“{testimonial}” {author}

); } const testimonials = [ { id: 1, testimonial: "This completely changed how we approach our go-to-market strategy. The insights cut our research time by 60% while delivering sharper results.", author: "Sophie L. - VP of Growth @ Vercel", image: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&h=400&fit=crop&crop=faces&q=100", }, { id: 2, testimonial: "I was skeptical at first, but within two weeks it had already paid for itself. The signal-to-noise ratio is unmatched.", author: "Marcus T. - Product Director @ Supabase", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces&q=100", }, { id: 3, testimonial: "Our entire leadership team reads this. It's become part of our weekly sync — we literally plan roadmaps around the insights here.", author: "Aisha R. - Head of Product @ Linear", image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces&q=100", }, ]; function ShuffleCards() { const [positions, setPositions] = React.useState(["front", "middle", "back"]); const handleShuffle = React.useCallback(() => { setPositions((prev) => { const next = [...prev]; next.unshift(next.pop()!); return next; }); }, []); return (

{testimonials.map((testimonial, index) => ( ))}

); } export { ShuffleCards };

Shuffle Testimonial Cards