> ## Documentation Index
> Fetch the complete documentation index at: https://garden-e60e7dd0-chore-update-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

export function openSearch() {
  document.getElementById("search-bar-entry").click();
}

<div className="w-full h-96 px-4 flex flex-col items-center justify-center bg-[#e4ebf2] dark:bg-white/5 dark:text-white">
  <div className="w-full max-w-[400px] sm:max-w-[600px]">
    <img className="w-full hidden dark:block" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/logo/dark.svg" />

    <img className="w-full block dark:hidden" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/logo/light.svg" />
  </div>

  <div className="text-xl mt-2">Swap Bitcoin cross-chain in minutes.</div>

  <div className="flex items-center w-full max-w-[450px] border border-white/10 ring-1 ring-gray-400/20 rounded-lg mt-10 px-4 py-2" onClick={openSearch}>
    Ask me anything...
  </div>

  <a className="mt-6" href="/home/about">
    <div className="inline-flex bg-primary text-white rounded-full px-4 py-1.5 hover:opacity-[0.9]">
      Get started →
    </div>
  </a>
</div>

<div className="max-w-8xl mx-auto my-24 px-4 lg:px-8">
  <div className="font-semibold text-2xl text-center text-gray-800 dark:text-white mb-2">
    Start building
  </div>

  <div className="text-lg text-center mb-4">
    Everything you need to integrate Garden into your application.
  </div>

  <CardGroup cols={3}>
    <Card title="SDK Quickstart" icon="book-open" href="/developers/sdk/react/quickstart">
      Bring Bitcoin to your app in 30 minutes.
    </Card>

    <Card title="API Reference" icon="code-simple" href="/api-reference">
      Dive into our API endpoints.
    </Card>

    <Card title="Examples" icon="grid-round" iconType="solid" href="/developers/guides">
      Hands-on examples of Garden integration.
    </Card>
  </CardGroup>

  <div className="font-semibold text-2xl text-center text-gray-800 dark:text-white mt-20 mb-4">
    Read the contracts
  </div>

  <div className="text-lg text-center mb-4">
    Dive into the atomic swapping contracts powering Garden.
  </div>

  <div className="grid sm:grid-cols-5 gap-x-4 max-w-[600px] mx-auto">
    <a className="my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <a className="flex flex-col items-center gap-2 px-6 py-4" href="/contracts/bitcoin">
        <img className="h-6 w-6" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/images/chains/btc.svg" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Bitcoin</div>
      </a>
    </a>

    <a className="my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <a className="flex flex-col items-center gap-2 px-6 py-4" href="/contracts/evm">
        <img className="h-6 w-6" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/images/chains/ethereum.svg" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">EVM</div>
      </a>
    </a>

    <a className="my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <a className="flex flex-col items-center gap-2 px-6 py-4" href="/contracts/solana">
        <img className="h-6 w-6" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/images/chains/solana.png" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Solana</div>
      </a>
    </a>

    <a className="my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <a className="flex flex-col items-center gap-2 px-6 py-4" href="/contracts/starknet">
        <img className="h-6 w-6" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/images/chains/starknet.svg" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Starknet</div>
      </a>
    </a>

    <a className="my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <a className="flex flex-col items-center gap-2 px-6 py-4" href="/contracts/sui">
        <img className="h-6 w-6" src="https://mintlify.s3.us-west-1.amazonaws.com/garden-e60e7dd0-chore-update-preview/images/chains/sui.png" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Sui</div>
      </a>
    </a>
  </div>
</div>