Skip to content

Commit 9ba3f4f

Browse files
MantisCloneCopilot
MantisClone
and
Copilot
authored
feat: add create-and-pay demo (aka "quickstart demo") (#7)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent bcda71d commit 9ba3f4f

9 files changed

Lines changed: 1357 additions & 13 deletions

‎docs.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,14 @@
4242
{
4343
"group": "🚀 Get Started",
4444
"pages": [
45-
"use-cases/welcome"
45+
"use-cases/welcome",
46+
"use-cases/payment-processing-demo"
4647
]
4748
},
4849
{
4950
"group": "🎯 Use Cases",
5051
"pages": [
52+
"use-cases/payment-detection",
5153
"use-cases/invoicing",
5254
"use-cases/payouts",
5355
"use-cases/payroll",

‎snippets/comparison-table.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export const ComparisonTable = () => {
160160
};
161161

162162
return (
163-
<div className="w-full bg-gray-50 dark:bg-[#002920] rounded-xl border border-gray-200 dark:border-[#014d3d] shadow-lg p-4 md:p-8">
163+
<div className="w-full p-4 md:p-8">
164164
<div className="overflow-x-auto -mx-4 md:mx-0 px-4 md:px-0">
165165
<div className="min-w-[800px]">
166166
{/* Table Header */}

‎snippets/demo-container.jsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const DemoContainer = ({ children }) => {
2+
return (
3+
<div
4+
className="bg-gray-50 dark:bg-gradient-to-b dark:from-[#001912] dark:to-[#00251a] rounded-xl border border-gray-200 dark:border-[#014d3d]"
5+
>
6+
{children}
7+
</div>
8+
);
9+
};

‎snippets/integrated-demo.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -709,7 +709,7 @@ export const IntegratedDemo = () => {
709709

710710
return (
711711
<div className="relative" ref={demoContainerRef}>
712-
<div className="relative w-full bg-gray-50 dark:bg-[#002920] rounded-xl border border-gray-200 dark:border-[#014d3d] shadow-lg p-4 md:p-8">
712+
<div className="relative w-full p-4 md:p-8">
713713
{showDialog && !hasStarted && (
714714
<div
715715
className="absolute inset-0 bg-black/50 backdrop-blur-sm rounded-xl z-10 flex items-start justify-center p-4"

‎snippets/payment-processor-qa.jsx‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
import { useState } from 'react';
2+
3+
export const PaymentProcessorQA = () => {
4+
const [openIndex, setOpenIndex] = useState(0);
5+
6+
const faqs = [
7+
{
8+
question: "How much cheaper is Request Network?",
9+
answer: (
10+
<div className="space-y-3">
11+
<p>
12+
Request Network charges <strong>0.05% (5 basis points)</strong> per transaction.
13+
</p>
14+
<p>
15+
Traditional processors like Stripe and PayPal charge <strong>2.9% + $0.30</strong> per transaction.
16+
</p>
17+
<div
18+
style={{
19+
background: 'linear-gradient(to bottom, rgba(1, 176, 137, 0.05), rgba(1, 176, 137, 0.08))',
20+
borderColor: 'rgba(1, 176, 137, 0.2)'
21+
}}
22+
className="rounded-lg p-4 border dark:bg-gradient-to-b dark:from-[#002419] dark:to-[#003326] dark:border-[rgba(1,176,137,0.3)]"
23+
>
24+
<p className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
25+
Example: On a $10,000 payment
26+
</p>
27+
<div className="space-y-1 text-sm">
28+
<div className="flex items-center justify-between">
29+
<span className="text-gray-600 dark:text-gray-400">Request Network:</span>
30+
<span className="font-semibold text-green-600 dark:text-green-400">$5 fee</span>
31+
</div>
32+
<div className="flex items-center justify-between">
33+
<span className="text-gray-600 dark:text-gray-400">Stripe/PayPal:</span>
34+
<span className="font-semibold text-red-600 dark:text-red-400">$290 fee</span>
35+
</div>
36+
</div>
37+
</div>
38+
<p className="text-sm text-gray-600 dark:text-gray-400">
39+
That's <strong className="text-primary-600 dark:text-primary-400">58x cheaper</strong> with Request Network.
40+
</p>
41+
</div>
42+
),
43+
},
44+
{
45+
question: "What does 'non-custodial' mean?",
46+
answer: (
47+
<div className="space-y-3">
48+
<p>
49+
With Request Network, funds go <strong>directly from payer to recipient</strong> on the blockchain.
50+
</p>
51+
{' '}
52+
<p>
53+
Traditional payment processors hold your funds for <strong>2-7 days</strong> before releasing them. This creates:
54+
</p>
55+
<ul className="space-y-2 ml-4">
56+
<li className="flex items-start gap-2">
57+
<span className="text-red-600 dark:text-red-400 mt-1">❌</span>
58+
<span>Counterparty risk (they could go bankrupt)</span>
59+
</li>
60+
<li className="flex items-start gap-2">
61+
<span className="text-red-600 dark:text-red-400 mt-1">❌</span>
62+
<span>Delayed access to your money</span>
63+
</li>
64+
<li className="flex items-start gap-2">
65+
<span className="text-red-600 dark:text-red-400 mt-1">❌</span>
66+
<span>Potential freezing or seizure of funds</span>
67+
</li>
68+
</ul>
69+
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
70+
<p className="font-semibold text-green-900 dark:text-green-100 mb-3">
71+
✅ Request Network eliminates these risks entirely
72+
</p>
73+
<p className="text-sm text-green-700 dark:text-green-300 mt-2">
74+
You have full control and immediate access to your funds at all times.
75+
</p>
76+
</div>
77+
</div>
78+
),
79+
},
80+
{
81+
question: "How does reconciliation compare?",
82+
answer: (
83+
<div className="space-y-3">
84+
<p>
85+
Both Request Network and traditional processors offer payment reconciliation capabilities.
86+
</p>
87+
<div className="grid md:grid-cols-2 gap-4">
88+
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
89+
<p className="font-semibold text-green-900 dark:text-green-100 mb-3">
90+
Request Network Advantages:
91+
</p>
92+
<ul className="space-y-2 text-sm">
93+
<li className="flex items-start gap-2">
94+
<span className="text-green-600 dark:text-green-400 mt-0.5">✅</span>
95+
<span className="text-green-900 dark:text-green-100">Cryptographically guaranteed accuracy</span>
96+
</li>
97+
<li className="flex items-start gap-2">
98+
<span className="text-green-600 dark:text-green-400 mt-0.5">✅</span>
99+
<span className="text-green-900 dark:text-green-100">Permanent on-chain records (can't be deleted)</span>
100+
</li>
101+
<li className="flex items-start gap-2">
102+
<span className="text-green-600 dark:text-green-400 mt-0.5">✅</span>
103+
<span className="text-green-900 dark:text-green-100">Real-time status updates via webhooks</span>
104+
</li>
105+
<li className="flex items-start gap-2">
106+
<span className="text-green-600 dark:text-green-400 mt-0.5">✅</span>
107+
<span className="text-green-900 dark:text-green-100">No data retention limits</span>
108+
</li>
109+
</ul>
110+
</div>
111+
<div
112+
style={{
113+
background: 'linear-gradient(to bottom, rgba(1, 176, 137, 0.05), rgba(1, 176, 137, 0.08))',
114+
borderColor: 'rgba(1, 176, 137, 0.2)'
115+
}}
116+
className="rounded-lg p-4 border dark:bg-gradient-to-b dark:from-[#002419] dark:to-[#003326] dark:border-[rgba(1,176,137,0.3)]"
117+
>
118+
<p className="font-semibold text-gray-900 dark:text-gray-100 mb-3">
119+
Traditional Processors:
120+
</p>
121+
<ul className="space-y-2 text-sm">
122+
<li className="flex items-start gap-2">
123+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
124+
<span className="text-gray-700 dark:text-gray-300">Data stored in company databases</span>
125+
</li>
126+
<li className="flex items-start gap-2">
127+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
128+
<span className="text-gray-700 dark:text-gray-300">Limited data retention (typically 7 years)</span>
129+
</li>
130+
<li className="flex items-start gap-2">
131+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
132+
<span className="text-gray-700 dark:text-gray-300">Depends on company staying in business</span>
133+
</li>
134+
<li className="flex items-start gap-2">
135+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
136+
<span className="text-gray-700 dark:text-gray-300">Subject to data breaches and loss</span>
137+
</li>
138+
</ul>
139+
</div>
140+
</div>
141+
</div>
142+
),
143+
},
144+
{
145+
question: "Which is better for crypto businesses?",
146+
answer: (
147+
<div className="space-y-3">
148+
<p>
149+
Request Network is <strong>purpose-built for crypto</strong> from the ground up:
150+
</p>
151+
<div className="bg-primary-50 dark:bg-primary-900/20 rounded-lg p-4 border border-primary-200 dark:border-primary-800">
152+
<ul className="space-y-2">
153+
<li className="flex items-start gap-2">
154+
<span className="text-primary-600 dark:text-primary-400 mt-0.5">✅</span>
155+
<span>
156+
<strong>553+ currencies</strong> across 10 EVM chains (Ethereum, Polygon, BSC, etc.)
157+
</span>
158+
</li>
159+
<li className="flex items-start gap-2">
160+
<span className="text-primary-600 dark:text-primary-400 mt-0.5">✅</span>
161+
<span>
162+
<strong>No forced fiat conversion</strong> - stay in crypto end-to-end
163+
</span>
164+
</li>
165+
<li className="flex items-start gap-2">
166+
<span className="text-primary-600 dark:text-primary-400 mt-0.5">✅</span>
167+
<span>
168+
<strong>Native Web3 wallet integration</strong> - connect with MetaMask, WalletConnect, etc.
169+
</span>
170+
</li>
171+
<li className="flex items-start gap-2">
172+
<span className="text-primary-600 dark:text-primary-400 mt-0.5">✅</span>
173+
<span>
174+
<strong>Crosschain payments</strong> - pay in one token, receive in another
175+
</span>
176+
</li>
177+
</ul>
178+
</div>
179+
<p className="text-sm text-gray-600 dark:text-gray-400 mt-3">
180+
Traditional processors treat crypto as an afterthought:
181+
</p>
182+
<ul className="space-y-2 ml-4 text-sm">
183+
<li className="flex items-start gap-2">
184+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
185+
<span className="text-gray-700 dark:text-gray-300">
186+
Limited token support (usually just BTC, ETH, USDC)
187+
</span>
188+
</li>
189+
<li className="flex items-start gap-2">
190+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
191+
<span className="text-gray-700 dark:text-gray-300">
192+
Requires crypto-to-fiat conversion with variable fees
193+
</span>
194+
</li>
195+
<li className="flex items-start gap-2">
196+
<span className="text-orange-600 dark:text-orange-400 mt-0.5">⚠️</span>
197+
<span className="text-gray-700 dark:text-gray-300">
198+
Fiat-first architecture with crypto bolted on
199+
</span>
200+
</li>
201+
</ul>
202+
</div>
203+
),
204+
},
205+
{
206+
question: "🛡️ What about chargebacks?",
207+
answer: (
208+
<div className="space-y-3">
209+
<p>
210+
With Request Network, <strong>crypto payments are typically final</strong>—there are no chargebacks by default.
211+
</p>
212+
<div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
213+
<p className="font-semibold text-green-900 dark:text-green-100 mb-2">
214+
✅ Benefits of Finality:
215+
</p>
216+
<ul className="space-y-2 text-sm text-green-900 dark:text-green-100">
217+
<li className="flex items-start gap-2">
218+
<span>•</span>
219+
<span>No surprise reversals 60-90 days after payment</span>
220+
</li>
221+
<li className="flex items-start gap-2">
222+
<span>•</span>
223+
<span>Perfect for digital goods and services</span>
224+
</li>
225+
<li className="flex items-start gap-2">
226+
<span>•</span>
227+
<span>Ideal for international payments where chargeback fraud is common</span>
228+
</li>
229+
<li className="flex items-start gap-2">
230+
<span>•</span>
231+
<span>No chargeback fees ($15-25 per dispute)</span>
232+
</li>
233+
</ul>
234+
</div>
235+
<p className="text-sm text-gray-600 dark:text-gray-400">
236+
Traditional processors face significant chargeback risk, especially for digital goods. Merchants can lose both the product and the payment, plus pay dispute fees.
237+
</p>
238+
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
239+
<p className="text-sm text-blue-900 dark:text-blue-100">
240+
<strong>Note:</strong> Request Network supports escrow-based flows for use cases requiring buyer protection. Funds are held in smart contracts until conditions are met, enabling refunds when needed.
241+
</p>
242+
</div>
243+
</div>
244+
),
245+
},
246+
];
247+
248+
const ChevronDownIcon = ({ className = "h-4 w-4" }) => (
249+
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
250+
<polyline points="6 9 12 15 18 9"></polyline>
251+
</svg>
252+
);
253+
254+
return (
255+
<>
256+
<div className="w-full max-w-5xl mx-auto p-4 md:p-8">
257+
<div className="space-y-3">
258+
{faqs.map((faq, index) => (
259+
<div
260+
key={index}
261+
style={{
262+
background: openIndex === index
263+
? 'linear-gradient(to bottom, rgba(1, 176, 137, 0.04), rgba(1, 176, 137, 0.06))'
264+
: 'rgba(1, 176, 137, 0.02)',
265+
borderColor: openIndex === index ? 'rgba(1, 176, 137, 0.3)' : 'rgba(1, 176, 137, 0.15)'
266+
}}
267+
className="rounded-lg border overflow-hidden transition-all duration-200 hover:border-[rgba(1,176,137,0.4)] dark:bg-gradient-to-b dark:from-[#002419] dark:to-[#003326] dark:border-[rgba(1,176,137,0.3)]"
268+
>
269+
<button
270+
onClick={() => setOpenIndex(openIndex === index ? -1 : index)}
271+
className="w-full px-5 py-4 flex items-center justify-between text-left transition-colors duration-200"
272+
>
273+
<span className="text-base md:text-lg font-semibold text-gray-900 dark:text-gray-100 pr-4">
274+
{faq.question}
275+
</span>
276+
<ChevronDownIcon
277+
className={`h-4 w-4 flex-shrink-0 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${
278+
openIndex === index ? 'rotate-180' : ''
279+
}`}
280+
/>
281+
</button>
282+
<div
283+
className={`overflow-hidden transition-all duration-300 ${
284+
openIndex === index ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
285+
}`}
286+
>
287+
<div className="px-5 pb-4 text-gray-700 dark:text-gray-300">
288+
{faq.answer}
289+
</div>
290+
</div>
291+
</div>
292+
))}
293+
</div>
294+
</div>
295+
</>
296+
);
297+
};

0 commit comments

Comments
 (0)