feat: initial draft and components creation

components/invite/hero-section.tsx

@@ -0,0 +1,27 @@
+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-layout:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
+      <Image className="hidden object-cover wedding-layout: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-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop wedding-layout: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>
+  )
+}