From 6fd2423445489485df2cd9296140d128bfd7379a Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 10 Oct 2026 18:12:01 -0500
Subject: [PATCH] more progress

---
 .../website/src/components/CreditsPromo.astro |  67 +++---
 packages/website/src/config/credits.ts        | 208 ++++++++----------
 2 files changed, 129 insertions(+), 146 deletions(-)

diff --git a/packages/website/src/components/CreditsPromo.astro b/packages/website/src/components/CreditsPromo.astro
index e520ea34f..c8ff53a71 100644
--- a/packages/website/src/components/CreditsPromo.astro
+++ b/packages/website/src/components/CreditsPromo.astro
@@ -1,5 +1,5 @@
 ---
-import { Heading, Text } from "@radix-ui/themes";
+import { Grid, Heading, Text } from "@radix-ui/themes";
 import { credits } from "../config/credits";
 import { getStrings } from "../core/i18n/getStrings";
 
@@ -28,30 +28,38 @@ const strings = getStrings(locale);
       width: 100%;
       max-width: 80rem;
 
-      .group {
-        display: flex;
-        flex-direction: column;
-
+      .list {
         gap: var(--space-5);
 
-        .person {
-          display: flex;
-          align-items: center;
+        .link {
+          display: contents;
 
-          gap: var(--space-2);
+          .person {
+            --profile-size: 5rem;
 
-          .profile {
             display: flex;
             flex-direction: column;
 
+            background-color: var(--gray-3);
+
+            padding: var(--space-4);
+            padding-top: 0;
+            margin-top: calc(var(--profile-size) / 2);
             gap: var(--space-1);
 
+            box-shadow: var(--shadow-2);
+            border-radius: var(--radius-3);
+
             img {
               border-radius: 50%;
 
+              margin-top: calc(var(--profile-size) / -2);
+
               object-fit: cover;
-              width: 5rem;
-              height: 5rem;
+              width: var(--profile-size);
+              height: var(--profile-size);
+
+              margin-bottom: var(--space-2);
             }
           }
         }
@@ -62,23 +70,30 @@ const strings = getStrings(locale);
 
 <div class="credits">
   <div class="inner">
-    <Heading>{strings.credits.title}</Heading>
+    <Heading align="center">{strings.credits.title}</Heading>
 
-    {
-      credits.map((group) => (
-        <div data-type={group.type} class="group">
-          {group.people.map((person) => (
+    <Grid
+      className="list"
+      py="4"
+      columns="repeat(auto-fill, minmax(12rem, 1fr))"
+      flow="dense"
+      gap="4"
+      gapY="8"
+    >
+      {
+        credits.map((person) => (
+          <a href={person.url} class="link">
             <div class="person">
-              <div class="profile">
-                <img src={person.image} />
-                <Text>{person.name}</Text>
-              </div>
+              <img src={person.image} />
 
-              <Text>{person.description}</Text>
+              <Text color="gray" highContrast>
+                {person.name}
+              </Text>
+              <Text color="gray">{person.description}</Text>
             </div>
-          ))}
-        </div>
-      ))
-    }
+          </a>
+        ))
+      }</Grid
+    >
   </div>
 </div>
diff --git a/packages/website/src/config/credits.ts b/packages/website/src/config/credits.ts
index 64e938dff..fce41c8ef 100644
--- a/packages/website/src/config/credits.ts
+++ b/packages/website/src/config/credits.ts
@@ -1,15 +1,3 @@
-enum CreditType {
-  Primary = "primary",
-  Active = "active",
-  Moderators = "moderators",
-  Past = "past",
-}
-
-interface CreditGroup {
-  type: CreditType;
-  people: CreditPeople[];
-}
-
 interface CreditPeople {
   name: string;
   description: string;
@@ -17,120 +5,100 @@ interface CreditPeople {
   image: string;
 }
 
-export const credits: CreditGroup[] = [
+export const credits: CreditPeople[] = [
   {
-    type: CreditType.Primary,
-    people: [
-      {
-        name: "TrèsAbhi",
-        description: "Founder and lead developer",
-        url: "https://abhi-deep.com/",
-        image: "https://github.com/tresabhi.png",
-      },
-    ],
+    name: "TrèsAbhi",
+    description: "Founder and lead developer",
+    url: "https://abhi-deep.com/",
+    image: "https://github.com/tresabhi.png",
   },
   {
-    type: CreditType.Active,
-    people: [
-      {
-        name: "HitJack",
-        description: "Developer on website",
-        url: "https://github.com/Hitjack007",
-        image: "https://github.com/Hitjack007.png",
-      },
-      {
-        name: "aeson000",
-        description: "Advisor on game and website",
-        url: "https://discord.gg/WHdER7ZPAD",
-        image: "/media/users/aeson000.png",
-      },
-      {
-        name: "GonnaHetzMe",
-        description: "Developer and advisor on back end",
-        url: "https://github.com/karelpak1",
-        image: "https://github.com/karelpak1.png",
-      },
-    ],
+    name: "HitJack",
+    description: "Developer on website",
+    url: "https://github.com/Hitjack007",
+    image: "https://github.com/Hitjack007.png",
   },
   {
-    type: CreditType.Moderators,
-    people: [
-      {
-        name: "ChickenMan7777",
-        description: "Moderator and former advisor on game mechanics",
-        url: "https://discord.gg/rEsUbXCqD9",
-        image: "/media/users/chickenman7777.webp",
-      },
-    ],
+    name: "aeson000",
+    description: "Advisor on game and website",
+    url: "https://discord.gg/WHdER7ZPAD",
+    image: "/media/users/aeson000.png",
   },
   {
-    type: CreditType.Past,
-    people: [
-      {
-        name: "Pyogenics",
-        description: "Former advisor on back end",
-        url: "https://github.com/Pyogenics",
-        image: "https://github.com/Pyogenics.png",
-      },
-      {
-        name: "Prince_NA",
-        description: "Former advisor on bot and website",
-        image: "/media/users/prince-na.webp",
-      },
-      {
-        name: "Vovko",
-        description: "Former advisor on bot",
-        url: "https://amth.one/",
-        image: "https://github.com/cufee.png",
-      },
-      {
-        name: "S0AP",
-        description: "Former advisor and advertiser on bot",
-        url: "https://discord.gg/3KfH93um3Y",
-        image: "/media/users/s0ap.webp",
-      },
-      {
-        name: "xkdkw",
-        description: "Former advisor on bot and website",
-        url: "https://www.xkdkw.com/",
-        image: "/media/users/xkdkw.webp",
-      },
-      {
-        name: "Synx",
-        description: "Former advisor on bot and website",
-        url: "https://www.youtube.com/@Synx_Blitz",
-        image: "/media/users/synx.webp",
-      },
-      {
-        name: "34wotb",
-        description: "Former advisor on bot",
-        url: "https://www.twitch.tv/34wotb/",
-        image: "/media/users/34wotb.jpg",
-      },
-      {
-        name: "HisRoyalFatness",
-        description: "Former advisor on website",
-        url: "https://www.youtube.com/@hisroyalfatness",
-        image: "/media/users/hisroyalfatness.jpg",
-      },
-      {
-        name: "Droodles Blitz",
-        description: "Former advisor on website",
-        url: "https://www.youtube.com/@DroodlesBlitz",
-        image: "/media/users/droodles-blitz.jpg",
-      },
-      {
-        name: "Minitelrose",
-        description: "Former advisor on game mechanics",
-        url: "https://wotinspector.com/",
-        image: "/media/users/minitelrose.webp",
-      },
-      {
-        name: "Maddox",
-        description: "Game asset decompression",
-        url: "https://github.com/Maddoxkkm",
-        image: "https://github.com/Maddoxkkm.png",
-      },
-    ],
+    name: "GonnaHetzMe",
+    description: "Developer and advisor on back end",
+    url: "https://github.com/karelpak1",
+    image: "https://github.com/karelpak1.png",
+  },
+  {
+    name: "ChickenMan7777",
+    description: "Moderator and former advisor on game mechanics",
+    url: "https://discord.gg/rEsUbXCqD9",
+    image: "/media/users/chickenman7777.webp",
+  },
+  {
+    name: "Pyogenics",
+    description: "Former advisor on back end",
+    url: "https://github.com/Pyogenics",
+    image: "https://github.com/Pyogenics.png",
+  },
+  {
+    name: "Prince_NA",
+    description: "Former advisor on bot and website",
+    image: "/media/users/prince-na.webp",
+  },
+  {
+    name: "Vovko",
+    description: "Former advisor on bot",
+    url: "https://amth.one/",
+    image: "https://github.com/cufee.png",
+  },
+  {
+    name: "S0AP",
+    description: "Former advisor and advertiser on bot",
+    url: "https://discord.gg/3KfH93um3Y",
+    image: "/media/users/s0ap.webp",
+  },
+  {
+    name: "xkdkw",
+    description: "Former advisor on bot and website",
+    url: "https://www.xkdkw.com/",
+    image: "/media/users/xkdkw.webp",
+  },
+  {
+    name: "Synx",
+    description: "Former advisor on bot and website",
+    url: "https://www.youtube.com/@Synx_Blitz",
+    image: "/media/users/synx.webp",
+  },
+  {
+    name: "34wotb",
+    description: "Former advisor on bot",
+    url: "https://www.twitch.tv/34wotb/",
+    image: "/media/users/34wotb.jpg",
+  },
+  {
+    name: "HisRoyalFatness",
+    description: "Former advisor on website",
+    url: "https://www.youtube.com/@hisroyalfatness",
+    image: "/media/users/hisroyalfatness.jpg",
+  },
+  {
+    name: "Droodles Blitz",
+    description: "Former advisor on website",
+    url: "https://www.youtube.com/@DroodlesBlitz",
+    image: "/media/users/droodles-blitz.jpg",
+  },
+  {
+    name: "Minitelrose",
+    description: "Former advisor on game mechanics",
+    url: "https://wotinspector.com/",
+    image: "/media/users/minitelrose.webp",
+  },
+  {
+    name: "Maddox",
+    description: "Game asset decompression",
+    url: "https://github.com/Maddoxkkm",
+    image: "https://github.com/Maddoxkkm.png",
   },
 ];