133 lines
3.9 KiB
Vue
133 lines
3.9 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">
|
|
Tischtennis für Anfänger
|
|
</h1>
|
|
<div class="w-24 h-1 bg-primary-600 mb-8" />
|
|
|
|
<div class="prose prose-lg max-w-none">
|
|
<p class="text-xl text-gray-600 mb-8">
|
|
Du möchtest mit Tischtennis anfangen? Perfekt! Bei uns bist du richtig.
|
|
</p>
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg not-prose mb-8">
|
|
<h3 class="text-2xl font-display font-bold text-gray-900 mb-4">
|
|
Was du wissen solltest
|
|
</h3>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<Check
|
|
:size="24"
|
|
class="text-primary-600 mr-3 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<span class="text-gray-700">Keine Vorkenntnisse nötig</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<Check
|
|
:size="24"
|
|
class="text-primary-600 mr-3 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<span class="text-gray-700">Schläger und Material werden gestellt</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<Check
|
|
:size="24"
|
|
class="text-primary-600 mr-3 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<span class="text-gray-700">Sportkleidung und Hallenschuhe mitbringen</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<Check
|
|
:size="24"
|
|
class="text-primary-600 mr-3 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<span class="text-gray-700">3x kostenlos Probetraining</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<Check
|
|
:size="24"
|
|
class="text-primary-600 mr-3 flex-shrink-0 mt-0.5"
|
|
/>
|
|
<span class="text-gray-700">Einstieg jederzeit möglich</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
v-if="config"
|
|
class="bg-primary-50 p-8 rounded-xl border border-primary-100 not-prose"
|
|
>
|
|
<h3 class="text-2xl font-display font-bold text-gray-900 mb-4">
|
|
Anfängergruppen
|
|
</h3>
|
|
<div class="space-y-4 mb-6">
|
|
<div
|
|
v-for="(zeiten, gruppe) in groupedZeiten"
|
|
:key="gruppe"
|
|
>
|
|
<h4 class="font-semibold text-gray-900 mb-1">
|
|
{{ gruppe }}
|
|
</h4>
|
|
<div class="text-gray-600">
|
|
<p
|
|
v-for="zeit in zeiten"
|
|
:key="zeit.id"
|
|
>
|
|
{{ zeit.tag }}, {{ zeit.von }} - {{ zeit.bis }} Uhr
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink
|
|
to="/kontakt"
|
|
class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
|
|
>
|
|
Zum Probetraining anmelden
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import { Check } from 'lucide-vue-next'
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
// Group training times by group
|
|
const groupedZeiten = computed(() => {
|
|
if (!config.value?.training?.zeiten) return {}
|
|
|
|
const groups = {}
|
|
config.value.training.zeiten.forEach(zeit => {
|
|
if (!groups[zeit.gruppe]) {
|
|
groups[zeit.gruppe] = []
|
|
}
|
|
groups[zeit.gruppe].push(zeit)
|
|
})
|
|
return groups
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadConfig()
|
|
})
|
|
|
|
useHead({
|
|
title: 'Für Anfänger - Harheimer TC',
|
|
})
|
|
</script>
|
|
|