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

# Spire Docs

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

<section className="hero-landing">
  <div className="hero-landing__media" aria-hidden="true">
    <img src="https://mintcdn.com/spire/Fpc2rAFPa-Jycg4_/images/background-spire-docs.png?fit=max&auto=format&n=Fpc2rAFPa-Jycg4_&q=85&s=ebc624a620e62993d3f2a7fa39f8d7a4" alt="" loading="lazy" width="1500" height="500" data-path="images/background-spire-docs.png" />
  </div>

  <div className="hero-landing__content">
    <h1 className="hero-title">Welcome to Spire Docs</h1>
    <p className="hero-subtitle">How can we help you today?</p>

    <div className="hero-search hidden lg:block">
      <button type="button" className="hero-search__button" id="home-search-entry" onClick={openSearch} aria-label="Open search">
        <svg
          className="hero-search__icon bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
        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>
</section>

<div
  style={{marginTop: '2rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <p
    className="text-2xl text-[#0a1b47] dark:text-[#FFF]"
    style={{
fontWeight: '500',
maxWidth: '40rem',
margin: '0 auto',
marginBottom: '2rem',
textAlign: 'center',
paddingTop: '1.5rem'
}}
  >
    Explore our products and documentation below.
  </p>

  <Columns cols={3}>
    <Card title="Pylon" icon="compass-drafting" cta="View all" href="/pylon" />

    <Card title="DA Builder" icon="hammer" cta="View all" href="/da-builder" />

    <Card title="Education Hub" icon="graduation-cap" cta="View all" href="/education-hub" />
  </Columns>
</div>