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

> Sardine documentation hub for fraud prevention, compliance, and risk management platform integration.

# Home

export const IntroCard = ({img, href, title, description}) => {
  return <div className="flex flex-col gap-6">
      <div className="w-75 h-60 overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800">
        <img src={img} className="w-full h-full object-cover" alt={title} />
      </div>
      <div className="flex flex-col gap-3">
        <a href={href} className="hover:underline" target="_blank" rel="noopener noreferrer">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-200">
          {title}
        </h2>
        </a>
        <p className="text-gray-600 dark:text-gray-400 text-lg">
          {description}
        </p>
      </div>
    </div>;
};

export const HeroCard = ({img, href}) => {
  return <a href={href} className="card block not-prose font-normal group relative my-2 rounded-xl overflow-hidden w-[300px] h-[200px] cursor-pointer">
      <div className="h-full">
        <div className="w-full h-full">
          <span aria-owns="rmiz-modal-942aec5edfb7" data-rmiz="" className="flex items-center justify-center h-full">
            <span data-rmiz-content="found" className="flex items-center justify-center h-full">
              <img src={img} className="pointer-events-none w-full h-full object-cover" />
            </span>
          </span>
        </div>
      </div>
    </a>;
};

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

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

  <div
    className="absolute inset-0 hidden dark:block"
    style={{ 
  height: "32rem", 
  background: "linear-gradient(180deg, #0f172a 0%, #011D2B 50%, #0B0C0E 100%)",
  backgroundSize: "cover", 
  backgroundPosition: "center" 
}}
  />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem' }}>
    <div
      className="text-gray-900 dark:text-white"
      style={{
   fontWeight: '600',
   fontSize: '42px',
   margin: '0',
  }}
    >
      Manage Risk with Sardine
    </div>

    <p
      className="text-gray-900 dark:text-white"
      style={{
    marginTop: '1rem',
   fontWeight: '400',
   fontSize: '16px',
   maxWidth: '42rem'
  }}
    >
      Learn how to manage risk across the customer journey with Sardine's Tech Docs
    </p>

    <div className="flex items-center justify-center">
      <button
        type="button"
        className="hidden w-full lg:flex items-center text-sm leading-6 rounded-lg py-2 pl-2.5 pr-3 shadow-sm text-gray-400 dark:text-white/50 bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:hover:brightness-[1.25] focus:outline-primary relative"
        id="home-search-entry"
        style={{
    marginTop: '2rem',
    maxWidth: '28rem',
    border: '1px solid transparent',
  }}
        onClick={openSearch}
      >
        <svg
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-light 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',
    }}
        />

        Search or ask
      </button>
    </div>

    <a href="/guides/public/getting-started/getting-started">
      <div className="flex items-center justify-center" style={{ marginTop: '2rem', fontWeight: '500', fontSize: '18px' }}>
        <span className="text-gray-900 dark:text-white">Get started with Sardine's tech docs</span>

        <svg style={{marginTop: '2px'}} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-chevron-right text-primary dark:text-primary-light">
          <path d="m9 18 6-6-6-6" />
        </svg>
      </div>
    </a>
  </div>
</div>

<div className="relative w-full flex items-center justify-center py-16 block dark:hidden">
  <div className="max-w-screen-xl mx-auto px-4">
    <p className="text-center text-gray-900 dark:text-gray-200 mb-8" style={{ fontSize: '2rem', fontWeight: '600'}}>Log in to access our full technical documentation suite</p>

    <CardGroup cols={3}>
      <IntroCard img="https://mintlify-assets.b-cdn.net/sardine-card-1.svg" href="/guides/integration/integration-guides/overview" title="Integrations" description="Integrate with Sardine's platform and learn how to onboard your users" />

      <IntroCard img="https://mintlify-assets.b-cdn.net/new-api-sardine.svg" href="/guides/api-reference/overview" title="API Reference" description="Explore Sardine's APIs to detect different types of fraud and risk" />

      <IntroCard img="https://mintlify-assets.b-cdn.net/sarding-card-3.svg" href="/guides/knowledge-base/overview" title="Knowledge Base" description="Understand Sardine's capabilities and use it more effectively in your workflows" />
    </CardGroup>
  </div>
</div>

<div className="relative w-full flex items-center justify-center py-16 hidden dark:block">
  <div className="max-w-screen-xl mx-auto px-4">
    <p className="text-center text-gray-900 dark:text-gray-200 mb-8" style={{ fontSize: '2rem', fontWeight: '600'}}>Log in to access our full technical documentation suite</p>

    <CardGroup cols={3}>
      <IntroCard img="https://mintlify-assets.b-cdn.net/Image%20(1).svg" href="/guides/integration/integration-guides/overview" title="Integrations" description="Integrate with Sardine's platform and learn how to onboard your users" />

      <IntroCard img="https://mintlify-assets.b-cdn.net/dark-sardine-api.svg" href="/guides/api-reference/overview" title="API Reference" description="Explore Sardine's APIs to detect different types of fraud and risk" />

      <IntroCard img="https://mintlify-assets.b-cdn.net/Image%20(3).svg" href="/guides/knowledge-base/overview" title="Knowledge Base" description="Understand Sardine's capabilities and use it more effectively in your workflows" />
    </CardGroup>
  </div>
</div>