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

lawfirm-demos/demo-2/app/page.tsx

@@ -7,8 +7,8 @@ export default function HomePage() {
     return (
         <main>
             <Hero/>
-        <Leistungen />
             <About/>
+            <Leistungen/>
             <KontaktForm/>
         </main>
     );

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

@@ -1,11 +1,67 @@
+"use client";
+
+import Image from "next/image";
+import {motion} from "framer-motion";
+import {Button} from "@/components/ui/button";
+
 export default function About() {
     return (
-        <section className="py-16 px-4 max-w-3xl mx-auto">
+        <section className="py-20 px-4 bg-white dark:bg-gray-950">
-            <h2 className="text-3xl font-bold text-center mb-8">Über mich</h2>
+            <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
-            <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
+                {/* Textbereich */}
-                Ich bin Max Mustermann, selbstständiger Rechtsanwalt mit Spezialisierung auf Zivilrecht und Vertragsrecht.
+                <motion.div
-                Seit über 10 Jahren berate und vertrete ich Mandanten engagiert, individuell und mit juristischer Präzision.
+                    className="space-y-6"
+                    initial={{opacity: 0, x: -30}}
+                    whileInView={{opacity: 1, x: 0}}
+                    transition={{duration: 0.6}}
+                    viewport={{once: true}}
+                >
+                    <div>
+                        <h2 className="text-3xl font-bold text-left text-gray-900 dark:text-white">
+                            Über mich
+                        </h2>
+                        <div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
+                    </div>
+
+                    <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300 text-left">
+                        Ich bin Max Mustermann, selbstständiger Rechtsanwalt mit Spezialisierung
+                        auf Zivilrecht und Vertragsrecht. Seit über 10 Jahren berate und
+                        vertrete ich Mandanten engagiert, individuell und mit juristischer
+                        Präzision. Mein Ziel ist es, Ihre Interessen verständlich,
+                        transparent und durchsetzungsstark zu vertreten.
                     </p>
+
+                    {/* Button */}
+                    <motion.div
+                        initial={{opacity: 0, y: 10}}
+                        whileInView={{opacity: 1, y: 0}}
+                        transition={{duration: 0.4, delay: 0.2}}
+                        viewport={{once: true}}
+                    >
+                        <a href="/about" className="inline-block">
+                            <Button variant="outline">Mehr über mich</Button>
+                        </a>
+                    </motion.div>
+                </motion.div>
+
+                {/* Bildbereich */}
+                <motion.div
+                    className="flex justify-center"
+                    initial={{opacity: 0, x: 30}}
+                    whileInView={{opacity: 1, x: 0}}
+                    transition={{duration: 0.6, delay: 0.2}}
+                    viewport={{once: true}}
+                >
+                    <div className="w-[260px] h-[360px] relative rounded-xl overflow-hidden shadow-lg">
+                        <Image
+                            src="/images/team/mustermann.jpg"
+                            alt="Max Mustermann"
+                            fill
+                            className="object-cover object-top"
+                        />
+                    </div>
+                </motion.div>
+            </div>
         </section>
     );
 }

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

@@ -3,19 +3,52 @@
 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">
+        <section className="py-20 px-4 bg-[#f9f9f6] dark:bg-[#1a1a1a]">
-            <h2 className="text-3xl font-bold text-center mb-8">Kontakt</h2>
+            <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-start">
-            <form className="space-y-6">
+                {/* 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">
-                    Absenden
+                        Nachricht senden
                     </Button>
-            </form>
+                </motion.form>
+            </div>
         </section>
     );
 }

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

@@ -1,21 +1,86 @@
-export default function Leistungen() {
+"use client";
+
+import {motion} from "framer-motion";
+import {
+    Briefcase,
+    FileText,
+    Gavel,
+    Building2,
+} from "lucide-react";
+
 const services = [
-        "Allgemeines Zivilrecht",
+    {
-        "Vertragsprüfung",
+        title: "Allgemeines Zivilrecht",
-        "Arbeitsrecht",
+        description:
-        "Mietrecht",
+            "Kompetente Vertretung bei Streitigkeiten zwischen Privatpersonen.",
+        icon: Gavel,
+    },
+    {
+        title: "Vertragsprüfung",
+        description:
+            "Prüfung, Anpassung und rechtssichere Gestaltung Ihrer Verträge.",
+        icon: FileText,
+    },
+    {
+        title: "Arbeitsrecht",
+        description:
+            "Beratung für Arbeitnehmer und Arbeitgeber bei Kündigung, Abmahnung u.a.",
+        icon: Briefcase,
+    },
+    {
+        title: "Mietrecht",
+        description:
+            "Rechtliche Unterstützung bei Mieterhöhungen, Kündigung & Nebenkosten.",
+        icon: Building2,
+    },
 ];
 
+export default function Leistungen() {
     return (
-        <section className="py-16 px-4 bg-gray-100 dark:bg-gray-900">
+        <section className="py-20 px-4 bg-white dark:bg-gray-950">
-            <h2 className="text-3xl font-bold text-center mb-8">Leistungen</h2>
+            <div className="max-w-6xl mx-auto">
-            <ul className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
+                {/* Titel & Divider */}
-                {services.map((service, i) => (
+                <motion.div
-                    <li key={i} className="bg-white dark:bg-gray-800 p-6 rounded-xl shadow">
+                    className="mb-12"
-                        {service}
+                    initial={{opacity: 0, y: 20}}
-                    </li>
+                    whileInView={{opacity: 1, y: 0}}
+                    transition={{duration: 0.5}}
+                    viewport={{once: true}}
+                >
+                    <h2 className="text-3xl md:text-4xl font-bold text-left text-gray-900 dark:text-white">
+                        Leistungen
+                    </h2>
+                    <div className="mt-2 w-20 h-1 bg-yellow-500 rounded"/>
+                </motion.div>
+
+                {/* Grid */}
+                <div className="grid md:grid-cols-2 gap-8">
+                    {services.map(({title, description, icon: Icon}, i) => (
+                        <motion.div
+                            key={title}
+                            className="p-6 rounded-xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow"
+                            initial={{opacity: 0, y: 30}}
+                            whileInView={{opacity: 1, y: 0}}
+                            transition={{delay: i * 0.1, duration: 0.5}}
+                            viewport={{once: true}}
+                        >
+                            <div className="flex items-start gap-4">
+                                <div className="p-2 rounded-md bg-primary/10 text-primary">
+                                    <Icon className="w-6 h-6"/>
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                                        {title}
+                                    </h3>
+                                    <p className="text-sm text-gray-700 dark:text-gray-300">
+                                        {description}
+                                    </p>
+                                </div>
+                            </div>
+                        </motion.div>
                     ))}
-            </ul>
+                </div>
+            </div>
         </section>
     );
 }