`src/app/opengraph-image.tsx`

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

export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const alt = "Drops — Daily trademark & domain opportunities";

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: "80px",
          background: "#f7f4ec",
          color: "#0b0b0c",
          fontFamily: "Georgia, serif",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ fontSize: 24, letterSpacing: 8, color: "#b38f4e", textTransform: "uppercase" }}>
            DROPS
          </div>
          <div style={{ fontSize: 86, fontWeight: 700, lineHeight: 1.05, marginTop: 24 }}>
            Abandoned trademarks,
          </div>
          <div style={{ fontSize: 86, fontWeight: 700, lineHeight: 1.05 }}>
            public-domain works,
          </div>
          <div style={{ fontSize: 86, fontWeight: 700, lineHeight: 1.05, color: "#b38f4e" }}>
            daily in your inbox.
          </div>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div style={{ fontSize: 30, color: "#35312a" }}>
            Free trial · $29/mo Standard · $99/mo Pro
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: 24, height: 24, borderRadius: 12, background: "#b38f4e",
            }} />
            <div style={{ fontSize: 30, fontWeight: 600 }}>drops.agentabrams.com</div>
          </div>
        </div>
      </div>
    ),
    size
  );
}