From 01285cbeb8810518b16c61d6816e45a9abbdf9d2 Mon Sep 17 00:00:00 2001 From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com> Date: Fri, 17 Jul 2026 13:37:36 +0800 Subject: [PATCH 1/2] =?UTF-8?q?docs(site):=20hero=20copy=20=E2=80=94=20AI-?= =?UTF-8?q?written=20apps=20narrative,=20correctness=20chain,=20ontology?= =?UTF-8?q?=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the category-label hero ("a metadata protocol and TypeScript toolkit") with the two-beat claim the objectos.ai homepage sets up ("AI writes the app. ObjectOS keeps it governable." → "AI writes the app. ObjectStack is what it writes."): - lead carries the mistake-catching chain (strict TypeScript + Zod + validation gate at authoring time; runtime enforces permissions/audit) - proof strip: ~1% code surface · Typed, validated, governed · Self-host - one-line ontology positioning linking to the objectos.ai essay ("the definition layer should be an open protocol you own") - site template drops the "Protocol" category word Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- apps/docs/app/[lang]/page.tsx | 39 +++++++++++++++++++++++++++-------- apps/docs/app/layout.tsx | 7 ++++--- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/apps/docs/app/[lang]/page.tsx b/apps/docs/app/[lang]/page.tsx index 398c751017..bab07e3245 100644 --- a/apps/docs/app/[lang]/page.tsx +++ b/apps/docs/app/[lang]/page.tsx @@ -6,10 +6,10 @@ import { baseOptions, gitConfig } from '@/lib/layout.shared'; export const metadata: Metadata = { title: { - absolute: 'ObjectStack — a metadata protocol and TypeScript toolkit for AI-native business apps', + absolute: 'ObjectStack — AI writes the app. ObjectStack is what it writes.', }, description: - 'Describe objects, permissions, workflows, APIs, UI, and AI tools once as typed Zod metadata — ObjectStack derives the TypeScript types, REST API, client SDK, UI, and MCP tools.', + 'The open target format and runtime for AI-written business apps. Agents write compact typed metadata — often ~1% of a traditional codebase — strict TypeScript, Zod, and a validation gate catch mistakes at authoring time, and the runtime derives the database, REST API, UI, and MCP server. Your business ontology as an open protocol.', }; export default function HomePage() { @@ -20,12 +20,16 @@ export default function HomePage() { Open source · Apache-2.0 </span> <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-balance md:text-5xl"> - A metadata protocol and TypeScript toolkit for AI-native business apps + AI writes the app. + <br className="hidden sm:block" /> ObjectStack is what it writes. </h1> <p className="mt-6 max-w-2xl text-lg text-fd-muted-foreground text-pretty"> - Describe your objects, permissions, workflows, APIs, UI, and AI tools once as typed, - version-controlled Zod metadata. ObjectStack derives the TypeScript types, REST API, - client SDK, UI, and MCP tools from that single definition. + The open target format and runtime for AI-written business apps. Your coding agent + writes models, UI, workflows, and permissions as compact typed metadata — often + around 1% of a traditional codebase — and strict TypeScript, Zod schemas, and a + validation gate catch its mistakes at authoring time. The runtime derives the + database, REST API, UI, and MCP server, and enforces permissions and audit on + every call. You review a small diff and ship. </p> <div className="mt-10 flex flex-wrap items-center justify-center gap-3"> <Link @@ -50,9 +54,26 @@ export default function HomePage() { GitHub </a> </div> - <p className="mt-16 text-sm text-fd-muted-foreground"> - ObjectStack is the open-source developer framework.{' '} - Need the official hosted runtime with AI built in?{' '} + <div className="mt-10 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 text-sm text-fd-muted-foreground"> + <span>~1% code surface</span> + <span aria-hidden>·</span> + <span>Typed, validated, governed</span> + <span aria-hidden>·</span> + <span>Self-host anywhere</span> + </div> + <p className="mt-16 max-w-2xl text-sm text-fd-muted-foreground text-pretty"> + Your objects, permissions, and flows are your business ontology — the definition + layer of the AI era should be an open protocol you own.{' '} + <a + href="https://www.objectos.ai/en/blog/ai-ontology-open-protocol/" + className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" + > + Read why + <ArrowRight className="size-3.5" /> + </a> + </p> + <p className="mt-3 text-sm text-fd-muted-foreground"> + Want it governed and hosted, with Build & Ask AI built in?{' '} <a href="https://www.objectos.ai" className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx index d92fe60df3..16f5cc607a 100644 --- a/apps/docs/app/layout.tsx +++ b/apps/docs/app/layout.tsx @@ -4,10 +4,11 @@ import type { Metadata } from 'next'; export const metadata: Metadata = { title: { - template: '%s | ObjectStack Protocol', - default: 'ObjectStack Protocol', + template: '%s | ObjectStack', + default: 'ObjectStack', }, - description: 'Documentation for the ObjectStack Protocol and runtime.', + description: + 'The open target format and runtime for AI-written business apps — agents write compact typed metadata, the runtime derives the database, API, UI, and MCP server.', icons: { icon: '/logo.svg', }, From 20dcbe27b60f75fde0b17b6ae397797afe87087b Mon Sep 17 00:00:00 2001 From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com> Date: Fri, 17 Jul 2026 14:02:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs(site):=20landing=20v2=20=E2=80=94=20sp?= =?UTF-8?q?ec-sheet=20design=20+=20core=20narrative=20sections?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full landing redesign in an engineering spec-sheet aesthetic (blueprint grid, mono kickers, Bricolage Grotesque display, gradient second beat): - hero artifact card tells the whole loop in one visual: requirement → Claude Code writes typed metadata (diff) → os validate ✓ → os dev preview - 01 The loop: create-objectstack → describe (agent writes, gate rejects) → preview in browser; requirement changes run the same loop - 02 The gates: typed / validated / reviewed / governed - 03 The vocabulary: 12 metadata capabilities for enterprise software + the one-off-codebase contrast + stats strip (1,600+ schemas, 5 drivers, 7 adapters, MCP) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> --- apps/docs/app/[lang]/page.tsx | 389 ++++++++++++++++++++++++++++------ 1 file changed, 325 insertions(+), 64 deletions(-) diff --git a/apps/docs/app/[lang]/page.tsx b/apps/docs/app/[lang]/page.tsx index bab07e3245..e91f0bfa75 100644 --- a/apps/docs/app/[lang]/page.tsx +++ b/apps/docs/app/[lang]/page.tsx @@ -1,9 +1,21 @@ import type { Metadata } from 'next'; import Link from 'next/link'; -import { ArrowRight } from 'lucide-react'; +import { ArrowRight, Check } from 'lucide-react'; +import { Bricolage_Grotesque, IBM_Plex_Mono } from 'next/font/google'; import { HomeLayout } from 'fumadocs-ui/layouts/home'; import { baseOptions, gitConfig } from '@/lib/layout.shared'; +const display = Bricolage_Grotesque({ + subsets: ['latin'], + variable: '--font-l-display', +}); + +const mono = IBM_Plex_Mono({ + weight: ['400', '500'], + subsets: ['latin'], + variable: '--font-l-mono', +}); + export const metadata: Metadata = { title: { absolute: 'ObjectStack — AI writes the app. ObjectStack is what it writes.', @@ -12,77 +24,326 @@ export const metadata: Metadata = { 'The open target format and runtime for AI-written business apps. Agents write compact typed metadata — often ~1% of a traditional codebase — strict TypeScript, Zod, and a validation gate catch mistakes at authoring time, and the runtime derives the database, REST API, UI, and MCP server. Your business ontology as an open protocol.', }; +const VOCABULARY: { tag: string; title: string; copy: string }[] = [ + { tag: 'object', title: 'Objects & fields', copy: 'Typed schemas with relations, validation, formulas, and files.' }, + { tag: 'permission', title: 'Permissions', copy: 'RBAC plus row- and field-level security, enforced by the runtime.' }, + { tag: 'flow', title: 'Automation', copy: 'DAG flows, record triggers, scheduled jobs, and webhooks.' }, + { tag: 'approval', title: 'Approvals', copy: 'Multi-step approval chains with queues and a full audit trail.' }, + { tag: 'view', title: 'Views', copy: 'Lists, kanban boards, calendars, gantt, galleries — declared, not coded.' }, + { tag: 'dashboard', title: 'Dashboards & reports', copy: 'Charts, aggregations, and KPIs bound to live data.' }, + { tag: 'action', title: 'Actions', copy: 'Permission-checked buttons and server operations.' }, + { tag: 'api', title: 'APIs & SDK', copy: 'Generated REST and realtime endpoints with a typed client SDK.' }, + { tag: 'mcp', title: 'AI tools', copy: 'Every object and action doubles as a governed MCP tool.' }, + { tag: 'i18n', title: 'Translations', copy: 'Labels and UI text as metadata, per locale.' }, + { tag: 'seed', title: 'Seed data', copy: 'Fixtures and demo datasets that ship with the app.' }, + { tag: 'driver', title: 'Datasources', copy: 'Postgres, MySQL, SQLite, MongoDB, or in-memory.' }, +]; + +const GATES: { title: string; copy: string }[] = [ + { title: 'Typed', copy: 'Strict TypeScript + Zod — shape errors die in the editor, seconds after the agent writes them.' }, + { title: 'Validated', copy: 'os validate rejects metadata that would fail silently at runtime — before it ships.' }, + { title: 'Reviewed', copy: 'You approve a small readable diff in the Console — not fifty thousand lines of glue.' }, + { title: 'Governed', copy: 'Permissions and audit are enforced by the runtime on every call. Even a wrong app stays inside the fence.' }, +]; + +const STEPS: { num: string; title: string; cmd: string; copy: string }[] = [ + { + num: '01', + title: 'Create a project', + cmd: 'npx create-objectstack my-app', + copy: 'A typed project skeleton — spec, seed data, and the Console already wired.', + }, + { + num: '02', + title: 'Describe the requirement', + cmd: 'claude · os validate ✓', + copy: 'Tell Claude Code what the business needs. It writes compact typed metadata, and the validation gate rejects anything that would fail silently.', + }, + { + num: '03', + title: 'Preview in the browser', + cmd: 'os dev', + copy: 'The Console renders it live — records, boards, dashboards. Requirement changed? Same loop: describe, validate, preview.', + }, +]; + +function DiffLine({ children, plain }: { children: React.ReactNode; plain?: boolean }) { + return ( + <div className="flex gap-3 whitespace-pre"> + <span className={plain ? 'select-none text-fd-muted-foreground/40' : 'select-none text-emerald-500'}> + {plain ? ' ' : '+'} + </span> + <span className={plain ? 'text-fd-muted-foreground' : ''}>{children}</span> + </div> + ); +} + export default function HomePage() { return ( <HomeLayout {...baseOptions()}> - <section className="flex flex-1 flex-col items-center justify-center px-4 py-24 text-center md:py-32"> - <span className="mb-6 rounded-full border border-fd-border px-3 py-1 text-xs font-medium text-fd-muted-foreground"> - Open source · Apache-2.0 - </span> - <h1 className="max-w-3xl text-4xl font-bold tracking-tight text-balance md:text-5xl"> - AI writes the app. - <br className="hidden sm:block" /> ObjectStack is what it writes. - </h1> - <p className="mt-6 max-w-2xl text-lg text-fd-muted-foreground text-pretty"> - The open target format and runtime for AI-written business apps. Your coding agent - writes models, UI, workflows, and permissions as compact typed metadata — often - around 1% of a traditional codebase — and strict TypeScript, Zod schemas, and a - validation gate catch its mistakes at authoring time. The runtime derives the - database, REST API, UI, and MCP server, and enforces permissions and audit on - every call. You review a small diff and ship. - </p> - <div className="mt-10 flex flex-wrap items-center justify-center gap-3"> - <Link - href="/docs/getting-started" - className="inline-flex items-center gap-2 rounded-full bg-fd-primary px-6 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:bg-fd-primary/90" + <div + className={`${display.variable} ${mono.variable} relative overflow-hidden`} + style={{ + ['--l-display' as string]: 'var(--font-l-display), ui-sans-serif, system-ui', + ['--l-mono' as string]: 'var(--font-l-mono), ui-monospace, monospace', + }} + > + {/* blueprint grid backdrop */} + <div + aria-hidden + className="pointer-events-none absolute inset-0 opacity-[0.35] [mask-image:radial-gradient(ellipse_75%_60%_at_50%_0%,black,transparent)]" + style={{ + backgroundImage: + 'linear-gradient(to right, var(--color-fd-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-fd-border) 1px, transparent 1px)', + backgroundSize: '56px 56px', + }} + /> + <div + aria-hidden + className="pointer-events-none absolute -top-40 left-1/2 h-[480px] w-[880px] -translate-x-1/2 rounded-full opacity-25 blur-3xl dark:opacity-20" + style={{ background: 'radial-gradient(closest-side, #818cf8, transparent 70%)' }} + /> + + {/* ── hero ─────────────────────────────────────────────── */} + <section className="relative mx-auto grid w-full max-w-6xl items-center gap-12 px-6 pt-20 pb-16 md:grid-cols-[1.05fr_0.95fr] md:pt-28 md:pb-24"> + <div> + <p className="text-xs font-medium tracking-[0.18em] text-fd-muted-foreground uppercase" style={{ fontFamily: 'var(--l-mono)' }}> + Open protocol & runtime · Apache-2.0 + </p> + <h1 + className="mt-5 text-[2.6rem]/[1.06] font-bold tracking-tight text-balance md:text-6xl/[1.04]" + style={{ fontFamily: 'var(--l-display)' }} + > + AI writes the app.{' '} + <span className="block bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent dark:from-indigo-400 dark:to-purple-400"> + ObjectStack is what it writes. + </span> + </h1> + <p className="mt-6 max-w-xl text-lg text-fd-muted-foreground text-pretty"> + The open target format and runtime for AI-written business apps. Your coding agent + writes models, UI, workflows, and permissions as compact typed metadata — often + around 1% of a traditional codebase — and strict TypeScript, Zod schemas, and a + validation gate catch its mistakes at authoring time. The runtime derives the + database, REST API, UI, and MCP server, and enforces permissions and audit on + every call. + </p> + <div className="mt-8 flex flex-wrap items-center gap-3"> + <Link + href="/docs/getting-started" + className="inline-flex items-center gap-2 rounded-lg bg-fd-primary px-5 py-2.5 text-sm font-medium text-fd-primary-foreground transition-colors hover:bg-fd-primary/90" + > + Get started + <ArrowRight className="size-4" /> + </Link> + <Link + href="/docs" + className="inline-flex items-center rounded-lg border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground" + > + Documentation + </Link> + <a + href={`https://github.com/${gitConfig.user}/${gitConfig.repo}`} + target="_blank" + rel="noreferrer noopener" + className="inline-flex items-center rounded-lg border border-fd-border px-5 py-2.5 text-sm font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground" + > + GitHub + </a> + </div> + <div + className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 text-[13px] text-fd-muted-foreground" + style={{ fontFamily: 'var(--l-mono)' }} + > + <span>~1% code surface</span> + <span aria-hidden className="text-fd-border">|</span> + <span>Typed, validated, governed</span> + <span aria-hidden className="text-fd-border">|</span> + <span>Self-host anywhere</span> + </div> + </div> + + {/* the artifact card — requirement → metadata → gate → preview */} + <figure className="relative"> + <div className="overflow-hidden rounded-xl border border-fd-border bg-fd-card shadow-[0_24px_60px_-24px_rgb(0_0_0/0.35)]"> + <div className="border-b border-fd-border px-4 py-3" style={{ fontFamily: 'var(--l-mono)' }}> + <p className="text-[11px] tracking-wider text-fd-muted-foreground uppercase">you → claude code</p> + <p className="mt-1.5 text-[13px]"> + “Build an expense approval app for a 50-person team.” + </p> + </div> + <div className="px-4 py-3 text-[12.5px]/[1.7]" style={{ fontFamily: 'var(--l-mono)' }}> + <p className="mb-2 text-[11px] tracking-wider text-fd-muted-foreground uppercase">expense.object.ts</p> + <DiffLine>{`export const Expense = ObjectSchema.create({`}</DiffLine> + <DiffLine>{` name: 'expense_request',`}</DiffLine> + <DiffLine>{` fields: {`}</DiffLine> + <DiffLine>{` amount: Field.currency({ required: true }),`}</DiffLine> + <DiffLine>{` status: Field.select({ options: [...] }),`}</DiffLine> + <DiffLine>{` approver: Field.lookup('sys_user'),`}</DiffLine> + <DiffLine>{` },`}</DiffLine> + <DiffLine>{`});`}</DiffLine> + </div> + <div + className="flex flex-wrap items-center gap-x-4 gap-y-1.5 border-t border-fd-border bg-fd-muted/50 px-4 py-2.5 text-[12px] text-fd-muted-foreground" + style={{ fontFamily: 'var(--l-mono)' }} + > + <span className="inline-flex items-center gap-1.5"> + <Check className="size-3.5 text-emerald-500" /> + os validate + </span> + <span className="inline-flex items-center gap-1.5"> + <Check className="size-3.5 text-emerald-500" /> + types · permissions · flows + </span> + <span className="inline-flex items-center gap-1.5"> + os dev + <ArrowRight className="size-3.5" /> + Console preview + </span> + </div> + </div> + <figcaption + className="mt-3 text-center text-[12px] text-fd-muted-foreground" + style={{ fontFamily: 'var(--l-mono)' }} + > + one definition → tables · REST API · Console UI · MCP tools + </figcaption> + </figure> + </section> + + {/* ── 01 · the loop ────────────────────────────────────── */} + <section className="relative mx-auto w-full max-w-6xl px-6 py-16 md:py-20"> + <div className="flex items-baseline gap-4 border-t border-fd-border pt-8"> + <span className="text-xs tracking-[0.18em] text-fd-muted-foreground uppercase" style={{ fontFamily: 'var(--l-mono)' }}> + 01 · The loop + </span> + </div> + <h2 className="mt-4 max-w-2xl text-3xl font-bold tracking-tight md:text-4xl" style={{ fontFamily: 'var(--l-display)' }}> + From requirement to running app + </h2> + <div className="mt-10 grid gap-8 md:grid-cols-3"> + {STEPS.map((s) => ( + <div key={s.num} className="group relative"> + <div className="flex items-center gap-3"> + <span className="text-sm text-fd-muted-foreground" style={{ fontFamily: 'var(--l-mono)' }}>{s.num}</span> + <div className="h-px flex-1 bg-fd-border" aria-hidden /> + </div> + <h3 className="mt-4 text-lg font-semibold" style={{ fontFamily: 'var(--l-display)' }}>{s.title}</h3> + <p + className="mt-2 inline-block rounded-md border border-fd-border bg-fd-muted/50 px-2.5 py-1 text-[12.5px] text-fd-muted-foreground" + style={{ fontFamily: 'var(--l-mono)' }} + > + {s.cmd} + </p> + <p className="mt-3 text-[15px] text-fd-muted-foreground text-pretty">{s.copy}</p> + </div> + ))} + </div> + </section> + + {/* ── 02 · four gates ──────────────────────────────────── */} + <section className="relative mx-auto w-full max-w-6xl px-6 py-16 md:py-20"> + <div className="flex items-baseline gap-4 border-t border-fd-border pt-8"> + <span className="text-xs tracking-[0.18em] text-fd-muted-foreground uppercase" style={{ fontFamily: 'var(--l-mono)' }}> + 02 · The gates + </span> + </div> + <h2 className="mt-4 max-w-2xl text-3xl font-bold tracking-tight md:text-4xl" style={{ fontFamily: 'var(--l-display)' }}> + Four gates between the agent and production + </h2> + <div className="mt-10 grid gap-px overflow-hidden rounded-xl border border-fd-border bg-fd-border sm:grid-cols-2 lg:grid-cols-4"> + {GATES.map((g, i) => ( + <div key={g.title} className="bg-fd-card p-5 transition-colors hover:bg-fd-accent/60"> + <p className="text-xs text-fd-muted-foreground" style={{ fontFamily: 'var(--l-mono)' }}> + {String(i + 1).padStart(2, '0')} + </p> + <h3 className="mt-2 font-semibold" style={{ fontFamily: 'var(--l-display)' }}>{g.title}</h3> + <p className="mt-2 text-sm text-fd-muted-foreground text-pretty">{g.copy}</p> + </div> + ))} + </div> + </section> + + {/* ── 03 · the vocabulary ──────────────────────────────── */} + <section className="relative mx-auto w-full max-w-6xl px-6 py-16 md:py-20"> + <div className="flex items-baseline gap-4 border-t border-fd-border pt-8"> + <span className="text-xs tracking-[0.18em] text-fd-muted-foreground uppercase" style={{ fontFamily: 'var(--l-mono)' }}> + 03 · The vocabulary + </span> + </div> + <h2 className="mt-4 max-w-2xl text-3xl font-bold tracking-tight md:text-4xl" style={{ fontFamily: 'var(--l-display)' }}> + What can it actually build? + </h2> + <p className="mt-4 max-w-3xl text-fd-muted-foreground text-pretty"> + Point an agent at an empty repo and you get a one-off codebase — every screen + hand-invented, every mistake yours to find at runtime. ObjectStack gives the agent + a <em>vocabulary</em> instead: typed, validated primitives for everything enterprise + software needs. The agent composes the definition; the runtime already knows how to + run it. + </p> + <div className="mt-10 grid gap-x-10 md:grid-cols-2"> + {VOCABULARY.map((v) => ( + <div key={v.tag} className="group flex items-baseline gap-4 border-b border-fd-border py-3.5"> + <span + className="w-24 shrink-0 text-[12px] text-fd-muted-foreground transition-colors group-hover:text-fd-foreground" + style={{ fontFamily: 'var(--l-mono)' }} + > + {v.tag} + </span> + <div> + <span className="font-medium">{v.title}</span> + <span className="text-fd-muted-foreground"> — {v.copy}</span> + </div> + </div> + ))} + </div> + <div + className="mt-8 flex flex-wrap items-center gap-x-3 gap-y-2 text-[13px] text-fd-muted-foreground" + style={{ fontFamily: 'var(--l-mono)' }} > - Get started - <ArrowRight className="size-4" /> - </Link> + <span>1,600+ typed schemas</span> + <span aria-hidden className="text-fd-border">|</span> + <span>5 database drivers</span> + <span aria-hidden className="text-fd-border">|</span> + <span>7 framework adapters</span> + <span aria-hidden className="text-fd-border">|</span> + <span>MCP built-in</span> + </div> <Link href="/docs" - className="inline-flex items-center rounded-full border border-fd-border px-6 py-2.5 text-sm font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground" + className="mt-8 inline-flex items-center gap-2 text-sm font-medium underline underline-offset-4 transition-colors hover:text-fd-primary" > - Documentation + Browse the full vocabulary in the docs + <ArrowRight className="size-4" /> </Link> - <a - href={`https://github.com/${gitConfig.user}/${gitConfig.repo}`} - target="_blank" - rel="noreferrer noopener" - className="inline-flex items-center rounded-full border border-fd-border px-6 py-2.5 text-sm font-medium transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground" - > - GitHub - </a> - </div> - <div className="mt-10 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 text-sm text-fd-muted-foreground"> - <span>~1% code surface</span> - <span aria-hidden>·</span> - <span>Typed, validated, governed</span> - <span aria-hidden>·</span> - <span>Self-host anywhere</span> - </div> - <p className="mt-16 max-w-2xl text-sm text-fd-muted-foreground text-pretty"> - Your objects, permissions, and flows are your business ontology — the definition - layer of the AI era should be an open protocol you own.{' '} - <a - href="https://www.objectos.ai/en/blog/ai-ontology-open-protocol/" - className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" - > - Read why - <ArrowRight className="size-3.5" /> - </a> - </p> - <p className="mt-3 text-sm text-fd-muted-foreground"> - Want it governed and hosted, with Build & Ask AI built in?{' '} - <a - href="https://www.objectos.ai" - className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" - > - Try ObjectOS - <ArrowRight className="size-3.5" /> - </a> - </p> - </section> + </section> + + {/* ── closing ──────────────────────────────────────────── */} + <section className="relative mx-auto w-full max-w-6xl px-6 pt-8 pb-20 md:pb-28"> + <div className="rounded-xl border border-fd-border bg-fd-card/60 px-6 py-8 text-center md:px-10"> + <p className="mx-auto max-w-2xl text-sm text-fd-muted-foreground text-pretty"> + Your objects, permissions, and flows are your business ontology — the definition + layer of the AI era should be an open protocol you own.{' '} + <a + href="https://www.objectos.ai/en/blog/ai-ontology-open-protocol/" + className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" + > + Read why + <ArrowRight className="size-3.5" /> + </a> + </p> + <p className="mt-3 text-sm text-fd-muted-foreground"> + Want it governed and hosted, with Build & Ask AI built in?{' '} + <a + href="https://www.objectos.ai" + className="inline-flex items-center gap-1 font-medium text-fd-foreground underline underline-offset-4 transition-colors hover:text-fd-primary" + > + Try ObjectOS + <ArrowRight className="size-3.5" /> + </a> + </p> + </div> + </section> + </div> </HomeLayout> ); }