63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<div class="min-h-full py-16 bg-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-6">
|
|
Unsere Trainer
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-8" />
|
|
|
|
<p class="text-xl text-gray-600 mb-12">
|
|
Erfahrene und qualifizierte Trainer für alle Leistungsstufen
|
|
</p>
|
|
|
|
<div v-if="config" class="grid md:grid-cols-3 gap-8">
|
|
<div
|
|
v-for="trainer in config.trainer"
|
|
:key="trainer.id"
|
|
class="bg-white p-8 rounded-xl shadow-lg"
|
|
>
|
|
<div v-if="trainer.imageFilename" class="mb-4 flex justify-center">
|
|
<img
|
|
:src="`/api/personen/${trainer.imageFilename}?width=200&height=200`"
|
|
:alt="trainer.name"
|
|
class="w-32 h-32 object-cover rounded-full border-4 border-primary-100 shadow-md"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<h3 class="text-2xl font-display font-bold text-gray-900 mb-2">{{ trainer.lizenz }}</h3>
|
|
<p class="text-gray-600 mb-4">{{ trainer.name }}</p>
|
|
<p class="text-sm text-gray-500">
|
|
Lizenz: {{ trainer.lizenz }}<br />
|
|
Schwerpunkt: {{ trainer.schwerpunkt }}<span v-if="trainer.zusatz"><br />{{ trainer.zusatz }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const config = ref(null)
|
|
|
|
const loadConfig = async () => {
|
|
try {
|
|
const response = await $fetch('/api/config')
|
|
config.value = response
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Config:', error)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadConfig()
|
|
})
|
|
|
|
useHead({
|
|
title: 'Trainer - Harheimer TC',
|
|
})
|
|
</script>
|
|
|