feat: new home page (#2)

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

Author: fern-support

fern/pages/welcome.mdx

@@ -1,7 +1,7 @@
 ---
 description: Input OpenAPI. Output SDKs and Docs.
 slug: /
-layout: overview
+layout: custom
 hide-toc: true
 ---
 

fern/products/home/pages/images/ask-fern.png

@@ -2,10 +2,38 @@
 title: The Fern Platform
 description: Input OpenAPI. Output SDKs and Docs.
 slug: /
-layout: overview
 hide-toc: true
+layout: overview
 ---
 
+<style>
+  {`
+    header[class="my-8 space-y-2"] {
+      display: none;
+    } 
+
+    .fern-button.normal.secondary {
+      background-color: var(--grayscale-a3);
+
+      &:hover {
+        background-color: var(--grayscale-a4);
+      }
+    }
+
+    .fern-button.normal.tertiary:hover {
+      background-color: var(--grayscale-a3);
+    }
+
+    .card-img {
+      height: 56px;
+      width: auto;
+    }
+
+    .card-tag {
+      border: 1px solid var(--grayscale-a6);
+    }
+  `}
+</style>
 {/* <style>
 {`
   .background-wrapper {
@@ -94,35 +122,118 @@ hide-toc: true
   <div className="gradient-radial hero-5 is-blue"> </div>
 </div> */}
 
-Fern allows developers to instantly transform your OpenAPI into SDKs and Docs. Engineering teams build with Fern to offer a best-in-class developer experience.
-
-## Products
-
-<Cards cols={3}>
-  <Card
-    title="SDKs"
-    icon="fa-solid fa-code"
-    href="/learn/sdk/fern-sdks/overview"
-  >
-    Generate client libraries in multiple languages
-  </Card>
-  <Card
-    title="Docs"
-    icon="fa-regular fa-book"
-    href="/learn/docs/guides/guides/getting-started/overview"
-  >
-    A beautiful, interactive documentation website
-  </Card>
-  <Card
-    title="Ask Fern"
-    icon="fa-solid fa-search" 
-    href="/learn/ask-fern/getting-started/what-is-ask-fern"
-  >
-    Use an AI search to let users find answers in your documentation instantly 
-  </Card>
+# Build with Fern
+
+<Cards cols={2}>
+  <div class="fern-card not-prose rounded-3 relative block border p-6 text-base">
+    <div class="flex items-start flex-col space-y-3">
+      <div class="flex justify-between items-center gap-2 w-full">
+        <img src="./images/sdks.png" alt="SDKs" class="card-img"/>
+        <div class="flex flex-wrap gap-2">
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">Open source</div>
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">Self hosted</div>
+        </div>
+      </div>
+      <div class="w-full space-y-1 overflow-hidden">
+        <div class="text-body text-base font-semibold">SDKs</div>
+        <div class="text-(color:--grayscale-a11)">Generate client libraries in multiple languages</div>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <button class="fern-button normal secondary gap-2">
+          Documentation
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          Quickstart
+          <Icon icon="arrow-right" size="3" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="fern-card not-prose rounded-3 relative block border p-6 text-base">
+    <div class="flex items-start flex-col space-y-3">
+      <div class="flex justify-between items-center gap-2 w-full">
+        <img src="./images/docs.png" alt="Docs" className="card-img"/>
+        <div class="flex flex-wrap gap-2">
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">Open source</div>
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">Cloud</div>
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">On premises</div>
+        </div>
+      </div>
+      <div class="w-full space-y-1 overflow-hidden">
+        <div class="text-body text-base font-semibold">Docs</div>
+        <div class="text-(color:--grayscale-a11)">A beautiful, interactive documentation website</div>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <button class="fern-button filled normal secondary gap-2">
+          Documentation
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          Quickstart
+          <Icon icon="arrow-right" size="3" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="fern-card not-prose rounded-3 relative block border p-6 text-base">
+    <div class="flex items-start flex-col space-y-3">
+      <div class="flex justify-between items-center gap-2 w-full">
+      <img src="./images/ask-fern.png" alt="Ask Fern" class="card-img"/>
+        <div class="flex flex-wrap gap-2">
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">Cloud</div>
+          <div class="card-tag rounded-full text-(color:--grayscale-a11) px-2 py-0.5 text-sm">On premises</div>
+        </div>
+      </div>
+      <div class="w-full space-y-1 overflow-hidden">
+        <div class="text-body text-base font-semibold">Ask Fern</div>
+        <div class="text-(color:--grayscale-a11)">Use an AI search to let users find answers in your documentation instantly</div>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <button class="fern-button filled normal secondary gap-2">
+          Documentation
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          Quickstart
+          <Icon icon="arrow-right" size="3" />
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="fern-card not-prose rounded-3 relative block border p-6 text-base">
+    <div class="flex items-start h-full justify-end flex-col space-y-3">
+      <div class="w-full space-y-1 overflow-hidden">
+        <div class="text-body text-base font-semibold">Start from your API spec</div>
+        <div class="text-(color:--grayscale-a11)">Work with one or more API definitions out of the box.</div>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <button class="fern-button filled normal secondary gap-2">
+          OpenAPI
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          AsyncAPI
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          OpenRPC
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          Fern Definition
+          <Icon icon="arrow-right" size="3" />
+        </button>
+        <button class="fern-button normal tertiary gap-2">
+          gRPC
+          <Icon icon="arrow-right" size="3" />
+        </button>
+      </div>
+    </div>
+  </div>
 </Cards>
 
-## Motivation
+## Community
 
 Stripe, Twilio, and AWS have the resources to invest in internal tooling for developer 
 experience. They provide SDKs (aka client libraries) in multiple languages and developer documentation
@@ -131,9 +242,9 @@ that stays up-to-date.
 We are building Fern to productize this process and make it accessible to all
 software companies.
 
-## Get Support
+## Help
 
-We love talking to users! Reach out via your preferred support channel so we can help you succeed with Fern.
+We’re lightning-fast with support - you’ll typically hear back from us in hours, not days! 
 
 1. 💬 Message us in your Dedicated Slack Channel (for paid customers)
 2. 🤝 [Join our community Slack](https://buildwithfern.com/slack)

fern/products/home/pages/images/ask-fern.svg

@@ -5,4 +5,4 @@ description: Overview of Fern SDKs.
 
 # Overview
 
-Welcome to the Fern SDKs documentation! Here you'll find information about all supported SDKs, their features, and how to get started. 
+Welcome to the Fern SDKs documentation! Here you'll find information about all supported SDKs, their features, and how to get started.