Card

<.card class="w-[350px]">
  <:header>
    <div class="font-semibold">Create project</div>
    <div class="text-sm text-muted-foreground">
      Deploy your new project in one-click.
    </div>
  </:header>
  <:content>
    <div class="space-y-4">
      <.input label="Name" placeholder="Name of your project" />
      <.input label="Framework" placeholder="Select a framework" />
    </div>
  </:content>
  <:footer class="flex justify-end gap-2">
    <.button variant="outline">Cancel</.button>
    <.button>Deploy</.button>
  </:footer>
</.card>

<.card class="w-[380px]">
  <:header>
    <div class="flex items-center gap-2">
      <.icon name="lucide-bell" class="size-5" />
      <span class="font-semibold">Notifications</span>
    </div>
    <p class="text-sm text-muted-foreground">You have 3 unread messages.</p>
  </:header>
  <:content>
    <div class="space-y-4">
      <div class="flex items-start gap-4">
        <span class="size-2 mt-2 rounded-full bg-primary"></span>
        <div class="space-y-1">
          <p class="text-sm font-medium">Your call has been confirmed.</p>
          <p class="text-xs text-muted-foreground">5 min ago</p>
        </div>
      </div>
      <!-- More notifications... -->
    </div>
  </:content>
  <:footer class="flex">
    <.button class="w-full">Mark all as read</.button>
  </:footer>
</.card>

<.card class="w-[350px]">
  <:content>
    <p class="text-muted-foreground">
      This is a simple card with only content.
    </p>
  </:content>
</.card>

<.card class="w-[180px]">
  <:header>
    <p class="text-sm text-muted-foreground">Total Revenue</p>
  </:header>
  <:content>
    <div class="text-2xl font-bold">$45,231.89</div>
    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
  </:content>
</.card>