82 lines
2.9 KiB
TypeScript
82 lines
2.9 KiB
TypeScript
 
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
import Image from 'next/image';
|
||
|
|
|
||
|
|
export default function Hero() {
|
||
|
|
const [scrollY, setScrollY] = useState(0);
|
||
|
|
const [isMobile, setIsMobile] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const handleScroll = () => setScrollY(window.scrollY);
|
||
|
|
const handleResize = () => setIsMobile(window.innerWidth < 768);
|
||
|
|
|
||
|
|
handleResize(); // Initial check
|
||
|
|
window.addEventListener('scroll', handleScroll);
|
||
|
|
window.addEventListener('resize', handleResize);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('scroll', handleScroll);
|
||
|
|
window.removeEventListener('resize', handleResize);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
id="hero"
|
||
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden"
|
||
|
|
>
|
||
|
|
{/* Background Image mit Next.js Image */}
|
||
|
|
<div className="absolute inset-0 w-full h-full">
|
||
|
|
<Image
|
||
|
|
src={isMobile ? "/img/bg-ich-mobile.jpg" : "/img/bg-ich-2.png"}
|
||
|
|
alt="Hero Background"
|
||
|
|
fill
|
||
|
|
priority
|
||
|
|
quality={90}
|
||
|
|
className="object-cover object-center"
|
||
|
|
style={{
|
||
|
|
transform: `translateY(${scrollY * 0.5}px)`,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{/* Overlay für bessere Lesbarkeit */}
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-900/80 via-slate-800/70 to-slate-900/80" />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="relative z-10 text-center px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="space-y-6 animate-fade-in">
|
||
|
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white tracking-wider drop-shadow-2xl">
|
||
|
|
be<span className="text-primary">Werbung</span>
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<p className="text-xl sm:text-2xl text-slate-300 max-w-2xl mx-auto drop-shadow-lg">
|
||
|
|
Die Bewerberwebseite von <br />
|
||
|
|
<em className="text-primary font-semibold">Sebastian Fröhlich</em>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Scroll indicator */}
|
||
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
|
||
|
|
<button
|
||
|
|
onClick={() => document.getElementById('intro')?.scrollIntoView({ behavior: 'smooth' })}
|
||
|
|
className="w-12 h-12 rounded-full bg-primary/20 backdrop-blur-sm border-2 border-primary flex items-center justify-center hover:bg-primary/30 transition-all group"
|
||
|
|
aria-label="Scroll nach unten"
|
||
|
|
>
|
||
|
|
<svg
|
||
|
|
className="w-6 h-6 text-primary group-hover:translate-y-1 transition-transform"
|
||
|
|
fill="none"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth="2"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
>
|
||
|
|
<path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|