feat: update footer and nav components with new logo and content; add favicon

Author: mrepol742

next.config.ts

@@ -4,6 +4,7 @@ const nextConfig: NextConfig = {
   /* config options here */
   output: "export",
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",

public/favicon.ico

@@ -6,75 +6,52 @@ export default function Footer() {
       <div className="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
         <div className="md:flex md:justify-between">
           <div className="mb-6 md:mb-0">
-            <a
-              href="https://hallofcodes.github.io/"
-              className="flex items-center"
-            >
-              <Image
-                src="https://avatars.githubusercontent.com/u/93744673?s=200&v=4"
-                className="rounded-full h-8 me-3"
-                width={32}
-                height={32}
-                alt="Hall of Codes Logo"
-              />
-              <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
-                Hall of Codes
-              </span>
-            </a>
+            <Image
+              src="/hoc-icon.png"
+              className="rounded-full h-15 w-15 me-3 mb-4"
+              width={32}
+              height={32}
+              alt="Hall of Codes Logo"
+            />
+            <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              Hall of Codes
+            </span>
+            <p>Merging Programmers Beyond Conflicts</p>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
             <div>
               <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
-                Follow us
+                Notable Projects
               </h2>
-              <ul className="text-gray-500 dark:text-gray-400 font-medium">
-                <li className="mb-4">
-                  <a
-                    href="https://github.com/hallofcodes"
-                    className="hover:underline "
-                  >
-                    Github
-                  </a>
-                </li>
-                <li className="mb-4">
-                  <a
-                    href="https://facebook.com/hallofcodes"
-                    className="hover:underline"
-                  >
-                    Facebook
-                  </a>
-                </li>
-              </ul>
             </div>
             <div>
               <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
                 Legal
               </h2>
               <ul className="text-gray-500 dark:text-gray-400 font-medium">
-                <li className="mb-4">
+                <li className="mb-1">
                   <a href="/privacy" className="hover:underline">
                     Privacy Policy
                   </a>
                 </li>
-                <li>
+                <li className="mb-1">
                   <a href="/terms" className="hover:underline">
                     Terms &amp; Conditions
                   </a>
                 </li>
-                <a
-                  href="/community-guidelines"
-                  className="hover:underline"
-                >
-                  Community Guidelines
-                </a>
+                <li className="mb-1">
+                  <a href="/community-guidelines" className="hover:underline">
+                    Community Guidelines
+                  </a>
+                </li>
               </ul>
             </div>
           </div>
         </div>
         <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
         <div className="sm:flex sm:items-center sm:justify-between">
           <span className="text-sm text-gray-500 sm:text-center dark:text-gray-400">
-            © 2024{" "}
+            &copy; {new Date().getFullYear()}{" "}
             <a
               href="https://hallofcodes.github.io/"
               className="hover:underline"
@@ -96,28 +73,13 @@ export default function Footer() {
                 viewBox="0 0 8 19"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 />
               </svg>
               <span className="sr-only">Facebook page</span>
             </a>
-            <a
-              href="https://discord.gg/u8JnWbaFgK"
-              className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
-            >
-              <svg
-                className="w-4 h-4"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 21 16"
-              >
-                <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z" />
-              </svg>
-              <span className="sr-only">Discord community</span>
-            </a>
             <a
               href="https://github.com/hallofcodes"
               className="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5"
@@ -130,9 +92,9 @@ export default function Footer() {
                 viewBox="0 0 20 20"
               >
                 <path
-                  fill-rule="evenodd"
+                  fillRule="evenodd"
                   d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
-                  clip-rule="evenodd"
+                  clipRule="evenodd"
                 />
               </svg>
               <span className="sr-only">GitHub account</span>

public/hoc-icon.png

@@ -10,7 +10,7 @@ export default function Nav() {
           className="flex items-center space-x-3 rtl:space-x-reverse"
         >
           <Image
-            src="https://avatars.githubusercontent.com/u/93744673?s=200&v=4"
+            src="/hoc-icon.png"
             className="rounded-full h-7"
             alt="Hall of Codes Logo"
             width={28}

src/app/components/Footer.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Nav from "./components/Nav";
 import Footer from "./components/Footer";
+import Head from "next/head";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -18,6 +19,31 @@ export const metadata: Metadata = {
   title: "Hall of Codes - Merging Programmers Beyond Conflicts",
   description:
     "Be part of a vibrant community where innovation thrives and collaboration is key.",
+  keywords: [
+    "Hall of Codes",
+    "programming",
+    "collaboration",
+    "community",
+    "innovation",
+    "open source",
+    "software development",
+    "tech community",
+    "developer community",
+    "programmer collaboration",
+    "coding",
+    "software projects",
+    "teamwork",
+    "conflict resolution",
+    "synergy",
+    "collective innovation",
+    "diverse talents",
+    "seamless collaboration",
+    "unity",
+    "progress",
+    "merging programmers",
+    "conflict-free development",
+    "project management",
+  ],
   openGraph: {
     title: "Hall of Codes - Merging Programmers Beyond Conflicts",
     description:
@@ -63,6 +89,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Head>
+        <meta name="hostname" content="hallofcodes.github.io" />
+      </Head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >