> ## Documentation Index
> Fetch the complete documentation index at: https://companyname-a7d5b98e-cex-integration-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# TON's Developer Documentation

> WARNING: THIS PAGE WILL BE DONE LAST DUE TO ITS HEAVY TIES WITH THE REST OF THE DOCUMENTATION

export const IntroCard = ({icon, title, href}) => {
  return <a href={href} style={{
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '6px',
    padding: '10px 16px',
    borderRadius: '14px',
    backgroundColor: 'transparent',
    textDecoration: 'none',
    height: '44px',
    width: 'fit-content'
  }} className="intro-card border border-[#000] dark:border-[#fff] hover:!border-primary dark:hover:!border-primary-light transition-colors">
      {}
      <Icon icon={icon} className="w-[18px] h-[18px] text-blue-600 dark:text-blue-500" />
      <span style={{
    fontSize: '16px',
    fontWeight: 600,
    lineHeight: 1
  }} className="text-gray-900 dark:text-white">
        {title}
      </span>
    </a>;
};

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

{(() => {
// TODO: also remove the highlighting of the SVG icon
// TODO: try alternative approaches
// const first = document.querySelector('#navigation-items > div > li:nth-child(1) > a')
// first.classList.remove('font-semibold', 'text-primary', 'dark:text-primary-light')
// first.classList.add('text-gray-700', 'hover:text-gray-900', 'dark:text-gray-400', 'dark:hover:text-gray-300')
})()}

<div className="relative w-full flex items-center justify-center mb-20" style={{ height: '30rem', overflow: 'hidden', maxWidth: '1800px', marginLeft: 'auto', marginRight: 'auto'}}>
  <div className="relative w-full h-full">
    <div
      id="background-div"
      className="absolute inset-0 h-[30rem] opacity-25 bg-contain bg-no-repeat bg-primary"
      style={{
backgroundImage: "url(https://storage.googleapis.com/ton-strapi/internet_img_dc4e20f18b/internet_img_dc4e20f18b.png), url(https://storage.googleapis.com/ton-strapi/Frame_1321315798_2d73cdb51a/Frame_1321315798_2d73cdb51a.png)",
backgroundPosition: "120% center, -20% center",
backgroundSize: "auto 100%, auto 100%"
}}
    />
  </div>

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '1500px' }}>
    <div
      className="text-gray-900 dark:text-gray-200"
      style={{
   fontWeight: '900',
   fontSize: '2.5rem',
   margin: '0'
  }}
    >
      <span class="dark:text-gray-200 text-gray-900">Welcome to TON documentation!<br /></span>
      <span class="dark:text-gray-200 text-gray-900">WARNING: THIS PAGE WILL BE DONE LAST DUE TO ITS<br />HEAVY TIES WITH THE REST OF THE DOCUMENTATION</span>
    </div>

    <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-left text-sm leading-6 rounded-full py-4 pl-4 pr-4 text-gray-500 bg-white dark:bg-background-dark hover:border-gray-400 dark:hover:border-gray-600"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    margin: '2rem auto 0',
    width: '600px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',
    border: "1px solid var(--outline-color)",
  }}
        onClick={openSearch}
      >
        {/* <svg
                      className="h-4 w-4 ml-1.5  flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
                      style={{
                      marginRight: '0.5rem',
                       maskImage:
                         'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
                       maskRepeat: 'no-repeat',
                       maskPosition: 'center center',
                      }}
                    /> */}

        <span className="ml-1.5">Search or ask...</span>
      </button>
    </div>

    <div style={{ maxWidth: '800px', margin: '0 auto', marginTop: '2rem' }}>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <IntroCard icon="magnifying-glass" title="Discover" href="/discover" />

        <IntroCard icon="wrench" title="Build" href="/build" />

        <IntroCard icon="plug" title="Integrate" href="/integrate" />

        <IntroCard icon="handshake" title="Participate" href="/participate" />

        <IntroCard icon="pencil" title="Contribute" href="/contribute" />
      </div>
    </div>
  </div>
</div>
