Improve footer

components/elements/Footer.jsx

@@ -1,6 +1,7 @@
 import NextLink from "next/link";
 import { version } from "react";
 import { useState, useEffect } from "react";
+import { footer } from "@/config";
 
 export function Footer() {
  const [appVersion, setAppVersion] = useState();
@@ -9,25 +10,41 @@ export function Footer() {
  }, [appVersion]);
 
  return (
-  <footer className="mt-12 w-full py-6 md:text-center lg:px-16">
-   <div className="flex w-full flex-col items-center gap-2 lg:flex-row lg:justify-between lg:gap-0">
-    {/* DO NOT TOUCH THE CODE BELOW! REMEMBER: YOU CAN ADD YOUR NAME AFTER MY NAME */}
-    <NextLink href="/">
-     <p className="flex cursor-pointer items-center text-2xl font-semibold">
-      Igor Kowalczyk<span className="bg-gradient-to-r from-[#6310ff] to-[#1491ff] box-decoration-clone bg-clip-text text-fill-transparent dark:from-[#a2facf] dark:to-[#64acff]">.</span> <span className="mx-1 mr-2 rounded-lg bg-black/[7%] px-2 py-1 text-xs dark:bg-white/10">v{appVersion}</span>
-     </p>
-    </NextLink>
-    {/* --- */}
-    <div className="items-center space-x-6 lg:flex">
-     <div className="mt-2 text-left text-gray-700 dark:text-gray-400 lg:mt-0 lg:text-right">
-      <p className="font-semibold">&copy; 2019 - {new Date().getFullYear()} Igor Kowalczyk, All rights reserved.</p>
-      <p className="italic">
+  <footer className="mt-12 w-full py-10 lg:px-16">
+   <div className="mx-auto pt-10">
+    <div className="gap-20 lg:grid lg:grid-cols-6">
+     <div className="col-span-3 flex flex-col justify-center">
+      <div className="flex items-center space-x-5">
+       {/* DO NOT TOUCH THE CODE BELOW! REMEMBER: YOU CAN ADD YOUR NAME AFTER MY NAME */}
+       <NextLink href="/">
+        <p className="flex cursor-pointer items-center text-2xl font-semibold">
+         Igor Kowalczyk<span className="bg-gradient-to-r from-[#6310ff] to-[#1491ff] box-decoration-clone bg-clip-text text-fill-transparent dark:from-[#a2facf] dark:to-[#64acff]">.</span> <span className="mx-1 mr-2 rounded-lg bg-black/[7%] px-2 py-1 text-xs dark:bg-white/10">v{appVersion}</span>
+        </p>
+       </NextLink>
+      </div>
+
+      <p className="mt-3 text-gray-700 dark:text-gray-400">
        Created with ❤️ in Poland using{" "}
        <NextLink href="https://reactjs.org">
         <a>React.js v{version}</a>
        </NextLink>
       </p>
      </div>
+     {footer.categories.map((category, index) => (
+      <div key={index} className="col-span-1 text-gray-700 dark:text-gray-400">
+       <p className="mt-3 font-semibold text-gray-800 dark:text-white sm:mt-0 sm:mb-3">{category.title}</p>
+       <div>
+        {category.links.map((link, index) => (
+         <NextLink key={index} href={link.href}>
+          <a className="mt-2 block duration-100 hover:text-gray-600 hover:underline motion-reduce:transition-none dark:hover:text-gray-300">{link.title}</a>
+         </NextLink>
+        ))}
+       </div>
+      </div>
+     ))}
+    </div>
+    <div className="mt-5 flex justify-end text-center text-gray-700 dark:text-gray-400">
+     <p className="font-semibold">&copy; 2019 - {new Date().getFullYear()} Igor Kowalczyk, All rights reserved.</p>
     </div>
    </div>
   </footer>

components/elements/NavPopover.jsx

@@ -1,5 +1,4 @@
 import NextLink from "next/link";
-import { social } from "@/config";
 import { Transition, Popover } from "@headlessui/react";
 import { CodeBracketIcon, RectangleStackIcon, EnvelopeOpenIcon, ChevronRightIcon, ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 
@@ -16,7 +15,7 @@ export default function NavPopover(props) {
       <Popover.Panel unmount={false} className="absolute left-1/2 z-10 w-screen max-w-sm -translate-x-1/2 transform px-4 pt-3 sm:px-0 ">
        <div className="overflow-hidden rounded-lg border-[1px] border-black/[10%] shadow-lg  dark:border-white/[15%]">
         <div className="relative bg-white p-3 dark:bg-[#08152b]">
-         <NextLink href={`https://github.com/${social.github.username}`} key="github">
+         <NextLink href={`/github`} key="github">
           <a onClick={() => close()} key="solutions" className="flex items-center rounded-lg p-3 transition duration-150 ease-in-out hover:bg-blue-50/80 dark:hover:bg-white/5">
            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-white dark:bg-white/10 dark:text-black sm:h-12 sm:w-12">
             <CodeBracketIcon className="inline h-[24px] w-[24px] stroke-black duration-200 motion-reduce:transition-none dark:stroke-white/[70%]" />
@@ -51,7 +50,7 @@ export default function NavPopover(props) {
          </NextLink>
         </div>
         <div className="border-t-[1px] border-black/10 bg-white px-5 py-4 dark:border-white/10 dark:bg-[#08152b]">
-         <NextLink href={`https://github.com/${social.github.username}`} key="github_external">
+         <NextLink href={`/github`} key="github_external">
           <a onClick={() => close()} target="_blank" className="group flow-root rounded-md p-3 transition duration-150 ease-in-out hover:bg-gray-100 dark:hover:bg-white/5 ">
            <span className="flex items-center">
             <span className="text-sm font-medium text-gray-900 dark:text-white">Github Profile</span>

config.js

@@ -130,8 +130,64 @@ export const ads = {
  ca_pub: process.env.NEXT_PUBLIC_CA_PUB,
 };
 
-// Why svg elements instead of img elements? Because we have to change the color of the icons depending on the theme. We do not want to load the icons when we change the theme.
+export const footer = {
+ categories: [
+  {
+   title: "Important Links",
+   links: [
+    {
+     title: "Home",
+     href: "/",
+    },
+    {
+     title: "Projects",
+     href: "/repositories",
+    },
+    {
+     title: "Blog",
+     href: "/blog",
+    },
+    {
+     title: "Photography",
+     href: "/photography",
+    },
+   ],
+  },
+  {
+   title: "Social",
+   links: [
+    {
+     title: "Github",
+     href: "/github",
+    },
+    {
+     title: "Instagram",
+     href: "/instagram",
+    },
 
+    {
+     title: "Discord",
+     href: "/discord",
+    },
+   ],
+  },
+  {
+   title: "Other",
+   links: [
+    {
+     title: "What i use",
+     href: "/uses",
+    },
+    {
+     title: "Contact",
+     href: "/#contact",
+    },
+   ],
+  },
+ ],
+};
+
+// Why svg elements instead of img elements? Because we have to change the color of the icons depending on the theme. We do not want to load the icons when we change the theme.
 export const techs = [
  {
   name: "React",

next.config.js

@@ -46,6 +46,11 @@ module.exports = withPlugins(
      destination: "https://www.instagram.com/majonezexe/",
      permanent: true,
     },
+    {
+     source: "/github",
+     destination: "https://github.com/igorkowalczyk",
+     permanent: true,
+    },
     {
      source: "/arc-sw.js",
      destination: "https://arc.io/arc-sw.js",