Adding footer and menu API call for that, as well as adding some styling changes and additions

src/components/common/Footer.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useGetMenuQuery } from "@/services/navigation";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLaptopCode } from "@fortawesome/free-solid-svg-icons";
+
+const Footer = (props: any): JSX.Element => {
+  const { data: menu, isSuccess, isLoading } = useGetMenuQuery("footer-menu");
+  return (
+    <nav className="items-center py-8 border-solid border-t border-red container flex flex-col md:flex-row justify-center md:justify-between">
+      <Link
+        href="/"
+        className="p-2 font-sans"
+      >
+        <div className="flex gap-2 md:gap-4 items-center">
+          <FontAwesomeIcon
+            icon={faLaptopCode}
+            size="lg"
+          />
+          <p className="font-bold font-sans text-2xl md:text-xl">
+            Frank Delaguila
+          </p>
+        </div>
+      </Link>
+      <div className="flex gap-8">
+        {menu?.items.map((link: any) => (
+          <Link
+            key={link.ID}
+            className="p-2"
+            href={`/${link.slug}`}
+          >
+            {link.title}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+};
+
+export default Footer;

src/components/common/Internal.tsx

@@ -1,15 +1,20 @@
-import clsx from "clsx";
 import Navigation from "./Navigation";
+import Footer from "./Footer";
 
 interface InternalTypes {
   children?: React.ReactNode;
+  hideFooter?: boolean;
 }
 
-const Internal = ({ children }: InternalTypes): JSX.Element => {
+const Internal = ({
+  children,
+  hideFooter = false,
+}: InternalTypes): JSX.Element => {
   return (
     <main>
       <Navigation />
       {children ? children : null}
+      {!hideFooter ? <Footer /> : null}
     </main>
   );
 };

src/components/common/Navigation.tsx

@@ -69,8 +69,7 @@ const Navigation = (props: any): JSX.Element => {
         <>
           <Link
             href="/"
-            className="p-2"
-            style={{ fontFamily: "'Ubuntu', sans-serif" }}
+            className="p-2 font-sans"
           >
             <div className="flex gap-2 md:gap-4 items-center">
               <FontAwesomeIcon

src/pages/[slug].tsx

@@ -36,7 +36,7 @@ const Page = ({ page }: any) => {
   console.log(page);
   return (
     <Internal>
-      <div className="container my-24 md:my-36 page-content">
+      <div className="my-24 md:my-36 w-3/4 mx-auto page-content">
         <h1 className="text-4xl md:text-[64px] text-primary md:mb-6 font-sans font-bold">
           {page.title.rendered}
         </h1>

src/pages/index.tsx

@@ -5,7 +5,7 @@ import Internal from "@/components/common/Internal";
 
 export default function Home(): JSX.Element {
   return (
-    <Internal>
+    <Internal hideFooter>
       <div className="absolute h-screen w-full top-0 left-0 scene">
         <Canvas
           shadows

src/pages/portfolio/index.tsx

@@ -61,7 +61,13 @@ export default function Portfolio({ projects }: any): JSX.Element {
   }, [carouselChange]);
   return (
     <Internal>
-      <div className="container mt-32 mb-12">
+      <div className="container mt-28 md:mt-32 mb-8 md:mb-16">
+        <h1 className="text-4xl md:text-[64px] mb-4 font-sans font-bold">
+          Portfolio
+        </h1>
+        <p>Here's all my latest projects, and the technologies used!</p>
+      </div>
+      <div className="container mb-12">
         {/*
           // @ts-ignore */}
         <Slider

src/styles/globals.css

@@ -64,11 +64,18 @@
   .post-content h2.wp-block-heading {
     @apply text-4xl font-bold mb-4 text-primary;
   }
-  .post-content h3.wp-block-heading {
+  .post-content h3.wp-block-heading,
+  .page-content h3 {
     @apply text-2xl font-bold mb-4;
   }
-  .post-content img, video {
-    @apply block w-full mb-10;
+  .post-content img, video,
+  .page-content img, video {
+    @apply block w-full my-10;
+  }
+
+  .post-content img,
+  .page-content img {
+    @apply rounded-lg;
   }
   /* END Post Content */