TypeScript 61.9%
HTML 37.2%
SQL 0.7%
1import { ImageResponse } from 'next/og';2import { ogMark } from '@/components/layout/logo';34export const runtime = 'nodejs';5export const alt = 'RareIndex — The Global Market for Collectibles';6export const size = { width: 1200, height: 630 };7export const contentType = 'image/png';89/** Site-wide share card (Open Graph / Twitter): mark, wordmark, tagline and an index line. Static — no database. */10export default function Image() {11 return new ImageResponse(12 (13 <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 72, background: 'linear-gradient(135deg, #0B0F19 0%, #10182A 60%, #0B0F19 100%)', color: '#F4F4F2', fontFamily: 'sans-serif', position: 'relative' }}>14 {/* faint index line across the card */}15 <svg width="1200" height="630" viewBox="0 0 1200 630" style={{ position: 'absolute', top: 0, left: 0 }}>16 <path d="M0 470 L140 430 L260 455 L380 380 L520 400 L640 320 L780 340 L900 250 L1040 270 L1200 170" fill="none" stroke="#3CCB82" strokeOpacity="0.28" strokeWidth="4" strokeLinejoin="round" strokeLinecap="round" />17 <path d="M0 470 L140 430 L260 455 L380 380 L520 400 L640 320 L780 340 L900 250 L1040 270 L1200 170 L1200 630 L0 630 Z" fill="#3CCB82" fillOpacity="0.05" />18 <g stroke="#FFFFFF" strokeOpacity="0.05">19 <path d="M0 158H1200M0 316H1200M0 474H1200" />20 </g>21 </svg>22 <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>23 {ogMark(120)}24 <div style={{ display: 'flex', flexDirection: 'column' }}>25 <div style={{ display: 'flex', fontSize: 84, fontWeight: 700, letterSpacing: -3, lineHeight: 1 }}>26 <span>Rare</span>27 <span style={{ color: '#D9AE5F' }}>Index</span>28 </div>29 <div style={{ marginTop: 10, fontSize: 26, letterSpacing: 6, color: '#9AA0AB', textTransform: 'uppercase' }}>The Global Market for Collectibles</div>30 </div>31 </div>32 <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>33 <div style={{ fontSize: 34, lineHeight: 1.3, color: '#E6E6E2', maxWidth: 980 }}>Prices, verified sales, live asks, rarity, liquidity and the RARE indices — across marketplaces and auction houses, with confidence on every number.</div>34 <div style={{ display: 'flex', gap: 14, fontSize: 22, color: '#9AA0AB' }}>35 {['RareIndex Valuation', 'Liquidity Score', 'Market Depth', 'Auction Intelligence', 'Screener'].map((t) => (36 <span key={t} style={{ border: '1px solid rgba(255,255,255,0.14)', borderRadius: 8, padding: '6px 14px' }}>37 {t}38 </span>39 ))}40 </div>41 </div>42 <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 24, color: '#6F7580' }}>43 <span>www.rareindex.io</span>44 <span>Model estimates, not advice · Hosted on MacLustr</span>45 </div>46 </div>47 ),48 { ...size },49 );50}51