From a7bd671309bf01d6dbc353b3db2058e3c544778f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 15 Mar 2026 22:42:13 -0500
Subject: [PATCH] feat: tank card links

---
 .../src/components/TankCard/index.module.css     | 10 ++++++++--
 .../website-ue/src/components/TankCard/index.tsx | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/website-ue/src/components/TankCard/index.module.css b/packages/website-ue/src/components/TankCard/index.module.css
index 7b2be21fa..164e03e2a 100644
--- a/packages/website-ue/src/components/TankCard/index.module.css
+++ b/packages/website-ue/src/components/TankCard/index.module.css
@@ -23,12 +23,18 @@
     }
 
     .icon {
-      width: 13rem;
-      height: 8rem;
+      width: 11rem;
+      height: 7rem;
       position: relative;
 
       background-size: 140%;
       background-position: 40% center;
+
+      .cover {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(transparent 75%, var(--gray-1));
+      }
     }
   }
 
diff --git a/packages/website-ue/src/components/TankCard/index.tsx b/packages/website-ue/src/components/TankCard/index.tsx
index 9b49c054a..cadf68bc5 100644
--- a/packages/website-ue/src/components/TankCard/index.tsx
+++ b/packages/website-ue/src/components/TankCard/index.tsx
@@ -1,16 +1,24 @@
 import { api } from "../../core/api/dynamic";
 import { useAwait } from "../../hooks/useAwait";
 import { useGameStrings } from "../../hooks/useGameStrings";
+import { useLocale } from "../../hooks/useLocale";
 import type { PopularTank } from "../../protos/popular_tanks";
+import { LinkI18n } from "../LinkI18n";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
 export function TankCard({ id }: PopularTank) {
   const tank = useAwait(() => api.tank(id), `tank-${id}`);
   const gameStrings = useGameStrings("TankEntity");
+  const locale = useLocale();
 
   return (
-    <div className={styles["tank-card"]}>
+    <LinkI18n
+      href={`/tanks/${tank.slug}`}
+      underline="never"
+      locale={locale}
+      className={styles["tank-card"]}
+    >
       <div className={styles["icon-wrapper"]}>
         <div
           className={styles.flag}
@@ -24,10 +32,12 @@ export function TankCard({ id }: PopularTank) {
           style={{
             backgroundImage: `url(/api/tanks/${id}.webp)`,
           }}
-        />
+        >
+          <div className={styles.cover} />
+        </div>
       </div>
 
       <Text className={styles.name}>{gameStrings[tank.tank!.name!.value]}</Text>
-    </div>
+    </LinkI18n>
   );
 }