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

# Welcome to Flex

> Accept HSA/FSA payments with ease

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

<div className="relative w-full flex items-center justify-center" style={{ height: '26rem', overflow: 'hidden', marginLeft: 'auto', marginRight: 'auto' }}>
  <div className="relative w-full h-full">
    <div className="absolute inset-0 dark:hidden" style={{height: '26rem', width: '100%', backgroundColor: '#F0F0F0'}} />

    <div className="absolute inset-0 hidden dark:block" style={{height: '26rem', width: '100%', backgroundColor: '#1E1E1E'}} />
  </div>

  <div style={{ position: 'absolute', textAlign: 'center', maxWidth: '1500px', top: '8rem', left: 0, right: 0, margin: '0 auto' }}>
    <div
      className="text-gray-900 dark:text-white"
      style={{
   fontWeight: '700',
   fontSize: '3rem',
  }}
    >
      Flex HSA/FSA Documentation
    </div>

    <p className="mt-4 text-gray-900 dark:text-white">Learn how to get started with Flex HSA/FSA payments.</p>

    <div className="flex items-center justify-center" style={{ maxWidth: '800px', margin: '0 auto' }}>
      <button
        type="button"
        className="hidden w-full lg:flex items-center justify-center text-sm leading-6 rounded-full py-4 pl-4 pr-4 text-gray-500 bg-white hover:border-primary dark:hover:border-primary shadow-xl"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    margin: '2rem auto 0',
    width: '550px'
  }}
        onClick={openSearch}
      >
        <div className="relative z-10 flex items-center w-full">
          <svg
            className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:hover:bg-white/70"
            style={{
        marginRight: '1rem',
        maskImage: 'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
        maskRepeat: 'no-repeat',
        maskPosition: 'center center',
      }}
          />

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

<div
  style={{marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto', marginTop: '3rem',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem', paddingBottom: '6rem' }}
>
  <h2 className="text-gray-900 dark:text-gray-200 text-center" style={{marginTop: '16px' ,fontSize: '24px', marginBottom: '16px',fontWeight:'500'}}>Let's get started</h2>

  <CardGroup cols={2}>
    <Card title="Developer Guides" href="/developer-guides/introduction" icon="rocket" iconType="regular">
      Complete guides for integrating HSA/FSA payments with Flex.
    </Card>

    <Card title="API Reference" href="/api-reference/introduction" icon="code" iconType="regular">
      Comprehensive API reference for developers using Flex.
    </Card>

    <Card title="Flex MCP" href="/developer-guides/integration/mcp/overview" icon="wand-sparkles" iconType="regular">
      Connect Claude, Cursor, and other AI assistants to your Flex account.
    </Card>

    <Card title="Marketing" href="/merchant-success/introduction" icon="sparkles" iconType="regular">
      Resources and assets to help promote Flex HSA/FSA payments.
    </Card>

    <Card title="Changelog" href="/changelog" icon="zap" iconType="regular">
      Latest updates and improvements to Flex.
    </Card>
  </CardGroup>
</div>