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

# Home

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

<div className="relative w-full flex items-center justify-center" style={{ height: '26rem', overflow: 'hidden'}}>
  <div className="absolute inset-0 z-0 flex items-center bg-matrix-dark mix-blend-normal">
    <div style={{ height: '100%', width: '100%', maxHeight: '465px' }} />
  </div>

  <div className="relative z-10" style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-white dark:text-gray-200"
      style={{
   fontWeight: '600',
   fontSize: '42px',
   margin: '0',
   marginBottom: '1.5rem'
  }}
    >
      Build with Sequence
    </div>

    <p
      className="text-gray-200 dark:text-gray-200"
      style={{
    margin: '0 auto',
    marginBottom: '2rem',
    fontWeight: '500',
    fontSize: '24px',
    maxWidth: '42rem',
    textAlign: 'center'
  }}
    >
      The complete open-source web3 development platform for chains, games, and apps.
    </p>

    <div className="flex items-center justify-center">
      <button
        type="button"
        className="hidden w-full lg:flex items-center text-sm leading-6 rounded-lg py-1.5 pl-2.5 pr-3 shadow-sm text-gray-400 dark:text-white/50 bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:ring-1 dark:hover:brightness-[1.25] ring-1 ring-gray-400/20 hover:ring-gray-600/25 dark:ring-gray-600/30 dark:hover:ring-gray-500/30 focus:outline-primary"
        id="home-search-entry"
        style={{
    maxWidth: '28rem',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-gray-500 hover:bg-gray-600 dark:bg-white/50 dark:hover:bg-white/70"
          style={{
    marginRight: '0.5rem',
     maskImage:
       'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
     maskRepeat: 'no-repeat',
     maskPosition: 'center center',
    }}
        />

        Search or ask
      </button>
    </div>
  </div>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <h1 className="text-center text-white dark:text-gray-200 text-4xl font-bold mb-8" style={{ fontSize: '1.5rem', marginTop: '6rem', marginBottom: '2.5rem' }}>
    Dive into the Sequence Platform
  </h1>

  <div className="not-prose grid gap-x-4 sm:grid-cols-3">
    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/solutions/getting-started">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/play.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Get Started</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Create a project and get your API keys through Sequence Builder - our developer portal.</p>
          </div>
        </div>
      </div>
    </a>

    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="https://blueprints.sequence-demos.xyz/">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/wrench.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Sequence Blueprints</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Explore the Sequence platform through an interactive demo.</p>
          </div>
        </div>
      </div>
    </a>

    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/sdk/overview">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/code-simple.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Sequence SDKs</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Build with nearly any framework with our dedicated SDKs for React, Unity, Unreal, Typescript, Go, or Mobile.</p>
          </div>
        </div>
      </div>
    </a>

    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/api-references/overview">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/book-open.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">API References</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Comprehensive documentation for all Sequence APIs including analytics, indexer, metadata, and more.</p>
          </div>
        </div>
      </div>
    </a>

    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/guides/guide-overview">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/toolbox.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Developer Resources</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Tools, guides, and boilerplates for developers.</p>
          </div>
        </div>
      </div>
    </a>

    <a className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light" href="/support">
      <div className="px-6 py-5">
        <div className="h-6 w-6 fill-gray-800 dark:fill-gray-100 text-gray-800 dark:text-gray-100">
          <svg className="h-6 w-6 bg-primary dark:bg-primary-light" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/regular/headset.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
        </div>

        <div>
          <h2 className="font-semibold text-base text-gray-800 dark:text-white mt-4">Support & Community</h2>

          <div className="mt-1 font-normal text-sm leading-6 text-gray-600 dark:text-gray-400">
            <p>Join our community and get help when you need it.</p>
          </div>
        </div>
      </div>
    </a>
  </div>

  <div className="flex justify-center mt-12 mb-4">
    <a href="https://github.com/0xsequence" target="_blank" rel="noopener noreferrer" className="group inline-flex items-center justify-center w-12 h-12 rounded-full bg-white dark:bg-background-dark transition-all hover:scale-110 hover:border-primary dark:hover:border-primary-light">
      <svg className="h-6 w-6 bg-primary dark:bg-primary-light transition-colors group-hover:bg-white" style={{maskImage: 'url("https://mintlify.b-cdn.net/v6.6.0/brands/github.svg")', maskRepeat: 'no-repeat', maskPosition: 'center center'}} />
    </a>
  </div>
</div>