147 lines
4.7 KiB
Svelte
147 lines
4.7 KiB
Svelte
<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>
|