feat: add create-and-pay demo (aka "quickstart demo") #7
Conversation
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
…sts with unique IDs
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
MantisClone
changed the title
MantisClone
changed the title
- Moved quickstart page under Welcome page in Use Cases tab - Removed standalone Quick Start tab - Changed quickstart.mdx mode from 'custom' to 'frame' to match Welcome page - Keeps sidebar title as "Quick Start"
Comprehensive styling improvements to achieve visual parity with Welcome page: STRUCTURE & LAYOUT: - Added page wrapper with 2rem top padding, 1400px max-width, centered - Added H1 title and description intro section with proper styling - Added descriptive section headers "Try It Yourself" and "How Request Network Compares" - Reorganized content hierarchy for better information flow TYPOGRAPHY UPDATES: - H1: 2.5rem font size with text-zinc-950 dark:text-white classes - H2: Changed from 2rem to 1.75rem for consistency with Welcome page - Paragraphs: Upgraded from 1rem to 1.125rem with lineHeight 1.75 - Replaced inline color: var(--text-primary) with theme-aware className GREEN-TINTED BACKGROUNDS: - Created new DemoContainer component with gradient backgrounds - Light mode: rgba(1,176,137,0.02) → rgba(1,176,137,0.04) gradient - Dark mode: rgba(1,176,137,0.06) → rgba(1,176,137,0.10) gradient - Added subtle green borders matching the Request Network brand - Updated RequestLifecycleDemo main area from flat gray to softer gradient SPACING STANDARDIZATION: - Demo sections use marginBottom: 4rem (was mt-12 Tailwind class) - Final card section uses marginBottom: 3rem - Headers use marginTop: 3rem, marginBottom: 2rem consistently - Converted all Tailwind spacing to inline styles for uniformity THEME COMPATIBILITY: - All components tested for light and dark mode support - Green tints optimized per theme for proper contrast - Text colors use semantic variables and theme-aware classes Files changed: - quickstart.mdx: Complete page restructure and styling - snippets/demo-container.jsx: New wrapper component for green backgrounds - snippets/request-lifecycle-demo.jsx: Updated main demo area background
Critical fixes for light/dark mode contrast and green theming: DARK MODE BACKGROUND FIXES: - DemoContainer: Changed from light rgba to proper dark green (#001912 → #00251a) - Main demo area: Dark green gradient (#002419 → #003326) instead of gray - Increased border opacity for better definition in dark mode STEPPER VISIBILITY FIX: - Fixed white-on-white text in light mode (was invisible) - Active steps now use explicit #01B089 background with white text - Applied inline styles to override Tailwind primary color issues - Progress lines also use #01B089 for consistency GREEN-TINTED BACKGROUNDS: - Main demo area: rgba(1,176,137,0.04) → rgba(1,176,137,0.08) gradient in light - DemoContainer: Increased light mode opacity for better visibility - All borders use green tint instead of gray These changes ensure: ✓ Stepper numbers are always visible in both themes ✓ Dark mode shows proper dark green, not light/weird color ✓ All backgrounds use green shades matching brand aesthetic ✓ Proper contrast ratios for accessibility
…accordion DEDUPLICATION: - Removed centered header from RequestLifecycleDemo (duplicated page's left-justified "Try It Yourself") - Removed centered header from PaymentProcessorQA (duplicated page's "How Request Network Compares") - Eliminated redundant background container from PaymentProcessorQA - Page-level headers now serve as the single source for section titles ACCORDION GREEN THEME: - Accordion items: Green gradient backgrounds (rgba 0.02-0.06 light, #002419-#003326 dark) - Active accordion: Stronger green tint when expanded - Hover state: Green border on hover instead of primary color - Example boxes: Green gradients instead of gray (rgba 0.05-0.08) - All borders: Green-tinted instead of neutral gray VISUAL CONSISTENCY: - Accordion backgrounds now match the DemoContainer and main demo area - Dark mode uses same dark green palette (#002419-#003326) throughout - Light mode uses consistent green tints with rgba(1,176,137,...) - All interactive elements use green theme consistently The entire QuickStart page now has unified green theming with no duplicate headers.
Refined copy to be more direct and outcome-focused while maintaining technical documentation tone (not marketing). Changes prioritize clarity and actionable information for developers. PAGE STRUCTURE: - H1: "How Request IDs Work" (clearer than redundant "Quick Start") - Intro: Explains the what/why upfront with concrete benefit (eliminates manual matching) SECTION HEADERS (more specific, less generic): - "Interactive Demo" (was "Try It Yourself") - "Comparison with Traditional Processors" (was "How Request Network Compares") - "Explore Use Cases" (was "What's Next?") - "Start Building" (was "Ready to Build?") SECTION DESCRIPTIONS (more direct): - Removed filler phrases like "Experience the concept" and "Now that you understand" - Lead with what the section delivers, not setup/context - Example: "Create a request, get a unique ID, and see how..." vs previous wordier version CARD COPY IMPROVEMENTS: Invoicing: - Before: "Create professional invoices with payment terms, line items..." - After: "Turn invoices into trackable on-chain requests with automatic..." - Focus: Outcome (trackable) vs features (payment terms, line items) Payouts: - Before: "...with one click and automatic tracking" - After: "...in a single transaction with automatic tracking" - Focus: Technical accuracy (single transaction) vs marketing (one click) API Setup Cards: - Added specific actions: "Set up authentication and create your first request" - Added portal capabilities: "Manage API keys, view requests, and configure webhooks" - Previous versions were too vague TONE MAINTAINED: ✓ Technical and accurate ✓ Developer-focused ✓ No marketing fluff or hype ✓ Direct and informative
…payments
TECHNICAL CORRECTION:
Request IDs identify requests (like invoices), not individual payments.
Multiple payments can be made against a single request. Payments reference
the Request ID to indicate which request they're fulfilling.
CHANGES:
1. Page description:
- Before: "every payment a unique ID"
- After: "Request IDs link payments to business context"
2. Main intro paragraph:
- Before: "Every payment gets a unique Request ID..."
- After: "Every request gets a unique Request ID... Payments are then
tied to this Request ID..."
3. Demo section description:
- Before: "see how the payment is automatically tracked"
- After: "see how payments are automatically tracked against that request"
4. Callout box in demo:
- Before: "Every Request Network payment gets a unique ID..."
- After: "Every Request Network request gets a unique ID... Payments
reference this Request ID..."
ACCURACY MAINTAINED:
✓ Request ID = unique identifier for a request (1:1)
✓ Payments → Request ID (many:1 possible)
✓ Request ID links request to business context
✓ Payments reference Request ID for reconciliation
Changed from generic "Interactive Demo" to more descriptive "Create and Pay a Request Demo" to clearly communicate what the demo shows.
Deleted "The Power of Request IDs" and "The Bottom Line" callout boxes. RATIONALE: Both boxes were redundant marketing artifacts that didn't fit technical docs: 1. "The Power of Request IDs" box: - Repeated content already in page intro - Positioned after demo when concept should already be clear - Added no new information 2. "The Bottom Line" box: - Redundant summary after detailed accordion already explained everything - Felt like sales pitch rather than documentation - Broke natural flow before use cases section IMPROVEMENTS: ✓ Cleaner, more scannable page structure ✓ No visual inconsistency with emoji lightbulbs ✓ Tighter, more focused content ✓ Natural doc flow: intro → demo → comparison → next steps ✓ Let the content and structure do the teaching, not visual gimmicks The page intro and comparison accordion already provide all necessary context and value proposition. No need for redundant callouts.
…iptions, tighten card copy, remove emoji from accordion, unify container padding
- Add Payment Detection as first use case in navigation (aligns with marketing's 6 use cases) - Rename "Quick Start" to "Interactive Demo" for accurate expectations - Create new payment-detection.mdx with detection mechanics, webhooks, and standalone scenarios - Update Welcome page cards to reflect new Interactive Demo naming - Keep all existing demo and comparison content intact
- Rename quickstart.mdx to create-and-pay.mdx for clearer URL - Update title to "Create and Pay Demo" for maximum precision - Update sidebar title to "Create & Pay" for brevity - Update docs.json navigation reference - Update Welcome page card title and link
- Change title from "Create and Pay Demo" to "Payment Processing Demo" - Better aligns with page H1 "Payment Processing with Request Network" - More accurately reflects full scope: demo + processor comparison - Shorter sidebar title: "Demo" - Update Welcome page card title
- Rename create-and-pay.mdx to payment-processing-demo.mdx - Update docs.json navigation reference - Update Welcome page card link to /payment-processing-demo - URL now matches page title and content scope
- Move payment-processing-demo.mdx to use-cases/ folder - Update docs.json navigation path - Update Welcome page card link - URL now: /use-cases/payment-processing-demo
- Change sidebarTitle from "Demo" to "Payment Demo" - Provides clearer context in navigation - Specific enough while remaining concise
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
No description provided.