Introduce Hero component for homepage

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

@@ -0,0 +1,60 @@
+'use client';
+
+import Image from 'next/image';
+import {motion} from 'framer-motion';
+import {Typewriter} from "react-simple-typewriter";
+
+const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];
+
+export default function Header() {
+    return (
+        <motion.section
+            initial={{opacity: 0, y: 30}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.8, ease: 'easeOut'}}
+            className="relative text-white h-[calc(100vh-5rem)] overflow-hidden shadow-lg"
+        >
+            <Image
+                src="/images/hero.jpeg"
+                alt="Anwaltskanzlei Hintergrund"
+                fill
+                className="object-cover brightness-[0.4]"
+                quality={50}
+            />
+            <div className="relative z-10 flex flex-col justify-center items-start h-full px-6 md:px-16 lg:px-24">
+                <motion.h1
+                    className="text-5xl md:text-7xl font-bold mb-4 leading-tight"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6}}
+                >
+                    Ihr Experte für
+                </motion.h1>
+                <motion.h2
+                    className="text-4xl md:text-6xl font-bold text-blue-200 mb-4"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6, delay: 0.2}}
+                >
+                    <Typewriter
+                        words={services}
+                        loop={true}
+                        cursor
+                        cursorStyle="_"
+                        typeSpeed={60}
+                        deleteSpeed={40}
+                        delaySpeed={1500}
+                    />
+                </motion.h2>
+                <motion.p
+                    className="text-xl md:text-2xl text-gray-100 mb-6"
+                    initial={{opacity: 0, y: 20}}
+                    animate={{opacity: 1, y: 0}}
+                    transition={{duration: 0.6, delay: 0.4}}
+                >
+                    in Lörrach und Freiburg.
+                </motion.p>
+            </div>
+        </motion.section>
+    );
+}