feat(gatekeeper): major UI upgrade - high-fidelity light theme, iridescent mouse-reactive form, and enhanced background animation

2026-02-28 21:48:03 +01:00
parent 4e72a0baac
commit 36ed26ad79
10 changed files with 1190 additions and 98 deletions
--- a/packages/gatekeeper/src/app/opengraph-image.tsx
+++ b/packages/gatekeeper/src/app/opengraph-image.tsx
@@ -0,0 +1,126 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+// Image metadata
+export const alt = "Gatekeeper Infrastructure Protection";
+export const size = {
+  width: 1200,
+  height: 630,
+};
+
+export const contentType = "image/png";
+
+export default async function Image() {
+  const projectName = process.env.PROJECT_NAME || "MINTEL";
+
+  return new ImageResponse(
+    <div
+      style={{
+        background: "linear-gradient(to bottom, #020617, #0f172a)",
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        fontFamily: "Inter, sans-serif",
+      }}
+    >
+      {/* Subtle Background Pattern matching the industrial look */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage:
+            "radial-gradient(circle at 50% 50%, #334155 1px, transparent 1px)",
+          backgroundSize: "40px 40px",
+          opacity: 0.1,
+        }}
+      />
+
+      {/* Central Card Element */}
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(15, 23, 42, 0.6)",
+          border: "1px solid rgba(51, 65, 85, 0.4)",
+          borderRadius: "32px",
+          padding: "80px",
+          boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
+        }}
+      >
+        {/* Top Icon Box */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100px",
+            height: "100px",
+            background: "#000",
+            borderRadius: "24px",
+            border: "2px solid #334155",
+            boxShadow: "0 20px 40px rgba(0,0,0,0.8)",
+            marginBottom: "40px",
+            transform: "rotate(2deg)",
+          }}
+        >
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="white"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+        </div>
+
+        {/* Project Name & Typography */}
+        <div
+          style={{
+            display: "flex",
+            fontSize: "64px",
+            fontWeight: 900,
+            letterSpacing: "0.2em",
+            color: "white",
+            textTransform: "uppercase",
+            marginBottom: "16px",
+          }}
+        >
+          {projectName}{" "}
+          <span style={{ color: "#64748b", marginLeft: "10px" }}>
+            GATEKEEPER
+          </span>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            fontSize: "24px",
+            fontWeight: 600,
+            letterSpacing: "0.4em",
+            color: "#94a3b8",
+            textTransform: "uppercase",
+          }}
+        >
+          Infrastructure Protection
+        </div>
+      </div>
+    </div>,
+    {
+      ...size,
+    },
+  );
+}