Marc Mintel
36ed26ad79
Some checks failed
Monorepo Pipeline / ⚡ Prioritize Release (push) Successful in 2s
Monorepo Pipeline / 🧪 Test (push) Successful in 1m10s
Monorepo Pipeline / 🧹 Lint (push) Failing after 3m15s
Monorepo Pipeline / 🏗️ Build (push) Successful in 1m53s
Monorepo Pipeline / 🚀 Release (push) Has been skipped
Monorepo Pipeline / 🐳 Build Gatekeeper (Product) (push) Has been skipped
Monorepo Pipeline / 🐳 Build Build-Base (push) Has been skipped
Monorepo Pipeline / 🐳 Build Production Runtime (push) Has been skipped
🏥 Server Maintenance / 🧹 Prune & Clean (push) Failing after 4s
127 lines
3.1 KiB
TypeScript
127 lines
3.1 KiB
TypeScript
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,
|
|
},
|
|
);
|
|
}
|