feat: initial version of langfuse academy

components/FooterMenu.tsx

@@ -1,10 +1,16 @@
 import Link from "next/link";
+import { Twitter, Linkedin } from "lucide-react";
 import InkeepChatButton from "./inkeep/InkeepChatButton";
 
 const menuItems: {
   heading: string;
   items: (
-    | { name: string; href: string; notificationCount?: number }
+    | {
+        name: string;
+        href: string;
+        notificationCount?: number;
+        icon?: React.ReactNode;
+      }
     | "separator"
   )[];
 }[] = [
@@ -136,8 +142,8 @@ const menuItems: {
       },
       { name: "Why Langfuse?", href: "/why" },
       {
-        name: "AI Engineering Library",
-        href: "/library",
+        name: "Langfuse Academy",
+        href: "/academy",
       },
       {
         name: "Status",
@@ -175,13 +181,16 @@ const menuItems: {
         name: "OSS Friends",
         href: "/oss-friends",
       },
+      "separator",
       {
         name: "Twitter",
         href: "https://x.com/langfuse",
+        icon: <Twitter className="h-4 w-4" />,
       },
       {
         name: "LinkedIn",
         href: "https://www.linkedin.com/company/langfuse/",
+        icon: <Linkedin className="h-4 w-4" />,
       },
     ],
   },
@@ -242,9 +251,10 @@ const FooterMenu = () => {
                   <li key={item.name} className="relative flex gap-1">
                     <Link
                       href={item.href}
-                      className="text-sm hover:text-primary/80"
+                      className="flex items-center gap-1 text-sm hover:text-primary/80"
                     >
-                      {item.name}
+                      {item.icon}
+                      <span>{item.name}</span>
                     </Link>
                     {item.notificationCount > 0 && (
                       <span className="transform -translate-y-1/4 bg-primary text-primary-foreground rounded-full h-3 w-3 text-[0.6rem] flex items-center justify-center">