From 60748bf7a8741e8894903809e8af2fb4b5dc4247 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 16 Sep 2026 06:13:24 +0000 Subject: [PATCH 01/26] feat(web): add the Tricorder product page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Build /tricorder from "The Intelligence Layer" copy doc on the site's own design language: the product-hero shell with a scan console drawn in code (signal meters, version chain, verdict) on a radar sweep; three evidence cards for "Not Every Threat Has a CVE" (version timeline, behaviour diff, relationship graph); a dark context scene where history, behavior and relationships converge on the component and resolve to a verdict; the Analyze → Compare → Correlate → Enrich rail ending in a verdict terminal; and the substrate scene fanning the Tricorder core out to Clean Images, Clean Libraries and CleanSight. Footer CTA card with a verdict ledger. Every scene is SVG/CSS on the --fs-* tokens; motion reuses the cs-lep-* keyframes plus a small cs-tri-* set for the console, all off under prefers-reduced-motion. Registered in the Products nav (new `lens` glyph), the footer Product column, STATIC_ROUTES, llms.txt and WEB-PAGES.md. Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_0198mhURhZhARAmAHoDNoCmQ --- apps/web/public/llms.txt | 1 + apps/web/src/app/globals.css | 64 +++ apps/web/src/app/sitemap.ts | 1 + apps/web/src/app/tricorder/page.tsx | 65 +++ apps/web/src/components/nav/icons/glyphs.tsx | 8 + apps/web/src/components/sections/Footer.tsx | 1 + .../sections/tricorder/TricorderCTA.tsx | 179 +++++++ .../sections/tricorder/TricorderContext.tsx | 486 ++++++++++++++++++ .../sections/tricorder/TricorderHero.tsx | 185 +++++++ .../tricorder/TricorderHeroConsole.tsx | 288 +++++++++++ .../sections/tricorder/TricorderPipeline.tsx | 278 ++++++++++ .../sections/tricorder/TricorderSubstrate.tsx | 407 +++++++++++++++ .../sections/tricorder/TricorderThreatGap.tsx | 307 +++++++++++ .../sections/tricorder/tricorder-palette.ts | 22 + apps/web/src/lib/nav-config.ts | 8 +- docs/web/WEB-PAGES.md | 1 + 16 files changed, 2300 insertions(+), 1 deletion(-) create mode 100644 apps/web/src/app/tricorder/page.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderCTA.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderContext.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderHero.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderHeroConsole.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderPipeline.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderSubstrate.tsx create mode 100644 apps/web/src/components/sections/tricorder/TricorderThreatGap.tsx create mode 100644 apps/web/src/components/sections/tricorder/tricorder-palette.ts diff --git a/apps/web/public/llms.txt b/apps/web/public/llms.txt index 535a03f2..2b0f7220 100644 --- a/apps/web/public/llms.txt +++ b/apps/web/public/llms.txt @@ -9,6 +9,7 @@ - [Attack Surface Reduction](https://www.cleanstart.com/attack-surface-reduction): Shrink your container attack surface by removing unnecessary packages and layers. - [Vulnerability Remediation](https://www.cleanstart.com/vulnerability-remediation): Automated CVE remediation workflows for container images. - [Clean Libraries](https://www.cleanstart.com/clean-libraries): Hardened open-source library builds with security patches backported. +- [Tricorder](https://www.cleanstart.com/tricorder): The intelligence layer behind CleanStart — behavioral analysis, package history, cross-package correlation and threat intelligence combined into an evidence-backed verdict for every component. ## Solutions by Role - [For CISOs](https://www.cleanstart.com/for-ciso): Executive-level container security posture, compliance reporting, and risk reduction metrics. diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 8472e705..3843b8f3 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -6366,3 +6366,67 @@ body { .cs-thank-you-secondary:hover svg { transform: translateX(3px); } + +/* Tricorder page — hero scan console (TricorderHeroConsole.tsx). The radar + wedge rotates behind the card, the signal meters fill in sequence, the + finding lines and the verdict pill arrive after their meter. Transform / + opacity only (GPU-composited); every one is off under reduced-motion, where + the console renders in its finished state. */ +@keyframes cs-tri-sweep { + to { + transform: rotate(360deg); + } +} +@keyframes cs-tri-fill { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} +@keyframes cs-tri-late { + from { + opacity: 0; + transform: translateY(4px); + } + to { + opacity: 1; + transform: none; + } +} +@keyframes cs-tri-blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.35; + } +} +.cs-tri-sweep { + will-change: transform; + animation: cs-tri-sweep 9s linear infinite; +} +.cs-tri-fill { + transform-origin: left center; + animation: cs-tri-fill 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; +} +.cs-tri-late { + animation: cs-tri-late 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; +} +.cs-tri-verdict { + animation: cs-tri-late 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; +} +.cs-tri-blink { + animation: cs-tri-blink 1.6s ease-in-out infinite; +} +@media (prefers-reduced-motion: reduce) { + .cs-tri-sweep, + .cs-tri-fill, + .cs-tri-late, + .cs-tri-verdict, + .cs-tri-blink { + animation: none !important; + } +} diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts index d85510c4..171fc0ec 100644 --- a/apps/web/src/app/sitemap.ts +++ b/apps/web/src/app/sitemap.ts @@ -133,6 +133,7 @@ const STATIC_ROUTES: ReadonlyArray<{ path: string }> = [ { path: '/resource-center' }, { path: '/software-bill-materials' }, { path: '/teams' }, + { path: '/tricorder' }, { path: '/vulnerability-remediation' }, { path: '/webinars' }, ]; diff --git a/apps/web/src/app/tricorder/page.tsx b/apps/web/src/app/tricorder/page.tsx new file mode 100644 index 00000000..1568b7d0 --- /dev/null +++ b/apps/web/src/app/tricorder/page.tsx @@ -0,0 +1,65 @@ +import { Header } from "@/components/nav/Header"; +import { Footer } from "@/components/sections/Footer"; +import { FadeUp } from "@/components/ui/FadeUp"; +import { TricorderHero } from "@/components/sections/tricorder/TricorderHero"; +import { TricorderThreatGap } from "@/components/sections/tricorder/TricorderThreatGap"; +import { TricorderContext } from "@/components/sections/tricorder/TricorderContext"; +import { TricorderPipeline } from "@/components/sections/tricorder/TricorderPipeline"; +import { TricorderSubstrate } from "@/components/sections/tricorder/TricorderSubstrate"; +import { TricorderCTA } from "@/components/sections/tricorder/TricorderCTA"; +import { buildPageMetadata } from "@/lib/seo/canonical"; +import { breadcrumbSchema, softwareApplicationSchema } from "@/lib/seo/jsonld"; +import { JsonLdGraph } from "@/components/JsonLdGraph"; +import { getPageGraph } from "@/lib/seo/compose-page"; + +const DESCRIPTION = + "Tricorder analyzes, compares, correlates, and enriches every software component to produce an evidence-backed verdict before you trust it."; + +export const metadata = buildPageMetadata({ + title: "Tricorder: The Intelligence Layer for Software Trust | CleanStart", + absoluteTitle: true, + description: DESCRIPTION, + path: "/tricorder", + variant: "hero", + eyebrow: "Products", + ogTitle: "The Intelligence Layer for Software Trust", + titleAccent: "Software Trust", +}); + +export const revalidate = 21600; // 6h ISR fallback — on-demand publish revalidation keeps this fresh + +export default async function TricorderPage(): Promise { + const graph = await getPageGraph("/tricorder", [ + breadcrumbSchema([ + { name: "Home", path: "/" }, + { name: "Tricorder" }, + ]), + softwareApplicationSchema({ + name: "Tricorder", + description: DESCRIPTION, + path: "/tricorder", + }), + ]); + return ( + <> + +
+
+ + + + + + + + + + + + + +
+