65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import {useState} from 'react'
|
|
import {Input} from '@/components/ui/input'
|
|
import {Textarea} from '@/components/ui/textarea'
|
|
import {Button} from '@/components/ui/button'
|
|
import {motion as m} from 'framer-motion'
|
|
import {CheckCircle} from 'lucide-react'
|
|
|
|
export default function KontaktPage() {
|
|
const [success, setSuccess] = useState(false)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
|
|
// Simulate delay
|
|
setTimeout(() => {
|
|
setLoading(false)
|
|
setSuccess(true)
|
|
}, 1000)
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen py-20 px-6 max-w-2xl mx-auto">
|
|
<m.div
|
|
initial={{opacity: 0, y: 30}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
>
|
|
<h1 className="text-3xl font-bold mb-4 text-center">Kontakt</h1>
|
|
<p className="text-center mb-10 text-muted-foreground">
|
|
Sie haben Fragen? Schreiben Sie uns direkt über das Formular.
|
|
</p>
|
|
|
|
{success ? (
|
|
<div className="text-center">
|
|
<CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4"/>
|
|
<p className="text-lg">Vielen Dank! Ihre Nachricht wurde erfolgreich gesendet.</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="name" className="block text-sm font-medium mb-1">Name</label>
|
|
<Input id="name" name="name" required/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium mb-1">E-Mail</label>
|
|
<Input id="email" name="email" type="email" required/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="message" className="block text-sm font-medium mb-1">Nachricht</label>
|
|
<Textarea id="message" name="message" rows={5} required/>
|
|
</div>
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? 'Senden...' : 'Nachricht senden'}
|
|
</Button>
|
|
</form>
|
|
)}
|
|
</m.div>
|
|
</main>
|
|
)
|
|
}
|