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

# begin

<div className="mx-auto max-w-7xl px-4 pb-16 pt-8 sm:px-6 sm:pb-20 sm:pt-12 lg:px-8">
  <div className="relative overflow-hidden rounded-3xl border border-zinc-200/90 bg-gradient-to-br from-white via-zinc-50 to-zinc-100 px-8 py-14 shadow-sm shadow-zinc-900/5 dark:border-white/[0.08] dark:from-zinc-950 dark:via-zinc-900 dark:to-black dark:shadow-[0_0_0_1px_rgba(255,255,255,0.04)_inset] dark:shadow-none sm:px-12 sm:py-16">
    <div aria-hidden="true" className="pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full bg-[#F26541]/18 blur-3xl sm:h-72 sm:w-72 dark:bg-[#F26541]/25" />

    <div aria-hidden="true" className="pointer-events-none absolute -bottom-28 -right-16 h-64 w-64 rounded-full bg-[#F26541]/10 blur-3xl dark:bg-[#F26541]/12" />

    <div aria-hidden="true" className="absolute inset-0 bg-gradient-to-br from-white/80 via-transparent to-[#F26541]/[0.06] dark:hidden" />

    <div aria-hidden="true" className="absolute inset-0 hidden bg-[linear-gradient(160deg,rgba(10,10,10,0.97)_0%,rgba(23,23,23,0.98)_48%,rgba(10,10,10,0.97)_100%)] dark:block" />

    <div className="relative flex flex-col items-center justify-center gap-8 text-center">
      <div className="flex dark:block hidden h-[4.5rem] w-[4.5rem] items-center justify-center rounded-2xl border border-[#F26541]/35 bg-gradient-to-br from-[#F26541]/12 via-white to-zinc-100 p-4 shadow-md shadow-zinc-900/10 ring-1 ring-zinc-200/80 dark:from-[#F26541]/20 dark:via-zinc-900/90 dark:to-zinc-950 dark:shadow-lg dark:shadow-black/50 dark:ring-white/[0.06]" />

      <div className="flex dark:hidden block h-[4.5rem] w-[4.5rem] items-center justify-center rounded-2xl border border-[#F26541]/35 bg-gradient-to-br from-[#F26541]/12 via-white to-zinc-100 p-4 shadow-md shadow-zinc-900/10 ring-1 ring-zinc-200/80 dark:from-[#F26541]/20 dark:via-zinc-900/90 dark:to-zinc-950 dark:shadow-lg dark:shadow-black/50 dark:ring-white/[0.06]" />

      <div className="max-w-2xl space-y-4">
        <h1 className="text-balance text-3xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-4xl md:text-5xl">
          Welcome to Clicks.
        </h1>

        <p className="text-pretty text-lg leading-relaxed text-zinc-600 dark:text-zinc-400 sm:text-xl">
          Let's get started.\
          Choose your phone model below for setup tips, shortcuts, and how-tos tailored to your device.
        </p>
      </div>
    </div>
  </div>

  <div className="mt-14 sm:mt-16">
    <p className="mb-8 text-center text-xs font-semibold uppercase tracking-[0.22em] text-[#d94d2e] dark:text-[#F26541] sm:text-sm">
      Choose your phone
    </p>

    <div className="custom-card">
      <Columns cols={3}>
        <Card title="Getting Started — iPhone" href="/not-a-part-of-google-sheet/iphone-get-started" img="https://cdn.prod.website-files.com/66f575e72f06b9820f448d43/679b78354b721c78171aa2b7_16-series-selector.avif">
          ## Clicks for iPhone

          Learn how to use Clicks for iPhone.
        </Card>

        <Card title="Getting Started — Razr" href="/not-a-part-of-google-sheet/razr-get-started" img="https://cdn.prod.website-files.com/66f575e72f06b9820f448d43/682471f94fbcb432469991e3_razr-support-card.avif">
          ## Clicks for Razr

          Learn how to use Clicks for Razr.
        </Card>

        <Card title="Getting Started — Pixel" href="/not-a-part-of-google-sheet/pixel-get-started" img="https://cdn.prod.website-files.com/66f575e72f06b9820f448d43/681496db7e6080362fde9abb_pixel-get-started-card.avif">
          ## Clicks for Pixel

          Learn how to use Clicks for Pixel.
        </Card>
      </Columns>
    </div>
  </div>
</div>