VAP10-39: Fix UI bugs

Author: nitishsurana

fern/calls/call-dynamic-transfers.mdx

@@ -521,17 +521,11 @@ sequenceDiagram
 
 <CardGroup cols={2}>
   <Card title="Customer Support Escalation" icon="headset" href="/assistants/examples/support-escalation">
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     **Assistant-based routing**
 
     Route customers to appropriate support tiers based on conversation analysis and customer data
   </Card>
   <Card title="Property Management Routing" icon="building" href="/squads/examples/property-management">
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     **Squad-based routing**
 
     Direct tenant calls to the right department with automated verification

fern/debugging.mdx

@@ -209,38 +209,31 @@ For any tool in your `Tools` section:
 
 When you're stuck:
 
-<Card
-  title="Community Support"
-  icon="user-group"
-  href="https://discord.com/invite/pUFNcf2WmH"
->
-  <div className='absolute top-4 right-4'>
-    <Icon icon="arrow-up-right-from-square" />
-  </div>
-  Join the Vapi Discord for real-time help from the community and team
-</Card>
-
-<Card
-  title="API Reference"
-  icon="book"
-  href="/api-reference"
->
-  <div className='absolute top-4 right-4'>
-    <Icon icon="arrow-up-right-from-square" />
-  </div>
-  Check the API reference for detailed configuration options
-</Card>
-
-<Card
-  title="Status Page"
-  icon="fa-light fa-heartbeat"
-  href="https://status.vapi.ai/"
->
-  <div className='absolute top-4 right-4'>
-    <Icon icon="arrow-up-right-from-square" />
-  </div>
-  Check real-time status of Vapi services and AI providers
-</Card>
+<CardGroup cols={3}>
+  <Card
+    title="Community Support"
+    icon="user-group"
+    href="https://discord.com/invite/pUFNcf2WmH"
+  >
+    Join the Vapi Discord for real-time help from the community and team
+  </Card>
+
+  <Card
+    title="API Reference"
+    icon="book"
+    href="/api-reference"
+  >
+    Check the API reference for detailed configuration options
+  </Card>
+
+  <Card
+    title="Status Page"
+    icon="fa-light fa-heartbeat"
+    href="https://status.vapi.ai/"
+  >
+    Check real-time status of Vapi services and AI providers
+  </Card>
+</CardGroup>
 
 **Before asking for help:**
 - Include call ID and timestamp from `Call Logs` in your [dashboard](https://dashboard.vapi.ai/)

fern/guides.mdx

@@ -10,97 +10,61 @@ slug: guides
 
 <CardGroup cols={2}>
   <Card title="Appointment Scheduling" icon="calendar-check" href="/assistants/examples/appointment-scheduling">
-    <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 an appointment scheduling assistant that can schedule appointments for a barbershop
   </Card>
   <Card title="Medical Triage & Scheduling" icon="stethoscope" href="/squads/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-squad">Built with Squads</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="/squads/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-squad">Built with Squads</div>
     <br />
     Build an ecommerce order management assistant that can track orders and process returns
   </Card>
   <Card title="Property Management" icon="building" href="/squads/examples/property-management">
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     <div class="vapi-badge vapi-badge-squad">Built with Squads</div>
     <br />
     Build a call routing workflow that dynamically routes tenant calls based on verification and inquiry type
   </Card>
   <Card title="Lead Qualification" icon="phone" href="/assistants/examples/lead-qualification">
-    <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 />
     Create an outbound sales agent that can schedule appointments automatically
   </Card>
     <Card title="Multilingual Support (Structured)" icon="globe" href="/squads/examples/multilingual-support">
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     <div class="vapi-badge vapi-badge-squad">Built with Squads</div>
     <br />
     Build a structured multilingual support workflow with language selection and dedicated conversation paths
   </Card>
   <Card title="Dynamic Multilingual Agent" icon="language" href="/assistants/examples/multilingual-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 dynamic agent with automatic language detection and real-time language switching
   </Card>
   <Card title="Support Escalation" icon="headset" href="/assistants/examples/support-escalation">
-    <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 an intelligent support escalation system with dynamic routing based on customer tier and issue complexity
   </Card>
   <Card title="Docs Agent" icon="book-open" href="/assistants/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="/assistants/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="Voice Widget" icon="microphone" href="/assistants/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="Vapi CLI" icon="terminal" href="/cli">
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     <div class="vapi-badge" style="background-color: #0e0e13; color: #12a594;">Developer Tool</div>
     <br />
     Build voice AI agents faster with the Vapi CLI - project integration, local testing, and IDE enhancement

fern/quickstart/introduction.mdx

@@ -43,9 +43,6 @@ Vapi offers two main primitives, designed for different use cases:
     iconType="solid"
     href="/assistants/quickstart"
   >
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     **Best for:** Most use cases and fast iteration
     <br />
     Assistants use a single system prompt plus tools and structured outputs. Perfect for:
@@ -59,9 +56,6 @@ Vapi offers two main primitives, designed for different use cases:
     iconType="solid"
     href="/squads"
   >
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     **Best for:** Multi-assistant setups with specialization
     <br />
     Squads orchestrate multiple assistants with context-preserving transfers. Ideal for:
@@ -88,9 +82,6 @@ Vapi offers two main primitives, designed for different use cases:
     iconType="solid"
     href="/quickstart/phone"
   >
-    <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
@@ -103,9 +94,6 @@ Vapi offers two main primitives, designed for different use cases:
     iconType="solid"
     href="/quickstart/web"
   >
-    <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
@@ -127,9 +115,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/cli"
   >
-    <div className='absolute top-4 right-4'>
-      <Icon icon="arrow-up-right-from-square" />
-    </div>
     Install in seconds with:
     ```bash
     curl -sSL https://vapi.ai/install.sh | bash
@@ -147,9 +132,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/assistants/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.
@@ -160,9 +142,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/assistants/examples/lead-qualification"
   >
-    <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>
 
     Make outbound sales calls, qualify leads, and schedule appointments with sophisticated branching logic.
@@ -173,9 +152,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/assistants/examples/appointment-scheduling"
   >
-    <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>
 
     Handle booking requests, check availability, and confirm appointments with conditional routing.
@@ -186,9 +162,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/squads/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-squad">Built with Squads</div>
 
     Emergency routing and appointment scheduling for healthcare.
@@ -199,9 +172,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     iconType="solid"
     href="/squads/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-squad">Built with Squads</div>
 
     Order tracking, returns, and customer support workflows.
@@ -212,9 +182,6 @@ The Vapi CLI brings the full power of the platform to your terminal:
     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>