feat: examples library, update examples on introduction page

Author: goosewin

fern/docs.yml

@@ -95,9 +95,9 @@ navigation:
     layout:
       - section: Get started
         contents:
-          - page: Quickstart
-            icon: fa-light fa-rocket
-            path: quickstart/dashboard.mdx
+          - page: Introduction
+            icon: fa-light fa-info-circle
+            path: quickstart/introduction.mdx
           - page: Phone calls
             icon: fa-solid fa-phone
             path: quickstart/phone.mdx

fern/examples.mdx

@@ -1,20 +1,64 @@
 ---
-title: Examples
+title: Examples Library
 subtitle: Explore complete examples with step-by-step instructions to build with Vapi
 slug: examples
 ---
 
 <CardGroup cols={2}>
-  <Card title="Outbound Sales" icon="phone" href="/examples/outbound-sales">
-    Create an outbound sales agent that can schedule appointments automatically
+  <Card title="Docs Agent" icon="book-open" href="/examples/docs-agent">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
+    Build a docs agent that can answer questions about your documentation
   </Card>
   <Card title="Inbound Support" icon="headset" href="/examples/inbound-support">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
     Build a technical support assistant that remembers where you left off between calls
   </Card>
-  <Card title="Pizza Website" icon="pizza-slice" href="/examples/pizza-website">
-    Build a pizza ordering assistant for your website using the Web SDK
-  </Card>
   <Card title="Voice Widget" icon="microphone" href="/examples/voice-widget">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-assistant">Built with Assistants</div>
+    <br />
     Easily integrate the Vapi Voice Widget into your website for enhanced user interaction
   </Card>
+  <Card title="Appointment Scheduling" icon="calendar-check" href="/examples/appointment-scheduling">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build an appointment scheduling assistant that can schedule appointments for a barbershop
+  </Card>
+  <Card title="Medical Triage & Scheduling" icon="stethoscope" href="/examples/clinic-triage-scheduling">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build a medical triage and scheduling assistant that can triage patients and schedule appointments for a clinic
+  </Card>
+  <Card title="Ecommerce Order Management" icon="shopping-cart" href="/examples/ecommerce-order-management">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Build an ecommerce order management assistant that can track orders and process returns
+  </Card>
+  <Card title="Lead Qualification" icon="phone" href="/examples/lead-qualification">
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    <div class="vapi-badge vapi-badge-workflow">Built with Workflows</div>
+    <br />
+    Create an outbound sales agent that can schedule appointments automatically
+  </Card>
 </CardGroup>

fern/quickstart/introduction.mdx

@@ -156,9 +156,6 @@ Vapi offers two main primitives for building voice agents, each designed for dif
 
     Handle booking requests, check availability, and confirm appointments with conditional routing.
   </Card>
-</CardGroup>
-
-<CardGroup cols={2}>
   <Card 
     title="Medical Triage & Scheduling" 
     icon="stethoscope" 
@@ -185,4 +182,15 @@ Vapi offers two main primitives for building voice agents, each designed for dif
 
     Order tracking, returns, and customer support workflows.
   </Card>
+  <Card 
+    title="See more examples" 
+    icon="book" 
+    iconType="solid" 
+    href="/examples"
+  >
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    See our collection of examples covering a wide range of use cases.
+  </Card>
 </CardGroup>