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>
+  );
+}