Frontend support for Hero block's optional portrait image

app/components/PageBlocks.tsx

@@ -40,15 +40,33 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
     // (/lebensuhr, /3x3-system, /ueber-mich) used for its own H1 before
     // this block existed — see HeroBlock.ts's own comment on why the
     // headline moved out of Pages.title and into here.
-    case "hero":
+    case "hero": {
+      const headline = (
+        <p
+          className={
+            block.image
+              ? "font-semibold text-[clamp(2rem,1.393rem+1.5vw,2.75rem)] text-text-primary leading-[1.15]"
+              : "font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
+          }
+          style={{ fontFamily: "var(--font-playfair)" }}
+        >
+          {block.headline}
+        </p>
+      );
       return (
         <div key={block.id} className="flex flex-col gap-4 items-start">
-          <p
-            className="font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
-            style={{ fontFamily: "var(--font-playfair)" }}
-          >
-            {block.headline}
-          </p>
+          {/* Optional round portrait beside the headline — e.g. /ueber-mich's
+              "Hallo, ich bin Björn." */}
+          {block.image ? (
+            <div className="flex items-center gap-5">
+              <div className="relative size-20 shrink-0 rounded-full overflow-hidden">
+                <Image alt="" src={block.image} fill sizes="80px" className="object-cover" />
+              </div>
+              {headline}
+            </div>
+          ) : (
+            headline
+          )}
           {block.subline && <p className="text-body text-text-muted">{block.subline}</p>}
           {block.ctaLabel && block.ctaHref && (
             <Link
@@ -60,6 +78,7 @@ export function renderPageBlockSync(block: PageBlock): React.ReactNode {
           )}
         </div>
       );
+    }
 
     case "richTextSection":
       return <RichText key={block.id} content={block.content} />;

app/lib/payload.ts

@@ -1293,7 +1293,7 @@ export async function getTrackingCodes(): Promise<TrackingCode[]> {
 // full page section, not an inline prose element.
 
 export type PageBlock =
-  | { blockType: "hero"; id: string; headline: string; subline: string | null; ctaLabel: string | null; ctaHref: string | null }
+  | { blockType: "hero"; id: string; headline: string; subline: string | null; image: string | null; ctaLabel: string | null; ctaHref: string | null }
   | { blockType: "richTextSection"; id: string; content: unknown }
   | { blockType: "stepRow"; id: string; items: { id: string; icon: string; title: string; subtitle: string | null; description: string }[] }
   | { blockType: "quote"; id: string; text: string; label: string | null }
@@ -1318,7 +1318,7 @@ export type Page = {
 type PayloadPageImageField = { url?: string | null } | number | null;
 
 type PayloadPageBlock =
-  | { blockType: "hero"; id: string; headline: string; subline?: string | null; ctaLabel?: string | null; ctaHref?: string | null }
+  | { blockType: "hero"; id: string; headline: string; subline?: string | null; image?: PayloadPageImageField; ctaLabel?: string | null; ctaHref?: string | null }
   | { blockType: "richTextSection"; id: string; content: unknown }
   | { blockType: "stepRow"; id: string; items: { id: string; icon: string; title: string; subtitle?: string | null; description: string }[] }
   | { blockType: "quote"; id: string; text: string; label?: string | null }
@@ -1366,6 +1366,7 @@ function mapPayloadPageBlock(block: PayloadPageBlock): PageBlock {
         id: block.id,
         headline: block.headline,
         subline: block.subline ?? null,
+        image: mapPayloadPageImage(block.image ?? null),
         ctaLabel: block.ctaLabel ?? null,
         ctaHref: block.ctaHref ?? null,
       };