Cards that turn on hover, focus or tap: an icon on a faded grid and a title in front, the story on the back.
import { Gauge, Lightbulb, ShieldCheck, Wand2 } from "lucide-react";
import { RoleFlipCards } from "@/components/ui/role-flip-cards";
const settings = {
accent: "#7f72e3",
title: "Feature highlights",
prompt: "How it works",
feature1: "Feature A",
text1: "This feature is not working well, because the C-level never gives us the time to test it properly.",
feature2: "Feature B",
text2: "This feature was never requested by users. It was our CEO's idea, and we apologise to our users.",
feature3: "Feature C",
text3: "This feature was vibe coded and shipped by a designer. Please send help.",
feature4: "Feature D",
text4: "This feature works perfectly. Nobody knows why, so nobody is allowed to touch it.",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="w-full p-6">
<h2 className="mb-8 text-3xl font-medium tracking-tight text-foreground">{s.title}</h2>
<RoleFlipCards
accent={s.accent}
prompt={s.prompt}
items={[
{ title: s.feature1, icon: Gauge, text: s.text1 },
{ title: s.feature2, icon: Lightbulb, text: s.text2 },
{ title: s.feature3, icon: Wand2, text: s.text3 },
{ title: s.feature4, icon: ShieldCheck, text: s.text4 },
]}
/>
</div>
);
}