Repository Public
1import { ImageResponse } from "next/og";2import { DESCRIPTION, SITE_NAME, TAGLINE } from "@/lib/site";34export const runtime = "nodejs";5export const alt = `${SITE_NAME} — ${TAGLINE}`;6export const size = { width: 1200, height: 630 };7export const contentType = "image/png";89/** Social preview ("wallpaper" when the URL is shared): brand mark + wordmark + tagline on the dark plate. */10export default function OpengraphImage() {11 return new ImageResponse(12 <div13 style={{14 width: "100%",15 height: "100%",16 display: "flex",17 flexDirection: "column",18 justifyContent: "space-between",19 padding: 64,20 background: "linear-gradient(135deg, #0c0f14 0%, #121826 55%, #0c0f14 100%)",21 color: "#f5f6f4",22 fontFamily: "sans-serif",23 }}24 >25 {/* meridian/parallel grid backdrop */}26 <svg width="1200" height="630" viewBox="0 0 1200 630" style={{ position: "absolute", top: 0, left: 0, opacity: 0.16 }}>27 <g fill="none" stroke="#e8ebe6" strokeWidth="1.2">28 <circle cx="920" cy="330" r="260" />29 <ellipse cx="920" cy="330" rx="110" ry="260" />30 <path d="M660 330H1180" />31 <path d="M700 196Q920 252 1140 196" />32 <path d="M700 464Q920 408 1140 464" />33 </g>34 <path d="M680 480 800 372 888 424 1004 236 1092 282 1190 132" fill="none" stroke="#5b8bff" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" />35 <circle cx="1190" cy="132" r="14" fill="#7fe0d6" />36 </svg>37 <div style={{ display: "flex", alignItems: "center", gap: 28 }}>38 <svg width="112" height="112" viewBox="0 0 32 32">39 <rect x="1" y="1" width="30" height="30" rx="8" fill="#0c0f14" stroke="#2a3140" strokeWidth="0.6" />40 <g fill="none" stroke="#e8ebe6" strokeWidth="1.15" strokeLinecap="round" opacity="0.78">41 <circle cx="16" cy="16.5" r="10.2" />42 <ellipse cx="16" cy="16.5" rx="4.4" ry="10.2" />43 <path d="M5.8 16.5H26.2" />44 <path d="M7.4 11.2Q16 13.4 24.6 11.2" />45 <path d="M7.4 21.8Q16 19.6 24.6 21.8" />46 </g>47 <path d="M6.6 22.4 11.2 18.2 14.6 20.2 19.2 12.8 22.6 14.6 26.6 8.6" fill="none" stroke="#0c0f14" strokeWidth="4.2" strokeLinecap="round" strokeLinejoin="round" />48 <path d="M6.6 22.4 11.2 18.2 14.6 20.2 19.2 12.8 22.6 14.6 26.6 8.6" fill="none" stroke="#5b8bff" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round" />49 <circle cx="26.6" cy="8.6" r="3.2" fill="#7fe0d6" opacity="0.22" />50 <circle cx="26.6" cy="8.6" r="1.75" fill="#e8ebe6" />51 </svg>52 <div style={{ display: "flex", flexDirection: "column" }}>53 <div style={{ fontSize: 64, fontWeight: 700, letterSpacing: -2, display: "flex", gap: 16 }}>54 <span>Market</span>55 <span style={{ color: "#a3aab5", fontWeight: 500 }}>Atlas</span>56 </div>57 <div style={{ fontSize: 26, color: "#a3aab5", letterSpacing: 3, textTransform: "uppercase", marginTop: 6 }}>{TAGLINE}</div>58 </div>59 </div>60 <div style={{ display: "flex", flexDirection: "column", gap: 22, maxWidth: 780 }}>61 <div style={{ fontSize: 28, lineHeight: 1.35, color: "#d5d9d2" }}>{DESCRIPTION}</div>62 <div style={{ display: "flex", gap: 14, fontSize: 20, color: "#7fe0d6" }}>63 <span style={{ padding: "8px 16px", border: "1px solid #2a3140", borderRadius: 999, background: "rgba(12,15,20,0.6)" }}>Live · multi-source consensus</span>64 <span style={{ padding: "8px 16px", border: "1px solid #2a3140", borderRadius: 999, background: "rgba(12,15,20,0.6)", color: "#a3aab5" }}>Provenance on every price</span>65 <span style={{ padding: "8px 16px", border: "1px solid #2a3140", borderRadius: 999, background: "rgba(12,15,20,0.6)", color: "#a3aab5" }}>www.market-atlas.co</span>66 </div>67 </div>68 </div>,69 { ...size },70 );71}72