import { Quote, Star } from "lucide-react";
import { Avatar, Card } from "@sisyphos-ui/react";

const TESTIMONIALS = [
  {
    quote: "Sisyphos UI is the first design system we didn't have to wrestle into shape.",
    name: "Maya Okonkwo",
    role: "Staff engineer",
    company: "Lattice",
    rating: 5,
  },
  {
    quote: "We rewrote our Angular dashboard with the angular binding and didn't change a single CSS rule.",
    name: "Daniel Vega",
    role: "Tech lead",
    company: "Tribely",
    rating: 5,
  },
];

export function Testimonials() {
  return (
    <section className="bg-zinc-50 px-6 py-24">
      <div className="mx-auto max-w-2xl text-center">
        <span className="text-xs font-semibold uppercase tracking-widest text-orange-600">
          Loved by teams
        </span>
        <h2 className="mt-5 text-balance text-4xl font-bold tracking-tight">
          They moved fast. So can you.
        </h2>
        <p className="mt-5 text-zinc-600">
          A handful of teams who shipped with Sisyphos UI from day one.
        </p>
      </div>

      <ul className="mx-auto mt-20 grid max-w-5xl grid-cols-1 gap-4 md:grid-cols-2">
        {TESTIMONIALS.map((t) => (
          <li key={t.name}>
            <Card variant="outlined" className="h-full">
              <Card.Body>
                <Quote className="size-7 text-orange-300" strokeWidth={1.75} />
                <div className="mt-3 flex items-center gap-0.5">
                  {Array.from({ length: 5 }, (_, i) => (
                    <Star
                      key={i}
                      className={i < t.rating ? "size-4 fill-amber-400 text-amber-400" : "size-4 text-zinc-200"}
                    />
                  ))}
                </div>
                <p className="mt-4">"{t.quote}"</p>

                <div className="mt-6 flex items-center gap-3 border-t pt-5">
                  <Avatar size="md" color="primary" name={t.name} />
                  <div>
                    <div className="text-sm font-semibold">{t.name}</div>
                    <div className="text-xs text-zinc-500">{t.role} · {t.company}</div>
                  </div>
                </div>
              </Card.Body>
            </Card>
          </li>
        ))}
      </ul>
    </section>
  );
}
Components used

Used in templates
