Adds more content pages

.gitignore

@@ -42,3 +42,5 @@ src/Mocha/benchmarks/Mocha.Mediator.Benchmarks/Generated/
 Directory.Build.user.props
 appsettings.user.json
 .playwright-mcp/
+
+node_modules/

website/app/(content)/platform/agentic-coding/ReviewSection.tsx

@@ -8,6 +8,7 @@ import { SectionHeading } from "@/src/components/SectionHeading";
 import { MockWindowChrome } from "@/src/components/MockWindowChrome";
 import { BranchGlyph } from "@/src/icons/BranchGlyph";
 import { CheckGlyph } from "@/src/icons/CheckGlyph";
+import { SpinnerGlyph } from "@/src/icons/SpinnerGlyph";
 
 interface HunkRun {
   readonly t: string;
@@ -243,31 +244,19 @@ function CursorGlyph({ className }: { readonly className?: string }) {
   );
 }
 
-/** Amber spinner, GitHub-style, for a check that is still running: a
- * three-quarter circle arc rotating in place. */
+/** Amber spinner, GitHub-style, for a check that is still running. */
 function PendingSpinner() {
   return (
-    <svg
-      viewBox="0 0 16 16"
-      fill="none"
-      aria-hidden="true"
-      className="size-3.5 shrink-0 animate-spin"
-    >
-      <circle
-        cx="8"
-        cy="8"
-        r="5"
-        stroke="#d9a441"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeDasharray="23.5"
-      />
-    </svg>
+    <SpinnerGlyph className="size-3.5 shrink-0 animate-spin text-[#d9a441] motion-reduce:animate-none" />
   );
 }
 
+interface StatusBadgeProps {
+  readonly status: DemoStatus;
+}
+
 /** The PR status badge in the title bar: In Review -> Approved -> Merged. */
-function StatusBadge({ status }: { readonly status: DemoStatus }) {
+function StatusBadge({ status }: StatusBadgeProps) {
   if (status === "approved") {
     return (
       <span className="border-cc-success/40 bg-cc-success/10 text-cc-success ml-auto inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-mono text-[0.65rem] tracking-[0.1em] uppercase">
@@ -300,30 +289,27 @@ function StatusBadge({ status }: { readonly status: DemoStatus }) {
         background: "rgba(217, 164, 65, 0.1)",
       }}
     >
-      <span className="size-1.5 animate-pulse rounded-full bg-current" />
+      <span className="size-1.5 animate-pulse rounded-full bg-current motion-reduce:animate-none" />
       In Review
     </span>
   );
 }
 
-/** One file in the PR: GitHub-dark file box with header strip, added-line
- * green wash, and the Viewed checkbox the pointer ticks. */
-function FileCard({
-  hunk,
-  viewed,
-  pressed,
-  checkboxRef,
-}: {
+interface FileCardProps {
   readonly hunk: Hunk;
   readonly viewed: boolean;
   readonly pressed: boolean;
   readonly checkboxRef: (el: HTMLElement | null) => void;
-}) {
+}
+
+/** One file in the PR: GitHub-dark file box with header strip, added-line
+ * green wash, and the Viewed checkbox the pointer ticks. */
+function FileCard({ hunk, viewed, pressed, checkboxRef }: FileCardProps) {
   return (
     <div className="border-cc-card-border overflow-hidden rounded-lg border select-none">
       <div className="border-cc-card-border flex items-center gap-2 border-b bg-white/[0.03] px-3 py-2">
         <FileGlyph />
-        <span className="text-cc-nav-label min-w-0 truncate font-mono text-xs">
+        <span className="text-cc-ink-dim min-w-0 truncate font-mono text-xs">
           {hunk.file}
         </span>
         <span className="flex shrink-0 items-center gap-1.5 font-mono text-[0.6rem]">
@@ -482,7 +468,7 @@ export function ReviewSection() {
                   <span className="text-cc-ink font-mono text-sm">
                     feat: add product reviews
                   </span>
-                  <Eyebrow as="span" size="2xs">
+                  <Eyebrow as="span" size="2xs" color="ink-dim">
                     3 files changed
                   </Eyebrow>
                   <span className="font-mono text-[0.65rem]">
@@ -510,7 +496,7 @@ export function ReviewSection() {
               {/* CI results under the diff: the platform's schema check runs
                 beside the usual build and tests. */}
               <Card className="p-4 select-none">
-                <Eyebrow as="p" className="text-[0.6rem]">
+                <Eyebrow as="p" color="ink-dim" className="text-[0.6rem]">
                   Checks
                 </Eyebrow>
                 <ul className="mt-2.5 space-y-1.5">

website/app/(content)/platform/analytics/ClosingCta.tsx

@@ -0,0 +1,24 @@
+import { Band } from "@/src/components/Band";
+import { ButtonRow } from "@/src/components/ButtonRow";
+import { SectionHeading } from "@/src/components/SectionHeading";
+import { OutlineButton, SolidButton } from "@/src/design-system/Button";
+
+export function ClosingCta() {
+  return (
+    <Band className="mt-12" skin="accent" layout="centered">
+      <SectionHeading
+        align="center"
+        title="The whole story, from spike to span."
+        description="Follow an incident from the latency chart to the failing operation to the exact span that caused it, without leaving Nitro."
+      />
+      <ButtonRow align="center" className="mt-9">
+        <SolidButton href="https://nitro.chillicream.com">
+          Start for Free
+        </SolidButton>
+        <OutlineButton href="/docs/nitro/open-telemetry/operation-monitoring">
+          Read the Docs
+        </OutlineButton>
+      </ButtonRow>
+    </Band>
+  );
+}

website/app/(content)/platform/analytics/FindTheCause.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+
+import dynamic from "next/dynamic";
+
+import { ChapterBand } from "@/src/components/ChapterBand";
+import { FeatureRow } from "@/src/components/FeatureRow";
+import { MockWindowChrome } from "@/src/components/MockWindowChrome";
+
+const NitroDiagnose = dynamic(() =>
+  import("@/src/nitro").then((m) => m.NitroDiagnose),
+);
+const NitroTrace = dynamic(() =>
+  import("@/src/nitro").then((m) => m.NitroTrace),
+);
+
+interface FramedVisualProps {
+  readonly children: ReactNode;
+}
+
+function FramedVisual({ children }: FramedVisualProps) {
+  return (
+    <MockWindowChrome
+      glow={{
+        background:
+          "radial-gradient(60% 60% at 50% 40%, rgba(94,234,212,0.16), transparent 70%)",
+        inset: "-inset-x-6 -inset-y-4",
+        blur: "blur-3xl",
+        rounded: "rounded-[2rem]",
+      }}
+      shadow="none"
+      rounded="rounded-xl"
+      surfaceClassName="bg-cc-surface shadow-2xl shadow-black/40"
+    >
+      {children}
+    </MockWindowChrome>
+  );
+}
+
+export function FindTheCause() {
+  return (
+    <>
+      <ChapterBand
+        className="mt-12 sm:mt-16"
+        title="Move from a metric spike to the related traces."
+      />
+
+      <section className="py-12 sm:py-16">
+        <div className="flex flex-col gap-16 sm:gap-20">
+          <FeatureRow
+            title="Follow one request through its reported trace."
+            body="Open the trace waterfall to inspect the services and spans that reported timing for one request, including which calls contributed the most latency."
+            visual={
+              <FramedVisual>
+                <NitroTrace className="w-full" />
+              </FramedVisual>
+            }
+          />
+
+          <FeatureRow
+            reverse
+            title="Inspect the trace behind a failed operation."
+            body="When errors spike, open the failing operation and inspect its traces, spans, and captured exception details without correlating logs by hand."
+            visual={
+              <FramedVisual>
+                <NitroDiagnose className="w-full" />
+              </FramedVisual>
+            }
+          />
+        </div>
+      </section>
+    </>
+  );
+}

website/app/(content)/platform/analytics/FullOtelBand.tsx

@@ -0,0 +1,73 @@
+import { Band } from "@/src/components/Band";
+import { CheckList } from "@/src/components/CheckList";
+import { SectionHeading } from "@/src/components/SectionHeading";
+import { CodeBlock } from "@/src/design-system/CodeBlock";
+import { Tag } from "@/src/design-system/Tag";
+
+type ChipKind = "graphql" | "rest" | "grpc" | "job" | "db";
+
+const KIND_LABEL: Record<ChipKind, string> = {
+  graphql: "GraphQL",
+  rest: "REST",
+  grpc: "gRPC",
+  job: "job",
+  db: "DB",
+};
+
+const STATEMENT_KINDS: readonly ChipKind[] = [
+  "graphql",
+  "rest",
+  "grpc",
+  "job",
+  "db",
+];
+
+const OTEL_CHECKS: readonly string[] = [
+  "Vendor-neutral OTLP in, no proprietary agent",
+  "Hot Chocolate is auto-instrumented",
+  "Works with any OpenTelemetry backend, not just Nitro",
+];
+
+export function FullOtelBand() {
+  return (
+    <Band
+      className="mt-12"
+      skin="card"
+      layout="split"
+      labelledBy="otel-title"
+      main={
+        <div>
+          <SectionHeading
+            titleId="otel-title"
+            title={
+              <>
+                OpenTelemetry-native,{" "}
+                <span className="text-cc-accent whitespace-nowrap">
+                  end to end.
+                </span>
+              </>
+            }
+            description="Configured services export supported traces, metrics, and logs over plain OTLP. Nitro links reported operation signals to the related distributed traces for investigation."
+          />
+          <div className="mt-6 flex flex-wrap gap-2">
+            {STATEMENT_KINDS.map((kind) => (
+              <Tag key={kind}>{KIND_LABEL[kind]}</Tag>
+            ))}
+          </div>
+          <CheckList items={OTEL_CHECKS} className="mt-7" />
+        </div>
+      }
+      aside={
+        <div className="[&>figure]:my-0">
+          <CodeBlock theme="poimandres">
+            <code className="language-csharp" data-meta='filename="Program.cs"'>
+              {
+                "builder.Services\n    .AddNitro()\n    .AddOpenTelemetry();\n\nbuilder.Services\n    .AddGraphQLServer()\n    .AddInstrumentation();"
+              }
+            </code>
+          </CodeBlock>
+        </div>
+      }
+    />
+  );
+}