feat(og): adapt premium industrial style for OG images

apps/web/src/components/OGImageTemplate.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+
+interface OGImageTemplateProps {
+  title: string;
+  description?: string;
+  label?: string;
+}
+
+export function OGImageTemplate({
+  title,
+  description,
+  label,
+}: OGImageTemplateProps) {
+  const accentBlue = "#3b82f6";
+  const slateDark = "#0f172a";
+  const slateText = "#1e293b";
+  const slateLight = "#64748b";
+
+  const containerStyle: React.CSSProperties = {
+    height: "100%",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    backgroundColor: "#ffffff",
+    padding: "80px",
+    position: "relative",
+    fontFamily: "Inter",
+  };
+
+  return (
+    <div style={containerStyle}>
+      {/* Background Technographic Accent */}
+      <div
+        style={{
+          position: "absolute",
+          top: "-100px",
+          right: "-100px",
+          width: "500px",
+          height: "500px",
+          borderRadius: "250px",
+          backgroundColor: "#f1f5f9",
+          display: "flex",
+        }}
+      />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          zIndex: 10,
+        }}
+      >
+        {/* Label / Category */}
+        {label && (
+          <div
+            style={{
+              fontSize: "20px",
+              fontWeight: 700,
+              color: accentBlue,
+              textTransform: "uppercase",
+              letterSpacing: "0.2em",
+              marginBottom: "24px",
+              display: "flex",
+            }}
+          >
+            {label}
+          </div>
+        )}
+
+        {/* Title */}
+        <div
+          style={{
+            fontSize: title.length > 40 ? "64px" : "82px",
+            fontWeight: 700,
+            color: slateDark,
+            lineHeight: "1.1",
+            maxWidth: "950px",
+            marginBottom: "32px",
+            display: "flex",
+            letterSpacing: "-0.025em",
+          }}
+        >
+          {title}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <div
+            style={{
+              fontSize: "30px",
+              color: slateLight,
+              maxWidth: "850px",
+              lineHeight: "1.4",
+              display: "flex",
+              fontWeight: 400,
+            }}
+          >
+            {description.length > 160
+              ? description.substring(0, 157) + "..."
+              : description}
+          </div>
+        )}
+      </div>
+
+      {/* Brand Footer */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "80px",
+          left: "80px",
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <div
+          style={{
+            width: "60px",
+            height: "4px",
+            backgroundColor: slateDark,
+            borderRadius: "2px",
+            marginRight: "20px",
+          }}
+        />
+        <div
+          style={{
+            fontSize: "22px",
+            fontWeight: 700,
+            color: slateDark,
+            textTransform: "lowercase",
+            letterSpacing: "0.05em",
+            display: "flex",
+          }}
+        >
+          mintel.me
+        </div>
+      </div>
+
+      {/* Blue Brand Strip */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          width: "12px",
+          height: "100%",
+          backgroundColor: accentBlue,
+        }}
+      />
+    </div>
+  );
+}

apps/web/src/lib/og-helper.tsx

@@ -0,0 +1,54 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+
+/**
+ * Loads the Inter fonts for use in Satori (Next.js OG Image generation).
+ * Since we are using runtime = 'nodejs', we can read them from the filesystem.
+ */
+export async function getOgFonts() {
+  const boldFontPath = join(
+    process.cwd(),
+    "apps/web/public/fonts/Inter-Bold.woff",
+  );
+  const regularFontPath = join(
+    process.cwd(),
+    "apps/web/public/fonts/Inter-Regular.woff",
+  );
+
+  try {
+    console.log(
+      `[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`,
+    );
+    const boldFont = readFileSync(boldFontPath);
+    const regularFont = readFileSync(regularFontPath);
+    console.log(
+      `[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`,
+    );
+
+    return [
+      {
+        name: "Inter",
+        data: boldFont,
+        weight: 700 as const,
+        style: "normal" as const,
+      },
+      {
+        name: "Inter",
+        data: regularFont,
+        weight: 400 as const,
+        style: "normal" as const,
+      },
+    ];
+  } catch (error) {
+    console.error(`[OG] Failed to load fonts from ${process.cwd()}:`, error);
+    return [];
+  }
+}
+
+/**
+ * Common configuration for OG images
+ */
+export const OG_IMAGE_SIZE = {
+  width: 1200,
+  height: 630,
+};