28 lines
1.7 KiB
TypeScript
28 lines
1.7 KiB
TypeScript
import Image from "next/image"
|
|
import Link from "next/link"
|
|
|
|
import { SiteHeader } from "@/components/invite/site-header"
|
|
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
|
|
|
export function HeroSection({ content }: { content: InvitePageContent["hero"] }) {
|
|
return (
|
|
<section id="top" className="relative isolate flex min-h-screen items-end overflow-hidden bg-wedding-ink text-wedding-white">
|
|
<Image className="object-cover wedding-lg:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
|
<Image className="hidden object-cover wedding-lg:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
|
<div className="absolute inset-0 bg-gradient-to-r from-wedding-ink/75 via-wedding-ink/30 to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-wedding-ink/65 to-transparent" />
|
|
<SiteHeader />
|
|
<div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop wedding-lg:pb-24">
|
|
<p className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label">{content.eyebrow}</p>
|
|
<h1 className="wedding-display-heading mt-6 max-w-5xl text-wedding-hero leading-none text-wedding-white">
|
|
{content.title}
|
|
</h1>
|
|
<p className="mt-5 font-wedding-display text-wedding-medium italic">{content.subtitle}</p>
|
|
<Link className="mt-14 inline-flex flex-col items-center gap-2 font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label" href="#introduction">
|
|
Scroll <span aria-hidden="true">↓</span>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|