feat: home page tools

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

@@ -14,6 +14,11 @@ export const LIGHT_TEXT_COLORS = new Set<Color>([
   "teal",
   "grass",
   "amber",
+  "plum",
+  "pink",
+  "brown",
+  "crimson",
+  "jade",
 ]);
 
 export function Button({

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

@@ -21,9 +21,11 @@ const strings = await api.strings(locale);
     flex-direction: column;
     justify-content: end;
     align-items: center;
-    padding: 0 var(--space-4);
     position: relative;
 
+    padding: 0 var(--space-4);
+    margin-bottom: var(--space-4);
+
     .wallpaper {
       position: absolute;
       top: 0;

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

@@ -29,6 +29,11 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
     background-position: center;
     overflow: hidden;
 
+    &[data-significant="true"] {
+      grid-column: 1 / -1;
+      height: 15rem;
+    }
+
     .poster {
       flex: 1;
 
@@ -59,6 +64,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
   }}
+  data-significant={tool.significant}
 >
   <div
     class="poster"
@@ -74,7 +80,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
     </div>
 
-    <Button color={tool.button}>
+    <Button color={tool.accent}>
       {toolStrings.action}
       <CaretRightIcon />
     </Button>