737c3064bd
- 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
87 lines
3.0 KiB
Vue
87 lines
3.0 KiB
Vue
<template>
|
|
<section id="home" class="relative min-h-full flex items-center justify-center overflow-hidden py-20 bg-gradient-to-br from-gray-50 to-gray-100">
|
|
<!-- Decorative Elements -->
|
|
<div class="absolute inset-0 z-0">
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-primary-200/30 rounded-full blur-3xl" />
|
|
<div class="absolute bottom-0 left-0 w-96 h-96 bg-gray-300/30 rounded-full blur-3xl" />
|
|
<div
|
|
class="absolute inset-0 opacity-5"
|
|
style="background-image: url('https://images.unsplash.com/photo-1609710228159-0fa9bd7c0827?q=80&w=2070'); background-size: cover; background-position: center;"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 sm:py-32">
|
|
<div class="text-center">
|
|
<h1 class="text-5xl sm:text-6xl lg:text-7xl font-display font-bold text-gray-900 mb-6 leading-tight animate-fade-in">
|
|
Willkommen beim<br />
|
|
<span class="text-primary-600">Harheimer TC</span>
|
|
</h1>
|
|
|
|
<p class="text-xl sm:text-2xl text-gray-700 mb-8 max-w-3xl mx-auto animate-fade-in-delay-1">
|
|
Tradition trifft Moderne - Ihr Tischtennisverein in Frankfurt-Harheim seit über 45 Jahren
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-delay-2">
|
|
<NuxtLink
|
|
to="/mitgliedschaft"
|
|
class="group px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center space-x-2"
|
|
>
|
|
<span>Mitglied werden</span>
|
|
<ArrowRight :size="20" class="group-hover:translate-x-1 transition-transform" />
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/kontakt"
|
|
class="px-8 py-4 bg-white hover:bg-gray-50 text-gray-900 font-semibold rounded-xl border-2 border-gray-300 hover:border-primary-600 shadow-lg transition-all duration-300"
|
|
>
|
|
Kontakt aufnehmen
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Termine -->
|
|
<div class="mt-16 max-w-4xl mx-auto">
|
|
<TermineVorschau />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20 animate-bounce">
|
|
<div class="w-6 h-10 border-2 border-gray-400 rounded-full flex justify-center pt-2">
|
|
<div class="w-1.5 h-3 bg-primary-600 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ArrowRight } from 'lucide-vue-next'
|
|
import TermineVorschau from './TermineVorschau.vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.8s ease-out;
|
|
}
|
|
|
|
.animate-fade-in-delay-1 {
|
|
animation: fadeIn 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.animate-fade-in-delay-2 {
|
|
animation: fadeIn 0.8s ease-out 0.4s both;
|
|
}
|
|
</style>
|
|
|