Updates and more

src/pages/index.astro

@@ -2,12 +2,39 @@
 import NavbarLayout from "../layouts/NavbarLayout.astro";
 
 import { Image } from "astro:assets";
-import localBau from "../images/bau.jpg";
-import {l, t} from "astro-i18n";
+import localBau from "../images/2023-10-08_20.43.43.png";
 import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
+import {astroI18n, l, t} from "astro-i18n";
+
+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")}>
+<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">
@@ -80,7 +107,7 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 			</script>
 		</drop-in>
 	</div>
-	<section class="w-screen flex flex-col items-center justify-center">
+	<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" />
@@ -102,8 +129,24 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 		</div>
 		<a class="btn px-8 flex" href={l("/about")}>Read More <CaretRight width="24" heigth="24" /></a>
 	</section>
-	<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>
 
@@ -130,5 +173,8 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 		>p {
 			@apply mt-4;
 		}
+		>svg {
+			@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
+		}
 	}
 </style>