more progress

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);
 
+        .link {
+          display: contents;
+
           .person {
-          display: flex;
-          align-items: center;
+            --profile-size: 5rem;
 
-          gap: var(--space-2);
-
-          .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>
 
+    <Grid
+      className="list"
+      py="4"
+      columns="repeat(auto-fill, minmax(12rem, 1fr))"
+      flow="dense"
+      gap="4"
+      gapY="8"
+    >
       {
-      credits.map((group) => (
-        <div data-type={group.type} class="group">
-          {group.people.map((person) => (
+        credits.map((person) => (
+          <a href={person.url} class="link">
             <div class="person">
-              <div class="profile">
               <img src={person.image} />
-                <Text>{person.name}</Text>
-              </div>
 
-              <Text>{person.description}</Text>
-            </div>
-          ))}
+              <Text color="gray" highContrast>
+                {person.name}
+              </Text>
+              <Text color="gray">{person.description}</Text>
             </div>
+          </a>
         ))
-    }
+      }</Grid
+    >
   </div>
 </div>

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,21 +5,13 @@ interface CreditPeople {
   image: string;
 }
 
-export const credits: CreditGroup[] = [
-  {
-    type: CreditType.Primary,
-    people: [
+export const credits: CreditPeople[] = [
   {
     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",
@@ -50,22 +30,12 @@ export const credits: CreditGroup[] = [
     url: "https://github.com/karelpak1",
     image: "https://github.com/karelpak1.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",
   },
-    ],
-  },
-  {
-    type: CreditType.Past,
-    people: [
   {
     name: "Pyogenics",
     description: "Former advisor on back end",
@@ -131,6 +101,4 @@ export const credits: CreditGroup[] = [
     url: "https://github.com/Maddoxkkm",
     image: "https://github.com/Maddoxkkm.png",
   },
-    ],
-  },
 ];