migrate 3

packages/website/src/components/ToolBanner.astro

@@ -0,0 +1,94 @@
+---
+import type { Tool } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import { Heading } from "./Heading";
+
+interface Props {
+  locale: string;
+  tool: Tool;
+}
+
+const { tool, locale } = Astro.props;
+const strings = getStrings(locale);
+const toolStrings =
+  strings.website.tools[tool.id as keyof typeof strings.website.tools];
+---
+
+<style>
+  .tool-banner {
+    background-size: cover;
+
+    .content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+      gap: var(--space-4);
+      padding: var(--space-5) var(--space-4);
+      box-sizing: border-box;
+
+      backdrop-filter: var(--blur-tint);
+
+      :root.light & {
+        backdrop-filter: var(--blur-tint) invert(1) hue-rotate(180deg);
+      }
+
+      @media (width > 40rem) {
+        padding: var(--space-6) var(--space-4);
+      }
+
+      .centered {
+        flex: 1;
+        max-width: var(--page-width);
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        :root.light & {
+          filter: invert(1) brightness(0);
+        }
+
+        mask-image: linear-gradient(
+          90deg,
+          transparent 25%,
+          var(--black-a1),
+          transparent
+        );
+        mask-repeat: no-repeat;
+        mask-size: cover;
+      }
+    }
+  }
+</style>
+
+<div
+  class="tool-banner"
+  style={{
+    backgroundImage: `url(/media/tools/banners/${tool.id}.webp)`,
+    backgroundPosition: tool.banner_background_position ?? "top",
+  }}
+>
+  <div class="content">
+    <div
+      class="pattern"
+      style={{ backgroundImage: `url(/media/patterns/${tool.id}.svg)` }}
+    >
+    </div>
+
+    <div class="centered">
+      <Heading weight="bold" size="2">
+        {toolStrings.name}
+      </Heading>
+    </div>
+  </div>
+</div>