From 81877f5abd624230445d751b4354dbb2be4818cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 31 Jan 2026 22:32:59 -0600
Subject: [PATCH] feat: tank cards

---
 .../src/components/TankCard/index.module.css  | 31 ++++++++++++++
 .../src/components/TankCard/index.tsx         | 30 ++++++++++++++
 .../website-ue/src/components/TanksCard.astro | 40 +++++++++++++++++++
 .../src/pages/[...locale]/index.astro         |  3 ++
 4 files changed, 104 insertions(+)
 create mode 100644 packages/website-ue/src/components/TankCard/index.module.css
 create mode 100644 packages/website-ue/src/components/TankCard/index.tsx
 create mode 100644 packages/website-ue/src/components/TanksCard.astro

diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
new file mode 100644
index 000000000..52601ccda
--- /dev/null
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -0,0 +1,31 @@
+.tank-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2);
+
+  .icon-wrapper {
+    position: relative;
+
+    .flag {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      background-size: cover;
+      background-position: left center;
+
+      width: 75%;
+      height: 50%;
+    }
+
+    .icon {
+      width: 7rem;
+      aspect-ratio: 4 / 3;
+      position: relative;
+
+      background-size: 150%;
+      background-position: center;
+    }
+  }
+}
diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx
new file mode 100644
index 000000000..8824b529f
--- /dev/null
+++ b/packages/website-ue/src/components/TankCard/index.tsx
@@ -0,0 +1,30 @@
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface TankCard {
+  tank: string;
+}
+
+export function TankCard({ tank }: TankCard) {
+  return (
+    <div className={styles["tank-card"]}>
+      <div className={styles["icon-wrapper"]}>
+        <div
+          className={styles.flag}
+          style={{
+            backgroundImage: "url(https://i.imgur.com/QGUfXNo.png)",
+          }}
+        />
+
+        <div
+          className={styles.icon}
+          style={{
+            backgroundImage: "url(https://i.imgur.com/HrkTwHc.png)",
+          }}
+        />
+      </div>
+
+      <Text className={styles.name}>{tank}</Text>
+    </div>
+  );
+}
diff --git a/packages/website-ue/src/components/TanksCard.astro b/packages/website-ue/src/components/TanksCard.astro
new file mode 100644
index 000000000..40a86ba45
--- /dev/null
+++ b/packages/website-ue/src/components/TanksCard.astro
@@ -0,0 +1,40 @@
+---
+import { Heading } from "./Heading";
+import { Section } from "./Section";
+import { TankCard } from "./TankCard";
+
+const popular = [
+  "Concept 1B",
+  "Obj. 268",
+  "Grille 15",
+  "Kpz 70 Missile",
+  "Concept 1B",
+  "Concept 1B",
+  "Concept 1B",
+  "Concept 1B",
+  "Concept 1B",
+  "Concept 1B",
+];
+---
+
+<style>
+  .tanks {
+    overflow-x: scroll;
+
+    .asd {
+      display: flex;
+
+      gap: 2rem;
+    }
+  }
+</style>
+
+<Section>
+  <Heading size="2">Popular tanks</Heading>
+
+  <div class="tanks">
+    <div class="asd">
+      {popular.map((tank) => <TankCard {tank} />)}
+    </div>
+  </div>
+</Section>
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index e52bea223..1b6134c0a 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -4,6 +4,7 @@ import type { GetStaticPaths } from "astro";
 import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
 import { Section } from "../../components/Section";
+import TanksCard from "../../components/TanksCard.astro";
 import ToolCard from "../../components/ToolCard.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
@@ -37,6 +38,8 @@ const { locale } = Astro.props;
     <RecentItems {locale} skeleton slot="fallback" />
   </RecentItems> -->
 
+  <TanksCard />
+
   <Section>
     <div class="tools">
       {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}