(sdks) Add links to Capabilities page

fern/products/docs/docs.yml

@@ -44,6 +44,9 @@ navigation:
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots
+          - page: Badges
+            path: ./pages/component-library/default-components/badges.mdx
+            icon: fa-regular fa-ribbon
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
             icon: fa-duotone fa-arrow-pointer

fern/products/docs/pages/component-library/default-components/badges.mdx

@@ -0,0 +1,124 @@
+---
+title: Badges
+description: Display small labels for status, versions, and metadata inline with your content.
+---
+
+Use the `Badge` component to display small pieces of information, such as status indicators, categories, versions, or release dates.
+
+To display longer notes, use the [Callouts component](/docs/writing-content/components/callouts) instead. 
+
+<Tabs>
+<Tab title="Badge example">
+
+### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+
+</Tab>
+<Tab title="Markdown">
+
+```jsx
+### Plant Care API <Badge intent="success">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+```
+
+</Tab>
+</Tabs>
+
+## Badge varieties
+
+### Success
+
+<Badge intent="success">Success</Badge>
+
+```jsx
+<Badge intent="success">Success</Badge>
+```
+
+### Note
+
+<Badge intent="note">Note</Badge>
+
+```jsx
+<Badge intent="note">Note</Badge>
+```
+
+### Tip
+
+<Badge intent="tip">Tip</Badge>
+
+```jsx
+<Badge intent="tip">Tip</Badge>
+```
+
+### Warning
+
+<Badge intent="warning">Warning</Badge>
+
+```jsx
+<Badge intent="warning">Warning</Badge>
+```
+
+### Error
+
+<Badge intent="error">Error</Badge>
+
+```jsx
+<Badge intent="error">Error</Badge>
+```
+
+### Info
+
+<Badge intent="info">Info</Badge>
+
+```jsx
+<Badge intent="info">Info</Badge>
+```
+
+### Launch
+
+<Badge intent="launch">Launch</Badge>
+
+```jsx
+<Badge intent="launch">Launch</Badge>
+```
+
+### Check
+
+<Badge intent="check">Check</Badge>
+
+```jsx
+<Badge intent="check">Check</Badge>
+```
+
+## Properties
+
+Customize your Badges using the following properties:
+
+<ParamField path="intent" type="string" required={true}>
+  The semantic color of the badge. Available options: `success`, `note`, `tip`, `warning`, `error`, `info`, `launch`, `check`
+</ParamField>
+
+<ParamField path="minimal" type="boolean" required={false} default="false">
+  Displays the badge with a more subtle background style. Can be combined with `outlined`.
+</ParamField>
+
+<ParamField path="outlined" type="boolean" required={false} default="false">
+  Displays the badge with an outlined border style. Can be combined with `minimal`.
+</ParamField>
+
+<br />
+
+<Tabs>
+<Tab title="Success badge with different styles">
+<Badge intent="success">Default</Badge> <br />
+<Badge intent="success" minimal>Minimal</Badge> <br />
+<Badge intent="success" outlined>Outlined</Badge> <br />
+<Badge intent="success" minimal outlined>Minimal and outlined</Badge> 
+</Tab>
+<Tab title="Markdown">
+```markdown
+<Badge intent="success">Default</Badge> <br />
+<Badge intent="success" minimal>Minimal</Badge> <br />
+<Badge intent="success" outlined>Outlined</Badge> <br />
+<Badge intent="success" minimal outlined>Minimal and outlined</Badge> 
+```
+</Tab>
+</Tabs>

fern/products/docs/pages/component-library/default-components/callouts.mdx

@@ -3,7 +3,9 @@ title: 'Callouts'
 description: 'Highlight important information, warnings, or tips in your documentation.'
 ---
 
-Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers.
+Callouts help highlight important information, warnings, or tips in your documentation. They provide visual emphasis through distinct styling and icons to make key messages stand out to readers. 
+
+To display very short pieces of information like status indicators and version numbers, use the [Badges component](/docs/writing-content/components/badges)
 
 ## Callout varieties
 

fern/products/sdks/capabilities.mdx

@@ -1,96 +1,191 @@
 ---
 title: Capabilities
-description: Fern SDKs are built to have every feature you need.
 subtitle: Fern SDKs are built to have every feature you need.
+description: Fern SDKs are built to have every feature you need.
 layout: overview
 ---
 
 <CardGroup cols={3}>
   <Card title="Strongly Typed" icon="fa-duotone fa-shield-halved">
     Move fast and break nothing with type safety
+
   </Card>
-  <Card title="Idiomatic Method Names" icon="fa-duotone fa-code">
+
+  <Card title="Idiomatic Method Names" icon="fa-duotone fa-code" href="/sdks/deep-dives/customize-method-names">
     Fine-tune SDK resources and method names
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
-  <Card title="Schema Validation" icon="fa-duotone fa-check-circle">
+
+  <Card title="Schema Validation" icon="fa-duotone fa-check-circle" href="/sdks/deep-dives/testing#mock-server-tests">
     Fail fast if payloads diverge from your schema
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Discriminated Unions" icon="fa-duotone fa-code-branch">
     Fern SDKs include support for discriminated unions
+
   </Card>
+
   <Card title="Multipart Form Data" icon="fa-duotone fa-upload">
     SDKs that handle multipart form data
+
   </Card>
+
   <Card title="Forward Compatibility" icon="fa-duotone fa-arrow-right">
     SDKs that are fault-tolerant as your API evolves
+
   </Card>
-  <Card title="Registry Publishing" icon="fa-duotone fa-box">
+
+  <Card title="Registry Publishing" icon="fa-duotone fa-box" href="/sdks/generators/typescript/publishing">
     Fern will automatically publish your SDKs to registries like npm, PyPI, and Maven
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Auto-Pagination" icon="fa-solid fa-list" href="/sdks/deep-dives/auto-pagination">
     Paginate through API responses easily with offset, cursor, and link-based pagination.
-    <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
-      Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
-    </p>
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
-  <Card title="OAuth Token Refresh" icon="fa-duotone fa-arrows-rotate">
+
+  <Card title="OAuth Token Refresh" icon="fa-duotone fa-arrows-rotate" href="/api-definitions/ferndef/authentication#oauth-client-credentials">
     Fern supports OAuth as a first class citizen
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Retries with Backoff" icon="fa-duotone fa-repeat" href="/sdks/deep-dives/retries-with-backoff">
     Automatically retry failed requests with exponential backoff
-    <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
-      Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
-    </p>
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Webhook Signature Verification" icon="fa-duotone fa-key">
     Verify the signature of incoming webhook requests
+
   </Card>
+
   <Card title="Idempotency Headers" icon="fa-solid fa-shield" href="/sdks/deep-dives/idempotency">
     Built-in protection against duplicate submissions
-    <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
-      Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
-    </p>
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Server-Sent Events" icon="fa-duotone fa-broadcast-tower">
     Stream JSON data from your server to your client (i.e. chat completions)
+
   </Card>
+
   <Card title="Testing" icon="fa-duotone fa-flask" href="/sdks/deep-dives/testing">
     Auto-generated and handwritten tests to ensure your SDK works in production
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Code Snippets" icon="fa-duotone fa-brackets-curly">
     No longer depend on manually written code snippets
+
   </Card>
+
   <Card title="Augment with Custom Code" icon="fa-duotone fa-puzzle-piece" href="/sdks/overview/custom-code">
     Extend the generated SDK to provide additional functionality
-    <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
-      Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
-    </p>
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="Merging Multiple APIs" icon="fa-duotone fa-code-merge" href="/sdks/overview/quickstart#configure-multiple-apis">
     Multiple API Definitions. One SDK.
-    <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
-      Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
-    </p>
+
+  <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
+    Learn more
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+    <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+  </p>
+
   </Card>
+
   <Card title="WebSockets" icon="fa-duotone fa-bolt">
     Send and receive messages over WebSockets
+
   </Card>
+
   <Card title="Model Context Protocol" icon="fa-duotone fa-layer-group" href="/sdks/generators/mcp-server">
     Learn how to use the Model Context Protocol (MCP) to integrate AI capabilities with your Fern documentation
+
     <p className="text-(color:--grayscale-a11) font-bold mt-2 flex items-center gap-1">
       Learn more
-      <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
-      <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
+
+      <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0 h-4 w-4" noZoom />
+
+      <img src="https://files.buildwithfern.com/fern.docs.buildwithfern.com/learn/2025-09-30T17:39:54.370Z/products/home/pages/images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0 h-4 w-4" noZoom />
     </p>
   </Card>
 </CardGroup>
+