From 448450908ba3d97f49329cee081121cf7d08f8e7 Mon Sep 17 00:00:00 2001
From: Leon Morival <leon.morival@gmail.com>
Date: Sun, 19 Jul 2026 19:20:36 +0200
Subject: [PATCH] feat: navbar

---
 app/globals.css          | 104 ++++++++++++++++++++++++++++++++++++---
 app/lib/server-config.ts |   2 +-
 app/minecraft/page.tsx   |   2 -
 app/page.tsx             |  28 ++++++-----
 4 files changed, 114 insertions(+), 22 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 724e3d2..27bc450 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -193,9 +193,84 @@ svg {
 }
 
 .home-nav {
+  position: relative;
+  isolation: isolate;
   display: flex;
+  min-height: 76px;
   width: 100%;
+  padding: 10px 12px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  overflow: hidden;
+  border: 1px solid rgb(168 245 255 / 22%);
+  border-radius: 14px;
+  background:
+    linear-gradient(110deg, rgb(0 231 255 / 8%), transparent 34%),
+    rgb(9 14 31 / 82%);
+  box-shadow:
+    0 16px 44px rgb(0 0 0 / 32%),
+    inset 0 0 0 1px rgb(255 255 255 / 4%);
+  backdrop-filter: blur(16px);
+}
+
+.home-nav::after {
+  position: absolute;
+  right: 12%;
+  bottom: -1px;
+  left: 12%;
+  z-index: -1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgb(0 231 255 / 80%), transparent);
+  box-shadow: 0 0 18px rgb(0 231 255 / 70%);
+  content: "";
+  pointer-events: none;
+}
+
+.home-nav-links {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.home-nav-link {
+  display: inline-flex;
+  min-height: 44px;
+  padding: 0 18px;
+  align-items: center;
   justify-content: center;
+  border: 1px solid rgb(168 245 255 / 20%);
+  border-radius: 8px;
+  color: #d8fbff;
+  font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.home-nav-link:hover {
+  transform: translateY(-2px);
+  border-color: rgb(168 245 255 / 65%);
+  background: rgb(0 231 255 / 10%);
+  color: #fff;
+}
+
+.home-nav-link[aria-current="page"] {
+  background: rgb(0 231 255 / 8%);
+}
+
+.home-nav-link--docs {
+  border-color: #fff;
+  background: #fff;
+  color: #09101f;
+}
+
+.home-nav-link--docs:hover {
+  border-color: #a8f5ff;
+  background: #a8f5ff;
+  color: #06111a;
 }
 
 .brand-lockup,
@@ -207,6 +282,7 @@ svg {
 }
 
 .brand-lockup {
+  min-width: 0;
   color: #a8f5ff;
   font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
   font-size: 1.2rem;
@@ -215,6 +291,7 @@ svg {
 
 .brand-mark {
   display: grid;
+  flex: 0 0 auto;
   width: 54px;
   height: 54px;
   place-items: center;
@@ -421,10 +498,11 @@ svg {
   border: 2px solid rgb(255 255 255 / 20%);
   border-radius: 8px;
   background: var(--service-accent);
-  color: #06111a;
+  color: #fff;
   font-weight: 800;
   line-height: 1.2;
   text-align: center;
+  text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
 }
 
 .service-action-label {
@@ -434,23 +512,18 @@ svg {
 
 .service-card--jellyfin .service-action {
   background: linear-gradient(180deg, #a95cff, #7d3cff);
-  color: #fff;
-  text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
 }
 
 .service-card--seerr .service-action {
   background: linear-gradient(180deg, #ffd166, #ff6b8a);
-  color: #170b14;
 }
 
 .service-card--minecraft .service-action {
   background: linear-gradient(180deg, #35f48a, #13ca69);
-  color: #041411;
 }
 
 .service-card--astroneer .service-action {
   background: linear-gradient(180deg, #ffd66b, #ff9f43);
-  color: #1a1025;
 }
 
 .service-action svg {
@@ -1303,6 +1376,25 @@ h2.pixel-heading {
     padding-top: 24px;
   }
 
+  .home-nav {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .brand-lockup {
+    justify-content: center;
+  }
+
+  .home-nav-links {
+    width: 100%;
+  }
+
+  .home-nav-link {
+    flex: 1;
+    padding: 0 12px;
+  }
+
   .brand-lockup {
     font-size: 1rem;
   }
diff --git a/app/lib/server-config.ts b/app/lib/server-config.ts
index e259f01..0277828 100644
--- a/app/lib/server-config.ts
+++ b/app/lib/server-config.ts
@@ -19,6 +19,6 @@ export const minecraftServer = {
 
 export const astroneerServer = {
   name: "Astroneer",
-  address: "astroneer.leonmorival.xyz",
+  address: "89.167.35.217",
   access: "Serveur dédié",
 };
diff --git a/app/minecraft/page.tsx b/app/minecraft/page.tsx
index 62bb283..7a140b5 100644
--- a/app/minecraft/page.tsx
+++ b/app/minecraft/page.tsx
@@ -58,8 +58,6 @@ export default function MinecraftPage() {
         />
         <div className="minecraft-hero-content">
           <h1 id="minecraft-title">Minecraft Survie</h1>
-          <p>Un monde privé pour construire, explorer et jouer entre amis.</p>
-
           <div className="server-address block-panel">
             <DiamondIcon />
             <span>{minecraftServer.address}</span>
diff --git a/app/page.tsx b/app/page.tsx
index a8a3ed1..c452ef8 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,23 +10,31 @@ import { astroneerServer, siteConfig } from "./lib/server-config";
 export default function Home() {
   return (
     <main className="stellar-page home-page">
-      <section className="home-shell" aria-labelledby="home-title">
+      <section className="home-shell lg:justify-center" aria-label="Services privés de Leon">
         <nav className="home-nav" aria-label="Navigation principale">
           <Link href="/" className="brand-lockup" aria-label="Accueil">
             <span className="brand-mark">L</span>
             <span>{siteConfig.name}</span>
           </Link>
+
+          <div className="home-nav-links">
+            <Link href="/" className="home-nav-link" aria-current="page">
+              Accueil
+            </Link>
+            <Link href="/docs" className="home-nav-link home-nav-link--docs">
+              Documentation
+            </Link>
+          </div>
         </nav>
 
-        <div className="home-hero">
-          <h1 id="home-title">{siteConfig.title}</h1>
-          <p>{siteConfig.description}</p>
-        </div>
+        {/*<div className="home-hero">*/}
+        {/*  <h1 id="home-title">{siteConfig.title}</h1>*/}
+        {/*</div>*/}
 
         <div className="service-grid" aria-label="Services disponibles">
           <HomeElement
-            title="Jellyfin"
-            description="Films, séries et bibliothèque privée."
+            title="Momostreaming"
+            description="Films et Séries"
             href={siteConfig.jellyfinUrl}
             actionLabel="Ouvrir"
             variant="jellyfin"
@@ -66,12 +74,6 @@ export default function Home() {
             <AstroneerIcon />
           </HomeElement>
         </div>
-
-        <div className="home-footer-hint" aria-hidden="true">
-          <span />
-          <strong>Services privés</strong>
-          <span />
-        </div>
       </section>
     </main>
   );