79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="-mt-[72px] md:-mt-[80px] relative min-h-[100vh] flex flex-col overflow-hidden">
|
|
{/* Full-bleed background image */}
|
|
<div className="absolute inset-0 z-0">
|
|
<Image
|
|
src="/images/b6ca2c_a39e632a73b944dbbd6887cdb627223d~mv2.avif"
|
|
alt="Nebel über dem Spreewald"
|
|
fill
|
|
priority
|
|
sizes="100vw"
|
|
className="object-cover"
|
|
/>
|
|
{/* Base dark veil */}
|
|
<div className="absolute inset-0 bg-ink/40" />
|
|
{/* Strong bottom-to-top gradient for text area */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-ink/85 via-ink/50 to-ink/15" />
|
|
{/* Left-side reinforcement for text column */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-ink/50 via-ink/20 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content — pinned to bottom */}
|
|
<div className="relative z-10 mt-auto container pb-16 md:pb-24 pt-32 md:pt-40">
|
|
<div className="max-w-4xl">
|
|
<div className="eyebrow !text-parchment/60 mb-6">Ferienwohnungen · Spreewald</div>
|
|
<h1 className="font-display text-display-xl text-parchment leading-[0.96]" style={{ textShadow: "0 2px 24px rgba(28,38,32,0.5)" }}>
|
|
Hier hat der<br />
|
|
Morgen noch{" "}
|
|
<span className="italic text-moss-300">Nebel</span>,<br />
|
|
und die Nacht<br />
|
|
noch{" "}
|
|
<span className="italic text-moss-300">Sterne</span>.
|
|
</h1>
|
|
|
|
<div className="mt-10 flex flex-col sm:flex-row gap-3">
|
|
<Link
|
|
href="#wohnungen"
|
|
className="inline-flex items-center justify-center gap-2 bg-parchment text-ink px-7 py-3.5 rounded-full text-sm font-medium hover:bg-cream transition-colors"
|
|
>
|
|
Die Wohnungen ansehen
|
|
<span aria-hidden>↓</span>
|
|
</Link>
|
|
<Link
|
|
href="/anfrage"
|
|
className="inline-flex items-center justify-center gap-2 border border-parchment/30 text-parchment px-7 py-3.5 rounded-full text-sm hover:border-parchment/60 hover:bg-parchment/10 transition"
|
|
>
|
|
Anfrage senden
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trust signals */}
|
|
<div className="mt-10 pt-8 border-t border-parchment/15 flex flex-wrap gap-6 text-xs text-parchment/50">
|
|
<span className="flex items-center gap-2">
|
|
<span className="h-1 w-1 rounded-full bg-moss-400 inline-block" aria-hidden />
|
|
Keine Provision
|
|
</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="h-1 w-1 rounded-full bg-moss-400 inline-block" aria-hidden />
|
|
Direkt beim Gastgeber
|
|
</span>
|
|
<span className="flex items-center gap-2">
|
|
<span className="h-1 w-1 rounded-full bg-moss-400 inline-block" aria-hidden />
|
|
Antwort in 24 Stunden
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom scroll hint */}
|
|
<div className="relative z-10 container pb-8 flex items-center justify-end">
|
|
<span className="text-xs text-parchment/35 tracking-[0.2em] uppercase">Scrollen</span>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|