| 51 | |
| 52 | /** Shared dynamic OG image for landing catalog pages (models, integrations). */ |
| 53 | export async function createLandingOgImage({ |
| 54 | eyebrow, |
| 55 | title, |
| 56 | subtitle, |
| 57 | pills = [], |
| 58 | domainLabel = 'sim.ai', |
| 59 | }: LandingOgImageProps) { |
| 60 | const text = `${eyebrow}${title}${subtitle}${pills.join('')}${domainLabel}` |
| 61 | const [regularFontData, mediumFontData] = await Promise.all([ |
| 62 | loadGoogleFont('Geist', '400', text), |
| 63 | loadGoogleFont('Geist', '500', text), |
| 64 | ]) |
| 65 | |
| 66 | return new ImageResponse( |
| 67 | <div |
| 68 | style={{ |
| 69 | height: '100%', |
| 70 | width: '100%', |
| 71 | display: 'flex', |
| 72 | flexDirection: 'column', |
| 73 | justifyContent: 'space-between', |
| 74 | padding: '56px 64px', |
| 75 | background: '#121212', |
| 76 | fontFamily: 'Geist', |
| 77 | }} |
| 78 | > |
| 79 | <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}> |
| 80 | <span |
| 81 | style={{ |
| 82 | fontSize: 22, |
| 83 | fontWeight: 500, |
| 84 | color: '#71717a', |
| 85 | letterSpacing: '-0.01em', |
| 86 | }} |
| 87 | > |
| 88 | {eyebrow} |
| 89 | </span> |
| 90 | |
| 91 | <span |
| 92 | style={{ |
| 93 | fontSize: getTitleFontSize(title), |
| 94 | fontWeight: 500, |
| 95 | color: '#fafafa', |
| 96 | lineHeight: 1.08, |
| 97 | letterSpacing: '-0.03em', |
| 98 | maxWidth: '1000px', |
| 99 | }} |
| 100 | > |
| 101 | {title} |
| 102 | </span> |
| 103 | |
| 104 | <span |
| 105 | style={{ |
| 106 | fontSize: 28, |
| 107 | fontWeight: 400, |
| 108 | color: '#a1a1aa', |
| 109 | lineHeight: 1.35, |
| 110 | maxWidth: '980px', |