65 lines
2.4 KiB
TypeScript
65 lines
2.4 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 Hero() {
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, ease: 'easeOut' }}
|
|
className="relative text-white h-screen 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-2xl md:text-3xl font-light tracking-wide text-gray-200 mb-2"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
Rechtsanwälte
|
|
</motion.h1>
|
|
<motion.h2
|
|
className="text-4xl md:text-6xl font-extrabold text-white mb-6 leading-tight"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
>
|
|
Dr. Mustermann & Künstler
|
|
</motion.h2>
|
|
|
|
<motion.p
|
|
className="text-2xl md:text-3xl text-gray-200 font-medium"
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
>
|
|
<span className="text-gray-300">Ihr Experte für </span>
|
|
<span className="text-blue-400 font-semibold">
|
|
<Typewriter
|
|
words={services}
|
|
loop
|
|
cursor
|
|
cursorStyle="_"
|
|
typeSpeed={60}
|
|
deleteSpeed={40}
|
|
delaySpeed={1500}
|
|
/>
|
|
</span>
|
|
</motion.p>
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|