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/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">
-            <h2 className="text-3xl font-bold text-center mb-8">Über mich</h2>
-            <p className="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-                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.
-            </p>
+        <section className="py-20 px-4 bg-white dark:bg-gray-950">
+            <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
+                {/* Textbereich */}
+                <motion.div
+                    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>
     );
 }