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

# Home

<div class="max-w-6xl mx-auto py-8 px-5">
  <div class="flex flex-col md:flex-row gap-6 items-center pt-6 pb-16">
    <div class="flex-1 md:flex-[3]">
      <h1 class="text-5xl font-bold text-gray-900 tracking-tight dark:text-gray-200">Enterprise loyalty.<br />Built for developers.</h1>
      <p class="pt-4">Smile's full-stack tooling enables you to create unique & personalized rewarding experiences that are effortless to manage and maintain.</p>
    </div>

    <div class="flex-1 md:flex-[1] flex justify-center md:justify-end">
      <img src="https://mintcdn.com/smileio/VRZup3pt_A0wJgq4/images/hero-light.svg?fit=max&auto=format&n=VRZup3pt_A0wJgq4&q=85&s=dcbf4279cdd93819e00f4171fa66af37" class="w-full max-w-xs h-auto block dark:hidden" noZoom width="575" height="391" data-path="images/hero-light.svg" />

      <img src="https://mintcdn.com/smileio/VRZup3pt_A0wJgq4/images/hero-dark.svg?fit=max&auto=format&n=VRZup3pt_A0wJgq4&q=85&s=918881497319408a9506d1ca1b05c9f5" class="w-full max-w-xs h-auto hidden dark:block" noZoom width="575" height="391" data-path="images/hero-dark.svg" />
    </div>
  </div>

  <div id="home-cards">
    <Columns cols={4}>
      <Card title="Guides" icon="books" href="/guides/introduction" cta="Get started">
        Learn how to use Smile's developer tooling and resources.
      </Card>

      <Card title="API Reference" icon="globe" href="/api/introduction" cta="Explore docs">
        Deeply integrate loyalty into your backend systems with our REST API.
      </Card>

      <Card title="JavaScript SDK" icon="display-code" href="/js/introduction" cta="Learn more">
        Build fully custom loyalty experiences directly in the browser.
      </Card>

      <Card title="Smile UI" icon="browsers" href="/ui/introduction" cta="Learn more">
        Smile's pre-built and configurable loyalty panel and launcher.
      </Card>
    </Columns>
  </div>
</div>