most of the theme is done, need two intro bits on homepage, considering images and fonts

src/app/api/post/[slug].ts

@@ -1,3 +0,0 @@
-export async function GET(slug: string) {
-  
-}

src/app/api/posts/route.ts

@@ -6,14 +6,11 @@ import matter from "gray-matter"
 export interface Post {
   slug: string
   title: string
-  date: string
-  excerpt?: string
 }
 
 export async function GET() {
   try {
     const postsDirectory = path.join(process.cwd(), "posts")
-    console.log(postsDirectory)
 
     // Check if posts directory exists
     if (!fs.existsSync(postsDirectory)) {
@@ -32,11 +29,8 @@ export async function GET() {
         return {
           slug,
           title: data.title || slug,
-          date: data.date || "",
-          excerpt: data.excerpt || "",
         }
       })
-      .sort((a, b) => (a.date > b.date ? -1 : 1))
 
     return NextResponse.json(posts)
   } catch (error) {

src/app/globals.css

@@ -22,5 +22,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Courier New", Arial, Helvetica, sans-serif;
 }

src/app/page.tsx

@@ -3,11 +3,22 @@
 import { useEffect, useState } from "react"
 import { ChevronDown } from "lucide-react"
 import Navbar from "@/components/navbar";
+import {Post} from "@/lib/posts";
+import Link from "next/link";
 
 export default function Home() {
   const [scrollY, setScrollY] = useState(0)
   const [titleOpacity, setTitleOpacity] = useState(0)
 
+  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))
+  }, [])
+
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY
@@ -31,6 +42,7 @@ export default function Home() {
 
   return (
     <div className="relative font-mono">
+      <title>DAMN.</title>
       <Navbar />
 
       {/* Parallax Hero Section */}
@@ -39,7 +51,7 @@ export default function Home() {
         <div
           className="absolute inset-0 w-full h-[120%] bg-cover bg-center bg-no-repeat"
           style={{
-            backgroundImage: `url('/vercel.svg?height=1080&width=1920')`,
+            backgroundImage: `url('/banner.png')`,
             transform: `translateY(${scrollY * 0.5}px)`,
             filter: "brightness(0.7) contrast(1.1)",
           }}
@@ -71,46 +83,17 @@ export default function Home() {
         <div className="container mx-auto px-4 py-20">
           <div className="flex flex-col items-center justify-center min-h-screen space-y-12">
             {/* Main Title with Fade-in Effect */}
-            <div className="text-center space-y-8 transition-opacity duration-1000" style={{ opacity: titleOpacity }}>
-              <h2 className="text-8xl md:text-9xl font-black tracking-tighter text-red-600">DAMN.</h2>
+            <div className="text-center space-y-2 transition-opacity duration-1000" style={{ opacity: titleOpacity }}>
+              <h2 className="text-8xl md:text-9xl font-black text-white">TITLE</h2>
               <div className="space-y-4">
-                <p className="text-2xl md:text-3xl font-light tracking-wide">KENDRICK LAMAR</p>
+                <p className="text-2xl md:text-3xl font-light">SUB</p>
                 <p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto leading-relaxed">
-                  An exploration of duality, spirituality, and the human condition through one of hip-hop's most
-                  critically acclaimed albums.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 </p>
               </div>
             </div>
-
-            {/* Album Details */}
-            <div
-              className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl transition-opacity duration-1000 delay-500"
-              style={{ opacity: titleOpacity }}
-            >
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">RELEASED</h3>
-                <p className="text-gray-300">April 14, 2017</p>
-              </div>
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">LABEL</h3>
-                <p className="text-gray-300">Top Dawg Entertainment</p>
-              </div>
-              <div className="text-center space-y-2">
-                <h3 className="text-xl font-semibold text-red-500">GENRE</h3>
-                <p className="text-gray-300">Hip Hop, Conscious Rap</p>
-              </div>
-            </div>
-
-            {/* Quote Section */}
-            <div
-              className="text-center max-w-3xl mx-auto transition-opacity duration-1000 delay-1000"
-              style={{ opacity: titleOpacity }}
-            >
-              <blockquote className="text-xl md:text-2xl italic text-gray-300 leading-relaxed">
-                "Is it wickedness? Is it weakness? You decide. Are we gonna live or die?"
-              </blockquote>
-              <cite className="block mt-4 text-red-500 font-semibold">— Kendrick Lamar, FEAR.</cite>
-            </div>
           </div>
         </div>
       </section>
@@ -119,30 +102,28 @@ export default function Home() {
       <section className="bg-gray-900 text-white py-20">
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto space-y-12">
-            <h3 className="text-4xl md:text-5xl font-bold text-center mb-12">ABOUT THE ALBUM</h3>
+            <h3 className="text-4xl md:text-5xl font-bold text-center mb-12">Sec2</h3>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
               <div className="space-y-6">
                 <p className="text-lg leading-relaxed text-gray-300">
-                  DAMN. is the fourth studio album by American rapper Kendrick Lamar. The album explores themes of
-                  loyalty, faith, and the duality of human nature through introspective lyrics and innovative
-                  production.
-                </p>
-                <p className="text-lg leading-relaxed text-gray-300">
-                  Featuring collaborations with Rihanna, Zacari, and U2, the album received widespread critical acclaim
-                  and won the Pulitzer Prize for Music, making Lamar the first non-classical or jazz artist to receive
-                  the honor.
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 </p>
               </div>
 
               <div className="space-y-6">
                 <div className="bg-red-600/20 p-6 rounded-lg border border-red-600/30">
-                  <h4 className="text-xl font-semibold mb-3 text-red-400">ACCOLADES</h4>
+                  <h4 className="text-xl font-semibold mb-3 text-red-400">ARTICLES</h4>
                   <ul className="space-y-2 text-gray-300">
-                    <li>• Pulitzer Prize for Music (2018)</li>
-                    <li>• Grammy Award for Best Rap Album</li>
-                    <li>• #1 on Billboard 200</li>
-                    <li>• Triple Platinum Certification</li>
+                    {posts.map((post) => (
+                      <li key={post.slug}>
+                        <Link href={`/posts/${post.slug}`} className="hover:text-red-400 transition-colors uppercase">
+                          • {post.title}
+                        </Link>
+                      </li>
+                    ))}
                   </ul>
                 </div>
               </div>

src/app/posts/[slug]/page.tsx

@@ -1,7 +1,9 @@
 import { getPost } from "@/lib/posts"
 import { notFound } from "next/navigation"
 import Link from "next/link"
+import Markdown from 'react-markdown'
 import { ArrowLeft } from "lucide-react"
+import Navbar from "@/components/navbar";
 
 interface PostPageProps {
   params: Promise<{ slug: string }>
@@ -17,30 +19,37 @@ export default async function PostPage({ params }: PostPageProps) {
 
   return (
     <div className="min-h-screen bg-black text-white font-mono">
+      <Navbar />
+      <title>{post.title}</title>
       <div className="container mx-auto px-4 py-20">
         <div className="max-w-4xl mx-auto">
           {/* Back button */}
-          <Link
-            href="/"
-            className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors mb-8"
-          >
-            <ArrowLeft className="w-4 h-4" />
-            <span>Back to Home</span>
-          </Link>
-
-          {/* Post header */}
-          <header className="mb-12">
-            <h1 className="text-4xl md:text-6xl font-bold text-red-600 mb-4">{post.title}</h1>
-            {post.date && <time className="text-gray-400 text-lg">{post.date}</time>}
-            {post.excerpt && <p className="text-xl text-gray-300 mt-4 leading-relaxed">{post.excerpt}</p>}
-          </header>
-
+          {/*<Link*/}
+          {/*  href="/"*/}
+          {/*  className="inline-flex items-center space-x-2 text-red-400 hover:text-red-300 transition-colors mb-8"*/}
+          {/*>*/}
+          {/*  <ArrowLeft className="w-4 h-4" />*/}
+          {/*  <span>Back to Home</span>*/}
+          {/*</Link>*/}
+          
           {/* Post content */}
           <article className="prose prose-invert prose-red max-w-none">
-            <div
-              className="text-gray-300 leading-relaxed space-y-6"
-              dangerouslySetInnerHTML={{ __html: post.content.replace(/\n/g, "<br />") }}
-            />
+            <div className="text-gray-300 leading-relaxed space-y-6">
+              <Markdown components={{
+                h2(props) {
+                  return <div className="justify-self-center font-bold text-4xl leading-8 mb-2 mt-12">{props.children}</div>
+                },
+                h3(props) {
+                  return <div className="justify-self-center font-medium italic text-2xl leading-8 mb-12">{props.children}</div>
+                },
+                blockquote(props) {
+                  return <div className="italic ml-12 mb-2 mt-2">{props.children}</div>
+                },
+                p(props) {
+                  return <div className="mt-0 mb-0 text-4 leading-8">{props.children}</div>
+                }
+              }}>{post.content}</Markdown>
+            </div>
           </article>
         </div>
       </div>

src/components/navbar.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import Link from "next/link"
+import Image from "next/image"
 import { useEffect, useState } from "react"
 
 interface Post {
@@ -20,18 +21,16 @@ export default function Navbar() {
       .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 className="w-8 h-8 rounded-sm flex items-center justify-center">
+              <Image className="rounded-sm" src="/cover.jpg" height={100} width={100} alt="DAMN. album cover"/>
             </div>
-            <span className="text-white font-bold text-xl tracking-wider">DAMN.</span>
+            <span className="text-red-600 font-bold text-xl tracking-wider">DAMN.</span>
           </Link>
 
           {/* Right side - Posts navigation */}

src/lib/posts.ts

@@ -5,8 +5,6 @@ import matter from "gray-matter"
 export interface Post {
   slug: string
   title: string
-  date: string
-  excerpt?: string
   content: string
 }
 
@@ -34,8 +32,6 @@ export async function getPost(slug: string): Promise<Post | null> {
     return {
       slug,
       title: data.title || slug,
-      date: data.date || "",
-      excerpt: data.excerpt || "",
       content,
     }
   } catch (error) {