Initialisieren

2026-07-23 21:59:15 +02:00
commit 2d961adad4
76 changed files with 14318 additions and 0 deletions
--- a/lib/og-image.tsx
+++ b/lib/og-image.tsx
@@ -0,0 +1,78 @@
+export const ogImageSize = { width: 1200, height: 630 };
+
+type OgImageContentProps = {
+  visualSrc: string;
+};
+
+/** Gemeinsames Layout für Open-Graph- und X/Twitter-Vorschauen. */
+export function OgImageContent({ visualSrc }: OgImageContentProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: "#f7f4ed",
+        fontFamily: "Arial, sans-serif",
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element -- next/image is unsupported inside next/og's ImageResponse (Satori) rendering */}
+      <img
+        src={visualSrc}
+        alt=""
+        width={1200}
+        height={630}
+        style={{ display: "flex", position: "absolute", inset: 0, width: "100%", height: "100%" }}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          position: "absolute",
+          inset: 0,
+          width: 705,
+          backgroundImage: "linear-gradient(90deg, rgba(247,244,237,0.98) 0%, rgba(247,244,237,0.92) 78%, rgba(247,244,237,0) 100%)",
+        }}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          position: "relative",
+          flexDirection: "column",
+          width: 650,
+          padding: "63px 0 58px 76px",
+          color: "#111412",
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", fontSize: 40, fontWeight: 700, letterSpacing: -1.5 }}>
+          <span>Entscheid</span>
+          <span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400 }}>omat</span>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", marginTop: 78, fontSize: 66, lineHeight: 1.04, fontWeight: 700, letterSpacing: -3.2 }}>
+          <span>Lass den</span>
+          <span>
+            <span style={{ color: "#0d7a57", fontFamily: "Georgia, serif", fontStyle: "italic", fontWeight: 400, marginRight: 16 }}>Zufall</span>entscheiden.
+          </span>
+        </div>
+
+        <div style={{ display: "flex", marginTop: 27, color: "#4c5c54", fontSize: 24, lineHeight: 1.35 }}>
+          Münze werfen, Glücksrad drehen, würfeln &amp; mehr.
+        </div>
+
+        <div style={{ display: "flex", marginTop: "auto", alignItems: "center" }}>
+          <div style={{ display: "flex", padding: "12px 20px", borderRadius: 999, backgroundColor: "#0d7a57", color: "#ffffff", fontSize: 18, fontWeight: 700, letterSpacing: 1.2 }}>
+            7 TOOLS · KOSTENLOS · OHNE ANMELDUNG
+          </div>
+        </div>
+      </div>
+
+      <div style={{ display: "flex", position: "absolute", right: 540, bottom: 34, color: "#405249", fontSize: 16, fontWeight: 700, letterSpacing: 0.4 }}>
+        entscheidomat.com
+      </div>
+    </div>
+  );
+}