mintlify__docs/index.mdx

---
title: "Introduction"
description: "Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers."
icon: "book-open"
mode: "custom"
---

export const HeroCard = ({ filename, title, description, href }) => {
  return (
    <a className="group cursor-pointer pb-8" href={href}>
      <img
        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}.png`}
        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
      />
      <img
        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}-dark.png`}
        className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block"
      />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <span className="mt-1.5">{description}</span>
    </a>
  );
};

<div className="relative">
  <div className="absolute top-0 lg:-top-16 left-0 right-0">
    <img
      src="/images/hero/background-light.png"
      className="block dark:hidden pointer-events-none"
    />
    <img
      src="/images/hero/background-dark.png"
      className="hidden dark:block pointer-events-none"
    />
  </div>

  <div className="px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
    <h1 className="text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      Documentation
    </h1>

    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
      Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers.
    </div>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard filename="rocket" title="Quickstart" description="Deploy your first docs site in minutes with our step-by-step guide" href="/quickstart" />

      <HeroCard
        filename="cli"
        title="CLI installation"
        description="Install the CLI to preview and develop your docs locally"
        href="/installation"
      />

      <HeroCard
        filename="editor"
        title="Web editor"
        description="Make quick updates and manage content with our browser-based editor"
        href="/editor"
      />

      <HeroCard
        filename="components"
        title="Components"
        description="Build rich, interactive documentation with our ready-to-use components"
        href="/components"
      />
    </div>
  </div>
</div>