290 lines
9.4 KiB
Vue
290 lines
9.4 KiB
Vue
<template>
|
|
<section
|
|
id="contact"
|
|
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">
|
|
Kontakt
|
|
</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">
|
|
Wir freuen uns auf Ihre Nachricht - Kontaktieren Sie uns!
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-12 items-start">
|
|
<!-- Contact Information -->
|
|
<div class="space-y-6">
|
|
<div
|
|
v-for="info in contactInfo"
|
|
:key="info.title"
|
|
class="flex items-start space-x-4 bg-gray-50 p-6 rounded-xl hover:shadow-lg transition-shadow"
|
|
>
|
|
<div :class="['flex-shrink-0 w-12 h-12 bg-gradient-to-br rounded-lg flex items-center justify-center', info.color]">
|
|
<component
|
|
:is="info.icon"
|
|
:size="24"
|
|
class="text-white"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-display font-bold text-gray-900 mb-2">
|
|
{{ info.title }}
|
|
</h3>
|
|
<p
|
|
v-for="(line, i) in info.content"
|
|
:key="i"
|
|
class="text-gray-600"
|
|
>
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map & Link -->
|
|
<div class="space-y-4">
|
|
<div class="rounded-2xl overflow-hidden shadow-xl h-64">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2554.5!2d8.660947!3d50.187044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bd0e5e5e5e5e5e%3A0x5e5e5e5e5e5e5e5e!2sIn%20den%20Schafg%C3%A4rten%2025%2C%2060437%20Frankfurt%20am%20Main!5e0!3m2!1sde!2sde!4v1234567890"
|
|
width="100%"
|
|
height="100%"
|
|
style="border: 0"
|
|
loading="lazy"
|
|
allowfullscreen
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
title="Sporthalle der Grundschule Harheim"
|
|
/>
|
|
</div>
|
|
<a
|
|
href="https://www.google.com/maps/search/?api=1&query=In+den+Schafgärten+25+60437+Frankfurt"
|
|
target="_blank"
|
|
class="block text-center px-4 py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg transition-colors"
|
|
>
|
|
In Google Maps öffnen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Form -->
|
|
<div class="bg-gradient-to-br from-primary-50 to-primary-100/50 rounded-2xl p-8 shadow-xl">
|
|
<h3 class="text-2xl font-display font-bold text-gray-900 mb-6">
|
|
Senden Sie uns eine Nachricht
|
|
</h3>
|
|
<form
|
|
class="space-y-4"
|
|
@submit.prevent="sendEmail"
|
|
>
|
|
<div>
|
|
<label
|
|
for="name"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Name *
|
|
</label>
|
|
<input
|
|
id="name"
|
|
v-model="formData.name"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
|
|
placeholder="Ihr Name"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
E-Mail *
|
|
</label>
|
|
<input
|
|
id="email"
|
|
v-model="formData.email"
|
|
type="email"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
|
|
placeholder="ihre@email.de"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="phone"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Telefon
|
|
</label>
|
|
<input
|
|
id="phone"
|
|
v-model="formData.phone"
|
|
type="tel"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
|
|
placeholder="+49 123 456789"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="subject"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Betreff *
|
|
</label>
|
|
<input
|
|
id="subject"
|
|
v-model="formData.subject"
|
|
type="text"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all"
|
|
placeholder="Worum geht es?"
|
|
>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="message"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>
|
|
Nachricht *
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
v-model="formData.message"
|
|
required
|
|
rows="5"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all resize-none"
|
|
placeholder="Ihre Nachricht..."
|
|
/>
|
|
</div>
|
|
<!-- Status Message -->
|
|
<div
|
|
v-if="submitStatus"
|
|
class="p-4 rounded-lg"
|
|
:class="submitStatus === 'success' ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'"
|
|
>
|
|
<div class="flex items-center">
|
|
<CheckCircle
|
|
v-if="submitStatus === 'success'"
|
|
:size="20"
|
|
class="text-green-600 mr-2"
|
|
/>
|
|
<AlertCircle
|
|
v-else
|
|
:size="20"
|
|
class="text-red-600 mr-2"
|
|
/>
|
|
<p
|
|
:class="submitStatus === 'success' ? 'text-green-800' : 'text-red-800'"
|
|
class="text-sm font-medium"
|
|
>
|
|
{{ submitMessage }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
:disabled="isSubmitting"
|
|
class="w-full px-6 py-4 bg-primary-600 hover:bg-primary-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center"
|
|
>
|
|
<Send
|
|
v-if="!isSubmitting"
|
|
:size="20"
|
|
class="mr-2"
|
|
/>
|
|
<div
|
|
v-else
|
|
class="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"
|
|
/>
|
|
{{ isSubmitting ? 'Wird gesendet...' : 'E-Mail senden' }}
|
|
</button>
|
|
<p class="text-sm text-gray-600 text-center">
|
|
* Pflichtfelder
|
|
</p>
|
|
</form>
|
|
<p class="mt-4 text-sm text-gray-600 text-center">
|
|
Ihre Nachricht wird direkt an j.dichmann@gmx.de gesendet
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { MapPin, Phone, Mail, Clock, Send, CheckCircle, AlertCircle } from 'lucide-vue-next'
|
|
|
|
const formData = ref({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: ''
|
|
})
|
|
|
|
const isSubmitting = ref(false)
|
|
const submitStatus = ref(null) // 'success', 'error', null
|
|
const submitMessage = ref('')
|
|
|
|
const sendEmail = async () => {
|
|
isSubmitting.value = true
|
|
submitStatus.value = null
|
|
submitMessage.value = ''
|
|
|
|
try {
|
|
const response = await $fetch('/api/contact', {
|
|
method: 'POST',
|
|
body: formData.value
|
|
})
|
|
|
|
if (response.success) {
|
|
submitStatus.value = 'success'
|
|
submitMessage.value = 'E-Mail wurde erfolgreich gesendet! Wir melden uns bald bei Ihnen.'
|
|
|
|
// Formular zurücksetzen
|
|
formData.value = {
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
subject: '',
|
|
message: ''
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Fehler beim Senden:', error)
|
|
submitStatus.value = 'error'
|
|
submitMessage.value = error.data?.message || 'Fehler beim Senden der E-Mail. Bitte versuchen Sie es später erneut.'
|
|
} finally {
|
|
isSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
const contactInfo = [
|
|
{
|
|
icon: MapPin,
|
|
title: 'Trainingsort',
|
|
content: ['Sporthalle der Grundschule Harheim', 'In den Schafgärten 25', '60437 Frankfurt/Main'],
|
|
color: 'from-red-500 to-pink-500',
|
|
},
|
|
{
|
|
icon: Phone,
|
|
title: 'Telefon',
|
|
content: ['06101-4992227'],
|
|
color: 'from-green-500 to-emerald-500',
|
|
},
|
|
{
|
|
icon: Mail,
|
|
title: 'E-Mail',
|
|
content: ['j.dichmann@gmx.de'],
|
|
color: 'from-blue-500 to-cyan-500',
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: 'Trainingszeiten',
|
|
content: ['Dienstag: 19:30 - 22:30 Uhr', 'Donnerstag: 19:30 - 22:30 Uhr'],
|
|
color: 'from-purple-500 to-indigo-500',
|
|
},
|
|
]
|
|
</script>
|
|
|