chore(docs): add Fern Docs Overview page

fern/docs.yml

@@ -335,6 +335,10 @@ navigation:
     layout:
       - section: Getting Started
         contents:
+          - page: Overview
+            slug: overview
+            path: ./pages/docs/getting-started/docs-overview.mdx
+            icon: fa-regular fa-book
           - page: Quickstart
             slug: quickstart
             path: ./pages/docs/getting-started/quickstart.mdx

fern/pages/docs/getting-started/docs-overview.mdx

@@ -0,0 +1,135 @@
+---
+title: Fern Docs Overview
+description: Learn about key features of Fern's Docs
+subtitle: A static site generator for developer-focused companies to build and host a beautiful, professional docs site.
+layout: overview
+---
+
+## Key Features
+
+<CardGroup cols={3}>
+  <Card 
+    title="Professional Design" 
+    icon="paintbrush" 
+    href="/learn/docs/building-your-docs/custom-css-js"
+  >
+    Match your docs to your brand with customizable colors, fonts, and styles.
+  </Card>
+
+  <Card 
+    title="Powered by OpenAPI" 
+    icon="rotate" 
+    href="/learn/docs/content/generate-api-ref"
+  >
+    Auto-generate API docs from OpenAPI and AsyncAPI specs.
+  </Card>
+
+  <Card 
+    title="Git Sync" 
+    icon="code" 
+    href="/learn/docs/content/write-markdown"
+  >
+    Version and manage docs with your Git provider using Markdown or MDX.
+  </Card>
+
+  <Card 
+    title="Interactive API Playground" 
+    icon="play" 
+    href="/learn/docs/content/api-playground"
+  >
+    Test APIs directly in the docs with auto-populated credentials.
+  </Card>
+
+  <Card 
+    title="SDK Snippets" 
+    icon="box" 
+    href="/learn/docs/config/sdk-snippets"
+  >
+    Example code auto-updates as your SDKs evolve.
+  </Card>
+
+  <Card 
+    title="Flexible Component Library" 
+    icon="puzzle-piece" 
+    href="/learn/docs/components/overview"
+  >
+    Use pre-built or custom React components for a polished look.
+  </Card>
+
+</CardGroup>
+
+## Documentation Types
+
+<Tabs>
+  <Tab title="For Developers">
+    <CardGroup cols={2}>
+      <Card 
+        title="API Reference" 
+        icon="code-branch" 
+        color="green" 
+        href="/learn/docs/content/generate-api-ref"
+      >
+        Complete API documentation auto-generated from API definitions with:
+        - Request & response examples
+        - Type definitions 
+        - Authentication details
+      </Card>
+
+      <Card 
+        title="Interactive Playground" 
+        icon="terminal" 
+        color="green" 
+        href="/learn/docs/content/api-playground"
+      >
+        Test API endpoints in real-time:
+        - Built-in request builder
+        - Response visualization
+        - Auto-populated auth credentials
+      </Card>
+    </CardGroup>
+  </Tab>
+
+  <Tab title="For Learning">
+    <CardGroup>
+      <Card 
+        title="Guides & Tutorials" 
+        icon="book-open" 
+        color="green" 
+        href="/learn/docs/getting-started/quickstart"
+      >
+        Structured learning materials including:
+        - Getting started guides
+        - Core concepts
+        - Best practices
+      </Card>
+
+      <Card 
+        title="Cookbooks & Recipes" 
+        icon="utensils" 
+        color="green" 
+        href="/learn/docs/components/overview"
+      >
+        Real-world implementation examples:
+        - Common use cases
+        - Integration patterns
+        - Code samples
+      </Card>
+    </CardGroup>
+  </Tab>
+
+  <Tab title="For Updates">
+    <Card 
+      title="Changelog" 
+      icon="clock-rotate-left" 
+      color="green" 
+      href="/learn/docs/writing-content/changelog"
+    >
+      Stay informed about:
+      - API updates
+      - Breaking changes  
+      - New features
+      - Deprecations
+      - Bug fixes
+    </Card>
+  </Tab>
+</Tabs>

pages/docs/overview.mdx

@@ -0,0 +1,56 @@
+ ---
+title: Overview
+description: Learn about key features of Fern's Docs
+---
+
+<CardGroup>
+  ## ✨ Key Features
+
+  <Card title="Professional Design" icon="paintbrush">
+    Match your docs to your brand with customizable colors, fonts, and styles.
+  </Card>
+
+  <Card title="Powered by OpenAPI" icon="rotate">
+    Auto-generate your REST API, Webhook, and WebSocket reference from your OpenAPI (formerly Swagger) and AsyncAPI specifications.
+  </Card>
+
+  <Card title="Docs-as-Code" icon="code">
+    Write and version your documentation like code using Markdown or MDX.
+  </Card>
+
+  <Card title="Interactive API Playground" icon="play">
+    Let developers test APIs directly within the docs, with sign-in support to auto-populate API credentials.
+  </Card>
+
+  <Card title="SDK Snippets" icon="box">
+    Example code auto-updates as your SDKs evolve.
+  </Card>
+
+  <Card title="Flexible Component Library" icon="puzzle-piece">
+    Use pre-built or custom React components for a polished look.
+  </Card>
+</CardGroup>
+
+<CardGroup>
+  ## 📚 Types of Content
+
+  <Card title="Guides & Tutorials" icon="book-open">
+    Step-by-step instructions and conceptual documentation to help developers get started and learn key concepts.
+  </Card>
+
+  <Card title="API Reference" icon="code-branch">
+    Comprehensive API documentation automatically generated from your OpenAPI and AsyncAPI specifications, including request/response examples and type definitions.
+  </Card>
+
+  <Card title="Interactive API Playground" icon="terminal">
+    Try API endpoints directly in the browser with a built-in playground. Authentication credentials can be automatically populated when users are signed in.
+  </Card>
+
+  <Card title="Cookbooks & Recipes" icon="utensils">
+    Practical examples and recipes for common use cases, helping developers implement specific functionality.
+  </Card>
+
+  <Card title="Changelog" icon="clock-rotate-left">
+    Keep users informed about API updates, breaking changes, and new features with a dedicated changelog section.
+  </Card>
+</CardGroup>