Designing the interface between people and possibility.

// Figma variables map one-to-one to classes
export function ServiceCard({ name, description, price, tag, meta }) {
  return (
    <article className="flex flex-col gap-2 p-4 w-full rounded-lg border">
      <header>
        <h3 className="text-lg font-semibold">{name}</h3>
        <p className="text-muted">{description}</p>
      </header>
      <div className="flex items-center justify-between">
        <span className="text-xl font-semibold">{price}</span>
        <Badge>{tag}</Badge>
      </div>
      <p className="text-sm text-muted">{meta}</p>
    </article>
  );
}