Add Tactical Monolith design system and landing page to web app

Set up Tailwind CSS v4 with full design token system from Stitch project (obsidian surfaces, neon cyan/magenta/lime palette, Space Grotesk + Inter typography, 0px border-radius). Landing page includes hero section, side nav, module cards, system status panels, terminal log, and CRT overlay.
2026-03-20 20:24:19 +00:00
parent 18b2564c8e
commit 3d61911868
9 changed files with 1039 additions and 70 deletions
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -0,0 +1,115 @@
+@import "tailwindcss";
+
+@theme {
+  /* Surface Architecture */
+  --color-background: #0b0f10;
+  --color-surface: #0b0f10;
+  --color-surface-dim: #0b0f10;
+  --color-surface-bright: #272d2f;
+  --color-surface-variant: #212728;
+  --color-surface-container-lowest: #000000;
+  --color-surface-container-low: #101415;
+  --color-surface-container: #151a1c;
+  --color-surface-container-high: #1b2022;
+  --color-surface-container-highest: #212728;
+  --color-surface-tint: #aaffdc;
+
+  /* Primary — Cyan */
+  --color-primary: #aaffdc;
+  --color-primary-dim: #00edb4;
+  --color-primary-container: #00fdc1;
+  --color-primary-fixed: #00fdc1;
+  --color-primary-fixed-dim: #00edb4;
+  --color-on-primary: #00654b;
+  --color-on-primary-container: #005c44;
+  --color-on-primary-fixed: #004734;
+  --color-on-primary-fixed-variant: #00664c;
+  --color-inverse-primary: #006c51;
+
+  /* Secondary — Magenta */
+  --color-secondary: #ff51fa;
+  --color-secondary-dim: #ff51fa;
+  --color-secondary-container: #a900a9;
+  --color-secondary-fixed: #ffbdf3;
+  --color-secondary-fixed-dim: #ffa6f3;
+  --color-on-secondary: #400040;
+  --color-on-secondary-container: #fff5f9;
+  --color-on-secondary-fixed: #620061;
+  --color-on-secondary-fixed-variant: #920091;
+
+  /* Tertiary — Lime */
+  --color-tertiary: #f3ffca;
+  --color-tertiary-dim: #beee00;
+  --color-tertiary-container: #cafd00;
+  --color-tertiary-fixed: #cafd00;
+  --color-tertiary-fixed-dim: #beee00;
+  --color-on-tertiary: #516700;
+  --color-on-tertiary-container: #4a5e00;
+  --color-on-tertiary-fixed: #3a4a00;
+  --color-on-tertiary-fixed-variant: #526900;
+
+  /* Error */
+  --color-error: #ff716c;
+  --color-error-dim: #d7383b;
+  --color-error-container: #9f0519;
+  --color-on-error: #490006;
+  --color-on-error-container: #ffa8a3;
+
+  /* On-surface */
+  --color-on-background: #fafdfe;
+  --color-on-surface: #fafdfe;
+  --color-on-surface-variant: #a8acad;
+  --color-inverse-surface: #f7fafb;
+  --color-inverse-on-surface: #525657;
+
+  /* Outline */
+  --color-outline: #727677;
+  --color-outline-variant: #44494a;
+
+  /* Typography */
+  --font-headline: "Space Grotesk", sans-serif;
+  --font-body: "Inter", sans-serif;
+  --font-label: "Space Grotesk", sans-serif;
+
+  /* 0px border radius — enforced globally */
+  --radius: 0px;
+  --radius-lg: 0px;
+  --radius-xl: 0px;
+}
+
+/* Scanline CRT overlay */
+.scanlines {
+  background: linear-gradient(
+      rgba(18, 16, 16, 0) 50%,
+      rgba(0, 0, 0, 0.2) 50%
+    ),
+    linear-gradient(
+      90deg,
+      rgba(255, 0, 0, 0.03),
+      rgba(0, 255, 0, 0.01),
+      rgba(0, 0, 255, 0.03)
+    );
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+
+/* Glitch hover effect */
+.glitch-hover:hover {
+  text-shadow: 2px 0 #ff51fa, -2px 0 #00fdc1;
+}
+
+/* Ghost border — monolith inset shadow */
+.monolith-border {
+  box-shadow: inset 0 0 0 1px rgba(170, 255, 220, 0.1);
+}
+
+/* Crosshair cursor */
+body {
+  cursor: crosshair;
+}
+
+/* Selection colors */
+::selection {
+  background-color: var(--color-primary-container);
+  color: var(--color-on-primary-container);
+}
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,8 +1,10 @@
 import type { Metadata } from "next";
+import "./globals.css";

 export const metadata: Metadata = {
-  title: "Homelab",
-  description: "Self-hosted applications",
+  title: "COREWORLDS.IO // TACTICAL_TERMINAL",
+  description:
+    "Interface with the Coreworlds terminal. A high-clearance orbital research module.",
 };

 export default function RootLayout({
@@ -11,8 +13,22 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en">
-      <body>{children}</body>
+    <html lang="en" className="dark">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700;900&family=Inter:wght@300;400;600&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="bg-background text-on-surface font-body overflow-x-hidden">
+        {/* Global CRT Overlay */}
+        <div className="fixed inset-0 z-[100] scanlines opacity-30 pointer-events-none" />
+        {children}
+      </body>
    </html>
  );
 }
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,8 +1,374 @@
-export default function Home() {
+function Icon({ name, fill }: { name: string; fill?: boolean }) {
  return (
-    <main style={{ padding: "2rem", fontFamily: "system-ui, sans-serif" }}>
-      <h1>Homelab</h1>
-      <p>Self-hosted applications running on k3s.</p>
-    </main>
+    <span
+      className="material-symbols-outlined"
+      style={
+        fill ? { fontVariationSettings: "'FILL' 1" } : undefined
+      }
+    >
+      {name}
+    </span>
+  );
+}
+
+export default function Home() {
+  return (
+    <>
+      {/* Top App Bar */}
+      <header className="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-background border-b-2 border-primary/10">
+        <div className="text-2xl font-black text-primary tracking-tighter font-headline">
+          COREWORLDS.IO
+        </div>
+        <nav className="hidden md:flex gap-8 items-center">
+          <a
+            className="font-headline tracking-tighter uppercase font-bold text-sm text-primary border-b-2 border-primary pb-1"
+            href="#"
+          >
+            PROJECTS
+          </a>
+          <a
+            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
+            href="#"
+          >
+            TERMINAL
+          </a>
+          <a
+            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
+            href="#"
+          >
+            ARCHIVE
+          </a>
+          <a
+            className="font-headline tracking-tighter uppercase font-bold text-sm text-slate-500 hover:text-primary/70 transition-all duration-150 ease-linear"
+            href="#"
+          >
+            SYSTEM
+          </a>
+        </nav>
+        <div className="flex items-center gap-4">
+          <button className="p-2 text-primary hover:bg-surface-bright transition-all duration-150 ease-linear active:translate-x-0.5 active:translate-y-0.5">
+            <Icon name="sensors" />
+          </button>
+          <button className="p-2 text-primary hover:bg-surface-bright transition-all duration-150 ease-linear active:translate-x-0.5 active:translate-y-0.5">
+            <Icon name="settings_input_component" />
+          </button>
+          <button className="bg-primary text-on-primary px-4 py-1 text-xs font-black tracking-widest font-headline hover:bg-primary-dim transition-colors">
+            TERMINAL_INIT
+          </button>
+        </div>
+      </header>
+
+      {/* Side Nav Bar */}
+      <aside className="fixed left-0 top-16 h-[calc(100vh-64px)] w-64 bg-surface-container hidden lg:flex flex-col border-r border-primary/5">
+        <div className="p-6 border-b border-primary/10 bg-background">
+          <span className="font-headline text-[10px] tracking-[0.3em] text-slate-500 block mb-1">
+            01 // LAB_MODULES
+          </span>
+          <h2 className="font-headline text-xs font-black tracking-widest text-primary">
+            DIRECTORY
+          </h2>
+        </div>
+        <nav className="flex-grow py-4 overflow-y-auto">
+          <div className="group flex items-center bg-primary text-on-primary font-bold p-3 font-headline text-xs tracking-widest">
+            <Icon name="psychology" fill />
+            <span className="ml-3">NEURAL_NETS</span>
+          </div>
+          {[
+            { icon: "rocket_launch", label: "ORBITAL_MECHANICS" },
+            { icon: "ac_unit", label: "CRYO_STORAGE" },
+            { icon: "memory", label: "QUANTUM_LOGS" },
+            { icon: "fingerprint", label: "BIOMETRICS" },
+          ].map((item) => (
+            <a
+              key={item.label}
+              className="group flex items-center text-slate-400 p-3 hover:bg-surface-bright hover:text-primary transition-colors duration-100 font-headline text-xs tracking-widest hover:border-l-4 border-primary"
+              href="#"
+            >
+              <Icon name={item.icon} />
+              <span className="ml-3">{item.label}</span>
+            </a>
+          ))}
+        </nav>
+        <div className="p-4 bg-background">
+          <button className="w-full py-4 border-2 border-primary text-primary font-headline font-black text-xs tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all">
+            INITIALIZE_BUILD
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Canvas */}
+      <main className="lg:ml-64 mt-16 p-6 lg:p-12 min-h-screen">
+        {/* Hero Section */}
+        <section className="grid grid-cols-12 gap-6 mb-12">
+          <div className="col-span-12 xl:col-span-8 relative bg-surface-container p-8 lg:p-12 monolith-border flex flex-col justify-end min-h-[500px] overflow-hidden">
+            <div className="absolute top-0 right-0 p-4 font-headline text-[10px] text-primary/30 tracking-widest">
+              SYS_STATUS: OPTIMAL
+              <br />
+              UPLINK: ACTIVE_088
+            </div>
+            <div className="absolute inset-0 opacity-20 mix-blend-screen pointer-events-none">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                alt="Technical abstract digital geometric lines and data points"
+                className="w-full h-full object-cover"
+                src="https://lh3.googleusercontent.com/aida-public/AB6AXuCR_KCcE02_UJsE6Pyhimm1rRIXp-qCInzqAFOL4MMvw4vorg-PWYZmxaJduHvjqvEA21gY0MbiadLCkb84slM0QKrhhYr99dx0PmG4MimuVe3ZqF5uEDAA4mgWO7vIFIFEt9vLgttTgDcrJBj4YCtPIXgJykmBj7yVxswa7C9fOHzq7e8CNa7ZhyQI_6nXFu_yPWbeuBnF4d8yKE8V6xYpSoQI9-AUcVvwrOjLXsgXZHU63hq5uTAo3JRkgE03cty2LuLhGqgIffw"
+              />
+            </div>
+            <div className="relative z-10">
+              <div className="flex items-center gap-2 mb-4">
+                <span className="px-2 py-0.5 bg-primary text-on-primary font-headline text-[10px] font-black tracking-widest">
+                  ESTABLISHED 2024
+                </span>
+                <span className="text-primary font-headline text-[10px] tracking-widest">
+                  // SECURE_NODE_7
+                </span>
+              </div>
+              <h1 className="font-headline text-5xl lg:text-7xl font-black tracking-tighter text-on-surface leading-[0.9] mb-6 uppercase italic">
+                The Tactical <br />
+                <span className="text-primary">Monolith</span>
+              </h1>
+              <p className="max-w-xl text-on-surface-variant font-body text-lg leading-relaxed mb-8">
+                Interface with the Coreworlds terminal. A high-clearance orbital
+                research module designed for precision system management and
+                orbital asset deployment.
+              </p>
+              <div className="flex flex-wrap gap-4">
+                <button className="px-8 py-4 bg-primary text-on-primary font-headline font-black tracking-widest hover:translate-x-1 hover:translate-y-1 transition-transform">
+                  EXECUTE_PROTOCOL
+                </button>
+                <button className="px-8 py-4 border border-outline-variant text-on-surface font-headline font-black tracking-widest hover:bg-secondary hover:text-on-secondary transition-all">
+                  SYSTEM_SPECS
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Bento Status Cards */}
+          <div className="col-span-12 xl:col-span-4 grid grid-rows-2 gap-6">
+            <div className="bg-surface-container-high p-6 monolith-border flex flex-col justify-between">
+              <div>
+                <div className="flex justify-between items-start mb-4">
+                  <h3 className="font-headline text-xs font-black tracking-widest text-primary">
+                    CORE_TEMP
+                  </h3>
+                  <span
+                    className="material-symbols-outlined text-primary"
+                    style={{ fontVariationSettings: "'FILL' 1" }}
+                  >
+                    thermostat
+                  </span>
+                </div>
+                <div className="text-4xl font-headline font-black text-on-surface tracking-tighter">
+                  32.4
+                  <span className="text-primary-container text-xl italic">
+                    °C
+                  </span>
+                </div>
+              </div>
+              <div className="w-full bg-surface-container-lowest h-1.5 mt-4">
+                <div className="bg-primary h-full w-[65%]" />
+              </div>
+              <div className="mt-2 text-[10px] font-headline text-on-surface-variant tracking-widest flex justify-between">
+                <span>STABLE_STATE</span>
+                <span>0XFF241</span>
+              </div>
+            </div>
+
+            <div className="bg-surface-container-high p-6 monolith-border relative overflow-hidden">
+              <div className="absolute -right-4 -bottom-4 opacity-10">
+                <span className="material-symbols-outlined text-9xl">
+                  memory
+                </span>
+              </div>
+              <h3 className="font-headline text-xs font-black tracking-widest text-secondary mb-4">
+                ACTIVE_PROCESSES
+              </h3>
+              <ul className="space-y-2 relative z-10">
+                {[
+                  { name: "NEURAL_SYNC_V2", status: "RUNNING", color: "text-primary" },
+                  { name: "CRYPTO_MESH_04", status: "RUNNING", color: "text-primary" },
+                  { name: "RADAR_SWEEP", status: "STANDBY", color: "text-secondary" },
+                  { name: "ORBITAL_ALIGN", status: "FAILURE", color: "text-error" },
+                ].map((proc, i, arr) => (
+                  <li
+                    key={proc.name}
+                    className={`flex justify-between font-headline text-[10px] tracking-widest ${i < arr.length - 1 ? "border-b border-outline-variant/20 pb-1" : ""}`}
+                  >
+                    <span className="text-on-surface">{proc.name}</span>
+                    <span className={proc.color}>{proc.status}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </section>
+
+        {/* Project Showcase Section */}
+        <section className="mb-24">
+          <div className="flex flex-col md:flex-row justify-between items-end mb-8 gap-4">
+            <div>
+              <span className="font-headline text-xs text-secondary font-black tracking-[0.4em] uppercase">
+                Phase_02
+              </span>
+              <h2 className="font-headline text-4xl font-black tracking-tighter text-on-surface">
+                LAB_MODULES
+              </h2>
+            </div>
+            <div className="text-[10px] font-headline text-on-surface-variant tracking-widest text-right">
+              TOTAL_BUILD_COUNT: 12
+              <br />
+              REVISION: STABLE_V.4.2
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-1">
+            {/* Module Card 1 — Primary */}
+            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
+              <div className="flex justify-between items-start mb-8">
+                <div className="w-12 h-12 bg-primary flex items-center justify-center">
+                  <Icon name="hexagon" />
+                </div>
+                <span className="text-[10px] font-headline text-primary opacity-50 font-bold">MOD_01</span>
+              </div>
+              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-primary transition-colors">VANGUARD_CORE</h3>
+              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
+                High-density logic processing unit for sub-orbital navigation arrays and tactical mapping.
+              </p>
+              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">THROUGHPUT</span>
+                  <span className="text-xs font-headline font-black text-on-surface">1.2 TB/S</span>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">LATENCY</span>
+                  <span className="text-xs font-headline font-black text-primary">0.04 MS</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Module Card 2 — Secondary */}
+            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
+              <div className="flex justify-between items-start mb-8">
+                <div className="w-12 h-12 bg-secondary flex items-center justify-center">
+                  <Icon name="waves" />
+                </div>
+                <span className="text-[10px] font-headline text-secondary opacity-50 font-bold">MOD_02</span>
+              </div>
+              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-secondary transition-colors">NEON_PULSE</h3>
+              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
+                Signal amplification module utilizing mercury-cooled superconductors for long-range comms.
+              </p>
+              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">FREQ_RANGE</span>
+                  <span className="text-xs font-headline font-black text-on-surface">900 GHZ</span>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">STATUS</span>
+                  <span className="text-xs font-headline font-black text-secondary">ACTIVE</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Module Card 3 — Tertiary */}
+            <div className="bg-surface-container p-6 group hover:bg-surface-bright transition-colors cursor-pointer border border-outline-variant/10">
+              <div className="flex justify-between items-start mb-8">
+                <div className="w-12 h-12 bg-tertiary flex items-center justify-center">
+                  <span className="material-symbols-outlined text-on-tertiary text-2xl">shield</span>
+                </div>
+                <span className="text-[10px] font-headline text-tertiary opacity-50 font-bold">MOD_03</span>
+              </div>
+              <h3 className="font-headline text-xl font-black text-on-surface mb-2 tracking-tight group-hover:text-tertiary transition-colors">AEGIS_LOGIC</h3>
+              <p className="text-sm text-on-surface-variant mb-6 font-body leading-relaxed">
+                Cryptographic defense layer for multi-tenant cloud architectures and quantum threat mitigation.
+              </p>
+              <div className="flex items-center gap-4 pt-4 border-t border-outline-variant/20">
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">ENCRYPTION</span>
+                  <span className="text-xs font-headline font-black text-on-surface">AES_512Q</span>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-[9px] font-headline text-on-surface-variant">UPTIME</span>
+                  <span className="text-xs font-headline font-black text-tertiary">99.99%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Technical Data Section */}
+        <section className="grid grid-cols-12 gap-6 mb-12">
+          <div className="col-span-12 lg:col-span-4 bg-surface-container-low p-8 monolith-border">
+            <h4 className="font-headline text-xs font-black tracking-widest text-primary mb-6">
+              SYSTEM_INTEGRITY
+            </h4>
+            <div className="space-y-6">
+              {[
+                { label: "MEM_LOAD", value: "88%", width: "88%", color: "bg-primary" },
+                { label: "CPU_STRESS", value: "42%", width: "42%", color: "bg-secondary" },
+                { label: "STORAGE_CAP", value: "12PB", width: "60%", color: "bg-on-surface" },
+              ].map((bar) => (
+                <div key={bar.label}>
+                  <div className="flex justify-between text-[10px] font-headline text-on-surface mb-2 tracking-widest">
+                    <span>{bar.label}</span>
+                    <span>{bar.value}</span>
+                  </div>
+                  <div className="w-full h-1 bg-surface-container-highest">
+                    <div
+                      className={`h-full ${bar.color}`}
+                      style={{ width: bar.width }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="col-span-12 lg:col-span-8 bg-surface-container-highest monolith-border p-1 relative overflow-hidden">
+            <div className="bg-surface p-6 h-full flex flex-col justify-between">
+              <div className="flex justify-between items-center mb-4">
+                <div className="flex gap-2">
+                  <div className="w-2 h-2 bg-error" />
+                  <div className="w-2 h-2 bg-primary" />
+                  <div className="w-2 h-2 bg-secondary" />
+                </div>
+                <span className="font-headline text-[10px] text-on-surface-variant tracking-[0.2em]">
+                  LIVE_FEED // TERMINAL_LOG
+                </span>
+              </div>
+              <div className="font-headline text-[11px] text-primary/80 space-y-1 overflow-hidden h-40">
+                <p>&gt; INITIALIZING_CORE_BOOT...</p>
+                <p>&gt; [OK] LOADING_KERNEL_MODULES</p>
+                <p>&gt; [OK] MOUNTING_FS_ORBITAL</p>
+                <p>&gt; [WARN] LATENCY_SPIKE_DETECTED_SECTOR_04</p>
+                <p>&gt; RE-ROUTING_TRAFFIC_VIA_ARCHIVE_NODE</p>
+                <p>&gt; [OK] HANDSHAKE_ESTABLISHED_TERMINAL_B</p>
+                <p>&gt; ACCESS_GRANTED: USER_LEVEL_05</p>
+                <p className="animate-pulse">&gt; _</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="w-full py-8 px-12 flex flex-col md:flex-row justify-between items-center gap-4 bg-surface-container-lowest border-t-4 border-surface-container">
+        <div className="text-primary font-bold font-headline text-[10px] uppercase tracking-[0.2em]">
+          &copy; 2024 COREWORLDS_TERMINAL. ALL RIGHTS RESERVED.
+          [STABLE_BUILD_V4.2]
+        </div>
+        <div className="flex gap-8">
+          {["DOCS", "API_REF", "SENSORS", "UPLINK"].map((link) => (
+            <a
+              key={link}
+              className="font-headline text-[10px] uppercase tracking-[0.2em] text-slate-600 hover:text-secondary transition-colors duration-150 hover:skew-x-2"
+              href="#"
+            >
+              {link}
+            </a>
+          ))}
+        </div>
+      </footer>
+    </>
  );
 }