rewrite website

src/pages/admins.astro

@@ -0,0 +1,89 @@
+---
+import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
+import { Icon } from 'astro-icon/components';
+
+const team = [
+  {
+    name: 'Elias',
+    nickname: 'MineTec',
+    roles: ['Gründer', 'Support', 'Organisation', 'Softwareentwicklung', 'Systemadministrator'],
+    links: [{ name: 'Website', href: 'https://mhsl.eu/aboutme/', icon: 'heroicons:globe-alt-solid' }]
+  },
+  {
+    name: 'Jannik',
+    nickname: 'Goldi187',
+    roles: ['Support', 'Organisation']
+  },
+  {
+    name: 'Adrian',
+    nickname: 'h0nny27',
+    roles: ['Support']
+  },
+  {
+    name: 'Ruben',
+    nickname: 'bytedream',
+    roles: ['Softwareentwicklung'],
+    links: [{ name: 'Website', href: 'https://bytedream.dev', icon: 'heroicons:globe-alt-solid' }]
+  },
+  {
+    name: 'Lars',
+    nickname: '28Pupsi28',
+    roles: ['Softwareentwicklung'],
+    links: [{ name: 'Website', href: 'https://mathemann.ddns.net/turtle_game/', icon: 'heroicons:globe-alt-solid' }]
+  },
+  {
+    name: 'Hanad',
+    nickname: 'Voldemort2212',
+    roles: ['Support', 'Mediengestaltung']
+  }
+];
+---
+
+<WebsiteLayout title="Team">
+  <div class="m-auto flex flex-col justify-center items-center px-4 py-6 2xl:px-48 sm:py-12">
+    <h1 class="text-5xl mb-10">Die Admins</h1>
+    <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 my-4 justify-center">
+      {
+        team.map((member) => (
+          <div class="card max-w-96 bg-base-200">
+            <div class="card-body px-4 py-6">
+              <div class="relative flex flex-col items-center">
+                <div class="avatar placeholder mb-2">
+                  <div class="bg-neutral text-neutral-content w-24 rounded-xl">
+                    <img
+                      class="m-[7.5px]"
+                      style="width: 85%; height: 85%"
+                      src={`https://mc-heads.net/head/${member.nickname.toLowerCase()}`}
+                      alt={member.name}
+                    />
+                  </div>
+                </div>
+                <p class="text-center text-lg mb-1">
+                  {member.name} · {member.nickname}
+                </p>
+                <p class="text-center text-sm font-light">{member.roles.join(' · ')}</p>
+                {member.links && (
+                  <div class="absolute top-0 right-2 h-24 flex">
+                    <div class="divider divider-horizontal mx-2" />
+                    <div class="flex items-center">
+                      {member.links.map((link) => (
+                        <a
+                          class="flex w-9 h-9 justify-center items-center border rounded-full border-base-content"
+                          href={link.href}
+                          target="_blank"
+                          title={link.name}
+                        >
+                          <Icon name={link.icon} size={22} />
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</WebsiteLayout>