feat: more groups

packages/i18n/strings/en.json

@@ -75,13 +75,22 @@
       "name": "Guesser",
       "slogan": "Silhouette mini-game",
       "action": "Play"
+    },
+    "changelogs": {
+      "name": "Changelogs",
+      "slogan": "BlitzKit patch notes",
+      "action": "Read up"
     }
   },
 
   "home": {
     "search": "Search tanks, players, avatars...",
     "credit": "by TrèsAbhi",
-    "tanks": "Tanks"
+    "tanks": "Tanks",
+    "players": "Players",
+    "cosmetics": "Cosmetics",
+    "games": "Games",
+    "technical": "Technical"
   },
 
   "avatars": {

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

@@ -19,6 +19,8 @@ export const LIGHT_TEXT_COLORS = new Set<Color>([
   "brown",
   "crimson",
   "jade",
+  "blue",
+  "tomato",
 ]);
 
 export function Button({
@@ -33,7 +35,7 @@ export function Button({
       className={classNames(styles.button, className)}
       data-color={color}
       data-variant={variant}
-      data-light-text={color ? LIGHT_TEXT_COLORS.has(color) : undefined}
+      data-light-text={variant === "solid"}
       style={{
         backgroundColor: color ? `var(--${color}-9)` : undefined,
         ...style,

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

@@ -0,0 +1,31 @@
+---
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Section } from "./Section";
+import ToolCard from "./ToolCard.astro";
+import ToolsWrapper from "./ToolsWrapper.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .title {
+    margin-bottom: var(--space-3);
+  }
+</style>
+
+<Section>
+  <Heading size="2" className="title">{strings.home.cosmetics}</Heading>
+
+  <ToolsWrapper>
+    <ToolCard {locale} tool={tools.avatars} />
+    <ToolCard {locale} tool={tools.backgrounds} />
+  </ToolsWrapper>
+</Section>

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

@@ -0,0 +1,31 @@
+---
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Section } from "./Section";
+import ToolCard from "./ToolCard.astro";
+import ToolsWrapper from "./ToolsWrapper.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .title {
+    margin-bottom: var(--space-3);
+  }
+</style>
+
+<Section>
+  <Heading size="2" className="title">{strings.home.games}</Heading>
+
+  <ToolsWrapper>
+    <ToolCard {locale} tool={tools.mixer} />
+    <ToolCard {locale} tool={tools.guesser} />
+  </ToolsWrapper>
+</Section>

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

@@ -79,6 +79,10 @@ const strings = await api.strings(locale);
           letter-spacing: -0.15em;
         }
       }
+
+      .name {
+        position: relative;
+      }
     }
 
     .search {
@@ -100,7 +104,7 @@ const strings = await api.strings(locale);
       <Code className="version">2.0</Code>
     </div>
 
-    <Text lowContrast>
+    <Text className="name" lowContrast>
       {strings.home.credit}
     </Text>
   </div>

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

@@ -0,0 +1,32 @@
+---
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Section } from "./Section";
+import ToolCard from "./ToolCard.astro";
+import ToolsWrapper from "./ToolsWrapper.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .title {
+    margin-bottom: var(--space-3);
+  }
+</style>
+
+<Section>
+  <Heading size="2" className="title">{strings.home.players}</Heading>
+
+  <ToolsWrapper>
+    <ToolCard {locale} tool={tools.players} />
+    <ToolCard {locale} tool={tools.session} />
+    <ToolCard {locale} tool={tools.playlist} />
+  </ToolsWrapper>
+</Section>

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

@@ -0,0 +1,31 @@
+---
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Section } from "./Section";
+import ToolCard from "./ToolCard.astro";
+import ToolsWrapper from "./ToolsWrapper.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .title {
+    margin-bottom: var(--space-3);
+  }
+</style>
+
+<Section>
+  <Heading size="2" className="title">{strings.home.technical}</Heading>
+
+  <ToolsWrapper>
+    <ToolCard {locale} tool={tools.api} />
+    <ToolCard {locale} tool={tools.changelogs} />
+  </ToolsWrapper>
+</Section>

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

@@ -84,4 +84,11 @@ export const tools: Record<string, Tool> = {
     accent: "brown",
     banner_background_position: "bottom",
   },
+
+  changelogs: {
+    id: "changelogs",
+
+    accent: "gray",
+    banner_background_position: "bottom",
+  },
 };

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

@@ -2,11 +2,12 @@
 import locales from "@blitzkit/i18n/locales.json";
 import type { GetStaticPaths } from "astro";
 import ColorScale from "../../components/ColorScale.astro";
+import HomeCosmetics from "../../components/HomeCosmetics.astro";
+import HomeGames from "../../components/HomeGames.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 ToolsWrapper from "../../components/ToolsWrapper.astro";
+import HomePlayers from "../../components/HomePlayers.astro";
+import HomeTanks from "../../components/HomeTanks.astro";
+import HomeTechnical from "../../components/HomeTechnical.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
@@ -27,15 +28,9 @@ const { locale } = Astro.props;
 
   {Object.values(tools).map((tool) => <ColorScale color={tool.accent} />)}
 
-  <!-- <RecentItems {locale} client:only="react">
-    <RecentItems {locale} skeleton slot="fallback" />
-  </RecentItems> -->
-
-  <TanksCard {locale} />
-
-  <Section>
-    <ToolsWrapper>
-      {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
-    </ToolsWrapper>
-  </Section>
+  <HomeTanks {locale} />
+  <HomePlayers {locale} />
+  <HomeGames {locale} />
+  <HomeCosmetics {locale} />
+  <HomeTechnical {locale} />
 </BaseLayout>