Tax Lawfirm Demo 1

lawfirm-demos/tax-lawfirm-demos/tax-lawfirm-demo-1/app/(root)/sections/HeroSection.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import Image from 'next/image'
+import {Button} from '@/components/ui/button'
+import {motion as m, Variants} from 'framer-motion'
+import Link from 'next/link'
+
+const containerVariants: Variants = {
+    hidden: {opacity: 0},
+    visible: {
+        opacity: 1,
+        transition: {
+            delay: 0.2,
+            staggerChildren: 0.4,
+            ease: 'easeOut',
+        },
+    },
+}
+
+const itemVariants: Variants = {
+    hidden: {opacity: 0, y: 40},
+    visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+            duration: 0.8,
+            ease: 'easeOut',
+        },
+    },
+}
+
+export function HeroSection() {
+    return (
+        <section className="relative h-[80vh] flex items-center text-white">
+            <Image
+                src="/images/hero.jpeg"
+                alt="Steuerkanzlei Hero"
+                fill
+                className="object-cover brightness-[0.4]"
+                priority
+            />
+            <m.div
+                className="z-10 text-left px-6 md:px-24 max-w-2xl"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                <m.h1
+                    className="text-4xl md:text-6xl font-bold leading-tight"
+                    variants={itemVariants}
+                >
+                    Ihr Partner für<br/>Steuerberatung & Finanzen
+                </m.h1>
+
+                <m.p
+                    className="mt-6 text-lg md:text-xl"
+                    variants={itemVariants}
+                >
+                    Persönlich. Kompetent. Transparent.
+                </m.p>
+
+                <m.div className="mt-8" variants={itemVariants}>
+                    <Link href="/kontakt">
+                        <Button size="lg" variant="secondary">
+                            Jetzt Kontakt aufnehmen
+                        </Button>
+                    </Link>
+                </m.div>
+            </m.div>
+        </section>
+    )
+}