chore(docs): add sdk customer showcase (#5478)

* init with placeholder

* update

* add badges

* update showcase

* italics for danny

* update blog post

* fix bug

* add logos

* update image paths

* Update customer showcase introduction text

Reword opener

---------

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

fern/assets/styles.css

@@ -1,3 +1,13 @@
 .motivation p {
   max-width: unset !important;
-}
+}
+
+.showcase h2 {
+  margin-bottom: 0.25em;
+}
+
+:is(.dark) .showcase .logo-icon {
+  filter: invert(1);
+  margin-top: 0px;
+  margin-bottom: 0px;
+}

fern/docs.yml

@@ -218,6 +218,8 @@ navigation:
             path: ./pages/sdks/introduction/overview.mdx
           - page: Language Support
             path: ./pages/sdks/introduction/language-support.mdx
+          - page: Customer Showcase
+            path: ./pages/sdks/introduction/customer-showcase.mdx
           - section: Changelogs
             slug: changelog
             contents:

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

@@ -0,0 +1,191 @@
+---
+title: Customer Showcase
+---
+
+At Fern, we help businesses build and distribute world-class SDKs that developers love. From startups to global enterprises, our customers trust Fern to elevate their developer experience and simplify API integration. Below are some of the companies leveraging Fern to power their SDKs.
+
+---
+<div class="showcase">
+
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Square.svg" alt="Square" width="20px" height="20px" class="logo-icon" style={{ marginRight: '10px' }} /> Square</div>
+<span class="fern-docs-badge large green subtle rounded">public company</span>
+
+Square trusts Fern to generate and maintain **7 SDKs**, ensuring their APIs are easily accessible to developers building on any platform.  
+
+
+Check out Square's SDKs as they become generally available:
+
+<Tabs>
+  <Tab title="Go">
+    <Card title="Go SDK" icon="brands golang" iconPosition="left" href="https://github.com/square/square-go-sdk">
+      View the Go source code in GitHub
+    </Card>
+  </Tab>
+  <Tab title="TypeScript">
+    <Card title="TypeScript SDK" icon="brands node-js" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+  <Tab title="PHP">
+    <Card title="PHP SDK" icon="brands php" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+  <Tab title="Java">
+    <Card title="Java SDK" icon="brands java" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+  <Tab title="Ruby">
+    <Card title="Ruby SDK" icon="regular gem" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+  <Tab title="Python">
+    <Card title="Python SDK" icon="brands python" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+  <Tab title="C#">
+    <Card title="C# SDK" icon="brands windows" iconPosition="left">
+      _Coming soon_
+    </Card>
+  </Tab>
+</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>
+<span class="fern-docs-badge large green subtle rounded">REST</span>
+</div>
+
+Pinecone leverages Fern to create an SDK that supports **both gRPC and REST**, bridging the gap between broad compatibility and peak performance. 
+
+Check out Pinecone's C# SDK here:
+<CardGroup cols={1}>
+  <Card title="C# SDK" icon="brands windows" iconPosition="left" href="https://github.com/pinecone-io/pinecone-dotnet-client">
+    View the C# source code in GitHub
+  </Card>
+</CardGroup>
+
+<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>
+<span class="fern-docs-badge large green subtle rounded">websockets</span>
+</div>
+
+ElevenLabs uses Fern to generate SDKs with advanced capabilities for **file uploads** and **websocket communication**, enabling smooth interactions with their AI-powered audio APIs.  
+
+Check out these features in ElevenLabs' SDKs here:
+<Tabs>
+  <Tab title="Python">    
+    <CardGroup cols={2}>
+      <Card title="File Uploads" icon="regular file-arrow-up" iconPosition="left" href="https://github.com/elevenlabs/elevenlabs-python/blob/main/src/elevenlabs/dubbing/client.py#L26">
+        View the Python source code in GitHub
+      </Card>
+      <Card title="Websockets" icon="regular server" iconPosition="left" href="https://github.com/elevenlabs/elevenlabs-python/blob/main/src/elevenlabs/text_to_speech/client.py#L40">
+        View the Python source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+  <Tab title="TypeScript">
+    <CardGroup cols={2}>
+      <Card title="File Uploads" icon="regular file-arrow-up" iconPosition="left" href="https://github.com/elevenlabs/elevenlabs-js/blob/main/src/api/resources/dubbing/client/Client.ts#L49">
+        View the TypeScript source code in GitHub
+      </Card>
+      <Card title="Websockets" icon="regular server" iconPosition="left" href="https://github.com/elevenlabs/elevenlabs-js/blob/main/src/api/resources/textToSpeech/client/Client.ts#L40">
+        View the TypeScript source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+</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>
+
+Candid uses Fern to generate an SDK with built in **OAuth support**, enabling secure and seamless authentication for developers.
+
+Check out OAuth in Candid's SDK here:
+<Tabs>
+  <Tab title="Python">
+    <CardGroup cols={1}>
+      <Card title="OAuth" icon="regular lock" iconPosition="left" href="https://github.com/candidhealth/candid-python/blob/master/src/candid/core/oauth_token_provider.py">
+        View the Python source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+  <Tab title="TypeScript">
+    <CardGroup cols={1}>
+      <Card title="OAuth" icon="regular lock" iconPosition="left" href="https://github.com/candidhealth/candid-node/blob/master/src/core/auth/OAuthTokenProvider.ts">
+        View the TypeScript source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+  <Tab title="C#">
+    <CardGroup cols={1}>
+      <Card title="OAuth" icon="regular lock" iconPosition="left" href="https://github.com/candidhealth/candid-csharp/blob/master/src/Candid.Net/Core/OAuthTokenProvider.cs">
+        View the C# source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+  <Tab title="Ruby">
+    <CardGroup cols={1}>
+      <Card title="OAuth" icon="regular lock" iconPosition="left" href="https://github.com/candidhealth/candid-ruby/blob/main/lib/core/oauth.rb">
+        View the Ruby source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+</Tabs>
+
+
+---
+## <div style={{ display: 'flex', alignItems: 'center', height: '1.5em' }}><img src="logos/Humanloop.svg" alt="Humanloop" width="24px" height="24px" class="logo-icon" style={{ marginRight: '10px' }} /> Humanloop</div> 
+<span class="fern-docs-badge large green subtle rounded">SSE</span>
+
+Humanloop uses Fern to support **server-sent events (SSE)** in their SDKs, allowing developers to build robust AI features with LLMs using best-in-class tooling. 
+
+Check out SSE in Humanloop's SDK here:
+<Tabs>
+  <Tab title="Python">
+    <CardGroup cols={1}>
+      <Card title="Server-Sent Events" icon="regular server" iconPosition="left" href="https://github.com/humanloop/humanloop-python/blob/master/src/humanloop/prompts/client.py#L509">
+        View the Python source code in GitHub
+      </Card>
+    </CardGroup>
+  </Tab>
+  <Tab title="TypeScript">
+    <CardGroup cols={1}>
+      <Card title="Server-Sent Events" icon="regular server" iconPosition="left" href="https://github.com/humanloop/humanloop-node/blob/master/src/api/resources/prompts/client/Client.ts#L287">
+        View the TypeScript source code in GitHub
+      </Card>
+    </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>
+
+Abound relies on Fern to manage a **full suite of integration tests**, ensuring their SDKs and APIs deliver a reliable experience for partners and developers. 
+
+Check out Abound's integration tests here:
+<CardGroup cols={1}>
+  <Card title="TypeScript SDK" icon="brands node-js" iconPosition="left" href="https://github.com/withabound/abound-node/tree/main/tests">
+    View the source code for integration tests
+  </Card>
+</CardGroup>
+
+</div>
+
+---
+
+Ready to streamline your SDK development? [Get started with Fern today](https://buildwithfern.com/contact).