feat: adding self host and mcp server

fern/assets/styles.css

@@ -297,6 +297,10 @@ a[href*="changelog"] svg {
   position: relative;
   .fern-card {
     text-decoration: none !important;
+
+    .external-link-icon {
+      display: none !important;
+    }
   } 
 
 
@@ -371,7 +375,7 @@ a[href*="changelog"] svg {
 
 .sdks-homepage {
   position: relative;
-
+  
   .changelog-button {
     display: flex;
     padding: 0.25rem 0.5rem;
@@ -557,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 {
@@ -617,38 +621,34 @@ 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;
     flex-direction: column;
-    gap: 0.25rem;
   }
 
   .card-title {
@@ -676,7 +676,7 @@ a[href*="changelog"] svg {
   }
 
   .card-description {
-    font-size: 1rem;
+    font-size: 0.875rem;
     color: var(--grayscale-10);
   }
 
@@ -685,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;
   }
@@ -750,10 +740,21 @@ a[href*="changelog"] svg {
     border-top: 1px solid var(--grayscale-5);
     border-bottom: 1px solid var(--grayscale-5);
     padding: 3rem 2rem;
+
+    &.specs {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
   }
 
   .community-title-container {
     margin-bottom: 2rem;
+
+    &.specs {
+      margin-bottom: 0rem;
+      flex: 1;
+    }
   }
 
   .community-grid {
@@ -762,6 +763,14 @@ a[href*="changelog"] svg {
     gap: 2rem;
   }
 
+  .specs-grid {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    flex: 1;
+    flex-wrap: wrap;
+  }
+
   .community-card {
     display: flex;
     flex-direction: column;
@@ -770,6 +779,32 @@ a[href*="changelog"] svg {
     align-items: flex-start;
   }
 
+  .community-card-header {
+    display: flex;
+    gap: 0.5rem;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .specs-card {
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none !important;
+
+    img {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    &:hover {
+      background-color: var(--grayscale-a3);
+    }
+  }
+
   .community-card-title {
     font-size: 1rem;
     font-weight: bold;
@@ -790,7 +825,7 @@ a[href*="changelog"] svg {
     padding: 3rem 2rem;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 2rem;
   }
 
   .help-buttons {
@@ -831,15 +866,17 @@ a[href*="changelog"] svg {
   /* Responsive Design - Mobile First */
   @media (max-width: 640px) {
     .main-content {
-      padding: 2rem 1rem;
+      padding: 2rem 0rem;
     }
 
     .dashed-pattern-left {
       left: 0px;
+      display: none;
     }
 
     .dashed-pattern-right {
       right: 0px;
+      display: none;
     }
 
     .hero-section {
@@ -857,27 +894,27 @@ a[href*="changelog"] svg {
     }
 
     .sdks-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
     }
 
     .docs-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
       border-left: none;
       grid-column: 1;
       grid-row: auto;
     }
 
     .ai-search-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
     }
 
     .card-title {
       font-size: 1.375rem;
     }
 
-    .card-description {
+    /* .card-description {
       font-size: 1.0625rem;
-    }
+    } */
 
     .language-icons {
       flex-wrap: wrap;
@@ -917,7 +954,28 @@ a[href*="changelog"] svg {
     }
 
     .community-section {
-      padding: 2rem 1.5rem;
+      padding: 2rem 1rem;
+
+      &.specs {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+    }
+
+    .community-title-container {
+      &.specs {
+        margin-bottom: 2rem;
+      }
+    }
+
+    .specs-grid {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .specs-card {
+      padding-left: 0;
+      padding-right: 0;
     }
 
     .community-grid {
@@ -928,15 +986,15 @@ a[href*="changelog"] svg {
     .community-card {
       border-radius: 0.5rem;
       transition: all 0.2s ease;
+    }
 
-      &:hover {
-        border-color: var(--grayscale-6);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
+    .community-card-header {
+      flex-direction: row;
+      align-items: center;
     }
 
     .help-section {
-      padding: 2rem 1.5rem;
+      padding: 2rem 1rem;
     }
 
     .help-buttons {
@@ -996,12 +1054,35 @@ a[href*="changelog"] svg {
   will-change: transform;
   /* Ensure click events can reach the canvas */
   pointer-events: auto;
+  min-height: 104px;
 }
 
 .sdk-rive:hover {
   transform: translateY(-3px) !important;
 }
 
+.docs-rive {
+  min-height: 213px;
+}
+
+.ask-fern-rive {
+  min-height: 114px;
+}
+
+@media (max-width: 640px) {
+  .sdk-rive {
+    min-height: inherit;
+  }
+
+  .docs-rive {
+    min-height: inherit;
+  }
+
+  .ask-fern-rive {
+    min-height: inherit;
+  }
+}
+
 /* Ensure the canvas can receive clicks and is properly layered */
 .rive-container {
   width: 100%;
@@ -1031,4 +1112,4 @@ a[href*="changelog"] svg {
   display: inline-block;
 }
 
-/*** END -- LANDING PAGE STYLING ***/
+/*** END -- LANDING PAGE STYLING ***/