flatrender/src/app/opengraph-image.tsx

import { ImageResponse } from "next/og";

export const runtime = "edge";

export const alt = "FlatRender — AI Video & Image Maker";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function OpenGraphImage() {
  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          justifyContent: "center",
          background:
            "linear-gradient(135deg, #1e3a8a 0%, #2563EB 55%, #4f46e5 100%)",
          padding: "80px 90px",
          fontFamily: "system-ui, -apple-system, sans-serif",
        }}
      >
        {/* Logo mark row */}
        <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
          {/* Icon */}
          <div
            style={{
              width: 56,
              height: 56,
              borderRadius: 12,
              background: "rgba(255,255,255,0.15)",
              border: "1.5px solid rgba(255,255,255,0.3)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            {/* Play triangle */}
            <div
              style={{
                width: 0,
                height: 0,
                borderTop: "11px solid transparent",
                borderBottom: "11px solid transparent",
                borderLeft: "18px solid white",
                marginLeft: 4,
              }}
            />
          </div>
          <span
            style={{ fontSize: 28, fontWeight: 700, color: "white", letterSpacing: -0.5 }}
          >
            FlatRender
          </span>
        </div>

        {/* Main headline */}
        <div
          style={{
            fontSize: 62,
            fontWeight: 800,
            color: "white",
            lineHeight: 1.08,
            maxWidth: 900,
            letterSpacing: -1.5,
          }}
        >
          Create pro videos &amp; images with AI
        </div>

        {/* Subtitle */}
        <div
          style={{
            fontSize: 26,
            color: "rgba(255,255,255,0.82)",
            marginTop: 28,
            maxWidth: 760,
            lineHeight: 1.4,
          }}
        >
          Templates, editors, and one-click export for every channel
        </div>

        {/* Bottom pill tags */}
        <div style={{ display: "flex", gap: 12, marginTop: 48 }}>
          {["Video Maker", "Image Maker", "AI Templates", "One-click Export"].map(
            (tag) => (
              <div
                key={tag}
                style={{
                  background: "rgba(255,255,255,0.15)",
                  border: "1px solid rgba(255,255,255,0.25)",
                  borderRadius: 100,
                  padding: "8px 20px",
                  fontSize: 16,
                  fontWeight: 600,
                  color: "rgba(255,255,255,0.9)",
                }}
              >
                {tag}
              </div>
            )
          )}
        </div>
      </div>
    ),
    { ...size }
  );
}