feat: cards

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

@@ -18,7 +18,8 @@ import "@fontsource-variable/roboto-flex";
 
     --max-size: max(100vw, 100vh);
 
-    --font-size-regular: var(--space-4);
+    --font-size-regular: 1rem;
+    --font-size-minor: 0.75rem;
 
     --font-family-regular: "Roboto Flex Variable", sans-serif;
     --font-family-mono: "JetBrains Mono Variable", monospace;

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

@@ -1,8 +1,11 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
 import "./index.css";
 
-export interface ButtonProps extends ComponentProps<"button"> {}
+export interface ButtonProps extends ComponentProps<"button"> {
+  color?: Color;
+}
 
 export function Button({ className, ...props }: ButtonProps) {
   return <button className={classNames("button", className)} {...props} />;

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

@@ -1,3 +1,7 @@
 .text {
   font-size: var(--font-size-regular);
+
+  &[data-size="minor"] {
+    font-size: var(--font-size-minor);
+  }
 }

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

@@ -6,18 +6,21 @@ import "./index.css";
 export interface TextProps extends ComponentProps<"span"> {
   color?: Color;
   lowContrast?: boolean;
+  size?: "regular" | "minor";
 }
 
 export function Text({
   color = "gray",
   lowContrast,
   className,
+  size = "regular",
   ...props
 }: TextProps) {
   return (
     <span
       className={classNames("text", className)}
       style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
+      data-size={size}
       {...props}
     />
   );

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

@@ -1,30 +1,76 @@
 ---
 import { CaretRightIcon } from "@radix-ui/react-icons";
-import type { Tool } from "../core/tools/tools";
+import { api } from "../core/api/dynamic";
+import { type Tool } from "../core/tools/tools";
 import { Button } from "./Button";
 import { Text } from "./Text";
 
 interface Props {
   tool: Tool;
+  locale: string;
 }
 
-const { tool } = Astro.props;
+const { tool, locale } = Astro.props;
+const strings = await api.strings(locale);
+const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 ---
 
 <style>
   .tool-card {
+    display: flex;
+    flex-direction: column;
+    height: 10rem;
+
+    border-radius: var(--space-3);
+
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+
+    .poster {
+      flex: 1;
+
+      background-size: cover;
+      background-position: center;
+    }
+
+    .info {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--space-4);
+
+      backdrop-filter: blur(var(--space-6));
+
+      .readable {
+        display: flex;
+        flex-direction: column;
+      }
+    }
   }
 </style>
 
-<div class="tool-card">
-  <div>
-    <div>
-      <Text>{tool.id}</Text>
-      <Text>{tool.id}</Text>
+<div
+  class="tool-card"
+  style={{
+    backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+  }}
+>
+  <div
+    class="poster"
+    style={{
+      backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+    }}
+  >
+  </div>
+
+  <div class="info">
+    <div class="readable">
+      <Text>{toolStrings.name}</Text>
+      <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
     </div>
 
-    <Button>
-      {tool.id}
+    <Button color={tool.button}>
+      {toolStrings.action}
       <CaretRightIcon />
     </Button>
   </div>