From 60a29ef2e7db12dcbc833825d0deb6b242c5bd2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 15 Jan 2026 13:48:37 -0600
Subject: [PATCH] feat: fancier navbar

---
 .../public/assets/patterns/tanks.svg          |  3 +++
 .../src/components/BaseStyles.astro           |  7 ++++--
 .../website-ue/src/components/Navbar.astro    | 25 ++++++++++++++++---
 .../src/components/ToolBanner.astro           | 13 ++++++++--
 .../website-ue/src/layouts/BaseLayout.astro   |  3 +++
 .../src/pages/[...locale]/tanks/index.astro   |  7 +++++-
 6 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 packages/website-ue/public/assets/patterns/tanks.svg

diff --git a/packages/website-ue/public/assets/patterns/tanks.svg b/packages/website-ue/public/assets/patterns/tanks.svg
new file mode 100644
index 000000000..0a76ff759
--- /dev/null
+++ b/packages/website-ue/public/assets/patterns/tanks.svg
@@ -0,0 +1,3 @@
+<svg width="70" height="35" viewBox="0 0 70 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 32L64 35H0L70 0V32ZM0 32V0H64L0 32Z" fill="#EEEEF0"/>
+</svg>
diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index f8d47f259..04f3e0a22 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -16,7 +16,7 @@ import "@fontsource-variable/roboto-flex";
     --space-8: 16rem;
     --space-9: 32rem;
 
-    --page-width: 52rem;
+    --page-width: 64rem;
 
     --max-size: max(100vw, 100vh);
 
@@ -74,8 +74,11 @@ import "@fontsource-variable/roboto-flex";
     --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
       var(--black-a11);
     --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
+    --shadow-none: 0 0 0 transparent;
 
     --blur-glass: blur(4rem);
-    --blur-tint: blur(16rem);
+    --blur-tint: blur(8rem);
+
+    --duration-brief: 200ms;
   }
 </style>
diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro
index 3b3b8fe3f..7ef4ff4c1 100644
--- a/packages/website-ue/src/components/Navbar.astro
+++ b/packages/website-ue/src/components/Navbar.astro
@@ -11,7 +11,7 @@ const { locale } = Astro.props;
 ---
 
 <style>
-  .navbar {
+  #navbar {
     position: sticky;
     top: 0;
     left: 0;
@@ -21,7 +21,15 @@ const { locale } = Astro.props;
 
     z-index: 1;
     backdrop-filter: var(--blur-glass) brightness(25%);
-    box-shadow: var(--shadow-subtle);
+    background-color: var(--accent-2);
+    box-shadow: var(--shadow-none);
+
+    transition-duration: var(--duration-brief);
+
+    &[data-sticky="true"] {
+      background-color: var(--gray-a2);
+      box-shadow: var(--shadow-subtle);
+    }
 
     .content {
       flex: 1;
@@ -55,7 +63,18 @@ const { locale } = Astro.props;
   }
 </style>
 
-<div class="navbar">
+<script>
+  const navbar = document.getElementById("navbar")!;
+
+  function handleScroll() {
+    navbar.dataset.sticky = `${window.scrollY > 0}`;
+  }
+
+  handleScroll();
+  window.addEventListener("scroll", handleScroll);
+</script>
+
+<div id="navbar">
   <div class="content">
     <div class="side">
       <LinkI18n {locale} href="/" className="action" tabIndex={0}>
diff --git a/packages/website-ue/src/components/ToolBanner.astro b/packages/website-ue/src/components/ToolBanner.astro
index 1cefd7a84..b12f277f8 100644
--- a/packages/website-ue/src/components/ToolBanner.astro
+++ b/packages/website-ue/src/components/ToolBanner.astro
@@ -30,6 +30,10 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       backdrop-filter: var(--blur-tint);
 
+      @media (width > 40rem) {
+        padding: var(--space-6) var(--space-4);
+      }
+
       .centered {
         flex: 1;
         max-width: var(--page-width);
@@ -45,7 +49,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
         width: 100%;
         height: 100%;
 
-        background-image: url(/assets/patterns/avatars.svg);
         mask-image: linear-gradient(
           90deg,
           transparent 25%,
@@ -67,7 +70,13 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   }}
 >
   <div class="content">
-    <div class="pattern"></div>
+    <div
+      class="pattern"
+      style={{
+        backgroundImage: `url(/assets/patterns/${tool.id}.svg)`,
+      }}
+    >
+    </div>
 
     <div class="centered">
       <Heading weight="medium" size="2">
diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro
index e64926bc2..1be6b12e3 100644
--- a/packages/website-ue/src/layouts/BaseLayout.astro
+++ b/packages/website-ue/src/layouts/BaseLayout.astro
@@ -29,7 +29,10 @@ const { accent, noNavbar, locale } = Astro.props;
     <ColorScale color="white" alpha />
 
     <ColorScale color={accent} />
+    <ColorScale color={accent} alpha />
     <ColorAlias color={accent} alias="accent" />
+    <ColorAlias color={accent} alpha alias="accent" />
+
     <BaseStyles />
 
     <style>
diff --git a/packages/website-ue/src/pages/[...locale]/tanks/index.astro b/packages/website-ue/src/pages/[...locale]/tanks/index.astro
index 55a6c4f96..2925561e3 100644
--- a/packages/website-ue/src/pages/[...locale]/tanks/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/tanks/index.astro
@@ -1,14 +1,19 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
+import ToolBanner from "../../../components/ToolBanner.astro";
 import { api } from "../../../core/api/dynamic";
+import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 export { getStaticPaths } from "../index.astro";
 
+const { locale } = Astro.props;
 const tankList = await api.tankList();
 ---
 
-<BaseLayout accent="violet">
+<BaseLayout {locale} accent="purple">
+  <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
+
   <h1>tanks</h1>
 
   {