feat: tanks section

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

@@ -9,9 +9,11 @@ import { Text } from "./Text";
 interface Props {
   tool: Tool;
   locale: string;
+
+  gradient?: boolean;
 }
 
-const { tool, locale } = Astro.props;
+const { tool, locale, gradient } = Astro.props;
 const strings = await api.strings(locale);
 const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 ---
@@ -29,9 +31,8 @@ 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;
+    &[data-gradient="true"] {
+      height: 10rem;
     }
 
     .poster {
@@ -39,6 +40,13 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
       background-size: cover;
       background-position: center;
+
+      .gradient {
+        width: 100%;
+        height: 100%;
+
+        background: linear-gradient(var(--gray-1), transparent);
+      }
     }
 
     .info {
@@ -64,7 +72,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
   }}
-  data-significant={tool.significant}
+  data-gradient={gradient}
 >
   <div
     class="poster"
@@ -72,6 +80,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
     }}
   >
+    {gradient && <div class="gradient" />}
   </div>
 
   <div class="info">