44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import {motion} from "framer-motion";
|
|
import Image from "next/image";
|
|
|
|
export default function Hero() {
|
|
return (
|
|
<section className="relative h-[80vh] flex items-center justify-center text-center px-4 overflow-hidden">
|
|
{/* Hintergrundbild */}
|
|
<Image
|
|
src="/images/hero.jpeg" // dein hochgeladenes Bild
|
|
alt="Hintergrundbild"
|
|
fill
|
|
priority
|
|
className="object-cover object-center z-0"
|
|
/>
|
|
|
|
{/* Dunkles Overlay für bessere Lesbarkeit */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-black/70 to-black/80 z-10"/>
|
|
|
|
{/* Text-Content */}
|
|
<div className="relative z-20 max-w-3xl space-y-6 text-white px-4">
|
|
<motion.h1
|
|
className="text-4xl md:text-6xl font-extrabold drop-shadow-[0_2px_4px_rgba(0,0,0,0.6)]"
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.6}}
|
|
>
|
|
Rechtsanwalt <span className="text-white">Max Mustermann</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg md:text-xl text-white/90 drop-shadow-[0_1px_3px_rgba(0,0,0,0.6)]"
|
|
initial={{opacity: 0}}
|
|
animate={{opacity: 1}}
|
|
transition={{delay: 0.2, duration: 0.6}}
|
|
>
|
|
Ihr zuverlässiger Partner für Zivilrecht, Vertragsrecht und mehr
|
|
</motion.p>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|