SPB Git forge

spb/fetcha

Public
11commits 1branches 0releases
1.5 MBsize
maindefault branch
16 days agolast push
TypeScript 97.5% SQL 1.4% Python 0.8%
2.9 KB · 64 lines tsx
Raw Blame History
1import { ImageResponse } from "next/og";23export const alt = "Fetcha — The web, accessible through one API.";4export const size = { width: 1200, height: 630 };5export const contentType = "image/png";67/** Dynamic Open Graph image. System fonts only so it is edge-safe and has no font fetches. */8export default function OpenGraphImage() {9  return new ImageResponse(10    (11      <div12        style={{13          width: "100%",14          height: "100%",15          display: "flex",16          flexDirection: "column",17          justifyContent: "space-between",18          padding: 72,19          background: "#0a0d14",20          color: "#eef1f6",21          fontFamily: "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",22          position: "relative",23        }}24      >25        {/* subtle grid */}26        <div27          style={{28            position: "absolute",29            inset: 0,30            backgroundImage: "linear-gradient(to right, rgba(31,38,51,0.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(31,38,51,0.9) 1px, transparent 1px)",31            backgroundSize: "48px 48px",32            opacity: 0.7,33          }}34        />35        {/* wordmark */}36        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>37          <div style={{ width: 56, height: 56, borderRadius: 14, background: "#eef1f6", display: "flex", alignItems: "center", justifyContent: "center" }}>38            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">39              <path d="M6 12h4.5m0 0 3-4.5H18m-7.5 4.5 3 4.5H18" stroke="#0a0d14" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" />40              <circle cx="6" cy="12" r="1.6" fill="#5b8cff" />41            </svg>42          </div>43          <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: "-0.03em" }}>fetcha</div>44        </div>4546        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>47          <div style={{ fontSize: 30, fontWeight: 500, color: "#5b8cff", letterSpacing: "0.02em", textTransform: "uppercase" }}>Intelligent web access infrastructure</div>48          <div style={{ fontSize: 76, fontWeight: 600, lineHeight: 1.04, letterSpacing: "-0.035em", maxWidth: 1000 }}>The web, accessible through one API.</div>49          <div style={{ fontSize: 28, color: "#a6afbf", lineHeight: 1.35, maxWidth: 960 }}>One endpoint. Smart routing across proxy networks, sticky sessions and geo targeting.</div>50        </div>5152        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 24, color: "#6b7484" }}>53          <div style={{ display: "flex", alignItems: "center", gap: 14, fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }}>54            <span style={{ color: "#5b8cff", fontWeight: 600 }}>POST</span>55            <span>https://www.fetcha.co/v1/fetch</span>56          </div>57          <div>www.fetcha.co</div>58        </div>59      </div>60    ),61    { ...size },62  );63}64