From 6377799e1bdf45e166eb5fa7313cedef8f70a487 Mon Sep 17 00:00:00 2001
From: Chaoscaot <chaos@chaoscaot.de>
Date: Wed, 7 May 2025 14:33:48 +0200
Subject: [PATCH] style: Improve code formatting and readability across
 multiple components

---
 src/components/Card.svelte         |  48 +++++++-------
 src/components/Navbar.svelte       |  46 +++++++------
 src/components/PostComponent.astro |  58 +++++++++-------
 src/layouts/NavbarLayout.astro     |  41 +++++++-----
 src/layouts/PageLayout.astro       |  12 ++--
 src/pages/index.astro              | 103 ++++++++++++++++-------------
 src/styles/table.css               |   2 +-
 7 files changed, 169 insertions(+), 141 deletions(-)

diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 1d5208b..f8838cd 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -18,13 +18,13 @@
   -->
 
 <script lang="ts">
-    import {twMerge} from "tailwind-merge";
-    import {onMount} from "svelte";
+    import { twMerge } from "tailwind-merge";
+    import { onMount } from "svelte";
 
     let cardElement: HTMLDivElement = $state();
 
     function rotateElement(event: MouseEvent) {
-        if(!hoverEffect) return;
+        if (!hoverEffect) return;
 
         const x = event.clientX;
         const y = event.clientY;
@@ -36,23 +36,23 @@
         const rotateX = (centerY - y) / 20;
         const rotateY = -(centerX - x) / 20;
 
-        cardElement.style.setProperty('--rotate-x', `${rotateX}deg`);
-        cardElement.style.setProperty('--rotate-y', `${rotateY}deg`);
+        cardElement.style.setProperty("--rotate-x", `${rotateX}deg`);
+        cardElement.style.setProperty("--rotate-y", `${rotateY}deg`);
     }
 
     function resetElement() {
-        cardElement.style.setProperty('--rotate-x', "0");
-        cardElement.style.setProperty('--rotate-y', "0");
+        cardElement.style.setProperty("--rotate-x", "0");
+        cardElement.style.setProperty("--rotate-y", "0");
     }
 
-  interface Props {
-    hoverEffect?: boolean;
-    extraClasses?: string;
-    children?: import('svelte').Snippet;
-  }
+    interface Props {
+        hoverEffect?: boolean;
+        extraClasses?: string;
+        children?: import("svelte").Snippet;
+    }
 
-  let { hoverEffect = true, extraClasses = '', children }: Props = $props();
-    let classes = $derived(twMerge("w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses))
+    let { hoverEffect = true, extraClasses = "", children }: Props = $props();
+    let classes = $derived(twMerge("w-72 border-2 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses));
 </script>
 
 <div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
@@ -61,20 +61,20 @@
 
 <style lang="scss">
     div {
-      transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
+        transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
 
-      transition: scale 300ms cubic-bezier(.2, 3, .67, .6);
+        transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);
 
-      :global(h1) {
-        @apply text-xl font-bold mt-4;
-      }
+        :global(h1) {
+            @apply text-xl font-bold mt-4;
+        }
 
-      :global(svg) {
-        @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
-      }
+        :global(svg) {
+            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
+        }
     }
 
     .hoverEffect:hover {
-      scale: 105%;
+        scale: 105%;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 77505dd..9a36592 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -19,18 +19,18 @@
 
 <script lang="ts">
     import "../styles/button.css";
-    import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
-    import {t} from "astro-i18n";
-    import {l} from "../util/util";
-    import {onMount} from "svelte";
-    import {loggedIn} from "@repo/authv2.ts";
-  interface Props {
-    logo?: import('svelte').Snippet;
-  }
+    import { CaretDownOutline, SearchOutline } from "flowbite-svelte-icons";
+    import { t } from "astro-i18n";
+    import { l } from "../util/util";
+    import { onMount } from "svelte";
+    import { loggedIn } from "@repo/authv2.ts";
+    interface Props {
+        logo?: import("svelte").Snippet;
+    }
 
-  let { logo }: Props = $props();
+    let { logo }: Props = $props();
 
-    let navbar = $state<HTMLDivElement>();
+    let navbar = $state<HTMLElement>();
     let searchOpen = $state(false);
 
     let accountBtn = $state<HTMLAnchorElement>();
@@ -41,11 +41,11 @@
         } else {
             accountBtn!.href = l("/login");
         }
-    })
+    });
 
     onMount(() => {
         handleScroll();
-    })
+    });
 
     function handleScroll() {
         if (window.scrollY > 0) {
@@ -56,13 +56,17 @@
     }
 </script>
 
-<svelte:window onscroll={handleScroll}/>
+<svelte:window onscroll={handleScroll} />
 
-<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
+<nav
+    data-pagefind-ignore
+    class="z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"
+    bind:this={navbar}
+>
     <div class="flex flex-row items-center justify-evenly md:justify-between match">
         <a class="flex items-center" href={l("/")}>
             {@render logo?.()}
-            <span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block">
+            <span class="text-2xl uppercase font-bold text-white hidden md:inline-block">
                 {t("navbar.title")}
                 <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
             </span>
@@ -73,7 +77,7 @@
                     <a href={l("/")}>
                         <span class="btn__text">{t("navbar.links.home.title")}</span>
                     </a>
-                    <CaretDownOutline class="ml-2 mt-auto"/>
+                    <CaretDownOutline class="ml-2 mt-auto" />
                 </button>
                 <div>
                     <a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
@@ -87,7 +91,7 @@
                     <a rel="prefetch" href={l("/rules")}>
                         <span class="btn__text">{t("navbar.links.rules.title")}</span>
                     </a>
-                    <CaretDownOutline class="ml-2 mt-auto"/>
+                    <CaretDownOutline class="ml-2 mt-auto" />
                 </button>
                 <div>
                     <a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
@@ -96,10 +100,8 @@
                     <a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
                     <a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
                     <h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
-                    <a href={l("/rules/megawargear")}
-                       class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
-                    <a href={l("/rules/microwargear")}
-                       class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
+                    <a href={l("/rules/megawargear")} class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
+                    <a href={l("/rules/microwargear")} class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
                     <a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
                     <h2 class="px-2 text-gray-300">{t("navbar.links.rules.ranked")}</h2>
                     <a href={l("/rangliste/missilewars")} class="btn btn-gray">{t("navbar.links.ranked.mw")}</a>
@@ -141,4 +143,4 @@
     .match {
         width: min(100vw, 70em);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PostComponent.astro b/src/components/PostComponent.astro
index 67b4d44..df6fed6 100644
--- a/src/components/PostComponent.astro
+++ b/src/components/PostComponent.astro
@@ -1,50 +1,60 @@
 ---
-import type {CollectionEntry} from "astro:content";
-import {l} from "../util/util";
-import {astroI18n} from "astro-i18n";
-import {Image} from "astro:assets";
+import type { CollectionEntry } from "astro:content";
+import { l } from "../util/util";
+import { astroI18n } from "astro-i18n";
+import { Image } from "astro:assets";
 import TagComponent from "./TagComponent.astro";
 import P from "./P.astro";
 import Card from "@components/Card.svelte";
 
 interface Props {
-    post: CollectionEntry<"announcements">
+    post: CollectionEntry<"announcements">;
 }
 
-const { post, slim }: {
-    post: CollectionEntry<"announcements">,
-    slim: boolean,
+const {
+    post,
+    slim,
+}: {
+    post: CollectionEntry<"announcements">;
+    slim: boolean;
 } = Astro.props as Props;
 
 const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
 ---
 
-<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}>
-    <div class={`flex flex-row ${slim ? "":"p-4"}`}>
-        {post.data.image != null
-            ? (
+<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1 backdrop-blur-xl bg-transparent" : ""}`} hoverEffect={false}>
+    <div class={`flex flex-row ${slim ? "" : "p-4"}`}>
+        {
+            post.data.image != null ? (
                 <a href={postUrl}>
                     <div class="flex-shrink-0 pr-2">
-                        <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
+                        <Image
+                            transition:name={post.data.title + "-image"}
+                            src={post.data.image}
+                            alt="Post Image"
+                            class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
+                        />
                     </div>
                 </a>
-            )
-            : null}
+            ) : null
+        }
         <div>
             <a href={postUrl} class="flex flex-col items-start">
                 <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
-                <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
-                    day: "numeric",
-                    month: "long",
-                    year: "numeric",
-                }).format(post.data.created)}</P>
+                <P class="text-gray-500"
+                    >{
+                        Intl.DateTimeFormat(astroI18n.locale, {
+                            day: "numeric",
+                            month: "long",
+                            year: "numeric",
+                        }).format(post.data.created)
+                    }</P
+                >
                 <P>{post.data.description}</P>
             </a>
             <div class="mt-1" transition:name={post.data.title + "-tags"}>
-                {post.data.tags.map((tag) => (
-                    <TagComponent tag={tag} />
-                ))}
+                {post.data.tags.map((tag) => <TagComponent tag={tag} />)}
             </div>
         </div>
     </div>
-</Card>
\ No newline at end of file
+</Card>
diff --git a/src/layouts/NavbarLayout.astro b/src/layouts/NavbarLayout.astro
index b8a2fb7..b89d8bf 100644
--- a/src/layouts/NavbarLayout.astro
+++ b/src/layouts/NavbarLayout.astro
@@ -1,31 +1,33 @@
 ---
-import {Image} from "astro:assets";
+import { Image } from "astro:assets";
 import Basic from "./Basic.astro";
 import "../styles/button.css";
 import localLogo from "../images/logo.png";
-import {YoutubeSolid, DiscordSolid, FileCodeSolid} from "flowbite-svelte-icons";
-import {t} from "astro-i18n";
-import {l} from "../util/util";
+import { YoutubeSolid, DiscordSolid, FileCodeSolid } from "flowbite-svelte-icons";
+import { t } from "astro-i18n";
+import { l } from "../util/util";
 
 import Navbar from "@components/Navbar.svelte";
 
 import ServerStatus from "../components/ServerStatus.svelte";
 
-const {title, description} = Astro.props;
+const { title, description, transparentFooter = true } = Astro.props;
 ---
 
-<Basic title={title} description={description}>
-    <slot name="head" slot="head"/>
+<Basic title={title} description={description} autoDarkMode={false}>
+    <slot name="head" slot="head" />
     <Fragment>
         <div class="min-h-screen flex flex-col">
             <Navbar client:idle>
-                <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
-                    class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
+                <Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max" class="mr-2 p-1 bg-black rounded-full" slot="logo" />
             </Navbar>
             <main class="flex-1" data-pagefind-body>
-                <slot/>
+                <slot />
             </main>
-            <footer class="bg-gray-900 w-full min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col dark:bg-neutral-900">
+            <footer
+                class={`min-h-80 mt-4 pb-2 rounded-t-2xl flex flex-col ${transparentFooter ? "backdrop-blur-3xl" : "bg-neutral-900"}`}
+                style="width: min(100%, 75em); margin-left: auto; margin-right: auto;"
+            >
                 <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
                     <div class="footer-card">
                         <h1>Serverstatus</h1>
@@ -45,14 +47,17 @@ const {title, description} = Astro.props;
                     <div class="footer-card">
                         <h1>Social Media</h1>
                         <a class="flex" href="/youtube">
-                            <YoutubeSolid class="mr-2"/>
-                            YouTube</a>
+                            <YoutubeSolid class="mr-2" />
+                            YouTube</a
+                        >
                         <a class="flex" href="/discord">
-                            <DiscordSolid class="mr-2"/>
-                            Discord</a>
+                            <DiscordSolid class="mr-2" />
+                            Discord</a
+                        >
                         <a class="flex" href="https://git.steamwar.de">
-                            <FileCodeSolid class="mr-2"/>
-                            Gitea</a>
+                            <FileCodeSolid class="mr-2" />
+                            Gitea</a
+                        >
                     </div>
                 </div>
                 <span class="text-sm text-white text-center mt-1">© SteamWar.de - Made with ❤️ by Chaoscaot</span>
@@ -77,4 +82,4 @@ const {title, description} = Astro.props;
     .match {
         width: min(100vw, 70em);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 3ce86da..c4fa75f 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -2,16 +2,16 @@
 import NavbarLayout from "./NavbarLayout.astro";
 import BackgroundImage from "../components/BackgroundImage.astro";
 
-const {title, description} = Astro.props;
+const { title, description } = Astro.props;
 ---
 
 <NavbarLayout title={title} description={description}>
-    <slot name="head" slot="head"/>
+    <slot name="head" slot="head" />
     <div class="h-screen w-screen fixed -z-10">
         <BackgroundImage />
     </div>
-    <div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-14 relative
-            dark:text-white dark:bg-neutral-900" style="width: min(100%, 75em);">
-        <slot/>
+    <div class="mx-auto p-8 rounded-b-md border-x-gray-100 shadow-md pt-14 relative
+            text-white backdrop-blur-3xl" style="width: min(100%, 75em);">
+        <slot />
     </div>
-</NavbarLayout>
\ No newline at end of file
+</NavbarLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c378266..ec5b3e1 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,29 +1,28 @@
 ---
 import dayjs from "dayjs";
 import NavbarLayout from "@layouts/NavbarLayout.astro";
-import {getCollection} from "astro:content";
-import {astroI18n} from "astro-i18n";
+import { getCollection } from "astro:content";
+import { astroI18n } from "astro-i18n";
 
-import {Image} from "astro:assets";
+import { Image } from "astro:assets";
 import Card from "@components/Card.svelte";
-import {CaretRight, Pause, Rocket, Crosshair1} from "@astropub/icons";
-import {t} from "astro-i18n";
-import {l} from "@utils/util";
+import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
+import { t } from "astro-i18n";
+import { l } from "@utils/util";
 import PlayerCount from "@components/PlayerCount.svelte";
 import "../../public/fonts/barlow-condensed/barlow-condensed.css";
-import {type Player} from "../components/types/data";
+import { type Player } from "../components/types/data";
 import PostComponent from "../components/PostComponent.astro";
 import BackgroundImage from "../components/BackgroundImage.astro";
 
-const teamMember: { [key: string]: Player[]} = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team")
-    .then(value => value.json());
+const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());
 
-const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
+const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
 
-const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
+const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
 
-germanPosts.forEach(value => {
-    if (posts.find(post => post.data.key === value.data.key)) {
+germanPosts.forEach((value) => {
+    if (posts.find((post) => post.data.key === value.data.key)) {
         return;
     } else {
         posts.push(value);
@@ -43,27 +42,29 @@ const prefixColorMap: {
 };
 ---
 
-<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
-    <div class="w-full h-screen relative mb-4">
+<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
+    <div class="w-full h-screen relative mb-4 z-10">
         <div style="height: calc(100vh + 1rem)">
             <BackgroundImage />
         </div>
         <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-            <h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
-                style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);">
-                <span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span
-                    class="text-neutral-600">{t("home.title.second")}</span>
+            <h1
+                class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
+                style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"
+            >
+                <span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
             </h1>
             <text-carousel class="h-20 w-full relative select-none">
                 <h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
-                <h2>{t("home.subtitle.2")}
+                <h2>
+                    {t("home.subtitle.2")}
                     <PlayerCount client:idle />
                 </h2>
                 <h2>{t("home.subtitle.3")}</h2>
             </text-carousel>
-            <a href={l("join")} class="btn btn-ghost mt-32 px-8 flex"
-                style="animation: normal flyIn forwards 1.2s ease-out">{t("home.join")}
-                <CaretRight width="24" height="24"/>
+            <a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" style="animation: normal flyIn forwards 1.2s ease-out"
+                >{t("home.join")}
+                <CaretRight width="24" height="24" />
             </a>
             <style>
                 @keyframes flyIn {
@@ -141,18 +142,18 @@ const prefixColorMap: {
     <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
         <div class="py-10 flex flex-col lg:flex-row">
             <Card client:idle>
-                <Crosshair1 height="64" width="64"/>
+                <Crosshair1 height="64" width="64" />
                 <h1>{t("home.benefits.fights.title")}</h1>
                 <p class="mt-4">{t("home.benefits.fights.description.1")}</p>
                 <p class="mt-4">{t("home.benefits.fights.description.2")}</p>
             </Card>
             <Card client:idle>
-                <Rocket height="64" width="64"/>
+                <Rocket height="64" width="64" />
                 <h1>{t("home.benefits.bau.title")}</h1>
                 <p class="mt-4">{t("home.benefits.bau.description")}</p>
             </Card>
             <Card client:idle>
-                <Pause height="64" width="64"/>
+                <Pause height="64" width="64" />
                 <h1>{t("home.benefits.minigames.title")}</h1>
                 <p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
                 <p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
@@ -160,23 +161,29 @@ const prefixColorMap: {
         </div>
     </section>
     <section class="w-full py-12 flex flex-wrap justify-center">
-        {Object.entries(teamMember).map(([prefix, players]) => (
-            <Fragment>
-                {players.map((v, index) => (
-                    <div class="inline-flex flex-col justify-end">
-                        {index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null}
-                        <Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} 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}`}
-                                    class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
-                                    alt={v.name + "s bust"} width="150" height="150"/>
-                            </figure>
-                        </Card>
-                    </div>
-                ))}
-            </Fragment>
-        ))}
+        {
+            Object.entries(teamMember).map(([prefix, players]) => (
+                <Fragment>
+                    {players.map((v, index) => (
+                        <div class="inline-flex flex-col justify-end">
+                            {index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null}
+                            <Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} 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}`}
+                                        class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
+                                        alt={v.name + "s bust"}
+                                        width="150"
+                                        height="150"
+                                    />
+                                </figure>
+                            </Card>
+                        </div>
+                    ))}
+                </Fragment>
+            ))
+        }
     </section>
 </NavbarLayout>
 
@@ -184,13 +191,17 @@ const prefixColorMap: {
     text-carousel {
         > * {
             @apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
-            transition: transform .5s ease-out, opacity .5s linear;
+            transition:
+                transform 0.5s ease-out,
+                opacity 0.5s linear;
             text-shadow: 2px 2px 5px black;
         }
     }
 
     .barlow {
-        font-family: Barlow Condensed, sans-serif;
+        font-family:
+            Barlow Condensed,
+            sans-serif;
     }
 
     .card {
@@ -207,7 +218,7 @@ const prefixColorMap: {
         }
 
         > svg {
-            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
+            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
         }
     }
 </style>
diff --git a/src/styles/table.css b/src/styles/table.css
index 58da0a8..b545a5f 100644
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -31,7 +31,7 @@ table {
         text-align: center;
 
         tr:nth-child(odd) {
-            @apply bg-neutral-200 dark:bg-neutral-800;
+            @apply backdrop-brightness-125;
         }
     }
 }