fix(og): Satori needs display:flex on divs with multiple children

Node runtime's Satori is stricter than edge. Divs containing text + <br>
+ <span> were untyped and broke prerender. Replaced with flex column +
two <span> children. Verified locally with `next build` — all four OG
routes prerender cleanly now.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/opengraph-image.tsx

@@ -38,18 +38,19 @@ export default function OGImage() {
         <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
           <div
             style={{
+              display: "flex",
+              flexDirection: "column",
               color: "#ffffff",
               fontSize: "72px",
               fontWeight: "800",
               lineHeight: "1.0",
               letterSpacing: "-0.04em",
             }}
           >
-            Everything you need
-            <br />
+            <span>Everything you need</span>
             <span style={{ color: "#2563EB" }}>to ship with AI.</span>
           </div>
-          <div style={{ color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
+          <div style={{ display: "flex", color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
             Prompts · 10-step workflow · fixes · deep-dives · free &amp; open
           </div>
         </div>

src/app/vs-books/opengraph-image.tsx

@@ -27,12 +27,11 @@ export default function OGImage() {
         </div>
 
         <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-          <div style={{ color: "#ffffff", fontSize: "72px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
-            vibeprompt vs.
-            <br />
+          <div style={{ display: "flex", flexDirection: "column", color: "#ffffff", fontSize: "72px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
+            <span>vibeprompt vs.</span>
             <span style={{ color: "#2563EB" }}>the vibe coding books.</span>
           </div>
-          <div style={{ color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
+          <div style={{ display: "flex", color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
             How the free web-native option compares to Gene Kim & Yegge and Smykowski.
           </div>
         </div>

src/app/vs-tools/opengraph-image.tsx

@@ -27,12 +27,11 @@ export default function OGImage() {
         </div>
 
         <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-          <div style={{ color: "#ffffff", fontSize: "70px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
-            vibeprompt vs.
-            <br />
+          <div style={{ display: "flex", flexDirection: "column", color: "#ffffff", fontSize: "70px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
+            <span>vibeprompt vs.</span>
             <span style={{ color: "#2563EB" }}>the tools.</span>
           </div>
-          <div style={{ color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
+          <div style={{ display: "flex", color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
             Replit, Lovable, Bolt, Cursor, Claude Code, v0 — honest comparison.
           </div>
         </div>

src/app/workflow/opengraph-image.tsx

@@ -27,12 +27,11 @@ export default function OGImage() {
         </div>
 
         <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-          <div style={{ color: "#ffffff", fontSize: "72px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
-            From idea to shipped,
-            <br />
+          <div style={{ display: "flex", flexDirection: "column", color: "#ffffff", fontSize: "72px", fontWeight: "800", lineHeight: "1.0", letterSpacing: "-0.04em" }}>
+            <span>From idea to shipped,</span>
             <span style={{ color: "#2563EB" }}>in 10 steps.</span>
           </div>
-          <div style={{ color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
+          <div style={{ display: "flex", color: "#71717a", fontSize: "24px", fontWeight: "400" }}>
             Interactive checklist. Progress saves locally. Pick up where you left off.
           </div>
         </div>