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/globals.css
+++ b/packages/gatekeeper/src/app/globals.css
@@ -8,7 +8,7 @@
  }

  body {
-    @apply bg-white text-slate-800 font-serif antialiased selection:bg-slate-900 selection:text-white;
+    @apply bg-[#f5f5f7] text-black/80 font-serif antialiased selection:bg-black/10 selection:text-black;
    line-height: 1.6;
  }

@@ -18,15 +18,15 @@
  h4,
  h5,
  h6 {
-    @apply font-sans font-bold text-slate-900 tracking-tighter;
+    @apply font-sans font-bold text-black tracking-tighter;
  }

  p {
-    @apply mb-4 text-base leading-relaxed text-slate-700;
+    @apply mb-4 text-base leading-relaxed text-black/50;
  }

  a {
-    @apply text-slate-900 hover:text-slate-700 transition-colors no-underline;
+    @apply text-black/50 hover:text-black transition-colors no-underline;
  }
 }

@@ -36,34 +36,58 @@
  }

  .btn {
-    @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-industrial hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
+    @apply inline-flex items-center justify-center px-6 py-3 border border-black/10 bg-white text-black/60 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-industrial hover:border-black/20 hover:text-black hover:bg-white hover:-translate-y-0.5 hover:shadow-xl hover:shadow-black/5 active:translate-y-0 active:shadow-sm;
  }

  .btn-primary {
-    @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
+    @apply border-black bg-black text-white hover:bg-black/85 hover:text-white;
  }
 }

-/* Custom scrollbar */
+/* Custom scrollbar - light theme */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }

 ::-webkit-scrollbar-track {
-  background: #f1f5f9;
+  background: #f5f5f7;
 }

 ::-webkit-scrollbar-thumb {
-  background: #cbd5e1;
+  background: #d1d1d6;
  border-radius: 4px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: #94a3b8;
+  background: #b0b0b8;
 }

 /* Animations */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
@keyframes shake {
  0%,
  100% {
@@ -79,6 +103,15 @@
  }
 }

+.animate-fade-in {
+  animation: fade-in 0.8s ease-out forwards;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.8s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
 .animate-shake {
  animation: shake 0.2s ease-in-out 0s 2;
 }
--- a/packages/gatekeeper/src/app/layout.tsx
+++ b/packages/gatekeeper/src/app/layout.tsx
@@ -13,6 +13,17 @@ const newsreader = Newsreader({
 export const metadata: Metadata = {
  title: "Gatekeeper | Access Control",
  description: "Mintel Infrastructure Protection",
+  openGraph: {
+    title: "Gatekeeper | Access Control",
+    description: "Mintel Infrastructure Protection",
+    siteName: "Mintel Gatekeeper",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Gatekeeper | Access Control",
+    description: "Mintel Infrastructure Protection",
+  },
 };

 export default function RootLayout({
--- a/packages/gatekeeper/src/app/login/page.tsx
+++ b/packages/gatekeeper/src/app/login/page.tsx
@@ -1,7 +1,9 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
-import { ArrowRight, ShieldCheck } from "lucide-react";
+import { ShieldCheck } from "lucide-react";
 import Image from "next/image";
+import { GateScene } from "../../components/gate-scene";
+import { AnimatedLoginForm } from "../../components/animated-login-form";

 interface LoginPageProps {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -17,8 +19,8 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
  async function login(formData: FormData) {
    "use server";

-    const email = (formData.get("email") as string || "").trim();
-    const password = (formData.get("password") as string || "").trim();
+    const email = ((formData.get("email") as string) || "").trim();
+    const password = ((formData.get("password") as string) || "").trim();

    const expectedCode = process.env.GATEKEEPER_PASSWORD || "mintel";
    const adminEmail = process.env.DIRECTUS_ADMIN_EMAIL;
@@ -116,7 +118,9 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
    }

    if (userIdentity) {
-      console.log(`[Login] Success: ${userIdentity} | Redirect: ${targetRedirect}`);
+      console.log(
+        `[Login] Success: ${userIdentity} | Redirect: ${targetRedirect}`,
+      );
      const cookieStore = await cookies();
      // Store identity in the cookie (simplified for now, ideally signed)
      const sessionValue = JSON.stringify({
@@ -127,7 +131,9 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {

      const isDev = process.env.NODE_ENV === "development";

-      console.log(`[Login] Setting Cookie: ${authCookieName} | Domain: ${cookieDomain || "Default"}`);
+      console.log(
+        `[Login] Setting Cookie: ${authCookieName} | Domain: ${cookieDomain || "Default"}`,
+      );

      cookieStore.set(authCookieName, sessionValue, {
        httpOnly: true,
@@ -145,101 +151,81 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center relative bg-white font-serif antialiased overflow-hidden">
-      {/* Background Decor - Signature mintel.me style */}
-      <div
-        className="absolute inset-0 pointer-events-none opacity-[0.03] scale-[1.01]"
-        style={{
-          backgroundImage: `linear-gradient(to right, #000 1px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px)`,
-          backgroundSize: "clamp(30px, 8vw, 40px) clamp(30px, 8vw, 40px)",
-        }}
-      />
+    <div className="min-h-screen flex items-center justify-center relative bg-[#f5f5f7] font-serif antialiased overflow-hidden selection:bg-black/10 selection:text-black">
+      {/* 3D Digital Gate Background */}
+      <GateScene />

-      <main className="relative z-10 w-full max-w-sm px-8 sm:px-6">
-        <div className="space-y-12 sm:space-y-16 animate-fade-in">
-          {/* Top Icon Box - Signature mintel.me Black Square */}
+      <main className="relative z-10 w-full max-w-[380px] px-6 sm:px-4 pb-24 sm:pb-32 pointer-events-auto">
+        <div className="space-y-10 animate-fade-in">
+          {/* Top Icon Box */}
          <div className="flex justify-center">
-            <div className="w-16 h-16 bg-black rounded-xl flex items-center justify-center shadow-xl shadow-slate-100 hover:scale-105 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] rotate-2 hover:rotate-0">
+            <a
+              href="https://mintel.me"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-black/[0.06] hover:scale-105 hover:shadow-black/10 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] border border-black/[0.06] hover:border-black/10"
+            >
              <Image
                src="/gatekeeper/icon-white.svg"
                alt="Mintel"
-                width={32}
-                height={32}
-                className="w-8 h-8"
+                style={{ filter: "invert(1)" }}
+                width={28}
+                height={28}
+                className="w-7 h-7 opacity-80"
                unoptimized
              />
-            </div>
+            </a>
          </div>

-          <div className="space-y-12 animate-slide-up">
-            <div className="text-center space-y-4">
-              <h1 className="text-xs font-sans font-bold uppercase tracking-[0.4em] text-slate-900 border-b border-slate-50 pb-4 inline-block mx-auto min-w-[200px]">
-                {projectName} <span className="text-slate-300">Gatekeeper</span>
+          <div className="space-y-8 animate-slide-up">
+            <div className="text-center space-y-3">
+              <h1 className="text-[11px] font-sans font-bold uppercase tracking-[0.5em] text-black/80 pb-3 inline-block mx-auto min-w-[220px]">
+                {projectName} <span className="text-black/30">Gatekeeper</span>
              </h1>
-              <p className="text-[10px] text-slate-400 font-sans uppercase tracking-widest italic flex items-center justify-center gap-2">
-                <span className="w-1 h-1 bg-slate-200 rounded-full" />
-                Infrastructure Protection
-                <span className="w-1 h-1 bg-slate-200 rounded-full" />
-              </p>
+              <div className="flex items-center justify-center gap-4">
+                <div className="h-px w-8 bg-gradient-to-r from-transparent to-black/10" />
+                <p className="text-[8px] text-black/30 font-sans uppercase tracking-[0.35em] font-semibold">
+                  Infrastructure Protection
+                </p>
+                <div className="h-px w-8 bg-gradient-to-l from-transparent to-black/10" />
+              </div>
            </div>

            {error && (
-              <div className="bg-red-50 text-red-600 px-5 py-3 rounded-2xl text-[9px] font-sans font-bold uppercase tracking-widest flex items-center gap-3 border border-red-100 animate-shake">
-                <ShieldCheck className="w-4 h-4" />
+              <div className="bg-red-50 backdrop-blur-md text-red-600 px-5 py-4 rounded-2xl text-[9px] font-sans font-bold uppercase tracking-widest flex items-center gap-3 border border-red-200 animate-shake">
+                <ShieldCheck className="w-4 h-4 text-red-500/70" />
                <span>Access Denied. Try Again.</span>
              </div>
            )}

-            <form action={login} className="space-y-4">
-              <input type="hidden" name="redirect" value={redirectUrl} />
+            {/* The Animated Framer Motion Form */}
+            <AnimatedLoginForm
+              redirectUrl={redirectUrl}
+              loginAction={login}
+              projectName={projectName}
+            />

-              <div className="space-y-2">
-                <div className="relative group">
-                  <input
-                    type="email"
-                    name="email"
-                    placeholder="EMAIL (OPTIONAL)"
-                    className="w-full bg-slate-50/50 border border-slate-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-slate-900 focus:bg-white transition-all text-[10px] font-sans font-bold tracking-[0.2em] uppercase placeholder:text-slate-300 shadow-sm shadow-slate-50"
-                  />
-                </div>
-
-                <div className="relative group">
-                  <input
-                    type="password"
-                    name="password"
-                    required
-                    autoFocus
-                    autoComplete="current-password"
-                    placeholder="ACCESS CODE"
-                    className="w-full bg-slate-50/50 border border-slate-200 rounded-2xl px-6 py-4 focus:outline-none focus:border-slate-900 focus:bg-white transition-all text-sm font-sans font-bold tracking-[0.3em] uppercase placeholder:text-slate-300 placeholder:tracking-widest shadow-sm shadow-slate-50"
-                  />
-                </div>
-              </div>
-
-              <button
-                type="submit"
-                className="btn btn-primary w-full py-5 rounded-2xl text-[10px] shadow-lg shadow-slate-100 flex items-center justify-center"
+            {/* Bottom Section */}
+            <div className="pt-4 sm:pt-6 flex flex-col items-center gap-5">
+              <div className="h-px w-16 bg-gradient-to-r from-transparent via-black/10 to-transparent" />
+              <a
+                href="https://mintel.me"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="opacity-30 transition-opacity hover:opacity-60"
              >
-                Unlock Access
-                <ArrowRight className="ml-3 w-3 h-3 group-hover:translate-x-1 transition-transform" />
-              </button>
-            </form>
-
-            {/* Bottom Section - Full Branding Parity */}
-            <div className="pt-12 sm:pt-20 flex flex-col items-center gap-6 sm:gap-8">
-              <div className="h-px w-8 bg-slate-100" />
-              <div className="opacity-80 transition-opacity hover:opacity-100">
                <Image
-                  src="/gatekeeper/logo-black.svg"
+                  src="/gatekeeper/logo-white.svg"
                  alt={projectName}
-                  width={140}
-                  height={40}
-                  className="h-7 sm:h-auto grayscale contrast-125 w-auto"
+                  width={120}
+                  height={36}
+                  className="h-5 sm:h-6 w-auto"
+                  style={{ filter: "invert(1)" }}
                  unoptimized
                />
-              </div>
-              <p className="text-[8px] font-sans font-bold text-slate-300 uppercase tracking-[0.4em] sm:tracking-[0.5em] text-center">
-                &copy; 2026 MINTEL
+              </a>
+              <p className="text-[7px] font-sans font-semibold text-black/25 uppercase tracking-[0.5em] text-center">
+                &copy; {new Date().getFullYear()} MINTEL
              </p>
            </div>
          </div>
--- 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,
+    },
+  );
+}