`app/opengraph-image.tsx`

173 lines
import { ImageResponse } from 'next/og';

export const alt = 'Grant — Every grant, ranked by fit.';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default function OgImage() {
  return new ImageResponse(
    (
      <div
        style={{
          width: '1200px',
          height: '630px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#f4f7f5',
          position: 'relative',
        }}
      >
        {/* Emerald accent bar top */}
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: '8px',
            backgroundColor: '#047857',
            display: 'flex',
          }}
        />

        {/* Wordmark */}
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '16px',
            marginBottom: '32px',
          }}
        >
          {/* Icon mark */}
          <div
            style={{
              width: '72px',
              height: '72px',
              borderRadius: '16px',
              backgroundColor: '#047857',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <div
              style={{
                color: '#ffffff',
                fontSize: '40px',
                fontWeight: 800,
                fontFamily: 'sans-serif',
                display: 'flex',
              }}
            >
              G
            </div>
          </div>

          <div
            style={{
              fontSize: '72px',
              fontWeight: 800,
              color: '#047857',
              fontFamily: 'sans-serif',
              letterSpacing: '-2px',
              display: 'flex',
            }}
          >
            Grant
          </div>
        </div>

        {/* Tagline */}
        <div
          style={{
            fontSize: '32px',
            fontWeight: 600,
            color: '#1f2937',
            fontFamily: 'sans-serif',
            textAlign: 'center',
            marginBottom: '20px',
            display: 'flex',
          }}
        >
          Every grant, ranked by fit.
        </div>

        {/* Sub-tagline */}
        <div
          style={{
            fontSize: '22px',
            fontWeight: 400,
            color: '#6b7280',
            fontFamily: 'sans-serif',
            textAlign: 'center',
            maxWidth: '800px',
            lineHeight: 1.5,
            display: 'flex',
          }}
        >
          Federal, foundation, corporate, and local grants — one fit-scored feed for your mission.
        </div>

        {/* Pill badges */}
        <div
          style={{
            display: 'flex',
            gap: '12px',
            marginTop: '48px',
          }}
        >
          {['Federal', 'Foundation', 'Corporate', 'Local'].map((label) => (
            <div
              key={label}
              style={{
                backgroundColor: '#10b981',
                color: '#ffffff',
                fontSize: '18px',
                fontWeight: 600,
                fontFamily: 'sans-serif',
                padding: '8px 20px',
                borderRadius: '9999px',
                display: 'flex',
              }}
            >
              {label}
            </div>
          ))}
        </div>

        {/* Emerald accent bar bottom */}
        <div
          style={{
            position: 'absolute',
            bottom: 0,
            left: 0,
            right: 0,
            height: '4px',
            backgroundColor: '#10b981',
            display: 'flex',
          }}
        />

        {/* Domain */}
        <div
          style={{
            position: 'absolute',
            bottom: '20px',
            right: '40px',
            fontSize: '16px',
            color: '#9ca3af',
            fontFamily: 'sans-serif',
            display: 'flex',
          }}
        >
          grant.agentabrams.com
        </div>
      </div>
    ),
    { ...size }
  );
}