From f10dbc8c29db4898ff0af7bab792f6493d16f032 Mon Sep 17 00:00:00 2001 From: Calvin <8109978+Calvinjwala@users.noreply.github.com> Date: Wed, 13 May 2026 08:10:05 -0700 Subject: [PATCH] [feat] page composition (#3640) * updating docs landing page, took far but not complete. Pushing for Gabe take over * Refactor home page sections and introduce new components - Replaced existing content in index.page.tsx with new section components for improved structure and maintainability. - Added new sections: HomeBeginJourneySection, HomeBlockchainStatsSection, HomeComplianceDirectorySection, HomeDevelopersFeatureSection, HomeFutureFinanceCallout, HomeHeroCallout, HomeInstitutionsFeatureSection, HomePartnerLogosSection, HomeStayConnectedSection, and HomeCarousel. - Updated styles for CarouselFeatured and CardStat components to enhance visual consistency and responsiveness. - Introduced SCSS for HomeHero section to manage layout and spacing effectively. * Add Payments Page and Sections - Created a new Payments page with multiple sections including Hero, Why Choose, Advanced Features, Stablecoins, Embedded Payments, Partner Logos, Flexible Integration, Developer Spotlight, and Stay Connected. - Each section is designed to highlight various aspects of the XRP Ledger Payments Infrastructure, featuring components like FeaturedVideoHero and CardsIconGrid. - Added corresponding styles and images to enhance the visual presentation of the new sections. * adding icons, updating docs landing page * updating the claude command, wrapping text with translate wrapper * use case tokenization page built * Enhance CarouselFeatured styles for improved responsiveness - Added flex-direction adjustments for CarouselFeatured component to support column-reverse layout on smaller screens and row layout on medium and larger screens. - Removed redundant vendor prefixes from box-sizing and text-decoration properties in devportal2024-v1.css for cleaner code and improved maintainability. * moving payments page to correct folder, moving payments under pages * adding developers home page * code clean up --------- Co-authored-by: gabriel-ortiz Co-authored-by: gabriel-ortiz --- .claude/commands/figma-build-page.md | 262 ++++ .claude/settings.json | 10 + .../components/Navbar/constants/navigation.ts | 46 +- community/developer-funding.page.tsx | 657 ++++----- community/index.page.tsx | 1239 ++--------------- develop/index.page.tsx | 320 +++++ docs/index.page.tsx | 870 ++++++------ docs/use-cases/payments/index.page.tsx | 342 +---- docs/use-cases/tokenization/index.page.tsx | 583 ++++---- docs/use-cases/trading/index.page.tsx | 264 ++++ index.page.tsx | 267 +--- .../home/sections/HomeBeginJourneySection.tsx | 141 ++ .../sections/HomeBlockchainStatsSection.tsx | 48 + pages/home/sections/HomeCarousel.tsx | 93 ++ .../HomeComplianceDirectorySection.tsx | 54 + .../sections/HomeDevelopersFeatureSection.tsx | 29 + .../sections/HomeFutureFinanceCallout.tsx | 19 + pages/home/sections/HomeHero/HomeHero.scss | 58 + pages/home/sections/HomeHero/index.tsx | 35 + pages/home/sections/HomeHeroCallout.tsx | 21 + .../HomeInstitutionsFeatureSection.tsx | 29 + .../home/sections/HomePartnerLogosSection.tsx | 38 + .../sections/HomeStayConnectedSection.tsx | 29 + pages/home/sections/index.ts | 11 + .../sections/AdvancedFeaturesSection.tsx | 29 + .../sections/DeveloperSpotlightSection.tsx | 37 + .../sections/EmbeddedPaymentsSection.tsx | 60 + .../sections/FlexibleIntegrationSection.tsx | 48 + pages/payments/sections/HeroSection.tsx | 23 + .../payments/sections/PartnerLogosSection.tsx | 50 + .../payments/sections/StablecoinsSection.tsx | 57 + .../sections/StayConnectedSection.tsx | 29 + pages/payments/sections/WhyChooseSection.tsx | 48 + pages/payments/sections/index.ts | 9 + resources/index.md | 12 - resources/index.page.tsx | 246 ++++ shared/components/CardStat/CardStat.scss | 1 + .../CarouselFeatured/CarouselFeatured.scss | 167 ++- .../CarouselFeatured/CarouselFeatured.tsx | 386 ++--- shared/patterns/CarouselFeatured/README.md | 35 +- .../patterns/LinkTextCard/LinkTextCard.scss | 75 +- shared/patterns/LinkTextCard/LinkTextCard.tsx | 40 +- .../CalloutMediaBanner.scss | 136 +- shared/sections/CalloutMediaBanner/README.md | 12 +- .../sections/CardStatsList/CardStatsList.tsx | 32 +- .../CarouselCardList/CarouselCardList.scss | 2 + .../FeatureSingleTopic.scss | 5 +- .../FeatureTwoColumn/FeatureTwoColumn.scss | 2 +- .../LinkTextDirectory/LinkTextDirectory.tsx | 58 +- .../LogoSquareGrid/LogoSquareGrid.scss | 12 + .../_small-tiles-section.scss | 2 + .../_standard-card-group-section.scss | 13 - showcase/carousel-featured.page.tsx | 142 +- sidebars.yaml | 6 +- static/css/devportal2024-v1.css | 617 +++----- static/css/devportal2024-v1.css.map | 6 +- ...community-developer-funding-carousel-1.jpg | Bin 0 -> 226687 bytes ...community-developer-funding-carousel-2.jpg | Bin 0 -> 288391 bytes ...community-developer-funding-carousel-3.jpg | Bin 0 -> 347077 bytes ...community-developer-funding-hero-media.jpg | Bin 0 -> 92544 bytes ...mmunity-developer-funding-video-poster.jpg | Bin 0 -> 96015 bytes .../bds-2026/community-feature-media-1.jpg | Bin 0 -> 224344 bytes .../bds-2026/community-feature-media-2.jpg | Bin 0 -> 672814 bytes .../bds-2026/community-feature-media-3.jpg | Bin 0 -> 670721 bytes .../bds-2026/community-feature-media-4.jpg | Bin 0 -> 68742 bytes static/img/bds-2026/community-hero-media.jpg | Bin 0 -> 449903 bytes .../img/bds-2026/develop-feature-media-1.jpg | Bin 0 -> 85195 bytes .../img/bds-2026/develop-feature-media-2.jpg | Bin 0 -> 148168 bytes .../img/bds-2026/develop-feature-media-3.jpg | Bin 0 -> 82988 bytes .../img/bds-2026/develop-feature-media-4.jpg | Bin 0 -> 157185 bytes .../img/bds-2026/develop-feature-media-5.jpg | Bin 0 -> 105967 bytes .../img/bds-2026/develop-feature-media-6.jpg | Bin 0 -> 147430 bytes .../img/bds-2026/develop-feature-media-7.jpg | Bin 0 -> 279790 bytes static/img/bds-2026/develop-hero-media.jpg | Bin 0 -> 268643 bytes static/img/bds-2026/docs-feature-media-1.jpg | Bin 0 -> 238948 bytes static/img/bds-2026/docs-feature-media-2.jpg | Bin 0 -> 167809 bytes static/img/bds-2026/docs-feature-media-3.jpg | Bin 0 -> 262644 bytes static/img/bds-2026/docs-feature-media.jpg | Bin 0 -> 334055 bytes static/img/bds-2026/docs-hero-media.jpg | Bin 0 -> 98927 bytes .../bds-2026/resources-feature-media-1.jpg | Bin 0 -> 93660 bytes .../bds-2026/resources-feature-media-10.jpg | Bin 0 -> 72087 bytes .../bds-2026/resources-feature-media-2.jpg | Bin 0 -> 60419 bytes .../bds-2026/resources-feature-media-3.jpg | Bin 0 -> 50285 bytes .../bds-2026/resources-feature-media-4.jpg | Bin 0 -> 60336 bytes .../bds-2026/resources-feature-media-5.jpg | Bin 0 -> 46984 bytes .../bds-2026/resources-feature-media-6.jpg | Bin 0 -> 47077 bytes .../bds-2026/resources-feature-media-7.jpg | Bin 0 -> 96869 bytes .../bds-2026/resources-feature-media-8.jpg | Bin 0 -> 82376 bytes .../bds-2026/resources-feature-media-9.jpg | Bin 0 -> 53914 bytes static/img/bds-2026/resources-hero-media.jpg | Bin 0 -> 167272 bytes .../img/bds-2026/trading-feature-media-1.jpg | Bin 0 -> 81480 bytes .../img/bds-2026/trading-feature-media-2.jpg | Bin 0 -> 133700 bytes .../img/bds-2026/trading-feature-media-3.jpg | Bin 0 -> 187612 bytes static/img/bds-2026/trading-hero-media.jpg | Bin 0 -> 66457 bytes static/img/bds-2026/trading-video-poster.jpg | Bin 0 -> 87383 bytes .../use-cases-tokenization-hero-media.jpg | Bin 0 -> 284361 bytes .../use-cases-tokenization-mpts-media.jpg | Bin 0 -> 161177 bytes ...ases-tokenization-stay-connected-media.jpg | Bin 0 -> 369676 bytes ...s-tokenization-token-utility-1-trading.jpg | Bin 0 -> 338047 bytes ...okenization-token-utility-2-collateral.jpg | Bin 0 -> 315525 bytes ...tokenization-token-utility-3-delegated.jpg | Bin 0 -> 426243 bytes ...okenization-token-utility-4-crosschain.jpg | Bin 0 -> 74808 bytes ...cases-tokenization-token-utility-media.jpg | Bin 0 -> 610329 bytes static/img/home/archax-logo.svg | 3 + static/img/home/coin-finance.png | Bin 0 -> 367337 bytes static/img/home/keyboard-switch.png | Bin 0 -> 240457 bytes static/img/home/logo-zonix.svg | 12 + static/img/home/men-review-app.png | Bin 0 -> 206463 bytes static/img/home/ondo-finance.svg | 9 + static/img/home/ripple-icon-timed.png | Bin 0 -> 168551 bytes static/img/home/xrpl-building-developers.jpg | Bin 0 -> 43997 bytes .../img/home/xrpl-building-institutions.jpg | Bin 0 -> 66345 bytes static/img/home/xrpl-scaffolding.png | Bin 0 -> 404528 bytes .../2026/black/End-to-End-Sample-Apps.svg | 13 + .../2026/black/Launch-Your-First-Project.svg | 16 + .../2026/black/Ready-to-Use-Code-Samples.svg | 13 + .../2026/black/Step-by-Step-Tutorials.svg | 14 + .../icons/2026/black/compliance-primitive.svg | 9 + .../2026/black/delegated-token-management.svg | 8 + .../img/icons/2026/black/dex-integration.svg | 13 + .../black/fast-settlement-and-low-fees.svg | 8 + static/img/icons/2026/black/hybrid-dex.svg | 13 + .../black/native-compliance-capabilities.svg | 10 + .../2026/black/native-lending-protocol.svg | 14 + .../img/icons/2026/black/onchain-metadata.svg | 9 + .../img/icons/2026/black/token-standards.svg | 5 + .../2026/black/transaction-simulation.svg | 10 + .../2026/color/lilac/node-configuration.svg | 4 + .../2026/color/lilac/troubleshooting-node.svg | 7 + .../icons/2026/color/lilac/xrpl-server.svg | 4 + static/img/logos/black/anodos.png | Bin 0 -> 10779 bytes static/img/logos/black/archax.svg | 5 + static/img/logos/black/braza.png | Bin 0 -> 2579 bytes static/img/logos/black/circle.png | Bin 0 -> 4523 bytes static/img/logos/black/coinpayments.png | Bin 0 -> 14929 bytes static/img/logos/black/db-schenker.png | Bin 0 -> 2526 bytes static/img/logos/black/first-ledger.png | Bin 0 -> 11545 bytes static/img/logos/black/frii.png | Bin 0 -> 22846 bytes static/img/logos/black/go.svg | 7 + static/img/logos/black/hidden-road.png | Bin 0 -> 10319 bytes static/img/logos/black/hummingbot.png | Bin 0 -> 10352 bytes static/img/logos/black/java.svg | 10 + static/img/logos/black/js.svg | 4 + static/img/logos/black/link.png | Bin 0 -> 7063 bytes static/img/logos/black/magnetic.png | Bin 0 -> 11929 bytes static/img/logos/black/ondo.png | Bin 0 -> 5372 bytes static/img/logos/black/php.svg | 5 + static/img/logos/black/propto.png | Bin 0 -> 22292 bytes static/img/logos/black/python.svg | 4 + static/img/logos/black/ripple.png | Bin 0 -> 3870 bytes static/img/logos/black/securd.png | Bin 0 -> 9742 bytes static/img/logos/black/societe-generale.png | Bin 0 -> 4006 bytes static/img/logos/black/sologenic.png | Bin 0 -> 10706 bytes static/img/logos/black/strobe.png | Bin 0 -> 11920 bytes static/img/logos/black/t54.png | Bin 0 -> 11021 bytes static/img/logos/black/vert.png | Bin 0 -> 2927 bytes static/img/logos/black/xrpl-evm.svg | 6 + static/img/logos/black/zeconomy.png | Bin 0 -> 5055 bytes static/img/logos/black/zoniqx.png | Bin 0 -> 11734 bytes static/img/payments/brale.png | Bin 0 -> 20711 bytes static/img/payments/brazabank.svg | 10 + static/img/payments/checklist.svg | 6 + static/img/payments/coinpayments.png | Bin 0 -> 20356 bytes static/img/payments/ffii.svg | 11 + static/img/payments/filing.svg | 7 + static/img/payments/globe-1.svg | 11 + static/img/payments/man-writing.jpg | Bin 0 -> 6130536 bytes static/img/payments/money-exchange.svg | 13 + static/img/payments/money-hand.svg | 15 + .../payments/payments-infrastructure-hero.png | Bin 0 -> 9683161 bytes static/img/payments/ripple-blueblack.svg | 11 + static/img/payments/wallet-exchange.svg | 11 + static/img/payments/xrpl-pattern.png | Bin 0 -> 14676 bytes styles/_docs-landing.scss | 740 +++++----- styles/xrpl.scss | 4 + 175 files changed, 4866 insertions(+), 4070 deletions(-) create mode 100644 .claude/commands/figma-build-page.md create mode 100644 .claude/settings.json create mode 100644 develop/index.page.tsx create mode 100644 docs/use-cases/trading/index.page.tsx create mode 100644 pages/home/sections/HomeBeginJourneySection.tsx create mode 100644 pages/home/sections/HomeBlockchainStatsSection.tsx create mode 100644 pages/home/sections/HomeCarousel.tsx create mode 100644 pages/home/sections/HomeComplianceDirectorySection.tsx create mode 100644 pages/home/sections/HomeDevelopersFeatureSection.tsx create mode 100644 pages/home/sections/HomeFutureFinanceCallout.tsx create mode 100644 pages/home/sections/HomeHero/HomeHero.scss create mode 100644 pages/home/sections/HomeHero/index.tsx create mode 100644 pages/home/sections/HomeHeroCallout.tsx create mode 100644 pages/home/sections/HomeInstitutionsFeatureSection.tsx create mode 100644 pages/home/sections/HomePartnerLogosSection.tsx create mode 100644 pages/home/sections/HomeStayConnectedSection.tsx create mode 100644 pages/home/sections/index.ts create mode 100644 pages/payments/sections/AdvancedFeaturesSection.tsx create mode 100644 pages/payments/sections/DeveloperSpotlightSection.tsx create mode 100644 pages/payments/sections/EmbeddedPaymentsSection.tsx create mode 100644 pages/payments/sections/FlexibleIntegrationSection.tsx create mode 100644 pages/payments/sections/HeroSection.tsx create mode 100644 pages/payments/sections/PartnerLogosSection.tsx create mode 100644 pages/payments/sections/StablecoinsSection.tsx create mode 100644 pages/payments/sections/StayConnectedSection.tsx create mode 100644 pages/payments/sections/WhyChooseSection.tsx create mode 100644 pages/payments/sections/index.ts delete mode 100644 resources/index.md create mode 100644 resources/index.page.tsx create mode 100644 static/img/bds-2026/community-developer-funding-carousel-1.jpg create mode 100644 static/img/bds-2026/community-developer-funding-carousel-2.jpg create mode 100644 static/img/bds-2026/community-developer-funding-carousel-3.jpg create mode 100644 static/img/bds-2026/community-developer-funding-hero-media.jpg create mode 100644 static/img/bds-2026/community-developer-funding-video-poster.jpg create mode 100644 static/img/bds-2026/community-feature-media-1.jpg create mode 100644 static/img/bds-2026/community-feature-media-2.jpg create mode 100644 static/img/bds-2026/community-feature-media-3.jpg create mode 100644 static/img/bds-2026/community-feature-media-4.jpg create mode 100644 static/img/bds-2026/community-hero-media.jpg create mode 100644 static/img/bds-2026/develop-feature-media-1.jpg create mode 100644 static/img/bds-2026/develop-feature-media-2.jpg create mode 100644 static/img/bds-2026/develop-feature-media-3.jpg create mode 100644 static/img/bds-2026/develop-feature-media-4.jpg create mode 100644 static/img/bds-2026/develop-feature-media-5.jpg create mode 100644 static/img/bds-2026/develop-feature-media-6.jpg create mode 100644 static/img/bds-2026/develop-feature-media-7.jpg create mode 100644 static/img/bds-2026/develop-hero-media.jpg create mode 100644 static/img/bds-2026/docs-feature-media-1.jpg create mode 100644 static/img/bds-2026/docs-feature-media-2.jpg create mode 100644 static/img/bds-2026/docs-feature-media-3.jpg create mode 100644 static/img/bds-2026/docs-feature-media.jpg create mode 100644 static/img/bds-2026/docs-hero-media.jpg create mode 100644 static/img/bds-2026/resources-feature-media-1.jpg create mode 100644 static/img/bds-2026/resources-feature-media-10.jpg create mode 100644 static/img/bds-2026/resources-feature-media-2.jpg create mode 100644 static/img/bds-2026/resources-feature-media-3.jpg create mode 100644 static/img/bds-2026/resources-feature-media-4.jpg create mode 100644 static/img/bds-2026/resources-feature-media-5.jpg create mode 100644 static/img/bds-2026/resources-feature-media-6.jpg create mode 100644 static/img/bds-2026/resources-feature-media-7.jpg create mode 100644 static/img/bds-2026/resources-feature-media-8.jpg create mode 100644 static/img/bds-2026/resources-feature-media-9.jpg create mode 100644 static/img/bds-2026/resources-hero-media.jpg create mode 100644 static/img/bds-2026/trading-feature-media-1.jpg create mode 100644 static/img/bds-2026/trading-feature-media-2.jpg create mode 100644 static/img/bds-2026/trading-feature-media-3.jpg create mode 100644 static/img/bds-2026/trading-hero-media.jpg create mode 100644 static/img/bds-2026/trading-video-poster.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-hero-media.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-mpts-media.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-stay-connected-media.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-token-utility-1-trading.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-token-utility-2-collateral.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-token-utility-3-delegated.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-token-utility-4-crosschain.jpg create mode 100644 static/img/bds-2026/use-cases-tokenization-token-utility-media.jpg create mode 100644 static/img/home/archax-logo.svg create mode 100644 static/img/home/coin-finance.png create mode 100644 static/img/home/keyboard-switch.png create mode 100644 static/img/home/logo-zonix.svg create mode 100644 static/img/home/men-review-app.png create mode 100644 static/img/home/ondo-finance.svg create mode 100644 static/img/home/ripple-icon-timed.png create mode 100644 static/img/home/xrpl-building-developers.jpg create mode 100644 static/img/home/xrpl-building-institutions.jpg create mode 100644 static/img/home/xrpl-scaffolding.png create mode 100644 static/img/icons/2026/black/End-to-End-Sample-Apps.svg create mode 100644 static/img/icons/2026/black/Launch-Your-First-Project.svg create mode 100644 static/img/icons/2026/black/Ready-to-Use-Code-Samples.svg create mode 100644 static/img/icons/2026/black/Step-by-Step-Tutorials.svg create mode 100644 static/img/icons/2026/black/compliance-primitive.svg create mode 100644 static/img/icons/2026/black/delegated-token-management.svg create mode 100644 static/img/icons/2026/black/dex-integration.svg create mode 100644 static/img/icons/2026/black/fast-settlement-and-low-fees.svg create mode 100644 static/img/icons/2026/black/hybrid-dex.svg create mode 100644 static/img/icons/2026/black/native-compliance-capabilities.svg create mode 100644 static/img/icons/2026/black/native-lending-protocol.svg create mode 100644 static/img/icons/2026/black/onchain-metadata.svg create mode 100644 static/img/icons/2026/black/token-standards.svg create mode 100644 static/img/icons/2026/black/transaction-simulation.svg create mode 100644 static/img/icons/2026/color/lilac/node-configuration.svg create mode 100644 static/img/icons/2026/color/lilac/troubleshooting-node.svg create mode 100644 static/img/icons/2026/color/lilac/xrpl-server.svg create mode 100644 static/img/logos/black/anodos.png create mode 100644 static/img/logos/black/archax.svg create mode 100644 static/img/logos/black/braza.png create mode 100644 static/img/logos/black/circle.png create mode 100644 static/img/logos/black/coinpayments.png create mode 100644 static/img/logos/black/db-schenker.png create mode 100644 static/img/logos/black/first-ledger.png create mode 100644 static/img/logos/black/frii.png create mode 100644 static/img/logos/black/go.svg create mode 100644 static/img/logos/black/hidden-road.png create mode 100644 static/img/logos/black/hummingbot.png create mode 100644 static/img/logos/black/java.svg create mode 100644 static/img/logos/black/js.svg create mode 100644 static/img/logos/black/link.png create mode 100644 static/img/logos/black/magnetic.png create mode 100644 static/img/logos/black/ondo.png create mode 100644 static/img/logos/black/php.svg create mode 100644 static/img/logos/black/propto.png create mode 100644 static/img/logos/black/python.svg create mode 100644 static/img/logos/black/ripple.png create mode 100644 static/img/logos/black/securd.png create mode 100644 static/img/logos/black/societe-generale.png create mode 100644 static/img/logos/black/sologenic.png create mode 100644 static/img/logos/black/strobe.png create mode 100644 static/img/logos/black/t54.png create mode 100644 static/img/logos/black/vert.png create mode 100644 static/img/logos/black/xrpl-evm.svg create mode 100644 static/img/logos/black/zeconomy.png create mode 100644 static/img/logos/black/zoniqx.png create mode 100644 static/img/payments/brale.png create mode 100644 static/img/payments/brazabank.svg create mode 100644 static/img/payments/checklist.svg create mode 100644 static/img/payments/coinpayments.png create mode 100644 static/img/payments/ffii.svg create mode 100644 static/img/payments/filing.svg create mode 100644 static/img/payments/globe-1.svg create mode 100644 static/img/payments/man-writing.jpg create mode 100644 static/img/payments/money-exchange.svg create mode 100644 static/img/payments/money-hand.svg create mode 100644 static/img/payments/payments-infrastructure-hero.png create mode 100644 static/img/payments/ripple-blueblack.svg create mode 100644 static/img/payments/wallet-exchange.svg create mode 100644 static/img/payments/xrpl-pattern.png diff --git a/.claude/commands/figma-build-page.md b/.claude/commands/figma-build-page.md new file mode 100644 index 0000000000..949407424f --- /dev/null +++ b/.claude/commands/figma-build-page.md @@ -0,0 +1,262 @@ +# Figma Build Page + +Build a `.page.tsx` file from a Figma design URL by mapping each Figma section to an existing shared section component, and export any new images/icons from Figma into the project's asset folders. + +**Usage:** `/figma-build-page ` + +**Example:** `/figma-build-page https://www.figma.com/design/7vhTxPgH1in2AjIETuX49Z/Documentation?node-id=0-1 docs/index.page.tsx` + +--- + +## Workflow + +### Step 1 — Parse the input + +Extract from `$ARGUMENTS`: +- **Figma URL**: extract `fileKey` and `nodeId` (convert `-` to `:` in nodeId) +- **Target file**: the `.page.tsx` file path to rebuild +- **Page slug**: derive from the target file path (e.g. `docs/index.page.tsx` → `docs`, `resources/about.page.tsx` → `resources-about`). This is used to prefix shared media filenames. + +### Step 2 — Understand the design structure + +Run in parallel: +1. Read the current target page file to understand what already exists +2. Run `find shared/sections -name "*.tsx"` and `find shared/components -name "*.tsx"` to inventory available components +3. Run `find static/img/icons/2026 static/img/logos/black static/img/bds-2026 -type f` to inventory existing assets so the build can reuse them instead of re-exporting duplicates +4. Call `mcp__claude_ai_Figma__get_metadata` on the **page root** (the parent of the `nodeId` you were given) — pass `nodeId="0:1"` if you don't know the page id, otherwise walk up one level from the given node. The goal is to see ALL sibling frames on the canvas, not just the LG/MD/SM page mockups. Section frames alone are not enough — designers also park reference data in sibling frames. + +#### Step 2A — Locate the Assets frame (REQUIRED, do this before anything else design-side) + +Designers park clean, isolated versions of the page's icons, logos, photos, and **canonical card/list content** in a sibling frame on the same canvas — typically named `Assets`, `Assets Library`, `Exports`, `Resources`, `Content`, or similar. It lives outside the main `LG`/`MD`/`SM` page frames, usually far to the right or below them. + +From the page-root metadata, find any frame whose name matches `/asset|export|library|resource|content/i` OR whose x/y position places it clearly outside the LG/MD/SM stack. Record: +- Its `nodeId` and name +- Every child node's `nodeId`, layer name, and visual role (icon vs photo vs logo vs card content) + +**Then immediately call `mcp__claude_ai_Figma__get_design_context` on the Assets frame** to extract its contents — child layer names, image asset URLs, and any text labels. Do this BEFORE fetching the section contexts in Step 3, because the Assets frame is the source of truth for: +- **Real partner/customer logos** — the LG frame typically shows placeholder logos (e.g. the same logo repeated 8×); the Assets frame holds the real brand SVGs. +- **Full carousel card sets** — the LG frame may only show 3-4 visible slides (with duplicates as overflow placeholders); the Assets frame holds the full N-card list with no duplicates. +- **Canonical icon artwork** — the icon inside a section is often a low-fidelity instance of the master icon in the Assets frame. +- **Per-card hrefs, hidden subtitles, alt text, video URLs** — content the section mockup doesn't have room to show. + +Build an **Assets Index**: `{ layerName, nodeId, role, imageAssetUrl?, associatedSectionHint? }` for every child. Use the layer name to associate each asset with a section (e.g. layer `RWA Partner — Archax` belongs in the logo grid; layer `Carousel Card 04 — Onchain Trading` belongs in the carousel). + +**If the page also has annotations pointing at the Assets frame** (e.g. `data-annotations="Logo - see right side asset frame"`, `"Full list in Assets"`, `"Cards continue in Assets frame"`), treat that as a hard contract: the Assets frame is the authoritative content for that section, and the LG mockup is just a visual stub. + +**Fail-loud if no Assets frame is found:** if you can't find a sibling frame and the page has more than one media/logo/icon, surface this to the user before continuing — e.g. "I didn't find an Assets/Exports frame on this canvas. The LG mockup shows N placeholder logos and a 3-card carousel — proceed treating those as the final content, or point me at the Assets frame?" Don't silently fall back to the LG mockup when the design clearly references external content. + +### Step 3 — Fetch design context for each section (cross-reference with Assets frame) + +For every top-level section frame found in the metadata, call `mcp__claude_ai_Figma__get_design_context` in parallel batches (max 3 at a time). For each section, gather: +- The heading/title text +- Any body/description text +- All link labels and their annotation `href` values (from `data-annotations`) +- Color variants visible (background color tells you which variant to use) +- The arrangement (left/right, content vs media position) +- Every distinct image/icon node — capture its Figma `nodeId`, layer name, fill color, and visual role (icon vs photo, monochrome vs colored) + +**Then cross-reference against the Assets Index from Step 2A:** +- For carousels/lists: if the LG mockup shows fewer cards than the Assets frame, USE THE ASSETS-FRAME COUNT and content. If cards in the mockup look like exact duplicates (same icon + same text), treat them as overflow placeholders and drop them in favor of the Assets-frame set. +- For logo grids: if the mockup repeats the same logo, IGNORE that and use the distinct logos from the Assets frame. +- For media: if the section's media node and an Assets-frame node share a layer name or visible image, prefer the Assets-frame node — it's higher fidelity and isolated from section chrome. +- For icons: if a section icon has a matching layer name in the Assets frame, export from the Assets frame, not the section instance. + +**Important:** Note any Figma annotations that say content should be removed or changed, OR that redirect to the Assets frame ("see right side asset frame", "real logos in assets", etc.) — annotations override what the mockup shows. + +### Step 4 — Map sections to existing components + +For each Figma section, find the best matching component from `shared/sections/`. Common mappings: + +| Figma Section Name | Component | Import | +|---|---|---| +| `headerHeroPrimaryMedia` | `HeaderHeroPrimaryMedia` (default export) | `shared/sections/HeaderHeroPrimaryMedia/HeaderHeroPrimaryMedia` | +| `CarouselCardListOffGrid` | `CarouselCardList` | `shared/sections/CarouselCardList/CarouselCardList` | +| `TextGridCard` | `CardsTextGrid` | `shared/sections/CardsTextGrid/CardsTextGrid` | +| `VideoFeatured` | `FeaturedVideoHero` (default export) | `shared/sections/FeaturedVideoHero/FeaturedVideoHero` | +| `LinkSmallGrid` | `LinkSmallGrid` | `shared/sections/LinkSmallGrid/LinkSmallGrid` | +| `LinkTextDirectory` | `LinkTextDirectory` | `shared/sections/LinkTextDirectory/LinkTextDirectory` | +| `FeatureTwoColumn` | `FeatureTwoColumn` | `shared/sections/FeatureTwoColumn/FeatureTwoColumn` | +| `LinkSmallTiles` | `SmallTilesSection` | `shared/sections/SmallTilesSection/SmallTilesSection` | +| `IconTextGridCard` | `CardsIconGrid` | `shared/sections/CardsIconGrid/CardsIconGrid` | +| `StandardCard` group | `StandardCardGroupSection` | `shared/sections/StandardCardGroupSection/StandardCardGroupSection` | + +Read the prop interfaces of each matched component before writing (`head -60` of the component file is usually enough). + +**Key prop notes:** +- `HeaderHeroPrimaryMedia` / `FeaturedVideoHero` — **default exports**; all others are named exports +- `FeaturedVideoHero` video source: `{ type: 'embed', embedUrl: 'https://www.youtube.com/embed/VIDEO_ID' }` +- `FeatureTwoColumn` `description` prop is required — pass `""` if the Figma shows no body text +- `LinkTextDirectory` buttons use `ButtonConfig`: `{ label: string; href?: string }` +- `StandardCardGroupSection` callsToAction uses `DesignConstrainedButtonProps`: `{ children: ReactNode; href?: string }` +- `CardsTextGrid` / `CardsIconGrid` `description` field accepts `React.ReactNode` — use this for inline links +- `SmallTilesSection` uses existing logo assets: `require('../static/img/logos/black/javascript.svg')` etc. + +### Step 5 — Determine color variants from Figma + +Match Figma background colors to component variant props: +- White / `#ffffff` → `"neutral"` or `"gray"` (default) +- Green `#70ee97` / `#21e46b` → `"green"` +- Lilac/purple `#d9caff` → `"lilac"` +- Yellow → `"yellow"` + +### Step 6 — Plan asset exports + +For every image/icon node identified in Step 3, decide: + +**A) Source node — always prefer the Assets frame:** For each asset slot in the page, look up the matching node in the Assets Index from Step 2A by layer name or visual match. **Export from the Assets-frame node, not the section instance.** Section instances are often scaled-down thumbnails or shared placeholders; the Assets frame holds the master artwork at its intended export size. Only fall back to the section instance if the Assets frame genuinely doesn't have a counterpart. + +**B) Reuse vs export:** If a visually-equivalent asset already exists in the inventory from Step 2 (same role, same color), reuse its path and skip export. Otherwise schedule a new export. + +**C) Target folder** — route by section type and asset role: + +| Section / role | Folder | Format | +|---|---|---| +| `CarouselCardList` card icons (monochrome glyphs) | `static/img/icons/2026/black/` | `.svg` | +| `CardsIconGrid` card icons (colored glyphs) | `static/img/icons/2026/color//` | `.svg` | +| `SmallTilesSection` card icons (SDK / language logos) | `static/img/logos/black/` | `.svg` | +| `LogoRectangleGrid` partner logos (rendered from inner `Logo` frame, 1.5× scale) | `static/img/logos/black/` | `.png` | +| `HeaderHeroPrimaryMedia` hero media (photo) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| `HeaderHeroSplitMedia` hero media (photo) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| `FeatureTwoColumn` media (photo) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| `FeatureSingleTopic` media (photo) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| `CardsFeatured` / `logoRectangleGrid`-as-image-cards card media | `static/img/bds-2026/` | `.jpg` (screenshot card-image frame at 1.5×, see Step 7) | +| `FeaturedVideoHero` poster (if used) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| `CarouselFeatured` slide HeroMedia (photo) | `static/img/bds-2026/` | `.jpg` (composite raw asset onto Figma bg color at native size, see Step 7) | +| Any other colored decorative icon | `static/img/icons/2026/color//` | `.svg` | +| Any other monochrome icon | `static/img/icons/2026/black/` | `.svg` | + +For the colored-icon folders, pick `` from the Figma fill on the icon (or, if the icon inherits color from a parent component, the parent section's variant prop). Existing folders: `lilac`. Create a new sibling folder (`green`, `yellow`, etc.) if the design uses a new color — never dump differently-colored icons into the wrong folder. + +**D) Filename — always kebab-case:** + +1. Start from the Figma layer name. +2. Lowercase, replace spaces / underscores / camelCase boundaries with `-`, strip non-`[a-z0-9-]`. +3. For shared photographic media in `bds-2026/`, **prefix with the page slug** to avoid cross-page collisions: + - hero media → `-hero-media.jpg` + - feature media (multi) → `-feature-media-1.jpg`, `-feature-media-2.jpg`, … +4. Icons and SDK logos are not page-prefixed — they're meant to be reusable across pages. + +Examples: +- Figma layer `Ready to Use Code Samples` (CarouselCardList icon) → `static/img/icons/2026/black/ready-to-use-code-samples.svg` +- Figma layer `XRPL Server` (CardsIconGrid icon, lilac fill) → `static/img/icons/2026/color/lilac/xrpl-server.svg` +- Figma layer `Hero Image` on `docs/index.page.tsx` → `static/img/bds-2026/docs-hero-media.jpg` +- Figma layer `Feature 02` on `resources/about.page.tsx` → `static/img/bds-2026/resources-about-feature-media-2.jpg` +- Figma frame `Logo_Circle` → `Logo` (inner, LogoRectangleGrid partner) → `static/img/logos/black/circle.png` (1.5× PNG, see Step 7) +- Figma frame `Logo_Ondo` → `Logo` (inner, LogoRectangleGrid partner) → `static/img/logos/black/ondo.png` + +### Step 7 — Export the assets from Figma + +For each scheduled export from Step 6 (sourced from the Assets frame per Step 6A whenever possible): + +1. Ensure the target folder exists (`mkdir -p` it if not). +2. **Get the raw Figma asset URL.** Calling `mcp__claude_ai_Figma__get_design_context` on a frame returns inline TS that declares `const imgXxx = "https://www.figma.com/api/mcp/asset/"` constants — one per leaf image/icon node. These URLs serve the **raw underlying asset** (SVG for vector icons, PNG for photos/rasters), NOT a re-rendered screenshot of the surrounding chrome. Pull the URL for the specific Assets-frame child you mapped to this slot. +3. **Download with `curl -sL`** for raw vector assets that render as-is with no framing chrome — typically SVG icons and SDK/language logos: + - SVG icons / vector logos → `curl -sL -o .svg` — Figma serves the actual SVG markup for vector nodes, so no conversion is needed. + - Verify the format with `file ` after downloading the first one of each type, in case Figma serves something unexpected. + +3a. **Photographic media with backgrounds — composite the raw image onto the design's background color, save as JPG at native size.** Most media nodes in the design system (hero media, FeatureTwoColumn media, FeatureSingleTopic media, FeaturedVideoHero poster, CardsFeatured card image, CarouselFeatured slide hero) live inside a wrapper frame named `HeroMedia` / `FeatureMedia` / similar. In Figma, that wrapper frame may have a background fill (e.g. `bg-neutral/100` = `#f0f3f7`, `bg-neutral/200` = `#e6eaf0`) BEHIND a foreground illustration. The raw `imgXxx` URL gives you the foreground image only — strips the background, leaves transparent edges. When the JPG converter then flattens to white, the image looks "floating on white" instead of "sitting on the gray tile" the designer intended. + + To capture the composited image + background fill as a flat JPG **at the source image's native size** (no upscale): + + 1. **Pull the asset URL from the Assets frame.** This is the priority. Calling `get_design_context` on the Assets frame returns the master `imgXxx = "https://www.figma.com/api/mcp/asset/"` constants — clean, isolated, full-size. Only fall back to the section instance's asset URL when the Assets frame has no counterpart. + + 2. **Inspect the design context to find the background color** the image sits on. Look at the wrapper frame around the `` for a sibling/child div with `bg-[var(--neutral\/100,#f0f3f7)]`, `bg-[var(--neutral\/200,#e6eaf0)]`, or similar. If there's no bg div, use `#ffffff`. + + 3. **Download the raw asset:** `curl -sL -o /tmp/.png`. Most photo nodes return PNG with alpha (illustrations / partial photos); some return JPEG (full-bleed photos with no alpha). + + 4. **Composite onto the background color and save as JPG using ImageMagick** (install once with `brew install imagemagick`): + ``` + magick /tmp/.png -background "" -alpha remove -alpha off -quality 85 .jpg + ``` + **No `-resize` flag** — preserve the source's native dimensions. (For very large source PNGs above ~2000px, you may add `-resize "1500x1500>"` to cap size for web, but otherwise leave the native size alone — the designer chose it.) The `-alpha remove -alpha off` flattens alpha onto the `-background` color BEFORE the JPEG encoder strips alpha to white, giving the correct background instead of white. + + 5. Save with the `-feature-media-N.jpg` (or `-hero-media.jpg`, `-video-poster.jpg`, etc.) naming convention from Step 6. + + **DO NOT use `get_screenshot` on the media frame** — instance children inside design-system components have IDs like `I;<...>` which are not screenshotable, and the MCP rejects them. The composite-from-raw-asset approach above works for all cases. + + **Sanity-check the first one.** After exporting the first media of each kind, eyeball the JPG: the foreground illustration should sit on a uniform colored tile (`#f0f3f7` light gray, `#e6eaf0` slightly darker gray, etc.) — NOT on white when the design called for gray. If it's still white-flat, you used the wrong `-background` hex; re-read the Figma frame's `bg-` value. +4. **LogoRectangleGrid partner logos — special procedure.** Multi-layer brand logos (Circle, Zeconomy, DB Schenker, etc.) decompose into many vector pieces under `get_design_context`, so the raw-asset-URL technique above gives you fragments, not a composite. Use this instead: + 1. Target the **inner `Logo` frame** (the 170×96 child of `Logo_`), not the gray-tile parent (`Logo_`) and not the bottom-most leaf layer (e.g. `Ondo finance`, `DB Schenker_Logo_0 1`). + 2. Call `mcp__claude_ai_Figma__get_screenshot` on that inner Logo frame with `contentsOnly: true` and `maxDimension: 256` to request the longer-edge at ~1.5× the native 170 px. Note that Figma's MCP does not supersample beyond a frame's native render size, so the returned PNG is typically still 170×96 — that's expected, not an error. + 3. Download the PNG: `curl -sL -o /tmp/.png`. + 4. Upscale to the 1.5× target dimensions (255×144) using `sips`: `sips -z 144 255 /tmp/.png --out static/img/logos/black/.png`. This gives a crisper-on-retina raster at the design's intended display proportion, even if the resampled pixels don't add new detail. + 5. Save as `.png` (not `.svg` — partner logos in the grid are raster). Filename is kebab-case of the layer name with the `Logo_` prefix stripped (e.g. `Logo_DBS` → `db-schenker.png` — use the visually-recognized brand name, not the literal Figma slug if it's an abbreviation). + 6. **Surface logo-files annotations.** Designers often annotate one of the logo frames (e.g. `Logo_Circle`) with `data-assets-annotations` text like `"Need logo files"` plus a Google Drive link. When present, add a `MISSING_ASSETS` entry: `{ note: "Partner logos are placeholder reproductions — final brand-approved files pending from ", affects: [list of logo paths] }`. The exports are still useful as stand-ins until the user swaps in real assets. +5. **Do NOT use `get_screenshot` on the section frame** to capture media — that re-renders the whole section (chrome, text, padding) and the resulting image cannot be used as a clean media src. The right target for media is the **named media frame inside the section** (e.g. `HeroMedia`, `FeatureMedia`, the `CardImage` media child) per Step 3a above, not the section itself and not the leaf `` (which would strip the background fill). +6. **Fallback when export fails or returns nothing usable:** create a zero-byte placeholder file at the target path AND record `{ figmaNodeId, layerName, targetPath, reason }` in a `MISSING_ASSETS` list. Do not silently drop the asset. + +After all attempted exports, run `ls -la` on each unique target folder so the user can see what landed. + +### Step 8 — Write the implementation (Plan Mode) + +Present a plan first showing: +- All sections in order with their mapped component +- The full content (text, links, variants) for each section +- Any content removed per Figma annotations +- **For each list/grid/carousel section, the canonical item count and source** — e.g. "Logo grid: 8 distinct partner logos from Assets frame (LG mockup showed 8× placeholder, ignored)" or "Carousel: 5 cards from Assets frame (LG mockup showed 3 + 2 duplicates, kept 5)". Make it explicit that the Assets frame won, so the user can spot if something was missed. +- **The asset manifest**: for every image/icon, show `figma layer → source (assets-frame node / section-instance fallback) → target path → status (exported | reused | missing)` + +After approval, write the full `.page.tsx`: +1. Keep the existing `frontmatter` export (SEO metadata) +2. Import all section components at the top +3. **Import and use the translate hook inside the default-exported component:** + ```tsx + import { useThemeHooks } from '@redocly/theme/core/hooks'; + // ... + export default function MyPage() { + const { useTranslate } = useThemeHooks(); + const { translate } = useTranslate(); + return (/* ... */); + } + ``` +4. **Wrap every user-facing string in `translate(...)`** — this includes every prop value that renders as visible text. No bare string literals in JSX text or text-bearing props. Apply to: + - `headline`, `subtitle`, `title`, `description`, `heading`, `label`, `iconAlt`, `alt` props + - Every entry's `title`, `description`, `label`, `heading` inside `cards`, `links`, `buttons` arrays + - `children` strings (including `callsToAction[].children` on `StandardCardGroupSection`) + - Inline-link anchor text inside `React.ReactNode` descriptions (e.g. `{translate('Read More')}`) + - **Do not** translate URLs (`href`, `src`), variant strings (`"green"`, `"left"`), or `embedUrl` values + - Example pattern (mirrors the project's house style): + ```tsx + + ``` +5. Render sections in Figma order inside a wrapper `
` +6. For every image/icon, reference it via `require('../static/img/...')` using the exact path from the manifest — even if the export failed (the placeholder file holds the path) +7. Apply all link `href` values from Figma `data-annotations` +8. Use `React.ReactNode` descriptions to embed inline links where headings link to pages + +### Step 9 — Fix TypeScript errors + +After writing, check IDE diagnostics and fix: +- Default vs named export mismatches +- Wrong video source type (`type: 'embed'` not `type: 'embed_url'`) +- Missing required props +- `callsToAction` tuple shape `[primary, secondary?]` + +### Step 10 — Report + +End the run by printing: +- The list of exported assets and their final paths +- The `MISSING_ASSETS` list (if any) so the user knows exactly which Figma nodes need manual export +- The full target file path + +--- + +## Rules + +- **Never install Tailwind** — the project uses SCSS + Bootstrap +- **Never create new components** — only use what exists in `shared/sections/` and `shared/components/` +- **The Assets frame is the source of truth.** Before fetching any section context, find and read the sibling Assets/Exports/Library/Resources frame on the page canvas. Use it for: real partner logos (not LG mockup placeholders), full carousel/list item sets (not the truncated visible cards), master icon artwork, and per-item hrefs the mockup hides. If you can't find an Assets frame and the design references one (via annotations or repeated placeholders), surface that to the user before guessing. +- **Carousel and logo-grid item counts come from the Assets frame.** If the LG mockup shows repeated identical cards/logos, treat them as overflow placeholders and use the Assets-frame count instead. +- **Export from Assets-frame nodes, not section instances.** Section instances are usually thumbnails of the master artwork in the Assets frame. +- **Always apply links** from Figma annotations to make lists navigable +- **Respect Figma notes** — if a section is annotated for removal, skip it; if it's annotated to redirect content to the Assets frame ("see right side asset frame", "logos in assets", etc.), follow that pointer rather than using the visible mockup content +- **Light mode only** — follow the light mode variant of any design that shows both +- **Always use `require('../static/img/...')` for images** — every image/icon prop must point at a real path under `static/img/` following the folder routing in Step 6. Never pass `src=""` and never inline a remote URL. +- **Kebab-case all new asset filenames.** Shared photographic media in `bds-2026/` must be prefixed with the page slug; icons and logos are not page-prefixed. +- **Reuse existing assets** when the inventory in Step 2 already has a matching icon/logo — do not re-export duplicates with new names. +- **Never delete or overwrite an existing asset** without explicit user confirmation. If an export would collide with an existing file, rename the new export with a `-2` suffix and flag it in the plan. +- **Always use `translate(...)` for visible text.** Import `useThemeHooks` from `@redocly/theme/core/hooks`, call `const { useTranslate } = useThemeHooks(); const { translate } = useTranslate();` at the top of the component, and wrap every user-facing string in `translate(...)`. Never leave a bare string literal in a text-bearing prop or as JSX text. URLs, variant enums, and embed URLs are not text — leave those untranslated. diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000000..65aa797890 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,10 @@ +{ + "permissions": { + "allow": [ + "mcp__claude_ai_Figma__get_design_context", + "mcp__claude_ai_Figma__get_metadata", + "mcp__claude_ai_Figma__get_screenshot", + "mcp__claude_ai_Figma__whoami" + ] + } +} \ No newline at end of file diff --git a/@theme/components/Navbar/constants/navigation.ts b/@theme/components/Navbar/constants/navigation.ts index aee8ac52fe..9421432f16 100644 --- a/@theme/components/Navbar/constants/navigation.ts +++ b/@theme/components/Navbar/constants/navigation.ts @@ -33,21 +33,21 @@ export const developSubmenuData: { href: "/docs", icon: "docs", children: [ - { label: "API Reference", href: "/references" }, + { label: "API Reference", href: "/docs/references" }, { label: "Tutorials", href: "/docs/tutorials" }, - { label: "Concepts", href: "/concepts" }, + { label: "Concepts", href: "/docs/concepts" }, { label: "Infrastructure", href: "/docs/infrastructure" }, ], }, { label: "Client Libraries", - href: "#", + href: "/docs/tutorials", icon: "client_lib", children: [ - { label: "JavaScript", href: "#" }, - { label: "Python", href: "#" }, - { label: "PHP", href: "#" }, - { label: "Go", href: "#" }, + { label: "JavaScript", href: "/docs/tutorials/get-started/get-started-javascript" }, + { label: "Python", href: "/docs/tutorials/get-started/get-started-python" }, + { label: "PHP", href: "/docs/tutorials/get-started/get-started-php" }, + { label: "Go", href: "/docs/tutorials/get-started/get-started-go" }, ], }, ], @@ -61,44 +61,44 @@ export const useCasesSubmenuData: { left: [ { label: "Payments", - href: "/use-cases/payments", + href: "/docs/use-cases/payments", icon: "payments", children: [ - { label: "Direct XRP Payments", href: "/use-cases/payments/direct-xrp-payments" }, - { label: "Cross-currency Payments", href: "/use-cases/payments/cross-currency-payments" }, - { label: "Escrow", href: "/use-cases/payments/escrow" }, - { label: "Checks", href: "/use-cases/payments/checks" }, + { label: "Direct XRP Payments", href: "/docs/use-cases/payments/direct-xrp-payments" }, + { label: "Cross-currency Payments", href: "/docs/use-cases/payments/cross-currency-payments" }, + { label: "Escrow", href: "/docs/use-cases/payments/escrow" }, + { label: "Checks", href: "/docs/use-cases/payments/checks" }, ], }, { label: "Tokenization", - href: "/use-cases/tokenization", + href: "/docs/use-cases/tokenization", icon: "tokenization", children: [ - { label: "Stablecoin", href: "/use-cases/tokenization/stablecoin" }, - { label: "NFT", href: "/use-cases/tokenization/nft" }, + { label: "Stablecoin", href: "/docs/use-cases/tokenization/stablecoin" }, + { label: "NFT", href: "/docs/use-cases/tokenization/nft" }, ], }, ], right: [ { label: "Credit", - href: "/use-cases/credit", + href: "/docs/use-cases/credit", icon: "credit", children: [ - { label: "Lending", href: "/use-cases/credit/lending" }, - { label: "Collateralization", href: "/use-cases/credit/collateralization" }, - { label: "Sustainability", href: "/use-cases/credit/sustainability" }, + { label: "Lending", href: "/docs/use-cases/credit/lending" }, + { label: "Collateralization", href: "/docs/use-cases/credit/collateralization" }, + { label: "Sustainability", href: "/docs/use-cases/credit/sustainability" }, ], }, { label: "Trading", - href: "/use-cases/trading", + href: "/docs/use-cases/trading", icon: "trading", children: [ - { label: "DEX", href: "/use-cases/trading/dex" }, - { label: "Permissioned Trading", href: "/use-cases/trading/permissioned-trading" }, - { label: "AMM", href: "/use-cases/trading/amm" }, + { label: "DEX", href: "/docs/use-cases/trading/dex" }, + { label: "Permissioned Trading", href: "/docs/use-cases/trading/permissioned-trading" }, + { label: "AMM", href: "/docs/use-cases/trading/amm" }, ], }, ], diff --git a/community/developer-funding.page.tsx b/community/developer-funding.page.tsx index a1d217be31..58a0c817d0 100644 --- a/community/developer-funding.page.tsx +++ b/community/developer-funding.page.tsx @@ -1,414 +1,271 @@ import * as React from "react"; -import { useThemeHooks } from '@redocly/theme/core/hooks'; -import { Link } from '@redocly/theme/components/Link/Link'; +import { useThemeHooks } from "@redocly/theme/core/hooks"; +import { HeaderHeroSplitMedia } from "shared/sections/HeaderHeroSplitMedia/HeaderHeroSplitMedia"; +import { + CarouselFeatured, + type CarouselSlide, +} from "shared/patterns/CarouselFeatured/CarouselFeatured"; +import { LogoSquareGrid } from "shared/sections/LogoSquareGrid"; +import FeaturedVideoHero from "shared/sections/FeaturedVideoHero/FeaturedVideoHero"; +import { LinkTextDirectory } from "shared/sections/LinkTextDirectory/LinkTextDirectory"; export const frontmatter = { seo: { - title: 'Developer Funding', - description: "If you’re a software developer or team looking to build your next project or venture on the XRP Ledger (XRPL), there are a number of opportunities to fund your next innovation.", - } + title: "Developer Funding", + description: + "Access grants, programs, and tailored support to build the next wave of blockchain innovation on the XRP Ledger.", + }, }; -false; - -const target = { prefix: "" }; // TODO: fixme - export default function Funding() { const { useTranslate } = useThemeHooks(); const { translate } = useTranslate(); + const carouselSlides: CarouselSlide[] = [ + { + id: "xrpl-grants-accelerator", + heading: translate("Explore XRPL Funding and Builders Programs"), + features: [ + { + title: translate("XRPL Grants & XRPL Accelerator"), + description: ( + <> + {translate( + "Fueling innovation across DeFi, tokenization, and payments." + )} +
+
+ {translate("→ Up to $200K in milestone-based funding")} +
+ {translate("→ Open to global teams building with XRPL")} +
+ {translate("→ Focused on DeFi, RWA, payments, trade finance")} +
+ {translate("→ Grants available for MVPs")} +
+ {translate("→ Unified application for all XRPL programs")} +
+ {translate( + "→ A 12-week, hybrid accelerator program supporting startups and institutional builders." + )} + + ), + }, + ], + buttons: [ + { label: translate("Access Now"), href: "https://xrplgrants.org/" }, + ], + imageSrc: require("../static/img/bds-2026/community-developer-funding-carousel-1.jpg"), + imageAlt: translate("XRPL Grants and Accelerator"), + }, + { + id: "xrpl-student-builder-residency", + heading: translate("Explore XRPL Funding and Builders Programs"), + features: [ + { + title: translate("XRPL Student Builder Residency"), + description: ( + <> + {translate( + "Inviting highly motivated University Builders from technical disciplines to build on the XRPL in a 4-week accelerated learning program." + )} +
+
+ {translate("→ Deploy and scale high-impact dApps on the XRPL")} +
+ {translate( + "→ Engage in one-on-one mentorship with expert blockchain developers" + )} +
+ {translate( + "→ Expand your network within the XRPL community and beyond" + )} + + ), + }, + ], + buttons: [ + { + label: translate("Access Now"), + href: "https://xrpl.org/community/ambassadors", + }, + ], + imageSrc: require("../static/img/bds-2026/community-developer-funding-carousel-2.jpg"), + imageAlt: translate("XRPL Student Builder Residency"), + }, + { + id: "xrpl-commons", + heading: translate("Explore XRPL Funding and Builders Programs"), + features: [ + { + title: translate("XRPL Commons"), + description: ( + <> + {translate( + "Supporting the global XRPL community through education, innovation, and social impact." + )} +
+
+ {translate("→ In-person builder support at XRPL Commons hub")} +
+ {translate( + "→ Programming for startups, researchers, NGOs, and investors" + )} +
+ {translate( + "→ Partnerships with universities and corporations underway" + )} +
+ →{" "} + + {translate("The Aquarium Residency")} + {" "} + {translate("- 12-week onsite entrepreneurial program in Paris")} +
+ →{" "} + {translate("GLOW")}{" "} + {translate( + "– rewards program for recognizing developer contributions to the XRPL" + )} + + ), + }, + ], + buttons: [ + { + label: translate("Access Now"), + href: "https://www.xrpl-commons.org/", + }, + ], + imageSrc: require("../static/img/bds-2026/community-developer-funding-carousel-3.jpg"), + imageAlt: translate("XRPL Commons"), + }, + ]; + return ( -
-
-
-
-

- {translate("XRPL Developer Funding Programs")} -

-
{translate("Project Resources")}
-
-
-
-
-
-
-

- {translate( - "Explore funding opportunities for developers and teams" - )} -

-
{translate("Funding Overview")}
-
-

- {translate( - "If you’re a software developer or team looking to build your next project or venture on the XRP Ledger (XRPL), there are a number of opportunities to fund your next innovation." - )} -

-
-
- {/* Hackathons */} -
- {/* flex. Col for mobile. Row for large. on large align content to the center */} -
-
-
-

{translate("XRPL Hackathons")}

-
{translate("Join an Event")}
-
-

- {translate( - "Hackathons are open to all developers to explore and invent a project on the XRP Ledger. Visit the events page for updates on upcoming hackathons." - )} -

-
- - {translate("See Upcoming Events")} - -
-
-
-
- {/* funding list */} -
-
- user -
-
{translate("Best for")}
-

- {translate( - "Software developers and teams building directly on the XRP Ledger" - )} -

-
-
- {/* Hide on large */} -
- book -
-
{translate("Required")}
-

{translate("Some coding experience")}

-
-
-
- arrow -
-
{translate("Level")}
-

{translate("XRPL beginner to advanced developers")}

-
-
- {/* Hide on large */} -
- dollar sign -
-
{translate("Funding Levels")}
-

{translate("Prize money and awards")}

-
-
-
- {/* end col 1 */} - {/* Show on large */} -
-
-
- book -
-
{translate("Required")}
-

{translate("Some coding experience")}

-
-
-
-
- dollar sign -
-
{translate("Funding Levels")}
-

{translate("Prize money and awards")}

-
-
-
- {/* end col 2 */} -
-
-
- - {translate("See Upcoming Events")} - -
-
-
- {/* Eligibility */} -
- {/* flex. Col for mobile. Row for large. on large align content to the center */} -
-
-
-

{translate("XRPL Grants")}

-
- {translate("Fund Your Project")} -
-
-

- {translate( - "Developer grants for projects that contribute to the growing XRP Ledger community." - )} -

-
- - {translate("Past awardees include:")} - -
-
- -
-
-
- {/* funding list */} -
-
- user -
-
{translate("Best for")}
-

- {translate( - "Software developers, teams, and start-ups building directly on the XRP Ledger" - )} -

-
-
- {/* Hide on large */} -
- book -
-
{translate("Required")}
-

- •{" "} - {translate("Coding experience")} -
- •{" "} - {translate("Github repository")} -
- •{" "} - {translate("Project narrative/description")} -
- •{" "} - {translate("At least one developer on the core team")} -
- •{" "} - {translate("Budget and milestones")} -

-
-
-
- arrow -
-
{translate("Level")}
-

- {translate("XRPL intermediate to advanced developers")} -

-
-
- {/* Hide on large */} -
- dollar sign -
-
{translate("Funding Levels")}
-

{translate("$10,000 - $200,000")}

-
-
-
- {/* end col 1 */} - {/* Show on large */} -
-
-
- book -
-
{translate("Required")}
-

- •{" "} - {translate("Coding experience")} -
- •{" "} - {translate("Github repository")} -
- •{" "} - {translate("Project narrative/description")} -
- •{" "} - {translate("At least one developer on the core team")} -
- •{" "} - {translate("Budget and milestones")} -

-
-
-
-
- dollar sign -
-
{translate("Funding Levels")}
-

{translate("$10,000 - $200,000")}

-
-
-
- {/* end col 2 */} -
-
- -
-
- {/* Accelerator */} -
- {/* flex. Col for mobile. Row for large. on large align content to the center */} -
-
-
-

{translate("XRPL Accelerator")}

-
- {translate("Advance your project")} -
-
-

- {translate( - "12-week program for entrepreneurs building on the XRP Ledger to scale their projects into thriving businesses." - )} -

- -
-
-
- {/* funding list */} -
-
- user -
-
{translate("Best for")}
-

- {translate( - "Start-ups building scalable products on XRPL that can capture a large market opportunity" - )} -

-
-
- {/* Hide on large */} -
- book -
-
{translate("Required")}
-

- •{" "} - {translate("Strong founding team")} -
- •{" "} - {translate("Bold, ambitious vision")} -
- •{" "} - {translate("Ideally an MVP and monetization strategy")} -

-
-
-
- arrow -
-
{translate("Level")}
-

- •{" "} - {translate("XRPL advanced developers")} -
- •{" "} - {translate("Business acumen")} -

-
-
- {/* Hide on large */} -
- dollar sign -
-
{translate("Funding Levels")}
-

- {translate( - "$50,000 (grant) + pitch for venture funding" - )} -

-
-
-
- {/* end col 1 */} - {/* Show on large */} -
-
-
- book -
-
{translate("Required")}
-

- •{" "} - {translate("Strong founding team")} -
- •{" "} - {translate("Bold, ambitious vision")} -
- •{" "} - {translate( - "Ideally an MVP and monetization strategy" - )} -

-
-
-
-
- dollar sign -
-
{translate("Funding Levels")}
-

- {translate( - "$50,000 (grant) + pitch for venture funding" - )} -

-
-
-
- {/* end col 2 */} -
-
- -
-
+
+ + + + + + + + +
); } diff --git a/community/index.page.tsx b/community/index.page.tsx index f8d2dc0a9f..45e3010dc1 100644 --- a/community/index.page.tsx +++ b/community/index.page.tsx @@ -1,1122 +1,155 @@ -import React, { useEffect, useState } from "react"; import { useThemeHooks } from "@redocly/theme/core/hooks"; -import moment from "moment"; -import { Link } from "@redocly/theme/components/Link/Link"; - -const infoSession = require("../static/img/events/InfoSessions.png"); +import { HeaderHeroSplitMedia } from "shared/sections/HeaderHeroSplitMedia/HeaderHeroSplitMedia"; +import { LinkTextDirectory } from "shared/sections/LinkTextDirectory/LinkTextDirectory"; +import { CardsFeatured } from "shared/sections/CardsFeatured/CardsFeatured"; +import { FeatureTwoColumn } from "shared/sections/FeatureTwoColumn/FeatureTwoColumn"; export const frontmatter = { seo: { - title: "Community", + title: "XRPL Community", description: - "The XRP Ledger (XRPL) is a community-driven public blockchain. Here’s how you can get involved.", + "Build. Connect. Contribute. Wherever you are in your journey, the blockchain community is here to support, collaborate, and grow with you.", }, }; -const amaImage = require("../static/img/events/AMAs.png"); -const hackathon = require("../static/img/events/Hackathons.png"); -const conference = require("../static/img/events/Conference.png"); -const zone = require("../static/img/events/XRPLZone.png"); -const brazil = require("../static/img/events/event-meetup-brazil.png"); -const infoSession2 = require("../static/img/events/xrpl-builder-office-hours-02.png"); -const infoSession3 = require("../static/img/events/xrpl-builder-office-hours-03.png"); -const infoSession4 = require("../static/img/events/xrpl-builder-office-hours-04.png"); -const italyHackathon = require("../static/img/events/italy-hackathon.png"); -const events = [ - { - name: "New Horizon: Innovate Without Limits: New Horizons Await", - description: - "Join our EVM-compatible chain launch for a chance to win $50,000 in prizes! Unleash your creativity in DeFi and NFTs, with judging criteria focused on novelty, impact, and community engagement.", - type: "hackathon", - link: "https://newhorizon.devpost.com/", - location: "Virtual", - date: "October 19, 2023 - December 22, 2023", - image: hackathon, - end_date: "December 22, 2023", - start_date: "October 19, 2023", - }, - { - name: "XRPL Community Report Launch Party", - description: - "Celebrate the XRPL Community Report launch at 7pm! Join blockchain enthusiasts, connect with experts, and discover opportunities in the XRP Ledger ecosystem. Limited space available, so register now for a night of celebration and networking!", - type: "meetup", - link: "https://www.eventbrite.fr/e/billets-xrpl-community-report-launch-party-753788370307", - location: "Paris, France", - date: "November 28, 7pm - 9pm", - image: require("../static/img/events/paris.png"), - end_date: "November 28, 2023", - start_date: "November 28, 2023", - }, - { - name: "XRPL Grants Info Session: Decentralized Exchange (DEX) Focused", - description: - "Watch the recorded information session and Q&A on applying to XRPL Grants Wave 7. This session will provide a general overview of the XRPL Grants application for Wave 7, with a focus on Decentralized Exchange (DEX) projects.", - type: "info-session", - link: "https://www.youtube.com/watch?v=BbGu0QC5WEE", - location: "Virtual - Zoom", - date: "September 06, 2023", - image: infoSession, - end_date: "September 06, 2023", - start_date: "September 06, 2023", - }, - { - name: "XRPL Developers Reddit AMA: Real World Assets", - description: - "Join us for a live chat on Reddit and learn more about how developers are building real world assets with confidence on the XRP Ledger.", - type: "ama", - link: "https://xrplresources.org/rwa-ama?utm_source=web&utm_medium=web&utm_campaign=bwc", - location: "Virtual - Reddit", - date: "October 17, 2023", - image: amaImage, - end_date: "October 17, 2023", - start_date: "October 17, 2023", - }, - { - name: "XRP Ledger Zone ETHDenver", - description: - "XRPL Zone: your all-in-one location for creating and collaborating on XRP Ledger (XRPL) projects. Details coming soon!", - type: "zone", - link: "http://xrplzone-ethdenver.splashthat.com", - location: "Denver, Colorado", - date: "February 27, 2024", - image: zone, - end_date: "February 27, 2024", - start_date: "February 27, 2024", - }, - { - name: "XRPL Developers Discord AMA: Apex 2024", - description: - "Join the DevRel team at Ripple to learn more about APEX 2024.", - type: "ama", - link: "https://discord.gg/gszzRTxV?event=1215341725825110089", - location: "XRPL Developers Discord", - date: "March 13, 2024 13:00 EST", - image: amaImage, - start_date: "March 13, 2024", - end_date: "March 13, 2024", - }, - { - name: "Paris Blockchain Week", - description: - "Paris Blockchain Week is Europe's biggest blockchain & digital assets event that covers all aspects of blockchain technology.", - type: "conference", - link: "https://www.parisblockchainweek.com/", - location: "Paris, France", - date: "April 9 - 12, 2024", - image: conference, - end_date: "April 12, 2024", - start_date: "April 9, 2024", - }, - { - name: "Consensus", - description: - "Join us at Consensus! This event is the world's largest, longest-running and most influential gathering that brings together all sides of the cryptocurrency, blockchain and Web3 community.", - type: "conference", - link: "https://consensus.coindesk.com/?utm_campaign=&utm_content=c24&utm_medium=sponsored&utm_source=XRPLEventsPage%20&utm_term=organic", - location: "Austin, Texas", - date: "May 29 - June 1, 2024", - image: conference, - end_date: "June 1, 2024", - start_date: "May 29, 2024", - }, - { - name: "EasyA Ripple Hackathon", - description: - "Join the XRPL community at the Ripple x EasyA Hackathon in Amsterdam, where startups can compete for a $20,000 prize and a chance to present at the prestigious APEX Conference alongside industry leaders. Secure your spot now! ", - type: "hackathon", - link: "https://www.eventbrite.co.uk/e/easya-x-ripple-apex-hackathon-win-20000-tickets-882724261027?aff=oddtdtcreator", - location: "Amsterdam", - date: "June 8 - 9, 2024", - image: hackathon, - start_date: "June 8, 2024", - end_date: "June 9, 2024", - }, - { - name: "APEX 2024: The XRPL Developer Summit", - description: - "Apex XRPL Developer Summit is the annual event where developers, contributors, and thought leaders come together to learn, build, share, network, and celebrate all things XRP Ledger.", - type: "conference", - link: "http://apexdevsummit.com", - location: "Amsterdam", - date: "June 11 - 13, 2024", - image: conference, - end_date: "June 13, 2024", - start_date: "June 11, 2024", - }, - { - name: "SwissHacks", - description: - "Transform Fintech with XRPL at SwissHacks 2024! Prototype and collaborate with fellow builders to reinvent finance for a brighter future", - type: "hackathon", - link: "https://airtable.com/app61tk91vkuwKhGx/pagCN29Br8RdxTvp7/form", - location: "Zurich", - date: "June 28 - 30, 2024", - image: hackathon, - start_date: "June 28, 2024", - end_date: "June 30, 2024", - }, - { - name: "XRPL Meetup Blockchain Rio", - description: - "Get ready to kick off Blockchain Rio with a bang at the XRP Ledger Dev Meetup! ​Hosted by the the XRP Ledger team, this warm-up event is the perfect chance for devs and builders to connect, share ideas, and get hyped for the main event. Expect a night filled with great conversations, delicious drinks, and the vibrant energy of Rio de Janeiro. ​Don't miss out on this fantastic opportunity to network and have a blast with fellow tech enthusiasts. See you there!", - type: "meetup", - link: "https://lu.ma/4uxpkd11", - location: "Rio de Janeiro", - date: "July 23, 2024", - image: brazil, - start_date: "July 23, 2024", - end_date: "July 23, 2024", - }, - { - name: "XRPL Builder Office Hours", - description: - "XRPL Builder Office Hours is an open forum hosted monthly by Developer Advocates to answer technical and business questions from community members.", - type: "info-session", - link: "https://ripple.zoom.us/meeting/register/tJMscOCsrDoiHNUN6hZLpFVR69OcfG9rXtIA#/registration", - location: "Virtual - Zoom", - date: "August 23, 2024", - image: infoSession, - start_date: "August 23, 2024", - end_date: "August 23, 2024", - }, - { - name: "XRP Ledger Hackathon Seoul 2024", - description: - "Calling all developers in Korea or attending Korea Blockchain Week! Join us for an exclusive pre-KBW meetup in Gangnam, Seoul! Be part of an exciting opportunity to collaborate with fellow builders leveraging the XRP Ledger. Don’t miss this chance to connect with industry peers, explore local funding initiatives, and fuel your projects with new insights just before the main KBW event!", - type: "hackathon", - link: "https://lu.ma/1viq6evg", - location: "Seoul, South Korea", - date: "August 31 - September 1, 2024", - image: hackathon, - start_date: "August 31, 2024", - end_date: "September 1, 2024", - }, - { - name: "XRPL Zone Seoul", - description: - "Join us at XRPL Zone Seoul where developers, corporates, fintechs, banks, VCs, academia, and the XRP community come together under one roof for the biggest XRPL event in South Korea!", - type: "zone", - link: "https://ripple.swoogo.com/xrpl-zone-seoul", - location: "Seongdong-su, Seoul", - date: "September 4, 2024", - image: require('../static/img/events/event-meetup-zone-day.png'), - start_date: "September 4, 2024", - end_date: "September 4, 2024", - }, - { - name: "XRPL Zone Seoul After Hours", - description: - "Celebrate with the XRP Community during Korea Blockchain Week! Don't miss this opportunity to mingle with the vibrant XRP community, visionary XRPL developers, trailblazing innovators, and influential investors.", - type: "meetup", - link: "https://lu.ma/mbg067j3", - location: "Seongdong-su, Seoul", - date: "September 4, 2024", - image: require('../static/img/events/event-meetup-zone-night.png'), - start_date: "September 4, 2024", - end_date: "September 4, 2024", - }, - { - name: "XRP Community Day Tokyo", - description: - "Join senior execs from Ripple, prominent Japanese institutions, and the XRP community for a day of inspiration, networking and insights.", - type: "meetup", - link: "https://events.xrplresources.org/toyko-community-2024", - location: "Shinagawa, Tokyo", - date: "September 6, 2024", - image: require('../static/img/events/event-meetup-tokyo-day.png'), - start_date: "September 6, 2024", - end_date: "September 6, 2024", - }, - { - name: "XRP Community Night Tokyo", - description: - "​Celebrate with the XRP Community in Tokyo! Don't miss this opportunity to mingle with the vibrant XRP community, visionary developers, trailblazing innovators, and influential VCs.", - type: "meetup", - link: "https://lu.ma/84do37p7", - location: "Shinagawa, Tokyo", - date: "September 6, 2024", - image: require('../static/img/events/event-meetup-tokyo-night.png'), - start_date: "September 6, 2024", - end_date: "September 6, 2024", - }, - { - name: "Chicago XRP Ledger Meet Up", - description: - "Hey Chicago XRP Ledger community! We’re hosting a meetup soon—come hang out, share ideas, and talk all things XRPL. Would love to see you there!", - type: "meetup", - link: "https://lu.ma/74dulzff", - location: "Chicago, IL", - date: "September 12, 2024", - image: require('../static/img/events/chicago-meetup.png'), - start_date: "September 12, 2024", - end_date: "September 12, 2024", - }, - { - name: "San Francisco XRP Ledger Meet Up", - description: - "Hello San Francisco XRP Ledger community! We're hosting a meetup soon with a focus on ZK research. Excited to see you soon!", - type: "meetup", - link: "https://lu.ma/evdklm4r", - location: "San Francisco, California", - date: "September 26, 2024", - image: require('../static/img/events/sf-meetup.jpg'), - start_date: "September 26, 2024", - end_date: "September 26, 2024", - }, - { - name: "XRPL Builder Office Hours", - description: - "XRPL Builder Office Hours is an open forum hosted monthly by Developer Advocates to answer technical and business questions from community members.", - type: "info", - link: "https://ripple.zoom.us/meeting/register/tJMscOCsrDoiHNUN6hZLpFVR69OcfG9rXtIA", - location: "Virtual - Zoom", - date: "September 27, 2024", - image: infoSession2, - start_date: "September 27, 2024", - end_date: "September 27, 2024", - }, - { - name: "AI Fund - XRPL Grants Info Session", - description: - "Join our info session to learn about our new XRPL Grants' AI Fund, designed to support innovative projects that leverage artificial intelligence in the XRPL ecosystem.", - type: "info", - link: "https://ripple.zoom.us/webinar/register/WN__SNDW7LTSM29h5NIpvXFvg#/registration", - location: "Virtual - Zoom", - date: "October 2, 2024", - image: infoSession, - start_date: "October 2, 2024", - end_date: "October 2, 2024", - }, - { - name: "XRPL Meetup @ Permissionless III - by xrpcafe", - description: - "Get ready for an unforgettable evening at the XRPL Meetup - Permissionless III in the heart of Salt Lake City! Join us on October 10th from 6 PM to 9 PM at the lively Squatters Pub Brewery.", - type: "meetup", - link: "https://lu.ma/71ag93un?locale=en-GB", - location: "Salt Lake City, Utah", - date: "October 10, 2024", - image: require('../static/img/events/salt-lake-city.jpg'), - start_date: "October 10, 2024", - end_date: "October 10, 2024", - }, - { - name: "XRPL Builder Office Hours", - description: - "XRPL Builder Office Hours is an open forum hosted monthly by Developer Advocates to answer technical and business questions from community members.", - type: "info", - link: "https://ripple.zoom.us/meeting/register/tJMscOCsrDoiHNUN6hZLpFVR69OcfG9rXtIA", - location: "Virtual - Zoom", - date: "October 25, 2024", - image: infoSession3, - start_date: "October 25, 2024", - end_date: "October 25, 2024", - }, - { - name: "XRPL Meetup NYC", - description: - "Get ready for an unforgettable evening at the XRPL Meetup NYC!", - type: "meetup", - link: "https://xrpl.at/Aquarium-XRPL-Residency-DemoDay4", - location: " New York, New York", - date: "November 19, 2024", - image: require('../static/img/events/new-york.jpeg'), - end_date: "November 19, 2024", - start_date: "November 19, 2024", - }, - { - name: "XRPL Builder Office Hours", - description: - "XRPL Builder Office Hours is an open forum hosted monthly by Developer Advocates to answer technical and business questions from community members.", - type: "info", - link: "https://ripple.zoom.us/meeting/register/tJMscOCsrDoiHNUN6hZLpFVR69OcfG9rXtIA", - location: "Virtual - Zoom", - date: "November 22, 2024", - image: infoSession4, - start_date: "November 22, 2024", - end_date: "November 22, 2024", - }, - { - name: "XRP Ledger Meetup Cannes", - description: - "Join us in Cannes for a special evening from 6:00 PM, focused on Bridging the XRPL and EVM Ecosystems. ​Hosted in collaboration by XRPL Commons, Ripple, and Peersyst, this XRPL meetup brings the community together for insightful conversations and meaningful connections.", - type: "meetup", - link: "https://lu.ma/q6dar9io", - location: "Cannes, France", - image: require("../static/img/events/commons-cannes.png"), - date: "June 30, 2025", - start_date: "June 30, 2025", - end_date: "June 30, 2025", - }, - { - name: "EasyA x Flare Harvard Hackathon", - description: - "Collaborate, learn, and connect with fellow blockchain innovators and the Flare Networks team at Harvard.", - type: "hackathon", - link: "https://www.easya.io/events/easya-x-flare-harvard-hackathon", - location: "Boston, MA", - date: "September 20 - 21, 2025", - image: hackathon, - start_date: "September 20, 2025", - end_date: "September 21, 2025", - }, - { - name: "XRP Seoul Summit 2025", - description: - "Join XRP Seoul 2025, Asia’s largest XRP & Web3 conference, and explore the future of the industry.", - type: "conference", - link: "https://xrp-seoul.com/", - location: "Seoul, South Korea", - date: "September 21, 2025", - image: conference, - end_date: "September 21, 2025", - start_date: "September 21, 2025", - }, - { - name: "IXH25 - Italian XRPL Hackathon 2025", - description: - "A 3-day hackathon in Rome on cryptography and blockchain, featuring tracks on advanced cryptography and XRPL applications. Organized by XRPL Commons and partners, the event offers a €10,000 prize pool, includes seminars, coding and pitch sessions, and provides support for students.", - type: "hackathon", - link: "https://luma.com/llwjrmcx", - location: "Rome, Italy", - date: "November 07, 2025", - image: italyHackathon, - end_date: "November 08, 2025", - start_date: "November 07, 2025", - }, - { - name: "Vega House Hackathon", - description: - "Vega House Hackathon: Compete in two XRPL tracks—Ledger Track to build MVP financial services using payments, tokenization, RLUSD, or AMM/DEX flows, and Exploration Track to create innovative apps leveraging XRPL features and upcoming amendments. Prizes total $25,000, including track awards and bounties for best use of new XRPL features.", - type: "hackathon", - link: "https://xrpl.vegahacks.xyz/", - location: "Virtual", - date: "October 01 - November 14, 2025", - image: italyHackathon, - end_date: "November 14, 2025", - start_date: "October 01, 2025", - }, - { - name: "XRPL Hackathon @ Blockchain Kaigi 2025", - description: - "This is a 3-week online hackathon culminating in demos and an awards ceremony to be held in conjunction with Blockchain Kaigi 2025 in Mumbai, India.", - type: "hackathon", - link: "https://luma.com/ypj8ecj0", - location: "Online (with demos at IIT Bombay)", - date: "November 14 - December 06, 2025", - image: require("../static/img/events/hackathon-kaigi.png"), - start_date: "November 14, 2025", - end_date: "December 06, 2025", - }, - { - name: "XRP Community Day EMEA", - description: - "Join the EMEA XRP community on February 11, 2026 for XRP Community Day, a global virtual event celebrating innovation, utility, and growth across the XRP ecosystem.", - type: "meetup", - link: "https://luma.com/w118fmkh?utm_source=xrplorg", - location: "Virtual - X Spaces", - date: "February 11, 2026", - image: require("../static/img/events/emea_xrplorg.png"), - start_date: "February 11, 2026", - end_date: "February 11, 2026", - }, - { - name: "XRP Community Day Americas", - description: - "​Join the Americas XRP community on February 11, 2026 for XRP Community Day, a global virtual event celebrating innovation, utility, and growth across the XRP ecosystem.", - type: "meetup", - link: "https://luma.com/1powvqnc?utm_source=xrplorg", - location: "Virtual - X Spaces", - date: "February 11, 2026", - image: require("../static/img/events/amer_xrplorg.png"), - start_date: "February 11, 2026", - end_date: "February 11, 2026", - }, - { - name: "XRP Community Day APAC", - description: - "​Join the APAC XRP community on February 12 for XRP Community Day, a global virtual event celebrating innovation, utility, and growth across the XRP ecosystem.", - type: "meetup", - link: "https://luma.com/ckzg3l3r?utm_source=xrplorg", - location: "Virtual - X Spaces", - date: "February 12, 2026", - image: require("../static/img/events/apac_xrplorg.png"), - start_date: "February 12, 2026", - end_date: "February 12, 2026", - }, - { - name: "Building On The XRP Ledger", - description: - "This 2-day intensive hands-on training is designed for developers who are curious to learn about XRP Ledger. Meet your peers, share insights, and join a community of builders.", - type: "meetup", - link: "https://luma.com/lxb5ttsc", - location: "Paris, France", - date: "January 26 - 27, 2026", - image: require("../static/img/events/building-xrpl.png"), - start_date: "January 26, 2026", - end_date: "January 27, 2026", - }, - { - name: "XRPL Meetup in London", - description: - "Calling all blockchain and XRP Ledger enthusiasts in London! Join XRPL Meetups to share knowledge, build real-life connections, and foster communities centered around blockchain and XRP Ledger. We're establishing local “XRPL Hubs” across Europe, and we want you to be a part of it!", - type: "meetup", - link: "https://luma.com/xshnm19t", - location: "London, UK", - date: "February 18, 2026", - image: require("../static/img/events/meetup-london.png"), - start_date: "February 18, 2026", - end_date: "February 18, 2026", - }, - { - name: "XRP Community Night Denver", - description: - "Attending ETHDenver? ​Join us for an evening with the XRP community in Denver. Connect with the users, builders and projects innovating with and utilizing XRP.", - type: "meetup", - link: "https://luma.com/chz145tf?utm_source=xprlorg", - location: "Denver, CO", - date: "February 18, 2026", - image: require("../static/img/events/denver_xrplorg.png"), - start_date: "February 18, 2026", - end_date: "February 18, 2026", - }, -]; +const HUBSPOT_NEWSLETTER_FORM = + "https://share.hsforms.com/18zNvJDR4QbObGPLDh3n5Bw4vgrs"; -const findNearestUpcomingEvent = (events) => { - let nearestEvent = null; - let nearestDateDiff = Infinity; - let index = 0; - events.forEach((event, i) => { - const eventStartDate = moment(event.start_date, "MMMM DD, YYYY"); - const currentDate = moment(); - const diff = eventStartDate.diff(currentDate, "days"); - - if (diff >= 0 && diff < nearestDateDiff) { - nearestEvent = event; - nearestDateDiff = diff; - index = i; - } - }); - - return { nearestEvent, nearestDateDiff, index }; -}; - -const XrplEventsAndCarouselSection = ({ events }) => { +export default function Community() { const { useTranslate } = useThemeHooks(); const { translate } = useTranslate(); - // State variables for the nearest event - const [nearestEventInfo, setNearestEventInfo] = useState({ - nearestEvent: null, - nearestDateDiff: null, - index: 0, - }); - - // State for the current index in the carousel - const [currentIndex, setCurrentIndex] = useState(0); - - useEffect(() => { - const { nearestEvent, nearestDateDiff, index } = findNearestUpcomingEvent(events); - setNearestEventInfo({ nearestEvent, nearestDateDiff, index }); - setCurrentIndex(index); - }, [events]); - - const updateCarousel = () => { - const prevEvent = events[currentIndex - 1] || null; - const currentEvent = events[currentIndex]; - const nextEvent = events[currentIndex + 1] || null; - - return { - prevEvent, - currentEvent, - nextEvent, - }; - }; - - const handlePrev = () => { - if (currentIndex > 0) { - setCurrentIndex((prevIndex) => prevIndex - 1); - } - }; - - const handleNext = () => { - if (currentIndex < events.length - 1) { - setCurrentIndex((prevIndex) => prevIndex + 1); - } - }; - - const { prevEvent, currentEvent, nextEvent } = updateCarousel(); - return ( - <> -
-
-
-
{translate("XRPL Events")}
-

- {translate( - "community.index.event.h4part1", - "Check out global events hosted " - )} -
- {translate( - "community.index.event.h4part2", - "by the XRPL community" - )} -

-
-

- {translate( - "Meet the XRPL community at meetups, hackathons, blockchain conferences, and more across global regions." - )} -

- - {translate("View All Events")} - -
- {!!nearestEventInfo.nearestEvent && ( -
-

{translate("UPCOMING EVENT")}

-
- {nearestEventInfo.nearestDateDiff} -
-
{translate("days")}
-
-
- {translate(nearestEventInfo.nearestEvent?.name)} -
-

- - {nearestEventInfo.nearestEvent?.date} -

-

- - {nearestEventInfo.nearestEvent?.location} -

-
+
+ - {translate("View All Events")} - -
+ primaryCta={{ + label: translate("Get Started Now"), + href: HUBSPOT_NEWSLETTER_FORM, + }} + media={{ + src: require("../static/img/bds-2026/community-hero-media.jpg"), + alt: translate("Build. Connect. Contribute."), + }} + /> -
-
- Left Event Image -
- Featured Event Image - currentEvent && window.open(currentEvent.link, "_blank") - } - /> -
- - {currentEvent ? currentEvent.name : ""} - -
- - {currentEvent ? currentEvent.location : ""} -
-
- - {currentEvent ? currentEvent.date : ""} -
-
-
- Right Event Image -
+ -
- - -
-
- - ); -}; + -const CommunityPage: React.FC = () => { - const { useTranslate } = useThemeHooks(); - const { translate } = useTranslate(); - return ( -
- {/* Community Heading Section */} -
-
- People sitting at a conference - Person speaking at a conference - Person sitting and speaking - People chatting - Person speaking at Apex -
- -
-
- Down Arrow -

- {translate("community.index.h1part1", "A Global Blockchain")} -
- {translate("community.index.h1part2", "Community of ")} - - {translate("community.index.h1part3", "Builders")} - -
- {translate("community.index.h1part4", "and Innovators")} -

-
{translate("XRPL Community")}
-
-
-
- {/* Community Table Section */} -
-

{translate("Join the Conversation")}

- - - - - - - - - - - - - - - - - - - - - - - -
- discord icon - - {translate( - "Join the XRPL Discord to connect and network with builders, validators, and cryptocurrency enthusiasts." - )} - - - - -
- twitter icon - - {translate( - "Follow @RippleXDev on X for the latest updates on the XRP Ledger ecosystem." - )} - - - - -
- youtube icon - - {translate( - "APEX 2025: View keynote sessions from the Apex 2025 where developers, entrepreneurs, and industry leaders come together to learn, build, and celebrate all things XRP Ledger." - )} - - - - -
- xrpl icon - - {translate( - "Explore DeFi-Island: A 3D open-source world on the XRPL testnet. Chat with residents, complete quests, and dive into this React.js-powered experience—all in your web browser." - )} - - - - -
-
- {/* XRPL Events Carousel Section */} - - {/* Community Funding Section */} -
- - {translate("Get Funding")} - -
-
-
- - {translate("funding been awarded")} - -
- $ - 13 - M+ -
-
-
-
- - {translate("teams awarded globally")} - -
- 120+ -
-
-
-
-
- - {translate("countries represented")} - -
- 28+ -
-
-
-
-
- - {translate("XRPL Developer Funding")} - -

- {translate("Funding Opportunities for Blockchain Businesses")} -

-

- {translate( - "If you're a software developer or team looking to build your next blockchain business on the XRP Ledger (XRPL), numerous funding opportunities like grants and hackathons await your innovation." - )} -

- - {translate("Get Funding")} - -
-
- {/* Community Spotlight Wrapper */} -
-
-
- {translate("XRPL Community Spotlight")} -
-

- {translate( - "Showcase your blockchain project, application, or product" - )} -

-

- {translate( - "Get featured on the Developer Reflections blog or Ecosystem page, and amplify your innovation within the blockchain community." - )} -

- - {translate("Submit Your Project")} - -
- -
-
-
- Blockdaemon -
-
-
Blockdaemon
-

- {translate( - "Your go-to independent blockchain infrastructure provider, offering secure and scalable blockchain services, including wallets, nodes, staking, protocols, and integrations for developers and institutions alike." - )} -

- - {translate("View Project")} - -
-
-
-
- XRPCafe -
-
-
XRPCafe
-

- {translate( - "A premier NFT marketplace dedicated to fostering mass adoption of the XRP Ledger." - )} -

- - {translate("View Project")} - -
-
-
-
- {/* Bottom Cards Section 2 cards */} -
-
-
-
- {translate("RippleX Bug Bounty Program")} -
-
- {translate("community.index.security.subtitle-1", "Contribute to the XRP Ledger's")} -
- {translate("community.index.security.subtitle-2", "Security")} -
-

- {translate( - "RippleX’s Bug Bounty, part of Ripple's 1 Billion XRP pledge, strengthens XRP Ledger security and supports its ecosystem." - )} -

- { - translate("community.index.security.description-1", "Use this program to report bugs in RippleX/rippled. Send a detailed report of a qualifying bug to ") - } - bugs@ripple.com - { - translate("community.index.security.description-2", " and use the ") - } - {translate("community.index.security.description-3", "Public Key.")} - { - translate("community.index.security.description-4", " ") - } -

-

-
- - {translate("Learn more")} - -
-
-
-
-
-
{translate("Report a Scam")}
-
- {translate( - "Report Scams to Safeguard Our Community" - )} -
-

- {translate( - "In an evolving industry where trust and security are critical, scams continue to impede progress in crypto and blockchain. Help mitigate scammers by reporting scams." - )} -

-
- - {translate("Report a Scam")} - -
-
-
-
{" "} - {/* Bottom Cards Section */} -
-
-
-
- {translate("Contribute to Consensus")} -
-
- {translate("Run an XRP Ledger network node")} -
-

- {translate( - "Thank you for your interest in contributing to XRP Ledger." - )} -

-
- - {translate("Networks and Servers")} - - - {translate("Join UNL")} - - - {translate("Install & Configure")} - - - {translate("Troubleshooting")} - -
-
-
-
-
-
{translate("XRPL Careers")}
-
- {translate( - "Discover your next career opportunity in the XRPL community" - )} -
-

- {translate( - "Teams across the XRPL community are looking for talented individuals to help build their next innovation." - )} -

- -
-
-
-
-
- {translate("Contribute to XRPL.org")} -
-
- {translate( - "A Community-Driven Resource for All Things XRP Ledger" - )} -
-

- {translate( - "Contribute to XRPL.org, the go-to resource for XRP Ledger. This open-source portal welcomes contributions from anyone for suggested changes." - )} -

-
- - {translate("Read Contributor Guidelines")} - -
-
-
-
{" "} +
); -}; - -export default CommunityPage; +} diff --git a/develop/index.page.tsx b/develop/index.page.tsx new file mode 100644 index 0000000000..e7f2fdb766 --- /dev/null +++ b/develop/index.page.tsx @@ -0,0 +1,320 @@ +import { useThemeHooks } from "@redocly/theme/core/hooks"; +import { HeaderHeroSplitMedia } from "shared/sections/HeaderHeroSplitMedia/HeaderHeroSplitMedia"; +import { CardsFeatured } from "shared/sections/CardsFeatured/CardsFeatured"; +import { StandardCardGroupSection } from "shared/sections/StandardCardGroupSection/StandardCardGroupSection"; +import { LogoSquareGrid } from "shared/sections/LogoSquareGrid"; +import { FeatureTwoColumn } from "shared/sections/FeatureTwoColumn/FeatureTwoColumn"; +import { LinkTextDirectory } from "shared/sections/LinkTextDirectory/LinkTextDirectory"; +import { FeatureSingleTopic } from "shared/sections/FeatureSingleTopic/FeatureSingleTopic"; + +export const frontmatter = { + seo: { + title: "XRPL Developer Portal", + description: + "Build on XRPL: everything you need to go from idea to launch—documentation, SDKs, code samples, tutorials, and tools to build real-world apps on a decentralized, enterprise-grade ledger.", + }, +}; + +export default function Develop() { + const { useTranslate } = useThemeHooks(); + const { translate } = useTranslate(); + + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/docs/index.page.tsx b/docs/index.page.tsx index 56cc48ccbb..35ddaefc9e 100644 --- a/docs/index.page.tsx +++ b/docs/index.page.tsx @@ -1,424 +1,480 @@ import * as React from 'react'; import { useThemeHooks } from '@redocly/theme/core/hooks'; -import { NavList } from "shared/components/nav-list"; -import { Link } from "@redocly/theme/components/Link/Link"; +import HeaderHeroPrimaryMedia from 'shared/sections/HeaderHeroPrimaryMedia/HeaderHeroPrimaryMedia'; +import { CarouselCardList } from 'shared/sections/CarouselCardList/CarouselCardList'; +import { CardsTextGrid } from 'shared/sections/CardsTextGrid/CardsTextGrid'; +import FeaturedVideoHero from 'shared/sections/FeaturedVideoHero/FeaturedVideoHero'; +import { LinkSmallGrid } from 'shared/sections/LinkSmallGrid/LinkSmallGrid'; +import { LinkTextDirectory } from 'shared/sections/LinkTextDirectory/LinkTextDirectory'; +import { FeatureTwoColumn } from 'shared/sections/FeatureTwoColumn/FeatureTwoColumn'; +import { SmallTilesSection } from 'shared/sections/SmallTilesSection/SmallTilesSection'; +import { CardsIconGrid } from 'shared/sections/CardsIconGrid/CardsIconGrid'; +import { StandardCardGroupSection } from 'shared/sections/StandardCardGroupSection/StandardCardGroupSection'; export const frontmatter = { seo: { title: 'XRP Ledger Documentation & Developer Resources', - description: "Explore XRP Ledger documentation and other blockchain developer resources needed to start building and integrating with the ledger.", - } + description: + 'Explore XRP Ledger documentation and other blockchain developer resources needed to start building and integrating with the ledger.', + }, }; -const recommendedPages = [ - { - description: 'Public API Methods', - link: '/docs/references/http-websocket-apis/public-api-methods/', - }, - { - description: 'Run a Validator', - link: '/docs/infrastructure/configuration/server-modes/run-rippled-as-a-validator/', - }, - { - description: 'Reserves', - link: '/docs/concepts/accounts/reserves/', - }, - { - description: 'Transaction Types', - link: '/docs/references/protocol/transactions/types/', - } -]; - -const useCases = [ - { - title: 'On-Chain Finance', - id: 'on-chain-finance-use-cases', - imgClass: 'wallet-illustration', - subItems: [ - { - description: 'Algorithmic Trading', - link: '/docs/use-cases/defi/algorithmic-trading/', - }, - { - description: 'List XRP as an Exchange', - link: '/docs/use-cases/defi/list-xrp-as-an-exchange/', - }, - { - description: 'Payment Types', - link: '/docs/concepts/payment-types/', - }, - ], - }, - { - title: 'Tokens', - id: 'token-use-cases', - imgClass: 'token-illustration', - subItems: [ - { - description: 'Stablecoin Issuer', - link: '/docs/use-cases/tokenization/stablecoin-issuer/', - }, - { - description: 'NFT Marketplace', - link: '/docs/use-cases/tokenization/nft-mkt-overview/', - }, - { - description: 'Digital Artist', - link: '/docs/use-cases/tokenization/digital-artist/', - }, - ], - }, - { - title: 'Payments', - id: 'payments-use-cases', - imgClass: 'connections-illustration', - subItems: [ - { - description: 'Peer-to-Peer Payments', - link: '/docs/use-cases/payments/peer-to-peer-payments-uc/', - }, - { - description: 'Cross-Currency Payments', - link: '/docs/concepts/payment-types/cross-currency-payments/', - }, - { - description: 'Smart Contracts', - link: '/docs/use-cases/payments/smart-contracts-uc/', - }, - ], - }, -]; -const intermediateVideos = [ - { - src: require('../static/img/backgrounds/docs-advanced-payment-features@2x.png'), - title: 'Advanced Payment Features', - url: 'https://www.youtube.com/embed/e2Iwsk37LMk?rel=0&showinfo=0&autoplay=1', - }, - { - src: require('../static/img/backgrounds/docs-governance@2x.png'), - title: 'Governance and the Amendment Process', - url: 'https://www.youtube.com/embed/4GbRdanHoR4?rel=0&showinfo=0&autoplay=1', - }, - { - src: require('../static/img/backgrounds/docs-sidechains@2x.png'), - title: 'Federated Sidechains', - url: 'https://www.youtube.com/embed/NhH4LM8NxgY?rel=0&showinfo=0&autoplay=1', - }, -]; -const getStartedVideos = [ - { - src: require('../static/img/backgrounds/docs-intro-to-XRP-ledger@2x.png'), - title: 'Intro to XRP Ledger', - url: 'https://www.youtube.com/embed/sVTybJ3cNyo?rel=0&showinfo=0&autoplay=1', - }, - { - src: require('../static/img/backgrounds/docs-accounts@2x.png'), - title: 'Accounts', - url: 'https://www.youtube.com/embed/eO8jE6PftX8?rel=0&showinfo=0&autoplay=1', - }, - { - src: require('../static/img/backgrounds/docs-decentralized-exchange@2x.png'), - title: 'Decentralized Exchange', - url: 'https://www.youtube.com/embed/VWNrHBDfXvA?rel=0&showinfo=0&autoplay=1', - }, - { - src: require('../static/img/backgrounds/docs-tokenization@2x.png'), - title: 'Tokenization', - url: 'https://www.youtube.com/embed/Oj4cWOiWf4A?rel=0&showinfo=0&autoplay=1', - }, -]; - -const devTools = [ - { - title: 'XRP Faucets', - link: '/resources/dev-tools/xrp-faucets', - description: 'Get credentials and test-XRP for XRP Ledger Testnet or Devnet.', - }, - { - title: 'WebSocket Tool', - link: '/resources/dev-tools/websocket-api-tool', - description: 'Send sample requests and get responses from the rippled API.', - }, - { - title: 'XRP Ledger Explorer', - link: 'https://livenet.xrpl.org', - description: - 'View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger.', - }, - { - title: 'Transaction Sender', - link: '/resources/dev-tools/tx-sender', - description: - 'Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address.', - }, -]; - -function UseCasesCard(props: { - useCase: { - id: string; - title: string; - imgClass: string; - subItems: { description: string; link: string }[]; - }; -}) { - const { useCase } = props; - const { useTranslate } = useThemeHooks(); - const { translate } = useTranslate(); - return ( -
- {useCase.title} -
{translate(useCase.title)}
- -
- ); -} - -function FlatCard(props: { href: string; title: string; description: string; linkText: string; imgClass }) { - const { title, description, linkText, href, imgClass } = props; - return ( - - {title} -
-
{title}
-
-

{description}

-
-
- {linkText} -
-
- - ); -} - -function VideoCard(props: { url: string; title: string; src: string }) { - const { url, title, src } = props; - return ( - - ); -} - -function DevToolCard(props: { link: string; title: string; description: string }) { - const { link, title, description } = props; - return ( - -
{title}
-

{description}

- - ); -} - -function PrimaryButton(props: { href: string; text: string; isArrowUp: boolean }) { - const { href, text, isArrowUp } = props; - return ( - - {text} - - ); -} - export default function Docs() { const { useTranslate } = useThemeHooks(); const { translate } = useTranslate(); return ( -
-
-
-
-
-

{translate('Documentation')}

-
{translate('XRP Ledger Developer Resources')}
-
-
-
+
-
-
-
- -
-
- -
-
- -
-
-
-
-

{translate('Use Cases')}

-
- {useCases.map(useCase => ( - - ))} -
-
-
-

{translate('Getting Started')}

-
-
- -
{translate('Introduction to the XRP Ledger')}
-

{translate('An introduction to fundamental aspects of the XRP Ledger.')}

-
-
{translate('Introduction')}
-
- quick-start - -
-
-
- {getStartedVideos.map(video => ( - - ))} -
-
- -
-
-
-
-
-
-

{translate('Interact with the XRP Ledger in a language of your choice')}

-
{translate('Explore SDKs')}
-
-
-
-
-
- - Javascript Logo -
{translate('Javascript')}
- -
-
- - Python Logo -
{translate('Python')}
- -
-
- - Java Logo -
{translate('Java')}
- -
-
- - Go Logo -
{translate("GoLang")}
- -
-
-
-
- -
-
-
-
-

{translate('Intermediate Learning Sources')}

-
- {intermediateVideos.map(video => ( - - ))} -
-
-
-
-
- -
-
-
-

{translate('Explore, Test, Verify')}

-
{translate('Explore Dev Tools')}
-
-

- {translate( - 'Use these web-based tools to assist during all stages of development, from getting your first payment to testing your implementation for best practices.' - )} -

-
- {devTools.map(card => ( - - ))} -
- -
-
-
-
-
- -
-
-
-

{translate('Get Free Test XRP')}

-

- {translate( - 'Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.' - )} -

- - {translate('Generate Testnet Credentials')} - -
-
-
-
-
- {/* full docs index isn't ported to Redocly -
- - {translate('See full documentation index')} - -
- */} -
+ {/* 1. Hero */} + + + {/* 2. Get Started Carousel */} + + + {/* 3. Core Concepts Text Grid */} + + {translate("Discover the basics of the XRPL by learning about accounts, transactions, and the ledger structure.")}{' '}

+ {translate("Read More")} + + ), + }, + { + heading: translate('Advanced XRPL Topics: Go Deeper'), + description: ( + <> + {translate("Implement real-world solutions by combining XRPL primitives for lending, token issuance, DEX trading, and more.")}{' '}

+ {translate("Read More")} + + ), + }, + ]} + /> + + {/* 4. Featured Video — Advanced Payment Features */} + + + {/* 5. Featured Video — Governance */} + + + {/* 6. Developer Reference Links */} + + + {/* 7. Server Admin Reference Links */} + + + {/* 8. Dev Tools Directory */} + + + {/* 9a. Use Cases — Payments */} + + + {/* 9b. Use Cases — Tokens */} + + + {/* 9c. Use Cases — On-Chain Finance */} + + + {/* 9d. Use Cases — Compliance Features */} + + + {/* 10. SDK Tiles */} + + + {/* 11. Infrastructure Cards */} + + {translate("Take ownership of your connection to the blockchain with a core server that can submit transactions, read balances, and store a complete copy of the ledger data.")}{' '} + {translate("Learn More")} + + ), + }, + { + icon: require('../static/img/icons/2026/color/lilac/node-configuration.svg'), + iconAlt: translate('Network'), + heading: translate('Node Configuration'), + description: ( + <> + {translate("Customize your server configuration for your use case, including data retention, network connectivity, and performance tuning.")}{' '} + {translate("Learn More")} + + ), + }, + { + icon: require('../static/img/icons/2026/color/lilac/troubleshooting-node.svg'), + iconAlt: translate('Tools'), + heading: translate('Troubleshooting Your Node'), + description: ( + <> + {translate("Diagnose and solve problems with your server to maximize uptime and reliability.")}{' '} + {translate("Learn More")} + + ), + }, + ]} + /> + + {/* 12. Contribute Cards */} + + {translate("Contribute to")}{' '} + + {translate("XRPL.org")} + + {translate(", the go-to resource for all things XRP Ledger.")} + + ), + }, + { + headline: translate('Contribute a Blog Post'), + callsToAction: [ + { + children: translate('Contribute Now'), + href: '/resources/contribute-blog', + }, + ], + children: translate( + 'Share how you solved a real-world problem using the XRP Ledger, including your architecture decisions, workflows, tradeoffs, and lessons learned. Contribute a blog post to help other developers build faster.' + ), + }, + ]} + /> + + {/* 13. Continuous Learning Cards */} +
); } diff --git a/docs/use-cases/payments/index.page.tsx b/docs/use-cases/payments/index.page.tsx index 5b7fcdc704..97e0a2f0d2 100644 --- a/docs/use-cases/payments/index.page.tsx +++ b/docs/use-cases/payments/index.page.tsx @@ -1,320 +1,36 @@ -import React, { useState } from "react"; -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"; +import React from 'react'; +import { + HeroSection, + WhyChooseSection, + AdvancedFeaturesSection, + StablecoinsSection, + EmbeddedPaymentsSection, + PartnerLogosSection, + FlexibleIntegrationSection, + DeveloperSpotlightSection, + StayConnectedSection, +} from 'pages/payments/sections'; export const frontmatter = { seo: { - title: 'XRP Ledger Payments Suite', - description: "The XRP Ledger Payments Suite is a payments solution for use cases including stablecoin payments, cross-border remittance, B2B payment rails, and merchant settlement.", - } + title: 'Payments Infrastructure', + description: + 'The XRP Ledger Payments Infrastructure is a payments solution for use cases including stablecoin payments, cross-border remittance, B2B payment rails, and merchant settlement.', + }, }; -const PaymentsPage: React.FC = () => { - const { useTranslate } = useThemeHooks(); - const { translate } = useTranslate(); - - const video = { - url: "https://www.youtube.com/embed/e2Iwsk37LMk?si=20-m6aQOWpaiQDW7", - title: "Payments", - src: "https://www.youtube.com/embed/e2Iwsk37LMk?si=20-m6aQOWpaiQDW7", - }; - - const paymentAdvantages = [ - { - id: "cross-border-stablecoin", - title: "Enable Cross-Border Stablecoin Payments", - contents: [ - { - subtitle: "RLUSD and USDC support", - description: "", - }, - { - subtitle: "Easily receive, store, convert, issue and send stablecoins", - description: "", - }, - ], - }, - { - id: "reliable-infrastructure", - title: "Access Reliable Payments Infrastructure", - contents: [ - { - subtitle: "99.99% uptime since 2012", - description: "", - }, - { - subtitle: "Over $1.7T+ in value transferred", - description: "", - }, - ], - }, - { - id: "efficient-payments", - title: "Move Money Efficiently", - contents: [ - { - subtitle: "Transactions settle in 3-5 seconds", - description: "", - }, - { - subtitle: "Fractions of a cent per transaction", - description: "", - }, - ], - }, - ]; - - const paymentProjects = [ - { - id: "ripple-usd", - label: "Ripple USD", - 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: "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: "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: "EURØP", - url: "https://schuman.io/europ/", - description: "EURØP, issued by Schuman Financial, is the first MiCA-compliant euro stablecoin on XRPL.", - }, - { - id: "xsgd", - label: "XSGD", - url: "https://www.straitsx.com/xsgd", - description: "XSGD, from StraitsX, is a Singapore Dollar-backed stablecoin regulated by MAS (Monetary Authority of Singapore).", - }, - { - id: "audd", - label: "AUDD", - url: "https://www.audd.digital/", - description: "AUDD, an Australian dollar stablecoin, is live on XRPL and backed 1:1 with AUD.", - }, - ]; - - const embeddedPaymentsCards = [ - { - id: 'digital-wallets', - title: 'Digital Wallets', - description: 'Offer fast, low-fee stablecoin payments between users and applications.', - }, - { - id: 'cross-border-remittance', - title: 'Cross-Border Remittance', - description: 'Use secure payment channels and the most optimal liquidity pathways for global remittances with RLUSD.', - }, - { - id: 'regulated-foreign-exchange', - title: 'Regulated Foreign Exchange', - description: 'Tap into a set of fiat-backed stablecoins, instantaneous swaps for efficient Foreign Exchange.', - }, - { - id: 'merchant-settlement', - title: 'Merchant Settlement', - description: 'Settle daily payments across assets using escrow or checks with compliance-focused features.', - }, - { - id: 'b2b-payment-rails', - title: 'B2B Payment Rails', - description: 'Build programmable payment flows with conditions and real-time data feeds.', - }, - { - id: 'compliance-first-payment-acceptance', - title: 'Compliance-First Payment Acceptance', - description: 'Add Deposit Authorization and whitelisting to comply with AML and KYC workflows.', - }, - ]; - - const battleTestedProjects = [ - { - id: "coinpayments", - label: "CoinPayments", - 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: "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: "friipay", - label: "FriiPay", - url: "https://xrpl.org/blog/2025/frii-pay-xrpl-case-study-crypto-payment-solution", - description: "FriiPay 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" - } - ], - backgroundClass: "developer-spotlight" - }, - { - 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" - } - ], - backgroundClass: "learn-stay-updated" - } - ]; - +export default function PaymentsPage() { return ( -
-
-
-