feat(web): redesign navigation with centered logo and smooth page transitions

- Replace sidebar nav with centered header featuring PAC-MAN title
- Add glimmer animation effect for non-active logo state
- Implement 200ms fade transitions between pages
- Add custom scrollbar styling with OverlayScrollbars
- Switch to Russo One font for title, Outfit for body text

web/layouts/LayoutDefault.tsx

@@ -1,11 +1,14 @@
 import "./tailwind.css";
 import "@fontsource/pixelify-sans";
-import "@fontsource/nunito/800.css";
-import "@fontsource/nunito";
+import "@fontsource/outfit/400.css";
+import "@fontsource/outfit/500.css";
+import "@fontsource/russo-one";
+import "overlayscrollbars/overlayscrollbars.css";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { usePageContext } from "vike-react/usePageContext";
 import { IconBrandGithub, IconDownload, IconDeviceGamepad3, IconTrophy } from "@tabler/icons-react";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 const links = [
   {
@@ -30,13 +33,25 @@ const links = [
   },
 ];
 
-export function Link({ href, label }: { href: string; label: string }) {
+export function Link({ href, label, icon }: { href: string; label: string; icon?: React.ReactNode }) {
   const pageContext = usePageContext();
   const { urlPathname } = pageContext;
   const isActive = href === "/" ? urlPathname === href : urlPathname.startsWith(href);
   return (
-    <a href={href} className={isActive ? "text-yellow-400" : "text-gray-400"}>
-      {label}
+    <a 
+      href={href} 
+      className={`
+        flex items-center gap-1.5 
+        tracking-wide
+        transition-colors duration-200
+        ${isActive 
+          ? "text-white" 
+          : "text-gray-500 hover:text-gray-300"
+        }
+      `}
+    >
+      {icon}
+      <span>{label}</span>
     </a>
   );
 }
@@ -45,10 +60,12 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
   const [opened, setOpened] = useState(false);
   const toggle = () => setOpened((v) => !v);
   const close = () => setOpened(false);
-
-  const mainLinks = links
-    .filter((link) => link.href.startsWith("/"))
-    .map((link) => <Link href={link.href} key={link.label} label={link.label} />);
+  
+  const pageContext = usePageContext();
+  const { urlPathname } = pageContext;
+  const isIndexPage = urlPathname === "/";
+  const isLeaderboardPage = urlPathname.startsWith("/leaderboard");
+  const isDownloadPage = urlPathname.startsWith("/download");
 
   const sourceLinks = links
     .filter((link) => !link.href.startsWith("/"))
@@ -58,31 +75,68 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
         title={link.label}
         key={link.label}
         target="_blank"
-        className="transition-[drop-shadow] duration-1000 hover:drop-shadow-sm drop-shadow-yellow-400"
+        className="text-gray-500 hover:text-gray-300 transition-colors duration-200"
       >
         {link.icon}
       </a>
     ));
 
   return (
-    <div className="bg-black text-yellow-400 min-h-screen flex flex-col">
-      <header className="sticky top-0 z-20 h-[60px] border-b border-yellow-400/25 bg-black">
-        <div className="h-full px-4 flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <button
-              aria-label="Open navigation"
-              onClick={toggle}
-              className="sm:hidden inline-flex items-center justify-center w-9 h-9 rounded border border-yellow-400/30 text-yellow-400"
+    <div className="bg-black text-yellow-400 h-screen flex flex-col overflow-hidden">
+      <header className="shrink-0 h-[60px] border-b border-yellow-400/25 bg-black z-20">
+        <div className="h-full px-4 flex items-center justify-center">
+          <button
+            aria-label="Open navigation"
+            onClick={toggle}
+            className="sm:hidden absolute left-4 inline-flex items-center justify-center w-9 h-9 rounded border border-yellow-400/30 text-yellow-400"
+          >
+            <span className="sr-only">Toggle menu</span>
+            <div className="w-5 h-0.5 bg-yellow-400" />
+          </button>
+          
+          <div className="flex items-center gap-8">
+            <Link href="/leaderboard" label="Leaderboard" icon={<IconTrophy size={18} />} />
+            
+            <a 
+              href="/"
+              onClick={(e) => {
+                if (isIndexPage) {
+                  e.preventDefault();
+                }
+              }}
             >
-              <span className="sr-only">Toggle menu</span>
-              <div className="w-5 h-0.5 bg-yellow-400" />
-            </button>
-            <nav className="hidden sm:flex gap-4 items-center">{mainLinks}</nav>
+              <h1 
+                className={`text-3xl tracking-[0.3em] title-hover ${
+                  isIndexPage 
+                    ? 'text-yellow-400' 
+                    : 'glimmer-text'
+                }`}
+                style={{ fontFamily: 'Russo One' }}
+              >
+                PAC-MAN
+              </h1>
+            </a>
+            
+            <Link href="/download" label="Download" icon={<IconDownload size={18} />} />
           </div>
-          <div className="hidden sm:flex gap-4 items-center">{sourceLinks}</div>
+          
+          <div className="absolute right-4 hidden sm:flex gap-4 items-center">{sourceLinks}</div>
         </div>
       </header>
-      <main className="flex-1">{children}</main>
+      
+      <OverlayScrollbarsComponent 
+        defer
+        options={{
+          scrollbars: {
+            theme: 'os-theme-light',
+            autoHide: 'scroll',
+            autoHideDelay: 1300,
+          },
+        }}
+        className="flex-1"
+      >
+        <main>{children}</main>
+      </OverlayScrollbarsComponent>
 
       {opened && (
         <div className="fixed inset-0 z-30">
@@ -100,7 +154,7 @@ export default function LayoutDefault({ children }: { children: React.ReactNode
             </div>
             <div className="flex flex-col gap-3">
               {links.map((link) => (
-                <Link href={link.href} key={link.label} label={link.label} />
+                <Link href={link.href} key={link.label} label={link.label} icon={link.icon} />
               ))}
             </div>
           </div>