Cards Idea

src/pages/index.astro

@@ -31,6 +31,34 @@ germanPosts.forEach(value => {
 });
 
 const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);
+
+const prefixColorMap: {
+    [key: string]: {
+        from: string;
+        to: string;
+    };
+} = {
+    PREFIX_ADMIN: {
+        from: "from-red-600",
+        to: "to-red-800",
+    },
+    PREFIX_DEVELOPER: {
+        from: "from-sky-600",
+        to: "to-sky-800",
+    },
+    PREFIX_MODERATOR: {
+        from: "from-amber-600",
+        to: "to-amber-800",
+    },
+    PREFIX_SUPPORTER: {
+        from: "from-blue-700",
+        to: "to-blue-900",
+    },
+    PREFIX_BUILDER: {
+        from: "from-green-500",
+        to: "to-green-700",
+    },
+};
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
@@ -149,13 +177,13 @@ const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.d
             </Card>
         </div>
     </section>
-    <section class="w-full py-12">
+    <section class="w-full py-12 flex flex-wrap justify-center">
         {Object.entries(teamMember).map(([prefix, players]) => (
-            <div class="flex items-center flex-col">
-                <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + prefix.replace("PREFIX_", "").toLowerCase())}</h2>
-                <div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
-                    {players.map(v => (
-                        <Card extraClasses="pt-8 pb-10 px-8 w-fit" client:idle>
+            <Fragment>
+                {players.map((v, index) => (
+                    <div class="inline-flex flex-col justify-end">
+                        {index == 0 ? <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + prefix.replace("PREFIX_", "").toLowerCase())}</h2> : null}
+                        <Card extraClasses={`pt-8 pb-10 px-8 w-fit bg-gradient-to-br ${prefixColorMap[prefix].from} ${prefixColorMap[prefix].to}`} client:idle>
                             <figure class="flex flex-col items-center" style="width: 150px">
                                 <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
                                 <Image src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
@@ -163,9 +191,9 @@ const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.d
                                     alt={v.name + "s bust"} width="150" height="150"/>
                             </figure>
                         </Card>
+                    </div>
                 ))}
-                </div>
-            </div>
+            </Fragment>
         ))}
     </section>
 </NavbarLayout>