Add RSVP events and Unsplash image support

src/app/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import {
@@ -125,14 +126,19 @@ export default async function LandingPage() {
       </header>
 
       <main>
-        <section
-          className="relative min-h-[calc(100svh-56px)] overflow-hidden bg-slate-950"
-          style={{
-            backgroundImage: `linear-gradient(90deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.68), rgba(15, 23, 42, 0.18)), url(${heroImage})`,
-            backgroundPosition: "center",
-            backgroundSize: "cover",
-          }}
-        >
+        <section className="relative min-h-[calc(100svh-56px)] overflow-hidden bg-slate-950">
+          <Image
+            src={heroImage}
+            alt=""
+            fill
+            preload
+            sizes="100vw"
+            className="object-cover object-center"
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 bg-[linear-gradient(90deg,rgba(2,6,23,0.92),rgba(15,23,42,0.72)_45%,rgba(15,23,42,0.35)_75%,rgba(15,23,42,0.55))] sm:bg-[linear-gradient(90deg,rgba(2,6,23,0.9),rgba(15,23,42,0.68),rgba(15,23,42,0.18))]"
+          />
           <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[#f8faf8] to-transparent" />
 
           <div className="relative z-10 mx-auto flex min-h-[calc(100svh-56px)] w-full max-w-7xl items-center px-5 pb-20 pt-28 sm:px-6">
@@ -226,7 +232,7 @@ export default async function LandingPage() {
                       )}
                     </div>
                     <div>
-                      <CardTitle className="text-xl tracking-tight">
+                      <CardTitle as="h3" className="text-xl tracking-tight">
                         {feature.title}
                       </CardTitle>
                       <CardDescription className="mt-3 text-sm leading-6 text-slate-600">
@@ -355,7 +361,7 @@ export default async function LandingPage() {
                 <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100">
                   <Mail className="h-5 w-5" />
                 </div>
-                <CardTitle className="text-2xl tracking-tight">
+                <CardTitle as="h3" className="text-2xl tracking-tight">
                   Anfrage senden
                 </CardTitle>
                 <CardDescription className="text-sm leading-6">