feat: adopt v2 dark homepage

package.json

@@ -48,6 +48,7 @@
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "dotenv": "^17.3.1",
+    "geist": "^1.7.0",
     "jose": "6.1.3",
     "lucide-react": "0.475.0",
     "nanoid": "5.1.6",
@@ -67,7 +68,6 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
-    "jsdom": "24.1.3",
     "@types/node": "^20",
     "@types/pg": "^8.16.0",
     "@types/react": "^19",
@@ -77,6 +77,7 @@
     "dotenv-cli": "11.0.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "jsdom": "24.1.3",
     "openid-client": "6.8.2",
     "playwright": "1.58.2",
     "postcss": "^8",

playwright.config.ts

@@ -1,3 +1,4 @@
+import fs from "node:fs";
 import path from "node:path";
 
 import { defineConfig, devices } from "@playwright/test";
@@ -11,30 +12,62 @@ const ldLibrarySegments = (process.env.PLAYWRIGHT_LD_LIBRARY_PATH ?? "")
     path.isAbsolute(segment) ? segment : path.resolve(projectRoot, segment),
   );
 
+const headlessShellPath = path.resolve(
+  projectRoot,
+  ".playwright-browsers",
+  "chromium_headless_shell-1208",
+  "chrome-linux",
+  "headless_shell",
+);
+
 const chromiumLdLibraryPath = [
   "/usr/lib/x86_64-linux-gnu",
   "/lib/x86_64-linux-gnu",
   ...ldLibrarySegments,
-  path.resolve(
-    projectRoot,
-    ".playwright-browsers",
-    "chromium_headless_shell-1208",
-    "chrome-headless-shell-linux64",
-  ),
+  path.dirname(headlessShellPath),
 ]
   .filter(Boolean)
   .join(":");
 
+const chromiumExecutablePath = (() => {
+  if (process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE) {
+    return process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE;
+  }
+
+  if (process.arch === "x64" && fs.existsSync(headlessShellPath)) {
+    return headlessShellPath;
+  }
+
+  const fullChromiumBinary = path.resolve(
+    projectRoot,
+    ".playwright-browsers",
+    "chromium-1208",
+    "chrome-linux",
+    "chrome",
+  );
+
+  return fullChromiumBinary;
+})();
+
 export default defineConfig({
   testDir: "tests/e2e",
   timeout: 120_000,
+  retries: process.env.CI ? 1 : 0,
   expect: {
     timeout: 10_000,
   },
   use: {
     baseURL: process.env.PLAYWRIGHT_BASE_URL ?? "http://127.0.0.1:3000",
     trace: "on-first-retry",
     launchOptions: {
+      executablePath: chromiumExecutablePath,
+      args: [
+        "--disable-dev-shm-usage",
+        "--no-sandbox",
+        "--disable-gpu",
+        "--use-gl=swiftshader",
+        "--no-zygote",
+      ],
       env: {
         ...process.env,
         LD_LIBRARY_PATH: chromiumLdLibraryPath,

scripts/capture-landing-screenshot.sh

@@ -0,0 +1,56 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+paths=(
+  "$(nix eval --raw nixpkgs#glib.out)/lib"
+  "$(nix eval --raw nixpkgs#libXfixes.out)/lib"
+  "$(nix eval --raw nixpkgs#nspr.out)/lib"
+  "$(nix eval --raw nixpkgs#nss.out)/lib"
+  "$(nix eval --raw nixpkgs#atk.out)/lib"
+  "$(nix eval --raw nixpkgs#cairo.out)/lib"
+  "$(nix eval --raw nixpkgs#pango.out)/lib"
+  "$(nix eval --raw nixpkgs#gdk-pixbuf.out)/lib"
+  "$(nix eval --raw nixpkgs#gtk3.out)/lib"
+  "$(nix eval --raw nixpkgs#dbus.lib)/lib"
+  "$(nix eval --raw nixpkgs#cups.lib)/lib"
+  "$(nix eval --raw nixpkgs#expat.out)/lib"
+  "$(nix eval --raw nixpkgs#libxcb.out)/lib"
+  "$(nix eval --raw nixpkgs#libxkbcommon.out)/lib"
+  "$(nix eval --raw nixpkgs#libX11.out)/lib"
+  "$(nix eval --raw nixpkgs#libXcomposite.out)/lib"
+  "$(nix eval --raw nixpkgs#libXdamage.out)/lib"
+  "$(nix eval --raw nixpkgs#libXext.out)/lib"
+  "$(nix eval --raw nixpkgs#libXrandr.out)/lib"
+  "$(nix eval --raw nixpkgs#libgbm.out)/lib"
+  "$(nix eval --raw nixpkgs#alsa-lib.out)/lib"
+)
+
+LD_JOINED=$(printf "%s:" "${paths[@]}")
+LD_JOINED=${LD_JOINED%:}
+
+export PLAYWRIGHT_BROWSERS_PATH=".playwright-browsers"
+export LD_LIBRARY_PATH="${LD_JOINED}:${LD_LIBRARY_PATH:-}"
+
+start_dev_server() {
+  pnpm dev --hostname 127.0.0.1 --port 3000 >/tmp/mockauth-dev.log 2>&1 &
+  DEV_PID=$!
+  trap 'kill ${DEV_PID} >/dev/null 2>&1 || true' EXIT
+
+  for _ in $(seq 1 120); do
+    if curl -fsS http://127.0.0.1:3000 >/dev/null; then
+      echo "Dev server ready"
+      return 0
+    fi
+    sleep 1
+  done
+
+  echo "Dev server failed to become ready" >&2
+  return 1
+}
+
+main() {
+  start_dev_server
+  pnpm exec node -e "const path = require('node:path'); const { chromium } = require('playwright'); (async () => { const executablePath = path.resolve('.playwright-browsers', 'chromium-1208', 'chrome-linux', 'chrome'); const browser = await chromium.launch({ headless: true, executablePath, args: ['--no-sandbox'] }); const page = await browser.newPage({ viewport: { width: 1440, height: 900 } }); await page.goto('http://127.0.0.1:3000', { waitUntil: 'networkidle' }); await page.screenshot({ path: 'docs/marketing/landing-20260305.png', fullPage: true }); await browser.close(); })().catch(err => { console.error(err); process.exit(1); });"
+}
+
+main

scripts/run-playwright-suite.mjs

@@ -47,6 +47,13 @@ const env = {
     .join(':'),
 };
 
+env.PLAYWRIGHT_LD_LIBRARY_PATH = [
+  process.env.PLAYWRIGHT_LD_LIBRARY_PATH ?? '',
+  process.env.LD_LIBRARY_PATH ?? '',
+]
+  .filter(Boolean)
+  .join(':');
+
 const runSpec = (spec) =>
   new Promise((resolve, reject) => {
     process.stdout.write(`\n=== Running ${spec} ===\n`);

src/app/layout.tsx

@@ -1,31 +1,22 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
 
 import "./globals.css";
 
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { cn } from "@/lib/utils";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Mockauth",
   description: "Multi-tenant mock OIDC provider for QA environments",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={cn("min-h-screen bg-background font-sans text-foreground antialiased", geistSans.variable, geistMono.variable)}>
+    <html lang="en" className={cn(GeistSans.variable, GeistMono.variable)} suppressHydrationWarning>
+      <body className="min-h-screen bg-background font-sans text-foreground antialiased">
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
           {children}
         </ThemeProvider>