From 5c36312b204fdbcba0ca7413c87c27e33619940c Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 06:59:23 -0800 Subject: [PATCH 01/95] feat: add A/B/C variant toggle for homepage testing Co-authored-by: Cursor --- src/components/LandingPage.tsx | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index d7911cb1..09af0a78 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -10,7 +10,16 @@ import { AgentTabs } from "./AgentTabs"; import { AsciiLogo } from "./AsciiLogo"; import * as Cli from "./Cli"; +// Variant titles for A/B/C testing +const VARIANT_TITLES: Record<"A" | "B" | "C", string> = { + A: "The Machine Payments Protocol", + B: "Internet-Native Payments Protocol", + C: "HTTP 402: Payments for the Internet", +}; + export function LandingPage() { + const [variant, setVariant] = useState<"A" | "B" | "C">("A"); + return (
+ {/* Variant Toggle */} +
+ {(["A", "B", "C"] as const).map((v) => ( + + ))} +
+ {/* Hero */}
@@ -30,7 +60,7 @@ export function LandingPage() {
{/* Title */}

- The Machine Payments Protocol + {VARIANT_TITLES[variant]}

{/* Description */} From 14ae6ca8cdce8a26fbc1d7a27090c7305a4982e4 Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:09:44 -0800 Subject: [PATCH 02/95] feat: add 4 homepage variants (A/B/C/D) for team review A: Wrapped prompt text (full prompt visible, no truncation) B: Multiple prompts with numbers and bash comments C: Split sections with scroll snap, CLI in separate 100vh section D: Google search-style input with typing animation, minimal design Co-authored-by: Cursor --- src/components/LandingPage.tsx | 640 +++++++++++++++++++++++++++------ 1 file changed, 537 insertions(+), 103 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 09af0a78..d89c0fca 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -1,7 +1,7 @@ "use client"; import { useMutation } from "@tanstack/react-query"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Link } from "vocs"; import { useConnectorClient } from "wagmi"; import { fetch } from "../mpay.client"; @@ -10,15 +10,10 @@ import { AgentTabs } from "./AgentTabs"; import { AsciiLogo } from "./AsciiLogo"; import * as Cli from "./Cli"; -// Variant titles for A/B/C testing -const VARIANT_TITLES: Record<"A" | "B" | "C", string> = { - A: "The Machine Payments Protocol", - B: "Internet-Native Payments Protocol", - C: "HTTP 402: Payments for the Internet", -}; +type Variant = "A" | "B" | "C" | "D"; export function LandingPage() { - const [variant, setVariant] = useState<"A" | "B" | "C">("A"); + const [variant, setVariant] = useState("A"); return (
- {(["A", "B", "C"] as const).map((v) => ( + {(["A", "B", "C", "D"] as const).map((v) => ( + ))} +
+ {/* Wrapped text instead of truncated */} +
+ 
+					
+						$ 
+						{cmd.bin}
+						{cmd.args &&  {cmd.args}}
+						 {cmd.str}
+					
+
+
+
+ ); +} + +// Variant B: Multiple prompts with numbers and comments +const MULTI_PROMPTS = [ + { + comment: "Monetize your API instantly", + prompt: "charge $0.01 per api call with MPP", + }, + { + comment: "Let agents pay for premium features", + prompt: "add MPP payments to my /premium endpoint", + }, + { + comment: "Metered usage billing", + prompt: "charge $0.001 per token for my LLM proxy", + }, + { + comment: "Subscription-style access", + prompt: "require $5/month payment for /pro routes", + }, + { + comment: "Pay-per-result pricing", + prompt: "charge $0.10 per successful search result", + }, +]; + +function MultiPromptBox() { + return ( +
+
+ + Example prompts for your AI agent + +
+
+ {MULTI_PROMPTS.map((item, i) => ( +
+
+ # {item.comment} +
+
+ ({i + 1}) + claude -p + "{item.prompt}" +
+
+ ))} +
+
+ ); +} + +// Variant D: Google search-style input with typing animation +const SEARCH_PROMPTS = [ + "charge $0.01 per api call with MPP", + "add payments to my REST API", + "monetize my AI agent's tools", + "require payment for /premium routes", + "let machines pay for my service", +]; + +function SearchInputAnimated() { + const [displayText, setDisplayText] = useState(""); + const [promptIndex, setPromptIndex] = useState(0); + const [phase, setPhase] = useState<"typing" | "pausing" | "deleting">( + "typing", + ); + + useEffect(() => { + const currentPrompt = SEARCH_PROMPTS[promptIndex]; + let timeout: ReturnType; + + if (phase === "typing") { + if (displayText.length < currentPrompt.length) { + timeout = setTimeout(() => { + setDisplayText(currentPrompt.slice(0, displayText.length + 1)); + }, 50 + Math.random() * 30); + } else { + setPhase("pausing"); + } + } else if (phase === "pausing") { + timeout = setTimeout(() => setPhase("deleting"), 2000); + } else if (phase === "deleting") { + if (displayText.length > 0) { + timeout = setTimeout(() => { + setDisplayText(displayText.slice(0, -1)); + }, 30); + } else { + setPromptIndex((i) => (i + 1) % SEARCH_PROMPTS.length); + setPhase("typing"); + } + } + + return () => clearTimeout(timeout); + }, [displayText, phase, promptIndex]); + + return ( +
+
+ +
+ {displayText} + +
+
); } From a8073ea88ec8db7b70b04beb8de975042ec068dc Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:11:13 -0800 Subject: [PATCH 03/95] fix(variant-b): remove numbers, add dividers and copy buttons Co-authored-by: Cursor --- src/components/LandingPage.tsx | 97 ++++++++++++++++++++++++++-------- 1 file changed, 76 insertions(+), 21 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index d89c0fca..59f8e44b 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -94,8 +94,8 @@ function HeroVariantA() {

- Accept payments from humans, software, or AI agents using - standard HTTP. No billing accounts or manual signup required. + Accept payments from humans, software, or AI agents using standard + HTTP. No billing accounts or manual signup required.

@@ -138,8 +138,8 @@ function HeroVariantB() {

- Accept payments from humans, software, or AI agents using - standard HTTP. No billing accounts or manual signup required. + Accept payments from humans, software, or AI agents using standard + HTTP. No billing accounts or manual signup required.

@@ -184,8 +184,8 @@ function HeroVariantC() { The Machine Payments Protocol

- Accept payments from humans, software, or AI agents using - standard HTTP. No billing accounts or manual signup required. + Accept payments from humans, software, or AI agents using standard + HTTP. No billing accounts or manual signup required.

@@ -503,6 +503,14 @@ const MULTI_PROMPTS = [ ]; function MultiPromptBox() { + const [copiedIndex, setCopiedIndex] = useState(null); + + const handleCopy = (text: string, index: number) => { + navigator.clipboard.writeText(text); + setCopiedIndex(index); + setTimeout(() => setCopiedIndex(null), 2000); + }; + return (
@@ -510,19 +518,63 @@ function MultiPromptBox() { Example prompts for your AI agent
-
- {MULTI_PROMPTS.map((item, i) => ( -
-
- # {item.comment} -
-
- ({i + 1}) - claude -p - "{item.prompt}" +
+ {MULTI_PROMPTS.map((item, i) => { + const fullCommand = `claude -p "${item.prompt}"`; + return ( +
+
+
+ # {item.comment} +
+
+ claude -p + "{item.prompt}" +
+
+
-
- ))} + ); + })}
); @@ -550,9 +602,12 @@ function SearchInputAnimated() { if (phase === "typing") { if (displayText.length < currentPrompt.length) { - timeout = setTimeout(() => { - setDisplayText(currentPrompt.slice(0, displayText.length + 1)); - }, 50 + Math.random() * 30); + timeout = setTimeout( + () => { + setDisplayText(currentPrompt.slice(0, displayText.length + 1)); + }, + 50 + Math.random() * 30, + ); } else { setPhase("pausing"); } From becac14dd37688daac089c4b49d51b0f07620994 Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:12:16 -0800 Subject: [PATCH 04/95] fix(variant-b): move co-authored-by to top left Co-authored-by: Cursor --- src/components/LandingPage.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 59f8e44b..56e7db55 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -126,10 +126,15 @@ function HeroVariantA() { // ============================================================ function HeroVariantB() { return ( -
+
+ {/* Co-authored by - top left */} +
+ +
+
{/* Right pane */} -
+
@@ -142,7 +147,6 @@ function HeroVariantB() { HTTP. No billing accounts or manual signup required.

-
From 15298b890564f513cfa3de8ea15ac115e5d1c883 Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:13:49 -0800 Subject: [PATCH 05/95] fix(variant-c,d): fix layout issues - C: larger title, left-aligned content, proper 100vh, remove arrow - C: CLI demo back to original size (337px) - D: CLI demo back to original size (337px, 574px width) Co-authored-by: Cursor --- src/components/LandingPage.tsx | 103 +++++---------------------------- 1 file changed, 16 insertions(+), 87 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 56e7db55..578b6fe6 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -174,104 +174,33 @@ function HeroVariantB() { // ============================================================ function HeroVariantC() { return ( -
- {/* Section 1: Centered hero content */} + <> + {/* Section 1: Hero content - full viewport height */}
-
-

+
+

The Machine Payments Protocol

-

+

Accept payments from humans, software, or AI agents using standard HTTP. No billing accounts or manual signup required.

-
- - Co-authored by - - -
+ -
- - Get started - - - - Read the specs - -
-
- {/* Bouncing scroll indicator */} -
- +

{/* Section 2: CLI Demo */} -
-
+
+
@@ -281,7 +210,7 @@ function HeroVariantC() {
-
+ ); } @@ -342,12 +271,12 @@ function HeroVariantD() {
- {/* CLI Demo below - more compact */} -
+ {/* CLI Demo below */} +
From d36b02df3efd73bde1faba0f5426e118130e247c Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:14:33 -0800 Subject: [PATCH 06/95] fix(variant-d): proper 100vh and vertical spacing Co-authored-by: Cursor --- src/components/LandingPage.tsx | 136 ++++++++++++++++++--------------- 1 file changed, 73 insertions(+), 63 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 578b6fe6..306f0ba9 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -219,73 +219,83 @@ function HeroVariantC() { // ============================================================ function HeroVariantD() { return ( -
-
-

- The Machine Payments Protocol -

-

- HTTP 402 payments for humans, software, and AI agents. -

- - {/* Google-style search input with typing animation */} - - - {/* Minimal CTA */} -
- - Get started - - - Read specs - + <> + {/* Hero section - full viewport height */} +
+
+

+ The Machine Payments Protocol +

+

+ HTTP 402 payments for humans, software, and AI agents. +

+ + {/* Google-style search input with typing animation */} +
+ +
+ + {/* Minimal CTA */} +
+ + Get started + + + Read specs + +
+ + {/* Co-authored by - subtle */} +
+ + Co-authored by + + + + + + + +
+
- {/* Co-authored by - subtle */} -
- - Co-authored by - - - - - +
+ - - + + + + +
-
- - {/* CLI Demo below */} -
- - - - - - -
-
+
+ ); } From 3d6dd7b1c21dc7f350f2588b5911c99422ee0d7c Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:15:23 -0800 Subject: [PATCH 07/95] fix: remove 'The' from title, add copy button to variant A Co-authored-by: Cursor --- src/components/LandingPage.tsx | 59 ++++++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 7 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 306f0ba9..7270f1b6 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -90,7 +90,7 @@ function HeroVariantA() {

- The Machine Payments Protocol + Machine Payments Protocol

@@ -139,7 +139,7 @@ function HeroVariantB() {

- The Machine Payments Protocol + Machine Payments Protocol

@@ -182,7 +182,7 @@ function HeroVariantC() { >

- The Machine Payments Protocol + Machine Payments Protocol

Accept payments from humans, software, or AI agents using standard @@ -227,7 +227,7 @@ function HeroVariantD() { >

- The Machine Payments Protocol + Machine Payments Protocol

HTTP 402 payments for humans, software, and AI agents. @@ -366,6 +366,7 @@ function CTAButtons() { // Variant A: AgentTabs but with wrapped text function AgentTabsWrapped() { const [active, setActive] = useState(0); + const [copied, setCopied] = useState(false); const commands = [ { label: "Claude", @@ -387,6 +388,13 @@ function AgentTabsWrapped() { }, ]; const cmd = commands[active]; + const fullCommand = [cmd.bin, cmd.args, cmd.str].filter(Boolean).join(" "); + + const handleCopy = () => { + navigator.clipboard.writeText(fullCommand); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; return (

@@ -406,9 +414,9 @@ function AgentTabsWrapped() { ))}
- {/* Wrapped text instead of truncated */} -
- 
+			{/* Wrapped text with copy button */}
+			

+				
 					
 						$ 
 						{cmd.bin}
@@ -416,6 +424,43 @@ function AgentTabsWrapped() {
 						 {cmd.str}
 					
 				

+
); From e2503c51482a6b863611b71078d5890122075364 Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:16:08 -0800 Subject: [PATCH 08/95] fix: remove footer, add X link to top nav Co-authored-by: Cursor --- src/components/LandingPage.tsx | 25 +------------------------ vocs.config.ts | 1 + 2 files changed, 2 insertions(+), 24 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index 7270f1b6..9b3f6344 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -50,29 +50,6 @@ export function LandingPage() { {variant === "B" && } {variant === "C" && } {variant === "D" && } - - {/* Footer - only shown for non-C variants (C has its own footer in each section) */} - {variant !== "C" && ( - <> -
- - - )}
); } @@ -226,7 +203,7 @@ function HeroVariantD() { style={{ minHeight: "calc(100vh - 64px)" }} >
-

+

Machine Payments Protocol

diff --git a/vocs.config.ts b/vocs.config.ts index 6366da1e..bbe8c861 100644 --- a/vocs.config.ts +++ b/vocs.config.ts @@ -443,5 +443,6 @@ export default defineConfig({ }, ], }, + { text: "X", link: "https://x.com/mpp" }, ], }); From c7ee8c017864fad25c4ee8a32f9ec086da357c1a Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:17:15 -0800 Subject: [PATCH 09/95] fix: remove $ indentation, fix variant C layout with scroll snap Co-authored-by: Cursor --- src/components/AgentTabs.tsx | 7 +---- src/components/LandingPage.tsx | 57 ++++++++++++++++++++++++---------- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/src/components/AgentTabs.tsx b/src/components/AgentTabs.tsx index 1ba67832..2af4dfdc 100644 --- a/src/components/AgentTabs.tsx +++ b/src/components/AgentTabs.tsx @@ -148,12 +148,7 @@ export function AgentTabs() { 

-					
-						$ 
-						{cmd.bin}
-						{cmd.args &&  {cmd.args}}
-						 {cmd.str}
-					
+					$ {cmd.bin}{cmd.args &&  {cmd.args}} {cmd.str}
+
{/* Section 1: Hero content - full viewport height */}
-
-

+
+

Machine Payments Protocol

-

+

Accept payments from humans, software, or AI agents using standard HTTP. No billing accounts or manual signup required.

- +
+ +
- +
+ +
+
+ {/* Bouncing scroll indicator */} +
+ Scroll to try demo +

{/* Section 2: CLI Demo */} -
-
+
+
- +
); } @@ -394,12 +422,7 @@ function AgentTabsWrapped() { {/* Wrapped text with copy button */} 
-					
-						$ 
-						{cmd.bin}
-						{cmd.args &&  {cmd.args}}
-						 {cmd.str}
-					
+					$ {cmd.bin}{cmd.args &&  {cmd.args}} {cmd.str}
{/* CLI Demo section */} -
-
+
+
- +
); } From 06536bd2a4329604da1391872a4a3ae8e89afa4c Mon Sep 17 00:00:00 2001 From: achalvs Date: Thu, 12 Feb 2026 07:19:54 -0800 Subject: [PATCH 13/95] fix(variant-c): center AgentTabs and CLI demo Co-authored-by: Cursor --- src/components/LandingPage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/LandingPage.tsx b/src/components/LandingPage.tsx index f51bed67..1b166f1a 100644 --- a/src/components/LandingPage.tsx +++ b/src/components/LandingPage.tsx @@ -177,7 +177,9 @@ function HeroVariantC() {
- +
+ +
@@ -210,7 +212,7 @@ function HeroVariantC() { scrollSnapAlign: "start", }} > -
+
Date: Thu, 12 Feb 2026 07:21:34 -0800 Subject: [PATCH 14/95] fix: larger Sign Up/Sign In buttons, bottom-aligned in CLI Co-authored-by: Cursor --- src/components/Cli.tsx | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/components/Cli.tsx b/src/components/Cli.tsx index 3a1475bd..dd18ddd1 100644 --- a/src/components/Cli.tsx +++ b/src/components/Cli.tsx @@ -685,10 +685,11 @@ export namespace Toggle { // biome-ignore lint/a11y/noLabelWithoutControl: Radio.Root renders an input