Initial commit: Harheimer TC Website

- Vue 3 + Nuxt 3 Framework
- Tailwind CSS Styling
- Responsive Design mit schwarz-roten Vereinsfarben
- Dynamische Galerie mit Lightbox
- Event-Management über CSV-Dateien
- Mannschaftsübersicht mit dynamischen Seiten
- SMTP-Kontaktformular
- Google Maps Integration
- Mobile-optimierte Navigation mit Submenus
- Trainer-Übersicht
- Vereinsmeisterschaften, Spielsysteme, TT-Regeln
- Impressum mit Datenschutzerklärung

components/About.vue

@@ -0,0 +1,106 @@
+<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>
+