feat: tank cards

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;
+    }
+  }
+}

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>
+  );
+}