From 220e4388d4562a5f9496a36501c2ca2b306b8aad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 8 Jan 2026 20:39:44 -0600
Subject: [PATCH] feat: start on header

---
 bun.lock                                      |  6 +--
 packages/website-ue/package.json              |  2 +-
 .../src/components/BaseStyles.astro           |  6 ++-
 .../website-ue/src/components/Code/index.css  |  4 ++
 .../website-ue/src/components/Code/index.tsx  |  8 +++
 .../website-ue/src/components/HomeHero.astro  | 49 +++++++++++++++++--
 .../src/components/TextField/index.css        |  4 +-
 packages/website-ue/src/icons/BlitzKit.tsx    | 19 +++++++
 .../website-ue/src/layouts/BaseLayout.astro   |  1 -
 .../src/pages/[...locale]/index.astro         | 19 +++++--
 10 files changed, 102 insertions(+), 16 deletions(-)
 create mode 100644 packages/website-ue/src/components/Code/index.css
 create mode 100644 packages/website-ue/src/components/Code/index.tsx
 create mode 100644 packages/website-ue/src/icons/BlitzKit.tsx

diff --git a/bun.lock b/bun.lock
index 84c1b422c..72fc579c2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -187,8 +187,8 @@
         "@blitzkit/core": "workspace:*",
         "@blitzkit/i18n": "workspace:*",
         "@bufbuild/protobuf": "^2.10.2",
-        "@fontsource-variable/inter": "^5.2.8",
         "@fontsource-variable/roboto-flex": "^5.2.8",
+        "@fontsource-variable/roboto-mono": "^5.2.8",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-icons": "^1.3.2",
         "@react-three/drei": "^10.7.6",
@@ -545,10 +545,10 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
-    "@fontsource-variable/inter": ["@fontsource-variable/inter@5.2.8", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
-
     "@fontsource-variable/roboto-flex": ["@fontsource-variable/roboto-flex@5.2.8", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],
 
+    "@fontsource-variable/roboto-mono": ["@fontsource-variable/roboto-mono@5.2.8", "", {}, "sha512-6M2U3wGIUxYNKRrUoKls8BRRIPDA57T8J0agqwyDkiEHrLEEAqptsxcUl3eTm6tnRNEn6yEm4pCefvtnujebDA=="],
+
     "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
     "@gltf-transform/core": ["@gltf-transform/core@4.2.1", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="],
diff --git a/packages/website-ue/package.json b/packages/website-ue/package.json
index 10d32f778..36e86a566 100644
--- a/packages/website-ue/package.json
+++ b/packages/website-ue/package.json
@@ -17,8 +17,8 @@
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
     "@bufbuild/protobuf": "^2.10.2",
-    "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@react-three/drei": "^10.7.6",
diff --git a/packages/website-ue/src/components/BaseStyles.astro b/packages/website-ue/src/components/BaseStyles.astro
index 65a149748..c3ccbefd7 100644
--- a/packages/website-ue/src/components/BaseStyles.astro
+++ b/packages/website-ue/src/components/BaseStyles.astro
@@ -1,7 +1,11 @@
+---
+import "@fontsource-variable/roboto-flex";
+import "@fontsource-variable/roboto-mono";
+---
+
 <style is:global>
   @import "@radix-ui/colors/mauve-dark.css";
   @import "@radix-ui/colors/mauve-alpha.css";
-  @import "@fontsource-variable/roboto-flex";
 
   body {
     --space-0: 0.0625rem;
diff --git a/packages/website-ue/src/components/Code/index.css b/packages/website-ue/src/components/Code/index.css
new file mode 100644
index 000000000..56a1f39d9
--- /dev/null
+++ b/packages/website-ue/src/components/Code/index.css
@@ -0,0 +1,4 @@
+.code {
+  font-family: "Roboto Mono";
+  color: red;
+}
diff --git a/packages/website-ue/src/components/Code/index.tsx b/packages/website-ue/src/components/Code/index.tsx
new file mode 100644
index 000000000..df0e1e1c4
--- /dev/null
+++ b/packages/website-ue/src/components/Code/index.tsx
@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import "./index.css";
+
+export interface CodeProps extends ComponentProps<"code"> {}
+
+export function Code({ className }: CodeProps) {
+  return <code className={className?????} {...props} />;
+}
diff --git a/packages/website-ue/src/components/HomeHero.astro b/packages/website-ue/src/components/HomeHero.astro
index fa0a468fe..120a73553 100644
--- a/packages/website-ue/src/components/HomeHero.astro
+++ b/packages/website-ue/src/components/HomeHero.astro
@@ -1,5 +1,7 @@
 ---
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
 import { TextField } from "./TextField";
 
 const strings = { home: { search: "test" } };
@@ -9,16 +11,25 @@ const strings = { home: { search: "test" } };
   .home-hero {
     display: flex;
     flex-direction: column;
+    justify-content: end;
     align-items: center;
+    padding: 0 var(--space-4);
+    position: relative;
 
     .wallpaper {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
+      height: calc(100% - var(--space-5) / 2);
+
+      z-index: -1;
+
       background-image: url(/assets/home-hero.webp);
       background-size: cover;
       background-position: top;
-      height: 13rem;
 
-      .wrapper {
+      .gradient {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -32,7 +43,30 @@ const strings = { home: { search: "test" } };
       }
     }
 
-    input {
+    .name {
+      margin: var(--space-6) 0;
+
+      .icon-wrapper {
+        position: relative;
+
+        width: var(--space-6);
+        height: var(--space-6);
+
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        .version {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translateX(100%);
+        }
+      }
+    }
+
+    .text-field {
       width: 100%;
     }
   }
@@ -40,7 +74,14 @@ const strings = { home: { search: "test" } };
 
 <div class="home-hero">
   <div class="wallpaper">
-    <div class="wrapper"></div>
+    <div class="gradient"></div>
+  </div>
+
+  <div class="name">
+    <div class="icon-wrapper">
+      <BlitzKitIcon className="icon" />
+      <Code className="version">2.0</Code>
+    </div>
   </div>
 
   <TextField placeholder={strings.home.search}>
diff --git a/packages/website-ue/src/components/TextField/index.css b/packages/website-ue/src/components/TextField/index.css
index cff57a173..c3c5af753 100644
--- a/packages/website-ue/src/components/TextField/index.css
+++ b/packages/website-ue/src/components/TextField/index.css
@@ -3,8 +3,6 @@
   align-items: center;
 
   gap: var(--space-3);
-  width: 100%;
-  max-width: 40rem;
   margin: 0 var(--space-4);
 
   border-radius: var(--max-size);
@@ -31,6 +29,8 @@
   }
 
   input {
+    min-width: 0;
+
     background: none;
     border: none;
 
diff --git a/packages/website-ue/src/icons/BlitzKit.tsx b/packages/website-ue/src/icons/BlitzKit.tsx
new file mode 100644
index 000000000..eff639a17
--- /dev/null
+++ b/packages/website-ue/src/icons/BlitzKit.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+
+export function BlitzKitIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="128"
+      height="128"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M48.4082 19.8652C56.6277 19.8652 62.3045 21.5665 65.4375 24.9688C67.7005 27.3762 68.8875 30.4035 69 34.0498L52.1045 58.1982L61.252 68.375L30.8174 120.845L32.3818 93.4385H0L12.9863 19.8652H48.4082ZM83.584 58.1318L103.038 35.7969H128L99.2139 65.7285L117.691 109.37H90.4053L81.2812 84.373L78.4297 87.3389L74.5391 109.37H50.0312L52.4111 95.8789L71.4209 68.375L62.2734 58.1982L92.6064 7L83.584 58.1318ZM26.5791 77.875H32.9961C35.3204 77.875 37.1735 77.1677 38.5547 75.7529C39.9358 74.3381 40.8292 72.485 41.2334 70.1943C41.6376 67.9037 41.4012 66.0505 40.5254 64.6357C39.6495 63.1876 38.0496 62.463 35.7256 62.4629H29.3076L26.5791 77.875ZM31.4297 50.4365H37.1904C39.3126 50.4365 40.9635 49.8137 42.1426 48.5674C43.3553 47.2873 44.1641 45.5016 44.5684 43.2109C44.9726 40.954 44.8036 39.2186 44.0625 38.0059C43.3213 36.7598 41.8725 36.1367 39.7168 36.1367H33.957L31.4297 50.4365Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/website-ue/src/layouts/BaseLayout.astro b/packages/website-ue/src/layouts/BaseLayout.astro
index 7f5709e91..681b0ea58 100644
--- a/packages/website-ue/src/layouts/BaseLayout.astro
+++ b/packages/website-ue/src/layouts/BaseLayout.astro
@@ -1,5 +1,4 @@
 ---
-import "@fontsource-variable/inter";
 import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index 68804ea97..d9f6cd4bf 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -1,9 +1,20 @@
 ---
+import locales from "@blitzkit/i18n/locales.json";
 import "@radix-ui/colors/amber-dark.css";
-import packageJson from "../../../../package.json";
-import HomeHero from "../components/HomeHero.astro";
-import { tools } from "../core/tools/tools";
-import BaseLayout from "../layouts/BaseLayout.astro";
+import type { GetStaticPaths } from "astro";
+import packageJson from "../../../../../package.json";
+import HomeHero from "../../components/HomeHero.astro";
+import { tools } from "../../core/tools/tools";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export const getStaticPaths = (() => {
+  return [
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
+    { params: { locale: undefined }, props: { locale: locales.default } },
+  ];
+}) satisfies GetStaticPaths;
 ---
 
 <BaseLayout accent="amber">