start of landing page, needs 2 intro paragraphs & links, also images

src/components/navbar.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+interface Post {
+  slug: string
+  title: string
+  date: string
+  excerpt?: string
+}
+
+export default function Navbar() {
+  const [posts, setPosts] = useState<Post[]>([])
+
+  useEffect(() => {
+    fetch("/api/posts")
+      .then((res) => res.json())
+      .then((data) => setPosts(data))
+      .catch((err) => console.error("Error fetching posts:", err))
+  }, [])
+
+  console.log(posts)
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-red-600/20 font-mono">
+      <div className="container max-w-screen px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Left side - Logo and title */}
+          <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+            <div className="w-8 h-8 bg-red-600 rounded-sm flex items-center justify-center">
+              <span className="text-white font-bold text-sm">D</span>
+            </div>
+            <span className="text-white font-bold text-xl tracking-wider">DAMN.</span>
+          </Link>
+
+          {/* Right side - Posts navigation */}
+          <div className="hidden md:flex items-center space-x-8">
+            {posts.map((post) => (
+              <Link
+                key={post.slug}
+                href={`/posts/${post.slug}`}
+                className="text-gray-300 hover:text-red-400 transition-colors text-sm uppercase tracking-wide"
+              >
+                {post.title}
+              </Link>
+            ))}
+          </div>
+
+          {/* Mobile menu button */}
+          <button className="md:hidden text-white">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+  )
+}