Feat: Frontend app shell

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.module.scss

@@ -0,0 +1,79 @@
+.viewport {
+  --workspace-content-max-width: var(--content-width-wide);
+  --workspace-card-min-height: calc(var(--space-12) * 3);
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--space-5);
+  padding: var(--space-5) var(--space-6);
+}
+
+.hero {
+  display: grid;
+  gap: var(--space-3);
+  width: 100%;
+  max-width: var(--workspace-content-max-width);
+}
+
+.eyebrow {
+  @include text-caption;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+}
+
+.title {
+  @include text-display;
+  font-family: var(--font-family-display);
+  max-width: 12ch;
+}
+
+.description {
+  max-width: 64ch;
+  color: var(--color-text-muted);
+}
+
+.grid {
+  width: 100%;
+  max-width: var(--workspace-content-max-width);
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.card {
+  display: grid;
+  gap: var(--space-2);
+  min-height: var(--workspace-card-min-height);
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-soft);
+}
+
+.cardTitle {
+  @include text-title;
+}
+
+.cardCopy {
+  color: var(--color-text-muted);
+}
+
+.cardMeta {
+  @include text-caption;
+  color: var(--color-text-muted);
+}
+
+@include respond-down(tablet) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@include respond-down(mobile) {
+  .viewport {
+    gap: var(--space-4);
+    padding: var(--space-4);
+  }
+}

Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx

@@ -0,0 +1,54 @@
+// Path: Frontend/src/components/workspace-home/WorkspaceHome/WorkspaceHome.tsx
+
+import { For, type JSX } from "solid-js";
+import styles from "./WorkspaceHome.module.scss";
+
+type ShellCheckpointCard = {
+	title: string;
+	copy: string;
+	meta: string;
+};
+
+const shellCheckpointCards: readonly ShellCheckpointCard[] = [
+	{
+		title: "App shell",
+		copy: "Top bar, left rail, workspace sidebar, and content viewport are now split into modular components.",
+		meta: "Layout foundation",
+	},
+	{
+		title: "Workspace context",
+		copy: "The shell already has clear places for org context, workspace switching, and future surface navigation.",
+		meta: "Navigation foundation",
+	},
+	{
+		title: "Next build target",
+		copy: "You can now plug in workspace home content, auth state, and early primitives without redesigning the whole frame.",
+		meta: "Ready for v0.1.0 work",
+	},
+];
+
+export const WorkspaceHome = (): JSX.Element => {
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<span class={styles.eyebrow}>Workspace home</span>
+				<h1 class={styles.title}>Moku is ready for its first real shell.</h1>
+				<p class={styles.description}>
+					This is the barebone app frame for v0.1.0 — enough structure to start building real frontend surfaces on top of a real backend core.
+				</p>
+			</section>
+
+			<section class={styles.grid} aria-label="Shell checkpoints">
+				<For each={shellCheckpointCards}>
+					{(card): JSX.Element => (
+						<article class={styles.card}>
+							<h2 class={styles.cardTitle}>{card.title}</h2>
+							<p class={styles.cardCopy}>{card.copy}</p>
+							<span class={styles.cardMeta}>{card.meta}</span>
+						</article>
+					)}
+				</For>
+			</section>
+		</main>
+	);
+};