visionos-monorepo 0.1.0

package/client/src/components/ManifestoPage.tsx

@@ -0,0 +1,1126 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import {
+  BEGINNER_LESSONS,
+  LEARNING_TRACKS,
+  type VisionOsUserProfile,
+  type LearningProgress,
+} from "../../../shared/src/index.js";
+import { getProgress, clearStoredAuthToken } from "../lib/api.js";
+
+/* ────────────────────────────────────────────────────────────────
+   Sub-components
+   ──────────────────────────────────────────────────────────────── */
+
+function ScanlineDivider({
+  variant = "both",
+  height = 120,
+  style,
+}: {
+  variant?: "both" | "fade-top" | "fade-bottom";
+  height?: number;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div
+      className={`scanline-divider scanline-divider--${variant} scanline-reveal`}
+      style={{ height, ...style }}
+    />
+  );
+}
+
+function TerminalWindow({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <div className="terminal-window" style={style}>
+      <div className="terminal-titlebar">
+        <span className="terminal-dot terminal-dot--red" />
+        <span className="terminal-dot terminal-dot--yellow" />
+        <span className="terminal-dot terminal-dot--green" />
+      </div>
+      <div className="terminal-body">{children}</div>
+    </div>
+  );
+}
+
+function TerminalLine({
+  type,
+  children,
+}: {
+  type?: "prompt" | "output" | "success";
+  children: React.ReactNode;
+}) {
+  return (
+    <span className="terminal-line">
+      {type === "prompt" ? (
+        <>
+          <span className="t-prompt">~$</span>{" "}
+          <span className="command">{children}</span>
+        </>
+      ) : type === "output" ? (
+        <span className="output">{children}</span>
+      ) : type === "success" ? (
+        <span className="success">{children}</span>
+      ) : (
+        children
+      )}
+    </span>
+  );
+}
+
+/** Helper: wrap each word in a <span className="word"> for stagger animation */
+function WordStagger({
+  text,
+  className = "",
+  tag: Tag = "p",
+  style,
+}: {
+  text: string;
+  className?: string;
+  tag?: keyof JSX.IntrinsicElements;
+  style?: React.CSSProperties;
+}) {
+  const TagComponent = Tag as any;
+  return (
+    <TagComponent className={`word-stagger ${className}`} style={style}>
+      {text.split(" ").map((word, i) => (
+        <span className="word" key={i}>
+          {word}&nbsp;
+        </span>
+      ))}
+    </TagComponent>
+  );
+}
+
+/* ────────────────────────────────────────────────────────────────
+   ManifestoPage
+   ──────────────────────────────────────────────────────────────── */
+
+interface ManifestoPageProps {
+  user: VisionOsUserProfile | null;
+}
+
+export function ManifestoPage({ user }: ManifestoPageProps) {
+  const screenRef = useRef<HTMLDivElement>(null);
+  const [scrolled, setScrolled] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [scrollHidden, setScrollHidden] = useState(false);
+  const [progress, setProgress] = useState<LearningProgress[]>([]);
+
+  useEffect(() => {
+    if (!user) {
+      setProgress([]);
+      return;
+    }
+
+    let cancelled = false;
+
+    async function fetchProgress() {
+      try {
+        const res = await getProgress();
+        if (!cancelled) {
+          setProgress(res.progress);
+        }
+      } catch (err) {
+        console.error("Failed to load progress telemetry:", err);
+      }
+    }
+
+    // 1. Initial fetch
+    void fetchProgress();
+
+    // 2. Poll every 4 seconds for real-time terminal sync
+    const interval = setInterval(() => {
+      void fetchProgress();
+    }, 4000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [user]);
+
+  // ── Smooth scroll behavior ────────────────────────────────────
+  useEffect(() => {
+    document.documentElement.style.scrollBehavior = "smooth";
+    return () => {
+      document.documentElement.style.scrollBehavior = "";
+    };
+  }, []);
+
+  // ── Scroll Effects ────────────────────────────────────────────
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+      if (window.scrollY > 100) setScrollHidden(true);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  // ── IntersectionObserver for ALL reveal animations ────────────
+  useEffect(() => {
+    const els = screenRef.current?.querySelectorAll(
+      ".reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .word-stagger, .hr-reveal, .scanline-reveal, .animated-separator"
+    );
+    if (!els) return;
+
+    const obs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.classList.add("visible");
+            obs.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
+    );
+    els.forEach((el) => obs.observe(el));
+
+    return () => obs.disconnect();
+  }, [user]);
+
+  // ── Terminal line re-trigger on scroll ────────────────────────
+  useEffect(() => {
+    const terminals = screenRef.current?.querySelectorAll(".terminal-window");
+    if (!terminals) return;
+
+    const obs = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            const lines = e.target.querySelectorAll(".terminal-line");
+            lines.forEach((line) => {
+              (line as HTMLElement).style.animation = "none";
+              void (line as HTMLElement).offsetHeight;
+              (line as HTMLElement).style.animation = "";
+            });
+            obs.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.3 }
+    );
+    terminals.forEach((el) => obs.observe(el));
+    return () => obs.disconnect();
+  }, [user]);
+
+  // ── Copy handler ──────────────────────────────────────────────
+  const handleCopy = useCallback(async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1800);
+  }, []);
+
+  const today = new Date();
+  const formattedDate = `${String(today.getMonth() + 1).padStart(2, "0")}/${String(today.getDate()).padStart(2, "0")}/${String(today.getFullYear()).slice(-2)}`;
+
+  const trackIcons: Record<string, string> = {
+    git: "G",
+    linux: "L",
+    "react-cli": "R",
+    "os-commands": "OS",
+  };
+
+  return (
+    <div className="monitor-bezel">
+      <div className="monitor-screen" ref={screenRef}>
+        {/* ── STICKY HEADER ─────────────────────────────── */}
+        <header className={`m-site-header ${scrolled ? "scrolled" : ""}`}>
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta">v0.1.0 — CLI-First Learning</span>
+          </div>
+          <nav className="header-nav">
+            <a href="#tracks">Tracks</a>
+            <a href="#commands">Commands</a>
+            <a href="/creator" className="creator-nav-link">Create Lessons</a>
+            {user ? (
+              <>
+                <span className="user-nav-profile" style={{ color: "var(--m-ink)", fontWeight: 700, fontSize: "0.85rem", marginRight: 8, textTransform: "uppercase", fontFamily: "var(--font-mono)", opacity: 0.8 }}>
+                  Hi, {user.name}
+                </span>
+                <a
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    clearStoredAuthToken();
+                    window.location.href = "/";
+                  }}
+                  className="logout-nav-link"
+                  style={{ color: "var(--accent-red)" }}
+                >
+                  Logout
+                </a>
+              </>
+            ) : (
+              <>
+                <a href="/login">Login</a>
+                <a href="/register">Register</a>
+              </>
+            )}
+            <a
+              href="https://github.com/darklegend91/VisionOS"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub <span className="arrow">↗</span>
+            </a>
+          </nav>
+        </header>
+
+        {/* ── LOGGED-IN TERMINAL SECTION (Image 1) ─────── */}
+        {user && (
+          <section className="logged-in-terminal-section">
+            <div className="logged-in-header">
+              <div className="logged-in-header-left">
+                <span className="logged-in-header-brand">VisionOS, Inc.</span>
+                <span className="logged-in-header-copy">
+                  Copyright 2025
+                  <br />
+                  All Rights Reserved
+                </span>
+              </div>
+              <div className="logged-in-header-nav">
+                <a href="#tracks">
+                  tracks <span className="arrow">↗</span>
+                </a>
+                <a href="#commands">
+                  commands <span className="arrow">↗</span>
+                </a>
+                <a href="/creator" className="creator-nav-link">
+                  create lessons <span className="arrow">↗</span>
+                </a>
+                <a href="#hero">@visionos</a>
+              </div>
+            </div>
+
+            <div className="logged-in-quote reveal">
+              CD, RM, PING: COMMANDS WE MEMORIZED
+              <br />
+              TO TRANSLATE OUR DESIRES INTO ACTIONS...
+              <br />
+              IF WE CHOSE TO LEARN THEM.
+              <span className="typewriter-cursor typewriter-cursor--dark" />
+            </div>
+
+            <div className="logged-in-meta reveal delay-1">
+              Last login: {today.toDateString()}, {today.toLocaleTimeString()}
+              <br />
+              Welcome back, {user.name} · {user.email}
+            </div>
+
+            {/* ── User Log Details Panel ────────────────── */}
+            <div className="user-log-details reveal delay-2">
+              <div className="user-log-grid">
+                <div className="user-log-field">
+                  <span className="user-log-label">Session ID</span>
+                  <span className="user-log-value user-log-value--highlight">
+                    {user.sessionId ? user.sessionId.slice(0, 12) + "..." : "ACTIVE"}
+                  </span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">User</span>
+                  <span className="user-log-value">{user.name}</span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">Email</span>
+                  <span className="user-log-value">{user.email}</span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">Status</span>
+                  <span className="user-log-value user-log-value--green">
+                    ● ONLINE
+                  </span>
+                </div>
+
+                <div className="user-log-divider" />
+
+                <div className="user-log-field">
+                  <span className="user-log-label">Runtime</span>
+                  <span className="user-log-value">Node.js v20+</span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">Port</span>
+                  <span className="user-log-value user-log-value--highlight">
+                    :5173
+                  </span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">Tracks Available</span>
+                  <span className="user-log-value">{LEARNING_TRACKS.length}</span>
+                </div>
+                <div className="user-log-field">
+                  <span className="user-log-label">Login Time</span>
+                  <span className="user-log-value">
+                    {today.toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* ── Progress Telemetry Dashboard ────────────────── */}
+            <div className="progress-telemetry reveal delay-3" style={{ marginTop: 40 }}>
+              <div className="telemetry-title">
+                <span className="telemetry-pulse">●</span>
+                // TRACK TELEMETRY & SYSTEM PROGRESS
+              </div>
+              <div className="telemetry-grid">
+                {LEARNING_TRACKS.map((track) => {
+                  const trackLessons = BEGINNER_LESSONS.filter((l) => l.trackId === track.id);
+                  const trackProgress = progress.find((p) => p.trackId === track.id);
+                  const completedCount = trackProgress?.completedLessonIds?.length ?? 0;
+                  const totalLessons = trackLessons.length;
+                  const percentage = totalLessons > 0 ? Math.round((completedCount / totalLessons) * 100) : 0;
+
+                  const isTrackCompleted = totalLessons > 0 && completedCount === totalLessons;
+                  const activeLessonId = trackProgress?.currentLessonId;
+                  const activeLesson = activeLessonId ? trackLessons.find((l) => l.id === activeLessonId) : null;
+
+                  // Render ASCII Progress Bar
+                  const totalBlocks = 20;
+                  const filledBlocks = Math.round((percentage / 100) * totalBlocks);
+                  const emptyBlocks = totalBlocks - filledBlocks;
+                  const progressBar = `[${"█".repeat(filledBlocks)}${"░".repeat(emptyBlocks)}] ${percentage}%`;
+
+                  return (
+                    <div key={track.id} className="telemetry-card">
+                      <div className="telemetry-track-header">
+                        <span className="telemetry-track-name">{track.label}</span>
+                        {isTrackCompleted ? (
+                          <span className="telemetry-track-status telemetry-track-status--completed">
+                            COMPLETED
+                          </span>
+                        ) : activeLesson ? (
+                          <span className="telemetry-track-status telemetry-track-status--active">
+                            IN PROGRESS
+                          </span>
+                        ) : (
+                          <span className="telemetry-track-status telemetry-track-status--inactive">
+                            NOT STARTED
+                          </span>
+                        )}
+                      </div>
+
+                      <div className="telemetry-bar">
+                        {progressBar}
+                      </div>
+
+                      <div className="telemetry-stats">
+                        <span>LESSONS COMPLETED</span>
+                        <span>{completedCount} / {totalLessons}</span>
+                      </div>
+
+                      {activeLesson && (
+                        <div className="telemetry-active-lesson">
+                          <span style={{ display: "block", fontSize: "0.6rem", color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 2 }}>
+                            Current active lesson
+                          </span>
+                          <span style={{ fontWeight: 600 }}>{activeLesson.title}</span>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* ── HERO ──────────────────────────────────────── */}
+        <section className="m-section m-section--hero" id="hero">
+          <div className="hero-content">
+            <p className="text-label reveal">
+              Once upon a time, we typed a command in
+            </p>
+            <div style={{ marginTop: 28, overflow: "hidden" }}>
+              <span className="scanline-text glitch-text reveal delay-1">
+                TERMIN<br className="mobile-break" />AL.
+              </span>
+            </div>
+            <p
+              className="text-hero-lead reveal-blur delay-3"
+              style={{ marginTop: 40 }}
+            >
+              The command line was the first interface.
+              <br />
+              It's time we <em>learned</em> it properly.
+              <span className="typewriter-cursor" />
+            </p>
+          </div>
+
+          <div className="hero-prompt-container reveal delay-4">
+            <div className="hero-prompt">
+              <span>▸</span>
+              <span className="hero-prompt-key">enter</span>
+              <span>to continue</span>
+            </div>
+          </div>
+
+          {/* Scroll Indicator */}
+          <div
+            className={`scroll-indicator ${scrollHidden ? "hidden" : ""}`}
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            >
+              <rect x="7" y="2" width="10" height="16" rx="5" />
+              <line x1="12" y1="6" x2="12" y2="9" />
+            </svg>
+            <span className="arrow">↓</span>
+          </div>
+        </section>
+
+        {/* ── SCANLINE DIVIDER ──────────────────────────── */}
+        <ScanlineDivider />
+
+        {/* ── ANIMATED SEPARATOR ─────────────────────────── */}
+        <div className="animated-separator" />
+
+        {/* ── NARRATIVE 1 — THE ORIGIN ──────────────────── */}
+        <section className="m-section" id="origin">
+          <div className="split-layout split-layout--text-left split-layout--center">
+            <div className="reveal-left">
+              <WordStagger
+                text="The command line was the original interface."
+                className="text-narrative"
+                tag="p"
+              />
+              <p
+                className="text-narrative text-narrative--muted reveal-blur delay-2"
+                style={{ marginTop: 20 }}
+              >
+                Raw, powerful, unfiltered. Before every GUI, before every app —
+                there was a blinking cursor and an empty prompt.
+              </p>
+            </div>
+
+            <div className="reveal-right delay-2">
+              <TerminalWindow>
+                <TerminalLine type="prompt">whoami</TerminalLine>
+                <TerminalLine type="output">learner</TerminalLine>
+                <TerminalLine>&nbsp;</TerminalLine>
+                <TerminalLine type="prompt">
+                  echo "hello, terminal"
+                </TerminalLine>
+                <TerminalLine type="success">hello, terminal</TerminalLine>
+                <TerminalLine>&nbsp;</TerminalLine>
+                <TerminalLine type="prompt">█</TerminalLine>
+              </TerminalWindow>
+              <div className="figure-caption" style={{ marginTop: 20 }}>
+                <span className="figure-label">Fig 1</span>
+                <span className="figure-desc">
+                  The terminal — where computing began. A blinking cursor,
+                  infinite possibility.
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── HR animated divider ────────────────────────── */}
+        <hr className="hr-reveal" />
+
+        {/* ── TRANSITION — GIANT TEXT ───────────────────── */}
+        <section
+          className="m-section"
+          style={{ padding: "var(--space-xxl) 0" }}
+        >
+          <ScanlineDivider
+            variant="fade-bottom"
+            height={60}
+            style={{ marginBottom: 32 }}
+          />
+          <div className="scanline-band reveal-scale">
+            <span
+              className="scanline-text glitch-text"
+              style={{ textAlign: "center", display: "block" }}
+            >
+              PRACTICE
+            </span>
+          </div>
+          <ScanlineDivider
+            variant="fade-top"
+            height={60}
+            style={{ marginTop: 32 }}
+          />
+          <div
+            style={{
+              textAlign: "center",
+              padding: "0 60px",
+              marginTop: "var(--space-lg)",
+            }}
+          >
+            <WordStagger
+              text="Now, we believe it's time for a future where the terminal becomes your classroom."
+              className="text-narrative"
+              tag="p"
+              style={{ maxWidth: 600, margin: "0 auto" }}
+            />
+          </div>
+        </section>
+
+        {/* ── ANIMATED SEPARATOR ─────────────────────────── */}
+        <div className="animated-separator" />
+
+        {/* ── MEET VISIONOS ────────────────────────────── */}
+        <section className="m-section" id="about">
+          <div className="reveal">
+            <p className="text-label">Introducing</p>
+            <h2 className="text-section-title" style={{ marginTop: 8 }}>
+              Meet VisionOS
+            </h2>
+            <p className="text-section-subtitle" style={{ marginTop: 4 }}>
+              A CLI-first learning platform.
+            </p>
+          </div>
+
+          <div style={{ marginTop: "var(--space-lg)" }}>
+            <div className="split-layout split-layout--text-left split-layout--center">
+              <div className="reveal-left delay-1">
+                <WordStagger
+                  text="The best way to learn terminal commands is by doing — not reading."
+                  className="text-narrative"
+                  tag="p"
+                />
+                <p className="m-text-body reveal-blur delay-3" style={{ marginTop: 24 }}>
+                  VisionOS is a guided, interactive learning environment that
+                  lives right inside your terminal. Install it, pick a track,
+                  and start typing real commands — with real-time validation,
+                  progress tracking, and structured lessons.
+                </p>
+              </div>
+              <div className="reveal-right delay-2">
+                <TerminalWindow>
+                  <TerminalLine type="prompt">
+                    npm install -g visionos-cli
+                  </TerminalLine>
+                  <TerminalLine type="output">
+                    + visionos-cli@0.1.0 installed
+                  </TerminalLine>
+                  <TerminalLine>&nbsp;</TerminalLine>
+                  <TerminalLine type="prompt">visionos start</TerminalLine>
+                  <TerminalLine type="success">
+                    &nbsp; ✓ VisionOS runtime started
+                  </TerminalLine>
+                  <TerminalLine type="success">
+                    &nbsp; ✓ Server running at 127.0.0.1:5173
+                  </TerminalLine>
+                  <TerminalLine type="output">
+                    &nbsp; → Opening dashboard...
+                  </TerminalLine>
+                </TerminalWindow>
+                <div className="figure-caption" style={{ marginTop: 20 }}>
+                  <span className="figure-label">Fig 3</span>
+                  <span className="figure-desc">
+                    Two commands. That's all it takes to enter a guided terminal
+                    classroom.
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── SCANLINE DIVIDER ──────────────────────────── */}
+        <ScanlineDivider height={60} />
+
+        {/* ── HOW IT WORKS ─────────────────────────────── */}
+        <section className="m-section" id="how">
+          <div className="reveal">
+            <p className="text-label">How it works</p>
+            <h2 className="text-section-title" style={{ marginTop: 8 }}>
+              Three steps to mastery
+            </h2>
+          </div>
+          <div className="steps-grid">
+            {[
+              {
+                num: "01",
+                title: "Install",
+                desc: "Install VisionOS globally with a single npm command. No config, no fuss.",
+                code: "npm i -g visionos-cli",
+              },
+              {
+                num: "02",
+                title: "Start",
+                desc: "Launch the runtime. VisionOS spins up a local server and opens your dashboard.",
+                code: "visionos start",
+              },
+              {
+                num: "03",
+                title: "Learn",
+                desc: "Pick a learning track, follow guided lessons, and practice real commands with instant feedback.",
+                code: "visionos open",
+              },
+            ].map((step, i) => (
+              <div key={step.num} className={`step-card magnetic-hover reveal delay-${i + 1}`}>
+                <span className="step-number">{step.num} —</span>
+                <h3 className="step-title">{step.title}</h3>
+                <p className="m-text-body" style={{ maxWidth: "none" }}>
+                  {step.desc}
+                </p>
+                <code className="step-code">{step.code}</code>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── HR animated divider ────────────────────────── */}
+        <hr className="hr-reveal" />
+
+        {/* ── LEARNING TRACKS ──────────────────────────── */}
+        <section className="m-section" id="tracks">
+          <div className="reveal">
+            <p className="text-label">Learning Tracks</p>
+            <h2 className="text-section-title" style={{ marginTop: 8 }}>
+              Pick your path
+            </h2>
+            <p className="m-text-body reveal-blur delay-1" style={{ marginTop: 16 }}>
+              Four structured tracks, each with guided lessons that build on
+              each other. Start from basics, reach mastery.
+            </p>
+          </div>
+          <div className="m-tracks-grid">
+            {LEARNING_TRACKS.map((track, i) => (
+              <div
+                key={track.id}
+                className={`m-track-card magnetic-hover reveal delay-${i + 1}`}
+              >
+                <div className="m-track-card-icon">
+                  {trackIcons[track.id] ?? track.label[0]}
+                </div>
+                <h3 className="m-track-card-title">{track.label}</h3>
+                <p className="m-track-card-desc">{track.description}</p>
+                <div style={{ marginTop: 18, display: "grid", gap: 8 }}>
+                  {BEGINNER_LESSONS.filter((lesson) => lesson.trackId === track.id).map((lesson) => {
+                    const trackProgress = progress.find((p) => p.trackId === track.id);
+                    const isCompleted = trackProgress?.completedLessonIds?.includes(lesson.id) ?? false;
+                    const isActive = trackProgress?.currentLessonId === lesson.id;
+
+                    return (
+                      <div
+                        key={lesson.id}
+                        style={{
+                          padding: "10px 12px",
+                          background: "rgba(250, 250, 248, 0.56)",
+                          border: "1px solid rgba(0,0,0,0.06)",
+                          borderRadius: "var(--radius-md)",
+                          position: "relative"
+                        }}
+                      >
+                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
+                          <span style={{ display: "block", color: "var(--m-ink)", fontSize: "0.76rem", fontWeight: 800 }}>
+                            {lesson.title}
+                          </span>
+                          <div style={{ display: "flex", gap: 4, flexShrink: 0 }}>
+                            {user && isCompleted && (
+                              <span className="lesson-status-badge lesson-status-badge--completed">COMPLETED</span>
+                            )}
+                            {user && isActive && (
+                              <span className="lesson-status-badge lesson-status-badge--active">ACTIVE</span>
+                            )}
+                          </div>
+                        </div>
+                        <span style={{ display: "block", marginTop: 4, color: "var(--ink-muted)", fontSize: "0.7rem", lineHeight: 1.45 }}>
+                          {lesson.steps.length} steps · {lesson.estimatedMinutes} min
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ── ANIMATED SEPARATOR ─────────────────────────── */}
+        <div className="animated-separator" />
+
+        {/* ── SCANLINE DIVIDER ──────────────────────────── */}
+        <ScanlineDivider height={60} />
+
+        {/* ── CLI COMMANDS REFERENCE ────────────────────── */}
+        <section className="m-section" id="commands">
+          <div className="split-layout split-layout--text-left">
+            <div>
+              <div className="reveal">
+                <p className="text-label">CLI Reference</p>
+                <h2 className="text-section-title" style={{ marginTop: 8 }}>
+                  Built for
+                  <br />
+                  the terminal
+                </h2>
+                <p className="m-text-body reveal-blur delay-1" style={{ marginTop: 20 }}>
+                  Every interaction happens through clean, memorable commands.
+                  No GUI required.
+                </p>
+              </div>
+              <div
+                className="commands-list reveal delay-2"
+                style={{ marginTop: 36 }}
+              >
+                {[
+                  {
+                    cmd: "visionos start",
+                    desc: "Login, choose a track, and preview a lesson",
+                  },
+                  {
+                    cmd: "visionos login",
+                    desc: "Sign in or create an account through the browser",
+                  },
+                  {
+                    cmd: "visionos lessons",
+                    desc: "Browse beginner lessons for every track",
+                  },
+                  {
+                    cmd: "visionos open",
+                    desc: "Open the learning dashboard in your browser",
+                  },
+                  {
+                    cmd: "visionos userinfo",
+                    desc: "Display your profile & learning progress",
+                  },
+                  {
+                    cmd: "visionos status",
+                    desc: "Check if the runtime server is running",
+                  },
+                  {
+                    cmd: "visionos logout",
+                    desc: "Sign out and clear session data",
+                  },
+                ].map((row) => (
+                  <div key={row.cmd} className="command-row">
+                    <span className="command-name">{row.cmd}</span>
+                    <span className="command-desc">{row.desc}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div
+              className="reveal-right delay-3"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <div className="access-card">
+                <div className="access-card-stripe" />
+                <div className="access-card-content">
+                  <div>
+                    <span className="access-card-label">
+                      Terminal Access Card
+                    </span>
+                    <span className="access-card-value">
+                      VisionOS{" "}
+                      <span style={{ color: "var(--accent-teal)" }}>CLI</span>
+                    </span>
+                  </div>
+                  <div className="access-card-row">
+                    <div className="access-card-field">
+                      <span className="access-card-label">Version</span>
+                      <span className="access-card-value access-card-mono">
+                        0.1.0
+                      </span>
+                    </div>
+                    <div className="access-card-field">
+                      <span className="access-card-label">Runtime</span>
+                      <span className="access-card-value access-card-mono">
+                        Node.js
+                      </span>
+                    </div>
+                  </div>
+                  <div className="access-card-row">
+                    <div className="access-card-field">
+                      <span className="access-card-label">Port</span>
+                      <span className="access-card-value access-card-mono">
+                        4000
+                      </span>
+                    </div>
+                    <div className="access-card-field">
+                      <span className="access-card-label">Tracks</span>
+                      <span className="access-card-value access-card-mono">
+                        4
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── CTA — START YOUR JOURNEY ─────────────────── */}
+        <section
+          className="m-section"
+          style={{ paddingBottom: "var(--space-xxl)" }}
+          id="cta"
+        >
+          <div
+            className="scanline-band reveal-scale"
+            style={{ marginBottom: "var(--space-xl)" }}
+          >
+            <span
+              className="scanline-text glitch-text"
+              style={{
+                textAlign: "center",
+                display: "block",
+                fontSize: "clamp(3rem, 8vw, 7rem)",
+              }}
+            >
+              BEGIN.
+            </span>
+          </div>
+
+          <div className="split-layout split-layout--text-left split-layout--center">
+            <div className="reveal-left">
+              <p className="text-label">Get Started</p>
+              <h2 className="text-section-title" style={{ marginTop: 8 }}>
+                Start your
+                <br />
+                terminal journey
+              </h2>
+              <p className="m-text-body reveal-blur delay-1" style={{ marginTop: 20 }}>
+                One command to install. One command to learn. The terminal
+                awaits.
+              </p>
+
+              <div
+                className={`copy-command ${copied ? "copied" : ""}`}
+                role="button"
+                tabIndex={0}
+                aria-label="Copy install command"
+                onClick={() => void handleCopy("npm install -g visionos-cli")}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ")
+                    void handleCopy("npm install -g visionos-cli");
+                }}
+              >
+                <span style={{ opacity: 0.4 }}>$</span>
+                <span>npm install -g visionos-cli</span>
+                <span className="copy-icon">
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                  >
+                    <rect x="9" y="9" width="13" height="13" rx="2" />
+                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                  </svg>
+                </span>
+                <span className="copied-tooltip">Copied!</span>
+              </div>
+
+              <p className="text-label" style={{ marginTop: 24 }}>
+                Then run{" "}
+                <strong style={{ color: "var(--m-ink)", fontWeight: 700 }}>
+                  visionos start
+                </strong>
+              </p>
+            </div>
+
+            <div
+              className="reveal-right delay-2"
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <TerminalWindow style={{ width: "100%", maxWidth: 400 }}>
+                <TerminalLine type="prompt">
+                  npm i -g visionos-cli
+                </TerminalLine>
+                <TerminalLine type="success">✓ installed globally</TerminalLine>
+                <TerminalLine>&nbsp;</TerminalLine>
+                <TerminalLine type="prompt">visionos start</TerminalLine>
+                <TerminalLine type="success">✓ Runtime active</TerminalLine>
+                <TerminalLine type="output">
+                  &nbsp; Dashboard → http://127.0.0.1:5173
+                </TerminalLine>
+                <TerminalLine type="prompt">█</TerminalLine>
+              </TerminalWindow>
+            </div>
+          </div>
+        </section>
+
+        {/* ── FOOTER SHOWCASE SECTION (Image 2) ────────── */}
+        <ScanlineDivider height={60} />
+        <section className="m-footer-showcase">
+          {/* Header row */}
+          <div className="m-footer-showcase-header">
+            <div className="header-left">
+              <span className="header-brand">VisionOS, Inc.</span>
+              <span className="header-meta">
+                Copyright 2025
+                <br />
+                All Rights Reserved
+              </span>
+            </div>
+            <nav className="header-nav">
+              <a href="#tracks">
+                tracks <span className="arrow">↗</span>
+              </a>
+              <a href="#commands">
+                commands <span className="arrow">↗</span>
+              </a>
+              <a href="/creator" className="creator-nav-link">
+                create lessons <span className="arrow">↗</span>
+              </a>
+              <a href="#hero">@visionos</a>
+            </nav>
+          </div>
+
+
+
+          <div className="m-footer-showcase-content">
+            {/* Left: Heading + CTA */}
+            <div className="reveal-left">
+              <h2 className="m-footer-heading">
+                Meet VisionOS
+                <span className="m-footer-heading-sub">
+                  Interfaces for the future.
+                </span>
+              </h2>
+
+              <div className="m-footer-cta-area">
+                {/* Icon */}
+                <svg
+                  className="m-footer-cta-icon float-gentle"
+                  viewBox="0 0 64 64"
+                  fill="none"
+                >
+                  <rect
+                    x="8"
+                    y="14"
+                    width="48"
+                    height="36"
+                    rx="4"
+                    stroke="var(--m-ink)"
+                    strokeWidth="3"
+                  />
+                  <path
+                    d="M20 30L28 38L44 22"
+                    stroke="var(--m-ink)"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <p className="m-footer-cta-text">
+                  Claim your terminal access card.
+                </p>
+                <div className="m-footer-input-group">
+                  <input
+                    type="email"
+                    className="m-footer-input"
+                    placeholder="Enter your email address"
+                    aria-label="Email address"
+                  />
+                  <button className="m-footer-send-btn" aria-label="Submit">
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="22" y1="2" x2="11" y2="13" />
+                      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Right: ID Card */}
+            <div className="reveal-right delay-2">
+              <div className="m-id-card">
+                <div className="m-id-card-image">
+                  <div className="m-id-card-image-inner">
+                    {user ? user.name.charAt(0).toUpperCase() : "V"}
+                  </div>
+                </div>
+                <div className="m-id-card-info" style={{ position: "relative" }}>
+                  <div>
+                    <span className="m-id-card-name-label">Name</span>
+                    <span className="m-id-card-name-value">
+                      {user ? user.name : "VisionOS"}
+                      <br />
+                      {user ? "Learner" : "Terminal"}
+                    </span>
+                  </div>
+                  <div className="m-id-card-barcode">10. 0001</div>
+                  <div className="m-id-card-footer">
+                    <div className="m-id-card-footer-item">
+                      <span className="m-id-card-footer-label">Cohort</span>
+                      <span className="m-id-card-footer-value">000.1</span>
+                    </div>
+                    <div className="m-id-card-footer-item">
+                      <span className="m-id-card-footer-label">Date</span>
+                      <span className="m-id-card-footer-value">
+                        {formattedDate}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* ── FOOTER ────────────────────────────────────── */}
+        <footer className="m-site-footer">
+          <div className="header-left">
+            <span className="header-brand">VisionOS</span>
+            <span className="header-meta">© 2025 · CLI-First Learning</span>
+          </div>
+          <nav className="header-nav">
+            <a href="#hero">Top ↑</a>
+            <a href="/creator" className="creator-nav-link">Create Lessons</a>
+            <a
+              href="https://github.com/darklegend91/VisionOS"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub <span className="arrow">↗</span>
+            </a>
+          </nav>
+        </footer>
+      </div>
+
+      <div className="bezel-notch">
+        <div className="bezel-notch-inner" />
+      </div>
+    </div>
+  );
+}