Redesign About, Leistungen, and KontaktForm components: implement motion effects, improve layout and responsiveness, enhance styling, and add new content placeholders.

lawfirm-demos/demo-2/components/KontaktForm.tsx

@@ -1,21 +1,54 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
+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-16 px-4 max-w-xl mx-auto">
-            <h2 className="text-3xl font-bold text-center mb-8">Kontakt</h2>
-            <form className="space-y-6">
-                <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">
-                    Absenden
-                </Button>
-            </form>
+        <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>
     );
 }