Migrate /lp/agents to design tokens + shared components

scripts/routeMeta.mjs

@@ -64,7 +64,7 @@ export const ROUTE_META = {
   "/lp/agents": {
     title: "Fil One for AI Agents · S3 Storage for RAG, Agent Memory & Datasets",
     description:
-      `Give your AI agents durable, verifiable storage. S3-compatible, ${PRICE_PER_TB_SHORT}, no egress fees, integrity proven daily. Drop-in replacement for AWS S3.`,
+      `Give your AI agents S3-compatible storage at ${PRICE_PER_TB_SHORT}, no egress fees. Drop-in replacement for AWS S3.`,
     jsonLd: [
       {
         "@context": "https://schema.org",
@@ -154,7 +154,7 @@ export const ROUTE_META = {
   "/lp/rag-storage": {
     title: "Object Storage for RAG Pipelines · Fil One",
     description:
-      `Store and retrieve RAG corpora, embeddings, and vector indexes at ${PRICE_PER_TB_SHORT}. S3-compatible, no egress fees, verifiable integrity — built for LLM pipelines.`,
+      `Store and retrieve RAG corpora, embeddings, and vector indexes at ${PRICE_PER_TB_SHORT}. S3-compatible, no egress fees — built for LLM pipelines.`,
     jsonLd: [
       {
         "@context": "https://schema.org",
@@ -199,7 +199,7 @@ export const ROUTE_META = {
   "/lp/ml-checkpoints": {
     title: "ML Checkpoint Storage · Save Model Weights Cheaply | Fil One",
     description:
-      `Store ML checkpoints and model artifacts at ${PRICE_PER_TB_SHORT} with no egress fees. S3-compatible, durable, and verifiable — ideal for training runs on any cloud.`,
+      `Store ML checkpoints and model artifacts at ${PRICE_PER_TB_SHORT} with no egress fees. S3-compatible — ideal for training runs on any cloud.`,
     jsonLd: [
       {
         "@context": "https://schema.org",
@@ -254,22 +254,22 @@ export const ROUTE_META = {
   "/lp/log-retention": {
     title: `Cheap Log Retention Storage · ${PRICE_PER_TB_SHORT} | Fil One`,
     description:
-      `Store logs long-term at ${PRICE_PER_TB_SHORT} with no egress fees. S3-compatible, verifiable, and far cheaper than CloudWatch or Datadog for long-term retention.`,
+      `Store logs long-term at ${PRICE_PER_TB_SHORT} with no egress fees. S3-compatible, and far cheaper than CloudWatch or Datadog for long-term retention.`,
   },
   "/lp/web-scraping": {
     title: "Storage for Web Scraping & Data Collection · Fil One",
     description:
-      `Store scraped datasets, crawl archives, and raw HTML at ${PRICE_PER_TB_SHORT}. No egress fees when feeding data into pipelines. S3-compatible and verifiable.`,
+      `Store scraped datasets, crawl archives, and raw HTML at ${PRICE_PER_TB_SHORT}. No egress fees when feeding data into pipelines. S3-compatible.`,
   },
   "/lp/multi-cloud": {
     title: "Multi-Cloud Object Storage · S3-Compatible | Fil One",
     description:
-      `Add a cost-effective, verifiable storage tier to your multi-cloud stack. ${PRICE_PER_TB_SHORT}, no egress, S3-compatible — works alongside AWS, GCP, and Azure.`,
+      `Add a cost-effective storage tier to your multi-cloud stack. ${PRICE_PER_TB_SHORT}, no egress, S3-compatible — works alongside AWS, GCP, and Azure.`,
   },
   "/lp/data-sovereignty": {
-    title: "Data Sovereignty Storage · Verifiable, Decentralized | Fil One",
+    title: "EU Data Residency Storage · S3-Compatible | Fil One",
     description:
-      `Own your data with cryptographic proof. Fil One's Filecoin-backed storage gives you verifiable custody, no vendor lock-in, and S3-compatible access at ${PRICE_PER_TB_SHORT}.`,
+      `S3-compatible object storage with an EU region endpoint. No egress fees, no vendor lock-in, at ${PRICE_PER_TB_SHORT} flat.`,
   },
   "/lp/migrate-from-s3": {
     title: "Migrate from AWS S3 to Fil One · Drop-In S3 Replacement",
@@ -317,24 +317,24 @@ export const ROUTE_META = {
     ],
   },
   "/lp/compliance": {
-    title: "Compliant Object Storage with Verifiable Integrity · Fil One",
+    title: "Compliance-Ready Object Storage · Fil One",
     description:
-      `Meet compliance requirements with cryptographically verifiable storage. Integrity proven daily, 11 nines durability, S3-compatible at ${PRICE_PER_TB_SHORT}.`,
+      `S3-compatible storage with Object Lock retention, full version history, and encryption at rest and in transit, at ${PRICE_PER_TB_SHORT} flat.`,
   },
   "/lp/archival": {
-    title: "Archival Object Storage · Cheap, Durable & Verifiable | Fil One",
+    title: "Archival Object Storage · Flat-Rate, No Retrieval Fees | Fil One",
     description:
-      `Archive cold data at ${PRICE_PER_TB_SHORT} with 11 nines durability and integrity proven daily. No egress fees when you need to restore. S3-compatible.`,
+      `Archive cold data at ${PRICE_PER_TB_SHORT} flat. No egress fees or retrieval delay when you need to restore. S3-compatible.`,
   },
   "/lp/versioning": {
     title: "Object Storage with Versioning · Fil One",
     description:
-      `S3-compatible versioning on Filecoin. Keep every version of every object at ${PRICE_PER_TB_SHORT} with no egress fees and cryptographic integrity guarantees.`,
+      `S3-compatible versioning, built on Filecoin infrastructure. Keep every version of every object and download any of them at ${PRICE_PER_TB_SHORT} with no egress fees.`,
   },
   "/lp/regional-cloud": {
     title: "Regional Cloud Storage Alternative · Fil One",
     description:
-      `A globally distributed, cost-effective alternative to regional cloud storage. ${PRICE_PER_TB_SHORT}, no egress, S3-compatible, and verifiably durable.`,
+      `A cost-effective alternative to building your own regional cloud storage. ${PRICE_PER_TB_SHORT}, no egress, S3-compatible.`,
   },
   "/lp/media": {
     title: "Media & Asset Storage · S3-Compatible, No Egress | Fil One",
@@ -344,27 +344,27 @@ export const ROUTE_META = {
   "/lp/gaming": {
     title: "Game Asset & Save-Data Storage · Fil One",
     description:
-      `Durable, verifiable storage for game assets, saves, and telemetry at ${PRICE_PER_TB_SHORT}. Zero egress fees and S3-compatible — built for game backends.`,
+      `S3-compatible storage for game assets, saves, and telemetry at ${PRICE_PER_TB_SHORT}. Zero egress fees — built for game backends.`,
   },
   "/lp/genomics": {
     title: "Genomics & Life Sciences Data Storage · Fil One",
     description:
-      `Store genomics datasets, sequencing data, and research archives at ${PRICE_PER_TB_SHORT} with 11 nines durability, integrity proven daily, and zero egress fees.`,
+      `Store genomics datasets, sequencing data, and research archives at ${PRICE_PER_TB_SHORT} with zero egress fees on re-analysis, at any scale.`,
   },
   "/lp/web3-fintech": {
-    title: "Web3 & Fintech Data Storage · Verifiable, S3-Compatible | Fil One",
+    title: "Web3 & Fintech Data Storage · S3-Compatible | Fil One",
     description:
-      `Verifiable, decentralized storage for Web3 and fintech workloads. Integrity proven daily, ${PRICE_PER_TB_SHORT}, no egress, built on Filecoin.`,
+      `S3-compatible storage for Web3 and fintech workloads, built on Filecoin infrastructure. ${PRICE_PER_TB_SHORT} flat, no egress, no lock-in.`,
   },
   "/lp/web3-pivot": {
-    title: "Decentralized Storage for Web3 Projects · Fil One",
+    title: "S3-Compatible Storage for Web3 Projects · Fil One",
     description:
-      `Transition to decentralized storage without rebuilding your stack. Fil One is S3-compatible, Filecoin-backed, and ${PRICE_PER_TB_SHORT} with no egress fees.`,
+      `Point your Web3 product's storage at Filecoin infrastructure without rebuilding your stack. S3-compatible, no egress fees, no lock-in, at ${PRICE_PER_TB_SHORT} flat.`,
   },
   "/lp/web3-native": {
-    title: "Native Web3 Object Storage · Filecoin-Backed | Fil One",
+    title: "Native Web3 Object Storage · Built on Filecoin | Fil One",
     description:
-      `Purpose-built for Web3-native apps. S3-compatible, cryptographically verifiable storage on Filecoin at ${PRICE_PER_TB_SHORT}, integrity proven daily.`,
+      `Purpose-built for Web3-native apps. S3-compatible object storage built on Filecoin infrastructure at ${PRICE_PER_TB_SHORT}, no egress, no lock-in.`,
   },
   "/lp/barcelona": {
     title: `Fil One for Barcelona: European Storage, ${PRICE_PER_TB_SHORT}, No Egress Fees`,
@@ -436,17 +436,17 @@ export const ROUTE_META = {
   "/lp/grant-funded": {
     title: "Fil One · Storage that outlives the grant cycle",
     description:
-      `Flat ${PRICE_PER_TB_SHORT} research data storage with no exit fees and integrity verification every ~24 hours. Predictable for multi-year grants, S3-compatible.`,
+      `Flat ${PRICE_PER_TB_SHORT} research data storage with no exit fees. Predictable for multi-year grants, S3-compatible.`,
   },
   "/lp/collections-access": {
     title: "Fil One · Open the collection. Skip the egress bill.",
     description:
-      `Serve digital collections and IIIF imagery with $0 egress. Flat ${PRICE_PER_TB_SHORT} storage, S3-compatible for IIIF image servers, 11 nines durability.`,
+      `Serve digital collections and IIIF imagery with $0 egress. Flat ${PRICE_PER_TB_SHORT} storage, S3-compatible for IIIF image servers.`,
   },
   "/lp/digital-preservation": {
-    title: "Fil One · Preservation you can verify, not just trust",
+    title: "Fil One · Preservation you can afford to check",
     description:
-      `Flat ${PRICE_PER_TB_SHORT} digital preservation storage with integrity verification every ~24 hours. No retrieval fees, no egress. 11 nines durability, S3-compatible.`,
+      `Flat ${PRICE_PER_TB_SHORT} digital preservation storage. No retrieval fees, no egress — run fixity checks as often as your program requires. S3-compatible.`,
   },
   "/lp/affordable": {
     title: "Fil One · Make storage your lowest line item",
@@ -456,17 +456,17 @@ export const ROUTE_META = {
   "/lp/go-global": {
     title: "Fil One · Go global. Skip the multi-year build.",
     description:
-      `Embed S3-compatible object storage into your product. Global network, SLA-backed, ${PRICE_PER_TB_SHORT} flat. No capex, no infrastructure build — contact for enterprise and embedding terms.`,
+      `Embed S3-compatible object storage into your product. US and EU regions, SLA-backed, ${PRICE_PER_TB_SHORT} flat. No capex, no infrastructure build — contact for enterprise and embedding terms.`,
   },
   "/lp/metro": {
     title: "Fil One · Hyperscaler speed. Budget-tier bills.",
     description:
-      `S3-compatible object storage at ${PRICE_PER_TB_SHORT} flat. A global network of storage providers — fast reads without the hyperscaler price tag. No egress fees.`,
+      `S3-compatible object storage at ${PRICE_PER_TB_SHORT} flat. Always-hot storage with no egress fees — fast reads without the hyperscaler price tag.`,
   },
   "/lp/data-control": {
     title: "Fil One · Your data, under your control",
     description:
-      `S3-compatible storage with EU region endpoint, recurring integrity verification, $0 exit egress, and no vendor lock-in. Flat ${PRICE_PER_TB_SHORT}.`,
+      `S3-compatible storage with an EU region endpoint, $0 exit egress, and no vendor lock-in. Flat ${PRICE_PER_TB_SHORT}.`,
   },
   "/lp/ml-training": {
     title: "Fil One · Build around the clock",

src/components/FeatureCard.tsx

@@ -1,11 +1,17 @@
 import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
 import IconTile from "@/components/IconTile";
+import Pill from "@/components/Pill";
+import TextLink from "@/components/TextLink";
 
 interface FeatureCardProps {
   /** A Phosphor icon component, rendered inside the shared IconTile. */
   icon: PhosphorIcon;
   title: string;
   description: string;
+  /** Optional status tag next to the icon, e.g. "Coming soon". */
+  badge?: string;
+  /** Optional trailing link, e.g. a waitlist signup for a not-yet-live feature. */
+  cta?: { label: string; href: string };
   /** Extra classes on the card root (e.g. reveal-animation state). */
   className?: string;
 }
@@ -14,18 +20,28 @@ interface FeatureCardProps {
  * Icon feature card: a brand-tinted IconTile over a title and short
  * description. Shared by the pricing landing page Features grid and the
  * Enterprise "What's included" grid so the two stay visually identical.
+ * The optional badge/cta cover not-yet-live features that need a status tag
+ * and a waitlist link (e.g. the agent-knowledge-layer LP).
  */
-const FeatureCard = ({ icon, title, description, className = "" }: FeatureCardProps) => (
+const FeatureCard = ({ icon, title, description, badge, cta, className = "" }: FeatureCardProps) => (
   <div
     className={`flex flex-col gap-5 p-8 rounded-2xl border border-black/[0.07] bg-white shadow-elevated${
       className ? ` ${className}` : ""
     }`}
   >
-    <IconTile icon={icon} size={26} className="h-14 w-14" />
-    <div className="flex flex-col gap-2">
+    <div className="flex items-center justify-between gap-3">
+      <IconTile icon={icon} size={26} className="h-14 w-14" />
+      {badge && <Pill tone="neutral" className="whitespace-nowrap">{badge}</Pill>}
+    </div>
+    <div className="flex flex-1 flex-col gap-2">
       <h3 className="font-sans font-medium text-[18px] leading-[1.3] text-zinc-950 m-0">{title}</h3>
       <p className="font-sans font-normal text-[14px] leading-[1.6] text-zinc-500 m-0">{description}</p>
     </div>
+    {cta && (
+      <TextLink href={cta.href} tone="brand" arrow className="mt-1 self-start">
+        {cta.label}
+      </TextLink>
+    )}
   </div>
 );
 

src/components/LandingPage.test.tsx

@@ -58,6 +58,13 @@ const WORKLOADS = {
   ],
 };
 
+const FEATURES = {
+  label: "Features",
+  heading: "Features heading",
+  sub: "Features sub",
+  items: [{ icon: ArrowsOut, title: "Feature title", desc: "Feature desc" }],
+};
+
 const METRICS = {
   label: "Pricing",
   heading: "Metrics heading",
@@ -80,8 +87,15 @@ const surfaces = (config: LandingPageConfig) => {
 describe("LandingPage — surface alternation", () => {
   it("alternates grey/white starting grey, with the banner matching the section above it", () => {
     expect(
-      surfaces({ ...BASE, problem: PROBLEM, comparison: COMPARISON, workloads: WORKLOADS, metrics: METRICS })
-    ).toEqual(["grey", "white", "grey", "white", "white"]);
+      surfaces({
+        ...BASE,
+        problem: PROBLEM,
+        comparison: COMPARISON,
+        workloads: WORKLOADS,
+        features: FEATURES,
+        metrics: METRICS,
+      })
+    ).toEqual(["grey", "white", "grey", "white", "grey", "grey"]);
   });
 
   it("keeps alternating when a middle section is omitted", () => {
@@ -120,13 +134,21 @@ describe("LandingPage — optional sections", () => {
     const { container, getByText } = render(
       <MemoryRouter>
         <LandingPage
-          config={{ ...BASE, problem: PROBLEM, comparison: COMPARISON, workloads: WORKLOADS, metrics: METRICS }}
+          config={{
+            ...BASE,
+            problem: PROBLEM,
+            comparison: COMPARISON,
+            workloads: WORKLOADS,
+            features: FEATURES,
+            metrics: METRICS,
+          }}
         />
       </MemoryRouter>
     );
     getByText("Problem heading");
     getByText("Comparison heading");
     getByText("Workloads heading");
+    getByText("Features heading");
     getByText("Metrics heading");
     expect(container.querySelector("#compare")).not.toBeNull();
     expect(container.querySelector("#workloads")).not.toBeNull();