Files
mintlify__docs/index.mdx
mintlify-development[bot] 6cb06fb723 Updated mintlify pages
- Updated index.mdx
- Updated docs.json

Mintlify-Source: dashboard-editor
2026-05-29 20:51:57 +00:00

54 lines
2.6 KiB
Plaintext

---
title: "Introtion"
description: "Mintlify is an AI-native documentation platform built for developers, with beautiful defaults, interactive API playgrounds, and smart search."
mode: "frame"
keywords: ["overview", "platform", "getting started", "features"]
boost: 3
---
export const HeroCard = ({ filename, title, description, href }) => {
return (
<a className="group cursor-pointer pb-8" href={href}>
<img
src={`https://raw.githubusercontent.com/mintlify/docs/refs/heads/main/images/hero/${filename}.png`}
className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
/>
<img
src={`https://raw.githubusercontent.com/mintlify/docs/refs/heads/main/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-14 left-0 right-0 opacity-80">
<img src="/images/hero/background-light.svg" className="block dark:hidden pointer-events-none w-full h-auto" alt="Decorative background image." />
<img src="/images/hero/background-dark.svg" className="hidden dark:block pointer-events-none w-full h-auto" alt="Decorative background image." />
</div>
<div className="relative z-10 px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
<h1 className="block 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 and teams.
</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/index" />
<HeroCard filename="components" title="Components" description="Build rich, interactive documentation with our ready-to-use components" href="/components/accordions" />
</div>
</div>
</div>