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

# Welcome

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

<div className="relative w-full flex items-center justify-center" style={{ height: '24rem', overflow: 'hidden' }}>
  <div id="background-div" className="absolute inset-0" style={{height: "24rem", backgroundSize: "cover", backgroundPosition: "center"}} />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '100%', left: '50%', transform: 'translateX(-50%)' }}>
    <h1
      className="text-black dark:text-white"
      style={{
      marginTop: '4rem',
      fontWeight: '500',
      margin: '0',
      textAlign: 'center',
      letterSpacing: '-0.03em',
      fontSize: '72px',
      lineHeight: 'normal',
      fontFamily: "GT America"
  }}
    >
      Welcome to Lago
    </h1>

    <div className="flex items-center justify-center">
      <div className="flex items-center justify-center" style={{ width: '100%' }}>
        <button
          type="button"
          className="w-full lg:flex items-center text-sm leading-6 rounded-full py-2 pl-3 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={{
        marginTop: '2rem',
        maxWidth: '200rem',
        width: '100%',
        margin: '2rem auto 0',
        borderRadius: '0.5rem',
        fontFamily: 'GT America'
      }}
          onClick={openSearch}
        >
          Search our billing guides, API refs and more...
        </button>
      </div>
    </div>
  </div>
</div>

<div
  style={{
marginTop: '0rem',
marginBottom: '8rem',
maxWidth: '70rem',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: '1.25rem',
paddingRight: '1.25rem'
}}
>
  <h2
    className="text-gray-900 dark:text-gray-200 text-center"
    style={{
  marginTop: '2rem',
  marginBottom: '1rem',
  fontWeight: '500',
  fontSize: '1.5rem',
  fontFamily: 'GT America'
}}
  >
    Get started with our billing docs and guides
  </h2>

  <div
    style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: '1.5rem',
marginBottom: '1.5rem'
}}
  >
    <a
      href="https://getlago.com/docs/guide"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M2 17L12 22L22 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>Guide</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>Learn everything about Lago billing engine. Build your first plans in minutes.</p>
    </a>

    <a
      href="https://getlago.com/docs/api-reference"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M16 18L22 12L16 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M8 6L2 12L8 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>API References</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>Automate your billing actions with our API references and SDKs.</p>
    </a>

    <a
      href="https://getlago.com/slack"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>Community</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>Ask questions, share your feedback and get help from the community.</p>
    </a>
  </div>

  <div
    style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: '1.5rem'
}}
  >
    <a
      href="https://getlago.com/docs/templates"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M14 2V8H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M12 18V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M9 15H15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>Templates</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>Clone and replicate billing templates from top-tier companies.</p>
    </a>

    <a
      href="https://getlago.com/docs/changelog"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M17 8L12 3L7 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M12 3V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>Changelog</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>See the latest product updates and improvements.</p>
    </a>

    <a
      href="https://getlago.com/blog"
      className="welcome-card no-underline"
      style={{
    display: 'block',
    padding: '1.5rem',
    borderRadius: '0.5rem',
    border: '1px solid',
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: '#F5F5EF',
    transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
    minHeight: '140px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)'
  }}
      onMouseOver={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#243044' : '#EEEEE8';
  }}
      onMouseOut={(e) => {
    const isDark = document.documentElement.classList.contains('dark');
    e.currentTarget.style.backgroundColor = isDark ? '#1c2535' : '#F5F5EF';
  }}
    >
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ marginBottom: '0.75rem' }}>
        <path d="M2 3H8C9.06087 3 10.0783 3.42143 10.8284 4.17157C11.5786 4.92172 12 5.93913 12 7V21C12 20.2044 11.6839 19.4413 11.1213 18.8787C10.5587 18.3161 9.79565 18 9 18H2V3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

        <path d="M22 3H16C14.9391 3 13.9217 3.42143 13.1716 4.17157C12.4214 4.92172 12 5.93913 12 7V21C12 20.2044 12.3161 19.4413 12.8787 18.8787C13.4413 18.3161 14.2044 18 15 18H22V3Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>

      <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: '1rem', marginTop: 0, fontFamily: 'GT America' }}>Blog</h3>
      <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: '#60646c', marginBottom: 0, fontFamily: 'GT America' }}>Read the latest news, billing tips and articles from the Lago team.</p>
    </a>
  </div>
</div>
