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/Calendar.vue

@@ -0,0 +1,124 @@
+<template>
+  <section id="calendar" class="py-16 sm:py-20 bg-white">
+    <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">
+          Termine & Events
+        </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">
+          Entdecken Sie unsere kommenden Veranstaltungen und Turniere
+        </p>
+      </div>
+
+      <div class="relative">
+        <!-- Timeline line -->
+        <div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-primary-200 via-primary-400 to-primary-200" />
+
+        <div class="space-y-12">
+          <div
+            v-for="(event, index) in events"
+            :key="event.title"
+            :class="[
+              'relative flex items-center',
+              index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+            ]"
+          >
+            <div :class="['w-full lg:w-5/12', index % 2 === 0 ? 'lg:pr-12' : 'lg:pl-12']">
+              <div class="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-shadow p-6 border border-gray-100">
+                <div class="flex items-start space-x-4">
+                  <div :class="['flex-shrink-0 w-14 h-14 bg-gradient-to-br rounded-xl flex items-center justify-center', event.color]">
+                    <component :is="event.icon" :size="28" class="text-white" />
+                  </div>
+                  <div class="flex-1">
+                    <div class="text-sm font-semibold text-primary-600 mb-1">
+                      {{ event.date }}
+                    </div>
+                    <h3 class="text-xl font-display font-bold text-gray-900 mb-2">
+                      {{ event.title }}
+                    </h3>
+                    <p class="text-gray-600">
+                      {{ event.description }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Timeline dot -->
+            <div class="hidden lg:block absolute left-1/2 transform -translate-x-1/2">
+              <div :class="['w-4 h-4 bg-gradient-to-br rounded-full border-4 border-white shadow-lg', event.color]" />
+            </div>
+
+            <div class="hidden lg:block w-5/12" />
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-16 text-center">
+        <div class="bg-gray-50 rounded-2xl p-8 max-w-2xl mx-auto">
+          <CalendarIcon :size="48" class="text-primary-600 mx-auto mb-4" />
+          <h3 class="text-2xl font-display font-bold text-gray-900 mb-3">
+            Regelmäßige Angebote
+          </h3>
+          <div class="space-y-2 text-gray-700">
+            <p><strong>Dienstag & Donnerstag:</strong> Jugendtraining (17:00 - 19:00 Uhr)</p>
+            <p><strong>Mittwoch:</strong> Hobbygruppe (19:00 - 21:00 Uhr)</p>
+            <p><strong>Freitag:</strong> Wettkampftraining (18:00 - 20:00 Uhr)</p>
+            <p><strong>Wochenende:</strong> Punktspiele & Ligabetrieb</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { Calendar as CalendarIcon, Trophy, Users, PartyPopper } from 'lucide-vue-next'
+
+const events = [
+  {
+    date: '15. Mai 2025',
+    title: 'Saisoneröffnung',
+    description: 'Offizieller Start in die Tennissaison mit großem Eröffnungsfest',
+    icon: PartyPopper,
+    color: 'from-pink-500 to-rose-500',
+  },
+  {
+    date: '20-22. Juni 2025',
+    title: 'Clubmeisterschaft',
+    description: 'Spannende Matches um den Clubmeister-Titel',
+    icon: Trophy,
+    color: 'from-yellow-500 to-orange-500',
+  },
+  {
+    date: '15. Juli 2025',
+    title: 'Jugend-Turnier',
+    description: 'Nachwuchsturnier für alle Altersklassen',
+    icon: Users,
+    color: 'from-blue-500 to-cyan-500',
+  },
+  {
+    date: '10. August 2025',
+    title: 'Sommerfest',
+    description: 'Geselliges Beisammensein mit Grillen und Live-Musik',
+    icon: PartyPopper,
+    color: 'from-green-500 to-emerald-500',
+  },
+  {
+    date: '1-3. September 2025',
+    title: 'Vereinsmeisterschaft',
+    description: 'Das Highlight der Saison - Vereinsmeisterschaft in allen Kategorien',
+    icon: Trophy,
+    color: 'from-purple-500 to-indigo-500',
+  },
+  {
+    date: '30. September 2025',
+    title: 'Saisonabschluss',
+    description: 'Gemütlicher Ausklang der Saison mit Siegerehrung',
+    icon: CalendarIcon,
+    color: 'from-red-500 to-pink-500',
+  },
+]
+</script>
+