60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
'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 mt-4"
|
|
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>
|
|
);
|
|
} |