fix(introduction): simplify structure, address layout issues, add link icons

Author: goosewin

fern/quickstart/introduction.mdx

@@ -43,29 +43,31 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     href="/assistants/dynamic-variables"
   >
-    **Best for:** Quick kickstart and straightforward conversations
-    
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    **Best for:** Quick kickstart for simple conversations
+    <br />
     Assistants use a single system prompt to control behavior. Perfect for:
     - Customer support chatbots
     - Simple question-answering agents
     - Getting started quickly with minimal setup
-    
-    *Control everything from one place with natural language instructions.*
   </Card>
   <Card 
     title="Workflows" 
     icon="diagram-project" 
     iconType="solid"
     href="/workflows/quickstart"
   >
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
     **Best for:** Complex logic and multi-step processes
-    
+    <br />
     Workflows use visual decision trees and conditional logic. Perfect for:
     - Appointment scheduling with availability checks
     - Lead qualification with branching questions
-    - Complex customer service flows with escalation paths
-    
-    *Build sophisticated branching logic without code.*
+    - Complex customer service flows with escalation
   </Card>
 </CardGroup>
 
@@ -86,8 +88,10 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     href="/quickstart/phone"
   >
-    **Start here if you want to:**
-    - Create a voice agent that can make and receive phone calls
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
+    - Create a voice agent for inbound/outbound calls
     - Build customer support or sales automation
     - Get started with no coding required
 
@@ -99,7 +103,9 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     href="/quickstart/web"
   >
-    **Start here if you want to:**
+    <div className='absolute top-4 right-4'>
+      <Icon icon="arrow-up-right-from-square" />
+    </div>
     - Add voice capabilities to your web application
     - Integrate voice chat into your existing product
     - Build with code and SDKs
@@ -117,35 +123,38 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     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>
 
     Automate inbound support calls with agents that can access your knowledge base and escalate to humans when needed.
-    
-    *View example →*
   </Card>
   <Card 
     title="Sales & Lead Qualification" 
     icon="phone-office" 
     iconType="solid"
     href="/workflows/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>
 
     Make outbound sales calls, qualify leads, and schedule appointments with sophisticated branching logic.
-    
-    *View example →*
   </Card>
   <Card 
     title="Appointment Scheduling" 
     icon="calendar-check" 
     iconType="solid"
     href="/workflows/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>
 
     Handle booking requests, check availability, and confirm appointments with conditional routing.
-    
-    *View example →*
   </Card>
 </CardGroup>
 
@@ -156,6 +165,9 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     href="/workflows/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>
 
     Emergency routing and appointment scheduling for healthcare.
@@ -166,21 +178,11 @@ Vapi offers two main primitives for building voice agents, each designed for dif
     iconType="solid"
     href="/workflows/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>
 
     Order tracking, returns, and customer support workflows.
   </Card>
 </CardGroup>
-
-## Ready to get started?
-
-Most users start with **phone calls** since it's the easiest way to see Vapi in action. You can create and test a working voice agent in under 5 minutes without writing any code.
-
-<Card
-  title="Start with Phone Calls →"
-  icon="phone"
-  iconType="solid"
-  href="/quickstart/phone"
->
-  Create your first voice agent and make your first call
-</Card>