feat: some footer

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

@@ -20,10 +20,14 @@ import "@fontsource-variable/roboto-flex";
 
     --font-size-regular: 1rem;
     --font-size-minor: 0.75rem;
+    --font-size-major: 1.25rem;
 
     --font-family-regular: "Roboto Flex Variable", sans-serif;
     --font-family-mono: "JetBrains Mono Variable", monospace;
 
+    --color-regular: var(--gray-12);
+    --color-low-contrast: var(--gray-11);
+
     --weight-light: 300;
     --weight-regular: 400;
     --weight-medium: 500;

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

@@ -1,20 +1,75 @@
+---
+import packageJson from "../../../../package.json";
+import { api } from "../core/api/dynamic";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
 <style>
   .footer {
     display: flex;
     justify-content: center;
 
     margin-top: calc(var(--space-4) * -1);
-    padding: var(--space-6) var(--space-4);
+    padding: var(--space-5) var(--space-5);
 
     background-color: var(--gray-3);
+    color: var(--color-low-contrast);
 
     .content {
       flex: 1;
       max-width: 52rem;
+
+      .logo {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .icon {
+          width: var(--space-6);
+          height: var(--space-6);
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+          align-items: end;
+          gap: var(--space-1);
+        }
+      }
     }
   }
+
+  .footer-spacer {
+    flex: 1;
+  }
 </style>
 
+<div class="footer-spacer"></div>
+
 <div class="footer">
-  <div class="content">poopy</div>
+  <div class="content">
+    <div class="logo">
+      <BlitzKitIcon className="icon" />
+
+      <div class="info">
+        <Text lowContrast weight="medium" size="major">
+          {strings.common.name}
+        </Text>
+
+        <Code>
+          {packageJson.version}
+        </Code>
+      </div>
+    </div>
+  </div>
 </div>

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

@@ -5,6 +5,10 @@
     font-size: var(--font-size-minor);
   }
 
+  &[data-size="major"] {
+    font-size: var(--font-size-major);
+  }
+
   &[data-weight="light"] {
     font-weight: var(--weight-light);
   }

packages/website-ue/src/components/Text/index.tsx

@@ -7,7 +7,7 @@ export interface TextProps extends ComponentProps<"span"> {
   color?: Color;
   weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
-  size?: "regular" | "minor";
+  size?: "regular" | "minor" | "major";
 }
 
 export function Text({