home page grouping

packages/website/src/components/HomeCosmetics.astro

@@ -3,6 +3,8 @@ import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import ToolCard from "./ToolCard.astro";
+import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
+import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
 
 interface Props {
   locale: string;
@@ -10,10 +12,17 @@ interface Props {
 
 const { locale } = Astro.props;
 
-const strings = await getStrings(locale);
+const strings = getStrings(locale);
 ---
 
-<Heading size="8" className="title">{strings.home.cosmetics}</Heading>
+<Heading size="8">{strings.home.cosmetics}</Heading>
 
-<ToolCard {locale} tool={tools.avatars} />
-<ToolCard {locale} tool={tools.backgrounds} />
+<ToolCardLayoutRoot minor>
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.avatars} />
+  </ToolCardLayoutColumn>
+
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.backgrounds} />
+  </ToolCardLayoutColumn>
+</ToolCardLayoutRoot>

packages/website/src/components/HomeGames.astro

@@ -3,6 +3,8 @@ import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import ToolCard from "./ToolCard.astro";
+import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
+import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
 
 interface Props {
   locale: string;
@@ -15,5 +17,12 @@ const strings = getStrings(locale);
 
 <Heading size="8" className="title">{strings.home.games}</Heading>
 
-<ToolCard {locale} tool={tools.mixer} />
-<ToolCard {locale} tool={tools.guesser} />
+<ToolCardLayoutRoot>
+  <ToolCardLayoutColumn major>
+    <ToolCard {locale} tool={tools.mixer} />
+  </ToolCardLayoutColumn>
+
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.guesser} />
+  </ToolCardLayoutColumn>
+</ToolCardLayoutRoot>

packages/website/src/components/HomePlayers.astro

@@ -3,6 +3,8 @@ import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import ToolCard from "./ToolCard.astro";
+import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
+import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
 
 interface Props {
   locale: string;
@@ -15,6 +17,13 @@ const strings = getStrings(locale);
 
 <Heading size="8">{strings.home.players}</Heading>
 
-<ToolCard {locale} tool={tools.players} />
-<ToolCard {locale} tool={tools.session} />
-<ToolCard {locale} tool={tools.playlist} />
+<ToolCardLayoutRoot>
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.session} />
+    <ToolCard {locale} tool={tools.playlist} />
+  </ToolCardLayoutColumn>
+
+  <ToolCardLayoutColumn major>
+    <ToolCard {locale} tool={tools.players} />
+  </ToolCardLayoutColumn>
+</ToolCardLayoutRoot>

packages/website/src/components/HomeTanks.astro

@@ -3,6 +3,8 @@ import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import ToolCard from "./ToolCard.astro";
+import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
+import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
 
 interface Props {
   locale: string;
@@ -14,6 +16,13 @@ const strings = getStrings(locale);
 
 <Heading size="8">{strings.home.tanks}</Heading>
 
-<ToolCard {locale} tool={tools.tanks} />
-<ToolCard {locale} tool={tools.compare} />
-<ToolCard {locale} tool={tools.performance} />
+<ToolCardLayoutRoot>
+  <ToolCardLayoutColumn major>
+    <ToolCard {locale} tool={tools.tanks} />
+  </ToolCardLayoutColumn>
+
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.compare} />
+    <ToolCard {locale} tool={tools.performance} />
+  </ToolCardLayoutColumn>
+</ToolCardLayoutRoot>

packages/website/src/components/HomeTechnical.astro

@@ -3,6 +3,8 @@ import { Heading } from "@radix-ui/themes";
 import { tools } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import ToolCard from "./ToolCard.astro";
+import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro";
+import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro";
 
 interface Props {
   locale: string;
@@ -13,7 +15,14 @@ const { locale } = Astro.props;
 const strings = getStrings(locale);
 ---
 
-<Heading size="8" className="title">{strings.home.technical}</Heading>
+<Heading size="8">{strings.home.technical}</Heading>
 
-<ToolCard {locale} tool={tools.api} />
-<ToolCard {locale} tool={tools.changelogs} />
+<ToolCardLayoutRoot minor>
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.api} />
+  </ToolCardLayoutColumn>
+
+  <ToolCardLayoutColumn>
+    <ToolCard {locale} tool={tools.changelogs} />
+  </ToolCardLayoutColumn>
+</ToolCardLayoutRoot>

packages/website/src/components/ToolCard.astro

@@ -20,7 +20,7 @@ const toolStrings =
 
 <style>
   .container {
-    border-radius: var(--radius-2);
+    border-radius: var(--radius-3);
     background-size: cover;
     background-position: center;
     height: 16rem;
@@ -81,7 +81,7 @@ const toolStrings =
       direction={{ initial: "column", xs: "row" }}
       style={{
         backgroundColor: "var(--color-panel-translucent)",
-        backdropFilter: "blur(64px)",
+        backdropFilter: "blur(64px) brightness(50%)",
         WebkitBackdropFilter: "blur(64px)",
       }}
     >

packages/website/src/components/ToolCardLayoutColumn.astro

@@ -0,0 +1,26 @@
+---
+interface Props {
+  major?: boolean;
+}
+
+const { major } = Astro.props;
+---
+
+<style>
+  .tool-card-layout-root {
+    display: flex;
+    flex-direction: column;
+
+    flex: 1;
+
+    gap: inherit;
+
+    &[data-major="true"] {
+      flex: 2;
+    }
+  }
+</style>
+
+<div class="tool-card-layout-root" data-major={major}>
+  <slot />
+</div>

packages/website/src/components/ToolCardLayoutRoot.astro

@@ -0,0 +1,25 @@
+---
+interface Props {
+  minor?: boolean;
+}
+
+const { minor } = Astro.props;
+---
+
+<style>
+  .tool-card-layout-root {
+    display: flex;
+
+    height: 30rem;
+
+    gap: var(--space-4);
+
+    &[data-minor="true"] {
+      height: 20rem;
+    }
+  }
+</style>
+
+<div class="tool-card-layout-root" data-minor={minor}>
+  <slot />
+</div>