Landing page updates

index.mdx

@@ -1,75 +1,130 @@
 ---
-title: "Introduction"
+title: "Documentation"
+sidebarTitle: "Introduction"
 description: "Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers."
 mode: "frame"
 keywords: ["overview", "platform", "getting started", "features"]
 ---
 
-export const HeroCard = ({ filename, title, description, href }) => {
+export const HeroCard = ({ filename, title, children }) => {
   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">
+    <div className="group pb-8 max-w-md mx-auto">
+      <div className="max-w-prose">
+        <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 w-full h-auto"
+        />
+        <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 w-full h-auto"
+        />
+      </div>
+      <h2 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
         {title}
-      </h3>
-      <span className="mt-1.5">{description}</span>
-    </a>
+      </h2>
+      <style>{`
+        .hero-card-content ul {
+          list-style-type: disc;
+          padding-left: 1.5rem;
+          margin: 0.5rem 0;
+        }
+        .hero-card-content li {
+          margin-bottom: 0.25rem;
+        }
+        .hero-card-content a {
+          color: #166E3F;
+          text-decoration: underline;
+        }
+        .dark .hero-card-content a {
+          color: #26BD6C;
+        }
+        .hero-card-content a:hover {
+          opacity: 0.8;
+        }
+      `}</style>
+      <div className="hero-card-content mt-1 font-normal text-base leading-6 text-gray-600 dark:text-gray-400 max-w-none">
+        {children}
+      </div>
+    </div>
   );
 };
 
-<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"
-      alt="Decorative background image."
-    />
-    <img
-      src="/images/hero/background-dark.png"
-      className="hidden dark:block pointer-events-none"
-      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>
+import { AccordionRow, AccordionRowItem } from '/snippets/accordion-row.mdx';
 
-    <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 className="relative">
+  <div className="relative">
+    <div className="absolute inset-0 z-0">
+      <img
+        src="/images/hero/background-light.png"
+        className="block dark:hidden pointer-events-none w-full h-full object-cover"
+        alt="Decorative background image."
+      />
+      <img
+        src="/images/hero/background-dark.png"
+        className="hidden dark:block pointer-events-none w-full h-full object-cover"
+        alt="Decorative background image."
+      />
+    </div>
+    <div className="relative z-10 py-12 px-6 md:px-8">
+      <h1 className="text-4xl font-bold text-gray-900 dark:text-zinc-50 mb-4">
+        Documentation
+      </h1>
+      <p className="text-lg text-gray-700 dark:text-gray-300">
+        Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers.
+      </p>
     </div>
+  </div>
+
+  <div className="px-6 md:px-8 max-w-6xl mx-auto">
+    <AccordionRow>
+      <AccordionRowItem title="Create a new documentation site">
+        1. Follow the [quickstart](/quickstart) to deploy your documentation site.
+        2. Set a [custom domain](/customize/custom-domain).
+        3. Configure [global settings](/settings).
+      </AccordionRowItem>
+      <AccordionRowItem title="Start with an existing API">
+        1. Follow the [quickstart](/quickstart) to deploy your documentation site.
+        2. Add your [OpenAPI specification](/api-playground/openapi-setup).
+        3. Set a [custom domain](/customize/custom-domain).
+      </AccordionRowItem>
+      <AccordionRowItem title="Migrate from another platform">
+        1. Follow the [migration guide](/migration) to move your documentation to Mintlify.
+        2. Read the [quickstart](/quickstart) to become familiar with the platform.
+      </AccordionRowItem>
+    </AccordionRow>
 
     <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="rocket" title="Ship fast and iterate">
+        Your documentation automatically [deploys](/deploy/deployments) when you push changes. Share [previews](/deploy/preview-deployments) with your team and act on user [feedback](/insights/feedback).
+      </HeroCard>
 
       <HeroCard
         filename="cli"
-        title="CLI installation"
-        description="Install the CLI to preview and develop your docs locally"
-        href="/installation"
-      />
+        title="Collaborate with your entire team"
+      >
+        Let your team choose their preferred workflow. Work locally with the [CLI](/installation), in a browser with the [web editor](/editor), or add the [agent](/ai/agent) to your Slack workspace.
+      </HeroCard>
 
       <HeroCard
         filename="editor"
-        title="Web editor"
-        description="Make quick updates and manage content with our browser-based editor"
-        href="/editor"
-      />
+        title="Help your users find answers"
+      >
+        All sites hosted on Mintlify are optimized for AI tools and search engines out of the box.
+
+        - Set up the [assistant](/ai/assistant) so that users can chat with your documentation.
+        - Customize your [SEO](/optimize/seo) settings to help search engines find your documentation.
+        - Add a [contextual menu](/ai/contextual-menu) that lets users quickly query external AI tools, connect to your MCP server, and copy pages as context with one click.
+      </HeroCard>
 
       <HeroCard
         filename="components"
-        title="Components"
-        description="Build rich, interactive documentation with our ready-to-use components"
-        href="/text"
-      />
+        title="Documentation that stays in sync"
+      >
+        - Create a workflow for the [agent to update your documentation](/guides/automate-agent).
+        - Automatically generate your OpenAPI specification into an interactive [API playground](/api-playground/overview).
+        - Automatically generate an interactive [API playground](/api-playground/overview) for all your endpoints.
+      </HeroCard>
     </div>
   </div>
 </div>

snippets/accordion-row.mdx

@@ -0,0 +1,65 @@
+export const AccordionRow = ({ children }) => {
+  return (
+    <>
+      <style>{`
+        details.accordion-row-item[open] > summary > svg {
+          transform: rotate(90deg);
+        }
+      `}</style>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 my-8">
+        {children}
+      </div>
+    </>
+  );
+};
+
+export const AccordionRowItem = ({ title, children }) => {
+  return (
+    <div className="accordion-item-wrapper">
+      <style>{`
+        .accordion-item-wrapper ul {
+          list-style-type: disc !important;
+          padding-left: 1.5rem !important;
+          margin: 0.5rem 0 !important;
+        }
+        .accordion-item-wrapper li {
+          list-style-type: disc !important;
+          margin-bottom: 0.25rem !important;
+          margin-left: 1.5rem !important;
+          display: list-item !important;
+        }
+        .accordion-item-wrapper a {
+          color: #166E3F !important;
+          text-decoration: underline !important;
+        }
+        .dark .accordion-item-wrapper a {
+          color: #26BD6C !important;
+        }
+        .accordion-item-wrapper a:hover {
+          opacity: 0.8 !important;
+        }
+      `}</style>
+      <details className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden accordion-row-item">
+        <summary className="px-4 py-4 text-left font-semibold text-gray-900 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-between cursor-pointer list-none">
+          <span>{title}</span>
+          <svg
+            className="w-5 h-5 transition-transform flex-shrink-0 ml-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </summary>
+        <div className="px-4 py-4 border-t border-gray-200 dark:border-gray-700 prose prose-sm prose-gray dark:prose-invert max-w-none max-h-64 overflow-y-auto">
+          {children}
+        </div>
+      </details>
+    </div>
+  );
+};