114 lines
4.0 KiB
Vue
114 lines
4.0 KiB
Vue
<template>
|
|
<section
|
|
id="facilities"
|
|
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">
|
|
Unsere Anlagen
|
|
</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">
|
|
Moderne Ausstattung und erstklassige Einrichtungen für ein perfektes Tischtenniserlebnis
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
<div
|
|
v-for="facility in facilities"
|
|
:key="facility.title"
|
|
class="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100"
|
|
>
|
|
<div :class="['absolute top-0 left-0 right-0 h-1 bg-gradient-to-r opacity-0 group-hover:opacity-100 transition-opacity', facility.color]" />
|
|
<div class="p-8">
|
|
<div :class="['w-16 h-16 bg-gradient-to-br rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform', facility.color]">
|
|
<component
|
|
:is="facility.icon"
|
|
:size="32"
|
|
class="text-white"
|
|
/>
|
|
</div>
|
|
<h3 class="text-2xl font-display font-bold text-gray-900 mb-3">
|
|
{{ facility.title }}
|
|
</h3>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
{{ facility.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Gallery -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="relative h-[300px] rounded-2xl overflow-hidden shadow-xl group">
|
|
<div
|
|
class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-700"
|
|
style="background-image: url('https://images.unsplash.com/photo-1534438097545-77fef53fe2e8?q=80&w=2070')"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
|
|
<p class="text-white font-semibold text-xl p-6">
|
|
Hochwertige Wettkampftische
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="relative h-[300px] rounded-2xl overflow-hidden shadow-xl group">
|
|
<div
|
|
class="w-full h-full bg-cover bg-center group-hover:scale-110 transition-transform duration-700"
|
|
style="background-image: url('https://images.unsplash.com/photo-1611004275469-8583ed5d7b8d?q=80&w=2070')"
|
|
/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
|
|
<p class="text-white font-semibold text-xl p-6">
|
|
Moderne Tischtennishalle
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Sun, CloudRain, Dumbbell, Utensils, Wifi, Droplets } from 'lucide-vue-next'
|
|
|
|
const facilities = [
|
|
{
|
|
icon: Sun,
|
|
title: '8 Tischtennisplatten',
|
|
description: 'Hochwertige Wettkampftische für optimales Spielvergnügen',
|
|
color: 'from-yellow-400 to-orange-500',
|
|
},
|
|
{
|
|
icon: CloudRain,
|
|
title: 'Klimatisierte Halle',
|
|
description: 'Optimale Bedingungen bei jedem Wetter in unserer modernen Halle',
|
|
color: 'from-blue-400 to-blue-600',
|
|
},
|
|
{
|
|
icon: Dumbbell,
|
|
title: 'Trainingsbereich',
|
|
description: 'Ballmaschinen und Trainingsgeräte für gezieltes Training',
|
|
color: 'from-red-400 to-red-600',
|
|
},
|
|
{
|
|
icon: Utensils,
|
|
title: 'Clubhaus',
|
|
description: 'Gemütliches Clubhaus mit Aufenthaltsraum und Küche',
|
|
color: 'from-green-400 to-green-600',
|
|
},
|
|
{
|
|
icon: Wifi,
|
|
title: 'Kostenloses WLAN',
|
|
description: 'Schnelles Internet auf der gesamten Anlage',
|
|
color: 'from-purple-400 to-purple-600',
|
|
},
|
|
{
|
|
icon: Droplets,
|
|
title: 'Umkleiden & Duschen',
|
|
description: 'Moderne, saubere Umkleideräume mit Duschen',
|
|
color: 'from-cyan-400 to-cyan-600',
|
|
},
|
|
]
|
|
</script>
|
|
|