Role Flip Cards

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>
  );
}