133 lines
4.3 KiB
TypeScript
Executable File
133 lines
4.3 KiB
TypeScript
Executable File
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { useState } from 'react'
|
|
import Navigation from '@/components/Navigation'
|
|
import Footer from '@/components/Footer'
|
|
|
|
export default function Kontakt() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
})
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
// In production, this would send the form data to a backend
|
|
window.location.href = `mailto:info@doing-it.de?subject=${encodeURIComponent(formData.subject)}&body=${encodeURIComponent(`Name: ${formData.name}\nE-Mail: ${formData.email}\n\nNachricht:\n${formData.message}`)}`
|
|
}
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Navigation />
|
|
<main>
|
|
{/* Hero Section */}
|
|
<section className="page-hero">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="container"
|
|
>
|
|
<h1>Kontakt</h1>
|
|
<p className="page-hero-subtitle">
|
|
Wir freuen uns auf Ihre Nachricht
|
|
</p>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Contact Section */}
|
|
<section className="page-content">
|
|
<div className="container">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<form className="contact-form" onSubmit={handleSubmit}>
|
|
<div className="form-group">
|
|
<label htmlFor="name">Name *</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
placeholder="Ihr Name"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="email">E-Mail *</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
placeholder="ihre.email@beispiel.de"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="subject">Betreff *</label>
|
|
<input
|
|
type="text"
|
|
id="subject"
|
|
name="subject"
|
|
required
|
|
value={formData.subject}
|
|
onChange={handleChange}
|
|
placeholder="Betreff Ihrer Nachricht"
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="message">Nachricht *</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
required
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
placeholder="Ihre Nachricht an uns..."
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
|
|
Nachricht senden
|
|
</button>
|
|
</form>
|
|
|
|
<div className="contact-info">
|
|
<div className="contact-info-item">
|
|
<h3>E-Mail</h3>
|
|
<a href="mailto:info@doing-it.de">info@doing-it.de</a>
|
|
</div>
|
|
<div className="contact-info-item">
|
|
<h3>Kontakt</h3>
|
|
<p>Wir melden uns schnellstmöglich bei Ihnen zurück.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|
|
|