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

# LI.FI Home Page

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

<div className="relative w-full flex items-center justify-center" style={{ height: '24rem', backgroundColor: '#000000', overflow: 'hidden' }}>
  <div style={{ flex: 'none' }}>
    <img src="https://mintcdn.com/lifi/08FOM1AsMmrVbIEl/images/search_banner.png?fit=max&auto=format&n=08FOM1AsMmrVbIEl&q=85&s=8e06010f23c40e5b99abce37a31e5398" style={{ height: '400px', width: '2000px', pointerEvents: 'none'  }} width="2000" height="400" data-path="images/search_banner.png" />
  </div>

  <div style={{ position: 'absolute', textAlign: 'center' }}>
    <div
      style={{
    color: 'white',
    fontWeight: '400',
    fontSize: '48px',
    margin: '0',
  }}
    >
      LI.FI Documentation
    </div>

    <p
      style={{
    color: 'white',
    fontWeight: '400',
    fontSize: '20px',
    opacity: '0.7',
  }}
    >
      What can we help you build?
    </p>

    <button
      type="button"
      className="mx-auto w-full flex items-center text-sm leading-6 shadow-sm text-gray-400 bg-white ring-1 ring-gray-400/20 focus:outline-primary"
      id="home-search-entry"
      style={{
    maxWidth: '24rem',
    borderRadius: '4px',
    marginTop: '3rem',
    paddingLeft: '0.75rem',
    paddingRight: '0.75rem',
    paddingTop: '0.75rem',
    paddingBottom: '0.75rem',
  }}
      onClick={openSearch}
    >
      <svg
        className="h-4 w-4 ml-1.5 mr-3 flex-none bg-gray-500 hover:bg-gray-600 dark:bg-white/50 dark:hover:bg-white/70"
        style={{
      maskRepeat: 'no-repeat',
      maskPosition: 'center center',
    }}
      />

      Search...
    </button>
  </div>
</div>

<div
  style={{marginTop: '6rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div className="text-center text-2xl font-semibold mb-12" style={{ color: '#5C67FF' }}>
    <span className="dark:text-[#fab6f4]">Choose a topic below</span>
  </div>

  <CardGroup cols={3}>
    <Card title="About" icon="book-open" href="/introduction/introduction">
      About LI.FI
    </Card>

    <Card title="Architecture" icon="code-simple" href="/introduction/lifi-architecture/system-overview">
      Comprehensive details about LI.FI arechitecture
    </Card>

    <Card title="Playground" icon="grid-round" iconType="solid" href="https://playground.li.fi/">
      Hands-on example of LI.FI Widget
    </Card>

    <Card title="Integrations" icon="link-simple" href="/introduction/integrating-lifi/partnership-opportunities">
      A growing number of apps using LI.FI
    </Card>

    <Card title="Tools" icon="wrench" href="/sdk/overview">
      Tooling and SDKs to integrate LI.FI
    </Card>

    <Card title="AI Agents" icon="robot" href="/agents/overview">
      Integration guide for AI agents and LLMs
    </Card>

    <Card title="Composer" icon="wand-magic-sparkles" href="/composer/overview">
      One-click DeFi operations across any chain
    </Card>
  </CardGroup>
</div>