harheimertc/components/About.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('https://images.unsplash.com/photo-1611004275469-8583ed5d7b8d?q=80&w=2070')"
          />
        </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 Herrenmannschaften an der Punktspielrunde teil.
          </p>
          <p class="text-lg text-gray-600 leading-relaxed">
            Ab 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 Damen- und Herrenmannschaften!
            </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>