Card

import { AwardIcon, FileTextIcon, TargetIcon } from "lucide-react"

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

const cards = [
  {
    title: "Default",
    description: "Hairline border, no shadow.",
    icon: FileTextIcon,
    variant: "default" as const,
  },
  {
    title: "Interactive",
    description: "Gains dropdown elevation on hover.",
    icon: TargetIcon,
    variant: "interactive" as const,
  },
  {
    title: "Tinted",
    description: "Tinted surface with no border.",
    icon: AwardIcon,
    variant: "tinted" as const,
  },
]

export default function CardDemo() {
  return (
    <div className="grid w-full gap-3 sm:grid-cols-3">
      {cards.map(({ title, description, icon: Icon, variant }) => (
        <Card key={title} variant={variant}>
          <CardHeader>
            <Icon className="mb-1 size-7" aria-hidden="true" />
            <CardTitle>{title}</CardTitle>
            <CardDescription>{description}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </div>
  )
}

"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function CardImage() {
  return (
    <Card className="relative mx-auto w-full max-w-sm overflow-hidden pt-0">
      <img
        src="https://avatar.vercel.sh/kickresume"
        alt="Event cover"
        className="aspect-video w-full object-cover brightness-90 grayscale dark:brightness-75"
      />
      <CardHeader>
        <CardAction>
          <Badge variant="secondary">Featured</Badge>
        </CardAction>
        <CardTitle>Resume masterclass</CardTitle>
        <CardDescription>
          A live teardown of real resumes — layout, ATS keywords, and impact
          bullets that get callbacks.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button className="w-full">Reserve your seat</Button>
      </CardFooter>
    </Card>
  )
}