From 25f7baa1d50be2fa7988284cd6480e18b019208c Mon Sep 17 00:00:00 2001
From: "Jaron (aider)" <jaron@fishhat.dev>
Date: Sun, 23 Feb 2025 01:02:01 -0600
Subject: [PATCH] feat: Add navigation links to header with responsive styling

---
 website/src/app/page.module.css | 27 +++++++++++++++++++++++++++
 website/src/app/page.tsx        |  7 ++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/website/src/app/page.module.css b/website/src/app/page.module.css
index 5e0cd57..941e1ed 100644
--- a/website/src/app/page.module.css
+++ b/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;
+    }
 }
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index c3394de..b733e53 100644
--- a/website/src/app/page.tsx
+++ b/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}>