107 lines
3.9 KiB
Vue
107 lines
3.9 KiB
Vue
<template>
|
|
<section id="about" class="py-16 sm:py-20 bg-gradient-to-b from-white to-gray-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
|
|
Über uns
|
|
</h2>
|
|
<div class="w-24 h-1 bg-primary-600 mx-auto mb-6" />
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Seit über 70 Jahren wird in unserem Harheimer Verein Tischtennis gespielt
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center mb-20">
|
|
<div class="relative h-[400px] sm:h-[500px] rounded-2xl overflow-hidden shadow-2xl">
|
|
<div
|
|
class="w-full h-full bg-cover bg-center hover:scale-110 transition-transform duration-700"
|
|
style="background-image: url('/images/club_about_us.png')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<h3 class="text-3xl font-display font-bold text-gray-900">
|
|
Ein familiärer Verein mit Tradition
|
|
</h3>
|
|
<p class="text-lg text-gray-600 leading-relaxed">
|
|
Wir sind ein kleiner, selbständiger, familiärer Verein mit ca. 40 Mitgliedern.
|
|
Wir nehmen zurzeit mit fünf Erwachsenenmannschaften an der Punktspielrunde teil.
|
|
</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed">
|
|
Seit der Saison 2025/26 werden wir auch wieder mit einer Jugendmannschaft aktiv.
|
|
</p>
|
|
<p class="text-lg text-gray-600 leading-relaxed">
|
|
Wir trainieren zweimal wöchentlich in der Turnhalle der Grundschule Harheim mit
|
|
anschließendem gemütlichem Beisammensein in einer der lokalen Gaststätten.
|
|
Jährlich finden außerdem unsere Vereinsmeisterschaften statt.
|
|
</p>
|
|
<div class="bg-primary-50 border-l-4 border-primary-600 p-6 rounded-lg">
|
|
<h4 class="text-xl font-semibold text-primary-800 mb-3">Wir suchen Verstärkung!</h4>
|
|
<p class="text-primary-700 mb-4">
|
|
Wir suchen ständig Verstärkungen für unsere Mannschaften!
|
|
</p>
|
|
<p class="text-primary-700 font-medium">
|
|
Alle Tischtennis-Begeisterten sind herzlich zu einem Probetraining eingeladen!
|
|
</p>
|
|
</div>
|
|
<div class="pt-4">
|
|
<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"
|
|
>
|
|
Kontakt aufnehmen
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Values -->
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div
|
|
v-for="value in values"
|
|
:key="value.title"
|
|
class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100"
|
|
>
|
|
<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center mb-4">
|
|
<component :is="value.icon" :size="24" class="text-primary-600" />
|
|
</div>
|
|
<h4 class="text-xl font-display font-bold text-gray-900 mb-2">
|
|
{{ value.title }}
|
|
</h4>
|
|
<p class="text-gray-600">
|
|
{{ value.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Heart, Award, Target, Users2 } from 'lucide-vue-next'
|
|
|
|
const values = [
|
|
{
|
|
icon: Heart,
|
|
title: '70+ Jahre Tradition',
|
|
description: 'Seit 1954 spielen wir Tischtennis in Harheim',
|
|
},
|
|
{
|
|
icon: Users2,
|
|
title: 'Familiärer Verein',
|
|
description: 'Ca. 40 Mitglieder in einer herzlichen Gemeinschaft',
|
|
},
|
|
{
|
|
icon: Award,
|
|
title: '5 Herrenmannschaften',
|
|
description: 'Aktive Teilnahme an der Punktspielrunde',
|
|
},
|
|
{
|
|
icon: Target,
|
|
title: 'Jugendförderung',
|
|
description: 'Ab 2025/26 wieder eine Jugendmannschaft',
|
|
},
|
|
]
|
|
</script>
|
|
|