07 23 capabilities 2 (#134)

Co-authored-by: Devin Logan <[email protected]>
Co-authored-by: Kapil Gowru <[email protected]>

Author: 3 people

fern/assets/styles.css

@@ -348,7 +348,7 @@ a[href*="changelog"] svg {
     }
   }
 }
-/*** START -- SDKS HOMEPAGE STYLING ***/
+/*** END -- SDKS HOMEPAGE STYLING ***/
 
 /*** START -- LANDING PAGE STYLING ***/
 :is(.dark) {

fern/products/sdks/capabilities.mdx

@@ -1,64 +1,91 @@
 ---
 title: Capabilities
-description: 
+description: Fern SDKs are built to have feature you need. 
+subtitle: Fern SDKs are built to have feature you need. 
+layout: overview
 ---
 
-<CardGroup cols={2}>
-  <Card title="Strongly Typed" icon="fa-solid fa-shield-halved">
+<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-solid fa-code">
+  <Card title="Idiomatic Method Names" icon="fa-duotone fa-code">
     Fine-tune SDK resources and method names
   </Card>
-  <Card title="Schema Validation" icon="fa-solid fa-check-circle">
+  <Card title="Schema Validation" icon="fa-duotone fa-check-circle">
     Fail fast if the payloads diverge from your schema
   </Card>
-  <Card title="Discriminated Unions" icon="fa-solid fa-code-branch">
+  <Card title="Discriminated Unions" icon="fa-duotone fa-code-branch">
     Fern SDKs include idiomatic support for discriminated unions
   </Card>
-  <Card title="Multipart Form Data" icon="fa-solid fa-upload">
+  <Card title="Multipart Form Data" icon="fa-duotone fa-upload">
     SDKs that handle multipart form data
   </Card>
-  <Card title="Forward Compatibility" icon="fa-solid fa-arrow-right">
+  <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-solid fa-box">
+  <Card title="Registry Publishing" icon="fa-duotone fa-box">
     Fern will automatically publish your SDKs to registries like NPM, PyPI, and Maven
   </Card>
   <Card title="Auto-Pagination" icon="fa-solid fa-list" href="/sdks/deep-dives/configure-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>
   </Card>
-  <Card title="OAuth Token Refresh" icon="fa-solid fa-arrows-rotate">
+  <Card title="OAuth Token Refresh" icon="fa-duotone fa-arrows-rotate">
     Fern supports OAuth as a first class citizen
   </Card>
-  <Card title="Retries with Backoff" icon="fa-solid fa-repeat">
+  <Card title="Retries with Backoff" icon="fa-duotone fa-repeat">
     Automatically retry failures with exponential backoff
   </Card>
-  <Card title="Webhook Signature Verification" icon="fa-solid fa-key">
+  <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/configure-idempotency">
     SDKs that safely support retrying requests
+    <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>
   </Card>
-  <Card title="Server-Sent Events" icon="fa-solid fa-broadcast-tower">
+  <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="Integration Tests" icon="fa-solid fa-flask">
+  <Card title="Integration Tests" icon="fa-duotone fa-flask">
     Test your SDK against a mock server
   </Card>
-  <Card title="Code Snippets" icon="fa-solid fa-brackets-curly">
+  <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-solid fa-puzzle-piece" href="/sdks/generators/typescript/adding-custom-code">
+  <Card title="Augment with Custom Code" icon="fa-duotone fa-puzzle-piece" href="/sdks/generators/typescript/adding-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>
   </Card>
-  <Card title="Merging Multiple APIs" icon="fa-solid fa-code-merge" href="/sdks/overview/set-up-the-fern-folder#configure-multiple-apis">
+  <Card title="Merging Multiple APIs" icon="fa-duotone fa-code-merge" href="/sdks/overview/set-up-the-fern-folder#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>
   </Card>
-  <Card title="WebSockets" icon="fa-solid fa-bolt">
+  <Card title="WebSockets" icon="fa-duotone fa-bolt">
     Send and receive messages over WebSockets
   </Card>
-  <Card title="Model Context Protocol" icon="fa-solid fa-layer-group" href="/sdks/generators/mcp-server">
+  <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 />
+    </p>
   </Card>
 </CardGroup>