> ## Documentation Index
> Fetch the complete documentation index at: https://docs.clarely.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Welcome

<div className="mx-auto flex w-full max-w-[720px] flex-col gap-12 px-4 py-10 lg:gap-14 lg:py-16">
  <div className="flex flex-col items-center gap-6">
    <div className="flex max-w-[480px] flex-col gap-2 text-center">
      <h1 className="text-2xl font-semibold tracking-tight">
        From quote to paid. Total clarity.
      </h1>

      <p className="text-balance text-base text-gray-600 dark:text-gray-400">
        Find answers, learn the workflow, and get the most out of Clarely.
      </p>
    </div>
  </div>

  <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <a href="/getting-started/your-first-quote" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="file-pen-line" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Send your first quote</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Build a quote, get your client to sign, and move to paid in minutes.
        </span>
      </div>
    </a>

    <a href="/getting-started/pwa-install" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="smartphone" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Install on your phone</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Add Clarely to your home screen for instant access on the job.
        </span>
      </div>
    </a>
  </div>

  <div className="flex flex-col gap-4">
    <h2 className="text-lg font-medium tracking-tight">Explore by topic</h2>

    <Columns cols={2}>
      <Card title="Quotes" icon="file-pen-line" href="/quotes/index">
        Create, send, and get client signatures on scoped quotes.
      </Card>

      <Card title="Jobs" icon="calendar-check" href="/jobs/index">
        Schedule jobs, track status, and manage your team.
      </Card>
    </Columns>

    <Columns cols={2}>
      <Card title="Invoices" icon="receipt" href="/invoices/index">
        Generate invoices, collect payment, and track overdue balances.
      </Card>

      <Card title="Account" icon="settings" href="/account/index">
        Business settings, team members, and billing.
      </Card>
    </Columns>
  </div>
</div>

<div className="mx-auto flex w-full max-w-[720px] flex-col gap-12 px-4 py-10 lg:gap-14 lg:py-16">
  <div className="flex flex-col items-center gap-6">
    <div className="flex max-w-[480px] flex-col gap-2 text-center">
      <h1 className="text-2xl font-semibold tracking-tight">
        From quote to paid. Total clarity.
      </h1>

      <p className="text-balance text-base text-gray-600 dark:text-gray-400">
        Find answers, learn the workflow, and get the most out of Clarely.
      </p>
    </div>
  </div>

  <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <a href="/getting-started/your-first-quote" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="file-pen-line" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Send your first quote</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Build a quote, get your client to sign, and move to paid in minutes.
        </span>
      </div>
    </a>

    <a href="/getting-started/pwa-install" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="smartphone" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Install on your phone</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Add Clarely to your home screen for instant access on the job.
        </span>
      </div>
    </a>
  </div>

  <div className="flex flex-col gap-4">
    <h2 className="text-lg font-medium tracking-tight">Explore by topic</h2>

    <Columns cols={2}>
      <Card title="Quotes" icon="file-pen-line" href="/quotes/index">
        Create, send, and get client signatures on scoped quotes.
      </Card>

      <Card title="Jobs" icon="calendar-check" href="/jobs/index">
        Schedule jobs, track status, and manage your team.
      </Card>
    </Columns>

    <Columns cols={2}>
      <Card title="Invoices" icon="receipt" href="/invoices/index">
        Generate invoices, collect payment, and track overdue balances.
      </Card>

      <Card title="Account" icon="settings" href="/account/index">
        Business settings, team members, and billing.
      </Card>
    </Columns>
  </div>
</div>

<div className="mx-auto flex w-full max-w-[720px] flex-col gap-12 px-4 py-10 lg:gap-14 lg:py-16">
  <div className="flex flex-col items-center gap-6">
    <div className="flex max-w-[480px] flex-col gap-2 text-center">
      <h1 className="text-2xl font-semibold tracking-tight">
        Clarely Help Center
      </h1>

      <p className="text-balance text-base text-gray-600 dark:text-gray-400">
        Everything you need to get from quote to paid.
      </p>
    </div>
  </div>

  <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
    <a href="/getting-started/your-first-quote" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="file-pen-line" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Send your first quote</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Build a quote, get your client to sign, and move to paid in minutes.
        </span>
      </div>
    </a>

    <a href="/getting-started/pwa-install" className="group flex flex-col outline-none">
      <div className="kb-feature-card relative flex h-[170px] items-center justify-center overflow-hidden rounded-2xl ring-1 ring-gray-100 transition group-hover:ring-gray-200 dark:ring-white/[0.08] dark:group-hover:ring-white/15 saturate-50 group-hover:saturate-100">
        <div className="relative flex items-center justify-center">
          <Icon icon="smartphone" size={36} className="!bg-white" />
        </div>
      </div>

      <div className="flex flex-col gap-1 pt-4">
        <span className="text-base font-medium">Install on your phone</span>

        <span className="text-sm leading-5 text-gray-600 dark:text-gray-400">
          Add Clarely to your home screen for instant access on the job.
        </span>
      </div>
    </a>
  </div>

  <div className="flex flex-col gap-4">
    <h2 className="text-lg font-medium tracking-tight">Explore by topic</h2>

    <Columns cols={2}>
      <Card title="Quotes" icon="file-pen-line" href="/quotes/index">
        Create, send, and get client signatures on scoped quotes.
      </Card>

      <Card title="Jobs" icon="calendar-check" href="/jobs/index">
        Schedule jobs, track status, and manage your team.
      </Card>
    </Columns>

    <Columns cols={2}>
      <Card title="Invoices" icon="receipt" href="/invoices/index">
        Generate invoices, collect payment, and track overdue balances.
      </Card>

      <Card title="Account" icon="settings" href="/account/index">
        Business settings, team members, and billing.
      </Card>
    </Columns>
  </div>
</div>