import { Body, Container, Head, Html, Preview, Section, Text, Img, } from "@react-email/components"; import * as React from "react"; export interface GatekeeperLayoutProps { preview: string; projectName?: string; subTitle?: string; children: React.ReactNode; } export const GatekeeperLayout = ({ preview, projectName = "MINTEL", subTitle = "INFRASTRUCTURE", children }: GatekeeperLayoutProps) => { return ( {preview} {/* Top Icon Box */}
Mintel
{/* Title Area */}
{projectName} GATEKEEPER
{subTitle}
{/* Main Content Area */}
{children}
{/* Footer Area */}
{projectName}
© {new Date().getFullYear()} MINTEL
); }; const main = { backgroundColor: "#f5f5f7", color: "#111111", fontFamily: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif', WebkitFontSmoothing: "antialiased" as const, }; const container = { margin: "0 auto", padding: "40px 20px 80px", maxWidth: "420px", }; const iconBoxSection = { textAlign: "center" as const, marginBottom: "40px", }; const iconBox = { width: "56px", height: "56px", backgroundColor: "#ffffff", borderRadius: "16px", margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid rgba(0,0,0,0.06)", boxShadow: "0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03)", }; const iconImg = { margin: "14px auto", display: "block", opacity: 0.8, filter: "grayscale(100%) brightness(0)", }; const titleSection = { textAlign: "center" as const, marginBottom: "32px", }; const gatekeeperTitle = { fontSize: "11px", fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif', fontWeight: "bold", textTransform: "uppercase" as const, letterSpacing: "0.5em", color: "rgba(0,0,0,0.8)", margin: "0 0 12px 0", }; const gatekeeperSub = { fontSize: "8px", fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif', textTransform: "uppercase" as const, letterSpacing: "0.35em", fontWeight: 600, color: "rgba(0,0,0,0.3)", margin: "0", }; const lineGradientRight = { height: "1px", width: "32px", backgroundColor: "rgba(0,0,0,0.1)", marginLeft: "auto", }; const lineGradientLeft = { height: "1px", width: "32px", backgroundColor: "rgba(0,0,0,0.1)", marginRight: "auto", }; const contentSection = { backgroundColor: "#ffffff", padding: "32px", borderRadius: "24px", border: "1px solid rgba(0,0,0,0.06)", boxShadow: "0 4px 6px -1px rgba(0,0,0,0.03)", marginBottom: "32px", }; const footerSection = { textAlign: "center" as const, paddingTop: "24px", }; const lineGradientCenter = { height: "1px", width: "64px", backgroundColor: "rgba(0,0,0,0.1)", margin: "0 auto", }; const footerText = { fontSize: "7px", fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif', fontWeight: 600, color: "rgba(0,0,0,0.25)", textTransform: "uppercase" as const, letterSpacing: "0.5em", marginTop: "20px", };