> ## Documentation Index
> Fetch the complete documentation index at: https://docs.garden.finance/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://mintcdn.com/garden-e60e7dd0/XPXywADb9NcDNBRh/logo/dark.svg?fit=max&auto=format&n=XPXywADb9NcDNBRh&q=85&s=999256e3c07dff814b2b35c20c719188" width="181" height="35" data-path="logo/dark.svg" />

    <img className="w-full block dark:hidden" src="https://mintcdn.com/garden-e60e7dd0/XPXywADb9NcDNBRh/logo/light.svg?fit=max&auto=format&n=XPXywADb9NcDNBRh&q=85&s=cd505087813ca2c17268a74c13bffdb2" width="181" height="35" data-path="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-dark 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/quickstart">
      Dive into our API endpoints.
    </Card>

    <Card title="Examples" icon="grid-round" iconType="solid" href="/developers/guides/cookbook">
      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-7 gap-x-4 max-w-[800px] 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://mintcdn.com/garden-e60e7dd0/yXGsQh1bDIX0r6cd/images/chains/btc.svg?fit=max&auto=format&n=yXGsQh1bDIX0r6cd&q=85&s=1ce67d4ab1f2e2fe547068c82798adb3" noZoom width="4091" height="4092" data-path="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/litecoin">
        <img className="h-6 w-6" src="https://mintcdn.com/garden-e60e7dd0/yXGsQh1bDIX0r6cd/images/chains/litecoin.svg?fit=max&auto=format&n=yXGsQh1bDIX0r6cd&q=85&s=aa219ae846ade8cde580f2f1462b563c" noZoom width="83" height="83" data-path="images/chains/litecoin.svg" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Litecoin</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://mintcdn.com/garden-e60e7dd0/yXGsQh1bDIX0r6cd/images/chains/ethereum.svg?fit=max&auto=format&n=yXGsQh1bDIX0r6cd&q=85&s=20df7bcd6e2e946cf6d0b71414e4aa92" noZoom width="20" height="20" data-path="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/tron">
        <img className="h-6 w-6" src="https://mintcdn.com/garden-e60e7dd0/7O0ffSMZtpPj_e6J/images/chains/tron.png?fit=max&auto=format&n=7O0ffSMZtpPj_e6J&q=85&s=6135198fae504a2dd9ac4bc05f3efe5e" noZoom width="600" height="600" data-path="images/chains/tron.png" />

        <div className="font-semibold text-base text-gray-800 dark:text-white">Tron</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://mintcdn.com/garden-e60e7dd0/NpoTY5cHYX9LGVws/images/chains/solana.png?fit=max&auto=format&n=NpoTY5cHYX9LGVws&q=85&s=b190c72badb29e12c1cbfc5957c51b80" noZoom width="2000" height="2000" data-path="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://mintcdn.com/garden-e60e7dd0/yXGsQh1bDIX0r6cd/images/chains/starknet.svg?fit=max&auto=format&n=yXGsQh1bDIX0r6cd&q=85&s=3a364735cf94f90c623a1c83c135018e" noZoom width="251" height="251" data-path="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://mintcdn.com/garden-e60e7dd0/NpoTY5cHYX9LGVws/images/chains/sui.png?fit=max&auto=format&n=NpoTY5cHYX9LGVws&q=85&s=db4e56e3067e0c51c2c1ebb4562ae527" noZoom width="200" height="200" data-path="images/chains/sui.png" />

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