feat: add global footer

Author: Kapil Gowru

fern/assets/styles.css

@@ -494,16 +494,16 @@
     align-items: center;
     gap: 0.25rem;
 
-    svg {
+    /* svg {
       display: none !important;
-    }
+    } */
 
-    img {
+    svg {
       transition: filter 150ms ease;
     }
 
     &:hover {
-      img {
+      svg {
         filter: saturate(1) opacity(1);
       }
     }
@@ -545,10 +545,6 @@
     text-decoration: none;
     transition: background-color 150ms ease, color 150ms ease;
 
-    svg {
-      display: none !important;
-    }
-
     &:hover {
       background-color: var(--grayscale-a4);
 
@@ -560,6 +556,7 @@
 
   .soc2-badge-img {
     width: 1.5rem;
+    height: 1.5rem;
     background-color: #62636C;
     border-radius: 1000px;
   }

fern/components/FernFooter.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import { FernStatusWidget } from './FernStatus';
 
-import builtwithfernLight from './images/builtwithfern-light.svg';
-import builtwithfernDark from './images/builtwithfern-dark.svg';
-import builtwithfernFrameLight from './images/builtwithfern-frame-light.svg';
-import builtwithfernFrameDark from './images/builtwithfern-frame-dark.svg';
-import soc2 from './images/soc2.svg';
+import { BuiltWithFernLight } from './images/builtwithfern-light';
+import { BuiltWithFernDark } from './images/builtwithfern-dark';
+import { BuiltWithFernFrameLight } from './images/builtwithfern-frame-light';
+import { BuiltWithFernFrameDark } from './images/builtwithfern-frame-dark';
+import { Soc2Logo } from './images/soc2';
 
 export const FernFooter = () => {
   return (
     <footer className="footer">
       <div className="footer-top">
         {/* Left Column - Logo and Status */}
         <a className="footer-logo" href="https://buildwithfern.com">
-          <img src={builtwithfernLight} alt="Fern" className="footer-logo-img dark:hidden" />
-          <img src={builtwithfernDark} alt="Fern" className="footer-logo-img hidden dark:block" />
+          <BuiltWithFernLight className="footer-logo-img dark:hidden" />
+          <BuiltWithFernDark className="footer-logo-img hidden dark:block" />
 
-          <img src={builtwithfernFrameLight} alt="Fern" className="footer-logo-frame dark:hidden" />
-          <img src={builtwithfernFrameDark} alt="Fern" className="footer-logo-frame hidden dark:block" />
+          <BuiltWithFernFrameLight className="footer-logo-frame dark:hidden" />
+          <BuiltWithFernFrameDark className="footer-logo-frame hidden dark:block" /> 
         </a>
 
         <div className="footer-status">
@@ -28,7 +28,7 @@ export const FernFooter = () => {
           <FernStatusWidget />
 
           <a className="soc2-badge" href="https://security.buildwithfern.com/">
-            <img src={soc2} alt="Soc 2 Type II" className="soc2-badge-img" />
+            <Soc2Logo className="soc2-badge-img" />
             <span className="status-text">Soc 2 Type II</span>
           </a>
         </div>

fern/components/FernStatus.tsx

@@ -160,6 +160,7 @@ export const FernStatusWidget = () => {
             cursor: pointer;
             text-decoration: none;
             transition: background-color 150ms ease, color 150ms ease;
+            height: 2rem;
           }
 
           .fern-status-widget svg {

fern/components/images/builtwithfern-dark.svg renamed to fern/components/images/builtwithfern-dark.tsx

@@ -122,4 +122,8 @@ layout:
 
 experimental:
   mdx-components:
-    - ./components
+    - ./components
+
+js:
+  - path: ./dist/output.js
+    strategy: beforeInteractive