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

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>

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} />)}