`apps/web/app/opengraph-image.tsx`

59 lines
import { ImageResponse } from "next/og";

export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const alt = "Unofficial 90210 Guide";

// Dynamically-generated, ORIGINAL branded social card — no show imagery.
export default function OG() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: "70px",
          background:
            "linear-gradient(160deg, #2b1e3a 0%, #7b3f6e 52%, #d9668a 76%, #ff9a63 100%)",
          color: "#fff6ec",
          fontFamily: "serif",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 16,
            fontSize: 26,
            letterSpacing: 6,
            textTransform: "uppercase",
            color: "#ffd27a",
            fontWeight: 700,
          }}
        >
          <div
            style={{
              width: 34,
              height: 34,
              borderRadius: 999,
              background: "#c19a3e",
              display: "flex",
            }}
          />
          Unofficial Fan Guide
        </div>
        <div style={{ fontSize: 84, fontWeight: 700, marginTop: 20, lineHeight: 1.05 }}>
          Every episode of 90210, recapped.
        </div>
        <div style={{ fontSize: 30, marginTop: 22, color: "rgba(255,246,236,0.9)" }}>
          Original recaps · cast profiles · spoiler guard
        </div>
      </div>
    ),
    { ...size }
  );
}