torsten/harheimertc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure homepage: Hero, Termine, News, Actions in new order

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-21 15:36:35 +02:00
parent 72c1039aa3
commit abec76a2d9
72 changed files with 794 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/Hero.vue
View File

@@ -23,26 +23,6 @@
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>
@@ -56,8 +36,6 @@
</template>
<script setup>
import { ArrowRight } from 'lucide-vue-next'
import TermineVorschau from './TermineVorschau.vue'
</script>
<style scoped>

58
components/HomeActions.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<section 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="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<!-- Mitglied werden -->
<NuxtLink
to="/mitgliedschaft"
class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border-2 border-transparent hover:border-primary-600"
>
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center group-hover:bg-primary-600 transition-colors">
<UserPlus :size="32" class="text-primary-600 group-hover:text-white transition-colors" />
</div>
<h3 class="ml-4 text-2xl font-display font-bold text-gray-900">
Mitglied werden
</h3>
</div>
<p class="text-gray-600 mb-4">
Werden Sie Teil unserer Tischtennisfamilie und profitieren Sie von regelmäßigem Training,
Wettkämpfen und einer tollen Gemeinschaft.
</p>
<div class="flex items-center text-primary-600 font-semibold group-hover:translate-x-2 transition-transform">
Mehr erfahren
<ArrowRight :size="20" class="ml-2" />
</div>
</NuxtLink>
<!-- Kontakt aufnehmen -->
<NuxtLink
to="/kontakt"
class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all border-2 border-transparent hover:border-primary-600"
>
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-primary-100 rounded-xl flex items-center justify-center group-hover:bg-primary-600 transition-colors">
<Mail :size="32" class="text-primary-600 group-hover:text-white transition-colors" />
</div>
<h3 class="ml-4 text-2xl font-display font-bold text-gray-900">
Kontakt aufnehmen
</h3>
</div>
<p class="text-gray-600 mb-4">
Haben Sie Fragen oder möchten ein kostenloses Probetraining vereinbaren?
Wir freuen uns auf Ihre Nachricht!
</p>
<div class="flex items-center text-primary-600 font-semibold group-hover:translate-x-2 transition-transform">
Jetzt kontaktieren
<ArrowRight :size="20" class="ml-2" />
</div>
</NuxtLink>
</div>
</div>
</section>
</template>
<script setup>
import { UserPlus, Mail, ArrowRight } from 'lucide-vue-next'
</script>

32
components/HomeTermine.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<section class="py-16 sm:py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4">
Kommende Termine
</h2>
<div class="w-24 h-1 bg-primary-600 mx-auto mb-6" />
</div>
<div class="max-w-4xl mx-auto">
<TermineVorschau />
</div>
<div class="text-center mt-8">
<NuxtLink
to="/termine"
class="inline-flex items-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white font-semibold rounded-lg transition-colors"
>
Alle Termine anzeigen
<ArrowRight :size="20" class="ml-2" />
</NuxtLink>
</div>
</div>
</section>
</template>
<script setup>
import { ArrowRight } from 'lucide-vue-next'
import TermineVorschau from './TermineVorschau.vue'
</script>