55 lines
2.5 KiB
TypeScript
55 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import {Input} from "@/components/ui/input";
|
||
import {Textarea} from "@/components/ui/textarea";
|
||
import {Button} from "@/components/ui/button";
|
||
import {motion} from "framer-motion";
|
||
|
||
export default function KontaktForm() {
|
||
return (
|
||
<section className="py-20 px-4 bg-[#f9f9f6] dark:bg-[#1a1a1a]">
|
||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
|
||
{/* Text links */}
|
||
<motion.div
|
||
initial={{opacity: 0, x: -30}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
transition={{duration: 0.6}}
|
||
viewport={{once: true}}
|
||
>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white mb-4">
|
||
Kontakt
|
||
</h2>
|
||
<div className="w-20 h-1 bg-yellow-500 rounded mb-6"/>
|
||
<p className="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
|
||
Sie haben Fragen oder möchten einen Beratungstermin vereinbaren? Nutzen Sie gern das
|
||
Kontaktformular oder schreiben Sie mir direkt per E-Mail. Ich melde mich schnellstmöglich bei
|
||
Ihnen zurück.
|
||
</p>
|
||
<div className="text-gray-800 dark:text-gray-300 space-y-2 text-sm">
|
||
<p><strong>Telefon:</strong> 030 / 123 456 78</p>
|
||
<p><strong>E-Mail:</strong> kontakt@kanzlei-mustermann.de</p>
|
||
<p><strong>Adresse:</strong> Musterstraße 1, 10115 Berlin</p>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Formular rechts */}
|
||
<motion.form
|
||
className="space-y-6"
|
||
initial={{opacity: 0, x: 30}}
|
||
whileInView={{opacity: 1, x: 0}}
|
||
transition={{duration: 0.6, delay: 0.2}}
|
||
viewport={{once: true}}
|
||
onSubmit={(e) => e.preventDefault()} // Dummy – kann ersetzt werden
|
||
>
|
||
<Input type="text" placeholder="Ihr Name" required/>
|
||
<Input type="email" placeholder="Ihre E-Mail" required/>
|
||
<Textarea placeholder="Ihre Nachricht" rows={5} required/>
|
||
<Button type="submit" className="w-full">
|
||
Nachricht senden
|
||
</Button>
|
||
</motion.form>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|