feat: tool banners

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

@@ -12,7 +12,7 @@
     background-size: cover;
     background-position: center;
 
-    box-shadow: var(--shadow-interactive), var(--shadow-subtle);
+    box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
   }
 
   .avatar-label {

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

@@ -24,6 +24,13 @@ import "@fontsource-variable/roboto-flex";
     --font-size-minor: 0.75rem;
     --font-size-major: 1.25rem;
 
+    --font-size-heading-1: 3rem;
+    --font-size-heading-2: 2rem;
+    --font-size-heading-3: 1.5rem;
+    --font-size-heading-4: 1.25rem;
+    --font-size-heading-5: 1rem;
+    --font-size-heading-6: 0.75rem;
+
     --font-family-regular: "Roboto Flex Variable", sans-serif;
     --font-family-mono: "JetBrains Mono Variable", monospace;
 
@@ -64,9 +71,11 @@ import "@fontsource-variable/roboto-flex";
       var(--shadow-interactive-shine), var(--shadow-interactive-shadow),
       var(--shadow-interactive-background);
 
-    --shadow-subtle: var(--space-1) var(--space-1) var(--space-4)
+    --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);
 
     --blur-glass: blur(4rem);
+    --blur-tint: blur(16rem);
   }
 </style>

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

@@ -0,0 +1,25 @@
+.heading {
+  &[data-size="1"] {
+    font-size: var(--font-size-heading-1);
+  }
+
+  &[data-size="2"] {
+    font-size: var(--font-size-heading-2);
+  }
+
+  &[data-size="3"] {
+    font-size: var(--font-size-heading-3);
+  }
+
+  &[data-size="4"] {
+    font-size: var(--font-size-heading-4);
+  }
+
+  &[data-size="5"] {
+    font-size: var(--font-size-heading-5);
+  }
+
+  &[data-size="6"] {
+    font-size: var(--font-size-heading-6);
+  }
+}

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

@@ -0,0 +1,23 @@
+import { classNames } from "../../core/ui/classNames";
+import { Text, type TextProps } from "../Text";
+import "./index.css";
+
+export interface HeadingProps extends Omit<TextProps, "size"> {
+  size?: `${1 | 2 | 3 | 4 | 5 | 6}`;
+}
+
+export function Heading({
+  className,
+  weight,
+  size = "1",
+  ...props
+}: HeadingProps) {
+  return (
+    <Text
+      {...props}
+      weight={weight ?? "medium"}
+      className={classNames("heading", className)}
+      data-size={size}
+    />
+  );
+}

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

@@ -20,8 +20,8 @@ const { locale } = Astro.props;
     justify-content: center;
 
     z-index: 1;
-    backdrop-filter: var(--blur-glass);
-    background-color: var(--black-a5);
+    backdrop-filter: var(--blur-glass) brightness(25%);
+    box-shadow: var(--shadow-subtle);
 
     .content {
       flex: 1;

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

@@ -0,0 +1,81 @@
+---
+import { api } from "../core/api/dynamic";
+import type { Tool } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+  tool: Tool;
+}
+
+const { tool, locale } = Astro.props;
+const strings = await api.strings(locale);
+const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
+---
+
+<style>
+  .tool-hero {
+    background-size: cover;
+
+    .content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+      padding: var(--space-5) var(--space-4);
+      box-sizing: border-box;
+
+      backdrop-filter: var(--blur-tint);
+
+      .centered {
+        flex: 1;
+        max-width: var(--page-width);
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        background-image: url(/assets/patterns/avatars.svg);
+        mask-image: linear-gradient(
+          90deg,
+          transparent 25%,
+          var(--black-a1),
+          transparent
+        );
+        mask-repeat: no-repeat;
+        mask-size: cover;
+      }
+    }
+  }
+</style>
+
+<div
+  class="tool-hero"
+  style={{
+    backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+    backgroundPosition: tool.background_position ?? "top",
+  }}
+>
+  <div class="content">
+    <div class="pattern"></div>
+
+    <div class="centered">
+      <Heading weight="medium" size="2">
+        {toolStrings.name}
+      </Heading>
+      <Text>
+        {toolStrings.slogan}
+      </Text>
+    </div>
+  </div>
+</div>