feat: some styling

packages/website-ue/src/components/HomeHero.astro

@@ -0,0 +1,39 @@
+---
+import "@fontsource-variable/roboto-flex/wdth.css";
+---
+
+<style is:global>
+  @import "@radix-ui/colors/violet-dark.css";
+  @import "@radix-ui/colors/plum-dark.css";
+
+  .home-hero {
+    background-image: url(/assets/home-hero.webp);
+    background-size: cover;
+    background-position: top;
+
+    .wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(var(--gray-a11), var(--gray-1));
+      padding: var(--space-9);
+
+      h1 {
+        font-weight: 900;
+        font-size: 3rem;
+      }
+
+      @media (max-width: 40rem) {
+        h1 {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+</style>
+
+<div class="home-hero">
+  <div class="wrapper">
+    <h1>BlitzKit 2.0</h1>
+  </div>
+</div>

packages/website-ue/src/layouts/BaseLayout.astro

@@ -1,16 +1,73 @@
+---
+import "@fontsource-variable/inter";
+---
+
 <html>
   <head>
     <meta charset="utf-8" />
 
-    <style>
+    <style is:global>
+      @import "@radix-ui/colors/mauve-dark.css";
+      @import "@radix-ui/colors/mauve-alpha.css";
+
       body {
-        background-color: black;
-        filter: invert(1) hue-rotate(180deg);
+        --gray-1: var(--mauve-1);
+        --gray-2: var(--mauve-2);
+        --gray-3: var(--mauve-3);
+        --gray-4: var(--mauve-4);
+        --gray-5: var(--mauve-5);
+        --gray-6: var(--mauve-6);
+        --gray-7: var(--mauve-7);
+        --gray-8: var(--mauve-8);
+        --gray-9: var(--mauve-9);
+        --gray-10: var(--mauve-10);
+        --gray-11: var(--mauve-11);
+        --gray-12: var(--mauve-12);
+
+        --gray-a1: var(--mauve-a1);
+        --gray-a2: var(--mauve-a2);
+        --gray-a3: var(--mauve-a3);
+        --gray-a4: var(--mauve-a4);
+        --gray-a5: var(--mauve-a5);
+        --gray-a6: var(--mauve-a6);
+        --gray-a7: var(--mauve-a7);
+        --gray-a8: var(--mauve-a8);
+        --gray-a9: var(--mauve-a9);
+        --gray-a10: var(--mauve-a10);
+        --gray-a11: var(--mauve-a11);
+        --gray-a12: var(--mauve-a12);
+
+        --space-1: 0.25rem;
+        --space-2: 0.5rem;
+        --space-3: 0.75rem;
+        --space-4: 1rem;
+        --space-5: 1.5rem;
+        --space-6: 2rem;
+        --space-7: 2.5rem;
+        --space-8: 3rem;
+        --space-9: 4rem;
+
+        background-color: var(--gray-1);
+        color: var(--gray-12);
+        font-family: "Inter Variable", sans-serif;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      body,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin: 0;
       }
     </style>
   </head>
 
-  <body>
+  <body class="dark">
     <slot />
   </body>
 </html>

packages/website-ue/src/pages/index.astro

@@ -1,12 +1,14 @@
 ---
-import packageJson from "../../../../package.json";
+import HomeHero from "../components/HomeHero.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout>
-  <h1>blitzkit {packageJson.version}</h1>
+  <HomeHero />
+
+  <!-- <h1>blitzkit {packageJson.version}</h1>
 
   <p><a href="/tanks">/tanks</a></p>
 
-  <p><a href="/api">/api</a></p>
+  <p><a href="/api">/api</a></p> -->
 </BaseLayout>