From 703f761a088425deb4dd114447f558727d60d7bb Mon Sep 17 00:00:00 2001 From: akcodez Date: Tue, 26 Aug 2025 10:15:53 -0700 Subject: [PATCH] Enhance payments and tokenization pages with developer resources and layout improvements - Integrated DeveloperResourcesSection into both payments and tokenization pages to provide developers with essential resources and community links. - Updated payment URLs for various stablecoins to direct users to relevant external resources. - Improved layout and styling for the payments integration section, ensuring better responsiveness and user experience. - Refactored CSS for shared developer tools styles between payments and tokenization pages, enhancing visual consistency. --- docs/use-cases/payments/index.page.tsx | 110 ++++++++++++-- .../tokenization/real-world-assets.page.tsx | 126 +++++++--------- .../developer-resources-section.tsx | 60 ++++++++ static/css/devportal2024-v1.css | 2 +- static/img/uses/payments/coinpayments.png | Bin 0 -> 3597 bytes static/img/uses/payments/friipay.png | Bin 0 -> 1589 bytes static/img/uses/payments/ripple-white.png | Bin 0 -> 1087 bytes styles/_contribute.scss | 2 +- styles/_pages.scss | 117 ++++++++------- styles/_use-cases.scss | 141 +++++++++++++++++- 10 files changed, 411 insertions(+), 147 deletions(-) create mode 100644 shared/components/developer-resources-section.tsx create mode 100644 static/img/uses/payments/coinpayments.png create mode 100644 static/img/uses/payments/friipay.png create mode 100644 static/img/uses/payments/ripple-white.png diff --git a/docs/use-cases/payments/index.page.tsx b/docs/use-cases/payments/index.page.tsx index 7d8f7b298c..0bbf5648dc 100644 --- a/docs/use-cases/payments/index.page.tsx +++ b/docs/use-cases/payments/index.page.tsx @@ -3,6 +3,8 @@ import { useThemeHooks } from "@redocly/theme/core/hooks"; import { AdvantagesSection } from "shared/components/advantages-section"; import { ProjectCards } from "shared/components/project-cards"; import { BenefitsSection } from "shared/components/benefits-section"; +import { DeveloperResourcesSection } from "shared/components/developer-resources-section"; +import { FeatureItem } from "../tokenization/real-world-assets.page"; export const frontmatter = { seo: { @@ -70,37 +72,37 @@ const PaymentsPage: React.FC = () => { { id: "ripple-usd", label: "Ripple USD", - url: "#", + url: "https://ripple.com/solutions/stablecoin/", description: "RLUSD, Ripple's enterprise-grade stablecoin, is live on XRPL and fully backed by USD deposits.", }, { id: "usdc", label: "USDC", - url: "#", + url: "https://www.circle.com/usdc", description: "USDC, issued by Circle, is the world's largest regulated dollar stablecoin and now live on XRPL.", }, { id: "usdb", label: "USDB", - url: "#", + url: "https://www.brazabank.com.br/en/usdben/", description: "USDB, by Braza Group, is a USD-pegged stablecoin backed by U.S. and Brazilian bonds.", }, { id: "europ", label: "EUROP", - url: "#", + url: "https://schuman.io/europ/", description: "EUROP, issued by Schuman Financial, is the first MiCA-compliant euro stablecoin on XRPL.", }, { id: "xsgd", label: "XSGD", - url: "#", + url: "https://www.straitsx.com/xsgd", description: "XSGD, from StraitsX, is a Singapore Dollar-backed stablecoin regulated by MAS.", }, { id: "audd", label: "AUDD", - url: "#", + url: "https://www.audd.digital/", description: "AUDD, an Australian dollar stablecoin, is live on XRPL and backed 1:1 with AUD.", }, ]; @@ -142,29 +144,68 @@ const PaymentsPage: React.FC = () => { { id: "coinpayments", label: "CoinPayments", - url: "#", + url: "https://xrpl.org/blog/2025/coinpayments-xrpl-case-study-payment-processing", description: "CoinPayments uses XRPL's fast and low-cost payment rails to enable merchants to accept digital assets globally with near-instant settlement and minimal transaction fees.", buttonText: "Case Study" }, { id: "ripple", label: "Ripple", - url: "#", + url: "https://ripple.com/solutions/cross-border-payments/", description: "Ripple Payments enables crypto companies, payment service providers and fintech to facilitate real-time cross-border payments using stablecoins, digital assets and local currencies — with XRPL as a foundational transaction layer.", buttonText: "Case Study" }, { id: "fiipay", label: "FiiPay", - url: "#", + url: "https://xrpl.org/blog/2025/frii-pay-xrpl-case-study-crypto-payment-solution", description: "FiiPay connects XRPL-based crypto wallets to point-of-sale terminals, allowing customers to pay with RLUSD or XRP while helping merchants save costs on card processing fees.", buttonText: "Case Study" }, ]; + const integrationFeatures = [ + { + title: "Access open documentation", + link: "/docs/" + }, + { + title: "Use the Payments APIs + XRPL tooling", + link: "/resources/dev-tools" + }, + ]; + + + const paymentsResourcesCards = [ + { + title: "Developer Spotlight", + description: "Are you building a peer-to-peer payments solution, integrating stablecoins, or exploring RLUSD on the XRP Ledger?", + links: [ + { + text: "Share Your Work", + url: "https://discord.gg/sfX3ERAMjH" + } + ] + }, + { + title: "Learn & Stay Updated", + description: "Stay ahead of the curve with the latest developments in XRPL Payments by joining the Developer Discord and signing up for the XRPL Community Newsletter.", + links: [ + { + text: "Join the Developer Discord", + url: "https://discord.gg/sfX3ERAMjH" + }, + { + text: "Sign up for the Newsletter", + url: "https://xrplresources.org/subscribe" + } + ] + } + ]; + return (
-
+