refactor(docs): extract landing primitives, sections, and content

docs/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@orama/orama": "^3.1.18",
+    "clsx": "^2.1.1",
     "fumadocs-core": "16.8.5",
     "fumadocs-mdx": "14.3.2",
     "fumadocs-ui": "16.8.5",

docs/src/app/(home)/_sections/_window-dots.tsx

@@ -0,0 +1,14 @@
+export function WindowDots({ filename }: { filename: string }) {
+  return (
+    <>
+      <div className="flex gap-1.5">
+        <span className="size-2.5 rounded-full bg-red-500/70" />
+        <span className="size-2.5 rounded-full bg-yellow-500/70" />
+        <span className="size-2.5 rounded-full bg-green-500/70" />
+      </div>
+      <span className="text-xs text-fd-muted-foreground ml-2 font-mono">
+        {filename}
+      </span>
+    </>
+  );
+}

docs/src/app/(home)/_sections/comparison-section.tsx

@@ -0,0 +1,94 @@
+import { CodePanel, SectionHeader } from "@/components/ui";
+import { highlight } from "@/lib/highlight";
+import { COMPARISON } from "@/lib/landing-content";
+
+export async function ComparisonSection() {
+  const [taskitoCode, celeryCode] = await Promise.all([
+    highlight(COMPARISON.taskito.code, "python"),
+    highlight(COMPARISON.celery.code, "python"),
+  ]);
+
+  return (
+    <section className="px-4 py-20 max-w-6xl mx-auto w-full">
+      <SectionHeader
+        title={COMPARISON.title}
+        description={COMPARISON.description}
+      />
+      <div className="space-y-6">
+        <div className="grid md:grid-cols-2 gap-4">
+          <CodePanel
+            tone="primary"
+            label={COMPARISON.taskito.label}
+            caption={COMPARISON.taskito.caption}
+          >
+            {taskitoCode}
+          </CodePanel>
+          <CodePanel
+            tone="muted"
+            label={COMPARISON.celery.label}
+            caption={COMPARISON.celery.caption}
+          >
+            {celeryCode}
+          </CodePanel>
+        </div>
+        <DifferentiatorTable />
+      </div>
+    </section>
+  );
+}
+
+function DifferentiatorTable() {
+  return (
+    <div className="rounded-lg border border-fd-border bg-fd-card overflow-hidden">
+      <table className="w-full border-collapse text-xs sm:text-sm">
+        <thead>
+          <tr className="border-b border-fd-border bg-fd-muted">
+            <th
+              scope="col"
+              className="text-left px-4 py-3 font-medium text-fd-muted-foreground"
+            >
+              <span className="sr-only">Property</span>
+            </th>
+            <th
+              scope="col"
+              className="text-left px-4 py-3 font-semibold text-fd-primary"
+            >
+              {COMPARISON.taskito.label}
+            </th>
+            <th
+              scope="col"
+              className="text-left px-4 py-3 font-semibold text-fd-foreground"
+            >
+              {COMPARISON.celery.label}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {COMPARISON.rows.map((row, i) => (
+            <tr
+              key={row.label}
+              className={
+                i < COMPARISON.rows.length - 1
+                  ? "border-b border-fd-border"
+                  : undefined
+              }
+            >
+              <th
+                scope="row"
+                className="text-left px-4 py-3 font-medium text-fd-muted-foreground align-top"
+              >
+                {row.label}
+              </th>
+              <td className="px-4 py-3 align-top text-fd-foreground">
+                {row.taskito}
+              </td>
+              <td className="px-4 py-3 align-top text-fd-muted-foreground">
+                {row.celery}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

docs/src/app/(home)/_sections/cta.tsx

@@ -0,0 +1,45 @@
+import { ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui";
+import { CTA as CTA_CONTENT } from "@/lib/landing-content";
+
+export function CTA() {
+  return (
+    <section className="px-4 py-20 mb-12">
+      <div className="max-w-3xl mx-auto rounded-xl border border-fd-border bg-fd-card p-10 text-center">
+        <h2 className="text-2xl sm:text-3xl font-bold tracking-tight mb-3">
+          {renderTitleWithCode(CTA_CONTENT.title)}
+        </h2>
+        <p className="text-fd-muted-foreground mb-7 max-w-xl mx-auto">
+          {CTA_CONTENT.description}
+        </p>
+        <div className="flex flex-wrap gap-3 justify-center">
+          <Button
+            variant="primary"
+            href={CTA_CONTENT.primary.href}
+            icon={<ArrowRight className="size-4" />}
+          >
+            {CTA_CONTENT.primary.label}
+          </Button>
+          <Button variant="secondary" href={CTA_CONTENT.secondary.href}>
+            {CTA_CONTENT.secondary.label}
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function renderTitleWithCode(title: string) {
+  const parts = title.split(/(`[^`]+`)/g);
+  return parts.map((part, i) => {
+    if (part.startsWith("`") && part.endsWith("`")) {
+      return (
+        // biome-ignore lint/suspicious/noArrayIndexKey: stable split
+        <code key={i} className="font-mono text-fd-primary">
+          {part.slice(1, -1)}
+        </code>
+      );
+    }
+    return part;
+  });
+}