118 lines
3.6 KiB
JavaScript
118 lines
3.6 KiB
JavaScript
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function Contact() {
|
|
const [formStatus, setFormStatus] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
|
|
const formData = new FormData(e.target);
|
|
const data = Object.fromEntries(formData);
|
|
|
|
try {
|
|
const response = await fetch('/api/contact', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
});
|
|
|
|
if (response.ok) {
|
|
setFormStatus('success');
|
|
e.target.reset();
|
|
} else {
|
|
setFormStatus('error');
|
|
}
|
|
} catch (error) {
|
|
setFormStatus('error');
|
|
}
|
|
|
|
setIsLoading(false);
|
|
};
|
|
|
|
return (
|
|
<div className="py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h1 className="text-4xl font-bold mb-6">Kontakt</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Lassen Sie uns über Ihr Projekt sprechen
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="bg-white p-6 rounded-lg shadow-sm"
|
|
>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Name</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
className="w-full rounded-lg border-gray-300"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">E-Mail</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
required
|
|
className="w-full rounded-lg border-gray-300"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Nachricht</label>
|
|
<textarea
|
|
name="message"
|
|
required
|
|
rows="4"
|
|
className="w-full rounded-lg border-gray-300"
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="btn-primary w-full"
|
|
>
|
|
{isLoading ? 'Wird gesendet...' : 'Absenden'}
|
|
</button>
|
|
{formStatus === 'success' && (
|
|
<p className="text-green-600">Nachricht erfolgreich gesendet!</p>
|
|
)}
|
|
{formStatus === 'error' && (
|
|
<p className="text-red-600">Ein Fehler ist aufgetreten.</p>
|
|
)}
|
|
</form>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
className="bg-white p-6 rounded-lg shadow-sm md:ml-16"
|
|
>
|
|
<h3 className="text-xl font-semibold mb-4">Kontaktdaten</h3>
|
|
<div className="space-y-2 mb-6">
|
|
<p>Pixelbrew GmbH</p>
|
|
<p>Musterstraße 123</p>
|
|
<p>12345 München</p>
|
|
<p>Tel: +49 123 456789</p>
|
|
<p>E-Mail: info@pixelbrew.de</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|