From ff90582486a95d7c37b0fdafcb2c08c9dd882a6a Mon Sep 17 00:00:00 2001
From: Thatsaphorn Atchariyaphap <thatsaphorn@outlook.de>
Date: Thu, 19 Jun 2025 23:54:43 +0900
Subject: [PATCH] Refactor `Hero` component: rename to `Hero`, refine
 animations and typography, and enhance typewriter integration.

---
 lawfirm-demos/demo-1/components/Hero.tsx | 64 +++++++++++++-----------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/lawfirm-demos/demo-1/components/Hero.tsx b/lawfirm-demos/demo-1/components/Hero.tsx
index 6a7f5b8..0c668e6 100644
--- a/lawfirm-demos/demo-1/components/Hero.tsx
+++ b/lawfirm-demos/demo-1/components/Hero.tsx
@@ -1,17 +1,17 @@
 'use client';
 
 import Image from 'next/image';
-import {motion} from 'framer-motion';
-import {Typewriter} from "react-simple-typewriter";
+import { motion } from 'framer-motion';
+import { Typewriter } from 'react-simple-typewriter';
 
 const services = ['Arbeitsrecht', 'Familienrecht', 'Vertragsrecht'];
 
-export default function Header() {
+export default function Hero() {
     return (
         <motion.section
-            initial={{opacity: 0, y: 30}}
-            animate={{opacity: 1, y: 0}}
-            transition={{duration: 0.8, ease: 'easeOut'}}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.8, ease: 'easeOut' }}
             className="relative text-white h-screen overflow-hidden shadow-lg"
         >
             <Image
@@ -23,38 +23,42 @@ export default function Header() {
             />
             <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}}
+                    className="text-2xl md:text-3xl font-light tracking-wide text-gray-200 mb-2"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5 }}
                 >
-                    Ihr Experte für
+                    Rechtsanwälte
                 </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}}
+                    className="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.1 }}
                 >
-                    <Typewriter
-                        words={services}
-                        loop={true}
-                        cursor
-                        cursorStyle="_"
-                        typeSpeed={60}
-                        deleteSpeed={40}
-                        delaySpeed={1500}
-                    />
+                    Dr. Mustermann & Künstler
                 </motion.h2>
+
                 <motion.p
-                    className="text-xl md:text-2xl text-gray-100 mt-4"
-                    initial={{opacity: 0, y: 20}}
-                    animate={{opacity: 1, y: 0}}
-                    transition={{duration: 0.6, delay: 0.4}}
+                    className="text-2xl md:text-3xl text-gray-200 font-medium"
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.2 }}
                 >
-                    in Lörrach und Freiburg.
+                    <span className="text-gray-300">Ihr Experte für </span>
+                    <span className="text-blue-400 font-semibold">
+                        <Typewriter
+                            words={services}
+                            loop
+                            cursor
+                            cursorStyle="_"
+                            typeSpeed={60}
+                            deleteSpeed={40}
+                            delaySpeed={1500}
+                        />
+                    </span>
                 </motion.p>
             </div>
         </motion.section>
     );
-}
\ No newline at end of file
+}