diff --git a/next.config.mjs b/next.config.mjs
index 219f24d..3b14852 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -6,6 +6,9 @@ const withMDX = createMDX();
 const config = {
   output: 'export',
   reactStrictMode: true,
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default withMDX(config);
diff --git a/public/assets/hero-demo.mp4 b/public/assets/hero-demo.mp4
new file mode 100644
index 0000000..0aaa609
Binary files /dev/null and b/public/assets/hero-demo.mp4 differ
diff --git a/public/assets/hero-poster.png b/public/assets/hero-poster.png
new file mode 100644
index 0000000..e22fb65
Binary files /dev/null and b/public/assets/hero-poster.png differ
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 6a93521..cb14227 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -1,60 +1,73 @@
 import Link from 'next/link';
-import {
-  Blocks,
-  Palette,
-  ShieldCheck,
-  Package,
-  Code,
-  ArrowRight,
-  LayoutGrid,
-} from 'lucide-react';
+import type { Metadata } from 'next';
+import { Package, ArrowRight, LayoutGrid } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { CopyCommand } from '@/components/copy-command';
+import { FaqAccordion } from '@/components/faq-accordion';
+import { InstallTabs } from '@/components/install-tabs';
 import { pubDevUrl, showcaseUrl } from '@/lib/shared';
 
-const features = [
+export const metadata: Metadata = {
+  alternates: { canonical: '/' },
+  openGraph: { images: '/og/home' },
+  twitter: { images: '/og/home' },
+};
+
+const installCommands = [
+  { label: 'Flutter', command: 'flutter pub add fossui' },
   {
-    icon: Package,
-    title: 'One import',
-    description: 'A full set of components from a single package. No per-widget imports.',
+    label: 'MCP',
+    command: 'claude mcp add --transport http fossui https://mcp.fossui.org/mcp',
   },
+  { label: 'AI Skill', command: 'npx skills add fossui/ai' },
+];
+
+const faqs = [
   {
-    icon: Palette,
-    title: 'Themed',
-    description: 'A single FossThemeData drives color, type, radius, spacing, and motion.',
+    question: 'Does fossui lock me into MaterialApp or any app shell?',
+    answer:
+      'No wrapper lock-in. FossTheme drops into any app, and context.fossTheme resolves identically under MaterialApp, CupertinoApp, or a bare WidgetsApp.',
   },
   {
-    icon: Blocks,
-    title: 'Framework agnostic',
-    description: 'Works under MaterialApp, CupertinoApp, or a bare WidgetsApp.',
+    question: 'How lightweight is fossui?',
+    answer:
+      'One runtime dependency, around 314 KB. Pure Dart, no native code, no bundled icon package.',
   },
   {
-    icon: ShieldCheck,
-    title: 'Accessible',
-    description: 'Semantics, focus, and contrast built in, sized for touch.',
+    question: 'Does fossui work with AI coding assistants over MCP?',
+    answer:
+      'Yes. The fossui MCP server at mcp.fossui.org works with any MCP client over Streamable HTTP, not just Claude Code. It serves the exact component API so an assistant looks up the real API instead of guessing it.',
   },
   {
-    icon: Code,
-    title: 'Pure Dart',
-    description: 'No native code, one tiny dependency. Nothing else to pull in.',
-    wide: true,
+    question: 'Is there an AI coding skill for fossui?',
+    answer:
+      'Yes. Install it with npx skills add fossui/ai, not just for Claude Code, it installs across many AI coding agents. It carries the same idioms as the MCP server so AI-written fossui code compiles and stays on-theme on the first try.',
   },
 ];
 
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqs.map((faq) => ({
+    '@type': 'Question',
+    name: faq.question,
+    acceptedAnswer: { '@type': 'Answer', text: faq.answer },
+  })),
+};
+
 export default function HomePage() {
   return (
-    <main className="mx-auto flex min-h-[calc(100svh-3.5rem)] w-full max-w-4xl flex-1 flex-col justify-center gap-6 px-4 py-6 sm:gap-10 sm:py-8">
-      <section className="flex w-full flex-col items-center gap-4 text-center sm:gap-5">
-        <div className="flex flex-wrap items-center justify-center gap-2">
-          <Badge variant="outline">Open source, MIT</Badge>
-          <Badge variant="outline">v0.1.0</Badge>
-        </div>
-        <h1 className="text-5xl font-semibold tracking-tighter sm:text-7xl">fossui</h1>
-        <p className="max-w-md text-base text-muted-foreground text-balance sm:max-w-xl sm:text-lg">
-          A Flutter UI kit themed from one source. Framework-agnostic,
-          accessible, one import.
+    <main className="mx-auto flex w-full max-w-[1100px] flex-1 flex-col gap-16 px-4 py-10 sm:py-14">
+      {/* Hero: text-only for v1, no placeholder image */}
+      <section className="flex w-full flex-col items-center gap-4 text-center">
+        <Badge variant="outline">Open source, MIT</Badge>
+        <h1 className="max-w-2xl text-4xl font-semibold tracking-tighter text-balance sm:text-6xl">
+          A Flutter UI kit with its own identity.
+        </h1>
+        <p className="max-w-xl text-base text-muted-foreground text-balance sm:text-lg">
+          A minimal, lightweight Flutter component set for developers tired of every
+          app looking like Material. Drops into any Flutter app, no heavy
+          dependencies.
         </p>
         <div className="mt-1 flex flex-wrap items-center justify-center gap-3">
           <Button size="lg" render={<Link href="/docs" />}>
@@ -67,50 +80,57 @@ export default function HomePage() {
             render={<a href={showcaseUrl} target="_blank" rel="noreferrer" />}
           >
             <LayoutGrid />
-            Live gallery
+            Live playground
           </Button>
           <Button
             size="lg"
-            variant="ghost"
+            variant="link"
             render={<a href={pubDevUrl} target="_blank" rel="noreferrer" />}
           >
             <Package />
-            pub.dev
+            pub.dev &middot; 160/160
           </Button>
         </div>
-        <CopyCommand command="flutter pub add fossui" />
+        <InstallTabs options={installCommands} />
+        <p className="max-w-md text-xs text-muted-foreground text-balance">
+          Design inspired by coss.com/ui, Cal.com&apos;s design system: a clean,
+          minimal, modern web aesthetic.
+        </p>
+        <video
+          src="/assets/hero-demo.mp4"
+          poster="/assets/hero-poster.png"
+          autoPlay
+          muted
+          loop
+          playsInline
+          className="mt-4 w-full max-w-3xl rounded-2xl border"
+        />
       </section>
 
-      <section className="grid w-full grid-cols-2 gap-3">
-        {features.map((f) => (
-          <Card
-            key={f.title}
-            className={`transition-colors hover:border-foreground/20 hover:bg-accent/50${f.wide ? ' col-span-2' : ''}`}
-          >
-            <CardHeader
-              className={
-                f.wide
-                  ? 'grid-cols-[auto_1fr] items-center gap-3 p-4'
-                  : 'gap-1.5 p-4'
-              }
-            >
-              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-muted">
-                <f.icon className="size-4 text-foreground/80" />
-              </div>
-              <div className={f.wide ? 'flex flex-col gap-1' : 'contents'}>
-                <CardTitle className="text-base font-medium">{f.title}</CardTitle>
-                <CardDescription className="text-sm leading-relaxed">
-                  {f.description}
-                </CardDescription>
-              </div>
-            </CardHeader>
-          </Card>
-        ))}
+      {/* FAQ: answers the queries people actually search or ask a chatbot */}
+      <section className="flex w-full flex-col gap-6">
+        <div className="flex flex-col items-center gap-2 text-center">
+          <h2 className="text-2xl font-semibold tracking-tight">Frequently asked questions</h2>
+          <p className="text-sm text-muted-foreground">
+            Build Flutter UI faster. If you don&apos;t find what you need here, reach us at{' '}
+            <a href="mailto:support@fossui.org" className="font-medium underline underline-offset-2">
+              support@fossui.org
+            </a>
+            .
+          </p>
+        </div>
+        <FaqAccordion items={faqs} />
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
+        />
       </section>
 
-      <footer className="w-full text-center text-xs text-muted-foreground">
-        fossui is unofficial and not affiliated with, or endorsed by, Cal.com,
-        Inc.
+      <footer className="flex w-full flex-col items-center gap-1.5 border-t pt-8 text-center text-xs text-muted-foreground">
+        <p>
+          fossui is unofficial and not affiliated with, or endorsed by, Cal.com, Inc.
+        </p>
+        <p>&copy; 2026 fossui. All rights reserved.</p>
       </footer>
     </main>
   );
diff --git a/src/app/(home)/roadmap/page.tsx b/src/app/(home)/roadmap/page.tsx
new file mode 100644
index 0000000..82006b6
--- /dev/null
+++ b/src/app/(home)/roadmap/page.tsx
@@ -0,0 +1,323 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import { source } from '@/lib/source';
+import { docsRoute, gitConfig } from '@/lib/shared';
+
+export const metadata: Metadata = {
+  title: 'Component Roadmap',
+  description:
+    'What fossui ships today and what is planned next: every shipped Flutter component and what is on the roadmap, in dependency order.',
+  alternates: { canonical: '/roadmap' },
+  openGraph: { images: '/og/roadmap' },
+  twitter: { images: '/og/roadmap' },
+};
+
+const repoBase = `https://github.com/${gitConfig.user}/${gitConfig.repo}`;
+const roadmapUrl = `https://raw.githubusercontent.com/${gitConfig.user}/${gitConfig.repo}/${gitConfig.branch}/doc/components/roadmap.md`;
+
+type ComponentItem = {
+  kind: 'component';
+  name: string;
+  description: string;
+  status: 'shipped' | 'in-progress' | 'planned';
+  slug?: string;
+};
+
+type Block =
+  | { kind: 'h1'; text: string }
+  | { kind: 'h2'; text: string }
+  | { kind: 'h3'; text: string }
+  | { kind: 'paragraph'; text: string }
+  | { kind: 'list'; items: (ComponentItem | { kind: 'plain'; text: string })[] };
+
+const statusMarks: Record<string, ComponentItem['status']> = {
+  x: 'shipped',
+  '~': 'in-progress',
+  ' ': 'planned',
+};
+
+function kebab(name: string) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+}
+
+/** Maps a component name to an existing docs page slug, if one exists. */
+function resolveSlug(name: string, docsSlugs: Set<string>) {
+  const candidates = [kebab(name), kebab(name.split(/\s+/)[0] ?? '')];
+  return candidates.find((c) => c.length > 0 && docsSlugs.has(c));
+}
+
+/** Parses the roadmap markdown into an ordered list of renderable blocks. */
+function parseBlocks(markdown: string, docsSlugs: Set<string>) {
+  const blocks: Block[] = [];
+  let paragraph: string[] = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      blocks.push({ kind: 'paragraph', text: paragraph.join(' ') });
+      paragraph = [];
+    }
+  };
+
+  for (const line of markdown.split('\n')) {
+    const heading = line.match(/^(#{1,3})\s+(.*)/);
+    if (heading) {
+      flushParagraph();
+      const level = (heading[1] ?? '#').length;
+      const kind = level === 1 ? 'h1' : level === 2 ? 'h2' : 'h3';
+      blocks.push({ kind, text: heading[2] ?? '' });
+      continue;
+    }
+
+    const bullet = line.match(/^- (.*)/);
+    if (bullet) {
+      flushParagraph();
+      const last = blocks[blocks.length - 1];
+      const list =
+        last && last.kind === 'list'
+          ? last
+          : (() => {
+              const created: Block = { kind: 'list', items: [] };
+              blocks.push(created);
+              return created;
+            })();
+
+      const component = (bullet[1] ?? '').match(/^\[(x|~| )\] \*\*(.+?)\*\*\s*:\s*(.*)/);
+      if (component) {
+        const status = statusMarks[component[1] ?? ' '] ?? 'planned';
+        const name = component[2] ?? '';
+        list.items.push({
+          kind: 'component',
+          name,
+          description: component[3] ?? '',
+          status,
+          slug: status === 'planned' ? undefined : resolveSlug(name, docsSlugs),
+        });
+      } else {
+        list.items.push({ kind: 'plain', text: bullet[1] ?? '' });
+      }
+      continue;
+    }
+
+    // Indented continuation of the previous list item.
+    if (/^\s{2,}\S/.test(line)) {
+      const last = blocks[blocks.length - 1];
+      if (last?.kind === 'list' && paragraph.length === 0) {
+        const item = last.items[last.items.length - 1];
+        if (item?.kind === 'component') {
+          item.description = `${item.description} ${line.trim()}`;
+        } else if (item) {
+          item.text = `${item.text} ${line.trim()}`;
+        }
+        continue;
+      }
+    }
+
+    if (line.trim() === '') {
+      flushParagraph();
+      continue;
+    }
+
+    paragraph.push(line.trim());
+  }
+
+  flushParagraph();
+  return blocks;
+}
+
+/** Renders inline markdown: `code`, **bold**, and [text](href) links. */
+function Inline({ text }: { text: string }) {
+  const nodes: ReactNode[] = [];
+  const pattern = /`([^`]+)`|\*\*([^*]+)\*\*|\[([^\]]+)\]\(([^)]+)\)/g;
+  let cursor = 0;
+  let match = pattern.exec(text);
+  while (match) {
+    if (match.index > cursor) nodes.push(text.slice(cursor, match.index));
+    const [, code, bold, linkText, href] = match;
+    if (code !== undefined) {
+      nodes.push(
+        <code key={match.index} className="rounded bg-muted px-1 font-mono text-[0.85em]">
+          {code}
+        </code>,
+      );
+    } else if (bold !== undefined) {
+      nodes.push(
+        <strong key={match.index} className="font-medium text-foreground">
+          {bold}
+        </strong>,
+      );
+    } else if (linkText !== undefined && href !== undefined) {
+      // Relative repo links resolve to the file on GitHub.
+      const resolved = href.startsWith('http')
+        ? href
+        : `${repoBase}/blob/${gitConfig.branch}/doc/components/${href}`;
+      nodes.push(
+        <a
+          key={match.index}
+          href={resolved}
+          target="_blank"
+          rel="noreferrer"
+          className="underline underline-offset-2"
+        >
+          {linkText}
+        </a>,
+      );
+    }
+    cursor = match.index + match[0].length;
+    match = pattern.exec(text);
+  }
+  if (cursor < text.length) nodes.push(text.slice(cursor));
+  return <>{nodes}</>;
+}
+
+function ComponentRow({ item }: { item: ComponentItem }) {
+  return (
+    <li className="flex items-start gap-2 text-sm">
+      <span
+        className={`mt-1.5 size-1.5 shrink-0 rounded-full ${
+          item.status === 'shipped'
+            ? 'bg-primary'
+            : item.status === 'in-progress'
+              ? 'bg-muted-foreground'
+              : 'border border-muted-foreground'
+        }`}
+      />
+      <span>
+        {item.slug ? (
+          <Link
+            href={`${docsRoute}/components/${item.slug}`}
+            className="font-medium underline-offset-2 hover:underline"
+          >
+            {item.name}
+          </Link>
+        ) : (
+          <span className="font-medium">{item.name}</span>
+        )}
+        <span className="text-muted-foreground">
+          {' '}
+          &ndash; <Inline text={item.description} />
+        </span>
+      </span>
+    </li>
+  );
+}
+
+async function getBlocks() {
+  const res = await fetch(roadmapUrl);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch roadmap: ${res.status} ${roadmapUrl}`);
+  }
+  const docsSlugs = new Set(
+    source
+      .getPages()
+      .map((page) => page.slugs)
+      .filter((slugs) => slugs[0] === 'components' && slugs.length === 2)
+      .map((slugs) => slugs[1] ?? ''),
+  );
+  const blocks = parseBlocks(await res.text(), docsSlugs).filter(
+    (block, i, all) => {
+      // The status legend documents the markdown's checkbox syntax; the page
+      // renders status as dots, so the legend and its lead-in say nothing here.
+      if (block.kind === 'paragraph' && /^status legend:?$/i.test(block.text)) {
+        return false;
+      }
+      const prev = all[i - 1];
+      if (
+        block.kind === 'list' &&
+        prev?.kind === 'paragraph' &&
+        /^status legend:?$/i.test(prev.text)
+      ) {
+        return false;
+      }
+      return true;
+    },
+  );
+  const components = blocks
+    .filter((b): b is Extract<Block, { kind: 'list' }> => b.kind === 'list')
+    .flatMap((b) => b.items)
+    .filter((i): i is ComponentItem => i.kind === 'component');
+  if (components.length === 0) {
+    throw new Error('Roadmap parse produced no components; source format changed?');
+  }
+  return { blocks, components };
+}
+
+export default async function RoadmapPage() {
+  const { blocks, components } = await getBlocks();
+  const shippedCount = components.filter((c) => c.status === 'shipped').length;
+  const totalCount = components.length;
+  const progressPercent = Math.round((shippedCount / totalCount) * 100);
+
+  return (
+    <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-5 px-4 py-10 sm:py-14">
+      {blocks.map((block, i) => {
+        switch (block.kind) {
+          case 'h1':
+            return (
+              <div key={i} className="mb-2 flex flex-col gap-4 text-center">
+                <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+                  {block.text}
+                </h1>
+                <div className="mx-auto flex w-full max-w-xs flex-col gap-1.5">
+                  <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                    <div
+                      className="h-full rounded-full bg-primary"
+                      style={{ width: `${progressPercent}%` }}
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {shippedCount} of {totalCount} components shipped ({progressPercent}%)
+                  </p>
+                </div>
+              </div>
+            );
+          case 'h2':
+            return (
+              <h2 key={i} className="mt-6 text-lg font-semibold">
+                {block.text}
+              </h2>
+            );
+          case 'h3':
+            return (
+              <h3 key={i} className="mt-2 text-sm font-medium text-muted-foreground">
+                {block.text}
+              </h3>
+            );
+          case 'paragraph':
+            return (
+              <p key={i} className="text-sm text-muted-foreground">
+                <Inline text={block.text} />
+              </p>
+            );
+          case 'list': {
+            const isComponentList = block.items.some((item) => item.kind === 'component');
+            if (isComponentList) {
+              return (
+                <ul key={i} className="flex flex-col gap-1.5 rounded-2xl border p-4">
+                  {block.items.map((item, j) =>
+                    item.kind === 'component' ? (
+                      <ComponentRow key={j} item={item} />
+                    ) : (
+                      <li key={j} className="text-sm text-muted-foreground">
+                        <Inline text={item.text} />
+                      </li>
+                    ),
+                  )}
+                </ul>
+              );
+            }
+            return (
+              <ul key={i} className="flex list-disc flex-col gap-1 pl-5">
+                {block.items.map((item, j) => (
+                  <li key={j} className="text-sm text-muted-foreground">
+                    <Inline text={item.kind === 'plain' ? item.text : item.name} />
+                  </li>
+                ))}
+              </ul>
+            );
+          }
+        }
+      })}
+    </main>
+  );
+}
diff --git a/src/app/(home)/vs/forui/page.tsx b/src/app/(home)/vs/forui/page.tsx
new file mode 100644
index 0000000..37f61ec
--- /dev/null
+++ b/src/app/(home)/vs/forui/page.tsx
@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export const metadata: Metadata = {
+  title: 'fossui vs forui for Flutter',
+  description:
+    'How fossui compares to forui for Flutter: design language, theming, and ecosystem.',
+  alternates: { canonical: '/vs/forui' },
+  openGraph: { images: '/og/vs/forui' },
+  twitter: { images: '/og/vs/forui' },
+};
+
+const rows = [
+  {
+    label: 'Design language',
+    forui: 'Own visual language',
+    fossui: 'coss/Cal.com-inspired, superellipse corners',
+  },
+  {
+    label: 'Theming',
+    forui: 'Theme object per app',
+    fossui: 'Single FossThemeData, semantic tokens, retheme globally',
+  },
+  {
+    label: 'Ecosystem',
+    forui: 'Established community',
+    fossui: 'Live playground + theme builder + preview-rich docs',
+  },
+  {
+    label: 'Catalog size',
+    forui: 'Bigger catalog, more releases',
+    fossui: '21 components shipped, actively growing',
+  },
+];
+
+export default function ForuiComparisonPage() {
+  return (
+    <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-8 px-4 py-10 sm:py-14">
+      <div className="flex flex-col gap-3 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+          fossui vs forui for Flutter
+        </h1>
+        <p className="text-base text-muted-foreground text-balance">
+          Both are non-Material Flutter component sets. Here is the honest trade-off,
+          not a sales pitch.
+        </p>
+      </div>
+
+      <div className="w-full overflow-x-auto rounded-2xl border">
+        <div className="grid min-w-[560px] grid-cols-3 border-b bg-muted/50 text-xs font-medium">
+          <div className="p-3">&nbsp;</div>
+          <div className="p-3">forui</div>
+          <div className="p-3">fossui</div>
+        </div>
+        {rows.map((row, i) => (
+          <div
+            key={row.label}
+            className={`grid min-w-[560px] grid-cols-3 text-sm${i > 0 ? ' border-t' : ''}`}
+          >
+            <div className="p-3 font-medium">{row.label}</div>
+            <div className="p-3 text-muted-foreground">{row.forui}</div>
+            <div className="p-3">{row.fossui}</div>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        forui has a bigger catalog and a more established community today. fossui
+        leans on coss/Cal.com design polish, single-source semantic theming, and a
+        live playground with a theme builder alongside preview-rich docs.
+      </p>
+
+      <div className="flex justify-center">
+        <Button size="lg" render={<Link href="/docs" />}>
+          Get started with fossui
+          <ArrowRight />
+        </Button>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/(home)/vs/shadcn-ui/page.tsx b/src/app/(home)/vs/shadcn-ui/page.tsx
new file mode 100644
index 0000000..f965708
--- /dev/null
+++ b/src/app/(home)/vs/shadcn-ui/page.tsx
@@ -0,0 +1,83 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export const metadata: Metadata = {
+  title: 'fossui vs shadcn_ui for Flutter',
+  description:
+    'How fossui compares to shadcn_ui for Flutter: framework lock-in, dependency weight, docs, and maturity.',
+  alternates: { canonical: '/vs/shadcn-ui' },
+  openGraph: { images: '/og/vs/shadcn-ui' },
+  twitter: { images: '/og/vs/shadcn-ui' },
+};
+
+const rows = [
+  {
+    label: 'Framework requirement',
+    shadcnUi: 'Built for MaterialApp',
+    fossui: 'Reads its own theme first; works under MaterialApp, CupertinoApp, or a bare WidgetsApp',
+  },
+  {
+    label: 'Dependencies',
+    shadcnUi: 'Pulls in an icon package and other runtime deps',
+    fossui: '1 runtime dependency, ~314 KB',
+  },
+  {
+    label: 'Docs',
+    shadcnUi: 'Established docs site',
+    fossui: 'Rendered light/dark previews on every component page',
+  },
+  {
+    label: 'Track record',
+    shadcnUi: 'Longer track record, larger install base',
+    fossui: 'v0.1.0-beta, early, verify before production use',
+  },
+];
+
+export default function ShadcnUiComparisonPage() {
+  return (
+    <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-8 px-4 py-10 sm:py-14">
+      <div className="flex flex-col gap-3 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+          fossui vs shadcn_ui for Flutter
+        </h1>
+        <p className="text-base text-muted-foreground text-balance">
+          Both bring a coss/shadcn-style look to Flutter. Here is the honest trade-off,
+          not a sales pitch.
+        </p>
+      </div>
+
+      <div className="w-full overflow-x-auto rounded-2xl border">
+        <div className="grid min-w-[560px] grid-cols-3 border-b bg-muted/50 text-xs font-medium">
+          <div className="p-3">&nbsp;</div>
+          <div className="p-3">shadcn_ui</div>
+          <div className="p-3">fossui</div>
+        </div>
+        {rows.map((row, i) => (
+          <div
+            key={row.label}
+            className={`grid min-w-[560px] grid-cols-3 text-sm${i > 0 ? ' border-t' : ''}`}
+          >
+            <div className="p-3 font-medium">{row.label}</div>
+            <div className="p-3 text-muted-foreground">{row.shadcnUi}</div>
+            <div className="p-3">{row.fossui}</div>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        shadcn_ui has more components and a bigger install base today. fossui is
+        framework-agnostic by design (it does not require MaterialApp), lighter, and
+        its docs render live previews for every component and state.
+      </p>
+
+      <div className="flex justify-center">
+        <Button size="lg" render={<Link href="/docs" />}>
+          Get started with fossui
+          <ArrowRight />
+        </Button>
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/docs/[[...slug]]/page.tsx b/src/app/docs/[[...slug]]/page.tsx
index 53ce219..b874f1f 100644
--- a/src/app/docs/[[...slug]]/page.tsx
+++ b/src/app/docs/[[...slug]]/page.tsx
@@ -56,8 +56,12 @@ export async function generateMetadata(props: PageProps<'/docs/[[...slug]]'>): P
   return {
     title: page.data.title,
     description: page.data.description,
+    alternates: { canonical: page.url },
     openGraph: {
       images: getPageImage(page).url,
     },
+    twitter: {
+      images: getPageImage(page).url,
+    },
   };
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index aaaa77b..29bf61a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,13 +7,27 @@ import { cn } from '@/lib/cn';
 const geistSans = Geist({ subsets: ['latin'], variable: '--font-sans' });
 const geistMono = Geist_Mono({ subsets: ['latin'], variable: '--font-mono' });
 
+const title = 'fossui — A Flutter UI Kit With Its Own Identity';
 const description =
-  "An open-source Flutter UI library, inspired by coss.com/ui, Cal.com's design system. Themed from one source, accessible, one import.";
+  'A minimal, lightweight Flutter component set for developers tired of every app looking like Material. Drops into any Flutter app, no heavy dependencies.';
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'fossui',
+  description,
+  license: 'https://opensource.org/licenses/MIT',
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Android, iOS, Linux, macOS, Web, Windows',
+  softwareVersion: '0.1.0-beta.3',
+  url: 'https://fossui.org',
+  sameAs: ['https://github.com/fossui/fossui', 'https://pub.dev/packages/fossui'],
+};
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://fossui.org'),
   title: {
-    default: 'fossui',
+    default: title,
     template: '%s | fossui',
   },
   description,
@@ -21,12 +35,12 @@ export const metadata: Metadata = {
     type: 'website',
     siteName: 'fossui',
     url: 'https://fossui.org',
-    title: 'fossui',
+    title,
     description,
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'fossui',
+    title,
     description,
   },
 };
@@ -39,6 +53,10 @@ export default function Layout({ children }: LayoutProps<'/'>) {
       suppressHydrationWarning
     >
       <body className="flex flex-col min-h-screen font-sans">
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
         <Provider>{children}</Provider>
       </body>
     </html>
diff --git a/src/app/llms.txt/route.ts b/src/app/llms.txt/route.ts
index fc80cb6..a316c2b 100644
--- a/src/app/llms.txt/route.ts
+++ b/src/app/llms.txt/route.ts
@@ -1,8 +1,31 @@
 import { source } from '@/lib/source';
 import { llms } from 'fumadocs-core/source';
+import { pubDevUrl, showcaseUrl } from '@/lib/shared';
 
 export const revalidate = false;
 
+const preamble = `# fossui
+
+> A minimal, lightweight Flutter UI component library for developers who want an
+> alternative to the default Material look. Inspired by coss.com/ui, Cal.com's
+> design system: superellipse corners, single-source theming, a clean modern
+> aesthetic. Works under MaterialApp, CupertinoApp, or a bare WidgetsApp; it
+> reads its own theme first, so nothing in the app shell needs to change.
+
+Key facts:
+
+- 21 components shipped, more on the roadmap (https://fossui.org/roadmap)
+- One runtime dependency, ~314 KB, pure Dart, no bundled icon package
+- One FossThemeData object drives color, typography, radius, spacing, and motion
+- 160/160 pub.dev score (${pubDevUrl})
+- Live playground and theme builder: ${showcaseUrl}
+- Open source, MIT licensed: https://github.com/fossui/fossui
+- Status: v0.1.0-beta, mobile-tested; web and desktop expected to work, not yet verified
+
+Comparisons: https://fossui.org/vs/shadcn-ui and https://fossui.org/vs/forui
+
+`;
+
 export function GET() {
-  return new Response(llms(source).index());
+  return new Response(preamble + llms(source).index());
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..b3d51a1
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { baseOptions } from '@/lib/layout.shared';
+
+export default function NotFound() {
+  return (
+    <HomeLayout {...baseOptions()}>
+      <main className="mx-auto flex w-full max-w-[1100px] flex-1 flex-col items-center justify-center gap-4 px-4 py-20 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">Page not found</h1>
+        <p className="max-w-md text-base text-muted-foreground text-balance">
+          That page doesn&apos;t exist, or moved. Try the docs, or head back home.
+        </p>
+        <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
+          <Button size="lg" render={<Link href="/" />}>
+            Back home
+          </Button>
+          <Button size="lg" variant="outline" render={<Link href="/docs" />}>
+            Docs
+            <ArrowRight />
+          </Button>
+        </div>
+      </main>
+    </HomeLayout>
+  );
+}
diff --git a/src/app/og/home/route.tsx b/src/app/og/home/route.tsx
new file mode 100644
index 0000000..cb6cf70
--- /dev/null
+++ b/src/app/og/home/route.tsx
@@ -0,0 +1,16 @@
+import { ImageResponse } from 'next/og';
+import { generate } from 'fumadocs-ui/og';
+import { appName } from '@/lib/shared';
+
+export const revalidate = false;
+
+export function GET() {
+  return new ImageResponse(
+    generate({
+      title: 'A Flutter UI kit with its own identity.',
+      description: 'A minimal, lightweight Flutter component set. Drops into any Flutter app.',
+      site: appName,
+    }),
+    { width: 1200, height: 630 },
+  );
+}
diff --git a/src/app/og/roadmap/route.tsx b/src/app/og/roadmap/route.tsx
new file mode 100644
index 0000000..acac5f8
--- /dev/null
+++ b/src/app/og/roadmap/route.tsx
@@ -0,0 +1,16 @@
+import { ImageResponse } from 'next/og';
+import { generate } from 'fumadocs-ui/og';
+import { appName } from '@/lib/shared';
+
+export const revalidate = false;
+
+export function GET() {
+  return new ImageResponse(
+    generate({
+      title: 'Component Roadmap',
+      description: 'What fossui ships today and what is planned next.',
+      site: appName,
+    }),
+    { width: 1200, height: 630 },
+  );
+}
diff --git a/src/app/og/vs/forui/route.tsx b/src/app/og/vs/forui/route.tsx
new file mode 100644
index 0000000..5348382
--- /dev/null
+++ b/src/app/og/vs/forui/route.tsx
@@ -0,0 +1,16 @@
+import { ImageResponse } from 'next/og';
+import { generate } from 'fumadocs-ui/og';
+import { appName } from '@/lib/shared';
+
+export const revalidate = false;
+
+export function GET() {
+  return new ImageResponse(
+    generate({
+      title: 'fossui vs forui for Flutter',
+      description: 'Design language, theming, and ecosystem, compared.',
+      site: appName,
+    }),
+    { width: 1200, height: 630 },
+  );
+}
diff --git a/src/app/og/vs/shadcn-ui/route.tsx b/src/app/og/vs/shadcn-ui/route.tsx
new file mode 100644
index 0000000..792a131
--- /dev/null
+++ b/src/app/og/vs/shadcn-ui/route.tsx
@@ -0,0 +1,16 @@
+import { ImageResponse } from 'next/og';
+import { generate } from 'fumadocs-ui/og';
+import { appName } from '@/lib/shared';
+
+export const revalidate = false;
+
+export function GET() {
+  return new ImageResponse(
+    generate({
+      title: 'fossui vs shadcn_ui for Flutter',
+      description: 'Framework lock-in, dependency weight, docs, and maturity, compared.',
+      site: appName,
+    }),
+    { width: 1200, height: 630 },
+  );
+}
diff --git a/src/app/robots.ts b/src/app/robots.ts
new file mode 100644
index 0000000..c99599f
--- /dev/null
+++ b/src/app/robots.ts
@@ -0,0 +1,13 @@
+import type { MetadataRoute } from 'next';
+
+export const dynamic = 'force-static';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: 'https://fossui.org/sitemap.xml',
+  };
+}
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
new file mode 100644
index 0000000..8e2dc0b
--- /dev/null
+++ b/src/app/sitemap.ts
@@ -0,0 +1,18 @@
+import type { MetadataRoute } from 'next';
+import { source } from '@/lib/source';
+
+export const dynamic = 'force-static';
+
+const baseUrl = 'https://fossui.org';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const staticRoutes = ['', '/docs', '/roadmap', '/vs/shadcn-ui', '/vs/forui'].map((route) => ({
+    url: `${baseUrl}${route}`,
+  }));
+
+  const docRoutes = source.getPages().map((page) => ({
+    url: `${baseUrl}${page.url}`,
+  }));
+
+  return [...staticRoutes, ...docRoutes];
+}
diff --git a/src/components/copy-command.tsx b/src/components/copy-command.tsx
deleted file mode 100644
index ca2d5e0..0000000
--- a/src/components/copy-command.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { Check, Copy } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-
-export function CopyCommand({ command }: { command: string }) {
-  const [copied, setCopied] = useState(false);
-
-  function copy() {
-    navigator.clipboard.writeText(command).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }
-
-  return (
-    <div className="flex items-center gap-1 rounded-lg border bg-card py-1 pr-1 pl-4">
-      <code className="font-mono text-sm text-muted-foreground">{command}</code>
-      <Button
-        variant="ghost"
-        size="icon-sm"
-        aria-label={copied ? 'Copied' : 'Copy install command'}
-        onClick={copy}
-      >
-        {copied ? <Check /> : <Copy />}
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/faq-accordion.tsx b/src/components/faq-accordion.tsx
new file mode 100644
index 0000000..2c04dcd
--- /dev/null
+++ b/src/components/faq-accordion.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+import { Minus, Plus } from 'lucide-react';
+
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export function FaqAccordion({ items }: { items: FaqItem[] }) {
+  const [openIndex, setOpenIndex] = useState(-1);
+
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-col">
+      {items.map((item, i) => {
+        const isOpen = i === openIndex;
+        return (
+          <div key={item.question} className={isOpen ? 'py-1.5' : undefined}>
+            <button
+              type="button"
+              onClick={() => setOpenIndex(isOpen ? -1 : i)}
+              aria-expanded={isOpen}
+              className={`flex w-full items-start justify-between gap-4 rounded-2xl px-4 py-4 text-left transition-colors ${
+                isOpen ? 'bg-muted' : 'border-b hover:bg-accent/50'
+              }`}
+            >
+              <span className="font-medium">{item.question}</span>
+              {isOpen ? (
+                <Minus className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              ) : (
+                <Plus className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
+              )}
+            </button>
+            {isOpen && (
+              <p className="px-4 pb-4 text-sm text-muted-foreground">{item.answer}</p>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/install-tabs.tsx b/src/components/install-tabs.tsx
new file mode 100644
index 0000000..66110b7
--- /dev/null
+++ b/src/components/install-tabs.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface InstallOption {
+  label: string;
+  command: string;
+}
+
+export function InstallTabs({ options }: { options: InstallOption[] }) {
+  const [active, setActive] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  function selectTab(i: number) {
+    if (i === active) return;
+    setVisible(false);
+    setTimeout(() => {
+      setActive(i);
+      setVisible(true);
+    }, 100);
+  }
+
+  function copy() {
+    navigator.clipboard.writeText(options[active]!.command).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <div className="w-full max-w-md rounded-2xl border bg-card shadow-xs/5">
+      <div className="flex items-center gap-1 p-2">
+        {options.map((option, i) => (
+          <button
+            key={option.label}
+            type="button"
+            onClick={() => selectTab(i)}
+            aria-pressed={i === active}
+            className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-colors ${
+              i === active
+                ? 'bg-muted text-foreground'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+      <div className="flex items-center justify-between gap-3 border-t px-4 py-3">
+        <code
+          className={`overflow-x-auto text-nowrap font-mono text-sm text-muted-foreground transition-opacity duration-150 ${
+            visible ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <span className="mr-2 select-none text-muted-foreground/50">$</span>
+          {options[active]!.command}
+        </code>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="shrink-0"
+          aria-label={copied ? 'Copied' : 'Copy install command'}
+          onClick={copy}
+        >
+          {copied ? <Check /> : <Copy />}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/layout.shared.tsx b/src/lib/layout.shared.tsx
index 4ee4eec..5ab6e6c 100644
--- a/src/lib/layout.shared.tsx
+++ b/src/lib/layout.shared.tsx
@@ -1,6 +1,9 @@
+import { Star } from 'lucide-react';
 import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 import { appName, gitConfig, pubDevUrl, showcaseUrl } from './shared';
 
+const githubUrl = `https://github.com/${gitConfig.user}/${gitConfig.repo}`;
+
 export function baseOptions(): BaseLayoutProps {
   return {
     nav: {
@@ -8,9 +11,25 @@ export function baseOptions(): BaseLayoutProps {
     },
     links: [
       { text: 'Docs', url: '/docs' },
-      { text: 'Gallery', url: showcaseUrl, external: true },
+      { text: 'Playground', url: showcaseUrl, external: true },
+      { text: 'Roadmap', url: '/roadmap' },
       { text: 'pub.dev', url: pubDevUrl, external: true },
+      {
+        type: 'custom',
+        secondary: true,
+        children: (
+          <a
+            href={githubUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground"
+          >
+            <Star className="size-3" />
+            13
+          </a>
+        ),
+      },
     ],
-    githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`,
+    githubUrl,
   };
 }