harheimertc/components/Calendar.vue

<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>