feat(docs): docs customer showcase (#5495)

* docs customer showcase

* update descriptions

* update blurb

---------

Co-authored-by: fern-bot <[email protected]>
Co-authored-by: Danny Sheridan <[email protected]>

fern/docs.yml

@@ -354,6 +354,9 @@ navigation:
           - page: Publish your Docs
             path: ./pages/docs/getting-started/publishing-your-docs.mdx
             icon: fa-regular fa-upload
+          - page: Customer Showcase
+            path: ./pages/docs/getting-started/customer-showcase.mdx
+            icon: fa-regular fa-stars
 
       - section: Building Your Docs
         contents:

fern/pages/docs/getting-started/customer-showcase.mdx

@@ -0,0 +1,79 @@
+---
+title: Customer Showcase
+---
+
+Fern Docs is a tool for creating beautiful, customizable developer documentation. Achieve best-in-class docs with a modern and branded look and feel, powered by MDX and your API specification, and integrated seamlessly with CI/CD. Below are some companies building with Fern to elevate their developer experience.
+
+<div class="showcase">
+---
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Webflow.svg" alt="Webflow" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Webflow</div>
+<span class="fern-docs-badge large green subtle rounded">Auto-populated API key</span>
+
+Webflow uses Fern's API Explorer to auto-populate API keys using their custom authentication flow, making it easy for developers to authenticate once and then focus on developing.
+
+Check out Webflow's API Explorer here:
+
+<CardGroup cols={1}>
+  <Card title="Auto-populated API key" icon="regular lock-open" iconPosition="left" href="https://developers.webflow.com/data/reference/sites/list?playground=%2Fdata%2Freference%2Fsites%2Flist">
+    View the Webflow API Explorer
+  </Card>
+</CardGroup>
+
+---
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Cohere.svg" alt="Cohere" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Cohere</div>
+<div style={{ display: 'flex', alignItems: 'center' }}>
+<span class="fern-docs-badge large green subtle rounded" style="margin-right: 10px">SSE</span>
+<span class="fern-docs-badge large green subtle rounded">Landing page</span>
+</div>
+
+Cohere uses Fern's out-of-the-box components to create a landing page that orients users and aids in developer experience. Their API Explorer further aids in that developer experience, allowing users to test out endpoints in their API, including server-sent events.
+
+Check out Cohere's documentation here:
+<CardGroup cols={2}>
+  <Card title="Landing page" icon="regular signs-post" iconPosition="left" href="https://docs.cohere.com/get-started/overview">
+    View Cohere's landing page
+  </Card>
+  <Card title="Server-sent events" icon="regular server" iconPosition="left" href="https://docs.cohere.com/reference/chat-stream">
+    View the Cohere API Reference
+  </Card>
+</CardGroup>
+
+---
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Cartesia.svg" alt="Cartesia" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Cartesia</div>
+<div style={{ display: 'flex', alignItems: 'center' }}>
+<span class="fern-docs-badge large green subtle rounded" style="margin-right: 10px">WebSockets</span>
+<span class="fern-docs-badge large green subtle rounded">Custom styling</span>
+</div>
+
+Cartesia leverages Fern's custom styling capabilities to create modern and branded documentation. They pair these aesthetics with an API Explorer that supports WebSockets, allowing developers to test their Text-To-Speech streaming in real-time.
+
+Check out Cartesia's documentation here:
+<CardGroup cols={2}>
+  <Card title="Custom styling" icon="regular paintbrush-fine" iconPosition="left" href="https://docs.cartesia.ai/get-started/overview">
+    View Cartesia's documentation overview
+  </Card>
+  <Card title="WebSockets" icon="regular comments" iconPosition="left" href="https://docs.cartesia.ai/api-reference/tts/tts">
+    View the Cartesia API Reference
+  </Card>
+</CardGroup>
+
+---
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Vellum.svg" alt="Vellum" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Vellum</div>
+<span class="fern-docs-badge large green subtle rounded" style="margin-right: 10px">SDK documentation</span>
+
+Vellum takes advantage of Fern's adaptable layout and styling capabilities to create custom documentation for their UI SDK, in addition to using Fern's auto-generated API reference for their client libraries (which are generated by Fern, as well).
+
+Check out their references here:
+<CardGroup cols={2}>
+  <Card title="Custom SDK documentation" icon="regular tools" iconPosition="left" href="https://docs.vellum.ai/developers/workflows-sdk/api-reference/nodes#search-node">
+    View Vellum's SDK documentation
+  </Card>
+  <Card title="Auto-generated API reference" icon="regular file" iconPosition="left" href="https://docs.vellum.ai/developers/client-sdk/prompts/execute-prompt">
+    View Vellum's API reference
+  </Card>
+</CardGroup>
+
+---
+</div>
+
+Ready to build best-in-class documentation? [Get started with Fern today](https://buildwithfern.com/learn/docs/getting-started/quickstart).  

fern/pages/sdks/introduction/customer-showcase.mdx

@@ -54,7 +54,6 @@ Check out Square's SDKs as they become generally available:
 </Tabs>
 
 ---
-
 ## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Pinecone.svg" alt="Pinecone" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Pinecone</div>
 <div style={{ display: 'flex', alignItems: 'center' }}>
 <span class="fern-docs-badge large green subtle rounded" style="margin-right: 10px">gRPC</span>
@@ -73,8 +72,8 @@ Check out Pinecone's C# SDK here:
 <Tip>
 Read about [the first auto-generated SDK](https://buildwithfern.com/blog/pinecone) with gRPC and REST.
 </Tip>
----
 
+---
 ## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/ElevenLabs.svg" alt="ElevenLabs" width="16px" height="16px" class="logo-icon" style={{ marginRight: '10px' }} /> ElevenLabs</div>
 <div style={{ display: 'flex', alignItems: 'center' }}>
 <span class="fern-docs-badge large green subtle rounded" style="margin-right: 10px">File uploads</span>
@@ -108,7 +107,6 @@ Check out these features in ElevenLabs' SDKs here:
 </Tabs>
 
 ---
-
 ## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Candid.svg" alt="Candid" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Candid</div>  
 <span class="fern-docs-badge large green subtle rounded">OAuth</span>
 
@@ -170,8 +168,8 @@ Check out SSE in Humanloop's SDK here:
     </CardGroup>
   </Tab>
 </Tabs>
----
 
+---
 ## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Abound.svg" alt="Abound" width="24px" height="24px" class="logo-icon" style={{ marginRight: '10px' }} /> Abound</div> 
 <span class="fern-docs-badge large green subtle rounded">Integration tests</span>