Enhance animations and styling on homepage sections; adjust Hero component to use full h-screen height.

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

@@ -1,22 +1,28 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import {motion} from 'framer-motion';
 import Hero from '@/components/Hero';
 import Link from 'next/link';
 
 export default function HomePage() {
     return (
         <div className="flex flex-col min-h-screen">
-            <Hero />
+            <Hero/>
 
             <motion.main
-                initial={{ opacity: 0, y: 20 }}
+                initial={{opacity: 0, y: 20}}
-                animate={{ opacity: 1, y: 0 }}
+                animate={{opacity: 1, y: 0}}
-                transition={{ duration: 0.6 }}
+                transition={{duration: 0.6}}
                 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"
             >
                 {/* Unser Leitgedanke */}
-                <section className="mb-32 grid md:grid-cols-2 gap-12 items-center">
+                <motion.section
+                    className="mb-32 grid md:grid-cols-2 gap-12 items-center"
+                    initial={{opacity: 0, y: 40}}
+                    whileInView={{opacity: 1, y: 0}}
+                    viewport={{once: true, amount: 0.4}}
+                    transition={{duration: 0.8, ease: 'easeOut'}}
+                >
                     <div>
                         <h2 className="text-4xl font-extrabold mb-4 tracking-tight text-gray-900">Unser Leitgedanke</h2>
                         <p className="text-xl font-semibold text-gray-800">
@@ -24,12 +30,14 @@ export default function HomePage() {
                         </p>
                     </div>
                     <p className="text-gray-700 text-lg leading-relaxed">
-                        Wir stehen für eine persönliche und engagierte Betreuung unserer Mandant:innen. Unsere Beratung ist
+                        Wir stehen für eine persönliche und engagierte Betreuung unserer Mandant:innen. Unsere Beratung
-                        fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt. Mit Nachdruck und Weitblick
+                        ist
+                        fundiert, zielgerichtet und individuell auf Ihre Bedürfnisse abgestimmt. Mit Nachdruck und
+                        Weitblick
                         setzen wir uns dafür ein, Ihre Interessen wirkungsvoll zu vertreten und nachhaltige Lösungen zu
                         erzielen.
                     </p>
-                </section>
+                </motion.section>
 
                 {/* Leistungen */}
                 <section className="text-center mb-32">
@@ -48,13 +56,13 @@ export default function HomePage() {
                                 title: 'Vertragsrecht',
                                 desc: 'Beratung & Gestaltung von Verträgen für Privatpersonen und Unternehmen.',
                             },
-                        ].map(({ title, desc }) => (
+                        ].map(({title, desc}) => (
                             <motion.div
                                 key={title}
-                                whileInView={{ opacity: 1, y: 0 }}
+                                whileInView={{opacity: 1, y: 0}}
-                                initial={{ opacity: 0, y: 30 }}
+                                initial={{opacity: 0, y: 30}}
-                                transition={{ duration: 0.4 }}
+                                transition={{duration: 0.4}}
-                                viewport={{ once: true }}
+                                viewport={{once: true}}
                                 className="bg-white p-8 rounded-2xl shadow-md border border-gray-100 hover:shadow-lg"
                             >
                                 <h3 className="text-2xl font-semibold mb-3 text-blue-800">{title}</h3>
@@ -69,7 +77,8 @@ export default function HomePage() {
                     <h2 className="text-4xl font-extrabold mb-8 tracking-tight">Über unsere Kanzlei</h2>
                     <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 für
+                        Unsere 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>
@@ -100,7 +109,8 @@ export default function HomePage() {
                         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">
+                        <button
+                            className="px-8 py-3 bg-blue-700 text-white rounded-xl hover:bg-blue-800 transition shadow">
                             Jetzt Termin sichern
                         </button>
                     </Link>

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

@@ -12,7 +12,7 @@ export default function Header() {
             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"
+            className="relative text-white h-screen overflow-hidden shadow-lg"
         >
             <Image
                 src="/images/hero.jpeg"