Merge pull request #105 from Molecule-AI/design/align-docs-to-landing

feat(docs): align doc.moleculesai.app chrome with landing's warm-paper design
2026-04-30 22:53:36 -07:00 · 2026-04-30 22:53:36 -07:00 · aa710d9310
commit aa710d9310
parent 050cd70060 403725b970
4 changed files with 179 additions and 26 deletions
--- a/app/(home)/page.tsx
+++ b/app/(home)/page.tsx
@ -1,29 +1,100 @@
 import Link from 'next/link';

+// Three quick-start lanes — keeps the home page from being a wall of text
+// and lets builders, operators, and integrators each find their entry
+// point in one click.
+const lanes = [
+  {
+    kicker: '01',
+    title: 'Build a workspace',
+    body: 'Pick a runtime template (Claude Code, LangGraph, CrewAI, Hermes, …), wire your tools, and ship.',
+    href: '/docs/workspace',
+    cta: 'Workspace guide →',
+  },
+  {
+    kicker: '02',
+    title: 'Run an organisation',
+    body: 'Topology, A2A, three-tier memory, governance — the platform layer that ties multi-agent teams together.',
+    href: '/docs/platform',
+    cta: 'Platform reference →',
+  },
+  {
+    kicker: '03',
+    title: 'Publish to the Marketplace',
+    body: 'Plugins, agents, and org bundles ship as signed manifests. Authors keep 80%, paid via Stripe Connect.',
+    href: '/docs/marketplace',
+    cta: 'Author guide →',
+  },
+];
+
 export default function HomePage() {
  return (
-    <main className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center">
-      <h1 className="mb-4 text-5xl font-bold tracking-tight sm:text-6xl">
-        Molecule AI
-      </h1>
-      <p className="mb-8 max-w-2xl text-lg text-fd-muted-foreground">
-        Build and run multi-agent organisations. Templates, plugins, channels,
-        and the runtime that ties them together — documented end to end.
-      </p>
-      <div className="flex flex-wrap items-center justify-center gap-3">
-        <Link
-          href="/docs"
-          className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:opacity-90"
-        >
-          Read the docs
-        </Link>
-        <Link
-          href="https://github.com/Molecule-AI/molecule-monorepo"
-          className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-muted"
-        >
-          View on GitHub
-        </Link>
+    <main className="flex flex-1 flex-col">
+      {/* Statusbar — mirrors the landing's "All systems · status.* · phase" strip */}
+      <div className="border-b border-fd-border bg-fd-muted px-6 py-1.5 text-[11px] font-mono text-fd-muted-foreground flex flex-wrap justify-between gap-4">
+        <span>
+          <span className="inline-block size-1.5 rounded-full bg-[#2f7a4d] align-middle mr-1.5" />
+          All systems · status.moleculesai.app
+        </span>
+        <span>Phase 33 shipped · Phase 35 Marketplace public beta</span>
      </div>
+
+      {/* Hero */}
+      <section className="px-6 py-20 sm:py-28 max-w-6xl mx-auto w-full">
+        <div className="text-[11px] font-mono uppercase tracking-[0.08em] text-fd-muted-foreground mb-4 flex items-center gap-2">
+          <span className="inline-block size-1.5 rounded-full bg-[#c0532b]" />
+          Documentation
+        </div>
+        <h1 className="text-5xl sm:text-6xl font-semibold tracking-tight leading-[1.05] mb-5 max-w-3xl">
+          The operating system for{' '}
+          <span className="text-[#3b5bdb]">AI agent organizations.</span>
+        </h1>
+        <p className="text-lg text-fd-muted-foreground max-w-2xl leading-relaxed mb-8">
+          Build and run multi-agent organisations the way you'd staff a company.
+          Templates, plugins, channels, runtimes, governance — documented end
+          to end.
+        </p>
+        <div className="flex flex-wrap items-center gap-3">
+          <Link
+            href="/docs"
+            className="rounded-md bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition hover:opacity-90"
+          >
+            Read the docs
+          </Link>
+          <Link
+            href="https://github.com/Molecule-AI"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="rounded-md border border-fd-border px-5 py-2.5 text-sm font-medium transition hover:bg-fd-muted"
+          >
+            View on GitHub
+          </Link>
+        </div>
+      </section>
+
+      {/* Three lanes */}
+      <section className="px-6 pb-24 max-w-6xl mx-auto w-full">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {lanes.map((lane) => (
+            <Link
+              key={lane.kicker}
+              href={lane.href}
+              className="group rounded-lg border border-fd-border bg-fd-card p-6 transition hover:border-fd-foreground hover:-translate-y-0.5"
+            >
+              <div className="text-[11px] font-mono text-[#3b5bdb] mb-3 tracking-[0.08em]">
+                {lane.kicker}
+              </div>
+              <h3 className="text-base font-semibold mb-2">{lane.title}</h3>
+              <p className="text-sm text-fd-muted-foreground leading-relaxed mb-4">
+                {lane.body}
+              </p>
+              <div className="text-xs font-mono text-fd-foreground group-hover:text-[#3b5bdb] transition">
+                {lane.cta}
+              </div>
+            </Link>
+          ))}
+        </div>
+      </section>
    </main>
  );
 }
--- a/app/global.css
+++ b/app/global.css
@ -1,3 +1,32 @@
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
+
+/* Warm-paper light theme — aligned with the landing page (moleculesai.app).
+   Tokens map fumadocs' @theme variables onto our brand palette so docs,
+   marketing, and the canvas read as one product. */
+@theme {
+  --font-sans: var(--font-geist), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
+
+  --color-fd-background: #fafaf7;
+  --color-fd-foreground: #15181c;
+  --color-fd-muted: #f3f1ec;
+  --color-fd-muted-foreground: #5a5e66;
+  --color-fd-popover: #ffffff;
+  --color-fd-popover-foreground: #15181c;
+  --color-fd-card: #ffffff;
+  --color-fd-card-foreground: #15181c;
+  --color-fd-border: #e6e2d8;
+  --color-fd-primary: #3b5bdb;
+  --color-fd-primary-foreground: #ffffff;
+  --color-fd-secondary: #efece4;
+  --color-fd-secondary-foreground: #15181c;
+  --color-fd-accent: #efece4;
+  --color-fd-accent-foreground: #15181c;
+  --color-fd-ring: #3b5bdb;
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.18);
+}
+
+/* Dark mode keeps fumadocs' neutral defaults — readers expect docs sites
+   to honor their system preference, and our landing only ships light. */
--- a/app/layout.config.tsx
+++ b/app/layout.config.tsx
@ -1,7 +1,50 @@
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

+// Molecule logo — the same triangle-of-nodes mark used on moleculesai.app.
+// Inlined as a JSX element so fumadocs renders it in the topbar without a
+// separate asset request.
+const MoleculeLogo = (
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 28 28"
+    fill="none"
+    aria-hidden="true"
+  >
+    <circle cx="14" cy="6" r="2.5" fill="currentColor" />
+    <circle cx="6" cy="20" r="2.5" fill="currentColor" />
+    <circle cx="22" cy="20" r="2.5" fill="currentColor" />
+    <circle
+      cx="14"
+      cy="14"
+      r="1.6"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+    />
+    <line x1="14" y1="8.5" x2="14" y2="12.6" stroke="currentColor" strokeWidth="1.2" />
+    <line x1="8" y1="18.5" x2="12.7" y2="14.8" stroke="currentColor" strokeWidth="1.2" />
+    <line x1="20" y1="18.5" x2="15.3" y2="14.8" stroke="currentColor" strokeWidth="1.2" />
+  </svg>
+);
+
 export const baseOptions: BaseLayoutProps = {
  nav: {
-    title: 'Molecule AI',
+    title: (
+      <span className="flex items-center gap-2 font-semibold tracking-tight">
+        {MoleculeLogo}
+        <span>Molecule AI</span>
+        <span className="text-xs uppercase tracking-[0.08em] text-fd-muted-foreground font-mono">
+          Docs
+        </span>
+      </span>
+    ),
+    url: 'https://doc.moleculesai.app',
  },
+  links: [
+    { text: 'Platform', url: 'https://app.moleculesai.app', external: true },
+    { text: 'Marketplace', url: 'https://market.moleculesai.app', external: true },
+    { text: 'Landing', url: 'https://www.moleculesai.app', external: true },
+  ],
+  githubUrl: 'https://github.com/Molecule-AI',
 };
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,10 +1,16 @@
 import './global.css';
 import { RootProvider } from 'fumadocs-ui/provider/next';
-import { Inter } from 'next/font/google';
+import { Geist, JetBrains_Mono } from 'next/font/google';
 import type { ReactNode } from 'react';

-const inter = Inter({
+const geist = Geist({
  subsets: ['latin'],
+  variable: '--font-geist',
+});
+
+const jetbrains = JetBrains_Mono({
+  subsets: ['latin'],
+  variable: '--font-mono',
 });

 export const metadata = {
@ -19,8 +25,12 @@ export const metadata = {

 export default function Layout({ children }: { children: ReactNode }) {
  return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="flex flex-col min-h-screen">
+    <html
+      lang="en"
+      className={`${geist.variable} ${jetbrains.variable}`}
+      suppressHydrationWarning
+    >
+      <body className="flex flex-col min-h-screen font-sans">
        <RootProvider>{children}</RootProvider>
      </body>
    </html>