feat: introduce Gatekeeper application, Directus utilities, and monorepo configuration for linting, testing, and husky hooks.

packages/gatekeeper/next.config.ts

@@ -0,0 +1,8 @@
+import mintelNextConfig from "@mintel/next-config";
+import { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  // Gatekeeper specific overrides
+};
+
+export default mintelNextConfig(nextConfig);

packages/gatekeeper/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@mintel/gatekeeper",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.474.0",
+    "next": "15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@mintel/eslint-config": "workspace:*",
+    "@mintel/next-config": "workspace:*",
+    "@mintel/tsconfig": "workspace:*",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.0.0"
+  }
+}

packages/gatekeeper/src/app/api/verify/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function GET(req: NextRequest) {
+  const cookieStore = await cookies();
+  const authCookieName =
+    process.env.AUTH_COOKIE_NAME || "mintel_gatekeeper_session";
+  const password = process.env.GATEKEEPER_PASSWORD || "mintel";
+
+  const session = cookieStore.get(authCookieName);
+
+  if (session?.value === password) {
+    return new NextResponse("OK", { status: 200 });
+  }
+
+  // Traefik ForwardAuth headers
+  const originalUrl = req.headers.get("x-forwarded-uri") || "/";
+  const host =
+    req.headers.get("x-forwarded-host") || req.headers.get("host") || "";
+  const proto = req.headers.get("x-forwarded-proto") || "https";
+
+  const loginUrl = `${proto}://${host}/gatekeeper/login?redirect=${encodeURIComponent(originalUrl)}`;
+
+  return NextResponse.redirect(loginUrl);
+}

packages/gatekeeper/src/app/gatekeeper/login/page.tsx

@@ -0,0 +1,131 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { Lock, ShieldCheck, ArrowRight } from "lucide-react";
+
+interface LoginPageProps {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const params = await searchParams;
+  const redirectUrl = (params.redirect as string) || "/";
+  const error = params.error === "1";
+
+  const projectName = process.env.PROJECT_NAME || "Mintel";
+  const projectColor = process.env.PROJECT_COLOR || "#82ed20";
+
+  async function login(formData: FormData) {
+    "use server";
+
+    const password = formData.get("password");
+    const expectedPassword = process.env.GATEKEEPER_PASSWORD || "mintel";
+    const authCookieName =
+      process.env.AUTH_COOKIE_NAME || "mintel_gatekeeper_session";
+    const targetRedirect = formData.get("redirect") as string;
+
+    if (password === expectedPassword) {
+      const cookieStore = await cookies();
+      cookieStore.set(authCookieName, expectedPassword, {
+        httpOnly: true,
+        secure: true,
+        path: "/",
+        maxAge: 30 * 24 * 60 * 60, // 30 days
+        sameSite: "lax",
+      });
+      redirect(targetRedirect);
+    } else {
+      redirect(
+        `/gatekeeper/login?error=1&redirect=${encodeURIComponent(targetRedirect)}`,
+      );
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-mintel-dark">
+      {/* Background Decor */}
+      <div className="absolute inset-0 bg-grid pointer-events-none opacity-20" />
+      <div
+        className="absolute inset-0 pointer-events-none opacity-30"
+        style={{
+          background: `radial-gradient(circle at center, ${projectColor}11 0%, transparent 70%)`,
+        }}
+      />
+
+      <div className="relative z-10 w-full max-w-md px-6 animate-in fade-in zoom-in duration-700">
+        {/* Logo / Icon */}
+        <div className="flex justify-center mb-12">
+          <div
+            className="w-20 h-20 rounded-3xl flex items-center justify-center border border-white/10 bg-white/5 backdrop-blur-xl shadow-2xl"
+            style={{ borderBottom: `2px solid ${projectColor}44` }}
+          >
+            <ShieldCheck
+              className="w-10 h-10"
+              style={{ color: projectColor }}
+            />
+          </div>
+        </div>
+
+        <div className="bg-white/[0.03] backdrop-blur-3xl border border-white/10 p-10 rounded-[48px] shadow-2xl relative overflow-hidden group">
+          {/* Subtle accent line */}
+          <div
+            className="absolute top-0 left-0 w-full h-1 opacity-50"
+            style={{
+              background: `linear-gradient(to right, transparent, ${projectColor}, transparent)`,
+            }}
+          />
+
+          <div className="mb-10 text-center">
+            <h1 className="text-3xl font-black mb-3 tracking-tighter uppercase italic flex items-center justify-center gap-2">
+              {projectName.split(" ")[0]}
+              <span style={{ color: projectColor }}>GATEKEEPER</span>
+            </h1>
+            <p className="text-white/40 text-sm font-medium">
+              Restricted Infrastructure Access
+            </p>
+          </div>
+
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/20 text-red-200 p-4 rounded-2xl mb-8 text-sm flex items-center gap-3 animate-pulse">
+              <Lock className="w-5 h-5 flex-shrink-0" />
+              <span>Invalid access password. Please try again.</span>
+            </div>
+          )}
+
+          <form action={login} className="space-y-8">
+            <input type="hidden" name="redirect" value={redirectUrl} />
+
+            <div className="space-y-3">
+              <label className="block text-[10px] font-black uppercase tracking-[0.3em] text-white/20 ml-5">
+                Authentication Code
+              </label>
+              <input
+                type="password"
+                name="password"
+                required
+                autoFocus
+                className="w-full bg-white/5 border border-white/10 rounded-3xl px-8 py-6 focus:outline-none focus:ring-2 transition-all text-xl tracking-[0.5em] text-center placeholder:tracking-normal placeholder:text-white/10"
+                style={{ "--tw-ring-color": `${projectColor}33` } as any}
+                placeholder="••••••••"
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full font-black uppercase tracking-[0.2em] py-6 rounded-3xl transition-all active:scale-[0.98] flex items-center justify-center gap-3 shadow-lg hover:shadow-mintel-green/10"
+              style={{ backgroundColor: projectColor, color: "#000" }}
+            >
+              Verify Identity
+              <ArrowRight className="w-5 h-5" />
+            </button>
+          </form>
+        </div>
+
+        <div className="mt-12 text-center">
+          <p className="text-[10px] font-bold text-white/10 uppercase tracking-[0.5em]">
+            &copy; 2026 {projectName} Infrastructure
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/gatekeeper/src/app/globals.css

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #000c1f;
+  --foreground: #ffffff;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  min-height: 100vh;
+}
+
+.bg-grid {
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 40px 40px;
+}

packages/gatekeeper/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Gatekeeper | Access Control",
+  description: "Mintel Infrastructure Protection",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}

packages/gatekeeper/src/components/Button.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Button } from "./Button";
+import React from "react";
+
+describe("Button", () => {
+  it("renders children correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("calls onClick when clicked", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText("Click me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

packages/gatekeeper/src/components/Button.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export function Button({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="px-4 py-2 bg-mintel-green text-mintel-blue rounded-xl font-bold"
+    >
+      {children}
+    </button>
+  );
+}

packages/gatekeeper/src/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

packages/gatekeeper/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mintel: {
+          green: "#82ed20",
+          blue: "#001a4d",
+          dark: "#000c1f",
+        },
+      },
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};

packages/gatekeeper/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@mintel/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/gatekeeper/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "happy-dom",
+    globals: true,
+    setupFiles: ["./src/test/setup.ts"],
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});