feat: add landing page demo #6

MantisClone · 2025-10-13T00:55:38Z

No description provided.

Adds interactive demo showing Request Network vs traditional payments, includes comparison table and sticky dialogs that account for Mintlify nav (135px offset).

coderabbitai · 2025-10-13T00:55:46Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch landing-page-demo

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

…ed UX - Add auto-simulation of first 3 payments with 1.5s delays - Generate realistic 64-char Request IDs and proper Ethereum addresses/tx hashes - Add Request ID visibility in middle column on right side (consistent positioning) - Add TX icon to both left and right payment cards - Add tooltips for all truncated fields (addresses, tx hashes, Request IDs) - Add informative tooltips to reconciliation badges explaining the difference - Match wallet addresses between left (from) and right (customer) for consistency - Fix column widths to prevent layout shifts based on content length - Improve tooltip styling with gray background for better light mode visibility - Ensure collision detection and dialog trigger correctly after 2nd matching payment

- Hide Request ID on mobile/tablet to prevent collisions and improve readability - Change TX ID alignment from right to left for consistency with label - Use flexible column widths (flex-1) instead of fixed percentages - Add responsive gap sizing (gap-1 on mobile, gap-2 on tablet, gap-4 on desktop) - TX ID remains visible on all screen sizes when payment is received - Request ID visible only on desktop (md breakpoint and above)

…llision timing - Disable all buttons (Simulate Payment, Create Request, Clear) during auto-play to prevent race conditions - Ensure collision always happens on 3rd payment during initial demo sequence - Increase collision dialog delay from 600ms to 1.5s for better user experience - Add isAutoPlaying state to track auto-simulation phase

- Implement auto-scroll to top when creating requests or simulating payments - Hide scrollbars in all browsers (Chrome, Safari, Brave, Firefox, IE/Edge) - Use custom .no-scrollbar class for reliable cross-browser compatibility - Scroll triggers via useEffect with counter-based state for reliability - Instant scroll ensures users always see newly created/paid items

- Add ExternalLinkIcon to hidden TX ID placeholder - Update label from "Tx" to "Tx ID" to match visible state - Add flex layout to placeholder to match visible TX ID link - Ensures Request ID column stays perfectly aligned when payment occurs

…collisions - Updated both 'Identify Every Payment' and 'Payment Collision' dialogs to match the polished styling of advantage/tradeoff boxes from comparison table - Changed dialog structure to use semantic HTML (<h3>/<h4> headings instead of <p> with inline bold) - Added hover effects (hover:shadow-lg, hover:scale-[1.02]) to dialog boxes for visual consistency - Improved spacing with p-4 md:p-6 padding and proper title/body separation (mb-2) - Updated icon sizes to h-5 w-5 md:h-6 md:w-6 and text sizing to text-xs md:text-sm (body) and text-sm md:text-base (titles) - Centered dialog titles while keeping box content left-aligned - Added getLeftSideMatchCount() helper function to identify potential payment collisions - Display '⚠️ X matches' warning badges on left-side payments when 2+ payments have same amount and currency - Warning badges help users visually identify potential reconciliation problems before they occur - Reduced transition duration from 500ms to 200ms for snappier UI feedback

- Add bridge sentence to intro: "See how unique Request IDs prevent payment collisions" - Add transition heading between demo and comparison table - Improves visual cohesiveness and narrative flow per evaluation feedback

- Changed headings from CSS variables to Tailwind classes (text-zinc-950 dark:text-white) - Updated strong tags in description to also use Tailwind color classes - Ensures proper contrast in both light mode (dark text) and dark mode (white text) - Theme changed to 'aspen' for better frame mode rendering - Moved landing page from Welcome tab to Use Cases tab under "🚀 Get Started"

…cing - Moved component titles external to welcome.mdx as left-aligned h2 headings - Removed internal centered titles from IntegratedDemo and ComparisonTable components - Added "Identify Every Payment" h2 heading before demo component - Improved heading spacing: marginTop 3rem, marginBottom 2rem (matches standard docs) - Increased content spacing: demo and table sections now use 4rem bottom margin - Removed "Popular" accordion section for cleaner page structure - Standardized h2 font size to 1.75rem across all headings - Components now function as pure display widgets without embedded titles

- Add React state to detect light/dark theme dynamically - Replace Tailwind text-* classes with inline style objects - Implement theme-specific colors (darker for light, brighter for dark) - Fix orange text visibility in both modes - Request Network row now uses green text in both themes - Resolves Mintlify CSS override issues with text color classes

- Deleted root index.mdx file - Preview URL will now load use-cases/welcome.mdx by default - Eliminates duplicate landing page content

Welcome page improvements: - Restructured intro: shortened main tagline, moved detailed explanation under "Identify Every Payment" - Updated comparison section: better title "Blockchain Payment Detection Comparison" with contextual subtext - Removed redundant "Get Started" intro text Demo visual refinements: - Applied dark green theme to dialogs for consistency - Balanced column prominence (reduced red, enhanced green)

- Moved "Alternative Trade-offs" (red) to left side - Moved "Request Network Advantage" (green) to right side - Now matches demo columns: problems left, solution right

Copilot

Pull Request Overview

This PR adds an interactive landing page demo to showcase Request Network's payment reconciliation capabilities. The demo compares traditional blockchain payments with Request Network's approach, highlighting the automatic payment identification that prevents reconciliation issues.

Key changes:

New interactive demo component showing payment collisions vs. unique Request IDs
Comparison table contrasting different payment detection methods
Restructured navigation to feature the demo as the entry point

Reviewed Changes

Copilot reviewed 5 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
use-cases/welcome.mdx	New landing page featuring interactive demo and comparison table
snippets/integrated-demo.jsx	Interactive payment reconciliation demo with collision detection
snippets/comparison-table.jsx	Comparison table component evaluating payment detection approaches
index.mdx	Removed old welcome page content
docs.json	Updated theme and navigation structure to prioritize new landing page

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-23T23:05:28Z

snippets/integrated-demo.jsx

+  const rightCardRef = useRef(null);
+  const leftCardRef = useRef(null);
+  const leftScrollRef = useRef(null);
+  const rightScrollRef = useRef(null);
+  const demoContainerRef = useRef(null);


Missing React import for useRef hook. Add import React, { useRef, useState, useEffect } from 'react'; or ensure React is imported at the top of the file.

Copilot · 2025-10-23T23:05:28Z

snippets/integrated-demo.jsx

+    const randomAddress = `0x${Math.random().toString(16).substr(2, 40)}`;
+    const txHash = `0x${Math.random().toString(16).substr(2, 16)}`;


The substr() method is deprecated. Replace with substring() or slice(). For example: Math.random().toString(16).substring(2, 42) for the address and Math.random().toString(16).substring(2, 18) for the txHash.

Suggested change

const randomAddress = `0x${Math.random().toString(16).substr(2, 40)}`;

const txHash = `0x${Math.random().toString(16).substr(2, 16)}`;

const randomAddress = `0x${Math.random().toString(16).substring(2, 42)}`;

const txHash = `0x${Math.random().toString(16).substring(2, 18)}`;

Copilot · 2025-10-23T23:05:28Z

snippets/integrated-demo.jsx

+      for (let i = 0; i < 3; i++) {
+        const timestamp = new Date(Date.now() + i); // Slight offset for unique timestamps
+        // Generate a realistic Request ID (64 character hex string like the example)
+        const id = Array.from({length: 64}, () => Math.floor(Math.random() * 16).toString(16)).join('');


This random hex string generation pattern is duplicated in multiple places (lines 339, 360, 413, 506, 513). Consider extracting it into a helper function like generateHexString(length) to improve maintainability and reduce duplication.

Copilot · 2025-10-23T23:05:29Z

snippets/integrated-demo.jsx

+
+  // Tooltip component
+  const Tooltip = ({ children, content }) => {
+    const [show, setShow] = React.useState(false);


Using React.useState() without importing React. Either add import React from 'react'; at the top of the file or change to destructured useState import.

… payments - Fixed handleSimulatePayment to generate proper 40-char wallet addresses (instead of short truncated values) - Fixed handleSimulatePayment to generate proper 64-char transaction hashes (instead of short truncated values) - Now matches the generation logic used in simulatePaymentForRequest for initial payments - Tooltips now show complete addresses and hashes for all payments, not just the first 3

feat: add interactive payment matching demo to landing page

6337d7c

Adds interactive demo showing Request Network vs traditional payments, includes comparison table and sticky dialogs that account for Mintlify nav (135px offset).

MantisClone changed the base branch from main to webhooks October 13, 2025 00:55

mintlify bot deployed to staging October 13, 2025 00:56 View deployment

fix: landing page demo

2c38ce6

mintlify bot deployed to staging October 14, 2025 19:48 View deployment

feat: tweak landing page demo

300dba4

mintlify bot deployed to staging October 14, 2025 20:07 View deployment

fix: more tweaks

484e63f

mintlify bot deployed to staging October 14, 2025 20:27 View deployment

fix: landing page demo

8932cad

mintlify bot deployed to staging October 14, 2025 21:44 View deployment

fix: update user experience labels in comparison table

147f2b8

mintlify bot deployed to staging October 14, 2025 22:07 View deployment

feat: add implementation difficulty icons and colors to comparison table

9d6f725

mintlify bot deployed to staging October 15, 2025 10:37 View deployment

MantisClone added 4 commits October 22, 2025 03:54

mintlify bot deployed to staging October 22, 2025 09:10 View deployment

mintlify bot deployed to staging October 22, 2025 09:16 View deployment

MantisClone added 2 commits October 22, 2025 21:07

Add narrative bridges to landing page demo

ea4b921

- Add bridge sentence to intro: "See how unique Request IDs prevent payment collisions" - Add transition heading between demo and comparison table - Improves visual cohesiveness and narrative flow per evaluation feedback

mintlify bot deployed to staging October 23, 2025 18:39 View deployment

mintlify bot deployed to staging October 23, 2025 19:38 View deployment

mintlify bot deployed to staging October 23, 2025 19:59 View deployment

mintlify bot deployed to staging October 23, 2025 20:57 View deployment

Remove index.mdx to use use-cases/welcome.mdx as home page

6806e8a

- Deleted root index.mdx file - Preview URL will now load use-cases/welcome.mdx by default - Eliminates duplicate landing page content

mintlify bot deployed to staging October 23, 2025 21:02 View deployment

mintlify bot deployed to staging October 23, 2025 23:00 View deployment

MantisClone linked an issue Oct 23, 2025 that may be closed by this pull request

Docs - Landing Page Demo #4

Open

Swap summary boxes for consistent left-right visual pattern

18df715

- Moved "Alternative Trade-offs" (red) to left side - Moved "Request Network Advantage" (green) to right side - Now matches demo columns: problems left, solution right

mintlify bot deployed to staging October 23, 2025 23:03 View deployment

MantisClone marked this pull request as ready for review October 23, 2025 23:04

Copilot AI review requested due to automatic review settings October 23, 2025 23:04

Copilot AI reviewed Oct 23, 2025

View reviewed changes

mintlify bot deployed to staging October 26, 2025 02:42 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: add landing page demo #6

feat: add landing page demo #6

Uh oh!

MantisClone commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025 •

edited

Loading

Review skipped

Other AI code review bot(s) detected

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 23, 2025

Uh oh!

Copilot AI Oct 23, 2025

Uh oh!

Copilot AI Oct 23, 2025

Uh oh!

Copilot AI Oct 23, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		const randomAddress = `0x${Math.random().toString(16).substr(2, 40)}`;
		const txHash = `0x${Math.random().toString(16).substr(2, 16)}`;

Uh oh!

feat: add landing page demo #6

Are you sure you want to change the base?

feat: add landing page demo #6

Uh oh!

Conversation

MantisClone commented Oct 13, 2025

Uh oh!

coderabbitai bot commented Oct 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 23, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coderabbitai bot commented Oct 13, 2025 •

edited

Loading