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

# Welcome

> Welcome to Overflow Docs.

export const ZendeskChatHandler = () => {
  const supportTileSelector = '.welcome-page-tiles-container > div > div:first-child';
  const activateZendeskChat = useCallback(() => {
    if (typeof zE !== 'undefined' && typeof zE === 'function') {
      zE('messenger', 'open');
    }
  }, []);
  useEffect(() => {
    let supportTile = undefined;
    if (typeof window !== 'undefined') {
      supportTile = document.querySelector(supportTileSelector);
      if (supportTile) {
        supportTile.addEventListener('click', activateZendeskChat);
      }
    }
    return () => {
      if (supportTile) {
        supportTile.removeEventListener('click', activateZendeskChat);
      }
    };
  }, [activateZendeskChat, supportTileSelector]);
  return <></>;
};

export const WelcomeSearch = () => {
  const onClickSearchBar = () => {
    document.getElementById('search-bar-entry').click();
  };
  const onClickAiAssistant = () => {
    document.getElementById('assistant-entry').click();
  };
  return <div class="relative hidden lg:flex items-center gap-2.5 flex-1">
    <button type="button" class="flex pointer-events-auto rounded-xl w-full items-center text-sm leading-6 h-9 pl-3.5 pr-3 shadow-sm text-gray-500 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 justify-between truncate gap-2 min-w-[43px]" id="welcomeSearchBar" onClick={onClickSearchBar}>
      <div class="flex items-center gap-2 min-w-[42px]">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search min-w-4 flex-none text-gray-700 hover:text-gray-800 dark:text-gray-400 hover:dark:text-gray-200">
          <circle cx="11" cy="11" r="8"></circle>
        <path d="m21 21-4.3-4.3"></path>
        </svg>
        <div class="truncate min-w-0">Search...</div>
      </div>
      <span class="flex-none text-xs font-semibold">Ctrl K</span>
    </button>
      <button type="button" class="flex-none hidden lg:flex items-center justify-center gap-1.5 pl-3 pr-3.5 h-9 rounded-xl shadow-sm 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="welcomeAiAssistant" onClick={onClickAiAssistant}>
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" class="w-4 h-4 shrink-0 text-gray-700 hover:text-gray-800 dark:text-gray-400 hover:dark:text-gray-200"><g fill="currentColor">
        <path d="M5.658,2.99l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474Z" fill="currentColor" data-stroke="none" stroke="none">
        </path>
        <polygon points="9.5 2.75 11.412 7.587 16.25 9.5 11.412 11.413 9.5 16.25 7.587 11.413 2.75 9.5 7.587 7.587 9.5 2.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
        </polygon>
      </g>
      </svg>
      <span class="text-sm text-gray-500 dark:text-white/50 whitespace-nowrap">Ask AI</span>
    </button>
  </div>;
};

<div class="w-full welcome-page-entry flex flex-col items-center justify-center">
  <h1 class="!font-semibold text-center text-gray-800 dark:text-gray-200">
    Welcome to Overflow Docs
  </h1>

  <h4 class="dark:text-gray-200">
    Learn how to get started with Overflow Products, Overflow Api, and more.
  </h4>

  <div class="flex items-center w-full lg:px-12 min-w-0 mt-7 mx-4 lg:mx-0 gap-x-4">
    <div class="flex flex-1" />

    <div class="flex flex-1">
      <WelcomeSearch />
    </div>

    <div class="flex flex-1" />
  </div>

  <a class="welcome-page-cta flex items-center" href="/overflow-for-nonprofits/introduction">Explore the docs<Icon icon="chevron-right" size="20" color="#151515" /></a>
</div>

<div class="flex justify-center welcome-page-tiles-container">
  <CardGroup cols={3}>
    <Card title="Support" icon="headset" color="#ff4512" href="mailto:support@overflow.co">
      Get help and support.
    </Card>

    <Card title="Overflow for Nonprofits" icon="heart-handshake" color="#ff4512" href="/overflow-for-nonprofits/introduction">
      Explore the OFN Product.
    </Card>

    <Card title="API Docs" icon="braces" color="#ff4512" href="/api-reference/welcome">
      Explore our Open API.
    </Card>

    <Card title="Changelog" icon="info" color="#ff4512" href="/changelog/overview">
      See what's new at Overflow.
    </Card>

    <Card title="Learn More" icon="sparkles" color="#ff4512" href="https://overflow.co/learn">
      Learn more about Overflow's product solutions.
    </Card>
  </CardGroup>
</div>

<ZendeskChatHandler />
