59 lines
2.5 KiB
Vue
59 lines
2.5 KiB
Vue
<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>
|
|
|