first commit

2026-10-06 18:53:03 +02:00
commit e687b4437b
@@ -0,0 +1,146 @@
+<script lang="ts">
+    import andi from '@/lib/assets/athleten/andi.png';
+    import edgar from '@/lib/assets/athleten/edgar.png';
+    import salam from '@/lib/assets/athleten/salam.png';
+    import helli from '@/lib/assets/athleten/helli.png';
+    import hechi from '@/lib/assets/athleten/hechi.png';
+    import clemens from '@/lib/assets/athleten/clemens.png';
+    import gerhard from '@/lib/assets/athleten/gerhard.png';
+    import hubsch from '@/lib/assets/athleten/hubsch.png';
+    import rudi from '@/lib/assets/athleten/rudi.png';
+    import rene from '@/lib/assets/athleten/rene.png';
+
+    import {
+        Card,
+        CardContent,
+        CardHeader,
+        CardTitle,
+        CardFooter,
+    } from '@/components/ui/card';
+
+    interface TeamProps {
+        imageUrl: string;
+        firstName: string;
+        lastName: string;
+        positions: string[];
+    }
+
+    const teamList: TeamProps[] = [
+        {
+            imageUrl: andi,
+            firstName: 'Andi',
+            lastName: 'Tengler',
+            positions: ['Präsident', 'Optimist', 'Wirt'],
+        },
+        {
+            imageUrl: edgar,
+            firstName: 'Prof.',
+            lastName: 'Waffler',
+            positions: ['Kassier', 'Wein Koordinator', 'Venezianer'],
+        },
+        {
+            imageUrl: salam,
+            firstName: 'Salam',
+            lastName: '',
+            positions: ['Pizzaiolo', 'Wattergott Theist', '2x König'],
+        },
+        {
+            imageUrl: helli,
+            firstName: 'Helli',
+            lastName: 'Cool',
+            positions: ['Aufsteiger', 'Musiker', 'Blues Knacker Fan'],
+        },
+        {
+            imageUrl: gerhard,
+            firstName: 'Gerhard',
+            lastName: '',
+            positions: ['Risikomanagment', '8x König'],
+        },
+        {
+            imageUrl: hechi,
+            firstName: 'Hechi',
+            lastName: 'THahn',
+            positions: ['Schriftführer', 'Recordhalter', 'Musiker', '2x König'],
+        },
+        {
+            imageUrl: clemens,
+            firstName: 'Celemens',
+            lastName: '',
+            positions: ['Vorstand Regeln', '2x König'],
+        },
+        {
+            imageUrl: hubsch,
+            firstName: 'Hubsch',
+            lastName: '',
+            positions: ['Risikospieler', 'Wattergott Agnostiker', '3x König'],
+        },
+        {
+            imageUrl: rudi,
+            firstName: 'Rudi',
+            lastName: '',
+            positions: ['Gastspieler', 'Gerngesehen'],
+        },
+        {
+            imageUrl: rene,
+            firstName: 'René',
+            lastName: '',
+            positions: [
+                'Quizmaster',
+                'Wattergott Atheist',
+                'Pessimist',
+                '3x König',
+            ],
+        },
+    ];
+</script>
+
+<section
+    id="team"
+    class="container max-w-7xl mx-auto px-4 py-16 sm:py-24 lg:py-32"
+>
+    <div class="text-center mb-12">
+        <h2 class="text-lg text-primary text-center mb-3 tracking-wider">
+            Athleten
+        </h2>
+
+        <h2 class="text-3xl md:text-4xl text-center font-bold">
+            FC Dotterbühel Dream Team
+        </h2>
+    </div>
+
+    <div
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-center items-start"
+    >
+        {#each teamList as { imageUrl, firstName, lastName, positions }}
+            <Card
+                class="bg-muted/60 dark:bg-card flex flex-col h-full overflow-hidden group/hoverimg p-0 "
+            >
+                <CardHeader class="p-0 gap-0 ">
+                    <div class="h-full overflow-hidden">
+                        <img
+                            src={imageUrl}
+                            alt={`${firstName} ${lastName}`}
+                            class="w-full bg-linear-to-bl from-lime-300 to-lime-950 aspect-square object-cover saturate-0 transition-all duration-300 ease-in-out group-hover/hoverimg:saturate-100 group-hover/hoverimg:scale-105"
+                        />
+                    </div>
+                    <CardTitle class="p-4 sm:p-6">
+                        {firstName}
+                        <span class="text-primary">{lastName}</span>
+                    </CardTitle>
+                </CardHeader>
+
+                <div class="px-4 sm:px-6 grow">
+                    {#each positions as position, index}
+                        <CardContent class="p-0 pb-2 text-muted-foreground">
+                            {position}{#if index < positions.length - 1},{/if}
+                        </CardContent>
+                    {/each}
+                </div>
+
+                <CardFooter class="space-x-4 px-4 sm:px-6 py-4"
+                    >Fc Dotterbühel</CardFooter
+                >
+            </Card>
+        {/each}
+    </div>
+</section>