Lego/fix navbar footer

src/app/cfp/page.tsx

@@ -1,6 +1,7 @@
 import { CallToActionProps, Hero, ImageProps } from "@/sections/Hero/Hero";
+import { Footer } from "@/components/Footer/Footer";
 import { Header } from "@/components/Header/Header";
-import { cfp as data, footer } from "@/lib/data";
+import { cfp as data } from "@/lib/data";
 import { getMetaData, getViewports } from "@/lib/metadata";
 
 export const generateMetadata = () =>
@@ -56,23 +57,7 @@ export default function Home() {
           </div>
         </div>
       </main>
-      <footer className="relative z-10 p-4 font-koulen text-white">
-        <div className="container mx-auto flex flex-col items-center justify-center gap-4 lg:flex-row">
-          <div className="flex flex-col gap-4 text-center lg:flex-row lg:gap-8">
-            {footer.map((link) => (
-              <a
-                key={link.url}
-                href={link.url}
-                target="_blank"
-                rel="noreferrer"
-                className="hover:text-jsconf-yellow"
-              >
-                {link.name}
-              </a>
-            ))}
-          </div>
-        </div>
-      </footer>
+      <Footer />
     </div>
   );
 }

src/components/Header/Header.tsx

@@ -5,6 +5,8 @@ import { usePathname } from "next/navigation";
 import type { Link as LinkType } from "@/api/types";
 
 import { Logo } from "@/components/Icons/Logo";
+import { SocialLink } from "@/components/SocialLink/SocialLink";
+import { links as socialLinks } from "@/lib/data";
 import { theme } from "@/lib/theme";
 import { cn } from "@/lib/utils";
 
@@ -18,24 +20,22 @@ interface HeaderProps {
 export function Header({ links }: HeaderProps) {
   const pathname = usePathname();
   return (
-    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4">
+    <header className="container relative z-10 mx-auto flex h-20 max-w-[1136px] items-center justify-between p-4 text-jsconf-yellow">
       <Link href="/">
         <Logo color={theme?.colors?.jsconfYellow} size="36" />
       </Link>
       <div
         className={cn("hidden items-center md:flex", links ? "gap-2" : "gap-4")}
       >
-        {links &&
-          links.map(
-            (link) =>
-              link && (
-                <HeaderLink
-                  key={link.url}
-                  isActive={pathname == link.url}
-                  {...link}
-                />
-              ),
-          )}
+        {links
+          ? links.map((link) => (
+              <HeaderLink
+                key={link.url}
+                isActive={pathname == link.url}
+                {...link}
+              />
+            ))
+          : socialLinks.map((link) => <SocialLink key={link.id} link={link} />)}
       </div>
       {links?.length ? <MobileNav links={links} activePath={pathname} /> : null}
     </header>