Introduce Hero component for homepage

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

@@ -2,64 +2,36 @@
 'use client';
 
 import {motion} from 'framer-motion';
+import Hero from '@/components/Hero';
 import Link from 'next/link';
-import Image from 'next/image';
 
 export default function HomePage() {
     return (
         <div className="flex flex-col min-h-screen">
-            <motion.div
+            <Hero/>
+
+            <motion.main
                 initial={{opacity: 0, y: 20}}
                 animate={{opacity: 1, y: 0}}
                 transition={{duration: 0.6}}
-                className="space-y-24 pt-32 pb-16 px-4 md:px-12 lg:px-24 bg-[#f9f9f9] text-gray-900"
+                className="pt-20 pb-20 px-6 md:px-16 lg:px-36 bg-gradient-to-b from-gray-50 to-white text-gray-900"
             >
-                {/* Hero Section mit Hintergrundbild */}
-                <section className="relative text-center text-white h-[70vh] rounded-xl overflow-hidden shadow-lg">
-                    <Image
-                        src="/images/hero.jpeg"
-                        alt="Anwaltskanzlei Hintergrund"
-                        fill
-                        className="object-cover brightness-[0.4]"
-                        quality={90}
-                    />
-                    <div className="relative z-10 flex flex-col justify-center items-center h-full px-4">
-                        <h1 className="text-4xl md:text-6xl font-bold mb-6">Ihre Kanzlei für Arbeits-, Familien- und
-                            Vertragsrecht</h1>
-                        <p className="text-lg max-w-2xl text-gray-100">
-                            Persönliche Betreuung. Klare Kommunikation. Effektive Lösungen für Ihr Anliegen.
-                        </p>
-                        <Link href="/kontakt/">
-                            <motion.button
-                                whileHover={{scale: 1.05}}
-                                whileTap={{scale: 0.95}}
-                                className="mt-6 px-8 py-3 bg-blue-700 text-white rounded-xl shadow hover:bg-blue-800 transition"
-                            >
-                                Kontakt aufnehmen
-                            </motion.button>
-                        </Link>
-                    </div>
-                </section>
-
-                {/* Divider */}
-                <div className="w-full h-[2px] bg-gray-300"/>
-
                 {/* Leistungen */}
-                <section>
+                <section className="text-center mb-32">
-                    <h2 className="text-3xl font-bold text-center mb-12">Unsere Schwerpunkte</h2>
+                    <h2 className="text-4xl font-extrabold mb-12 tracking-tight">Unsere Schwerpunkte</h2>
-                    <div className="grid md:grid-cols-3 gap-8">
+                    <div className="grid md:grid-cols-3 gap-10">
                         {[
                             {
                                 title: 'Arbeitsrecht',
-                                desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.'
+                                desc: 'Kündigung, Abmahnung, Aufhebungsvertrag – wir setzen Ihre Rechte durch.',
                             },
                             {
                                 title: 'Familienrecht',
-                                desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.'
+                                desc: 'Trennung, Scheidung, Unterhalt – wir stehen Ihnen zur Seite.',
                             },
                             {
                                 title: 'Vertragsrecht',
-                                desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.'
+                                desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',
                             },
                         ].map(({title, desc}) => (
                             <motion.div
@@ -68,53 +40,51 @@ export default function HomePage() {
                                 initial={{opacity: 0, y: 30}}
                                 transition={{duration: 0.4}}
                                 viewport={{once: true}}
-                                className="bg-white p-6 rounded-xl shadow hover:shadow-md"
+                                className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
                             >
-                                <h3 className="text-xl font-semibold mb-2">{title}</h3>
+                                <h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>
-                                <p className="text-gray-600">{desc}</p>
+                                <p className="text-gray-600 leading-relaxed">{desc}</p>
                             </motion.div>
                         ))}
                     </div>
                 </section>
 
-                {/* Divider */}
-                <div className="w-full h-[2px] bg-gray-300"/>
-
                 {/* Über die Kanzlei */}
-                <section className="max-w-4xl mx-auto text-center">
+                <section className="max-w-4xl mx-auto text-center mb-32">
-                    <h2 className="text-3xl font-bold mb-6">Über unsere Kanzlei</h2>
+                    <h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>
-                    <p className="text-gray-700 text-lg">
+                    <p className="text-gray-700 text-lg leading-relaxed">
                         Seit über 15 Jahren beraten und vertreten wir Mandantinnen und Mandanten aus ganz Deutschland.
-                        Unsere Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit
+                        Unsere
-                        für Ihre Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.
+                        Kanzlei steht für Kompetenz, Integrität und persönliche Betreuung. Wir nehmen uns Zeit für Ihre
+                        Anliegen und entwickeln individuelle Strategien – effizient und zielorientiert.
                     </p>
                 </section>
 
-                {/* Divider */}
-                <div className="w-full h-[2px] bg-gray-300"/>
-
                 {/* Vorteile */}
-                <section>
+                <section className="text-center mb-32">
-                    <h2 className="text-3xl font-bold text-center mb-10">Ihre Vorteile mit uns</h2>
+                    <h2 className="text-4xl font-extrabold mb-10 tracking-tight">Ihre Vorteile mit uns</h2>
-                    <div className="grid md:grid-cols-3 gap-8 text-center">
+                    <div className="grid md:grid-cols-3 gap-8">
                         {[
                             'Direkte & ehrliche Kommunikation',
                             'Schnelle Terminvergabe',
                             'Fachanwälte mit jahrelanger Erfahrung',
                         ].map((vorteil) => (
-                            <div key={vorteil} className="bg-white p-6 rounded-xl shadow">
+                            <div
-                                <p className="text-gray-800 font-medium">{vorteil}</p>
+                                key={vorteil}
+                                className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
+                            >
+                                <p className="text-gray-800 font-medium text-lg">{vorteil}</p>
                             </div>
                         ))}
                     </div>
                 </section>
 
-                {/* Divider */}
-                <div className="w-full h-[2px] bg-gray-300"/>
-
                 {/* Call to Action */}
-                <section className="text-center">
+                <section className="text-center bg-blue-50 py-16 rounded-xl">
-                    <h2 className="text-2xl font-bold mb-4">Vereinbaren Sie jetzt ein unverbindliches Erstgespräch</h2>
+                    <h2 className="text-3xl font-bold mb-4 text-blue-800">Vereinbaren Sie jetzt ein Erstgespräch</h2>
+                    <p className="text-gray-700 mb-6 text-lg">
+                        Lassen Sie sich unverbindlich beraten und lernen Sie unsere Kanzlei kennen.
+                    </p>
                     <Link href="/kontakt/">
                         <button
                             className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
@@ -122,7 +92,7 @@ export default function HomePage() {
                         </button>
                     </Link>
                 </section>
-            </motion.div>
+            </motion.main>
         </div>
     );
 }

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>
+    );
+}

lawfirm-demos/demo-1/package-lock.json

@@ -11,7 +11,8 @@
         "framer-motion": "^12.16.0",
         "next": "15.3.3",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-simple-typewriter": "^5.0.1"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -5121,6 +5122,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-simple-typewriter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz",
+      "integrity": "sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",

lawfirm-demos/demo-1/package.json

@@ -12,7 +12,8 @@
     "framer-motion": "^12.16.0",
     "next": "15.3.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-simple-typewriter": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",