Improve accessibility and reformat header

Author: Rikthepixel

src/assets/images/brand/logo-200x200.webp

@@ -2,40 +2,28 @@ import { ReactNode, useState } from "react";
 import { useRouter } from "next/router";
 import Bars3Icon from "@heroicons/react/24/solid/Bars3Icon";
 
+import Logo from "@/assets/images/brand/logo-200x200.webp";
+
 import Link from "./Link";
 import Button from "../controls/Button";
+import NavLink from "./NavLink";
 
-export interface HeaderProps {
-
-}
-
-const NavLink = ({ href, currentHref, children }: {
-  href: string,
-  currentHref: string,
-  children: ReactNode;
-}) => {
-  const active = currentHref === href;
-  return (
-    <Link
-      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-light aria-[current='page']:text-primary-dark aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
-      aria-current={active ? "page" : undefined}
-      color="primary"
-      href={href}
-    >
-      {children}
-    </Link>
-  );
-};
-
-const Header = ({ }: HeaderProps) => {
+const Header = () => {
   const router = useRouter();
 
   const [open, setOpen] = useState(false);
 
   return (
-    <header className="relative flex items-center w-full gap-12 px-8 py-4">
-      <Link color="primary" className="text-2xl font-bold lg:text-4xl" href="/">
-        Commit Rocket
+    <header className="relative flex items-center w-full gap-4 p-4 transition-all md:px-8 md:gap-12">
+      <Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
+        <img
+          className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"
+          src={Logo.src}
+          width={Logo.width}
+          height={Logo.height}
+          alt="Commit Rocket Logo"
+        />
+        <span>Commit Rocket</span>
       </Link>
       <Button color="secondary" className="p-2 ml-auto rounded-full md:hidden" onClick={() => setOpen(!open)}>
         <Bars3Icon className="w-6 h-6" />

src/components/navigation/Header.tsx

@@ -5,13 +5,14 @@ import { twMerge } from "tailwind-merge";
 
 import { RequiredKeys } from "@/types/utility";
 
-export const style = cva("transition-colors", {
+export const style = cva("transition-colors gap-2", {
   variants: {
     underline: {
       true: "underline",
       false: ""
     },
     color: {
+      white: "text-white hover:text-neutral-300",
       primary: "text-primary hover:text-primary-light",
       secondary: "text-secondary hover:text-secondary-light"
     }

src/components/navigation/Link.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import Link from "./Link";
+
+export interface NavLinkProps {
+  href: string,
+  currentHref: string,
+  children: ReactNode;
+}
+
+const NavLink = ({ href, currentHref, children }: NavLinkProps) => {
+  const active = currentHref === href;
+  return (
+    <Link
+      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-light aria-[current='page']:text-primary-dark aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
+      aria-current={active ? "page" : undefined}
+      color="primary"
+      href={href}
+    >
+      {children}
+    </Link>
+  );
+};
+
+
+export default NavLink

src/components/navigation/NavLink.tsx

@@ -50,9 +50,10 @@ const FrontPage: Page = ({ }) => {
           <div className="relative flex items-center justify-center w-full min-h-[20rem] max-h-[40dvh] max-h-[40vh] lg:min-h-0 lg:h-full lg:max-h-full lg:w-2/5" style={{ aspectRatio: `${LogoPicture.width} / ${LogoPicture.height}` }}>
             <div className="absolute w-full h-full opacity-50 aspect-square bg-gradient-radial from-primary to-transparent" aria-hidden />
             <motion.img
-              className="absolute max-w-full max-h-full object-contain aspect-auto w-full rotate-[10deg]"
+              className="absolute max-w-full max-h-full object-contain aspect-auto w-full rotate-[10deg] text-[0px]"
               loading="eager"
               variants={logoAnim}
+              alt="Commit Rocket"
               src={LogoPicture.src}
               width={LogoPicture.width}
               height={LogoPicture.height}
@@ -76,8 +77,9 @@ const FrontPage: Page = ({ }) => {
                   {title}
                 </h3>
                 <img
-                  className="w-full sm:w-2/3 lg:w-full"
+                  className="w-full sm:w-2/3 lg:w-full text-[0px]"
                   loading="lazy"
+                  alt="mission"
                   src={image.src}
                   width={image.width}
                   height={image.height}