feat: tanks section

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>