feat: start on header

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;

packages/website-ue/src/components/Code/index.css

@@ -0,0 +1,4 @@
+.code {
+  font-family: "Roboto Mono";
+  color: red;
+}

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} />;
+}

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}>

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;