Fonts (#100)

* Change primary colour

* Change fonts

* font options

* font selection confirmed

---------

Co-authored-by: Timothy Armes <tim@timothyarmes.com>

app/[lang]/components/Footer.tsx

@@ -8,7 +8,7 @@ export default function Footer() {
 
   return (
     <footer
-      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-teal-600 px-5 py-2 text-white dark:bg-gray-700"
+      className="fixed bottom-0 z-30 flex h-20 w-full flex-col items-center justify-center justify-items-center bg-primary-600 px-5 py-2 text-white dark:bg-gray-700"
       data-test="footer"
     >
       <div>

app/[lang]/components/HamburgerMenu.tsx

@@ -53,7 +53,7 @@ const HamburgerMenu = ({
       ref={menuRef}
       className={`fixed right-0 top-0 ${
         menuVisible ? "" : "translate-x-full"
-      } z-[9999] flex bg-teal-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
+      } z-[9999] flex bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
       onMouseEnter={handleMouseEnterMenu}
       onMouseLeave={handleMouseLeaveMenu}
     >

app/[lang]/components/Navbar.tsx

@@ -23,7 +23,9 @@ export default function Navbar() {
             className="text-gray-900 no-underline hover:no-underline dark:text-white"
             href="/"
           >
-            <span className="text-2xl">{t("title")}</span>
+            <span className="font-title text-2xl text-gray-800 dark:text-white">
+              {t("title")}
+            </span>
           </Link>
         </div>
         <div className="pb-2 md:hidden" data-test="mobile-menu">
@@ -38,7 +40,7 @@ export default function Navbar() {
             {links.map(({ title, route }) => (
               <li key={route} className="mr-10 h-full">
                 <Link
-                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-teal-600"
+                  className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
                   href={route}
                 >
                   {title}