redesign(app): unify authenticated UI with landing page visual language

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Changed
+- **Authenticated app UI redesigned** to match the landing page (`Precept.Web/src/pages/Landing.tsx`) visual language end-to-end. Presentation-only refactor across 13 files: dashboard, applications tracker, story bank, quiz mode, JD matcher, readiness, settings, login, sign-in panel, layout shell, 404 page, home page, and subscription. Adopts the landing palette (`#02050A`/`#06090F` base, teal/violet/rose accents), typography stack (Bricolage Grotesque + Instrument Serif italic emphasis + Geist + JetBrains Mono), pill CTAs, IDE-style code mockups, dot-grid + radial-halo backgrounds, eyebrow status pills, and the same glass/gradient card treatments. No changes to data fetching, state, hooks, routing, business logic, or `AuthContext`; component props and return contracts are preserved.
+
 ## [0.2.0] - 2026-06-28
 
 _R1 candidate — Technical Readiness (Skills Matrix Visualizer)._

Precept.Web/src/components/ui/8bit-not-found1.tsx

@@ -1,7 +1,25 @@
-import { cn } from "../../lib/utils";
-import { Button } from "./8bit-button";
-import { useAuth } from "../../AuthContext";
-import { Link } from "react-router-dom";
+import { useAuth } from '../../AuthContext';
+import { Link } from 'react-router-dom';
+import { ArrowLeft, Terminal, AlertTriangle } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const C = {
+  bg0: '#02050A',
+  bg1: '#06090F',
+  bg2: '#0B0F17',
+  bg3: '#11161F',
+  ink: '#E6EBF2',
+  inkDim: '#9CA8B8',
+  inkMute: '#5A6678',
+  hair: 'rgba(255,255,255,0.07)',
+  hair2: 'rgba(255,255,255,0.12)',
+  teal: '#2dd4bf',
+  tealDim: 'rgba(45,212,191,0.14)',
+  violet: '#8b5cf6',
+  rose: '#f43f5e',
+  amber: '#f59e0b',
+  emerald: '#10b981',
+} as const;
 
 interface NotFound1Props {
   className?: string;
@@ -12,55 +30,128 @@ interface NotFound1Props {
 }
 
 export default function NotFound1({
-  title = "SYSTEM OVERRIDE",
-  description = "The requested sector is offline. Check your coordinates and try again.",
-  cta = "Return to Safe Zone",
-  imageSrc = "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=256&auto=format&fit=crop", 
+  title = 'Off the grid.',
+  description = 'The route you were chasing has either been deprecated, moved, or never existed in this build.',
+  cta = 'Return to safety',
   className,
 }: NotFound1Props) {
   const { isAuthenticated } = useAuth();
-  const href = isAuthenticated ? "/dashboard" : "/";
+  const href = isAuthenticated ? '/dashboard' : '/';
 
   return (
     <div
       className={cn(
-        "min-h-screen flex flex-col items-center justify-center w-full gap-5 bg-brand-secondary text-brand-text px-4 py-16 text-center md:py-24 relative overflow-hidden",
+        'font-body min-h-screen w-full flex flex-col items-center justify-center px-6 py-16 text-center relative overflow-hidden isolate',
         className,
       )}
+      style={{ background: C.bg0, color: C.ink }}
+      data-testid="not-found"
     >
-      <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-brand-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-brand-border)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-20 [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
+      {/* dot grid + halos */}
+      <div className="bg-dotgrid pointer-events-none absolute inset-0 opacity-50 z-0" />
+      <div
+        className="pointer-events-none absolute left-1/2 top-[10%] h-[560px] w-[1000px] -translate-x-1/2 rounded-[50%] z-0"
+        style={{
+          background: `radial-gradient(closest-side, rgba(244,63,94,0.14), rgba(139,92,246,0.10) 45%, transparent 75%)`,
+          filter: 'blur(4px)',
+        }}
+      />
 
-      <div className="font-heading font-bold text-7xl tracking-tighter sm:text-9xl text-brand-primary drop-shadow-[0_0_15px_rgba(50,185,200,0.3)] z-10 animate-[pulse_4s_ease-in-out_infinite]">
-        404
-      </div>
+      <div className="relative z-10 max-w-[820px] mx-auto">
+        {/* eyebrow */}
+        <span
+          className="inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-[10.5px] font-medium uppercase tracking-[0.18em]"
+          style={{ background: `${C.rose}14`, border: `1px solid ${C.rose}33`, color: C.rose }}
+        >
+          <AlertTriangle size={11} />
+          404 · route missing
+        </span>
 
-      {imageSrc && (
-        <div className="flex justify-center -mt-6 z-10">
-          <div className="relative group">
-            <div className="absolute -inset-1 bg-gradient-to-r from-brand-primary to-blue-500 rounded-lg blur opacity-25 group-hover:opacity-75 transition duration-1000 group-hover:duration-200"></div>
-            <img
-              alt="404"
-              className="relative rounded-lg object-cover border border-brand-border grayscale group-hover:grayscale-0 transition-all duration-500"
-              height={200}
-              src={imageSrc}
-              width={200}
-              loading="lazy"
-              decoding="async"
-            />
-          </div>
+        {/* huge serif glyph row */}
+        <div className="mt-7 flex items-center justify-center gap-2 select-none">
+          <span className="font-display font-bold leading-none" style={{ color: C.ink, fontSize: 'clamp(80px,16vw,180px)', letterSpacing: '-0.04em' }}>4</span>
+          <span className="font-editorial leading-none" style={{ color: C.teal, fontWeight: 400, fontSize: 'clamp(80px,16vw,180px)', letterSpacing: '-0.02em' }}>0</span>
+          <span className="font-display font-bold leading-none" style={{ color: C.ink, fontSize: 'clamp(80px,16vw,180px)', letterSpacing: '-0.04em' }}>4</span>
         </div>
-      )}
 
-      <h1 className="font-heading font-bold text-3xl tracking-tight sm:text-5xl text-brand-text z-10 mt-4">
-        {title}
-      </h1>
+        {/* underline scribble (matches landing hero) */}
+        <svg className="mx-auto mt-3" width="220" height="10" viewBox="0 0 300 10" preserveAspectRatio="none" aria-hidden="true">
+          <path d="M2,7 Q75,1 150,5 T298,4" stroke={C.teal} strokeWidth="1.6" fill="none" strokeLinecap="round" opacity="0.6" />
+        </svg>
 
-      <p className="font-mono text-brand-text-muted text-sm sm:text-base tracking-wide z-10 max-w-prose">{description}</p>
+        <h1 className="mt-7 font-display font-bold leading-[1.05] mx-auto max-w-[640px]" style={{ color: C.ink, fontSize: 'clamp(28px,4.4vw,48px)' }}>
+          {title.includes(' ') ? (
+            <>
+              {title.split(' ').slice(0, -1).join(' ')}{' '}
+              <span className="font-editorial" style={{ color: C.amber, fontWeight: 400 }}>
+                {title.split(' ').slice(-1)[0]}
+              </span>
+            </>
+          ) : title}
+        </h1>
+        <p className="mt-5 font-body text-[15.5px] leading-relaxed mx-auto max-w-[560px]" style={{ color: C.inkDim }}>
+          {description}
+        </p>
 
-      <div className="flex justify-center mt-6 z-10">
-        <Link to={href}>
-          <Button>{cta}</Button>
-        </Link>
+        {/* IDE-style code block — echoes hero mockup in landing */}
+        <pre
+          className="mx-auto mt-9 max-w-[520px] overflow-hidden rounded-xl px-5 py-4 font-mono text-[12px] leading-[1.7] text-left"
+          style={{
+            background: `linear-gradient(180deg, ${C.bg2} 0%, ${C.bg1} 100%)`,
+            color: C.inkDim,
+            border: `1px solid ${C.hair2}`,
+            boxShadow: '0 30px 60px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05)',
+          }}
+        >
+          <span style={{ color: C.violet }}>const</span>{' '}
+          <span style={{ color: C.ink }}>route</span>{' '}
+          <span style={{ color: C.inkMute }}>=</span>{' '}
+          <span style={{ color: C.amber }}>await</span>{' '}
+          <span style={{ color: C.ink }}>router</span>
+          <span style={{ color: C.inkMute }}>.</span>
+          <span style={{ color: C.teal }}>resolve</span>
+          <span style={{ color: C.inkMute }}>(</span>
+          <span style={{ color: C.amber }}>"{typeof window !== 'undefined' ? window.location.pathname : '/'}"</span>
+          <span style={{ color: C.inkMute }}>);</span>
+          {'\n'}
+          <span style={{ color: C.rose }}>throw new</span>{' '}
+          <span style={{ color: C.ink }}>RouteNotFoundException</span>
+          <span style={{ color: C.inkMute }}>(</span>
+          <span style={{ color: C.amber }}>"check coordinates"</span>
+          <span style={{ color: C.inkMute }}>);</span>
+        </pre>
+
+        {/* CTAs */}
+        <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
+          <Link
+            to={href}
+            data-testid="not-found-primary-cta"
+            className="group inline-flex items-center gap-2 rounded-full px-6 py-3.5 font-mono text-[12px] font-semibold uppercase tracking-[0.16em] transition-all"
+            style={{
+              background: C.ink,
+              color: C.bg0,
+              boxShadow: `0 0 0 1px ${C.ink}, 0 18px 60px -20px rgba(45,212,191,0.5)`,
+            }}
+          >
+            <ArrowLeft size={13} className="transition-transform group-hover:-translate-x-0.5" />
+            {cta}
+          </Link>
+          <a
+            href="https://github.com/austinchima/Precept"
+            target="_blank"
+            rel="noreferrer"
+            data-testid="not-found-secondary-cta"
+            className="inline-flex items-center gap-2 rounded-full border px-6 py-3.5 font-mono text-[12px] font-semibold uppercase tracking-[0.16em]"
+            style={{
+              background: 'rgba(255,255,255,0.025)',
+              borderColor: C.hair2,
+              color: C.ink,
+              backdropFilter: 'blur(8px)',
+            }}
+          >
+            <Terminal size={13} /> View on GitHub
+          </a>
+        </div>
       </div>
     </div>
   );