Card

import { Card } from "@/ui";

export default function CardBasicDemo() {
  return (
    <Card className="w-full max-w-sm p-6">
      <h3 className="text-lg font-semibold">Litefy Card</h3>
      <p className="text-muted-foreground mt-2 text-sm">
        A glassmorphic surface with subtle border, soft shadow and a glow that
        fades in on hover.
      </p>
      <div className="mt-4 flex gap-2">
        <button
          type="button"
          className="rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground"
        >
          Action
        </button>
        <button type="button" className="rounded-md border px-3 py-1.5 text-sm">
          Cancel
        </button>
      </div>
    </Card>
  );
}

import { Card } from "@/ui";

export default function CardGroupDemo() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      <Card className="p-5">
        <div className="text-muted-foreground text-xs uppercase tracking-wider">
          Revenue
        </div>
        <div className="mt-2 text-2xl font-semibold">$12,480</div>
        <div className="text-muted-foreground mt-1 text-xs">
          +12.4% from last week
        </div>
      </Card>
      <Card className="p-5">
        <div className="text-muted-foreground text-xs uppercase tracking-wider">
          Active users
        </div>
        <div className="mt-2 text-2xl font-semibold">3,219</div>
        <div className="text-muted-foreground mt-1 text-xs">
          +5.1% from last week
        </div>
      </Card>
    </div>
  );
}