first commit

Made-with: Cursor

frontend/app/og/route.tsx

@@ -0,0 +1,152 @@
+import { ImageResponse } from "next/og";
+import { type NextRequest } from "next/server";
+
+export const runtime = "edge";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const title = searchParams.get("title") || "Belgian Bitcoin Embassy";
+  const type = searchParams.get("type") || "default";
+  const subtitle =
+    searchParams.get("subtitle") ||
+    (type === "blog"
+      ? "Blog"
+      : type === "event"
+        ? "Event"
+        : "Bitcoin Meetups & Education in Belgium");
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%)",
+          fontFamily: "system-ui, sans-serif",
+          padding: "60px 80px",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: "4px",
+            background: "#F7931A",
+          }}
+        />
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "24px",
+            maxWidth: "1000px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "16px",
+              marginBottom: "8px",
+            }}
+          >
+            <div
+              style={{
+                width: "48px",
+                height: "48px",
+                borderRadius: "12px",
+                background: "#F7931A",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "28px",
+                fontWeight: 700,
+                color: "#fff",
+              }}
+            >
+              B
+            </div>
+            <span
+              style={{
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#F7931A",
+                letterSpacing: "4px",
+                textTransform: "uppercase",
+              }}
+            >
+              {subtitle}
+            </span>
+          </div>
+
+          <h1
+            style={{
+              fontSize: title.length > 60 ? "40px" : title.length > 40 ? "48px" : "56px",
+              fontWeight: 800,
+              color: "#ffffff",
+              textAlign: "center",
+              lineHeight: 1.15,
+              margin: 0,
+              letterSpacing: "-1px",
+            }}
+          >
+            {title}
+          </h1>
+
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              marginTop: "16px",
+            }}
+          >
+            <span
+              style={{
+                fontSize: "16px",
+                color: "#666",
+                fontWeight: 500,
+              }}
+            >
+              belgianbitcoinembassy.org
+            </span>
+          </div>
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            bottom: "40px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+          }}
+        >
+          <span
+            style={{
+              fontSize: "13px",
+              fontWeight: 500,
+              color: "#F7931A",
+              letterSpacing: "4px",
+              textTransform: "uppercase",
+            }}
+          >
+            No hype, just signal
+          </span>
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}