feat: more groups

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>