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 {astroI18n, t} from "astro-i18n";
import {l} from "../util/util"
import PlayerCount from "../components/PlayerCount.svelte";

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

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

	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-screen h-screen relative mb-4">
		<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen 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-screen 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")}>Read More <CaretRight width="24" heigth="24" /></a>
	</section>
	<section class="w-screen 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>
								<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
								<Image src={`https://visage.surgeplay.com/bust/150/${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;
	}

	.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 underline mt-4;
		}
		>p {
			@apply mt-4;
		}
		>svg {
			@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
		}
	}
</style>