Fuck if I know

src/components/NavItem.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+    href: string;
+    title: string;
+}
+
+const { href, title } = Astro.props;
+---
+
+<a
+    href={href}
+    class="text-primary-foreground hover:text-primary hover:bg-primary-foreground rounded-md px-3 py-2 transition duration-300"
+    >{title}
+</a>

src/components/Navbar.astro

@@ -0,0 +1,22 @@
+---
+import { Image } from 'astro:assets';
+
+import NavItem from "./NavItem.astro";
+
+import foscLogo from '../assets/img/fosc-logo-new.png'
+---
+
+<div class="backdrop-blur backdrop-brightness-50 drop-shadow-lg">
+    <nav class="container flex justify-between items-center h-24">
+    
+        <Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo"/>
+    
+        <div class="flex space-x-4">
+            <NavItem href="/example" title="Cloud" />
+            <NavItem href="/example" title="Gallery" />
+            <NavItem href="/example" title="Downloads" />
+            <NavItem href="/example" title="Blog" />
+        </div>
+    </nav>
+    
+</div>