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

# Home

export const ComingSoonTag = () => {
  return <div className="absolute top-[1rem] right-3 bg-black text-white text-[10px] font-semibold px-3 py-[2px] rounded-full shadow-lg">
    </div>;
};

<div className="hero-section">
  <img className="block dark:hidden hero-banner" src="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/hero-background/light.png" alt="Primer Documentation Light Mode Banner" noZoom />

  <img className="hidden dark:block hero-banner" src="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/hero-bac kground/dark.png" alt="Primer Documentation Dark Mode Banner" noZoom />

  <div className="absolute inset-0 z-[1]" />

  <div className="hero-content">
    <h1>Everything you need <br />to build with Primer</h1>
    <p>Learn how to connect, build, and scale with Primer. Our docs offer clear guides and technical references to help you get more from our unified payments infrastructure.</p>
  </div>
</div>

<div className="block dark:hidden features-section">
  <div className="features-grid">
    <Card href="/get-started/overview" title="Get Started" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/get-started/light.png">
      Your first stop - everything you need to start building with Primer.
    </Card>

    <Card title="Connections" href="/connections/payment-methods/overview" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/connections/light.png">
      Plug into your favorite tools and start building powerful flows.
    </Card>

    <Card title="Changelogs" href="/changelogs/api-changelog" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/changelog/light.png">
      See what's new, what's better, and what's coming next.
    </Card>

    <Card href="/api-reference" title="API Reference" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/api-reference/light.png">
      All the endpoints and payloads you need to build with Primer.
    </Card>

    <Card title="SDK Reference" href="/sdk" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/sdk-reference/light.png">
      Add our Checkout SDKs and bring your integration to life with just a few lines of code.
    </Card>

    <Card href="/concepts/overview" title="Primer Concepts" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/primer-concepts/light.png">
      Learn the key concepts that power our platform.
    </Card>
  </div>
</div>

<div className="hidden dark:block features-section">
  <div className="features-grid">
    <Card href="/get-started/overview" title="Get Started" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/get-started/dark.png">
      Your first stop - everything you need to start building with Primer.
    </Card>

    <Card title="Connections" href="/connections/payment-methods/overview" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/connections/dark.png">
      Plug into your favorite tools and start building powerful flows.
    </Card>

    <Card title="Changelogs" href="/changelogs/api-changelog" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/changelog/dark.png">
      See what's new, what's better, and what's coming next.
    </Card>

    <Card href="/api-reference" title="API Reference" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/api-reference/dark.png">
      All the endpoints and payloads you need to build with Primer.
    </Card>

    <Card title="SDK Reference" href="/sdk" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/sdk-reference/dark.png">
      Add our Checkout SDKs and bring your integration to life with just a few lines of code.
    </Card>

    <Card href="/concepts/overview" title="Primer Concepts" img="https://goat-assets.production.core.primer.io/marketing/external-docs/overview-pages/homepage/primer-concepts/dark.png">
      Learn the key concepts that power our platform.
    </Card>
  </div>
</div>