feat: Add navigation links to header with responsive styling

website/src/app/page.module.css

@@ -30,6 +30,24 @@
     z-index: 10;
 }
 
+.nav {
+    display: flex;
+    gap: 2rem;
+    margin-right: 2rem;
+}
+
+.navLink {
+    color: var(--color-text);
+    text-decoration: none;
+    font-size: 1rem;
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+}
+
+.navLink:hover {
+    opacity: 1;
+}
+
 .header img {
     width: 40px;
     height: 40px;
@@ -453,4 +471,13 @@
         flex: 1;
         min-width: 80px;
     }
+
+    .nav {
+        gap: 1rem;
+        margin-right: 1rem;
+    }
+    
+    .navLink {
+        font-size: 0.9rem;
+    }
 }

website/src/app/page.tsx

@@ -16,9 +16,14 @@ export default function Home() {
         <div className={[styles.page, styles.pageWithHeader].join(" ")}>
             <header className={styles.header}>
                 <div className={styles.logoMark}>
-                    <img src="/unicord.png"></img>
+                    <img src="/unicord.png" alt="Unicord logo"></img>
                     <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
                 </div>
+                <nav className={styles.nav}>
+                    <a href="/docs" className={styles.navLink}>Docs</a>
+                    <a href="https://github.com/unicorddev/unicord" className={styles.navLink}>Source</a>
+                    <a href="https://discord.gg/your-invite-here" className={styles.navLink}>Discord</a>
+                </nav>
             </header>
             <main className={styles.main}>
                 <div className={styles.hero}>