Han/custom homepage

docs.json

@@ -14,13 +14,14 @@
   "navigation": {
     "dropdowns": [
       {
-        "dropdown": "Getting Started",
-        "icon": "layers",
+        "dropdown": "Documentation",
+        "icon": "book",
         "description": "Set up your documentation",
         "groups": [
           {
             "group": "Getting Started",
             "pages": [
+              "introduction",
               "quickstart",
               {
                 "group": "Editing",

introduction.mdx

@@ -0,0 +1,45 @@
+---
+title: "Introduction"
+description: "Start building modern documentation in under five minutes"
+icon: "book-open"
+mode: "custom"
+---
+
+export const HeroCard = ({ filename, title, description, href }) => {
+  return (
+    <a className="group cursor-pointer pb-8" href={href}>
+      <img src={`/images/hero/${filename}.png`} className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100" />
+      <img src={`/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>
+      <p className="mt-1.5">
+        {description}
+      </p>
+    </a>
+  )
+}
+
+<div className="relative">
+
+<div className="absolute top-0 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>
+
+  <p 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.
+  </p>
+
+  <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="/development" />
+    <HeroCard filename="editor" title="Web editor" description="Make quick updates and manage content with our browser-based editor" href="/web-editor" />
+    <HeroCard filename="components" title="Components" description="Build rich, interactive documentation with our ready-to-use components" href="/content/components" />
+  </div>
+</div>
+
+</div>

quickstart.mdx

@@ -1,21 +1,9 @@
 ---
 title: "Quickstart"
-description: "Start building modern documentation in under five minutes"
+description: "Build your documentation in minutes"
 icon: "rocket"
 ---
 
-<Frame>
-  <img
-    className="block dark:hidden"
-    src="https://mintlify-assets.b-cdn.net/hero-light.png"
-  />
-
-  <img
-    className="hidden dark:block"
-    src="https://mintlify-assets.b-cdn.net/hero-dark.png"
-  />
-</Frame>
-
 ## Getting Started
 
 Welcome\! Follow the instructions below to learn how to deploy, update and
@@ -28,14 +16,14 @@ Mintlify docs are rendered from MDX files and configurations defined in our
 your docs with your code, and make source control effortless. Onboard through the [dashboard](https://dashboard.mintlify.com) or clone our [starter kit](https://github.com/mintlify/starter) to get started.
 
 <AccordionGroup>
-  <Accordion title="Install the GitHub app" icon="message-bot">
+  <Accordion title="Install the GitHub app">
     Install our GitHub app to ensure that your updates are automatically deployed when you push changes. You can find the installation link in the [dashboard](https://dashboard.mintlify.com/settings), on the Settings page. Upon successful installation, a check mark will appear next to the commit hash of the repository.
 
     <Frame>
       ![GitHub Bot Verification](https://mintlify.s3-us-west-1.amazonaws.com/mintlify/images/github-bot-verification.png)
     </Frame>
   </Accordion>
-  <Accordion title="Monorepo Setup" icon="code-branch">
+  <Accordion title="Monorepo Setup">
     If you want your docs to live alongside your code as a monorepo setup, you
     can: 1. Move your docs content to your monorepo. 2. Specify the path to your
     `docs.json` in the
@@ -63,18 +51,18 @@ Mintlify enables you to easily customize the style, structure, and content of
 your docs.
 
 <AccordionGroup>
-  <Accordion title="Editing locally (recommended for developers)" icon="rectangle-terminal">
+  <Accordion title="Editing locally (recommended for developers)">
     1. Install [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).
     2. Once git is installed, clone your docs repository using `git clone <your-repo>`. If you haven't set it up yet, now would be a good time to do so with these [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent).
     3. Use your favorite IDE to open the repository.
     4. Install our Mintlify CLI to preview changes with `npm i -g mintlify`.
 
     Learn more about this in our [local development guide](/development).
   </Accordion>
-  <Accordion title="Editing with the web editor" icon="pen-to-square">
+  <Accordion title="Editing with the web editor">
     Learn more about how to use the web editor on our [guide](/web-editor).
   </Accordion>
-  <Accordion title="Customizing to your brand" icon="palette">
+  <Accordion title="Customizing to your brand">
     Easily customize colors, logos and buttons among other configurations in our `docs.json` file. Start with these basic configurations:
 
     ```json
@@ -94,7 +82,7 @@ your docs.
 
     A full list of supported configurations can be found at [global settings](/settings/global).
   </Accordion>
-  <Accordion title="Adding content" icon="pencil">
+  <Accordion title="Adding content">
     Add content with simple MDX files. Initiate your pages with this template:
 
     ```md
@@ -107,15 +95,15 @@ your docs.
 
     Learn more about adding images, tables, lists, and more using the [MDX syntax](/text). We also offer a [wide array of components](/content/components).
   </Accordion>
-  <Accordion title="Pushing changes" icon="rocket">
+  <Accordion title="Pushing changes">
     Once ready, commit and push your changes to update your docs site. Here is a [guide](https://docs.github.com/en/get-started/using-git/pushing-commits-to-a-remote-repository#about-git-push) on how to do that. If the GitHub app is unable to successfully deploy your changes, you can manually update your docs through our [dashboard](https://dashboard.mintlify.com).
 
     <Frame>
       ![Manual
 Update](https://mintlify.s3-us-west-1.amazonaws.com/mintlify/images/manual-update.png)
     </Frame>
   </Accordion>
-  <Accordion title="Generating API references" icon="code-branch">
+  <Accordion title="Generating API references">
     You can easily set up your API references using an OpenAPI document.
 
     1. Add your `openapi.yaml` or `openapi.json` file into your docs repository or define the `openapi` field in `docs.json` with a URL.
@@ -134,7 +122,7 @@ Update](https://mintlify.s3-us-west-1.amazonaws.com/mintlify/images/manual-updat
 
     For a complete guide on using Mintlify with OpenAPI, check out [this guide](/api-playground/openapi/setup). [This guide](/api-playground/openapi/writing-openapi) explains how to configure your API authentication methods. For manual API references definition, explore [our syntax](/api-playground/overview).
   </Accordion>
-  <Accordion title="Adding analytics" icon="chart-simple">
+  <Accordion title="Adding analytics">
     Our in-house analytics give you insights into page views, search analytics, session recordings and more. Access these on your [dashboard](https://dashboard.mintlify.com/analytics).
 
     We also support integrations with a range of analytics providers. You can find the list of providers [here](/integrations/analytics/overview).
@@ -148,7 +136,7 @@ Update](https://mintlify.s3-us-west-1.amazonaws.com/mintlify/images/manual-updat
 
 ### Publishing
 
-<Accordion title="Adding a custom domain" icon="star">
+<Accordion title="Adding a custom domain">
   Integrate your docs into your website by hosting them on a custom domain. This is included in the free plan.
 
   Navigate to your [dashboard settings](https://dashboard.mintlify.com/settings) to add a custom domain.