Website/src/pages/index.astro

---
import NavbarLayout from "@layouts/NavbarLayout.astro";

import {Image} from "astro:assets";
import localBau from "@images/2023-10-08_20.43.43.png";
import {CaretRight, Archive, Rocket, Bell} 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";

const teamMember = await fetch("http://127.0.0.1:1337/data/team").then(value => value.json());

function groupByGroup(array) {
    const groups = new Map<string, Player[]>();

    for (let user of array) {
        if (groups.has(user.prefix)) {
            groups.get(user.prefix).push(user);
        } else {
            groups.set(user.prefix, [user]);
        }
    }

    return groups;
}

const groupedTeamMember = groupByGroup(teamMember);

function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
    const arr = [];
    for (let [key, value] of i) {
        arr.push(fn(key, value));
    }
    return arr;
}
---

<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
    <div class="w-full h-screen relative mb-4">
        <Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
            class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75"
            style="height: calc(100vh + 1rem)" draggable="false"/>
        <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"
                style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
                <span class="text-yellow-400">{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")}
                    <PlayerCount client:only="svelte"/>
                </h2>
                <h2>{t("home.subtitle.3")}</h2>
            </text-carousel>
            <a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16"
                style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")}
                <CaretRight width="24" heigth="24"/>
            </a>
            <script>
                class TextCarousel extends HTMLElement {
                    current = 0;

                    connectedCallback() {
                        this._current.classList.add("!opacity-100");

                        for (let i = 0; i < this.children.length; i++) {
                            if (i !== this.current) {
                                this.children[i].classList.add("translate-y-8");
                            }
                        }

                        setInterval(() => {
                            this.next();
                        }, 5000);
                    }

                    get _current() {
                        return this.children[this.current];
                    }

                    next() {
                        this._current.classList.remove("!opacity-100");
                        this._current.classList.add("translate-y-8");
                        this._current.classList.remove("!delay-500");
                        this.current = (this.current + 1) % this.children.length;
                        this._current.classList.add("!opacity-100");
                        this._current.classList.remove("translate-y-8");
                        this._current.classList.add("!delay-500");
                    }
                }

                class DropIn extends HTMLElement {
                    connectedCallback() {
                        for (let child of this.children) {
                            if (child.classList.contains("opacity-0")) {
                                child.classList.remove("opacity-0");
                                child.classList.remove("-translate-y-16");
                            } else {
                                child.children[0].classList.remove("opacity-0");
                                child.children[0].classList.remove("-translate-y-16");
                            }
                        }
                    }
                }

                customElements.define("text-carousel", TextCarousel);
                customElements.define("drop-in", DropIn);
            </script>
        </drop-in>
    </div>
    <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">
            <div class="card">
                <Archive heigth="64" width="64"/>
                <h1>{t("home.benefits.historic.title")}</h1>
                <p>{t("home.benefits.historic.description.1")}</p>
                <p>{t("home.benefits.historic.description.2")}</p>
            </div>
            <div class="card">
                <Rocket heigth="64" width="64"/>
                <h1>{t("home.benefits.server.title")}</h1>
                <p>{t("home.benefits.server.description")}</p>
            </div>
            <div class="card">
                <Bell heigth="64" width="64"/>
                <h1>{t("home.benefits.events.title")}</h1>
                <p>{t("home.benefits.events.description.1")}</p>
                <p>{t("home.benefits.events.description.2")}</p>
            </div>
        </div>
        <a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
            <CaretRight width="24" heigth="24"/>
        </a>
    </section>
    <section class="w-full py-12">
        {mapMap(groupedTeamMember, (key, value) => (
            <div class="flex items-center flex-col">
                <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
                <div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
                    {value.map(v => (
                        <div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
									hover:scale-105 hover:shadow-2xl
									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
                            <figure class="flex flex-col items-center">
                                <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:drop-shadow-2xl"
                                    alt={v.name + "s bust"} width="150" height="150"/>
                            </figure>
                        </div>
                    ))}
                </div>
            </div>
        ))}
    </section>
</NavbarLayout>

<style>
    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;
            text-shadow: 2px 2px 5px black;
        }
    }

    .barlow {
        font-family: Barlow Condensed, serif;
    }

    .card {
        @apply w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg transition-transform duration-300 ease-in-out
        dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
        hover:scale-105;

        > h1 {
            @apply text-xl font-bold mt-4;
        }

        > p {
            @apply mt-4;
        }

        > svg {
            @apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
        }
    }
</style>