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.

apps/web/DESIGN.md

@@ -0,0 +1,94 @@
+# Design System Documentation: The Tactical Monolith
+
+## 1. Overview & Creative North Star
+**Creative North Star: The Tactical Monolith**
+
+This design system is built to evoke the sensation of interacting with a high-clearance orbital research terminal. Inspired by the brutalist, data-heavy aesthetic of *Marathon* and the high-fidelity grit of neon-punk, this system rejects "soft" modernism in favor of **Authoritative Utility**.
+
+We achieve a premium feel not through decoration, but through extreme precision. The design breaks the "template" look by utilizing a strict 0px border-radius across all elements, creating a sense of indestructible, industrial hardware. We leverage intentional asymmetry—placing heavy data blocks against expansive voids—and high-contrast typography scales to ensure the UI feels like a functional tool rather than a marketing site.
+
+---
+
+## 2. Colors & Surface Architecture
+The palette is rooted in deep obsidian (`surface`) and punctuated by high-frequency neons.
+
+### The "No-Line" Rule
+Standard 1px borders are strictly prohibited for sectioning. Structural boundaries must be defined solely through:
+1.  **Tonal Shifts:** Placing a `surface_container_low` section against a `surface` background.
+2.  **Color Blocking:** Using a high-contrast `primary` or `secondary` block to terminate a layout section.
+
+### Surface Hierarchy & Nesting
+Treat the interface as a physical stack of hardware modules.
+*   **Base Layer:** `surface` (#0b0f10) or `surface_container_lowest` (#000000) for the deep background.
+*   **Module Layer:** Use `surface_container` (#151a1c) for primary content areas.
+*   **Active Layer:** Use `surface_bright` (#272d2f) for interactive or elevated data modules.
+Each inner container should be at least one tier higher or lower than its parent to define its importance without needing a stroke.
+
+### The "Glass & Gradient" Rule
+To add "soul" to the utilitarian grid, use Glassmorphism for floating HUD elements. Apply `surface_container_high` at 60% opacity with a `backdrop-filter: blur(20px)`.
+**Signature Textures:** Incorporate subtle linear gradients (e.g., `primary` to `primary_container`) on hero CTAs to simulate the glow of a phosphor monitor.
+
+---
+
+## 3. Typography: The Industrial Voice
+The typography is a dialogue between two distinct voices: the **Command Voice** (Space Grotesk) and the **Data Stream** (Inter).
+
+*   **Display & Headlines (Space Grotesk):** These should feel massive and structural. Use `display-lg` for hero statements, ensuring tight letter-spacing (-0.02em) to mimic industrial stamping.
+*   **Body & Titles (Inter):** High-readability sans-serif for technical descriptions.
+*   **Labels (Space Grotesk):** All-caps monospaced-style accents used for metadata, status indicators, and micro-copy.
+*   **Hierarchy as Identity:** Use a dramatic scale jump between `display-lg` and `label-sm` to create a "technical blueprint" feel. Titles should often be accompanied by a `label-sm` prefix (e.g., "01 // ARCHIVE") to reinforce the lab aesthetic.
+
+---
+
+## 4. Elevation & Depth: Tonal Layering
+In a world of 0px radius and dark mode, depth is created through light and atmosphere, not shadows.
+
+*   **The Layering Principle:** Avoid "drop shadows" on cards. Instead, stack `surface_container_highest` on top of `surface_container_low`. The contrast in luminosity provides the "lift."
+*   **Ambient Shadows:** If a floating element (like a modal) requires a shadow, use a large, 64px blur with 8% opacity using the `primary` color (#aaffdc) to create a "neon glow" rather than a grey shadow.
+*   **The "Ghost Border" Fallback:** For input fields or secondary containers, use a "Ghost Border": the `outline_variant` token at 15% opacity. This provides just enough definition for accessibility without breaking the monolithic aesthetic.
+*   **Atmospheric Layers:** Overlay a 2px scanline pattern (linear-gradient) at 3% opacity over the entire viewport to simulate a CRT terminal.
+
+---
+
+## 5. Components
+
+### Buttons
+*   **Primary:** Solid `primary` background with `on_primary` text. 0px radius. Hover state: `primary_dim` with a 1px "glitch" offset (shift the button 2px right/down).
+*   **Secondary:** Ghost style. `outline` color at 20% opacity for the border. On hover, fills with `secondary` (#ff51fa) and shifts text to `on_secondary`.
+*   **Tertiary:** Text only in `tertiary` (#f3ffca), prefixed with a geometric icon (e.g., `[>]`).
+
+### Chips (Data Tags)
+*   Used for status (e.g., "STABLE", "ERROR").
+*   Style: Solid `surface_container_highest` background, `label-sm` typography. Status-specific accents use `error` (#ff716c) or `primary`.
+
+### Lists & Data Grids
+*   **Forbid Divider Lines.** Separate list items using the spacing scale (e.g., `spacing.4` gap) or alternating backgrounds (`surface_container_low` vs `surface_container_highest`).
+*   Include a `label-sm` timestamp or hex-code for every list item to maintain the lab aesthetic.
+
+### Input Fields
+*   **Text Inputs:** Rectangular, `surface_container_low` background.
+*   **Indicator:** A 2px vertical bar of `primary` on the left side of the input to indicate focus, rather than a full-box outline.
+*   **Helper Text:** Use `label-sm` in `on_surface_variant`.
+
+### Tooltips
+*   High-contrast: `tertiary` (#f3ffca) background with `on_tertiary` text.
+*   0px radius. Appears instantly (no fade) to mimic terminal responsiveness.
+
+---
+
+## 6. Do's and Don'ts
+
+### Do:
+*   **Do** use the Spacing Scale strictly. Gaps should feel intentional and rhythmic.
+*   **Do** use "UI Glitches" (chromatic aberration or slight element offsets) sparingly on hover states or page transitions.
+*   **Do** use bold, geometric iconography (strokes of 2px+) that aligns with the 0px corner logic.
+*   **Do** leverage the `secondary` magenta and `tertiary` lime for critical alerts and "live" data streams.
+
+### Don't:
+*   **Don't** use a border-radius > 0px. Ever.
+*   **Don't** use standard "web safe" blue for links. Use `primary` (cyan) or `secondary` (magenta).
+*   **Don't** use soft transitions. Prefer "hard" cuts or rapid 150ms linear eases to maintain a technical, high-performance feel.
+*   **Don't** center-align long-form text. Keep everything left-aligned to a rigid grid to maintain the "log file" aesthetic.
+
+### Accessibility Note:
+While we utilize high-contrast neons, ensure that all `on_surface` text maintains at least a 4.5:1 contrast ratio against its respective `surface_container`. When using neons like `tertiary` for background elements, always use the dedicated `on_tertiary` (#516700) for text to ensure legibility.

apps/web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/package.json

@@ -10,9 +10,12 @@
     "test": "echo \"no tests yet\""
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.2.2",
     "next": "^15.1.0",
+    "postcss": "^8.5.8",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",

apps/web/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

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);
+}

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>
   );
 }

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>
+    </>
   );
 }

apps/web/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,9 +17,24 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "plugins": [{ "name": "next" }],
-    "paths": { "@/*": ["./src/*"] }
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "next-env.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }