62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import Link from "next/link";
|
|
import HeroVideo from "@/components/HeroVideo";
|
|
|
|
interface HeroSectionProps {
|
|
heroData: {
|
|
location: string;
|
|
welcome: string;
|
|
title: string;
|
|
subtitle: string;
|
|
exploreActivities: string;
|
|
scroll: string;
|
|
};
|
|
lang: string;
|
|
}
|
|
|
|
export default function HeroSection({ heroData, lang }: HeroSectionProps) {
|
|
return (
|
|
<section className="relative h-screen w-full flex items-center justify-center overflow-hidden">
|
|
<HeroVideo />
|
|
|
|
<div className="relative z-10 text-center px-4 max-w-5xl mx-auto">
|
|
<div className="animate-fade-up delay-100">
|
|
<span className="inline-block text-white/60 text-xs tracking-[0.35em] uppercase mb-8 font-light">
|
|
{heroData.location}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center gap-4 md:gap-6 mb-6 animate-fade-up delay-200">
|
|
<span
|
|
className="text-xs md:text-sm tracking-[0.4em] font-bold uppercase whitespace-nowrap text-white/90"
|
|
style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
|
|
>
|
|
{heroData.welcome}
|
|
</span>
|
|
<h1 className="font-sans font-black text-white leading-none tracking-tighter text-[clamp(4rem,10vw,10rem)] uppercase">
|
|
{heroData.title}
|
|
</h1>
|
|
</div>
|
|
|
|
<p className="animate-fade-up delay-500 text-white/75 text-base md:text-xl mb-10 font-light italic tracking-wide">
|
|
{heroData.subtitle}
|
|
</p>
|
|
|
|
<div className="animate-fade-up delay-600 flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Link
|
|
href={`/${lang}/aktiviteler`}
|
|
className="bg-white/10 backdrop-blur-sm border border-white/30 text-white px-10 py-4 rounded-full text-xs font-bold tracking-[0.15em] uppercase hover:bg-white/20 transition-colors w-full sm:w-auto text-center"
|
|
>
|
|
{heroData.exploreActivities}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-3">
|
|
<span className="text-white/40 text-[10px] tracking-[0.3em] uppercase">{heroData.scroll}</span>
|
|
<div className="w-px h-12 bg-gradient-to-b from-white/40 to-transparent animate-scroll-bounce" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|