> ## Documentation Index
> Fetch the complete documentation index at: https://x-preview-add-redirects.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

export const IntroCard = ({img, href, title, description}) => {
  return <a href={href} className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex flex-col h-full !bg-gray-400/10">
        <div className="integration-logo w-full flex items-center justify-center !bg-gray-400/10">
          <span aria-owns="rmiz-modal-942aec5edfb7" data-rmiz="" className="flex items-center justify-center" style={{
    width: '100%',
    height: '100%'
  }}>
            <span data-rmiz-content="found" style={{
    visibility: 'visible',
    width: '100%',
    height: '100%'
  }} className="flex items-center justify-center">
              <img src={img} className="pointer-events-none w-full h-full object-cover" />
            </span>
            <span data-rmiz-ghost="" style={{
    height: '100%',
    left: 0,
    width: '100%',
    top: 0
  }}>
              <button aria-label="Expand image" data-rmiz-btn-zoom="" type="button">
                <svg aria-hidden="true" data-rmiz-btn-zoom-icon="true" fill="currentColor" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" />
                </svg>
              </button>
            </span>
          </span>
        </div>
        <div className="p-4 flex-grow">
          <h3 className="text-lg font-semibold mb-2 text-white">{title}</h3>
          <p className="text-sm text-gray-400">{description}</p>
        </div>
      </div>
    </a>;
};

export function openSearch() {
  if (typeof window !== 'undefined') {
    document.getElementById('search-bar-entry').click();
  }
}

<div className="relative w-full flex items-center justify-center" style={{ height: '28rem', overflow: 'hidden'}}>
  <div className="absolute inset-0" style={{backgroundImage: "url('https://mintlify-assets.b-cdn.net/x/background.png')", backgroundSize: 'cover', backgroundPosition: 'center'}} />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '56rem' }}>
    <div className="text-white font-branded text-hero">
      Tap into what's happening to build what's next
    </div>

    <p
      className="text-white text-center"
      style={{
    marginTop: '1rem',
   fontWeight: '400',
   fontSize: '16px',
  }}
    >
      Get immediate access to the X API and unlock the potential of X data
    </p>

    <div className="flex items-center justify-center">
      <button
        type="button"
        className="hidden 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: '3rem',
    maxWidth: '28rem',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-gray-500 hover:bg-gray-600 dark:bg-white/50 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',
    }}
        />

        Find what you're looking for
      </button>
    </div>

    <div className="flex items-center justify-center">
      <a style={{ marginTop: '2rem' }} href="/x-api" className="text-white text-sm font-medium flex items-center">
        Get started

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 inline-block ml-1" viewBox="0 0 20 20" fill="currentColor">
          <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

<div
  style={{marginTop: '6rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <div
    className="text-gray-900 dark:text-gray-200 font-branded"
    style={{
 textAlign: 'center',
 fontSize: '24px',
 fontWeight: '400',
 marginBottom: '3rem',
}}
  >
    Use cases
  </div>

  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <IntroCard title="Build for businesses" href="/use-cases/build-for-business" description="Use X's powerful APIs to help your business listen, act, and discover." img="https://mintlify-assets.b-cdn.net/x/img-1.png" />

    <IntroCard title="Build for the public" href="/use-cases/build-for-consumers" description="Build for people on X to integrate or improve their experience on the platform." img="https://mintlify-assets.b-cdn.net/x/img-2.png" />

    <IntroCard title="Do research" href="/use-cases/do-research" description="Use the X API to get historical and real-time data points for your next research project." img="https://mintlify-assets.b-cdn.net/x/img-3.png" />

    <IntroCard title="Teach & learn" href="/use-cases/teach-and-learn" description="Teach or learn valuable skills with the X API." img="https://mintlify-assets.b-cdn.net/x/img-4.png" />

    <IntroCard title="Build for fun" href="/use-cases/build-for-fun" description="Experiment, explore, create, and have fun." img="https://mintlify-assets.b-cdn.net/x/img-5.png" />

    <IntroCard title="Build for good" href="/use-cases/build-for-good" description="Make the world, and X, a better place." img="https://mintlify-assets.b-cdn.net/x/img-6.png" />
  </div>
</div>

<div className="relative w-full flex items-center justify-center" style={{ height: '28rem', overflow: 'hidden'}}>
  <div className="absolute inset-0 bg-primary dark:bg-primary-light" style={{opacity: 0.03}} />

  <div className="flex flex-col items-center" style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '56rem' }}>
    <div
      className="font-branded text-gray-900 dark:text-gray-200"
      style={{
   fontWeight: '600',
   fontSize: '2rem',
   margin: '0',
  }}
    >
      See how others are innovating with the X Developer Platform
    </div>

    <p
      className="text-center text-gray-900 dark:text-gray-200"
      style={{
    marginTop: '1rem',
   fontWeight: '400',
   fontSize: '16px',
  }}
    >
      Businesses, researchers, and developers all over the world have used the X Developer Platform to creatively innovate, gain valuable insights, and shape the future. Explore how they did it and get inspired to use the APIs in your own way.
    </p>

    <a style={{ marginTop: '2rem' }} href="https://docs.x.com/success-stories" className="text-white text-sm font-medium flex items-center">
      Browse all success stories

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 inline-block ml-1" viewBox="0 0 20 20" fill="currentColor">
        <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
      </svg>
    </a>
  </div>
</div>