feat: redesigned landing page with 5 variants for A/B testing#118
Closed
feat: redesigned landing page with 5 variants for A/B testing#118
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
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 <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- 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 <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…t bottom Co-authored-by: Cursor <cursoragent@cursor.com>
…ap-align Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
…oning Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add scroll snap for variants C, D, E with fixed overlay container - Add service cards section with fal.ai, Codex, Cloudflare, OpenRouter - Update service cards: real logos, pricing, descriptions, no hover underlines - Add agent tabs to CliPromptAnimated (Claude, Codex, Amp) - Update example prompts to reference actual MPP services - Fix AgentTabs $ padding by using span instead of code element - Add header background fix for scroll snap variants - Move CoAuthoredBy to bottom center for variant B - Restructure variant B layout: title/subheading in left column - Add "View more" button to service cards section - Various spacing/sizing adjustments across all variants - Add theming support with light-dark() CSS functions Co-authored-by: Cursor <cursoragent@cursor.com>
- Add agent logos (Claude, Codex, Amp) to CliPromptAnimated component - Add agent logos to AgentTabsWrapped component for variant A - Fix indent issue in AgentTabsWrapped by using span instead of pre/code - Enable MPP logo in header by setting showLogo: true - Update vocs.config.ts to use SVG logos (mpp-logo.svg, mpp-logo-dark.svg) Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Update CLI prompts to use new MCP server examples (3 prompts) - Remove credentials from prompt URLs - Add agent logos to AgentTabsWrapped - Fix text alignment in AgentTabs (left-align) - Reduce MPP logo size by 30% - Use gray background (#f9fafb) for scroll snap variants C/D/E Co-authored-by: Cursor <cursoragent@cursor.com>
- Add variant F: single-column centered layout based on variant A - Create SimulatedPing component for simplified demo flow - Demo shows challenge → credential → success flow without wallet - Add AutoConnect component (simulated) to Cli.tsx - Remove passkey/wallet requirements for variant F demo Co-authored-by: Cursor <cursoragent@cursor.com>
- Restructure layout: title → demo → tabs → CTAs → services - Create SimulatedDemoF with compelling AI query example - Remove browser chrome from demo (cleaner look) - Add ServiceCardsCompact for minimal service logos - Remove Co-authored by section - All content fits within 100vh viewport Co-authored-by: Cursor <cursoragent@cursor.com>
…DemoF Co-authored-by: Cursor <cursoragent@cursor.com>
- Add DemoSimple component without account, tabs, or hints - Move balance/spent to title bar in simplified demo - Remove AutoConnect and Faucet steps from variant F - Add "Or start using it locally" label above agent tabs - Fix logo components to accept style prop for sizing - Fix AsciiLogo props type error Co-authored-by: Cursor <cursoragent@cursor.com>
- Change CLI window controls to grayscale - Change balance/spent values to black text - Add click-to-copy for entire prompt area - Hide URLs in prompt display (copies full command) - Add dividers around "or start using it locally" text - Update service chips with logos and names inline - Surface transaction hashes per API call in demo - Tighten spacing to fit content without scrolling Co-authored-by: Cursor <cursoragent@cursor.com>
…t bottom Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace all Tailwind dark: variants with Vocs CSS variables - Use light-dark() approach via Vocs semantic color tokens - Update LandingPage, Cli, AgentTabs, AsciiLogo, NotFoundPage components - Fix logo SVGs for proper light/dark mode switching - Add text-muted utility class for muted text color - Increase sidebar section spacing - Add elevated surface background to secondary buttons - Fix accent button text to always be white Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Replace 402 ASCII hover with dynamic network node/packet animation - Move unused landing page variants (A-E) to LandingPageVariants.tsx - Simplify LandingPage to variant F only, remove demo section and scroll snap - Add ElevenLabs to service logos, increase spacing - Mermaid diagrams: fix gradient line, arrow fill, spacing, animation timing - Fix inline code background for dark mode visibility - Sidebar: collapse sections by default, fix active state styling - TOC: translucent blue active state background - Spell out nav links (Documentation, Specifications) - Reposition Ask AI widget to right gutter - Disable FAQ in For agents sidebar - Remove service prices/URLs from for-humans agents page - For humans section added to sidebar above For agents Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # pnpm-lock.yaml
Co-authored-by: Cursor <cursoragent@cursor.com>
- Change accent color to orange (#F97316) across site - Update ASCII text shadow and TOC active state to orange - Callouts use accent orange for icon, title, border, and links - Add 8 more network nodes at MPP letter vertices - Service logos turn orange on hover with easing - Remove "Browse all services" callout from agents page - Update copy-paste prompt URLs to payments.tempo.xyz/llms.txt - Rename buttons: "Setup & use" / "Integrate now" - Fix specs fallback page link - Overview bullet list: em dashes to colons - Rename sidebar sections to match button labels - FAQ sidebar label: "Frequently asked" Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # pnpm-lock.yaml # src/components/LandingPage.tsx # src/pages.gen.ts # vocs.config.ts
Co-authored-by: Cursor <cursoragent@cursor.com>
- Add 5 hero variants (A-E) with left-side toggle, persisted via ?v= query param - Lockup SVGs from provided files with currentColor for theme reactivity - Fullscreen network background reuses AsciiLogo canvas rendering - Click background to spawn nodes, gradient overlays for clean content area - Tooltip animation: fade + slide transition - Fix pointer events passthrough for background clicks Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
- Change accent to monochrome black (#171717) for clean light/dark theming - Add HB Set font-face declarations, use as landing page font - Replace MPP logo with "Machine Payments Protocol" text in header via CSS - Slow ASCII shimmer: cycleDuration 600+1200ms (was 300+700ms) - Increase hero vertical padding (gap 2.5rem, padding 2rem) - Add "Co-designed by Tempo and Stripe" section with logos - "Works with powerful APIs" as inline text with horizontal rule borders - Prompt display: grid layout wraps prompt after command on new line - Regenerate lockfile for pnpm 10 Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Add stacked MACHINE / PAYMENTS PROTOCOL lockup SVG for mobile (md:hidden) while keeping wide single-line lockup for desktop (hidden md:block) - Responsive lockup width: min(648px, 88vw) — no fixed min-width - Mobile service logos: tap opens bottom-aligned card with prompt, copy button, and view all services link; tap outside to dismiss - Service logos wrap on mobile (3 + 2 layout via flex-wrap) - Desktop tooltips hidden on mobile (hidden md:flex), hover only on desktop - Fix mobile nav background: override Vocs vocs:max-md:bg-surface on :root so mobile header matches primary background - Brighter mobile service card with shadow and primary border - Left-aligned prompt text in mobile card - Nav dropdown hover uses heading color instead of accent - Variant toggle at very bottom (z-index 9999) with horizontal layout Co-authored-by: Cursor <cursoragent@cursor.com>
achalvs
force-pushed
the
achal/homepage
branch
from
f7e4f78 to
648ed0d
Compare
Amp-Thread-ID: https://ampcode.com/threads/T-019c67c8-cd45-71f6-961c-45770a0ace08 Co-authored-by: Amp <amp@ampcode.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019c67c8-cd45-71f6-961c-45770a0ace08 Co-authored-by: Amp <amp@ampcode.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Introduces a completely redesigned landing page with 5 variants (A through E) for A/B testing different layouts and user flows. Each variant showcases the Machine Payments Protocol with different emphasis on demos, prompts, and CTAs.
Variants
Changes
New Components
CliPromptAnimated- Typewriter-style animated prompts with agent tabs (Claude, Codex, Amp)AgentTabsWrapped- Agent command tabs with wrapped text displayServiceCards- Grid of MPP-enabled services (fal.ai, Codex, Cloudflare, OpenRouter)ScrollSnapContainer- Full-page scroll snap overlay for variants C/D/EUI Improvements
Prompts
How to Test
Add
?variant=Xto the URL to test each variant:/?variant=A- Service cards layout/?variant=B- Two-column layout/?variant=C- Scroll snap with AgentTabs first/?variant=D- Scroll snap with CLI demo first/?variant=E- Scroll snap with animated promptsTest Plan
Made with Cursor