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

# Docs

export const BgImage = () => {
  return <>
      <span className="fixed inset-0 -z-10 pointer-events-none dark:hidden" style={{
    backgroundImage: "url('/images/bg_light.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    backgroundPosition: "left -400px",
    backgroundAttachment: "fixed"
  }} />
      <span className="fixed inset-0 -z-10 pointer-events-none hidden dark:block" style={{
    backgroundImage: "url('/images/dark_bg.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "",
    backgroundPosition: "center 0",
    backgroundAttachment: "fixed"
  }} />
    </>;
};

export const UseCaseCard = ({img, href, title, description}) => {
  return <a href={href} rel="noopener noreferrer" className="group mb-6">
      <div className="flex flex-col items-center gap-6 p-8 bg-white/60 dark:bg-neutral-900/60 rounded-2xl hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
        <div className="w-16 h-16 flex items-center justify-center shadow-sm rounded-full">
          <img src={img} className="w-10 h-10 object-contain pointer-events-none" alt={title} />
        </div>
        <div className="flex flex-col items-center gap-4 text-center">
          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100 group-hover:text-primary dark:group-hover:text-primary-dark transition-colors">
            {title}
          </h2>
          <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed max-w-sm h-10 flex items-center justify-center">
            {description}
          </p>
          <div className="inline-flex items-center px-3 py-1.5 border dark:bg-[#000] bg-white border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium text-sm rounded-full hover:border-gray-400 dark:hover:border-gray-500 transition-colors">
            Learn more
            <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </div>
        </div>
      </div>
    </a>;
};

export const HeroCard = ({img, href, title, description, example}) => {
  return <a href={href} target="_blank" rel="noopener noreferrer" className="group">
      <div className="flex flex-col gap-4 rounded-xl ">
        <div className="w-full h-40 overflow-hidden rounded-xl">
          <img src={img} className="w-full h-full object-cover pointer-events-none" alt={title} />
        </div>
        <div className="flex flex-col gap-3 text-left">
          <h2 className="text-xl font-medium text-gray-900 dark:text-gray-200 group-hover:text-primary dark:group-hover:text-primary-dark transition-colors text-left">
            {title}
          </h2>
          <p className="text-gray-600 dark:text-gray-400 text-md text-left">
            {description}
          </p>
          <p className="text-gray-600 pt-5 dark:text-gray-400 text-xs text-left">
            {example}
          </p>
        </div>
      </div>
    </a>;
};

<BgImage />

<div className="gap-5 flex justify-center p-6">
  <div className="w-[min(860px,90vw)] text-center px-6 py-12">
    <h1 className="mb-5 font-inter text-5xl text-center text-gray-900 dark:text-white">Start Building</h1>

    <p className="mt-4 mb-10 font-inter font-normal text-body-l leading-body-l tracking-body-l text-center text-gray-600 max-w-2xl mx-auto dark:text-white">
      Rely on the Auth0 identity platform to add sophisticated <br /> authentication and authorization to your applications.
    </p>

    <div
      className="flex justify-center mt-5 dark:hidden"
      style={{marginBottom: '5rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
    >
      <Columns cols={4}>
        <HeroCard title="Native/Mobile App" img="https://mintlify-assets.b-cdn.net/auth0/light-mobile.svg" description="Mobile or Desktop app that runs natively on a device" example="e.g., iOS, Android" href="#" />

        <HeroCard title="Single Page App" img="https://mintlify-assets.b-cdn.net/auth0/light-single.svg" description="JavaScript web app that runs in the browser" example="e.g., React, Vue" href="#" />

        <HeroCard title="Regular Web App" img="https://mintlify-assets.b-cdn.net/auth0/light-reg.svg" description="Traditional web app that runs on the server" example="e.g., React, Vue" href="#" />

        <HeroCard title="Backend/API" img="https://mintlify-assets.b-cdn.net/auth0/light-backend.svg" description="An API or service protected by Auth0" example="e.g., Node.js, Python" href="#" />
      </Columns>
    </div>

    <div
      className="hidden dark:block"
      style={{marginBottom: '5rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
    >
      <Columns cols={4}>
        <HeroCard title="Native/Mobile App" img="https://mintlify-assets.b-cdn.net/auth0/dark-mobile.svg" description="Mobile or Desktop app that runs natively on a device" example="e.g., iOS, Android" href="#" />

        <HeroCard title="Single Page App" img="https://mintlify-assets.b-cdn.net/auth0/dark-single.svg" description="JavaScript web app that runs in the browser" example="e.g., React, Vue" href="#" />

        <HeroCard title="Regular Web App" img="https://mintlify-assets.b-cdn.net/auth0/dark-reg.svg" description="Traditional web app that runs on the server" example="e.g., React, Vue" href="#" />

        <HeroCard title="Backend/API" img="https://mintlify-assets.b-cdn.net/auth0/dark-backend.svg" description="An API or service protected by Auth0" example="e.g., Node.js, Python" href="#" />
      </Columns>
    </div>
  </div>
</div>

<div
  style={{height: '2px', width: '100%', background: 'linear-gradient(to right, var(--dash-color, #ccc) 50%, transparent 50%)', backgroundSize: '16px 2px', margin: '20px 0', marginBottom: '1rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
/>

<div className="gap-5 flex justify-center p-6 ">
  <div className="w-[min(860px,90vw)] text-center px-6 py-12">
    <h1 className="mb-5 font-inter text-2xl text-center text-gray-900 dark:text-white">Learn about Auth0</h1>

    <p className="mt-4 mb-10 font-inter font-normal text-body-l leading-body-l tracking-body-l text-center text-gray-600 max-w-2xl mx-auto dark:text-white">
      Explore our most common use cases.
    </p>

    <div
      className="flex justify-center mt-5 dark:hidden"
      style={{marginBottom: '5rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
    >
      <Columns cols={2}>
        <UseCaseCard title="Get Started" img="https://mintlify-assets.b-cdn.net/auth0/bolt-light.svg" description="Learn the basics and begin building your authentication solution." href="/docs/get-started" />

        <UseCaseCard title="Authenticate" img="https://mintlify-assets.b-cdn.net/auth0/lock-light.svg" description="Define how your applications and APIs verify the identity of a user or device." href="/docs/authenticate" />

        <UseCaseCard title="Manage Users" img="https://mintlify-assets.b-cdn.net/auth0/users-light.svg" description="Store and manage custom details about your users." href="/docs/manage-users" />

        <UseCaseCard title="Customize" img="https://mintlify-assets.b-cdn.net/auth0/custom-light.svg" description="Customize Auth0 using your own branding and extend our functionality to solve your unique identity needs." href="/docs/customize" />

        <UseCaseCard title="Secure" img="https://mintlify-assets.b-cdn.net/auth0/shield-light.svg" description="Add multi-factor authentication and defend your application from bots, suspicious IPs, and password breaches." href="/docs/secure" />

        <UseCaseCard title="Deploy & Monitor" img="https://mintlify-assets.b-cdn.net/auth0/deploy-light.svg" description="Deploy Auth0 for your applications and monitor system health and events." href="/docs/deploy-and-monitor" />

        <UseCaseCard title="Troubleshoot" img="https://mintlify-assets.b-cdn.net/auth0/tube-light.svg" description="Troubleshoot challenges, learn about Auth0’s different levels of support, and get help." href="/docs/troubleshoot" />
      </Columns>
    </div>

    <div
      className="hidden dark:block"
      style={{marginBottom: '5rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
    >
      <Columns cols={2}>
        <UseCaseCard title="Get Started" img="https://mintlify-assets.b-cdn.net/auth0/bolt-dark.svg" description="Learn the basics and begin building your authentication solution." href="/docs/get-started" />

        <UseCaseCard title="Authenticate" img="https://mintlify-assets.b-cdn.net/auth0/lock-dark.svg" description="Define how your applications and APIs verify the identity of a user or device." href="/docs/authenticate" />

        <UseCaseCard title="Manage Users" img="https://mintlify-assets.b-cdn.net/auth0/users-dark.svg" description="Store and manage custom details about your users." href="/docs/manage-users" />

        <UseCaseCard title="Customize" img="https://mintlify-assets.b-cdn.net/auth0/custom-dark.svg" description="Customize Auth0 using your own branding and extend our functionality to solve your unique identity needs." href="/docs/customize" />

        <UseCaseCard title="Secure" img="https://mintlify-assets.b-cdn.net/auth0/shield-dark.svg" description="Add multi-factor authentication and defend your application from bots, suspicious IPs, and password breaches." href="/docs/secure" />

        <UseCaseCard title="Deploy & Monitor" img="https://mintlify-assets.b-cdn.net/auth0/deploy-dark.svg" description="Deploy Auth0 for your applications and monitor system health and events." href="/docs/deploy-and-monitor" />

        <UseCaseCard title="Troubleshoot" img="https://mintlify-assets.b-cdn.net/auth0/tube-dark.svg" description="Troubleshoot challenges, learn about Auth0’s different levels of support, and get help." href="/docs/troubleshoot" />
      </Columns>
    </div>
  </div>
</div>