<template>
  <div class="flex min-w-0 flex-1 flex-col">
    <header class="flex h-14 items-center border-b border-border px-4 md:hidden">
      <p class="font-medium">
        Clerk
      </p>
    </header>
    <div class="mx-auto flex w-full max-w-2xl flex-1 flex-col justify-center px-4 py-10">
      <div class="text-center">
        <p class="mx-auto flex size-10 items-center justify-center rounded-full bg-muted">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" /><path d="M20 2v4" /><path d="M22 4h-4" /><circle cx="4" cy="20" r="2" /></svg>
        </p>
        <h2 class="mt-4 text-3xl font-semibold tracking-tight">
          What should we look at?
        </h2>
        <p class="mt-2 text-muted-foreground">
          Clerk can read the open month. Start with one of these, or write your own.
        </p>
      </div>
      <div class="mt-8 grid gap-3 sm:grid-cols-2">
        <a href="#invoices" class="rounded-xl border border-border p-4 hover:bg-muted">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z" /><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8" /><path d="M12 17.5v-11" /></svg>
          <p class="mt-3 font-medium">
            Unpaid invoices
          </p>
          <p class="mt-1 text-muted-foreground">
            Who still owes, and when.
          </p>
        </a>
        <a href="#close" class="rounded-xl border border-border p-4 hover:bg-muted">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" /><path d="M20 2v4" /><path d="M22 4h-4" /><circle cx="4" cy="20" r="2" /></svg>
          <p class="mt-3 font-medium">
            Ready to lock?
          </p>
          <p class="mt-1 text-muted-foreground">
            What is still open in October.
          </p>
        </a>
        <a href="#team" class="rounded-xl border border-border p-4 hover:bg-muted">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><path d="M16 3.128a4 4 0 0 1 0 7.744" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><circle cx="9" cy="7" r="4" /></svg>
          <p class="mt-3 font-medium">
            Who is on duty
          </p>
          <p class="mt-1 text-muted-foreground">
            The desk for today.
          </p>
        </a>
        <a href="#note" class="rounded-xl border border-border p-4 hover:bg-muted">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="M13 21h8" /><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /></svg>
          <p class="mt-3 font-medium">
            Draft a note
          </p>
          <p class="mt-1 text-muted-foreground">
            A short chase for Harbor.
          </p>
        </a>
      </div>
      <form @submit.prevent class="mt-8">
        <div class="flex items-end gap-2 rounded-2xl border border-border bg-card p-2 shadow-sm">
          <label for="clerk-start" class="sr-only">
            Message Clerk
          </label>
          <textarea id="clerk-start" rows="2" placeholder="Ask about the month" class="w-full resize-none bg-transparent px-2 py-1.5 outline-none" />
          <button type="submit" class="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-foreground text-background">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4" aria-hidden="true"><path d="m5 12 7-7 7 7" /><path d="M12 19V5" /></svg>
            <span class="sr-only">
              Send
            </span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>
New chat

What should we look at?

More in Messaging
