feat: tanks section

packages/i18n/strings/en.json

@@ -80,7 +80,8 @@
 
   "home": {
     "search": "Search tanks, players, avatars...",
-    "credit": "by TrèsAbhi"
+    "credit": "by TrèsAbhi",
+    "tanks": "Tanks"
   },
 
   "avatars": {
@@ -100,10 +101,5 @@
   "navbar": {
     "home": "Home",
     "settings": "Settings"
-  },
-
-  "recent": {
-    "title": "Recent",
-    "no_recent": "Your recently viewed pages will appear here."
   }
 }

packages/website-ue/src/components/Scroller.tsx

@@ -0,0 +1 @@
+export function Scroller() {}

packages/website-ue/src/components/Section/index.module.css

@@ -1,7 +1,7 @@
 .section {
   display: flex;
   justify-content: center;
-  padding: var(--space-4);
+  padding: var(--space-5);
 
   .content {
     flex: 1;

packages/website-ue/src/components/Section/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import "./index.css";
+import styles from "./index.module.css";
 
 export interface SectionProps extends ComponentProps<"div"> {
   first?: boolean;
@@ -10,10 +10,10 @@ export function Section({ className, children, ...props }: SectionProps) {
   return (
     <div
       data-first={props.first}
-      className={classNames("section", className)}
+      className={classNames(styles.section, className)}
       {...props}
     >
-      <div className="content">{children}</div>
+      <div className={styles.content}>{children}</div>
     </div>
   );
 }

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

@@ -1,7 +1,19 @@
 ---
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
 import { Heading } from "./Heading";
 import { Section } from "./Section";
 import { TankCard } from "./TankCard";
+import ToolCard from "./ToolCard.astro";
+import ToolsWrapper from "./ToolsWrapper.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
 
 const popular = [
   "Concept 1B",
@@ -18,10 +30,16 @@ const popular = [
 ---
 
 <style>
-  .tanks {
-    overflow-x: scroll;
+  .title {
+    margin-bottom: var(--space-3);
+  }
 
-    .asd {
+  .tanks {
+    /* overflow-x: scroll; */
+    overflow-x: hidden;
+    z-index: 1;
+
+    .content {
       display: flex;
 
       gap: 2rem;
@@ -30,11 +48,18 @@ const popular = [
 </style>
 
 <Section>
-  <Heading size="2">Popular tanks</Heading>
+  <Heading size="2" className="title">{strings.home.tanks}</Heading>
 
   <div class="tanks">
-    <div class="asd">
+    <div class="content">
       {popular.map((tank) => <TankCard {tank} />)}
     </div>
   </div>
+
+  <ToolCard gradient {locale} tool={tools.tanks} />
+
+  <ToolsWrapper>
+    <ToolCard {locale} tool={tools.compare} />
+    <ToolCard {locale} tool={tools.performance} />
+  </ToolsWrapper>
 </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">

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

@@ -0,0 +1,11 @@
+<style>
+  .tools {
+    display: grid;
+    gap: var(--space-4);
+    grid-template-columns: repeat(2, 1fr);
+  }
+</style>
+
+<div class="tools">
+  <slot />
+</div>

packages/website-ue/src/core/tools/tools.ts

@@ -3,7 +3,6 @@ import type { Color } from "../ui/color";
 export interface Tool {
   id: string;
 
-  significant?: boolean;
   accent: Color;
   banner_background_position: "top" | "center" | "bottom";
 }
@@ -12,7 +11,6 @@ export const tools: Record<string, Tool> = {
   tanks: {
     id: "tanks",
 
-    significant: true,
     accent: "plum",
     banner_background_position: "top",
   },

packages/website-ue/src/pages/[...locale]/index.astro

@@ -6,6 +6,7 @@ import HomeHero from "../../components/HomeHero.astro";
 import { Section } from "../../components/Section";
 import TanksCard from "../../components/TanksCard.astro";
 import ToolCard from "../../components/ToolCard.astro";
+import ToolsWrapper from "../../components/ToolsWrapper.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
@@ -21,14 +22,6 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<style>
-  .tools {
-    display: grid;
-    gap: var(--space-4);
-    grid-template-columns: repeat(2, 1fr);
-  }
-</style>
-
 <BaseLayout {locale} accent="amber">
   <HomeHero {locale} />
 
@@ -38,11 +31,11 @@ const { locale } = Astro.props;
     <RecentItems {locale} skeleton slot="fallback" />
   </RecentItems> -->
 
-  <TanksCard />
+  <TanksCard {locale} />
 
   <Section>
-    <div class="tools">
+    <ToolsWrapper>
       {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
-    </div>
+    </ToolsWrapper>
   </Section>
 </BaseLayout>