Redesign Hero component with background image, motion effects, improved layout; add new hero image and team images.

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

@@ -1,10 +1,43 @@
+"use client";
+
+import {motion} from "framer-motion";
+import Image from "next/image";
+
 export default function Hero() {
     return (
-        <section className="h-[80vh] flex flex-col items-center justify-center text-center px-4">
+        <section className="relative h-[80vh] flex items-center justify-center text-center px-4 overflow-hidden">
-            <h1 className="text-4xl md:text-6xl font-bold mb-4">Rechtsanwalt Max Mustermann</h1>
+            {/* Hintergrundbild */}
-            <p className="text-lg md:text-xl text-gray-600 dark:text-gray-300">
+            <Image
-                Ihr Partner für Zivilrecht, Vertragsrecht und mehr
+                src="/images/hero.jpeg" // dein hochgeladenes Bild
-            </p>
+                alt="Hintergrundbild"
+                fill
+                priority
+                className="object-cover object-center z-0"
+            />
+
+            {/* Dunkles Overlay für bessere Lesbarkeit */}
+            <div className="absolute inset-0 bg-gradient-to-b from-black/70 to-black/80 z-10"/>
+
+            {/* Text-Content */}
+            <div className="relative z-20 max-w-3xl space-y-6 text-white px-4">
+                <motion.h1
+                    className="text-4xl md:text-6xl font-extrabold drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)]"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                >
+                    Rechtsanwalt <span className="text-white">Max Mustermann</span>
+                </motion.h1>
+
+                <motion.p
+                    className="text-lg md:text-xl text-white/90 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
+                    initial={{opacity: 0}}
+                    animate={{opacity: 1}}
+                    transition={{delay: 0.2, duration: 0.6}}
+                >
+                    Ihr zuverlässiger Partner für Zivilrecht, Vertragsrecht und mehr
+                </motion.p>
+            </div>
         </section>
     );
 }