fix: site ui

docs/site/package.json

@@ -11,14 +11,17 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
+    "lucide-react": "^1.17.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.0",
     "@types/node": "^22.10.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "tailwindcss": "^4.3.0",
     "typescript": "^5.6.3",
     "vite": "^5.4.11"
   }

docs/site/src/components/Header.tsx

@@ -1,4 +1,5 @@
 import type { NavItem } from "@docs/content.js";
+import { Code2 } from "lucide-react";
 
 type HeaderProps = {
   isMenuOpen: boolean;
@@ -37,6 +38,7 @@ export function Header({ isMenuOpen, navItems, onToggleMenu, repoUrl }: HeaderPr
             </a>
           ))}
           <a className="site-nav__cta" href={repoUrl} rel="noreferrer" target="_blank">
+            <Code2 />
             GitHub
           </a>
         </nav>

docs/site/src/components/MilestoneRail.tsx

@@ -1,17 +1,26 @@
 import type { Milestone } from "@docs/content.js";
+import { CircleDot } from "lucide-react";
 
 type MilestoneRailProps = {
   milestones: Milestone[];
 };
 
 export function MilestoneRail({ milestones }: MilestoneRailProps) {
   return (
-    <div className="milestone-rail">
+    <div className="mt-8 grid gap-4">
       {milestones.map((milestone) => (
-        <article className="milestone-card" key={milestone.id}>
-          <span className="milestone-card__stage">{milestone.stage}</span>
-          <h3>{milestone.title}</h3>
-          <p>{milestone.outcome}</p>
+        <article
+          className="grid gap-4 border border-neutral-200 bg-white p-5 md:grid-cols-[12rem_minmax(0,1fr)]"
+          key={milestone.id}
+        >
+          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
+            <CircleDot aria-hidden="true" size={15} />
+            {milestone.stage}
+          </span>
+          <div>
+            <h3 className="text-lg font-semibold text-black">{milestone.title}</h3>
+            <p className="mt-2 leading-7 text-neutral-600">{milestone.outcome}</p>
+          </div>
         </article>
       ))}
     </div>

docs/site/src/components/ResourceCard.tsx

@@ -1,20 +1,32 @@
 import type { ResourceCard as ResourceCardData } from "@docs/content.js";
+import { ArrowUpRight, FileText } from "lucide-react";
 
 type ResourceCardProps = {
   item: ResourceCardData;
 };
 
 export function ResourceCard({ item }: ResourceCardProps) {
   return (
-    <article className="resource-card">
-      <div className="resource-card__meta">
-        <span>{item.category}</span>
-        <code>{item.path}</code>
+    <article className="border border-neutral-200 bg-white p-5 dark:border-neutral-700 dark:bg-neutral-950">
+      <div className="mb-4 flex flex-wrap items-center gap-2">
+        <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+          <FileText aria-hidden="true" size={14} />
+          {item.category}
+        </span>
+        <code className="border border-neutral-200 px-2 py-1 text-xs text-neutral-600 dark:border-neutral-700 dark:text-neutral-300">
+          {item.path}
+        </code>
       </div>
-      <h3>{item.title}</h3>
-      <p>{item.summary}</p>
-      <a className="resource-card__link" href={item.href} rel="noreferrer" target="_blank">
+      <h3 className="text-lg font-semibold text-black dark:text-white">{item.title}</h3>
+      <p className="mt-3 leading-7 text-neutral-600 dark:text-neutral-300">{item.summary}</p>
+      <a
+        className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-black transition hover:text-neutral-600 dark:text-white dark:hover:text-neutral-300"
+        href={item.href}
+        rel="noreferrer"
+        target="_blank"
+      >
         Open source doc
+        <ArrowUpRight aria-hidden="true" size={16} />
       </a>
     </article>
   );

docs/site/src/components/SectionHeading.tsx

@@ -7,10 +7,14 @@ type SectionHeadingProps = {
 
 export function SectionHeading({ eyebrow, id, summary, title }: SectionHeadingProps) {
   return (
-    <div className="section-heading" id={id}>
-      <span className="section-heading__eyebrow">{eyebrow}</span>
-      <h2>{title}</h2>
-      <p>{summary}</p>
+    <div className="max-w-3xl" id={id}>
+      <span className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+        {eyebrow}
+      </span>
+      <h2 className="mt-3 text-3xl font-semibold leading-tight tracking-normal text-black dark:text-white sm:text-4xl">
+        {title}
+      </h2>
+      <p className="mt-4 text-base leading-8 text-neutral-600 dark:text-neutral-300">{summary}</p>
     </div>
   );
 }

docs/site/src/layouts/DocsLayout.tsx

@@ -0,0 +1,88 @@
+import type { NavItem } from "@docs/content.js";
+import { BookOpen, Moon, PanelLeft, Search, Sun } from "lucide-react";
+import type { ReactNode } from "react";
+
+type DocsLayoutProps = {
+  children: ReactNode;
+  isDark: boolean;
+  navItems: NavItem[];
+  onToggleTheme: () => void;
+};
+
+export function DocsLayout({ children, isDark, navItems, onToggleTheme }: DocsLayoutProps) {
+  return (
+    <section
+      className={`${isDark ? "dark" : ""} border-y ${
+        isDark
+          ? "border-neutral-700 bg-black text-white"
+          : "border-neutral-200 bg-neutral-50 text-black"
+      }`}
+      id="docs-map"
+    >
+      <div className="mx-auto grid w-full max-w-7xl gap-8 px-4 py-10 sm:px-6 lg:grid-cols-[17rem_minmax(0,1fr)] lg:px-8">
+        <aside className="lg:sticky lg:top-24 lg:h-[calc(100vh-7rem)]">
+          <div
+            className={`border p-4 ${
+              isDark ? "border-neutral-700 bg-neutral-950" : "border-neutral-200 bg-white"
+            }`}
+          >
+            <div className="mb-5 flex items-center justify-between gap-3">
+              <div className="flex items-center gap-2">
+                <BookOpen aria-hidden="true" size={18} />
+                <h2 className="text-sm font-semibold uppercase tracking-wide">Docs</h2>
+              </div>
+              <button
+                aria-label={
+                  isDark ? "Switch docs layout to light theme" : "Switch docs layout to dark theme"
+                }
+                className={`inline-flex size-9 items-center justify-center border transition ${
+                  isDark
+                    ? "border-neutral-600 hover:bg-neutral-900"
+                    : "border-neutral-300 hover:bg-neutral-100"
+                }`}
+                onClick={onToggleTheme}
+                type="button"
+              >
+                {isDark ? (
+                  <Sun aria-hidden="true" size={17} />
+                ) : (
+                  <Moon aria-hidden="true" size={17} />
+                )}
+              </button>
+            </div>
+
+            <div
+              className={`mb-4 flex items-center gap-2 border px-3 py-2 ${
+                isDark
+                  ? "border-neutral-700 text-neutral-400"
+                  : "border-neutral-200 text-neutral-500"
+              }`}
+            >
+              <Search aria-hidden="true" size={16} />
+              <span className="text-sm">Search docs</span>
+            </div>
+
+            <nav className="grid gap-1">
+              {navItems.map((item) => (
+                <a
+                  className={`flex items-center gap-2 px-3 py-2 text-sm transition ${
+                    isDark
+                      ? "text-neutral-300 hover:bg-neutral-900 hover:text-white"
+                      : "text-neutral-600 hover:bg-neutral-100 hover:text-black"
+                  }`}
+                  href={item.href}
+                  key={item.id}
+                >
+                  <PanelLeft aria-hidden="true" size={15} />
+                  {item.label}
+                </a>
+              ))}
+            </nav>
+          </div>
+        </aside>
+
+        <div>{children}</div>
+      </div>
+    </section>
+  );
+}

docs/site/src/layouts/MainLayout.tsx

@@ -0,0 +1,79 @@
+import type { NavItem } from "@docs/content.js";
+import { ArrowUpRight, Code2, Menu, X } from "lucide-react";
+import type { ReactNode } from "react";
+
+type MainLayoutProps = {
+  children: ReactNode;
+  isMenuOpen: boolean;
+  navItems: NavItem[];
+  onToggleMenu: () => void;
+  repoUrl: string;
+};
+
+export function MainLayout({
+  children,
+  isMenuOpen,
+  navItems,
+  onToggleMenu,
+  repoUrl,
+}: MainLayoutProps) {
+  return (
+    <div className="min-h-screen bg-white text-black" id="top">
+      <header className="sticky top-0 z-40 border-b border-neutral-200 bg-white/95 backdrop-blur">
+        <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8">
+          <a className="flex items-center gap-3" href="#top">
+            <span className="flex size-10 items-center justify-center border border-black bg-black text-sm font-semibold text-white">
+              CX
+            </span>
+            <span className="flex flex-col leading-tight">
+              <strong className="text-base font-semibold">Corexa</strong>
+              <span className="text-xs text-neutral-500">AI Native Development Platform</span>
+            </span>
+          </a>
+
+          <button
+            aria-expanded={isMenuOpen}
+            aria-label="Toggle navigation"
+            className="inline-flex size-10 items-center justify-center border border-neutral-300 text-black transition hover:bg-neutral-100 lg:hidden"
+            onClick={onToggleMenu}
+            type="button"
+          >
+            {isMenuOpen ? (
+              <X aria-hidden="true" size={20} />
+            ) : (
+              <Menu aria-hidden="true" size={20} />
+            )}
+          </button>
+
+          <nav
+            className={`absolute left-4 right-4 top-[calc(100%+0.5rem)] grid gap-1 border border-neutral-200 bg-white p-2 shadow-xl lg:static lg:flex lg:items-center lg:gap-1 lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none ${
+              isMenuOpen ? "grid" : "hidden lg:flex"
+            }`}
+          >
+            {navItems.map((item) => (
+              <a
+                className="px-3 py-2 text-sm text-neutral-600 transition hover:bg-neutral-100 hover:text-black"
+                href={item.href}
+                key={item.id}
+              >
+                {item.label}
+              </a>
+            ))}
+            <a
+              className="inline-flex items-center justify-center gap-2 border border-black bg-black px-3 py-2 text-sm font-medium text-white transition hover:bg-neutral-800"
+              href={repoUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Code2 aria-hidden="true" size={16} />
+              GitHub
+              <ArrowUpRight aria-hidden="true" size={14} />
+            </a>
+          </nav>
+        </div>
+      </header>
+
+      <main>{children}</main>
+    </div>
+  );
+}