73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|