feat: adding social logos

Author: Kapil Gowru

fern/assets/styles.css

@@ -6,6 +6,10 @@
   appearance: none;
 }
 
+#builtwithfern {
+  display: none !important;
+}
+
 .motivation p {
   max-width: unset !important;
 }

fern/footer-dist/output.js

@@ -8,14 +8,6 @@ layout: custom
 
 import { FernFooter } from "../../../components/FernFooter";
 
-<style>
-  {`
-    #builtwithfern {
-      display: none !important;
-    }
-  `}
-</style>
-
 <div className="absolute inset-0 z-[-1] box-border block">
   <div 
     style={{

fern/products/home/pages/welcome.mdx

@@ -129,6 +129,26 @@ export const FernFooter: React.FC = () => {
           gap: 1rem;
         }
 
+        .footer-column-socials {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .footer-social-icon {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 0.25rem;
+
+          &:hover {
+            background-color: var(--grayscale-a4);
+
+            img {
+              fill: var(--grayscale-a12);
+            }
+          }
+        }
+
         .footer-link {
           font-weight: 400;
           font-size: 0.875rem;
@@ -283,6 +303,21 @@ export const FernFooter: React.FC = () => {
                 <a href="https://buildwithfern.com/terms-of-service" className="footer-link">Terms of Service</a>
               </div>
             </div>
+
+            <div className="footer-column-socials">
+              <a href="https://github.com/fern-api/fern" className="footer-link">
+                <img src="/images/github-light.svg" alt="YouTube" className="footer-social-icon dark:hidden" />
+                <img src="/images/github-dark.svg" alt="YouTube" className="footer-social-icon hidden dark:block" />
+              </a>
+              <a href="https://www.youtube.com/@buildwithfern" className="footer-link">
+                <img src="/images/x-light.svg" alt="X" className="footer-social-icon dark:hidden" />
+                <img src="/images/x-dark.svg" alt="X" className="footer-social-icon hidden dark:block" />
+              </a>
+              <a href="https://www.linkedin.com/company/buildwithfern" className="footer-link">
+                <img src="/images/linkedin-light.svg" alt="LinkedIn" className="footer-social-icon dark:hidden" />
+                <img src="/images/linkedin-dark.svg" alt="LinkedIn" className="footer-social-icon hidden dark:block" />
+              </a>
+            </div>
           </div>
         </div>
       </footer>