Install signika font for nav brand

package-lock.json

@@ -11,6 +11,8 @@
 				"@astrojs/react": "^2.0.2",
 				"@astrojs/tailwind": "^3.0.1",
 				"@datapunt/matomo-tracker-react": "^0.5.1",
+				"@fontsource-variable/signika": "^5.0.8",
+				"@fontsource/twinkle-star": "^5.0.8",
 				"@types/react": "^18.0.28",
 				"@types/react-dom": "^18.0.10",
 				"astro": "^2.0.10",
@@ -892,6 +894,16 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@fontsource-variable/signika": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/signika/-/signika-5.0.8.tgz",
+			"integrity": "sha512-0Ab8X7/RUKaXDVX8HuT9DyAFSGc0PNcQUuxQWHbrje4sD9639T7GHB8xJ4CQYsHowhxoiFuadXT7xxDCBmQRAw=="
+		},
+		"node_modules/@fontsource/twinkle-star": {
+			"version": "5.0.8",
+			"resolved": "https://registry.npmjs.org/@fontsource/twinkle-star/-/twinkle-star-5.0.8.tgz",
+			"integrity": "sha512-Ewfnd27hnMjbNoLN4Rea0eDk1x0kDc4qZrLTwSmY4pdALdnsNeun/kdCJG10MRqKP6qYIrwd0SHgWsQ2YEJ1Vw=="
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.1.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",

package.json

@@ -13,6 +13,8 @@
 		"@astrojs/react": "^2.0.2",
 		"@astrojs/tailwind": "^3.0.1",
 		"@datapunt/matomo-tracker-react": "^0.5.1",
+		"@fontsource-variable/signika": "^5.0.8",
+		"@fontsource/twinkle-star": "^5.0.8",
 		"@types/react": "^18.0.28",
 		"@types/react-dom": "^18.0.10",
 		"astro": "^2.0.10",

src/components/navigation/NavigationReact.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from "react";
 import { AnimatePresence } from "framer-motion";
 import HamburgerMenu from "./HamburgerMenu";
+import AudacityLogo from "../../assets/img/Audacity_Logo.png";
+import '@fontsource-variable/signika';
+import '../../styles/fonts.css'
 
 function NavigationReact() {
   const [isHamburgerMenuOpen, setIsHamburgerMenuOpen] = useState(false);
@@ -39,11 +42,15 @@ function NavigationReact() {
 
   return (
     <nav className="fixed left-0 right-0 top-0 border-b-2 z-50 filter bg-white bg-opacity-90 backdrop-blur-xl ">
-      <div className="flex max-w-screen-xl mx-auto h-14 px-3 xl:px-0 items-center">
-        <a class="flex-1" href="/">
-          <span className="text-blue-700 text-lg font-semibold">Audacity</span>
+      <div className="flex max-w-screen-xl mx-auto h-14 px-4 xl:px-0 items-center">
+        <a class="flex-1 " href="/">
+          <div class="flex gap-1 items-center">
+            <img class="w-5 lg:w-6 h-full" src={AudacityLogo} />
+            <p class="signika text-blue-700 lg:text-lg font-medium">Audacity</p>
+          </div>
         </a>
-        <div className="flex-1 justify-center hidden gap-4 sm:flex">
+
+        <div className="lg:flex-1 justify-center hidden gap-4 sm:flex">
           {navLinks.map((navLink, index) => {
             return renderNavLink(navLink, index);
           })}
@@ -94,3 +101,4 @@ function NavigationReact() {
 }
 
 export default NavigationReact;
+

src/styles/fonts.css

@@ -0,0 +1,3 @@
+.signika {
+    font-family: 'Signika Variable', sans-serif
+}