feat: added iconography for all specs

Author: Kapil Gowru

fern/assets/styles.css

@@ -561,30 +561,30 @@ a[href*="changelog"] svg {
   min-height: 100vh;
   position: relative;
 
-  .dashed-pattern-left {
+  /* Hide the Radix wrapper only when it contains the fern anchor */
+  [data-radix-popper-content-wrapper]:has(a.fern-anchor) {
+    display: none !important;
+  }
+
+  .dashed-pattern {
     position: absolute;
-    left: -1rem;
     top: 0;
     height: 100%;
     width: 1rem;
     opacity: 1;
     pointer-events: none;
-    border-right: 1px solid var(--grayscale-5);
     mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
     -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
   }
 
+  .dashed-pattern-left {
+    left: -1rem;
+    border-right: 1px solid var(--grayscale-5);
+  }
+
   .dashed-pattern-right {
-    position: absolute;
     right: -1rem;
-    top: 0;
-    height: 100%;
-    width: 1rem;
-    opacity: 1;
-    pointer-events: none;
     border-left: 1px solid var(--grayscale-5);
-    mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
-    -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
   }
 
   .main-content {
@@ -621,33 +621,30 @@ a[href*="changelog"] svg {
     grid-template-rows: repeat(2, 1fr);
   }
 
-  .sdks-card {
+  /* Reusable panel card */
+  .panel-card {
     border-top: 1px solid var(--grayscale-5);
     padding: 2rem;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+  }
+
+  .panel-card.with-left-border {
+    border-left: 1px solid var(--grayscale-5);
+  }
+
+  .sdks-card {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
   }
 
   .docs-card {
-    border-top: 1px solid var(--grayscale-5);
-    border-left: 1px solid var(--grayscale-5);
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
     gap: 1rem;
     grid-row: 1 / 3;
   }
 
-  .ai-search-card {
-    border-top: 1px solid var(--grayscale-5);
-    padding: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
+  /* .ai-search-card inherits base panel styles */
 
   .card-header {
     display: flex;
@@ -688,17 +685,7 @@ a[href*="changelog"] svg {
     position: relative;
   }
 
-  .sdks-preview-img {
-    width: 100%;
-    object-fit: cover;
-  }
-
-  .docs-preview-img {
-    width: 100%;
-    object-fit: cover;
-  }
-
-  .ai-search-preview-img {
+  .preview-img {
     width: 100%;
     object-fit: cover;
   }
@@ -794,11 +781,9 @@ a[href*="changelog"] svg {
 
   .community-card-header {
     display: flex;
-    align-items: center;
     gap: 0.5rem;
     flex-direction: column;
     align-items: flex-start;
-
   }
 
   .specs-card {

fern/products/home/pages/welcome.mdx

@@ -6,25 +6,15 @@ hide-toc: true
 layout: custom
 ---
 
-<style>
-  {`
-    /* Hide the Radix wrapper only when it contains the fern anchor */
-    [data-radix-popper-content-wrapper]:has(span[id^="radix-"]) {
-      display: none !important;
-    }
-  `}
-</style>
 
 import { FernFooter } from "../../../components/FernFooter";
 
 <div className="lp-page-container">
   {/* Main Content */}
   <div className="main-content">
-    {/* Dashed Pattern - Left Side */}
-    <div className="dashed-pattern-left"></div>
-
-    {/* Dashed Pattern - Right Side */}
-    <div className="dashed-pattern-right"></div>
+    {/* Dashed Pattern */}
+    <div className="dashed-pattern dashed-pattern-left"></div>
+    <div className="dashed-pattern dashed-pattern-right"></div>
     {/* Hero Section */}
     <div className="hero-section">
       <div className="hero-title-container">
@@ -40,7 +30,7 @@ import { FernFooter } from "../../../components/FernFooter";
     {/* Feature Grid */}
     <div className="feature-grid">
       {/* SDKs Card */}
-      <div className="sdks-card">
+      <div className="panel-card sdks-card">
         <div className="card-header">
           <a className="card-title" href="/sdks/overview/introduction">
             SDKs
@@ -113,7 +103,7 @@ import { FernFooter } from "../../../components/FernFooter";
       </div>
 
       {/* Docs Card */}
-      <div className="docs-card">
+      <div className="panel-card with-left-border docs-card">
         <div className="card-header">
           <a className="card-title" href="/docs/getting-started/overview">
             Docs
@@ -172,7 +162,7 @@ import { FernFooter } from "../../../components/FernFooter";
       </div>
 
       {/* AI Search Card */}
-      <div className="ai-search-card">
+      <div className="panel-card ai-search-card">
         <div className="card-header">
           <a className="card-title" href="/ask-fern/getting-started/what-is-ask-fern">
             Ask Fern