feat: home page tools

packages/i18n/strings/en.json

@@ -41,9 +41,6 @@
       "action": "To docs",
       "slogan": "BlitzKit hosted API"
     },
-    "settings": {
-      "name": "Settings"
-    },
     "players": {
       "name": "Players",
       "slogan": "Player statistics",

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

@@ -14,6 +14,11 @@ export const LIGHT_TEXT_COLORS = new Set<Color>([
   "teal",
   "grass",
   "amber",
+  "plum",
+  "pink",
+  "brown",
+  "crimson",
+  "jade",
 ]);
 
 export function Button({

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

@@ -21,9 +21,11 @@ const strings = await api.strings(locale);
     flex-direction: column;
     justify-content: end;
     align-items: center;
-    padding: 0 var(--space-4);
     position: relative;
 
+    padding: 0 var(--space-4);
+    margin-bottom: var(--space-4);
+
     .wallpaper {
       position: absolute;
       top: 0;

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

@@ -29,6 +29,11 @@ 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;
+    }
+
     .poster {
       flex: 1;
 
@@ -59,6 +64,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
   }}
+  data-significant={tool.significant}
 >
   <div
     class="poster"
@@ -74,7 +80,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
       <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
     </div>
 
-    <Button color={tool.button}>
+    <Button color={tool.accent}>
       {toolStrings.action}
       <CaretRightIcon />
     </Button>

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

@@ -3,6 +3,7 @@ import type { Color } from "../ui/color";
 export interface Tool {
   id: string;
 
+  significant?: boolean;
   accent: Color;
   banner_background_position: "top" | "center" | "bottom";
 }
@@ -11,22 +12,30 @@ export const tools: Record<string, Tool> = {
   tanks: {
     id: "tanks",
 
-    accent: "purple",
+    significant: true,
+    accent: "plum",
     banner_background_position: "top",
   },
 
   players: {
     id: "players",
 
-    accent: "purple",
+    accent: "pink",
     banner_background_position: "top",
   },
 
-  settings: {
+  compare: {
-    id: "settings",
+    id: "compare",
 
-    accent: "gray",
+    accent: "crimson",
-    banner_background_position: "top",
+    banner_background_position: "bottom",
+  },
+
+  performance: {
+    id: "performance",
+
+    accent: "jade",
+    banner_background_position: "bottom",
   },
 
   avatars: {
@@ -46,21 +55,7 @@ export const tools: Record<string, Tool> = {
   api: {
     id: "api",
 
-    accent: "lime",
+    accent: "brown",
-    banner_background_position: "bottom",
-  },
-
-  compare: {
-    id: "compare",
-
-    accent: "crimson",
-    banner_background_position: "bottom",
-  },
-
-  performance: {
-    id: "performance",
-
-    accent: "jade",
     banner_background_position: "bottom",
   },
 

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

@@ -1,8 +1,11 @@
 ---
 import locales from "@blitzkit/i18n/locales.json";
 import type { GetStaticPaths } from "astro";
+import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
-import { RecentItems } from "../../components/RecentItems";
+import { Section } from "../../components/Section";
+import ToolCard from "../../components/ToolCard.astro";
+import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 export const getStaticPaths = (() => {
@@ -17,14 +20,26 @@ 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} />
 
-  <RecentItems {locale} client:only="react">
+  {Object.values(tools).map((tool) => <ColorScale color={tool.accent} />)}
-    <RecentItems {locale} skeleton slot="fallback" />
-  </RecentItems>
 
-  <!-- <Section>
+  <!-- <RecentItems {locale} client:only="react">
-    {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
+    <RecentItems {locale} skeleton slot="fallback" />
-  </Section> -->
+  </RecentItems> -->
+
+  <Section>
+    <div class="tools">
+      {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
+    </div>
+  </Section>
 </BaseLayout>