Components
Loading preview...
Draggable Testimonial Cards with Glassmorphism
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/testimonial-cardsimport { TestimonialCard } from "@/components/ui/testimonial-cards";
import { useState } from "react";
const testimonials = [
{
id: 1,
testimonial: "I feel like I've learned as much from X as I did completing my masters. It's the first thing I read every morning.",
author: "Jenn F. - Marketing Director @ Square"
},
{
id: 2,
testimonial: "My boss thinks I know what I'm doing. Honestly, I just read this newsletter.",
author: "Adrian Y. - Product Marketing @ Meta"
},
{
id: 3,
testimonial: "Can not believe this is free. If X was $5,000 a month, it would be worth every penny. I plan to name my next child after X.",
author: "Devin R. - Growth Marketing Lead @ OpenAI"
}
];
function ShuffleCards() {
const [positions, setPositions] = useState(["front", "middle", "back"]);
const handleShuffle = () => {
const newPositions = [...positions];
newPositions.unshift(newPositions.pop());
setPositions(newPositions);
};
return (
<div className="grid place-content-center overflow-hidden bg-slate-900 px-8 py-24 text-slate-50 min-h-screen h-full w-full">
<div className="relative -ml-[100px] h-[450px] w-[350px] md:-ml-[175px]">
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={testimonial.id}
{...testimonial}
handleShuffle={handleShuffle}
position={positions[index]}
/>
))}
</div>
</div>
);
}
export { ShuffleCards }