Add components overview page

components.mdx

@@ -0,0 +1,104 @@
+---
+title: "Components"
+description: "Enhance your documentation with interactive and visual components."
+---
+
+Mintlify provides a library of built-in components to make your documentation more engaging and easier to navigate. Use these components to organize content, highlight important information, and create interactive experiences.
+
+## Content organization
+
+<Card title="Accordions" icon="chevron-down" href="/components/accordions">
+  Expandable sections for progressive disclosure of content.
+</Card>
+
+<Card title="Tabs" icon="folder" href="/components/tabs">
+  Organize related content into switchable tabbed views.
+</Card>
+
+<Card title="Steps" icon="list-ordered" href="/components/steps">
+  Display sequential instructions in a numbered format.
+</Card>
+
+<Card title="Columns" icon="columns-3" href="/components/columns">
+  Arrange content side by side in responsive layouts.
+</Card>
+
+## Visual elements
+
+<Card title="Cards" icon="square" href="/components/cards">
+  Highlight content with customizable containers and icons.
+</Card>
+
+<Card title="Callouts" icon="message-square-warning" href="/components/callouts">
+  Emphasize important information with styled alerts.
+</Card>
+
+<Card title="Frames" icon="frame" href="/components/frames">
+  Add borders and styling to images and content.
+</Card>
+
+<Card title="Icons" icon="smile" href="/components/icons">
+  Add visual indicators using the Lucide icon library.
+</Card>
+
+## Interactive elements
+
+<Card title="Tooltips" icon="message-circle" href="/components/tooltips">
+  Display additional information on hover.
+</Card>
+
+<Card title="Expandables" icon="chevrons-down" href="/components/expandables">
+  Show and hide detailed content on demand.
+</Card>
+
+<Card title="Code groups" icon="code" href="/components/code-groups">
+  Display multiple code examples in tabbed views.
+</Card>
+
+## Data display
+
+<Card title="Responses" icon="arrow-left-right" href="/components/responses">
+  Document API response structures and fields.
+</Card>
+
+<Card title="Fields" icon="text-cursor-input" href="/components/fields">
+  Display parameter and property definitions.
+</Card>
+
+<Card title="Examples" icon="file-code" href="/components/examples">
+  Show request and response examples side by side.
+</Card>
+
+## Specialized components
+
+<Card title="Mermaid diagrams" icon="git-branch" href="/components/mermaid-diagrams">
+  Create flowcharts, sequence diagrams, and more.
+</Card>
+
+<Card title="Tiles" icon="layout-grid" href="/components/tiles">
+  Display content in a grid of clickable tiles.
+</Card>
+
+<Card title="Panel" icon="panel-right" href="/components/panel">
+  Create sidebar panels for supplementary content.
+</Card>
+
+<Card title="Banner" icon="flag" href="/components/banner">
+  Display prominent announcements at the top of pages.
+</Card>
+
+<Card title="Badge" icon="award" href="/components/badge">
+  Add inline labels and status indicators.
+</Card>
+
+<Card title="Color" icon="palette" href="/components/color">
+  Display color swatches with hex values.
+</Card>
+
+<Card title="Update" icon="bell" href="/components/update">
+  Highlight new or updated content.
+</Card>
+
+<Card title="View" icon="eye" href="/components/view">
+  Conditionally show content based on context.
+</Card>

docs.json

@@ -27,6 +27,7 @@
                 "pages": [
                   "index",
                   "quickstart",
+                  "components",
                   "installation",
                   "editor",
                   "ai-native",