Merge pull request #3364 from XRPLF/fix_links_from_concepts

Fix source links in concepts and infrastructure sections

.gitignore

@@ -8,8 +8,6 @@ yarn-error.log
 *.iml
 .venv/
 _code-samples/*/js/package-lock.json
-*.css.map
 
 # PHP
 composer.lock
-.cursor/

@l10n/es-ES/docs/concepts/networks-and-servers/parallel-networks.md

@@ -17,8 +17,6 @@ Para ayudar a miembros de la comunidad del XRP Ledger a interactuar con la tecno
 | Mainnet | Lanzamientos estables | _El_ [XRP Ledger](/about/), un libro contable criptográfico descentralizado impulsado por una red de servidores peer-to-peer y el hogar de [XRP](../../introduction/what-is-xrp.md). |
 | Testnet | Lanzamientos estables | Una red de "universo alternativo" que actua como un campo de pruebas para el software construido en el XRP Ledger, sin impactar a los usuarios del XRP Ledger de producción y sin arriesgar dinero real. El [estado de enmienda](/resources/known-amendments.md) de Testnet está destinado a reflejar de cerca el de la Mainnet, aunque pueden ocurrir ligeras variaciones en el tiempo debido a la naturaleza impredecible de los sistemas descentralizados. |
 | Devnet  | Lanzamientos Beta   | Una vista previa de las próximas atracciones, donde cambios inestables en el software principal de XRP Ledger se pueden probar. Los desarrolladores pueden utilizar esta altnet para interactuar y aprender sobre funcionalidades nuevas planficiadas para el XRP Ledger y enmiendas que no están habilitadas en la Mainnet. |
-| [Hooks V3 Testnet](https://hooks-testnet-v3.xrpl-labs.com/) | [Servidor Hooks](https://github.com/XRPL-Labs/xrpld-hooks) | Una vista previa de la funcionalidad de smart contract en la cadena utilizando [hooks](https://xrpl-hooks.readme.io/). |
-| Sidechain-Devnet | Lanzamientos Beta | Una sidechain para probar funcionalidades en puentes cross-chain. Devnet se trata como la cadena de bloqueo y esta sidechain es la cadena de emisión.<br>Soporte a la librería:<br>- [xrpl.js 2.12.0](https://www.npmjs.com/package/xrpl/v/2.12.0)<br>- [xrpl-py 2.4.0](https://pypi.org/project/xrpl-py/2.4.0/)<br>**Nota**: También puedes usar la herramienta de línea de comandos [`xbridge-cli`](https://github.com/XRPLF/xbridge-cli) para configurar un puente entre cadenas en tu máquina local. |
 
 Cada altnet tiene su propia distribución separada de XRP de prueba, que se [regala gratis](/resources/dev-tools/xrp-faucets) a partes interesadas en experimentar con el XRP Ledger y desarrollar aplicaciones e integraciones. El XRP test no tiene valor en el mundo real y se pierde cuando la red se reinicia.
 

@l10n/ja/docs/concepts/networks-and-servers/parallel-networks.md

@@ -17,8 +17,6 @@ XRP Ledgerコミュニティのメンバーが、メインネットに影響を
 | Mainnet    | 安定版リリース    | ピアツーピアサーバのネットワーク機能を備えた分散型の暗号台帳であり、[XRP](../../introduction/what-is-xrp.md)の土台となる[XRP Ledger](/about/)です。 |
 | Testnet    | 安定版リリース    | XRP Ledger上に構築したソフトウェアのテスト環境として動作する「代替環境」のネットワークです。本番環境のXRP Ledgerユーザに影響を及ぼすことも、本物の通貨をリスクにさらすこともありません。Testnetの[Amendmentのステータス](/resources/known-amendments.md)は、Mainnetを厳密に反映するようになっていますが、分散型システムが持つ予測不可能な性質により、タイミングにわずかな違いが生じることがあります。 |
 | Devnet     | ベータ版リリース  | 次期リリースのプレビューネットワークです。XRP Ledgerのコアソフトウェアへの不安定な変更がテストされます。このAltNetを使用すると、開発者はまだMainnetで有効になっていないXRPLの計画段階の新機能やAmendmentを操作したり学習したりすることができます。 |
-| [Hooks V3 Testnet](https://hooks-testnet-v3.xrpl-labs.com/) | [Hooksサーバ](https://github.com/XRPL-Labs/xrpld-hooks) | [Hooks](https://xrpl-hooks.readme.io/)を使用したオンチェーン・スマートコントラクト機能のプレビューネットワークです。 |
-| Sidechain-Devnet | ベータ版リリース | クロスチェーンブリッジ機能をテストするためのサイドチェーンです。<br>ライブラリのサポート:<br>- [xrpl.js 2.12.0](https://www.npmjs.com/package/xrpl/v/2.12.0)<br>- [xrpl-py 2.4.0](https://pypi.org/project/xrpl-py/2.4.0/)<br>**注記**: また、[`xbridge-cli`](https://github.com/XRPLF/xbridge-cli)コマンドラインツールを使用して、ローカルマシンにクロスチェーンブリッジをセットアップすることもできます。 |
 
 テスト用XRPは、XRP Ledgerの実験やアプリケーションの開発、統合に興味のある人々に[無償で提供](/resources/dev-tools/xrp-faucets)されています。テスト用のXRPは実際には価値を持たず、ネットワークがリセットされると失われます。
 

@l10n/ja/docs/infrastructure/configuration/connect-your-rippled-to-the-xrp-test-net.md

@@ -43,11 +43,6 @@ labels:
     # No [ips] stanza. Use the default hubs to connect to Mainnet.
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [ips]
-    sidechain-net2.devnet.rippletest.net 51235
-    ```
-
     {% /tabs %}
 
 2. 以前の `[ips]`があれば、コメントアウトしてください。
@@ -78,11 +73,6 @@ labels:
     main
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [network_id]
-    262
-    ```
-
     {% /tabs %}
 
     カスタムネットワークの場合、そのネットワークに接続する全員が、そのネットワークに固有の値を使用する必要があります。新しいネットワークを作成するときは、ネットワークIDを11から4,294,967,295までの整数からランダムに選択します。
@@ -121,14 +111,6 @@ labels:
     ED2677ABFFD1B33AC6FBC3062B71F1E8397C1505E1C42C64D11AD1B28FF73F4734
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [validator_list_sites]
-    https://vlsidechain-net2.devnet.rippletest.net
-
-    [validator_list_keys]
-    EDA5504C7133743FADA46342229B4E9CBBE1CF9BCA19D16633574F7CBB72F79569
-    ```
-
     {% /tabs %}
 
     {% admonition type="success" name="ヒント" %}プレビュー版パッケージには必要な項目があらかじめ設定されている場合がありますが、念のため確認してください。{% /admonition %}
@@ -182,13 +164,6 @@ labels:
 ```
 {% /tab %}
 
-{% tab label="Sidechain-Devnet" %}
-```
-[features]
-XChainBridge
-```
-{% /tab %}
-
 {% /tabs %}
 
 {% admonition type="danger" name="警告" %}メインネットまたはテストネットに接続するときは、`[features]`を使用しないでください。他のネットワークと異なる機能を強制的に有効にすると、サーバがネットワークから分断される可能性があります。{% /admonition %}

@l10n/ja/docs/tutorials/public-servers.md

@@ -26,7 +26,6 @@ labels:
 | Ripple[¹][]    | Testnet (Clio)   | `https://clio.altnet.rippletest.net:51234/` | `wss://clio.altnet.rippletest.net:51233/` | Clioを使用したTestnet公開サーバ |
 | Ripple[¹][]    | Devnet           | `https://s.devnet.rippletest.net:51234/` | `wss://s.devnet.rippletest.net:51233/` | Devnet 公開サーバ |
 | Ripple[¹][]    | Devnet (Clio)    | `https://clio.devnet.rippletest.net:51234/` | `wss://clio.devnet.rippletest.net:51233/` | Clioを使用したDevnet公開サーバ |
-| Ripple[¹][]    | Sidechain-Devnet | `https://sidechain-net2.devnet.rippletest.net:51234/` | `wss://sidechain-net2.devnet.rippletest.net:51233/` | クロスチェーンブリッジ機能をテストするためのサイドチェーンDevnet。Devnetはロックチェーンとして機能し、このサイドチェーンは発行チェーンとして機能します。 |
 | XRPL Labs      | Xahau Testnet     | `https://xahau-test.net/` | `wss://xahau-test.net/` | [Hooksが有効](https://hooks.xrpl.org/)なXahau Testnet |
 
 [ネットワーク]: ../concepts/networks-and-servers/parallel-networks.md

@theme/components/Navbar/Navbar.tsx

@@ -128,31 +128,22 @@ export function Navbar(props) {
   });
 
   React.useEffect(() => {
-    // Bootstrap 5 uses vanilla JavaScript API instead of jQuery
-    // These events set classes so that the search bar and other
+    // Turns out jQuery is necessary for firing events on Bootstrap v4
+    // dropdowns. These events set classes so that the search bar and other
     // submenus collapse on mobile when you expand one submenu.
-    const dropdowns = document.querySelectorAll("#topnav-pages .dropdown");
+    const dds = $("#topnav-pages .dropdown");
     const top_main_nav = document.querySelector("#top-main-nav");
-    
-    const handleDropdownShow = () => {
-      top_main_nav?.classList.add("submenu-expanded");
-    };
-    
-    const handleDropdownHidden = () => {
-      top_main_nav?.classList.remove("submenu-expanded");
-    };
-    
-    // Attach Bootstrap 5 dropdown events
-    dropdowns.forEach((dropdown) => {
-      dropdown.addEventListener("show.bs.dropdown", handleDropdownShow);
-      dropdown.addEventListener("hidden.bs.dropdown", handleDropdownHidden);
+    dds.on("show.bs.dropdown", (evt) => {
+      top_main_nav.classList.add("submenu-expanded");
+    });
+    dds.on("hidden.bs.dropdown", (evt) => {
+      top_main_nav.classList.remove("submenu-expanded");
     });
-    
     // Close navbar on .dropdown-item click
     const toggleNavbar = () => {
       const navbarToggler = document.querySelector(".navbar-toggler");
       const isNavbarCollapsed =
-        navbarToggler?.getAttribute("aria-expanded") === "true";
+        navbarToggler.getAttribute("aria-expanded") === "true";
       if (isNavbarCollapsed) {
         navbarToggler?.click(); // Simulate click to toggle navbar
       }
@@ -165,10 +156,6 @@ export function Navbar(props) {
 
     // Cleanup function to remove event listeners
     return () => {
-      dropdowns.forEach((dropdown) => {
-        dropdown.removeEventListener("show.bs.dropdown", handleDropdownShow);
-        dropdown.removeEventListener("hidden.bs.dropdown", handleDropdownHidden);
-      });
       dropdownItems.forEach((item) => {
         item.removeEventListener("click", toggleNavbar);
       });
@@ -313,7 +300,7 @@ export function NavDropdown(props) {
         href="#"
         id={toggler_id}
         role="button"
-        data-bs-toggle="dropdown"
+        data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
       >
@@ -342,8 +329,8 @@ export function NavControls(props) {
     <button
       className="navbar-toggler collapsed"
       type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#top-main-nav"
+      data-toggle="collapse"
+      data-target="#top-main-nav"
       aria-controls="navbarHolder"
       aria-expanded="false"
       aria-label="Toggle navigation"
@@ -435,19 +422,19 @@ export class ThemeToggle extends React.Component {
       <div className="nav-item" id="topnav-theme">
         <form className="form-inline">
           <div
-            className="form-check form-check-inline form-switch custom-theme-toggle"
+            className="custom-control custom-theme-toggle form-inline-item"
             title=""
-            data-bs-toggle="tooltip"
-            data-bs-placement="left"
+            data-toggle="tooltip"
+            data-placement="left"
             data-original-title="Toggle Dark Mode"
           >
             <input
               type="checkbox"
-              className="form-check-input"
+              className="custom-control-input"
               id="css-toggle-btn"
               onClick={this.user_choose_theme}
             />
-            <label className="form-check-label" htmlFor="css-toggle-btn">
+            <label className="custom-control-label" htmlFor="css-toggle-btn">
               <span className="d-lg-none">Light/Dark Theme</span>
             </label>
           </div>

@theme/components/XRPLCard.tsx

@@ -25,7 +25,7 @@ export function XRPLCard(props: XRPLCardProps) {
                 <p className="card-text">{props.body}</p>
               )}
             </div>
-            {/* <div className="card-footer">&nbsp;</div> */}
+            <div className="card-footer">&nbsp;</div>
         </Link>
     )
 }

COLOR-MIGRATION-SUMMARY.md

@@ -1,178 +0,0 @@
-# Color System Migration Summary
-
-**Date:** October 21, 2025  
-**Source:** [XRPL.org Design Tokens - Figma](https://figma.com/design/zRyhXG4hRP3Lk3B6Owr3eo/XRPL.org-Design-Tokens)
-
-## Migration Strategy: Clean Migration
-
-The old 10-level color scale (100-1000) has been completely migrated to a new 5-level scale (100-500). All references in the codebase have been updated, and backward compatibility aliases have been removed for a clean implementation.
-
-**Mapping Applied:**
-```
-Old System    →    New System
-100           →    100 (lightest)
-200           →    100
-300           →    200
-400           →    200
-500           →    300 (mid-tone, default)
-600           →    300
-700           →    400
-800           →    400
-900           →    500 (darkest)
-1000          →    500
-```
-
-**Migration Approach:**
-1. All color usages (600-1000) were found and replaced with their new equivalents (300-500)
-2. Backward compatibility aliases were removed from `_colors.scss`
-3. Only 100-500 design tokens remain for each color family
-
-## Color Families Updated
-
-### Primary Colors
-
-#### Gray (Neutral) ⏸️ NOT UPDATED
-- **Status:** Original values retained - design tokens not ready
-- **Current values:** #FCFCFD, #F5F5F7, #E0E0E1, #C1C1C2, #A2A2A4, #838386, #454549, #343437, #232325, #111112
-- **Note:** Gray/Neutral design tokens will be migrated in a future update
-
-#### Green ✅
-- **New Design Tokens:** #EAFCF1, #70EE97, #21E46B, #0DAA3E, #078139
-- **Variables:** `$green-100` through `$green-500` only
-- **Migrated:** 14 file references updated
-- **Special:** `$apex-2023-green` (#00FF76) retained
-
-#### Lilac (Primary) ✅ *replaces blue-purple*
-- **New Design Tokens:** #F2EDFF, #D9CAFF, #C0A7FF, #7649E3, #5429A1
-- **Variables:** `$lilac-100` through `$lilac-500` only
-- **Legacy aliases:** `$blue-purple-100` through `$blue-purple-500` map to lilac (600-900 removed)
-- **Migrated:** 16 file references updated
-- **Note:** This is a new color name in the design system
-
-### Secondary Colors
-
-#### Red ✅ *NEW*
-- **New Design Tokens:** #FDECE7, #F27A66, #F0643A, #DA4518, #A22514
-- **Variables:** `$red-100` through `$red-500` only
-- **Note:** This is a completely new color family added to the design system
-
-#### Pink ✅ *replaces magenta*
-- **New Design Tokens:** #FDF1F4, #F2B5C3, #F18DA5, #FF577F, #DC466F
-- **Variables:** `$pink-100` through `$pink-500` only
-- **Legacy aliases:** `$magenta-100` through `$magenta-500` map to pink (600-900 removed)
-- **Migrated:** 7 file references updated
-
-#### Blue ✅
-- **New Design Tokens:** #EDF4FF, #93BFF1, #428CFF, #0179E7, #0A4DC0
-- **Variables:** `$blue-100` through `$blue-500` only
-- **Migrated:** 8 file references updated
-- **Special:** `$accent-blue-90` (#001133) retained
-
-#### Yellow ✅
-- **New Design Tokens:** #F3F1EB, #E6F1A7, #DBF15E, #E1DB26, #D4C02D
-- **Variables:** `$yellow-100` through `$yellow-500` only
-- **Migrated:** 11 file references updated
-
-## Colors Retained (No Design Token Replacement)
-
-### Orange
-- **Status:** Legacy values retained
-- **Values:** #FFEEE5, #FFCCB2, #FFAA80, #FF884B, #FF6719, #E54D00, #B23C00, #802B00, #4C1A00
-- **Reason:** No corresponding design token in new system
-
-### Red-purple
-- **Status:** Legacy values retained
-- **Values:** #FBE5FF, #F2B2FF, #EA80FF, #E24CFF, #D919FF, #C000E5, #9500B2, #6B0080, #40004C
-- **Reason:** No corresponding design token in new system
-
-### Special Event Colors
-- `$apex-2023-green: #00FF76`
-- `$token-2049-purple: #410bb9`
-- `$accent-blue-90: #001133`
-
-## Bootstrap & Component Colors
-
-All Bootstrap theme variables remain functional:
-- `$primary` → `$purple` (now `$lilac-400`)
-- `$secondary` → `$gray-200`
-- `$success` → `$green-500`
-- `$info` → `$blue-500`
-- `$warning` → `$yellow-500`
-- `$danger` → `$magenta-500` (now `$pink-500`)
-
-## Breaking Changes
-
-**Removed Variables:**
-- All color variables from 600-1000 have been removed for: Green, Blue, Lilac, Pink, Red, Yellow
-- `$blue-purple-600` through `$blue-purple-900` removed (use 100-500)
-- `$magenta-600` through `$magenta-900` removed (use 100-500)
-
-**No Impact:**
-- All usages in the codebase have been updated
-- Legacy color name aliases maintained (100-500 only):
-  - `$blue-purple-100` through `$blue-purple-500` → maps to `$lilac-*`
-  - `$magenta-100` through `$magenta-500` → maps to `$pink-*`
-
-## Color Name Changes
-
-| Old Name | New Name | Reason |
-|----------|----------|--------|
-| `blue-purple-*` | `lilac-*` | Design system rebranding |
-| `magenta-*` | `pink-*` | Design system rebranding |
-| N/A | `red-*` | New color family added |
-
-## Usage Recommendations
-
-### Current Best Practices
-Use the new 5-level design tokens (100-500):
-```scss
-// Primary colors
-color: $gray-300;      // Gray (not yet migrated - still uses old values)
-color: $green-300;     // Default green
-color: $lilac-400;     // Primary purple
-
-// Secondary colors
-color: $red-300;       // Default red
-color: $pink-300;      // Default pink
-color: $blue-300;      // Default blue
-color: $yellow-300;    // Default yellow
-```
-
-### Legacy Aliases Still Available
-```scss
-// These legacy names work (100-500 only)
-color: $blue-purple-400;  // Same as $lilac-400
-color: $magenta-300;      // Same as $pink-300
-```
-
-## Files Modified
-
-- `styles/_colors.scss` - Complete color system update
-
-## Validation Status
-
-✅ All SCSS variables resolve correctly  
-✅ No linter errors  
-✅ Bootstrap theme colors functional  
-✅ All old color references (600-1000) removed from codebase  
-✅ Special event colors preserved  
-⏸️ Gray/Neutral colors - pending future update
-
-## Migration Statistics
-
-**Files Updated:** 11 SCSS files
-- `styles/_colors.scss` - Color definitions cleaned up
-- `styles/light/_light-theme.scss` - 11 color references updated
-- `styles/_status-labels.scss` - 39 color references updated  
-- `styles/_diagrams.scss` - 6 color references updated
-- `styles/_code-tabs.scss` - 2 color references updated
-- `styles/_content.scss` - 1 color reference updated
-- `styles/_buttons.scss` - 7 color references updated
-- `styles/_pages.scss` - 3 color references updated
-- `styles/_blog.scss` - 2 color references updated
-- `styles/_feedback.scss` - 2 color references updated
-- `styles/_rpc-tool.scss` - 1 color reference updated
-- `styles/_landings.scss` - 1 color reference updated
-
-**Total Color References Updated:** 75+ instances
-

CSS-OPTIMIZATION-SUMMARY.md

@@ -1,154 +0,0 @@
-# CSS Optimization - Implementation Summary
-
-## ✅ Successfully Completed
-
-The CSS build pipeline has been modernized with industry-standard optimization tools, resulting in significant performance improvements.
-
-## Results
-
-### Bundle Size Improvements
-
-\`\`\`
-=== CSS Bundle Comparison ===
-
-Master (Bootstrap 4):
-  Uncompressed: 405.09 KB
-  Gzipped:       63.44 KB
-
-This Branch BEFORE Optimization (Bootstrap 5):
-  Uncompressed: 486.64 KB
-  Gzipped:       71.14 KB
-
-This Branch AFTER Optimization (Bootstrap 5 + PurgeCSS):
-  Uncompressed: 280.92 KB  ✅ 42% smaller
-  Gzipped:       43.32 KB  ✅ 39% smaller (network transfer)
-\`\`\`
-
-### Key Improvements
-
-| Metric | Before | After | Improvement |
-|--------|--------|-------|-------------|
-| **Network Transfer (Gzipped)** | 71.14 KB | 43.32 KB | **39% smaller** |
-| **Uncompressed Size** | 486.64 KB | 280.92 KB | **42% smaller** |
-| **CSS Selectors** | 5,423 | 2,681 | **51% fewer** |
-| **DevTools Filter Performance** | ~60 seconds | <1 second | **98% faster** |
-
-### Real-World Impact
-
-- **Page Load:** 40% faster CSS download on 3G connections
-- **Developer Experience:** DevTools CSS filtering is now instant (<1s vs 60s)
-- **Bandwidth Savings:** ~28 KB less per page load
-- **Maintainability:** Modern tooling with source maps in development
-
-## What Was Implemented
-
-### 1. Modern Build Pipeline
-
-- **Upgraded Sass** from 1.26.10 (2020) → 1.93.2 (latest)
-- **Added PostCSS** with optimization plugins:
-  - **PurgeCSS** - Removes unused CSS selectors
-  - **Autoprefixer** - Browser compatibility
-  - **cssnano** - Advanced minification
-
-### 2. Build Scripts
-
-```json
-{
-  "scripts": {
-    "build-css": "Production build with full optimization",
-    "build-css-dev": "Development build with source maps",
-    "build-css-watch": "Watch mode for continuous compilation",
-    "analyze-css": "Bundle analysis tool"
-  }
-}
-```
-
-### 3. PurgeCSS Configuration
-
-- Scans all `.tsx`, `.md`, `.yaml`, `.html` files for class names
-- Intelligent safelist for dynamically-added classes
-- Preserves Bootstrap JS components, CodeMirror, custom tools
-- Only runs in production (dev builds are fast)
-
-### 4. CSS Analysis Tool
-
-Created `scripts/analyze-css.js` to monitor:
-- Bundle size and composition
-- Bootstrap component usage
-- Optimization opportunities
-- Before/after comparisons
-
-## Files Created/Modified
-
-### New Files
-- `postcss.config.cjs` - PostCSS and PurgeCSS configuration  
-- `scripts/analyze-css.js` - CSS bundle analysis tool
-- `CSS-OPTIMIZATION.md` - Comprehensive optimization guide
-- `CSS-OPTIMIZATION-SUMMARY.md` - This summary
-
-### Modified Files
-- `package.json` - Updated dependencies and build scripts
-- `styles/README.md` - Updated build documentation
-
-### Configuration Files
-All configuration files include extensive inline documentation explaining decisions and patterns.
-
-## Usage
-
-### For Production
-```bash
-npm run build-css        # Full optimization
-npm run analyze-css      # Check results
-```
-
-### For Development
-```bash
-npm run build-css:dev    # Fast build with source maps
-npm run build-css:watch  # Auto-rebuild on changes
-```
-
-## Backward Compatibility
-
-✅ **No breaking changes** - All existing styles are preserved
-✅ Visual appearance is identical
-✅ All Bootstrap components still work
-✅ Dynamic classes are safelisted
-
-## Documentation
-
-- **`styles/README.md`** - Build process and troubleshooting
-- **`CSS-OPTIMIZATION.md`** - Detailed implementation guide
-- **`postcss.config.cjs`** - Inline configuration documentation
-
-## Maintenance
-
-### Adding New Styles
-
-1. Create `_component.scss` file
-2. Import in `xrpl.scss`
-3. Add dynamic classes to safelist if needed
-4. Test: `npm run build-css:dev` and `npm run build-css`
-5. Analyze: `npm run analyze-css`
-
-### Troubleshooting Missing Styles
-
-If styles are missing in production:
-1. Check if class is added dynamically
-2. Add pattern to safelist in `postcss.config.cjs`
-3. Rebuild with `npm run build-css`
-
-## Next Steps (Optional Future Optimizations)
-
-1. **Code Splitting** - Separate vendor CSS from custom styles
-2. **Critical CSS** - Extract above-the-fold styles
-3. **Bootstrap Customization** - Import only needed components
-4. **CSS Modules** - Component-scoped styles for React pages
-
-## Conclusion
-
-The CSS optimization is complete and working perfectly. The bundle size has been reduced by 42% (uncompressed) and 39% (gzipped), resulting in faster page loads and dramatically improved developer experience.
-
-**Status: ✅ Ready for Production**
-
----
-*Last Updated: October 2025*

CSS-OPTIMIZATION.md

@@ -1,381 +0,0 @@
-# CSS Optimization Guide
-
-## Overview
-
-This document describes the CSS optimization implementation for the XRPL Dev Portal, including the rationale, implementation details, performance improvements, and maintenance guidelines.
-
-## The Problem
-
-### Before Optimization
-
-The dev portal was serving a **486 KB** minified CSS bundle that included:
-
-- **Entire Bootstrap 5.3.8 framework** (~200+ KB)
-- Thousands of unused CSS selectors
-- No tree-shaking or dead code elimination
-- All styles loaded on every page, regardless of usage
-- **1-minute lag** in Chrome DevTools when filtering CSS
-
-#### Impact
-
-- **Developer Experience:** DevTools filter took 60+ seconds to respond
-- **Page Performance:** 486 KB CSS downloaded on every page load
-- **Build Process:** Outdated Sass 1.26.10 (from 2020)
-- **Debugging:** No source maps, even in development
-
-### Analysis Results
-
-Initial analysis showed:
-
-```
-Bundle Size:      486.64 KB
-Total Selectors:  5,423
-Unique Selectors: 4,678
-
-Bootstrap Component Usage:
-  - Pagination: 998 usages
-  - Cards: 428 usages
-  - Grid System: 253 usages
-  - ...but also...
-  - Toast: 8 usages
-  - Spinner: 8 usages
-  - Accordion: 0 usages (unused!)
-```
-
-## The Solution
-
-### Modern Build Pipeline
-
-Implemented a three-stage optimization pipeline:
-
-```
-SCSS → Sass Compiler → PostCSS → Optimized CSS
-                         │
-                         ├─ PurgeCSS (removes unused)
-                         ├─ Autoprefixer (adds vendor prefixes)
-                         └─ cssnano (minifies)
-```
-
-### Key Technologies
-
-1. **Sass (latest)** - Modern SCSS compilation with better performance
-2. **PostCSS** - Industry-standard CSS processing
-3. **PurgeCSS** - Intelligent unused CSS removal
-4. **Autoprefixer** - Browser compatibility
-5. **cssnano** - Advanced minification
-
-## Implementation
-
-### 1. Dependency Upgrades
-
-```json
-{
-  "devDependencies": {
-    "sass": "^1.93.2",  // was 1.26.10
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.1",
-    "@fullhuman/postcss-purgecss": "^7.0.2",
-    "autoprefixer": "^10.4.21",
-    "cssnano": "^7.1.1"
-  }
-}
-```
-
-### 2. Build Scripts
-
-Created separate development and production builds:
-
-```json
-{
-  "scripts": {
-    "build-css": "Production build with full optimization",
-    "build-css:dev": "Development build with source maps",
-    "build-css:watch": "Watch mode for continuous compilation",
-    "analyze-css": "node scripts/analyze-css.js"
-  }
-}
-```
-
-**Production Build:**
-- ✅ Full PurgeCSS optimization
-- ✅ Minified and compressed
-- ✅ Autoprefixed
-- ❌ No source maps
-
-**Development Build:**
-- ✅ Source maps for debugging
-- ✅ Autoprefixed
-- ❌ No PurgeCSS (faster builds)
-- ❌ Not minified (readable)
-
-### 3. PurgeCSS Configuration
-
-Created `postcss.config.cjs` with intelligent safelist:
-
-```javascript
-// Content paths - scan these for class names
-content: [
-  './**/*.tsx',
-  './**/*.md',
-  './**/*.yaml',
-  './**/*.html',
-  './static/js/**/*.js',
-]
-
-// Safelist - preserve these classes
-safelist: {
-  standard: [
-    'html', 'body', 'light', 'dark',
-    /^show$/, /^active$/, /^disabled$/,
-  ],
-  deep: [
-    /dropdown-menu/, /modal-backdrop/,
-    /cm-/, /CodeMirror/, // Third-party
-    /rpc-tool/, /websocket/, // Custom components
-  ],
-}
-```
-
-**Safelist Strategy:**
-- **Standard:** State classes added by JavaScript
-- **Deep:** Component patterns (keeps parent and children)
-- **Greedy:** Attribute-based matching
-
-### 4. Analysis Tool
-
-Created `scripts/analyze-css.js` to track optimization:
-
-- Bundle size metrics
-- Selector counts
-- Bootstrap component usage
-- Custom pattern detection
-- Optimization recommendations
-
-## Results
-
-### Performance Improvements
-
-| Metric | Before | After | Improvement |
-|--------|--------|-------|-------------|
-| **Bundle Size (Uncompressed)** | 486.64 KB | 280.92 KB | **42% smaller** |
-| **Bundle Size (Gzipped)** | 71.14 KB | 43.32 KB | **39% smaller** |
-| **Total Selectors** | 5,423 | 2,681 | **51% fewer** |
-| **Unique Selectors** | 4,678 | 2,167 | **54% fewer** |
-| **DevTools Filter** | ~60 seconds | <1 second | **98% faster** |
-| **Download Time (3G)** | ~2.0s | ~1.2s | **40% faster** |
-
-**Note:** Gzipped size is what actually gets transmitted over the network, representing the real-world bandwidth savings.
-
-### Bootstrap Component Optimization
-
-| Component | Before | After | Reduction |
-|-----------|--------|-------|-----------|
-| Pagination | 998 | 831 | 17% |
-| Cards | 428 | 306 | 29% |
-| Grid System | 253 | 94 | 63% |
-| Badge | 253 | 0 | 100% (unused) |
-| Navbar | 171 | 78 | 54% |
-| Buttons | 145 | 77 | 47% |
-| Forms | 179 | 70 | 61% |
-
-### Developer Experience
-
-**Before:**
-```
-Build time: 5-10 seconds
-DevTools CSS filter: 60 seconds
-Debugging: No source maps
-```
-
-**After:**
-```
-Production build: 8-12 seconds
-Development build: 3-5 seconds (no PurgeCSS)
-DevTools CSS filter: <1 second
-Debugging: Source maps in dev mode
-```
-
-## Maintenance
-
-### Adding New Styles
-
-When adding new component styles:
-
-1. **Create the SCSS file:**
-   ```scss
-   // styles/_my-component.scss
-   .my-component {
-     // styles here
-   }
-   ```
-
-2. **Import in xrpl.scss:**
-   ```scss
-   @import "_my-component.scss";
-   ```
-
-3. **If using dynamic classes, update safelist:**
-   ```javascript
-   // postcss.config.cjs
-   deep: [
-     /my-component/, // Keeps all .my-component-* classes
-   ]
-   ```
-
-4. **Test both builds:**
-   ```bash
-   npm run build-css:dev    # Test development build
-   npm run build-css        # Test production build
-   npm run analyze-css      # Check bundle size impact
-   ```
-
-### Troubleshooting Missing Styles
-
-If styles are missing after a production build:
-
-1. **Identify the missing class:**
-   ```bash
-   # Search for class usage in codebase
-   grep -r "missing-class" .
-   ```
-
-2. **Check if it's dynamically added:**
-   - Bootstrap JavaScript components
-   - React state-based classes
-   - Third-party library classes
-
-3. **Add to PurgeCSS safelist:**
-   ```javascript
-   // postcss.config.cjs
-   safelist: {
-     deep: [
-       /missing-class/, // Preserve this pattern
-     ],
-   }
-   ```
-
-4. **Rebuild and verify:**
-   ```bash
-   npm run build-css
-   npm run analyze-css
-   ```
-
-### Monitoring Bundle Size
-
-Run the analysis tool regularly:
-
-```bash
-npm run analyze-css
-```
-
-**Watch for:**
-- Bundle size > 350 KB (indicates regression)
-- Components with 0 usages (can be removed from Bootstrap import)
-- Significant selector count increases
-
-### Future Optimizations
-
-Potential next steps for further optimization:
-
-1. **Code Splitting**
-   - Split vendor CSS (Bootstrap) from custom styles
-   - Lazy-load page-specific styles
-   - Critical CSS extraction
-
-2. **Bootstrap Customization**
-   - Import only needed Bootstrap components
-   - Remove unused variables and mixins
-   - Custom Bootstrap build
-
-3. **Component-Level CSS**
-   - CSS Modules for page components
-   - CSS-in-JS for dynamic styles
-   - Scoped styles per route
-
-4. **Advanced Compression**
-   - Brotli compression (88% ratio vs 76% gzip)
-   - CSS splitting by media queries
-   - HTTP/2 server push for critical CSS
-
-## Migration Notes
-
-### Breaking Changes
-
-**None** - This optimization is backward-compatible. All existing classes and styles are preserved.
-
-### Testing Checklist
-
-When testing the optimization:
-
-- [ ] Homepage loads correctly
-- [ ] Documentation pages display properly
-- [ ] Blog posts render correctly
-- [ ] Dev tools (RPC tool, WebSocket tool) function
-- [ ] Navigation menus work
-- [ ] Dropdowns and modals open correctly
-- [ ] Forms are styled properly
-- [ ] Code syntax highlighting works
-- [ ] Print styles work
-- [ ] Light/dark theme switching works
-
-### Rollback Procedure
-
-If issues are found:
-
-1. **Temporarily revert to old build:**
-   ```bash
-   # In package.json, change build-css to:
-   "build-css": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map"
-   ```
-
-2. **Rebuild:**
-   ```bash
-   npm run build-css
-   ```
-
-3. **Report the issue** with:
-   - Missing class names
-   - Page where issue appears
-   - Expected vs actual behavior
-
-## Resources
-
-### Documentation
-
-- [PurgeCSS Documentation](https://purgecss.com/)
-- [PostCSS Documentation](https://postcss.org/)
-- [Sass Documentation](https://sass-lang.com/)
-- [Bootstrap Customization](https://getbootstrap.com/docs/5.3/customize/sass/)
-
-### Tools
-
-- `npm run build-css` - Production build
-- `npm run build-css:dev` - Development build
-- `npm run build-css:watch` - Watch mode
-- `npm run analyze-css` - Bundle analysis
-
-### Files
-
-- `styles/README.md` - Build process documentation
-- `postcss.config.cjs` - PostCSS and PurgeCSS configuration
-- `scripts/analyze-css.js` - Bundle analysis tool
-- `package.json` - Build scripts
-
-## Conclusion
-
-This optimization reduces the CSS bundle by 42% (486 KB → 281 KB), dramatically improving both developer experience and end-user performance. The implementation uses industry-standard tools and maintains full backward compatibility while providing a foundation for future optimizations.
-
-**Key Takeaways:**
-- ✅ 42% smaller uncompressed CSS bundle (486 KB → 281 KB)
-- ✅ 39% smaller gzipped bundle (71 KB → 43 KB network transfer)
-- ✅ 98% faster DevTools filtering (60s → <1s)
-- ✅ Modern build tooling (Sass + PostCSS + PurgeCSS)
-- ✅ Source maps in development mode
-- ✅ Backward compatible - no breaking changes
-- ✅ Well documented and maintainable
-
----
-
-*Last updated: October 2025*
-*Contributors: CSS Optimization Initiative*
-

_code-samples/build-a-desktop-wallet/js/7-send-xrp/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

_code-samples/build-a-desktop-wallet/js/8-domain-verification/view/template.html

@@ -92,7 +92,7 @@
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
-                        <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
+                        <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">

_code-samples/issue-mpt-with-metadata/js/issue-mpt-with-metadata.js

@@ -10,26 +10,26 @@ const { wallet } = await client.fundWallet()
 
 // Define metadata as JSON
 const mpt_metadata = {
-  ticker: 'TBILL',
-  name: 'T-Bill Yield Token',
-  desc: 'A yield-bearing stablecoin backed by short-term U.S. Treasuries and money market instruments.',
-  icon: 'https://example.org/tbill-icon.png',
-  asset_class: 'rwa',
-  asset_subclass: 'treasury',
-  issuer_name: 'Example Yield Co.',
-  urls: [
+  t: 'TBILL',
+  n: 'T-Bill Yield Token',
+  d: 'A yield-bearing stablecoin backed by short-term U.S. Treasuries and money market instruments.',
+  i: 'https://example.org/tbill-icon.png',
+  ac: 'rwa',
+  as: 'treasury',
+  in: 'Example Yield Co.',
+  us: [
     {
-      url: 'https://exampleyield.co/tbill',
-      type: 'website',
-      title: 'Product Page'
+      u: 'https://exampleyield.co/tbill',
+      c: 'website',
+      t: 'Product Page'
     },
     {
-      url: 'https://exampleyield.co/docs',
-      type: 'docs',
-      title: 'Yield Token Docs'
+      u: 'https://exampleyield.co/docs',
+      c: 'docs',
+      t: 'Yield Token Docs'
     }
   ],
-  additional_info: {
+  ai: {
     interest_rate: '5.00%',
     interest_type: 'variable',
     yield_source: 'U.S. Treasury Bills',

_code-samples/issue-mpt-with-metadata/py/issue-mpt-with-metadata.py

@@ -12,26 +12,26 @@ wallet = generate_faucet_wallet(client, debug=True)
 
 # Define metadata as JSON
 mpt_metadata = {
-    "ticker": "TBILL",
-    "name": "T-Bill Yield Token",
-    "desc": "A yield-bearing stablecoin backed by short-term U.S. Treasuries and money market instruments.",
-    "icon": "https://example.org/tbill-icon.png",
-    "asset_class": "rwa",
-    "asset_subclass": "treasury",
-    "issuer_name": "Example Yield Co.",
-    "urls": [
+    "t": "TBILL",
+    "n": "T-Bill Yield Token",
+    "d": "A yield-bearing stablecoin backed by short-term U.S. Treasuries and money market instruments.",
+    "i": "example.org/tbill-icon.png",
+    "ac": "rwa",
+    "as": "treasury",
+    "in": "Example Yield Co.",
+    "us": [
         {
-            "url": "https://exampleyield.co/tbill",
-            "type": "website",
-            "title": "Product Page"
+            "u": "exampleyield.co/tbill",
+            "c": "website",
+            "t": "Product Page"
         },
         {
-            "url": "https://exampleyield.co/docs",
-            "type": "docs",
-            "title": "Yield Token Docs"
+            "u": "exampleyield.co/docs",
+            "c": "docs",
+            "t": "Yield Token Docs"
         }
     ],
-    "additional_info": {
+    "ai": {
         "interest_rate": "5.00%",
         "interest_type": "variable",
         "yield_source": "U.S. Treasury Bills",

about/button-showcase-primary.page.tsx

@@ -1,456 +0,0 @@
-import * as React from 'react';
-import { Button } from 'shared/components/Button';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
-
-export const frontmatter = {
-  seo: {
-    title: 'BDS Button Component Showcase',
-    description: 'Interactive showcase of the Brand Design System Button component with all states and variants.',
-  },
-};
-
-export default function ButtonShowcase() {
-  const [clickCount, setClickCount] = React.useState(0);
-
-  const handleClick = () => {
-    setClickCount((prev) => prev + 1);
-  };
-
-  return (
-    <div className="landing">
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse col-lg-8 mx-auto">
-          <h1 className="mb-0">BDS Button Component</h1>
-          <h6 className="eyebrow mb-3">Brand Design System</h6>
-        </div>
-        <p className="col-lg-8 mx-auto mt-10">
-          A scalable button component following the XRPL Brand Design System. This showcase demonstrates all states,
-          responsive behavior, and accessibility features of the Primary button variant.
-        </p>
-      </section>
-
-      {/* Basic Usage */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Basic Usage</h2>
-          <h6 className="eyebrow mb-3">Primary Variant</h6>
-        </div>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-            Get Started
-          </Button>
-          <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-            Submit Form
-          </Button>
-          <Button variant="primary" onClick={handleClick} className="mb-4">
-            Continue
-          </Button>
-        </div>
-        {clickCount > 0 && (
-          <p className="mt-4 text-muted">Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}</p>
-        )}
-      </section>
-
-      {/* States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Default state when button is ready for interaction.</p>
-                <Button variant="primary" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Button cannot be interacted with.</p>
-                <Button variant="primary" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons below or use Tab to focus them. Notice the background color change and icon swap.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="primary" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Black Color Variant */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Color Variant</h2>
-          <h6 className="eyebrow mb-3">Color Theme</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Primary buttons can use a black color theme for dark backgrounds or alternative styling needs.
-        </p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="primary" color="black" onClick={handleClick} className="me-4 mb-4">
-            Black Primary
-          </Button>
-          <Button variant="primary" color="black" onClick={handleClick} className="me-4 mb-4">
-            Dark Button
-          </Button>
-          <Button variant="primary" color="black" onClick={handleClick} className="mb-4">
-            Get Started
-          </Button>
-        </div>
-      </section>
-
-      {/* Black Variant States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Variant States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Black background with white text.</p>
-                <Button variant="primary" color="black" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Same disabled styling as green variant.</p>
-                <Button variant="primary" color="black" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons or use Tab to focus them. Notice the background darkens slightly on hover.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="primary" color="black" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="primary" color="black" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Green vs Black Comparison */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Green vs Black Comparison</h2>
-          <h6 className="eyebrow mb-3">Color Themes</h6>
-        </div>
-        <p className="mb-4 text-muted">Compare the green (default) and black color themes side by side.</p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="primary" color="green" onClick={handleClick} className="me-4 mb-4">
-            Green Primary
-          </Button>
-          <Button variant="primary" color="black" onClick={handleClick} className="mb-4">
-            Black Primary
-          </Button>
-        </div>
-      </section>
-
-      {/* Without Icon */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Without Icon</h2>
-          <h6 className="eyebrow mb-3">Icon Control</h6>
-        </div>
-        <p className="mb-4 text-muted">Buttons can be rendered without the arrow icon when needed.</p>
-        <div className="d-flex flex-wrap">
-          <Button variant="primary" showIcon={false} onClick={handleClick} className="me-4 mb-4">
-            No Icon Button
-          </Button>
-          <Button variant="primary" showIcon={true} onClick={handleClick} className="mb-4">
-            With Icon Button
-          </Button>
-        </div>
-      </section>
-
-      {/* Button Types */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button Types</h2>
-          <h6 className="eyebrow mb-3">Form Integration</h6>
-        </div>
-        <p className="mb-4 text-muted">Different button types for form submission and actions.</p>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            alert('Form submitted!');
-          }}
-          className="d-flex flex-wrap"
-        >
-          <Button variant="primary" type="submit" className="me-4 mb-4">
-            Submit Button
-          </Button>
-          <Button variant="primary" type="reset" className="me-4 mb-4">
-            Reset Button
-          </Button>
-          <Button variant="primary" type="button" onClick={handleClick} className="mb-4">
-            Regular Button
-          </Button>
-        </form>
-      </section>
-
-      {/* Responsive Behavior */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Responsive Behavior</h2>
-          <h6 className="eyebrow mb-3">Breakpoint Adjustments</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Button padding adjusts automatically across breakpoints. Resize your browser window to see the changes:
-        </p>
-        <ul className="mb-4">
-          <li>
-            <strong>Desktop (≥1024px):</strong> Padding: 8px 19px 8px 20px, Gap: 16px
-          </li>
-          <li>
-            <strong>Tablet/Mobile (≤1023px):</strong> Padding: 8px 15px 8px 16px, Gap: 16px
-          </li>
-          <li>
-            <strong>Hover/Focus:</strong> Gap increases (22px desktop, 21px mobile) with adjusted padding to maintain
-            button width
-          </li>
-        </ul>
-        <div className="d-flex flex-wrap">
-          <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-            Responsive Button
-          </Button>
-          <Button variant="primary" onClick={handleClick} className="mb-4">
-            Long Button Label Example
-          </Button>
-        </div>
-      </section>
-
-      {/* Accessibility */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Accessibility Features</h2>
-          <h6 className="eyebrow mb-3">WCAG Compliance</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Keyboard Navigation</h5>
-              <ul>
-                <li>Tab to focus buttons</li>
-                <li>Enter or Space to activate</li>
-                <li>Focus indicator: 2px black border</li>
-                <li>Disabled buttons are not focusable</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Screen Reader Support</h5>
-              <ul>
-                <li>Button labels are announced</li>
-                <li>Disabled state communicated via aria-disabled</li>
-                <li>Icons are hidden from screen readers (aria-hidden)</li>
-                <li>Semantic button element used</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Color Contrast</h5>
-          <ul>
-            <li>
-              <strong>Enabled:</strong> Black text (#141414) on Green 300 (#21E46B) = 9.06:1 (AAA)
-            </li>
-            <li>
-              <strong>Hover:</strong> Black text (#141414) on Green 200 (#70EE97) = 10.23:1 (AAA)
-            </li>
-            <li>
-              <strong>Disabled:</strong> Gray 500 (#838386) on Gray 200 (#E0E0E1) = 2.12:1 (acceptable for disabled
-              state)
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      {/* Code Examples */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Code Examples</h2>
-          <h6 className="eyebrow mb-3">Implementation</h6>
-        </div>
-        <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#1e1e1e', color: '#d4d4d4' }}>
-          <pre style={{ margin: 0, overflow: 'auto' }}>
-            <code>{`import { Button } from 'shared/components/Button';
-
-// Basic usage (green theme - default)
-<Button variant="primary" onClick={handleClick}>
-  Get Started
-</Button>
-
-// Black color theme
-<Button variant="primary" color="black" onClick={handleClick}>
-  Dark Button
-</Button>
-
-// Disabled state
-<Button variant="primary" disabled>
-  Submit
-</Button>
-
-// Without icon
-<Button variant="primary" showIcon={false}>
-  Continue
-</Button>
-
-// Form integration
-<Button variant="primary" type="submit">
-  Submit Form
-</Button>`}</code>
-          </pre>
-        </div>
-      </section>
-
-      {/* Design Specifications */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Design Specifications</h2>
-          <h6 className="eyebrow mb-3">Visual Details</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Typography</h5>
-              <ul>
-                <li>Font: Booton, sans-serif</li>
-                <li>Size: 16px</li>
-                <li>Weight: 400</li>
-                <li>Line Height: 23.2px</li>
-                <li>Letter Spacing: 0px</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Spacing & Layout</h5>
-              <ul>
-                <li>Border Radius: 100px (fully rounded)</li>
-                <li>Icon Size: 15px × 14px</li>
-                <li>Icon Gap: 16px (default), 22px (hover/focus desktop), 21px (hover/focus mobile)</li>
-                <li>Min Height: 40px (touch target)</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Green Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Border</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>#21E46B (Green 300)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>#70EE97 (Green 200)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>#70EE97 (Green 200)</div>
-              <div style={{ padding: '12px' }}>2px solid #141414</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>#21E46B (Green 300)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#838386 (Gray 500)</div>
-              <div style={{ padding: '12px' }}>#E0E0E1 (Gray 200)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Black Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Border</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#FFFFFF (White)</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#FFFFFF (White)</div>
-              <div style={{ padding: '12px' }}>rgba(20, 20, 20, 0.8) (80% Black)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#FFFFFF (White)</div>
-              <div style={{ padding: '12px' }}>rgba(20, 20, 20, 0.8) (80% Black)</div>
-              <div style={{ padding: '12px' }}>2px solid #141414</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#FFFFFF (White)</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#838386 (Gray 500)</div>
-              <div style={{ padding: '12px' }}>#E0E0E1 (Gray 200)</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

about/button-showcase-secondary.page.tsx

@@ -1,528 +0,0 @@
-import * as React from 'react';
-import { Button } from 'shared/components/Button';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
-
-export const frontmatter = {
-  seo: {
-    title: 'BDS Secondary Button Component Showcase',
-    description: 'Interactive showcase of the Brand Design System Secondary Button component with all states and variants.',
-  },
-};
-
-export default function ButtonShowcaseSecondary() {
-  const [clickCount, setClickCount] = React.useState(0);
-
-  const handleClick = () => {
-    setClickCount((prev) => prev + 1);
-  };
-
-  return (
-    <div className="landing">
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse col-lg-8 mx-auto">
-          <h1 className="mb-0">BDS Secondary Button</h1>
-          <h6 className="eyebrow mb-3">Brand Design System</h6>
-        </div>
-        <p className="col-lg-8 mx-auto mt-10">
-          The Secondary button is an outline-style button used for secondary actions. It features a transparent
-          background with a green stroke/border, providing visual hierarchy below the Primary button while maintaining
-          brand consistency.
-        </p>
-      </section>
-
-      {/* Basic Usage */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Basic Usage</h2>
-          <h6 className="eyebrow mb-3">Secondary Variant</h6>
-        </div>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="secondary" onClick={handleClick} className="me-4 mb-4">
-            Learn More
-          </Button>
-          <Button variant="secondary" onClick={handleClick} className="me-4 mb-4">
-            View Details
-          </Button>
-          <Button variant="secondary" onClick={handleClick} className="mb-4">
-            Explore
-          </Button>
-        </div>
-        {clickCount > 0 && (
-          <p className="mt-4 text-muted">
-            Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}
-          </p>
-        )}
-      </section>
-
-      {/* Primary vs Secondary Comparison */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Primary vs Secondary</h2>
-          <h6 className="eyebrow mb-3">Visual Hierarchy</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Use Primary for main actions and Secondary for supporting actions to create clear visual hierarchy.
-        </p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-            Get Started
-          </Button>
-          <Button variant="secondary" onClick={handleClick} className="mb-4">
-            Learn More
-          </Button>
-        </div>
-      </section>
-
-      {/* States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Default outline style with green border and text.</p>
-                <Button variant="secondary" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Gray border and text indicate non-interactive state.</p>
-                <Button variant="secondary" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons or use Tab to focus them. Notice the light green background fill and darker green
-            border on hover/focus.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="secondary" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="secondary" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Black Color Variant */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Color Variant</h2>
-          <h6 className="eyebrow mb-3">Color Theme</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Secondary buttons can use a black color theme with black text and border instead of green.
-        </p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="secondary" color="black" onClick={handleClick} className="me-4 mb-4">
-            Black Secondary
-          </Button>
-          <Button variant="secondary" color="black" onClick={handleClick} className="me-4 mb-4">
-            Learn More
-          </Button>
-          <Button variant="secondary" color="black" onClick={handleClick} className="mb-4">
-            View Details
-          </Button>
-        </div>
-      </section>
-
-      {/* Black Variant States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Variant States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Black border and text with transparent background.</p>
-                <Button variant="secondary" color="black" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Same disabled styling as green variant.</p>
-                <Button variant="secondary" color="black" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons or use Tab to focus them. Notice the subtle black background fill on hover.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="secondary" color="black" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="secondary" color="black" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Green vs Black Comparison */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Green vs Black Comparison</h2>
-          <h6 className="eyebrow mb-3">Color Themes</h6>
-        </div>
-        <p className="mb-4 text-muted">Compare the green (default) and black color themes side by side.</p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="secondary" color="green" onClick={handleClick} className="me-4 mb-4">
-            Green Secondary
-          </Button>
-          <Button variant="secondary" color="black" onClick={handleClick} className="mb-4">
-            Black Secondary
-          </Button>
-        </div>
-      </section>
-
-      {/* Without Icon */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Without Icon</h2>
-          <h6 className="eyebrow mb-3">Icon Control</h6>
-        </div>
-        <p className="mb-4 text-muted">Secondary buttons can also be rendered without the arrow icon.</p>
-        <div className="d-flex flex-wrap">
-          <Button variant="secondary" showIcon={false} onClick={handleClick} className="me-4 mb-4">
-            No Icon Button
-          </Button>
-          <Button variant="secondary" showIcon={true} onClick={handleClick} className="mb-4">
-            With Icon Button
-          </Button>
-        </div>
-      </section>
-
-      {/* Button Types */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button Types</h2>
-          <h6 className="eyebrow mb-3">Form Integration</h6>
-        </div>
-        <p className="mb-4 text-muted">Secondary buttons can be used for form actions like cancel or reset.</p>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            alert('Form submitted!');
-          }}
-          className="d-flex flex-wrap"
-        >
-          <Button variant="primary" type="submit" className="me-4 mb-4">
-            Submit
-          </Button>
-          <Button variant="secondary" type="reset" className="me-4 mb-4">
-            Reset
-          </Button>
-          <Button variant="secondary" type="button" onClick={() => alert('Cancelled!')} className="mb-4">
-            Cancel
-          </Button>
-        </form>
-      </section>
-
-      {/* Responsive Behavior */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Responsive Behavior</h2>
-          <h6 className="eyebrow mb-3">Breakpoint Adjustments</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Button padding adjusts automatically across breakpoints. Resize your browser window to see the changes:
-        </p>
-        <ul className="mb-4">
-          <li>
-            <strong>Desktop (≥1024px):</strong> Padding: 6px 17px 6px 18px (compensates for 2px border)
-          </li>
-          <li>
-            <strong>Tablet/Mobile (≤1023px):</strong> Padding: 6px 13px 6px 14px
-          </li>
-          <li>
-            <strong>Hover/Focus:</strong> Gap increases (22px desktop, 21px mobile) with adjusted padding
-          </li>
-        </ul>
-        <div className="d-flex flex-wrap">
-          <Button variant="secondary" onClick={handleClick} className="me-4 mb-4">
-            Responsive Button
-          </Button>
-          <Button variant="secondary" onClick={handleClick} className="mb-4">
-            Long Button Label Example
-          </Button>
-        </div>
-      </section>
-
-      {/* Accessibility */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Accessibility Features</h2>
-          <h6 className="eyebrow mb-3">WCAG Compliance</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Keyboard Navigation</h5>
-              <ul>
-                <li>Tab to focus buttons</li>
-                <li>Enter or Space to activate</li>
-                <li>Focus indicator: 2px black outline (additional to green border)</li>
-                <li>Disabled buttons are not focusable</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Screen Reader Support</h5>
-              <ul>
-                <li>Button labels are announced</li>
-                <li>Disabled state communicated via aria-disabled</li>
-                <li>Icons are hidden from screen readers (aria-hidden)</li>
-                <li>Semantic button element used</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Color Contrast</h5>
-          <ul>
-            <li>
-              <strong>Enabled:</strong> Green 400 (#0DAA3E) on White = 4.52:1 (AA for large text)
-            </li>
-            <li>
-              <strong>Hover:</strong> Green 500 (#078139) on Green 100 (#EAFCF1) = 4.87:1 (AA)
-            </li>
-            <li>
-              <strong>Disabled:</strong> Gray 400 (#A2A2A4) on White = reduced contrast (acceptable for disabled state)
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      {/* Code Examples */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Code Examples</h2>
-          <h6 className="eyebrow mb-3">Implementation</h6>
-        </div>
-        <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#1e1e1e', color: '#d4d4d4' }}>
-          <pre style={{ margin: 0, overflow: 'auto' }}>
-            <code>{`import { Button } from 'shared/components/Button';
-
-// Basic secondary button (green theme - default)
-<Button variant="secondary" onClick={handleClick}>
-  Learn More
-</Button>
-
-// Black color theme
-<Button variant="secondary" color="black" onClick={handleClick}>
-  Learn More
-</Button>
-
-// Disabled state
-<Button variant="secondary" disabled>
-  Unavailable
-</Button>
-
-// Without icon
-<Button variant="secondary" showIcon={false}>
-  Cancel
-</Button>
-
-// Primary + Secondary pairing
-<Button variant="primary" type="submit">
-  Submit
-</Button>
-<Button variant="secondary" type="button">
-  Cancel
-</Button>`}</code>
-          </pre>
-        </div>
-      </section>
-
-      {/* Design Specifications */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Design Specifications</h2>
-          <h6 className="eyebrow mb-3">Visual Details</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Typography</h5>
-              <ul>
-                <li>Font: Booton, sans-serif</li>
-                <li>Size: 16px</li>
-                <li>Weight: 400</li>
-                <li>Line Height: 23.2px</li>
-                <li>Letter Spacing: 0px</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Spacing & Layout</h5>
-              <ul>
-                <li>Border Radius: 100px (fully rounded)</li>
-                <li>Border Width: 2px solid</li>
-                <li>Icon Size: 15px × 14px</li>
-                <li>Icon Gap: 16px (default), 22px (hover/focus desktop), 21px (hover/focus mobile)</li>
-                <li>Max Height: 40px</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Green Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Border</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#0DAA3E (Green 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #0DAA3E (Green 400)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#078139 (Green 500)</div>
-              <div style={{ padding: '12px' }}>#EAFCF1 (Green 100)</div>
-              <div style={{ padding: '12px' }}>2px #078139 (Green 500)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#078139 (Green 500)</div>
-              <div style={{ padding: '12px' }}>#EAFCF1 (Green 100)</div>
-              <div style={{ padding: '12px' }}>2px #078139 + 2px #141414 outline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#0DAA3E (Green 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #0DAA3E (Green 400)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#A2A2A4 (Gray 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #A2A2A4 (Gray 400)</div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Black Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Border</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #141414 (Neutral Black)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>rgba(20, 20, 20, 0.15) (15% Black)</div>
-              <div style={{ padding: '12px' }}>2px #141414 (Neutral Black)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>rgba(20, 20, 20, 0.15) (15% Black)</div>
-              <div style={{ padding: '12px' }}>2px #141414 + 2px #141414 outline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #141414 (Neutral Black)</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#A2A2A4 (Gray 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>2px #A2A2A4 (Gray 400)</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Key Differences from Primary */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Key Differences from Primary</h2>
-          <h6 className="eyebrow mb-3">Comparison</h6>
-        </div>
-        <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-          {/* Header */}
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Aspect</div>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Primary</div>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Secondary</div>
-          </div>
-          {/* Rows */}
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Background (Enabled)</div>
-            <div style={{ padding: '12px' }}>Green 300 (#21E46B)</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Background (Hover)</div>
-            <div style={{ padding: '12px' }}>Green 200 (#70EE97)</div>
-            <div style={{ padding: '12px' }}>Green 100 (#EAFCF1)</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Border (Enabled)</div>
-            <div style={{ padding: '12px' }}>None</div>
-            <div style={{ padding: '12px' }}>2px Green 400</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Text Color (Enabled)</div>
-            <div style={{ padding: '12px' }}>Black (#141414)</div>
-            <div style={{ padding: '12px' }}>Green 400 (#0DAA3E)</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Disabled Background</div>
-            <div style={{ padding: '12px' }}>Gray 200 (#E0E0E1)</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
-            <div style={{ padding: '12px' }}>Arrow Icon</div>
-            <div style={{ padding: '12px' }}>✅ Shared</div>
-            <div style={{ padding: '12px' }}>✅ Shared</div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

about/button-showcase-tertiary.page.tsx

@@ -1,561 +0,0 @@
-import * as React from 'react';
-import { Button } from 'shared/components/Button';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
-
-export const frontmatter = {
-  seo: {
-    title: 'BDS Tertiary Button Component Showcase',
-    description: 'Interactive showcase of the Brand Design System Tertiary Button component with all states and variants.',
-  },
-};
-
-export default function ButtonShowcaseTertiary() {
-  const [clickCount, setClickCount] = React.useState(0);
-
-  const handleClick = () => {
-    setClickCount((prev) => prev + 1);
-  };
-
-  return (
-    <div className="landing">
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse col-lg-8 mx-auto">
-          <h1 className="mb-0">BDS Tertiary Button</h1>
-          <h6 className="eyebrow mb-3">Brand Design System</h6>
-        </div>
-        <p className="col-lg-8 mx-auto mt-10">
-          The Tertiary button is a text-only button style used for low-emphasis or contextual actions. It features no
-          background fill or border, appearing as a simple text link with optional arrow icon. This variant provides the
-          lowest visual emphasis while maintaining brand consistency through green text colors.
-        </p>
-      </section>
-
-      {/* Basic Usage */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Basic Usage</h2>
-          <h6 className="eyebrow mb-3">Tertiary Variant</h6>
-        </div>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="tertiary" onClick={handleClick} className="me-4 mb-4">
-            View Details
-          </Button>
-          <Button variant="tertiary" onClick={handleClick} className="me-4 mb-4">
-            Learn More
-          </Button>
-          <Button variant="tertiary" onClick={handleClick} className="mb-4">
-            Read More
-          </Button>
-        </div>
-        {clickCount > 0 && (
-          <p className="mt-4 text-muted">
-            Button clicked {clickCount} time{clickCount !== 1 ? 's' : ''}
-          </p>
-        )}
-      </section>
-
-      {/* Primary vs Secondary vs Tertiary Comparison */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Primary vs Secondary vs Tertiary</h2>
-          <h6 className="eyebrow mb-3">Visual Hierarchy</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Use Primary for main actions, Secondary for supporting actions, and Tertiary for low-emphasis or contextual
-          actions to create clear visual hierarchy.
-        </p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="primary" onClick={handleClick} className="me-4 mb-4">
-            Get Started
-          </Button>
-          <Button variant="secondary" onClick={handleClick} className="me-4 mb-4">
-            Learn More
-          </Button>
-          <Button variant="tertiary" onClick={handleClick} className="mb-4">
-            View Details
-          </Button>
-        </div>
-      </section>
-
-      {/* States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Text-only style with green text color, no background or border.</p>
-                <Button variant="tertiary" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Gray text indicates non-interactive state. Icon is hidden.</p>
-                <Button variant="tertiary" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons or use Tab to focus them. Notice the underline appears and text color darkens to
-            Green 500. The focus state adds a green outline around the text.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="tertiary" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="tertiary" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Black Color Variant */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Color Variant</h2>
-          <h6 className="eyebrow mb-3">Color Theme</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Tertiary buttons can use a black color theme with black text instead of green.
-        </p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="tertiary" color="black" onClick={handleClick} className="me-4 mb-4">
-            Black Tertiary
-          </Button>
-          <Button variant="tertiary" color="black" onClick={handleClick} className="me-4 mb-4">
-            View Details
-          </Button>
-          <Button variant="tertiary" color="black" onClick={handleClick} className="mb-4">
-            Learn More
-          </Button>
-        </div>
-      </section>
-
-      {/* Black Variant States */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Black Variant States</h2>
-          <h6 className="eyebrow mb-3">Interactive States</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Enabled State</h5>
-                <p className="mb-4 text-muted">Black text with transparent background.</p>
-                <Button variant="tertiary" color="black" onClick={handleClick}>
-                  Enabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#f5f5f7' }}>
-                <h5 className="mb-4">Disabled State</h5>
-                <p className="mb-4 text-muted">Same disabled styling as green variant.</p>
-                <Button variant="tertiary" color="black" disabled>
-                  Disabled Button
-                </Button>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Hover & Focus States</h5>
-          <p className="mb-4 text-muted">
-            Hover over the buttons or use Tab to focus them. Notice the underline appears on hover/focus.
-          </p>
-          <div className="d-flex flex-wrap">
-            <Button variant="tertiary" color="black" onClick={handleClick} className="me-4 mb-4">
-              Hover Me
-            </Button>
-            <Button variant="tertiary" color="black" onClick={handleClick} className="mb-4">
-              Focus Me (Tab)
-            </Button>
-          </div>
-        </div>
-      </section>
-
-      {/* Green vs Black Comparison */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Green vs Black Comparison</h2>
-          <h6 className="eyebrow mb-3">Color Themes</h6>
-        </div>
-        <p className="mb-4 text-muted">Compare the green (default) and black color themes side by side.</p>
-        <div className="d-flex flex-wrap align-items-center">
-          <Button variant="tertiary" color="green" onClick={handleClick} className="me-4 mb-4">
-            Green Tertiary
-          </Button>
-          <Button variant="tertiary" color="black" onClick={handleClick} className="mb-4">
-            Black Tertiary
-          </Button>
-        </div>
-      </section>
-
-      {/* Without Icon */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Without Icon</h2>
-          <h6 className="eyebrow mb-3">Icon Control</h6>
-        </div>
-        <p className="mb-4 text-muted">Tertiary buttons can also be rendered without the arrow icon.</p>
-        <div className="d-flex flex-wrap">
-          <Button variant="tertiary" showIcon={false} onClick={handleClick} className="me-4 mb-4">
-            No Icon Button
-          </Button>
-          <Button variant="tertiary" showIcon={true} onClick={handleClick} className="mb-4">
-            With Icon Button
-          </Button>
-        </div>
-      </section>
-
-      {/* Button Types */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Button Types</h2>
-          <h6 className="eyebrow mb-3">Form Integration</h6>
-        </div>
-        <p className="mb-4 text-muted">Tertiary buttons can be used for form actions like cancel or reset.</p>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            alert('Form submitted!');
-          }}
-          className="d-flex flex-wrap"
-        >
-          <Button variant="primary" type="submit" className="me-4 mb-4">
-            Submit
-          </Button>
-          <Button variant="tertiary" type="reset" className="me-4 mb-4">
-            Reset
-          </Button>
-          <Button variant="tertiary" type="button" onClick={() => alert('Cancelled!')} className="mb-4">
-            Cancel
-          </Button>
-        </form>
-      </section>
-
-      {/* Responsive Behavior */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Responsive Behavior</h2>
-          <h6 className="eyebrow mb-3">Breakpoint Adjustments</h6>
-        </div>
-        <p className="mb-4 text-muted">
-          Button padding adjusts automatically across breakpoints. Resize your browser window to see the changes:
-        </p>
-        <ul className="mb-4">
-          <li>
-            <strong>Desktop (≥1024px):</strong> Padding: 8px 20px, Gap: 16px
-          </li>
-          <li>
-            <strong>Tablet/Mobile (≤1023px):</strong> Padding: 8px 16px, Gap: 16px
-          </li>
-          <li>
-            <strong>Hover/Focus:</strong> Gap increases (22px desktop, 21px mobile) with adjusted padding
-          </li>
-        </ul>
-        <div className="d-flex flex-wrap">
-          <Button variant="tertiary" onClick={handleClick} className="me-4 mb-4">
-            Responsive Button
-          </Button>
-          <Button variant="tertiary" onClick={handleClick} className="mb-4">
-            Long Button Label Example
-          </Button>
-        </div>
-      </section>
-
-      {/* Accessibility */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Accessibility Features</h2>
-          <h6 className="eyebrow mb-3">WCAG Compliance</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Keyboard Navigation</h5>
-              <ul>
-                <li>Tab to focus buttons</li>
-                <li>Enter or Space to activate</li>
-                <li>Focus indicator: 2px green outline (Green 500)</li>
-                <li>Disabled buttons are not focusable</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Screen Reader Support</h5>
-              <ul>
-                <li>Button labels are announced</li>
-                <li>Disabled state communicated via aria-disabled</li>
-                <li>Icons are hidden from screen readers (aria-hidden)</li>
-                <li>Semantic button element used</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">Color Contrast</h5>
-          <ul>
-            <li>
-              <strong>Enabled:</strong> Green 400 (#0DAA3E) on White = 4.52:1 (AA for large text)
-            </li>
-            <li>
-              <strong>Hover/Focus:</strong> Green 500 (#078139) on White = 5.12:1 (AA)
-            </li>
-            <li>
-              <strong>Disabled:</strong> Gray 400 (#A2A2A4) on White = reduced contrast (acceptable for disabled state)
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      {/* Code Examples */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Code Examples</h2>
-          <h6 className="eyebrow mb-3">Implementation</h6>
-        </div>
-        <div className="p-6-sm p-10-until-sm br-8" style={{ backgroundColor: '#1e1e1e', color: '#d4d4d4' }}>
-          <pre style={{ margin: 0, overflow: 'auto' }}>
-            <code>{`import { Button } from 'shared/components/Button';
-
-// Basic tertiary button (green theme - default)
-<Button variant="tertiary" onClick={handleClick}>
-  View Details
-</Button>
-
-// Black color theme
-<Button variant="tertiary" color="black" onClick={handleClick}>
-  View Details
-</Button>
-
-// Disabled state
-<Button variant="tertiary" disabled>
-  Unavailable
-</Button>
-
-// Without icon
-<Button variant="tertiary" showIcon={false}>
-  Cancel
-</Button>
-
-// Primary + Secondary + Tertiary pairing
-<Button variant="primary" type="submit">
-  Submit
-</Button>
-<Button variant="secondary" type="button">
-  Learn More
-</Button>
-<Button variant="tertiary" type="button">
-  Cancel
-</Button>`}</code>
-          </pre>
-        </div>
-      </section>
-
-      {/* Design Specifications */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Design Specifications</h2>
-          <h6 className="eyebrow mb-3">Visual Details</h6>
-        </div>
-        <PageGrid>
-          <PageGridRow>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Typography</h5>
-              <ul>
-                <li>Font: Booton, sans-serif</li>
-                <li>Size: 18px (Body R token - different from Primary/Secondary)</li>
-                <li>Weight: 400</li>
-                <li>Line Height: 26.1px</li>
-                <li>Letter Spacing: -0.5px</li>
-              </ul>
-            </PageGridCol>
-            <PageGridCol span={{ base: 4, lg: 6 }}>
-              <h5 className="mb-4">Spacing & Layout</h5>
-              <ul>
-                <li>Border Radius: 100px (fully rounded - inherited but not visually apparent)</li>
-                <li>Border: None</li>
-                <li>Background: Transparent</li>
-                <li>Icon Size: 15px × 14px</li>
-                <li>Icon Gap: 16px (default), 22px (hover/focus desktop), 21px (hover/focus mobile)</li>
-                <li>Max Height: 40px</li>
-              </ul>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Green Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Decoration</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#0DAA3E (Green 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#078139 (Green 500)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#078139 (Green 500)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline + 2px Green 500 outline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#0DAA3E (Green 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#A2A2A4 (Gray 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-          </div>
-        </div>
-        <div className="mt-10">
-          <h5 className="mb-4">State Colors - Black Theme</h5>
-          <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-            {/* Header */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>State</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Color</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Background</div>
-              <div style={{ padding: '12px', fontWeight: 'bold' }}>Text Decoration</div>
-            </div>
-            {/* Rows */}
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Enabled</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Hover</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Focus</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline + 2px Black outline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-              <div style={{ padding: '12px' }}>Active</div>
-              <div style={{ padding: '12px' }}>#141414 (Neutral Black)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>Underline</div>
-            </div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-              <div style={{ padding: '12px' }}>Disabled</div>
-              <div style={{ padding: '12px' }}>#A2A2A4 (Gray 400)</div>
-              <div style={{ padding: '12px' }}>Transparent</div>
-              <div style={{ padding: '12px' }}>None</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Key Differences from Primary/Secondary */}
-      <section className="container-new py-26">
-        <div className="d-flex flex-column-reverse">
-          <h2 className="h4 mb-8">Key Differences from Primary/Secondary</h2>
-          <h6 className="eyebrow mb-3">Comparison</h6>
-        </div>
-        <div style={{ width: '100%', backgroundColor: '#FFFFFF' }}>
-          {/* Header */}
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '2px solid #E0E0E1' }}>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Aspect</div>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Primary</div>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Secondary</div>
-            <div style={{ padding: '12px', fontWeight: 'bold' }}>Tertiary</div>
-          </div>
-          {/* Rows */}
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Background (Enabled)</div>
-            <div style={{ padding: '12px' }}>Green 300 (#21E46B)</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Background (Hover)</div>
-            <div style={{ padding: '12px' }}>Green 200 (#70EE97)</div>
-            <div style={{ padding: '12px' }}>Green 100 (#EAFCF1)</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Border (Enabled)</div>
-            <div style={{ padding: '12px' }}>None</div>
-            <div style={{ padding: '12px' }}>2px Green 400</div>
-            <div style={{ padding: '12px' }}>None</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Text Color (Enabled)</div>
-            <div style={{ padding: '12px' }}>Black (#141414)</div>
-            <div style={{ padding: '12px' }}>Green 400 (#0DAA3E)</div>
-            <div style={{ padding: '12px' }}>Green 400 (#0DAA3E)</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Text Decoration</div>
-            <div style={{ padding: '12px' }}>None</div>
-            <div style={{ padding: '12px' }}>None</div>
-            <div style={{ padding: '12px' }}>Underline (hover/focus/active)</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Typography Token</div>
-            <div style={{ padding: '12px' }}>Label R (16px)</div>
-            <div style={{ padding: '12px' }}>Label R (16px)</div>
-            <div style={{ padding: '12px' }}>Body R (18px)</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Focus Indicator</div>
-            <div style={{ padding: '12px' }}>2px Black border</div>
-            <div style={{ padding: '12px' }}>2px Black outline</div>
-            <div style={{ padding: '12px' }}>2px Green 500 outline</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', borderBottom: '1px solid #E0E0E1' }}>
-            <div style={{ padding: '12px' }}>Disabled Background</div>
-            <div style={{ padding: '12px' }}>Gray 200 (#E0E0E1)</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-            <div style={{ padding: '12px' }}>Transparent</div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-            <div style={{ padding: '12px' }}>Arrow Icon</div>
-            <div style={{ padding: '12px' }}>✅ Shared</div>
-            <div style={{ padding: '12px' }}>✅ Shared</div>
-            <div style={{ padding: '12px' }}>✅ Shared</div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

about/divider-showcase.page.tsx

@@ -1,465 +0,0 @@
-import * as React from "react";
-import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
-import { Divider } from "shared/components/Divider";
-
-export const frontmatter = {
-  seo: {
-    title: 'Divider Component Showcase',
-    description: "A comprehensive showcase of all Divider component variants, weights, colors, and orientations in the XRPL.org Design System.",
-  }
-};
-
-export default function DividerShowcase() {
-  return (
-    <div className="landing">
-      <div className="overflow-hidden">
-        <section className="py-26 text-center">
-          <div className="col-lg-8 mx-auto">
-            <h6 className="eyebrow mb-3">Component Showcase</h6>
-            <h1 className="mb-4">Divider Component</h1>
-            <p className="longform">
-              A comprehensive showcase of all Divider component variants, weights, colors, and orientations.
-            </p>
-          </div>
-        </section>
-
-        {/* Weight by Color Matrix - Horizontal */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Horizontal Dividers: Weight by Color Matrix</h2>
-              <div className="mb-10">
-                {/* Header Row */}
-                <div className="d-flex flex-row mb-4" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <h6 className="mb-0">Weight</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Gray</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Black</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Green</h6>
-                  </div>
-                </div>
-
-                {/* Thin Row */}
-                <div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Thin</strong>
-                    <br />
-                    <small className="text-muted">0.5px</small>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="thin" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="thin" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="thin" color="green" />
-                  </div>
-                </div>
-
-                {/* Regular Row */}
-                <div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Regular</strong>
-                    <br />
-                    <small className="text-muted">1px</small>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="regular" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="regular" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="regular" color="green" />
-                  </div>
-                </div>
-
-                {/* Strong Row */}
-                <div className="d-flex flex-row align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Strong</strong>
-                    <br />
-                    <small className="text-muted">2px</small>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="strong" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="strong" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Divider weight="strong" color="green" />
-                  </div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        {/* Vertical Dividers */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Vertical Dividers: Weight by Color Matrix</h2>
-              <div className="mb-10">
-                {/* Header Row */}
-                <div className="d-flex flex-row mb-4" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <h6 className="mb-0">Weight</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Gray</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Black</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Green</h6>
-                  </div>
-                </div>
-
-                {/* Thin Row */}
-                <div className="d-flex flex-row mb-5 align-items-stretch" style={{ gap: '2rem', height: '120px' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }} className="d-flex align-items-center">
-                    <div>
-                      <strong>Thin</strong>
-                      <br />
-                      <small className="text-muted">0.5px</small>
-                    </div>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="thin" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="thin" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="thin" color="green" />
-                  </div>
-                </div>
-
-                {/* Regular Row */}
-                <div className="d-flex flex-row mb-5 align-items-stretch" style={{ gap: '2rem', height: '120px' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }} className="d-flex align-items-center">
-                    <div>
-                      <strong>Regular</strong>
-                      <br />
-                      <small className="text-muted">1px</small>
-                    </div>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="regular" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="regular" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="regular" color="green" />
-                  </div>
-                </div>
-
-                {/* Strong Row */}
-                <div className="d-flex flex-row align-items-stretch" style={{ gap: '2rem', height: '120px' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }} className="d-flex align-items-center">
-                    <div>
-                      <strong>Strong</strong>
-                      <br />
-                      <small className="text-muted">2px</small>
-                    </div>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="strong" color="gray" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="strong" color="black" />
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }} className="d-flex justify-content-center">
-                    <Divider orientation="vertical" weight="strong" color="green" />
-                  </div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        {/* Weights Comparison */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Stroke Weights</h2>
-              <p className="mb-4">Dividers are available in three stroke weights to represent different levels of visual hierarchy.</p>
-              <div className="d-flex flex-column gap-5 mb-10">
-                <div>
-                  <h6 className="mb-3">Thin (0.5px) - Subtle separation</h6>
-                  <Divider weight="thin" />
-                </div>
-                <div>
-                  <h6 className="mb-3">Regular (1px) - Default weight</h6>
-                  <Divider weight="regular" />
-                </div>
-                <div>
-                  <h6 className="mb-3">Strong (2px) - Emphasized boundaries</h6>
-                  <Divider weight="strong" />
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        {/* Color Variants */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Color Variants</h2>
-              <p className="mb-4">Colors are mapped from the XRPL Design System color palette:</p>
-              
-              <div className="d-flex flex-row gap-6 mb-6" style={{ flexWrap: 'wrap' }}>
-                {/* Dark Mode Colors (Default) */}
-                <div style={{ flex: '1 1 300px', minWidth: '280px' }}>
-                  <h6 className="mb-3">Dark Mode (Default)</h6>
-                  <div className="d-flex flex-column gap-3">
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#454549', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Gray:</strong> <code>$gray-600</code>
-                        <br />
-                        <small className="text-muted">#454549</small>
-                      </div>
-                    </div>
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#FFFFFF', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Black:</strong> <code>$white</code>
-                        <br />
-                        <small className="text-muted">#FFFFFF</small>
-                      </div>
-                    </div>
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#21E46B', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Green:</strong> <code>$green-300</code>
-                        <br />
-                        <small className="text-muted">#21E46B</small>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                
-                {/* Light Mode Colors */}
-                <div style={{ flex: '1 1 300px', minWidth: '280px' }}>
-                  <h6 className="mb-3">Light Mode</h6>
-                  <div className="d-flex flex-column gap-3">
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#C1C1C2', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Gray:</strong> <code>$gray-300</code>
-                        <br />
-                        <small className="text-muted">#C1C1C2</small>
-                      </div>
-                    </div>
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#111112', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Black:</strong> <code>$gray-900</code>
-                        <br />
-                        <small className="text-muted">#111112</small>
-                      </div>
-                    </div>
-                    <div className="d-flex flex-row align-items-center gap-3">
-                      <div style={{ width: '40px', height: '40px', backgroundColor: '#21E46B', borderRadius: '4px', flexShrink: 0, border: '1px solid var(--bs-border-color, #dee2e6)' }}></div>
-                      <div>
-                        <strong>Green:</strong> <code>$green-300</code>
-                        <br />
-                        <small className="text-muted">#21E46B</small>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="d-flex flex-column gap-5 mb-10">
-                <div>
-                  <h6 className="mb-3">Gray - Neutral separation (default)</h6>
-                  <Divider color="gray" weight="regular" />
-                </div>
-                <div>
-                  <h6 className="mb-3">Black - High contrast separation</h6>
-                  <Divider color="black" weight="regular" />
-                </div>
-                <div>
-                  <h6 className="mb-3">Green - Brand accent separation</h6>
-                  <Divider color="green" weight="regular" />
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        {/* Real-World Examples */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Real-World Examples</h2>
-              
-              <div className="d-flex flex-column gap-6 mb-10">
-                {/* Content Section Separation */}
-                <div>
-                  <h6 className="mb-4">Content Section Separation</h6>
-                  <div className="card p-4">
-                    <h5>Section Title</h5>
-                    <p className="mb-4">This is some content in the first section that explains something important.</p>
-                    <Divider color="gray" weight="thin" />
-                    <p className="mt-4 mb-0">This is content in the second section that follows naturally from the first.</p>
-                  </div>
-                </div>
-
-                {/* List Item Separation */}
-                <div>
-                  <h6 className="mb-4">List Item Separation</h6>
-                  <div className="card p-4">
-                    <div className="d-flex flex-column">
-                      <div className="py-3">
-                        <strong>Feature One</strong>
-                        <p className="mb-0 text-muted">Description of the first feature</p>
-                      </div>
-                      <Divider color="gray" weight="thin" />
-                      <div className="py-3">
-                        <strong>Feature Two</strong>
-                        <p className="mb-0 text-muted">Description of the second feature</p>
-                      </div>
-                      <Divider color="gray" weight="thin" />
-                      <div className="py-3">
-                        <strong>Feature Three</strong>
-                        <p className="mb-0 text-muted">Description of the third feature</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Vertical Divider Between Columns */}
-                <div>
-                  <h6 className="mb-4">Vertical Divider Between Columns</h6>
-                  <div className="card p-4">
-                    <div className="d-flex flex-row align-items-stretch" style={{ gap: '1.5rem', minHeight: '100px' }}>
-                      <div style={{ flex: '1 1 0' }}>
-                        <strong>Column One</strong>
-                        <p className="mb-0 text-muted">Content for the first column</p>
-                      </div>
-                      <Divider orientation="vertical" color="gray" weight="regular" />
-                      <div style={{ flex: '1 1 0' }}>
-                        <strong>Column Two</strong>
-                        <p className="mb-0 text-muted">Content for the second column</p>
-                      </div>
-                      <Divider orientation="vertical" color="gray" weight="regular" />
-                      <div style={{ flex: '1 1 0' }}>
-                        <strong>Column Three</strong>
-                        <p className="mb-0 text-muted">Content for the third column</p>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Major Section Break */}
-                <div>
-                  <h6 className="mb-4">Major Section Break (Strong + Green)</h6>
-                  <div className="card p-4">
-                    <h5>Primary Section</h5>
-                    <p className="mb-4">This section contains the main content of the page.</p>
-                    <Divider color="green" weight="strong" />
-                    <h5 className="mt-4">Secondary Section</h5>
-                    <p className="mb-0">This section is clearly separated with a strong branded divider.</p>
-                  </div>
-                </div>
-
-                {/* Navigation Separator */}
-                <div>
-                  <h6 className="mb-4">Navigation Item Separator</h6>
-                  <div className="card p-4">
-                    <div className="d-flex flex-row align-items-center" style={{ gap: '1rem', height: '24px' }}>
-                      <span>Home</span>
-                      <Divider orientation="vertical" color="gray" weight="thin" />
-                      <span>Documentation</span>
-                      <Divider orientation="vertical" color="gray" weight="thin" />
-                      <span>API Reference</span>
-                      <Divider orientation="vertical" color="gray" weight="thin" />
-                      <span>Community</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        {/* API Reference */}
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Component API</h2>
-              <div className="mb-10">
-                {/* Header Row */}
-                <div className="d-flex flex-row mb-3 pb-2" style={{ gap: '1rem', borderBottom: '2px solid var(--bs-border-color, #dee2e6)' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><strong>Prop</strong></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><strong>Type</strong></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><strong>Default</strong></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><strong>Description</strong></div>
-                </div>
-                
-                {/* orientation */}
-                <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>orientation</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>'horizontal' | 'vertical'</code></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>'horizontal'</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>Sets the divider orientation</div>
-                </div>
-                <Divider weight="thin" color="gray" />
-                
-                {/* weight */}
-                <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>weight</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>'thin' | 'regular' | 'strong'</code></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>'regular'</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>Controls the stroke thickness</div>
-                </div>
-                <Divider weight="thin" color="gray" />
-                
-                {/* color */}
-                <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>color</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>'gray' | 'black' | 'green'</code></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>'gray'</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>Sets the divider color</div>
-                </div>
-                <Divider weight="thin" color="gray" />
-                
-                {/* className */}
-                <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>className</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>string</code></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>''</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>Additional CSS classes</div>
-                </div>
-                <Divider weight="thin" color="gray" />
-                
-                {/* decorative */}
-                <div className="d-flex flex-row py-3" style={{ gap: '1rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>decorative</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}><code>boolean</code></div>
-                  <div style={{ width: '120px', flexShrink: 0 }}><code>true</code></div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>Whether the divider is purely decorative (hides from screen readers)</div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-      </div>
-    </div>
-  );
-}

about/grid-showcase.page.tsx

@@ -1,409 +0,0 @@
-import * as React from "react";
-import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
-
-export const frontmatter = {
-  seo: {
-    title: 'PageGrid Showcase',
-    description: "A comprehensive showcase and documentation for the PageGrid component system.",
-  }
-};
-
-// Demo component with bordered divs to visualize grid
-const GridDemo = ({ title, description, children, code }: { 
-  title: string; 
-  description?: string; 
-  children: React.ReactNode;
-  code?: string;
-}) => (
-  <div className="mb-26">
-    <h3 className="h4 mb-4">{title}</h3>
-    {description && <p className="mb-6">{description}</p>}
-    {code && (
-      <div className="mb-6 p-4 bg-light br-4 text-black" style={{ fontFamily: 'monospace', fontSize: '14px', overflow: 'auto' }}>
-        <pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#000' }}>{code}</pre>
-      </div>
-    )}
-    <div style={{ 
-      border: '1px dashed #ccc', 
-      padding: '16px', 
-      backgroundColor: '#f9f9f9',
-      borderRadius: '8px'
-    }}>
-      {children}
-    </div>
-  </div>
-);
-
-// Bordered column component for visualization
-const BorderedCol = ({ children, ...props }: { children: React.ReactNode } & any) => (
-  <PageGridCol 
-    {...props}
-    style={{
-      border: '1px solid #0069ff',
-      backgroundColor: 'rgba(0, 105, 255, 0.05)',
-      padding: '16px',
-      minHeight: '60px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textAlign: 'center',
-      ...props.style
-    }}
-  >
-    {children}
-  </PageGridCol>
-);
-
-export default function GridShowcase() {
-  return (
-    <div className="landing">
-      <PageGrid className="py-26">
-        <PageGridRow>
-          <PageGridCol>
-            <div className="text-center mb-26">
-              <h1 className="h2 mb-4">PageGrid Component Showcase</h1>
-              <p className="longform">
-                A comprehensive guide to using the PageGrid responsive grid system. 
-                All examples below use bordered divs to visualize the grid structure.
-              </p>
-            </div>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Basic Grid Structure */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Basic Grid Structure"
-              description="The PageGrid system consists of three components: PageGrid (container), PageGrid.Row (rows), and PageGrid.Col (columns)."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={6}>Column 1</PageGrid.Col>
-    <PageGrid.Col span={6}>Column 2</PageGrid.Col>
-    <PageGrid.Col>[No span set]</PageGrid.Col>
-    <PageGrid.Col>[No span set]</PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={6}>span={6}</BorderedCol>
-                  <BorderedCol span={6}>span={6}</BorderedCol>
-                  <BorderedCol>[No span set]</BorderedCol>
-                  <BorderedCol>[No span set]</BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Equal Columns */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Equal Width Columns"
-              description="Create equal-width columns that automatically divide the available space."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={4}>Column 1</PageGrid.Col>
-    <PageGrid.Col span={4}>Column 2</PageGrid.Col>
-    <PageGrid.Col span={4}>Column 3</PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={4}>span={4}</BorderedCol>
-                  <BorderedCol span={4}>span={4}</BorderedCol>
-                  <BorderedCol span={4}>span={4}</BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Auto and Fill */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Auto and Fill Columns"
-              description="Use 'auto' for columns that size to their content, and 'fill' for columns that take remaining space."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span="auto">Auto</PageGrid.Col>
-    <PageGrid.Col span="fill">Fill</PageGrid.Col>
-    <PageGrid.Col span="auto">Auto</PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span="auto">span="auto"</BorderedCol>
-                  <BorderedCol span="fill">span="fill"</BorderedCol>
-                  <BorderedCol span="auto">span="auto"</BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Responsive Layout */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Responsive Layout"
-              description="Create layouts that adapt to different screen sizes using responsive span values."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={{
-      base: 12,  // Full width on mobile
-      md: 6,     // Half width on tablet
-      lg: 4      // Third width on desktop
-    }}>
-      Responsive Column
-    </PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={{ base: 4, md: 6, lg: 4 }}>
-                    base: 4, md: 6, lg: 4
-                  </BorderedCol>
-                  <BorderedCol span={{ base: 4, md: 6, lg: 4 }}>
-                    base: 4, md: 6, lg: 4
-                  </BorderedCol>
-                  <BorderedCol span={{ base: 4, md: 8, lg: 4 }}>
-                    base: 4, md: 8, lg: 4
-                  </BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Offsets */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Column Offsets"
-              description="Use offsets to push columns to the right, useful for centering content or creating spacing."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={8} offset={2}>
-      Centered (8 columns with 2 offset)
-    </PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={8} offset={{ lg: 2 }}>
-                    span={8}, offset: lg: 2
-                  </BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Responsive Offsets */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Responsive Offsets"
-              description="Offsets can also be responsive, changing at different breakpoints."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col 
-      span={6}
-      offset={{
-        base: 0,  // No offset on mobile
-        md: 3      // Offset by 3 on tablet+
-      }}
-    >
-      Responsive Offset
-    </PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={6} offset={{ base: 0, md: 3 }}>
-                    span={6}, offset: base=0, md=3
-                  </BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Complex Layout */}
-        <PageGridRow>
-          <PageGridCol>
-            <GridDemo
-              title="Complex Layout Example"
-              description="A real-world example showing a sidebar and main content area."
-              code={`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={{ base: 12, lg: 4 }}>
-      Sidebar
-    </PageGrid.Col>
-    <PageGrid.Col span={{ base: 12, lg: 8 }}>
-      Main Content
-    </PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}
-            >
-              <PageGrid>
-                <PageGridRow>
-                  <BorderedCol span={{ base: 4, lg: 4 }} style={{ backgroundColor: 'rgba(255, 200, 0, 0.1)' }}>
-                    Sidebar<br />(base: 4, lg: 4)
-                  </BorderedCol>
-                  <BorderedCol span={{ base: 4, lg: 8 }} style={{ backgroundColor: 'rgba(0, 200, 255, 0.1)' }}>
-                    Main Content<br />(base: 4, lg: 8)
-                  </BorderedCol>
-                </PageGridRow>
-              </PageGrid>
-            </GridDemo>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Breakpoints Documentation */}
-        <PageGridRow>
-          <PageGridCol>
-            <div className="mb-26">
-              <h2 className="h3 mb-6">Breakpoints</h2>
-              <p className="mb-6">
-                The PageGrid system uses the following breakpoints:
-              </p>
-              <div style={{ width: '100%', backgroundColor: '#FFFFFF', borderRadius: '4px', overflow: 'hidden', border: '1px solid #EEE', marginBottom: '24px' }}>
-                {/* Header */}
-                <div style={{
-                  display: 'grid',
-                  gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr',
-                  borderBottom: '2px solid #E0E0E1',
-                  background: '#FAFAFA'
-                }}>
-                  <div style={{ padding: '12px', fontWeight: 600 }}>Breakpoint</div>
-                  <div style={{ padding: '12px', fontWeight: 600 }}>Min Width</div>
-                  <div style={{ padding: '12px', fontWeight: 600 }}>Columns</div>
-                  <div style={{ padding: '12px', fontWeight: 600 }}>Container Padding</div>
-                </div>
-
-                {/* Rows */}
-                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
-                  <div style={{ padding: '12px' }}><code>base</code></div>
-                  <div style={{ padding: '12px' }}>0px</div>
-                  <div style={{ padding: '12px' }}>4 columns</div>
-                  <div style={{ padding: '12px' }}>16px</div>
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
-                  <div style={{ padding: '12px' }}><code>sm</code></div>
-                  <div style={{ padding: '12px' }}>576px</div>
-                  <div style={{ padding: '12px' }}>8 columns</div>
-                  <div style={{ padding: '12px' }}>24px</div>
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
-                  <div style={{ padding: '12px' }}><code>md</code></div>
-                  <div style={{ padding: '12px' }}>576px</div>
-                  <div style={{ padding: '12px' }}>8 columns</div>
-                  <div style={{ padding: '12px' }}>24px</div>
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr', borderBottom: '1px solid #E0E0E1' }}>
-                  <div style={{ padding: '12px' }}><code>lg</code></div>
-                  <div style={{ padding: '12px' }}>992px</div>
-                  <div style={{ padding: '12px' }}>12 columns</div>
-                  <div style={{ padding: '12px' }}>32px</div>
-                </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1.5fr' }}>
-                  <div style={{ padding: '12px' }}><code>xl</code></div>
-                  <div style={{ padding: '12px' }}>1280px</div>
-                  <div style={{ padding: '12px' }}>12 columns</div>
-                  <div style={{ padding: '12px' }}>112px (max-width: 1440px)</div>
-                </div>
-              </div>
-            </div>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Usage Documentation */}
-        <PageGridRow>
-          <PageGridCol>
-            <div className="mb-26">
-              <h2 className="h3 mb-6">Usage</h2>
-              
-              <h4 className="h5 mb-4">Import</h4>
-              <div className="p-4 bg-light br-4 mb-6" style={{ fontFamily: 'monospace', fontSize: '14px' }}>
-                <pre style={{ margin: 0, color: '#000' }}>{`import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";`}</pre>
-              </div>
-
-              <h4 className="h5 mb-4">Basic Example</h4>
-              <div className="p-4 bg-light br-4 mb-6" style={{ fontFamily: 'monospace', fontSize: '14px', overflow: 'auto' }}>
-                <pre style={{ margin: 0, whiteSpace: 'pre-wrap', color: '#000' }}>{`<PageGrid>
-  <PageGrid.Row>
-    <PageGrid.Col span={6}>
-      Column 1
-    </PageGrid.Col>
-    <PageGrid.Col span={6}>
-      Column 2
-    </PageGrid.Col>
-  </PageGrid.Row>
-</PageGrid>`}</pre>
-              </div>
-
-              <h4 className="h5 mb-4">Props</h4>
-              <div className="mb-6">
-                <h5 className="h6 mb-3">PageGrid.Col Props</h5>
-                <ul>
-                  <li><code>span</code> - Column span (number, "auto", "fill", or responsive object)</li>
-                  <li><code>offset</code> - Column offset (number or responsive object)</li>
-                  <li><code>className</code> - Additional CSS classes</li>
-                  <li>All standard HTML div attributes</li>
-                </ul>
-              </div>
-
-              <h4 className="h5 mb-4">Span Values</h4>
-              <ul className="mb-6">
-                <li><strong>Number</strong> (e.g., 1-12): Fixed column width</li>
-                <li><strong>"auto"</strong>: Column sizes to its content</li>
-                <li><strong>"fill"</strong>: Column fills remaining space</li>
-                <li><strong>Responsive Object</strong>: Different spans for different breakpoints</li>
-              </ul>
-
-              <h4 className="h5 mb-4">Best Practices</h4>
-              <ul>
-                <li>Always wrap columns in a <code>PageGrid.Row</code></li>
-                <li>Use responsive values for mobile-first design</li>
-                <li>Total column spans in a row should not exceed the grid columns (4 for base, 8 for sm/md, 12 for lg/xl)</li>
-                <li>Use offsets for spacing and centering content</li>
-                <li>Test layouts at all breakpoints</li>
-              </ul>
-            </div>
-          </PageGridCol>
-        </PageGridRow>
-
-        {/* Visual Grid Demonstration */}
-        <PageGridRow>
-          <PageGridCol>
-            <div className="mb-26">
-              <h2 className="h3 mb-6">Visual Grid Demonstration</h2>
-              <p className="mb-6">
-                Below is a visual representation of the 12-column grid system at the lg breakpoint:
-              </p>
-              <PageGrid>
-                <PageGridRow>
-                  {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((num) => (
-                    <BorderedCol key={num} span={{ base: 2, lg: 1 }} style={{ fontSize: '12px' }}>
-                      {num}
-                    </BorderedCol>
-                  ))}
-                </PageGridRow>
-              </PageGrid>
-            </div>
-          </PageGridCol>
-        </PageGridRow>
-      </PageGrid>
-    </div>
-  );
-}

about/history.page.tsx

@@ -24,6 +24,14 @@ export default function History() {
   return (
     <div className="landing">
       <div className="overflow-hidden">
+        <div className="position-relative">
+          <img
+            alt="background orange waves"
+            src={require("../static/img/backgrounds/history-orange.svg")}
+            className="landing-bg"
+            id="history-orange"
+          />
+        </div>
         <section className="py-26 text-center">
           <div className="col-lg-5 mx-auto text-center">
             <div className="d-flex flex-column-reverse">
@@ -53,6 +61,13 @@ export default function History() {
             </p>
           </div>
         </section>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="background purple waves"
+            src={require("../static/img/backgrounds/history-purple.svg")}
+            id="history-purple"
+          />
+        </div>
         <div className="container-new marketing-wrapper">
           <section className="row mb-60">
             <div className="timeline">

about/impact.page.tsx

@@ -32,6 +32,14 @@ export default function Impact() {
   return (
     <div className="landing page-impact">
       <div className="overflow-hidden">
+        <div className="position-relative d-none-sm">
+          <img
+            alt="purple waves"
+            src={require("../static/img/backgrounds/community-purple.svg")}
+            className="landing-bg"
+            id="impact-purple"
+          />
+        </div>
         <section className="container-new py-26 text-lg-center">
           <div className="p-0 col-lg-8 mx-lg-auto">
             <div className="d-flex flex-column-reverse">
@@ -44,6 +52,13 @@ export default function Impact() {
             </div>
           </div>
         </section>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="green waves"
+            src={require("../static/img/backgrounds/home-green.svg")}
+            id="impact-green"
+          />
+        </div>
         {/* World map */}
         <section className="container-new py-10">
           <div className="col-sm-10 col-lg-6 offset-md-3 p-10-until-sm pl-0-sm pr-0-sm">
@@ -118,6 +133,16 @@ export default function Impact() {
         {/* Card */}
         <section className="container-new py-26">
           <div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
+            <img
+              alt="purple waves"
+              src={require("../static/img/backgrounds/cta-community-purple.svg")}
+              className="cta cta-top-left"
+            />
+            <img
+              alt="green waves"
+              src={require("../static/img/backgrounds/cta-calculator-green.svg")}
+              className="cta cta-bottom-right"
+            />
             <div className="z-index-1 position-relative">
               <div className="d-flex flex-column-reverse">
                 <h2 className="h4 h2-sm mb-10-until-sm mb-8-sm">

about/index.page.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { PageGrid, PageGridCol, PageGridRow } from "shared/components/PageGrid/page-grid";
 
 export const frontmatter = {
   seo: {
@@ -79,6 +78,14 @@ export default function XrplOverview() {
             />
           </div>
         </div>
+        <div className="position-relative">
+          <img
+            alt="purple waves"
+            src={require("../static/img/backgrounds/xrpl-overview-purple.svg")}
+            className="landing-bg"
+            id="xrpl-overview-purple"
+          />
+        </div>
         <section className="py-26 text-center">
           <div className="col-lg-5 mx-auto text-center">
             <div className="d-flex flex-column-reverse">
@@ -93,6 +100,13 @@ export default function XrplOverview() {
             </div>
           </div>
         </section>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="orange waves"
+            src={require("../static/img/backgrounds/xrpl-overview-orange.svg")}
+            id="xrpl-overview-orange"
+          />
+        </div>
         <section className="container-new py-26">
           <div className="card-grid card-grid-2xN">
             <div className="col">
@@ -119,7 +133,7 @@ export default function XrplOverview() {
                   {translate("Read Technical Docs")}
                 </Link>{" "}
                 <a
-                  className="ms-4 video-external-link"
+                  className="ml-4 video-external-link"
                   target="_blank"
                   href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
                 >
@@ -154,7 +168,7 @@ export default function XrplOverview() {
                   {translate("Read Technical Docs")}
                 </Link>{" "}
                 <a
-                  className="ms-4 video-external-link"
+                  className="ml-4 video-external-link"
                   target="_blank"
                   href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
                 >
@@ -164,9 +178,9 @@ export default function XrplOverview() {
             </div>
           </div>
         </section>
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGrid.Col span={{ base: 4, lg: 6 }}>
+        <section className="container-new py-26">
+          <div className="card-grid card-grid-2xN">
+            <div className="col">
               <div className="d-flex flex-column-reverse">
                 <h2 className="h4 h2-sm mb-8">
                   {translate("How the Consensus Protocol works")}
@@ -193,23 +207,25 @@ export default function XrplOverview() {
               <p className="mb-0">
                 {translate('about.index.consensus.ppart1', 'Currently, over 120 ')}
                 <a href="https://livenet.xrpl.org/network/validators" target="_blank">{translate('about.index.consensus.ppart2', 'validators')}</a>
-                    {translate('about.index.consensus.ppart3', ' are active on the ledger, operated by universities, exchanges, businesses, and individuals. As the validator pool grows, the consensus protocol ensures decentralization of the blockchain over time.')}
+                   {translate('about.index.consensus.ppart3', ' are active on the ledger, operated by universities, exchanges, businesses, and individuals. As the validator pool grows, the consensus protocol ensures decentralization of the blockchain over time.')}
               </p>
-            </PageGrid.Col>
-            <PageGrid.Col span={{ base: 4, lg: 6 }}>
-              <div className="col mb-16-sm">
-                <img
-                  className="mw-100"
-                  id="validator-graphic"
-                  alt="(Graphic: Validators in Consensus)"
-                />
-              </div>
-              </PageGrid.Col>
-            </PageGridRow>
-        </PageGrid>
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGrid.Col span={{ base: 4, lg: 6 }} offset={{ lg: 3 }} className="p-6-sm p-10-until-sm br-8 cta-card">
+            </div>
+            <div className="col mb-16-sm">
+              <img
+                className="mw-100"
+                id="validator-graphic"
+                alt="(Graphic: Validators in Consensus)"
+              />
+            </div>
+          </div>
+        </section>
+        <section className="container-new py-26">
+          <div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
+            <img
+              alt="green waves"
+              src={require("../static/img/backgrounds/cta-xrpl-overview-green.svg")}
+              className="cta cta-bottom-right"
+            />
             <div className="z-index-1 position-relative">
               <h2 className="h4 mb-10-until-sm mb-8-sm">
                 {translate("A Sustainable Blockchain")}
@@ -223,13 +239,11 @@ export default function XrplOverview() {
                 {translate("Learn More")}
               </a>
             </div>
-            </PageGrid.Col>
-          </PageGridRow>
-        </PageGrid>
-        
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGrid.Col span={{ base: 4, lg: 6 }}>
+          </div>
+        </section>
+        <section className="container-new py-26">
+          <div className="card-grid card-grid-2xN">
+            <div className="col">
               <div className="d-flex flex-column-reverse">
                 <h4 className="h4 h2-sm mb-8">
                   {translate("Building with confidence on ")}
@@ -251,8 +265,8 @@ export default function XrplOverview() {
               <a className="btn btn-primary btn-arrow mb-10-sm" href="/about/uses">
                 {translate("Explore More")}
               </a>
-            </PageGrid.Col>
-            <PageGrid.Col span={{ base: 4, lg: 6 }}>
+            </div>
+            <div className="col mb-0">
               <div className="d-flex flex-column-reverse">
                 <h4 className="h4 h2-sm mb-8">
                   {translate("Creating new value for long-term growth")}
@@ -269,11 +283,11 @@ export default function XrplOverview() {
                   "Significant investment in development, along with low transaction costs and energy usage, is fueling growth and opening up a wide variety of use cases at scale."
                 )}
               </p>
-            </PageGrid.Col>
-          </PageGridRow>
-        </PageGrid>
+            </div>
+          </div>
+        </section>
         <section className="container-new py-26">
-          <div className="d-flex flex-column-reverse col-xl-6 mb-lg-4 ps-0 ">
+          <div className="d-flex flex-column-reverse col-xl-6 mb-lg-4 pl-0 ">
             <h2 className="h4 h2-sm">
               {translate(
                 "Watch the explainer video series to learn more about the XRP Ledger"
@@ -361,6 +375,11 @@ export default function XrplOverview() {
         </section>
         <section className="container-new py-26">
           <div className="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
+            <img
+              alt="orange waves"
+              src={require("../static/img/backgrounds/cta-xrpl-overview-orange.svg")}
+              className="cta cta-bottom-right"
+            />
             <div className="z-index-1 position-relative">
               <h4 className="h4 mb-10-until-sm mb-8-sm">
                 {translate("Tomorrow’s Blockchain Starts With You")}
@@ -388,7 +407,7 @@ export default function XrplOverview() {
         </section>
         <section className="container-new py-26">
           <div
-            className="col-md-10 offset-md-1 col-lg-8 offset-lg-2 ps-0 pe-0 mini-faq"
+            className="col-md-6 offset-md-3 w-100 pl-0 pr-0 mini-faq"
             id="minifaq-accordion"
           >
             {faqs.map((faq, index) => (
@@ -396,8 +415,8 @@ export default function XrplOverview() {
                 <a
                   href={`#heading${index + 1}`}
                   className="expander collapsed"
-                  data-bs-toggle="collapse"
-                  data-bs-target={`#answer${index + 1}`}
+                  data-toggle="collapse"
+                  data-target={`#answer${index + 1}`}
                   aria-expanded="false"
                   aria-controls={`answer${index + 1}`}
                 >

about/link-showcase.page.tsx

@@ -1,310 +0,0 @@
-import * as React from "react";
-import { PageGrid, PageGridRow, PageGridCol } from "shared/components/PageGrid/page-grid";
-import { Link } from "shared/components/Link/Link";
-
-export const frontmatter = {
-  seo: {
-    title: 'Link Component Showcase',
-    description: "A comprehensive showcase of all Link component variants, sizes, and states in the XRPL.org Design System.",
-  }
-};
-
-export default function LinkShowcase() {
-  return (
-    <div className="landing">
-      <div className="overflow-hidden">
-        <section className="py-26 text-center">
-          <div className="col-lg-8 mx-auto">
-            <h6 className="eyebrow mb-3">Component Showcase</h6>
-            <h1 className="mb-4">Link Component</h1>
-            <p className="longform">
-              A comprehensive showcase of all Link component variants, sizes, and states.
-            </p>
-          </div>
-        </section>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Size by Variant Matrix</h2>
-              <div className="mb-10">
-                {/* Header Row */}
-                <div className="d-flex flex-row mb-4" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <h6 className="mb-0">Size</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Internal Links</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">External Links</h6>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <h6 className="mb-0">Disabled State</h6>
-                  </div>
-                </div>
-                {/* Small Row */}
-                <div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Small</strong>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="/docs" variant="internal" size="small">
-                      Small Internal Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="https://example.com" variant="external" size="small" target="_blank" rel="noopener noreferrer">
-                      Small External Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="#" variant="internal" size="small" disabled>
-                      Disabled Internal Link
-                    </Link>
-                  </div>
-                </div>
-                {/* Medium Row */}
-                <div className="d-flex flex-row mb-5 align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Medium</strong>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="/docs" variant="internal" size="medium">
-                      Medium Internal Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="https://example.com" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
-                      Medium External Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="#" variant="external" size="medium" disabled>
-                      Disabled External Link
-                    </Link>
-                  </div>
-                </div>
-                {/* Large Row */}
-                <div className="d-flex flex-row align-items-center" style={{ gap: '2rem' }}>
-                  <div style={{ width: '120px', flexShrink: 0 }}>
-                    <strong>Large</strong>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="/docs" variant="internal" size="large">
-                      Large Internal Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="https://example.com" variant="external" size="large" target="_blank" rel="noopener noreferrer">
-                      Large External Link
-                    </Link>
-                  </div>
-                  <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                    <Link href="#" variant="internal" size="large" disabled>
-                      Disabled Internal Link
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Sizes</h2>
-              <div className="d-flex flex-column gap-4 mb-10">
-                <div>
-                  <h6 className="mb-3">Small</h6>
-                  <Link href="/docs" size="small">
-                    Small Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">Medium</h6>
-                  <Link href="/docs" size="medium">
-                    Medium Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">Large</h6>
-                  <Link href="/docs" size="large">
-                    Large Link
-                  </Link>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Color States</h2>
-              <p className="mb-4">Links automatically handle color states via CSS per theme:</p>
-              
-              <div className="d-flex flex-row gap-6 mb-6" style={{ flexWrap: 'wrap' }}>
-                {/* Light Mode Colors */}
-                <div style={{ flex: '1 1 300px', minWidth: '280px' }}>
-                  <h6 className="mb-3">Light Mode</h6>
-                  <ul className="mb-0">
-                    <li><strong>Enabled:</strong> Green 400 <code style={{ color: '#0DAA3E' }}>#0DAA3E</code></li>
-                    <li><strong>Hover/Focus:</strong> Green 500 <code style={{ color: '#078139' }}>#078139</code> + underline</li>
-                    <li><strong>Active:</strong> Green 400 <code style={{ color: '#0DAA3E' }}>#0DAA3E</code> + underline</li>
-                    <li><strong>Visited:</strong> Lilac 400 <code style={{ color: '#7649E3' }}>#7649E3</code></li>
-                    <li><strong>Disabled:</strong> Gray 400 <code style={{ color: '#A2A2A4' }}>#A2A2A4</code></li>
-                    <li><strong>Focus Outline:</strong> Black <code style={{ color: '#000000' }}>#000000</code></li>
-                  </ul>
-                </div>
-                
-                {/* Dark Mode Colors */}
-                <div style={{ flex: '1 1 300px', minWidth: '280px' }}>
-                  <h6 className="mb-3">Dark Mode</h6>
-                  <ul className="mb-0">
-                    <li><strong>Enabled:</strong> Green 300 <code style={{ color: '#21E46B' }}>#21E46B</code></li>
-                    <li><strong>Hover/Focus:</strong> Green 200 <code style={{ color: '#70EE97' }}>#70EE97</code> + underline</li>
-                    <li><strong>Active:</strong> Green 300 <code style={{ color: '#21E46B' }}>#21E46B</code> + underline</li>
-                    <li><strong>Visited:</strong> Lilac 300 <code style={{ color: '#C0A7FF' }}>#C0A7FF</code></li>
-                    <li><strong>Disabled:</strong> Gray 500 <code style={{ color: '#838386' }}>#838386</code></li>
-                    <li><strong>Focus Outline:</strong> White <code style={{ color: '#FFFFFF', backgroundColor: '#333', padding: '0 4px' }}>#FFFFFF</code></li>
-                  </ul>
-                </div>
-              </div>
-              
-              <div className="d-flex flex-column gap-4 mb-10">
-                <div>
-                  <h6 className="mb-3">Default (hover to see state changes and arrow animation)</h6>
-                  <Link href="/docs" size="medium">
-                    Default Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">Disabled</h6>
-                  <Link href="#" size="medium" disabled>
-                    Disabled Link
-                  </Link>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Icon Types</h2>
-              <p className="mb-4">Arrow icons animate to chevron shape on hover (150ms cubic-bezier transition).</p>
-              <div className="d-flex flex-column gap-4 mb-10">
-                <div>
-                  <h6 className="mb-3">Arrow (Internal) - animates to chevron on hover</h6>
-                  <Link href="/docs" size="medium" icon="arrow">
-                    Arrow Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">External</h6>
-                  <Link href="https://example.com" size="medium" variant="external" target="_blank" rel="noopener noreferrer">
-                    External Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">Inline (No Icon)</h6>
-                  <p>
-                    This is a paragraph with an{" "}
-                    <Link href="/docs" variant="inline">
-                      inline link
-                    </Link>{" "}
-                    embedded within the text.
-                  </p>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Variants</h2>
-              <div className="d-flex flex-column gap-4 mb-10">
-                <div>
-                  <h6 className="mb-3">Internal</h6>
-                  <Link href="/docs" variant="internal" size="medium">
-                    Internal Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">External</h6>
-                  <Link href="https://example.com" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
-                    External Link
-                  </Link>
-                </div>
-                <div>
-                  <h6 className="mb-3">Inline</h6>
-                  <p>
-                    This is a paragraph with an{" "}
-                    <Link href="/docs" variant="inline">
-                      inline link
-                    </Link>{" "}
-                    that appears within the text flow.
-                  </p>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-
-        <PageGrid className="py-26">
-          <PageGridRow>
-            <PageGridCol span={12}>
-              <h2 className="h4 mb-6">Real-World Examples</h2>
-              <div className="d-flex flex-column gap-6 mb-10">
-                <div>
-                  <h6 className="mb-4">Navigation Links</h6>
-                  <div className="d-flex flex-column gap-3">
-                    <Link href="/docs" size="medium">
-                      View Documentation
-                    </Link>
-                    <Link href="/about" size="medium">
-                      Learn More About XRPL
-                    </Link>
-                    <Link href="https://github.com/XRPLF/xrpl-dev-portal" variant="external" size="medium" target="_blank" rel="noopener noreferrer">
-                      GitHub Repository
-                    </Link>
-                  </div>
-                </div>
-                <div>
-                  <h6 className="mb-4">Inline Text Links</h6>
-                  <p className="longform">
-                    The XRP Ledger is a decentralized public blockchain. You can{" "}
-                    <Link href="/docs" variant="inline">
-                      read the technical documentation
-                    </Link>{" "}
-                    to learn more about how it works. The network is maintained by a{" "}
-                    <Link href="/about" variant="inline">
-                      global community
-                    </Link>{" "}
-                    of developers and validators.
-                  </p>
-                </div>
-                <div>
-                  <h6 className="mb-4">Call-to-Action Links</h6>
-                  <div className="d-flex flex-column gap-3">
-                    <Link href="/docs" size="large">
-                      Get Started with XRPL
-                    </Link>
-                    <Link href="/about/uses" size="large">
-                      Explore Use Cases
-                    </Link>
-                  </div>
-                </div>
-              </div>
-            </PageGridCol>
-          </PageGridRow>
-        </PageGrid>
-      </div>
-    </div>
-  );
-}

about/uses.page.tsx

@@ -850,17 +850,17 @@ export default function Uses() {
             </div>
             <a
               className="btn d-block d-lg-none"
-              data-bs-toggle="modal"
-              data-bs-target="#categoryFilterModal"
+              data-toggle="modal"
+              data-target="#categoryFilterModal"
             >
-              <span className="me-3">
+              <span className="mr-3">
                 <img
                   src={require("../static/img/uses/usecase-filter.svg")}
                   alt="Filter button"
                 />
               </span>
               {translate("Filter by Categories")}
-              <span className="ms-3 total_count category_count">2</span>
+              <span className="ml-3 total_count category_count">2</span>
             </a>
             {/* Start company cards */}
             <div className="row col-12 m-0 p-0 mt-4 pt-2">

about/xrp.page.tsx

@@ -116,380 +116,400 @@ export default function XrpOverview() {
   const totalCols = Math.max(softwallets.length, hardwallets.length) + 1;
   return (
     <div className="landing">
-      <section className="py-26 text-center">
-        <div className="col-lg-5 mx-auto text-center">
-          <div className="d-flex flex-column-reverse">
-            <h1 className="mb-0">
-              {translate("Your Questions About XRP, Answered")}
-            </h1>
-            <h6 className="eyebrow mb-3">{translate("XRP Overview")}</h6>
-          </div>
+      <div>
+        <div className="position-relative">
+          <img
+            alt="blue waves"
+            src={require("../static/img/backgrounds/xrp-overview-blue.svg")}
+            className="landing-bg"
+            id="xrp-overview-blue"
+          />
         </div>
-      </section>
-      <section className="container-new my-20">
-        <div className="card-grid card-grid-1x2">
-          <div className="d-none-sm mt-lg-0">
-            <ul className="page-toc no-sideline p-0 sticky-top floating-nav">
-              {links.map((link) => (
-                <li
-                  key={link.hash}
-                  className={`nav-item ${
-                    activeSection === link.hash.substring(1) ? "active" : ""
-                  }`}
-                >
-                  <a
-                    className={`sidelinks nav-link ${
+        <section className="py-26 text-center">
+          <div className="col-lg-5 mx-auto text-center">
+            <div className="d-flex flex-column-reverse">
+              <h1 className="mb-0">
+                {translate("Your Questions About XRP, Answered")}
+              </h1>
+              <h6 className="eyebrow mb-3">{translate("XRP Overview")}</h6>
+            </div>
+          </div>
+        </section>
+        <section className="container-new my-20">
+          <div className="card-grid card-grid-1x2">
+            <div className="d-none-sm mt-lg-0">
+              <ul className="page-toc no-sideline p-0 sticky-top floating-nav">
+                {links.map((link) => (
+                  <li
+                    key={link.hash}
+                    className={`nav-item ${
                       activeSection === link.hash.substring(1) ? "active" : ""
                     }`}
-                    href={link.hash}
                   >
-                    {translate(link.text)}
+                    <a
+                      className={`sidelinks nav-link ${
+                        activeSection === link.hash.substring(1) ? "active" : ""
+                      }`}
+                      href={link.hash}
+                    >
+                      {translate(link.text)}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className="col mt-lg-0">
+              <div className="link-section pb-26" id="about-xrp">
+                <h2 className="h4 h2-sm mb-8">{translate("What Is XRP?")}</h2>
+                <h5 className="longform mb-10">
+                  {translate(
+                    "about.xrp.what-is-xrp.ppart1",
+                    "XRP is a digital asset that’s native to the XRP Ledger—an open-source, permissionless and decentralized ",
+                  )}
+                  <a
+                    href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {translate("about.xrp.what-is-xrp.ppart2", "blockchain technology.")}
                   </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div className="col mt-lg-0">
-            <div className="link-section pb-26" id="about-xrp">
-              <h2 className="h4 h2-sm mb-8">{translate("What Is XRP?")}</h2>
-              <h5 className="longform mb-10">
-                {translate(
-                  "about.xrp.what-is-xrp.ppart1",
-                  "XRP is a digital asset that’s native to the XRP Ledger—an open-source, permissionless and decentralized ",
-                )}
-                <a
-                  href="https://www.distributedagreement.com/2018/09/24/what-is-a-blockchain/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {translate("about.xrp.what-is-xrp.ppart2", "blockchain technology.")}
-                </a>
-                {translate("about.xrp.what-is-xrp.ppart3", " ")}
-              </h5>
+                  {translate("about.xrp.what-is-xrp.ppart3", " ")}
+                </h5>
 
-              <p className="mb-6">
-                {translate(
-                  "Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset."
-                )}
-              </p>
-              <div className="overflow-x-xs">
-                <table className="mb-10 landing-table">
-                  <thead>
-                    <tr>
-                      <th>
-                        <h6>{translate("Benefits")}</h6>
-                      </th>
-                      <th>
-                        <h6>{translate("XRP")}</h6>
-                      </th>
-                      <th>
-                        <h6>{translate("Bitcoin")}</h6>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <td>{translate("Fast")}</td>
-                      <td>{translate("3-5 seconds to settle")}</td>
-                      <td>{translate("500 seconds to settle")}</td>
-                    </tr>
-                    <tr>
-                      <td>{translate("Low-Cost")}</td>
-                      <td>{translate("$0.0002/tx")}</td>
-                      <td>{translate("$0.50/tx")}</td>
-                    </tr>
-                    <tr>
-                      <td>{translate("Scalable")}</td>
-                      <td>{translate("1,500 tx per second")}</td>
-                      <td>{translate("3 tx per second")}</td>
-                    </tr>
-                    <tr>
-                      <td>{translate("Sustainable")}</td>
-                      <td>
-                        {translate(
-                          "Environmentally sustainable (negligible energy consumption)"
-                        )}
-                      </td>
-                      <td>
-                        {translate("0.3% of global energy consumption")}
-                      </td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
-              <p className="mb-10">
-                {translate(
-                  "XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions."
-                )}
-              </p>
-              <div className="card-grid card-grid-2xN mb-10">
-                <div>
+                <p className="mb-6">
+                  {translate(
+                    "Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset."
+                  )}
+                </p>
+                <div className="overflow-x-xs">
+                  <table className="mb-10 landing-table">
+                    <thead>
+                      <tr>
+                        <th>
+                          <h6>{translate("Benefits")}</h6>
+                        </th>
+                        <th>
+                          <h6>{translate("XRP")}</h6>
+                        </th>
+                        <th>
+                          <h6>{translate("Bitcoin")}</h6>
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td>{translate("Fast")}</td>
+                        <td>{translate("3-5 seconds to settle")}</td>
+                        <td>{translate("500 seconds to settle")}</td>
+                      </tr>
+                      <tr>
+                        <td>{translate("Low-Cost")}</td>
+                        <td>{translate("$0.0002/tx")}</td>
+                        <td>{translate("$0.50/tx")}</td>
+                      </tr>
+                      <tr>
+                        <td>{translate("Scalable")}</td>
+                        <td>{translate("1,500 tx per second")}</td>
+                        <td>{translate("3 tx per second")}</td>
+                      </tr>
+                      <tr>
+                        <td>{translate("Sustainable")}</td>
+                        <td>
+                          {translate(
+                            "Environmentally sustainable (negligible energy consumption)"
+                          )}
+                        </td>
+                        <td>
+                          {translate("0.3% of global energy consumption")}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <p className="mb-10">
+                  {translate(
+                    "XRP can be sent directly without needing a central intermediary, making it a convenient instrument in bridging two different currencies quickly and efficiently. It is freely exchanged on the open market and used in the real world for enabling cross-border payments and microtransactions."
+                  )}
+                </p>
+                <div className="card-grid card-grid-2xN mb-10">
+                  <div>
+                    <img
+                      alt="briefcase"
+                      className="mw-100 mb-2 invertible-img"
+                      src={briefcaseIcon}
+                    />
+                    <h6 className="fs-4-5">
+                      {translate("Financial Institutions")}
+                    </h6>
+                    <p className="">
+                      {translate(
+                        "Leverage XRP as a bridge currency to facilitate faster, more affordable cross-border payments around the world."
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <img
+                      alt="user"
+                      className="mw-100 mb-2 invertible-img"
+                      src={userIcon}
+                    />
+                    <h6 className="fs-4-5">
+                      {translate("Individual Consumers")}
+                    </h6>
+                    <p>
+                      {translate(
+                        "Use XRP to move different currencies around the world."
+                      )}
+                    </p>
+                  </div>
+                </div>
+                <div className="mt-10 p-10 br-8 cta-card position-relative">
                   <img
-                    alt="briefcase"
-                    className="mw-100 mb-2 invertible-img"
-                    src={briefcaseIcon}
+                    alt="magenta waves"
+                    src={require("../static/img/backgrounds/cta-xrp-overview-magenta.svg")}
+                    className="cta cta-bottom-right"
                   />
-                  <h6 className="subhead-sm-r">
-                    {translate("Financial Institutions")}
-                  </h6>
-                  <p className="">
-                    {translate(
-                      "Leverage XRP as a bridge currency to facilitate faster, more affordable cross-border payments around the world."
-                    )}
-                  </p>
+                  <div className="z-index-1 position-relative">
+                    <h2 className="h4 mb-10-until-sm mb-8-sm">
+                      {translate(
+                        "The XRP Ledger is built for business."
+                      )}
+                    </h2>
+                    <p className="mb-10">
+                      {translate(
+                        "The only major L-1 blockchain that’s built for business and designed specifically to power finance use cases and applications at scale. Powerful enough to bootstrap a new economy, the XRP Ledger (XRPL) is fast, scalable, and sustainable."
+                      )}
+                    </p>
+                  </div>
                 </div>
-                <div>
+              </div>
+              <div className="py-26 link-section" id="xrp-trading">
+                <h2 className="h4 h2-sm mb-8">
+                  {translate("How Is XRP Used in Trading?")}
+                </h2>
+                <h5 className="longform mb-10">
+                  {translate(
+                    "XRP is traded on more than 100 markets and exchanges worldwide."
+                  )}
+                </h5>
+                <p className="mb-6">
+                  {translate(
+                      "about.xrp.xrp-in-trading.ppart1",
+                    "XRP’s low transaction fees, reliability and high-speed enable traders to use the digital asset as high-speed, cost-efficient and reliable collateral across trading venues—"
+                  )}
+                  <a
+                    href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/"
+                    target="_blank"
+                  >
+                    {translate("about.xrp.xrp-in-trading.ppart2","seizing arbitrage opportunities")}
+                  </a>
+                  {translate(
+                      "about.xrp.xrp-in-trading.ppart3",
+                    ", servicing margin calls and managing general trading inventory in real time."
+                  )}
+                </p>
+
+                <p>
+                  {translate(
+                    "Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet."
+                  )}
+                </p>
+              </div>
+              <div className="py-26 link-section" id="ripple">
+                <h2 className="h4 h2-sm mb-8">
+                  {translate(
+                    "What Is the Relationship Between Ripple and XRP?"
+                  )}
+                </h2>
+                <h5 className="longform mb-10">
+                  <a href="https://ripple.com" target="_blank">
+                    {translate("Ripple")}
+                  </a>
+                  {translate(
+                    " is a technology company that makes it easier to build a high-performance, global payments business. XRP is a digital asset independent of this."
+                  )}
+                </h5>
+
+                <p>
+                  {translate(
+                    "There is a finite amount of XRP. All XRP is already in existence today—no more than the original 100 billion can be created. The XRPL founders gifted 80 billion XRP, the platform’s native currency, to Ripple. To provide predictability to the XRP supply, Ripple has locked 55 billion XRP (55% of the total possible supply) into a series of escrows using the XRP Ledger itself. The XRPL's transaction processing rules, enforced by the consensus protocol, control the release of the XRP."
+                  )}
+                </p>
+                <div className="mt-10 p-10 br-8 cta-card position-relative">
                   <img
-                    alt="user"
-                    className="mw-100 mb-2 invertible-img"
-                    src={userIcon}
+                    alt="green waves"
+                    src={require("../static/img/backgrounds/cta-xrp-overview-green-2.svg")}
+                    className="landing-bg cta cta-bottom-right"
                   />
-                  <h6 className="subhead-sm-r">
-                    {translate("Individual Consumers")}
-                  </h6>
-                  <p>
-                    {translate(
-                      "Use XRP to move different currencies around the world."
-                    )}
-                  </p>
-                </div>
-              </div>
-              <div className="mt-10 p-10 br-8 cta-card position-relative">
-                <div className="z-index-1 position-relative">
-                  <h2 className="h4 mb-10-until-sm mb-8-sm">
-                    {translate(
-                      "The XRP Ledger is built for business."
-                    )}
-                  </h2>
-                  <p className="mb-10">
-                    {translate(
-                      "The only major L-1 blockchain that’s built for business and designed specifically to power finance use cases and applications at scale. Powerful enough to bootstrap a new economy, the XRP Ledger (XRPL) is fast, scalable, and sustainable."
-                    )}
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div className="py-26 link-section" id="xrp-trading">
-              <h2 className="h4 h2-sm mb-8">
-                {translate("How Is XRP Used in Trading?")}
-              </h2>
-              <h5 className="longform mb-10">
-                {translate(
-                  "XRP is traded on more than 100 markets and exchanges worldwide."
-                )}
-              </h5>
-              <p className="mb-6">
-                {translate(
-                    "about.xrp.xrp-in-trading.ppart1",
-                  "XRP’s low transaction fees, reliability and high-speed enable traders to use the digital asset as high-speed, cost-efficient and reliable collateral across trading venues—"
-                )}
-                <a
-                  href="https://ripple.com/insights/xrp-a-preferred-base-currency-for-arbitrage-trading/"
-                  target="_blank"
-                >
-                  {translate("about.xrp.xrp-in-trading.ppart2","seizing arbitrage opportunities")}
-                </a>
-                {translate(
-                    "about.xrp.xrp-in-trading.ppart3",
-                  ", servicing margin calls and managing general trading inventory in real time."
-                )}
-              </p>
-
-              <p>
-                {translate(
-                  "Because of the properties inherent to XRP and the ecosystem around it, traders worldwide are able to shift collateral, bridge currencies and switch from one crypto into another nearly instantly, across any exchange on the planet."
-                )}
-              </p>
-            </div>
-            <div className="py-26 link-section" id="ripple">
-              <h2 className="h4 h2-sm mb-8">
-                {translate(
-                  "What Is the Relationship Between Ripple and XRP?"
-                )}
-              </h2>
-              <h5 className="longform mb-10">
-                <a href="https://ripple.com" target="_blank">
-                  {translate("Ripple")}
-                </a>
-                {translate(
-                  " is a technology company that makes it easier to build a high-performance, global payments business. XRP is a digital asset independent of this."
-                )}
-              </h5>
-
-              <p>
-                {translate(
-                  "There is a finite amount of XRP. All XRP is already in existence today—no more than the original 100 billion can be created. The XRPL founders gifted 80 billion XRP, the platform’s native currency, to Ripple. To provide predictability to the XRP supply, Ripple has locked 55 billion XRP (55% of the total possible supply) into a series of escrows using the XRP Ledger itself. The XRPL's transaction processing rules, enforced by the consensus protocol, control the release of the XRP."
-                )}
-              </p>
-              <div className="mt-10 p-10 br-8 cta-card position-relative">
-                <div className="z-index-1 position-relative">
-                  <h3 className="h4">
-                    {translate("about.xrp.ripple-escrow.ppart1","As of ")}
-                    <span className="stat-highlight" id="ripple-escrow-as-of">
-                      {translate("about.xrp.ripple-escrow.ppart2","October 2024")}
-                    </span>
-                    {translate("about.xrp.ripple-escrow.ppart3"," ")}
-                    <br />
-                    <span className="d-inline-flex">
-                      <img
-                        id="xrp-mark-overview"
-                        className="mw-100 invertible-img me-2"
-                        src={require("../static/img/logos/xrp-mark.svg")}
-                        alt="XRP Logo Mark"
-                      />
-                      <span
-                        className="numbers stat-highlight"
-                        id="ripple-escrow-amount"
-                      >
-                        {translate("38B")}
+                  <div className="z-index-1 position-relative">
+                    <h3 className="h4">
+                      {translate("about.xrp.ripple-escrow.ppart1","As of ")}
+                      <span className="stat-highlight" id="ripple-escrow-as-of">
+                        {translate("about.xrp.ripple-escrow.ppart2","October 2024")}
                       </span>
-                    </span>
-                    <br />
-                    {translate("XRP remains in escrow")}
-                  </h3>
+                      {translate("about.xrp.ripple-escrow.ppart3"," ")}
+                      <br />
+                      <span className="d-inline-flex">
+                        <img
+                          id="xrp-mark-overview"
+                          className="mw-100 invertible-img mr-2"
+                          src={require("../static/img/logos/xrp-mark.svg")}
+                          alt="XRP Logo Mark"
+                        />
+                        <span
+                          className="numbers stat-highlight"
+                          id="ripple-escrow-amount"
+                        >
+                          {translate("38B")}
+                        </span>
+                      </span>
+                      <br />
+                      {translate("XRP remains in escrow")}
+                    </h3>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="link-section py-26" id="wallets">
-              <h2 className="h4 h2-sm mb-8">
-                {translate("What Wallets Support XRP?")}
-              </h2>
-              <h5 className="longform mb-10">
-                {translate(
-                  "Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
-                )}
-              </h5>
-              <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
-                <li className="nav-item nav-grid-head">
-                  <h6 className="subhead-sm-r">{translate("Software Wallets")}</h6>
-                </li>
-                {softwallets.map((wallet) => (
-                  <li key={wallet.id} className="nav-item">
-                    <a
-                      className="nav-link external-link"
-                      href={wallet.href}
-                      target="_blank"
-                    >
-                      <img
-                        className={`mw-100 ${
-                          !!wallet?.imgclasses && wallet.imgclasses
-                        }`}
-                        id={wallet.id}
-                        alt={wallet.alt}
-                      />
-                    </a>
+              <div className="link-section py-26" id="wallets">
+                <h2 className="h4 h2-sm mb-8">
+                  {translate("What Wallets Support XRP?")}
+                </h2>
+                <h5 className="longform mb-10">
+                  {translate(
+                    "Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
+                  )}
+                </h5>
+                <ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
+                  <li className="nav-item nav-grid-head">
+                    <h6 className="fs-4-5">{translate("Software Wallets")}</h6>
                   </li>
-                ))}
-                <li className="nav-item nav-grid-head">
-                  <h6 className="subhead-sm-r">{translate("Hardware Wallets")}</h6>
-                </li>
-                {hardwallets.map((wallet) => (
-                  <li className="nav-item" key={wallet.id}>
-                    <a
-                      className="nav-link external-link"
-                      href={wallet.href}
-                      target="_blank"
-                    >
-                      <img
-                        className={`mw-100 ${
-                          !!wallet.imgclasses && wallet.imgclasses
-                        }`}
-                        id={wallet.id}
-                        alt={wallet.alt}
-                      />
-                    </a>
+                  {softwallets.map((wallet) => (
+                    <li key={wallet.id} className="nav-item">
+                      <a
+                        className="nav-link external-link"
+                        href={wallet.href}
+                        target="_blank"
+                      >
+                        <img
+                          className={`mw-100 ${
+                            !!wallet?.imgclasses && wallet.imgclasses
+                          }`}
+                          id={wallet.id}
+                          alt={wallet.alt}
+                        />
+                      </a>
+                    </li>
+                  ))}
+                  <li className="nav-item nav-grid-head">
+                    <h6 className="fs-4-5">{translate("Hardware Wallets")}</h6>
                   </li>
-                ))}
-              </ul>
-              <p className="label-l mt-10">
-                {translate(
-                  "Disclaimer: This information is drawn from other sources on the internet.  XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
-                )}
-              </p>
-            </div>
-            <div className="py-26 link-section" id="exchanges">
-              <h2 className="h4 h2-sm mb-8">
-                {translate("What Exchanges Support XRP?")}
-              </h2>
-              <h5 className="longform mb-10">
-                {translate(
-                  "Exchanges are where people trade currencies. XRP is traded on more than 100 markets and exchanges worldwide."
-                )}
-              </h5>
-              <p className="mb-10">
-                {translate(
-                  "There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial)."
-                )}
-              </p>
-              <div className="card-grid card-grid-2xN mb-10">
-                <div>
-                  <h6 className="subhead-sm-r">{translate("Spot Exchanges")}</h6>
-                  <p className="mb-0">
-                    {translate(
-                      "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates."
-                    )}
-                  </p>
-                </div>
-                <div>
-                  <h6 className="subhead-sm-r">
-                    {translate("Futures, Options and Swap Exchanges")}
-                  </h6>
-                  <p className="mb-0">
-                    {translate(
-                      "Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future."
-                    )}
-                  </p>
-                </div>
-                <div>
-                  <h6 className="subhead-sm-r">
-                    {translate("Custodial Exchanges")}
-                  </h6>
-                  <p className="mb-0">
-                    {translate(
-                      "Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers."
-                    )}
-                  </p>
-                </div>
-                <div>
-                  <h6 className="subhead-sm-r">
-                    {translate("Non-Custodial Exchanges")}
-                  </h6>
-                  <p className="mb-0">
-                    {translate(
-                      "Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain."
-                    )}
-                  </p>
-                </div>
+                  {hardwallets.map((wallet) => (
+                    <li className="nav-item" key={wallet.id}>
+                      <a
+                        className="nav-link external-link"
+                        href={wallet.href}
+                        target="_blank"
+                      >
+                        <img
+                          className={`mw-100 ${
+                            !!wallet.imgclasses && wallet.imgclasses
+                          }`}
+                          id={wallet.id}
+                          alt={wallet.alt}
+                        />
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+                <p className="fs-3 mt-10">
+                  {translate(
+                    "Disclaimer: This information is drawn from other sources on the internet.  XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
+                  )}
+                </p>
+              </div>
+              <div className="py-26 link-section" id="exchanges">
+                <h2 className="h4 h2-sm mb-8">
+                  {translate("What Exchanges Support XRP?")}
+                </h2>
+                <h5 className="longform mb-10">
+                  {translate(
+                    "Exchanges are where people trade currencies. XRP is traded on more than 100 markets and exchanges worldwide."
+                  )}
+                </h5>
+                <p className="mb-10">
+                  {translate(
+                    "There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial)."
+                  )}
+                </p>
+                <div className="card-grid card-grid-2xN mb-10">
+                  <div>
+                    <h6 className="fs-4-5">{translate("Spot Exchanges")}</h6>
+                    <p className="mb-0">
+                      {translate(
+                        "Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates."
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <h6 className="fs-4-5">
+                      {translate("Futures, Options and Swap Exchanges")}
+                    </h6>
+                    <p className="mb-0">
+                      {translate(
+                        "Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future."
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <h6 className="fs-4-5">
+                      {translate("Custodial Exchanges")}
+                    </h6>
+                    <p className="mb-0">
+                      {translate(
+                        "Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers."
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <h6 className="fs-4-5">
+                      {translate("Non-Custodial Exchanges")}
+                    </h6>
+                    <p className="mb-0">
+                      {translate(
+                        "Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain."
+                      )}
+                    </p>
+                  </div>
+                </div>
+                <h6>
+                  {translate("Top Exchanges, according to CryptoCompare")}
+                </h6>
+                <ul
+                  className="nav nav-grid-lg cols-of-5 mb-10"
+                  id="top-exchanges"
+                >
+                  {exchanges.map((exch, i) => (
+                    <li className="nav-item" key={exch.id}>
+                      <a
+                        className="nav-link external-link"
+                        href={exch.href}
+                        target="_blank"
+                      >
+                        <span className="longform mr-3">{i+1}</span>
+                        <img className="mw-100" id={exch.id} alt={exch.alt} />
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+                <p className="fs-3 mt-10 mb-0">
+                  {translate(
+                    "Disclaimer: This information is drawn from other sources on the internet.  XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
+                  )}
+                </p>
               </div>
-              <h6>
-                {translate("Top Exchanges, according to CryptoCompare")}
-              </h6>
-              <ul
-                className="nav nav-grid-lg cols-of-5 mb-10"
-                id="top-exchanges"
-              >
-                {exchanges.map((exch, i) => (
-                  <li className="nav-item" key={exch.id}>
-                    <a
-                      className="nav-link external-link"
-                      href={exch.href}
-                      target="_blank"
-                    >
-                      <span className="longform me-3">{i+1}</span>
-                      <img className="mw-100" id={exch.id} alt={exch.alt} />
-                    </a>
-                  </li>
-                ))}
-              </ul>
-              <p className="label-l mt-10 mb-0">
-                {translate(
-                  "Disclaimer: This information is drawn from other sources on the internet.  XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices."
-                )}
-              </p>
             </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </div>
     </div>
   );
 }

blog/index.page.tsx

@@ -57,6 +57,13 @@ export default function Index() {
   return (
     <div className="landing dev-blog">
       <div className="justify-content-center align-items-lg-center">
+        <div className="position-relative d-none-sm">
+          <img
+            alt="background purple waves"
+            src={require("../static/img/backgrounds/home-purple.svg")}
+            id="blog-purple"
+          />
+        </div>
         <section className="py-lg-5 text-center mt-lg-5">
           <div className="mx-auto text-center col-lg-5">
             <div className="d-flex flex-column">

community/ambassadors.page.tsx

@@ -3,8 +3,8 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
-	title: 'Ambassadors',
-	description: "The XRPL Campus Ambassador program connects and empowers student champions of the XRPL.",
+    title: 'Ambassadors',
+    description: "The XRPL Campus Ambassador program connects and empowers student champions of the XRPL.",
   }
 };
 
@@ -17,403 +17,409 @@ export default function Ambassadors() {
   const { translate } = useTranslate();
 
   return (
-  <div className="landing page-ambassadors">
+    <div className="landing page-ambassadors">
+      <div>
+    <div className="position-relative d-none-sm">
+        <img alt="background purple waves" src={require("../static/img/backgrounds/ambassador-purple.svg")} className="position-absolute" style={{top: 0, right: 0}} />
+    </div>
     <section className="container-new py-26 text-lg-center">
-      {/* For translater: This section could change dynamically based on the time of year */}
-      <div className="p-0 col-lg-8 mx-lg-auto">
-        <div className="d-flex flex-column-reverse">
-          <h1 className="mb-0">{translate("Become an XRP Ledger Campus Ambassador")}</h1>
-          <h6 className="eyebrow mb-3">{translate("Join the Student Cohort")}</h6>
+        {/* For translater: This section could change dynamically based on the time of year */}
+        <div className="p-0 col-lg-8 mx-lg-auto">
+            <div className="d-flex flex-column-reverse">
+                <h1 className="mb-0">{translate("Become an XRP Ledger Campus Ambassador")}</h1>
+                <h6 className="eyebrow mb-3">{translate("Join the Student Cohort")}</h6>
+            </div>
+            <p className="mt-3 pt-3 col-lg-8 mx-lg-auto p-0">{translate("This fall, the ")} <b>{translate("XRPL Student Builder Residency ")}</b> {translate("offers top technical students a 3-week online program (Oct 21 - Nov 13) to develop XRPL projects with expert mentorship. Apply by Oct 14, 2024")}</p>
+            <p className=" col-lg-8 mx-lg-auto p-0">{translate("This program will run from October 21 - November 13 and will be conducted entirely online. ")}</p>
+            <p className="pb-3 col-lg-8 mx-lg-auto p-0"><b>{translate("Applications due October 14, 2024")}</b>{translate(" @ 11:59pm PDT")}</p>
+            <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
         </div>
-        <p className="mt-3 pt-3 col-lg-8 mx-lg-auto p-0">{translate("This fall, the ")} <b>{translate("XRPL Student Builder Residency ")}</b> {translate("offers top technical students a 3-week online program (Oct 21 - Nov 13) to develop XRPL projects with expert mentorship. Apply by Oct 14, 2024")}</p>
-        <p className=" col-lg-8 mx-lg-auto p-0">{translate("This program will run from October 21 - November 13 and will be conducted entirely online. ")}</p>
-        <p className="pb-3 col-lg-8 mx-lg-auto p-0"><b>{translate("Applications due October 14, 2024")}</b>{translate(" @ 11:59pm PDT")}</p>
-        <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-      </div>
     </section>
     {/* Current Students */}
     <section className="container-new py-26">
-      <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-        <div className="order-lg-2 mx-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 pr-lg-5">
-          <div className="d-flex flex-column-reverse p-lg-3">
-            <h3 className="h4 h2-sm">{translate("XRPL Campus Ambassadors")}</h3>
-            <h6 className="eyebrow mb-3">{translate("Empowering Students")}</h6>
-          </div>
-          <p className="p-lg-3 mb-2 longform">{translate("The XRPL Campus Ambassador program aims to elevate the impact of college students who are passionate about blockchain technology.")}</p>
-          <div className="d-none d-lg-block p-lg-3">
-            <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-          </div>
-        </div>
-        <div className="order-lg-1 col-lg-6 px-0 mr-lg-4">
-          <div className="row m-0">
-            <img alt="Person speaking and person taking photo" src={require("../static/img/ambassadors/developer-hero@2x.png")} className="w-100" />
-          </div>
-        </div>
-        <div className="d-lg-none order-3 mt-4 pt-3 p-lg-3">
-          <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-        </div>
-      </div>  
+        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div className="order-lg-2 mx-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 pr-lg-5">
+                <div className="d-flex flex-column-reverse p-lg-3">
+                    <h3 className="h4 h2-sm">{translate("XRPL Campus Ambassadors")}</h3>
+                    <h6 className="eyebrow mb-3">{translate("Empowering Students")}</h6>
+                </div>
+                <p className="p-lg-3 mb-2 longform">{translate("The XRPL Campus Ambassador program aims to elevate the impact of college students who are passionate about blockchain technology.")}</p>
+                <div className="d-none d-lg-block p-lg-3">
+                <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
+                </div>
+            </div>
+            <div className="order-lg-1 col-lg-6 px-0 mr-lg-4">
+                <div className="row m-0">
+                    <img alt="Person speaking and person taking photo" src={require("../static/img/ambassadors/developer-hero@2x.png")} className="w-100" />
+                </div>
+            </div>
+            <div className="d-lg-none order-3 mt-4 pt-3 p-lg-3">
+              <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
+            </div>
+        </div>  
     </section>
     {/* Benefits */}
     <section className="container-new py-26">
-      {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-      <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-        <div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
-          <div className="d-flex flex-column-reverse p-lg-3">
-            <h3 className="h4 h2-sm">{translate("Why become an XRPL Campus Ambassador?")}</h3>
-            <h6 className="eyebrow mb-3">{translate("Benefits")}</h6>
-          </div>
-          <p className="p-lg-3 mb-2 longform">{translate("Join a global cohort of students empowering others to build on the XRPL.")}</p>
-        </div>
-        <div className="order-2 col-lg-6 px-0 mr-lg-5">
-          <div className="row align-items-center m-0" id="benefits-list"> 
-            {/* benefitslist */}
-            <div className="col-12 col-lg-6 p-0 pr-lg-4">
-              <div className="px-lg-3 pb-3">
-                <img alt="Smiley face" id="benefits-01" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Exclusive Opportunities")}</h6>
-                  <p>{translate("Get access and invitations to Ambassador-only events and opportunities")}</p>
+        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
+                <div className="d-flex flex-column-reverse p-lg-3">
+                    <h3 className="h4 h2-sm">{translate("Why become an XRPL Campus Ambassador?")}</h3>
+                    <h6 className="eyebrow mb-3">{translate("Benefits")}</h6>
                 </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none ">
-                <img alt="Book" id="benefits-02" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Education")}</h6>
-                  <p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
-                </div>
-              </div>
-              <div className="px-lg-3 pb-3">
-                <img alt="Gift" id="benefits-03" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Swag")}</h6>
-                  <p>{translate("New XRPL swag for Ambassadors and swag to share with other students")}</p>
-                </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none">
-                <img alt="Medallion" id="benefits-04" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Mentorship")}</h6>
-                  <p>{translate("Meet with and learn from influential builders and leaders across the XRPL community")}</p>
-                </div>
-              </div>
-              <div className="px-lg-3 pb-3">
-                <img alt="Up Arrow" id="benefits-05" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Career Acceleration")}</h6>
-                  <p className="pb-lg-0">{translate("Gain hands-on experience building communities and grow your professional network in the blockchain industry")}</p>
-                </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none">
-                <img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
-                <div className="pb-lg-0">
-                  <h6 className="mb-3">{translate("Stipend")}</h6>
-                  <p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth in your community")}</p>
-                </div>
-              </div>
+                <p className="p-lg-3 mb-2 longform">{translate("Join a global cohort of students empowering others to build on the XRPL.")}</p>
             </div>
-            {/* end col 1 */}
-            {/* Show on large */}
-            <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
-              <div className="px-lg-3 pb-3 pt-5 mt-5">
-                <img alt="Book" id="benefits-02" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Education")}</h6>
-                  <p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
+            <div className="order-2 col-lg-6 px-0 mr-lg-5">
+                <div className="row align-items-center m-0" id="benefits-list"> 
+                    {/* benefitslist */}
+                    <div className="col-12 col-lg-6 p-0 pr-lg-4">
+                        <div className="px-lg-3 pb-3">
+                            <img alt="Smiley face" id="benefits-01" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Exclusive Opportunities")}</h6>
+                                <p>{translate("Get access and invitations to Ambassador-only events and opportunities")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none ">
+                            <img alt="Book" id="benefits-02" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Education")}</h6>
+                                <p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3">
+                            <img alt="Gift" id="benefits-03" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Swag")}</h6>
+                                <p>{translate("New XRPL swag for Ambassadors and swag to share with other students")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none">
+                            <img alt="Medallion" id="benefits-04" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Mentorship")}</h6>
+                                <p>{translate("Meet with and learn from influential builders and leaders across the XRPL community")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3">
+                            <img alt="Up Arrow" id="benefits-05" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Career Acceleration")}</h6>
+                                <p className="pb-lg-0">{translate("Gain hands-on experience building communities and grow your professional network in the blockchain industry")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none">
+                            <img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
+                            <div className="pb-lg-0">
+                                <h6 className="mb-3">{translate("Stipend")}</h6>
+                                <p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth in your community")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 1 */}
+                    {/* Show on large */}
+                    <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
+                        <div className="px-lg-3 pb-3 pt-5 mt-5">
+                            <img alt="Book" id="benefits-02" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Education")}</h6>
+                                <p>{translate("Tutorials and workshops from leading XRPL and blockchain developers")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3 ">
+                            <img alt="Medallion" id="benefits-04" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Mentorship")}</h6>
+                                <p>{translate("Meet with and learn from influential builders and leaders across the XRPL community")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3">
+                            <img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Stipend")}</h6>
+                                <p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth in your community")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 2 */}
                 </div>
-              </div>
-              <div className="px-lg-3 pb-3 ">
-                <img alt="Medallion" id="benefits-04" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Mentorship")}</h6>
-                  <p>{translate("Meet with and learn from influential builders and leaders across the XRPL community")}</p>
-                </div>
-              </div>
-              <div className="px-lg-3 pb-3">
-                <img alt="Dollar Sign" id="benefits-06" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Stipend")}</h6>
-                  <p className="pb-lg-0">{translate("Receive a stipend to fund your ideas and initiatives that fuel XRPL growth in your community")}</p>
-                </div>
-              </div>
             </div>
-            {/* end col 2 */}
-          </div>
         </div>
-      </div>
     </section>
     {/* Eligibility */}
     <section className="container-new py-26">
-      {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-      <div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
-        <div className="order-1 order-lg-2  mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 mr-lg-5">
-          <div className="d-flex flex-column-reverse p-lg-3">
-            <h3 className="h4 h2-sm">{translate("Should You Apply?")}</h3>
-            <h6 className="eyebrow mb-3">{translate("Eligibility for XRPL Campus Ambassadors")}</h6>
-          </div>
-          <p className="p-lg-3 mb-2 longform">{translate("Students currently enrolled in an undergraduate or postgraduate program at an accredited college or university are eligible to apply.")}</p>
-        </div>
-        <div className="order-2 order-lg-1 col-lg-6 px-0">
-          <div className="row align-items-center m-0" id="eligibility-list">
-            <div className="col-12 col-lg-6 p-0 pr-lg-4">
-              <div className="px-lg-3 pb-3">
-                <img alt="Calendar" id="eligibility-01" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("A Leader")}</h6>
-                  <p>{translate("Interested in leading meetups and workshops for your local campus community")}</p>
+        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+        <div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
+            <div className="order-1 order-lg-2  mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 mr-lg-5">
+                <div className="d-flex flex-column-reverse p-lg-3">
+                    <h3 className="h4 h2-sm">{translate("Should You Apply?")}</h3>
+                    <h6 className="eyebrow mb-3">{translate("Eligibility for XRPL Campus Ambassadors")}</h6>
                 </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none ">
-                <img alt="Book" id="eligibility-02" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Active")}</h6>
-                  <p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")}</p>
-                </div>
-              </div>
-              <div className="px-lg-3 pb-3">
-                <img alt="CPU" id="eligibility-03" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Curious")}</h6>
-                  <p>{translate("Eager to learn more about technical blockchain topics and the XRPL")}</p>
-                </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none">
-                <img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Passionate")}</h6>
-                  <p>{translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
-                </div>
-              </div>
-              <div className="p-lg-3 pb-3">
-                <img alt="People" id="eligibility-05" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Creative")}</h6>
-                  <p className="pb-lg-0 mb-0">{translate("Ability to think outside the box and have an impact in the XRPL student community")}</p>
-                </div>
-              </div>
+                <p className="p-lg-3 mb-2 longform">{translate("Students currently enrolled in an undergraduate or postgraduate program at an accredited college or university are eligible to apply.")}</p>
             </div>
-            {/* end col 1 */}
-            {/* Show on large */}
-            <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
-              <div className="px-lg-3 pb-3 ">
-                <img alt="Book" id="eligibility-02" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Active")}</h6>
-                  <p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")} </p>
+            <div className="order-2 order-lg-1 col-lg-6 px-0">
+                <div className="row align-items-center m-0" id="eligibility-list">
+                    <div className="col-12 col-lg-6 p-0 pr-lg-4">
+                        <div className="px-lg-3 pb-3">
+                            <img alt="Calendar" id="eligibility-01" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("A Leader")}</h6>
+                                <p>{translate("Interested in leading meetups and workshops for your local campus community")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none ">
+                            <img alt="Book" id="eligibility-02" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Active")}</h6>
+                                <p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3">
+                            <img alt="CPU" id="eligibility-03" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Curious")}</h6>
+                                <p>{translate("Eager to learn more about technical blockchain topics and the XRPL")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none">
+                            <img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Passionate")}</h6>
+                                <p>{translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
+                            </div>
+                        </div>
+                        <div className="p-lg-3 pb-3">
+                            <img alt="People" id="eligibility-05" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Creative")}</h6>
+                                <p className="pb-lg-0 mb-0">{translate("Ability to think outside the box and have an impact in the XRPL student community")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 1 */}
+                    {/* Show on large */}
+                    <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block">
+                        <div className="px-lg-3 pb-3 ">
+                            <img alt="Book" id="eligibility-02" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Active")}</h6>
+                                <p>{translate("An active participant in the XRPL community or interested in blockchain and crypto technologies")} </p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3 ">
+                            <img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Passionate")}</h6>
+                                <p> {translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 2 */}
                 </div>
-              </div>
-              <div className="px-lg-3 pb-3 ">
-                <img alt="Quote Bubble" id="eligibility-04" className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Passionate")}</h6>
-                  <p> {translate("Passionate about increasing XRPL education and awareness through events, content, and classroom engagement")}</p>
-                </div>
-              </div>
             </div>
-            {/* end col 2 */}
-          </div>
         </div>
-      </div>
     </section>
     {/* Current Students */}
     <section className="container-new py-26">
-      {/* Quotes */}
-      <div id="carouselSlidesOnly" className="carousel slide col-lg-10 mx-auto px-0" data-ride="carousel">
-        <div className="carousel-inner">
-          <div className="carousel-item active">
-            <div className="p-0">
-              <div className="mb-4 p-lg-3">
-                <img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("../static/img/ambassadors/quote1-small.svg")} className="h-100 d-lg-none mb-4" />
-                <img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("../static/img/ambassadors/quote1.svg")} className="h-100 d-none d-lg-block" />
-                <div className="p-0 col-lg-7 mx-lg-auto">
-                  <p className="p-lg-3 mb-2"><strong>Derrick N.</strong><br />
-                    Toronto Metropolitan University<br />
-                    Spring 2023 XRPL Campus Ambassador</p>
+        {/* Quotes */}
+        <div id="carouselSlidesOnly" className="carousel slide col-lg-10 mx-auto px-0" data-ride="carousel">
+            <div className="carousel-inner">
+                <div className="carousel-item active">
+                    <div className="p-0">
+                        <div className="mb-4 p-lg-3">
+                            <img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("../static/img/ambassadors/quote1-small.svg")} className="h-100 d-lg-none mb-4" />
+                            <img alt="I have learned so much through creating programs and connecting with the XRPL community. Im truly grateful for everyone's support along the way and for the opportunity to gain so much knowledge from this expierence" src={require("../static/img/ambassadors/quote1.svg")} className="h-100 d-none d-lg-block" />
+                            <div className="p-0 col-lg-7 mx-lg-auto">
+                                <p className="p-lg-3 mb-2"><strong>Derrick N.</strong><br />
+                                    Toronto Metropolitan University<br />
+                                    Spring 2023 XRPL Campus Ambassador</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div className="carousel-item mb-20">
-            <div className="p-0">
-              <div className="mb-4 p-lg-3">
-                <img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("../static/img/ambassadors/quote2-small.svg")} className="h-150 d-lg-none  mb-4" />
-                <img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("../static/img/ambassadors/quote2.svg")} className="h-100 d-none d-lg-block" />
-                <div className="p-0 col-lg-7 mx-lg-auto">
-                  <p className="p-lg-3 mb-2"><strong>Sally Z.</strong><br />
-                    Toronto Metropolitan University<br />
-                    Spring 2023 XRPL Campus Ambassador</p>
+                <div className="carousel-item mb-20">
+                    <div className="p-0">
+                        <div className="mb-4 p-lg-3">
+                            <img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("../static/img/ambassadors/quote2-small.svg")} className="h-150 d-lg-none  mb-4" />
+                            <img alt="The XRPL Campus Ambassador program really helped broaden my view of the blockchain industry with their learning resource and virtual community. Being an ambassador allowed me to meet industry professionals and likeminded peers which have given me invaluable experiences and insights." src={require("../static/img/ambassadors/quote2.svg")} className="h-100 d-none d-lg-block" />
+                            <div className="p-0 col-lg-7 mx-lg-auto">
+                                <p className="p-lg-3 mb-2"><strong>Sally Z.</strong><br />
+                                    Toronto Metropolitan University<br />
+                                    Spring 2023 XRPL Campus Ambassador</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-            </div>
-          </div>
-          <div className="carousel-item mb-40">
-            <div className="p-0">
-              <div className="mb-4 p-lg-3">
-                <img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("../static/img/ambassadors/quote3-small.svg")} className="h-150 d-lg-none  mb-4" />
-                <img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("../static/img/ambassadors/quote3.svg")} className="h-100 d-none d-lg-block" />
-                <div className="p-0 col-lg-7 mx-lg-auto">
-                  <p className="p-lg-3 mb-2"><strong>Nick D.</strong><br />
-                    Miami University<br />
-                    Spring 2023 XRPL Campus Ambassador</p>
+                <div className="carousel-item mb-40">
+                    <div className="p-0">
+                        <div className="mb-4 p-lg-3">
+                            <img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("../static/img/ambassadors/quote3-small.svg")} className="h-150 d-lg-none  mb-4" />
+                            <img alt="Ive had the pleasure over the course of this program to speak with amazing individuals, I encourage you all to reach out to other people in this program and make as many connections as you can. You will quickly find out that by speaking with other people in this cohort you can learn just about anything if you ask the right people." src={require("../static/img/ambassadors/quote3.svg")} className="h-100 d-none d-lg-block" />
+                            <div className="p-0 col-lg-7 mx-lg-auto">
+                                <p className="p-lg-3 mb-2"><strong>Nick D.</strong><br />
+                                    Miami University<br />
+                                    Spring 2023 XRPL Campus Ambassador</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
         </div>
-      </div>
     </section>
     {/* How it Works */}
     <section className="container-new py-26">
-      {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-      <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-        <div className="order-1 mr-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
-          <div className="d-flex flex-column-reverse p-lg-3">
-            <h3 className="h4 h2-sm">{translate("Process to become a Campus Ambassador")}</h3>
-            <h6 className="eyebrow mb-3">{translate("How it Works")}</h6>
-          </div>
-          <p className="p-lg-3 mb-2 longform">{translate("Apply now to become an XRPL Campus Ambassador.")}</p>
-          <div className="d-none d-lg-block p-lg-3">
-            <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-          </div>
-        </div>
-        <div className="order-2 col-lg-6 px-0 ml-lg-2">
-          <div className="row m-0">
-            <div className="col-12 col-lg-6 p-0 pr-lg-4">
-              <div className="px-lg-3 pb-3">
-                <img  src={require("../static/img/ambassadors/01.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Apply")}</h6>
-                  <p>{translate("Submit an application to be considered for the Campus Ambassador program.")}</p>
+        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div className="order-1 mr-lg-4 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
+                <div className="d-flex flex-column-reverse p-lg-3">
+                    <h3 className="h4 h2-sm">{translate("Process to become a Campus Ambassador")}</h3>
+                    <h6 className="eyebrow mb-3">{translate("How it Works")}</h6>
                 </div>
-              </div>
-              {/* Hide on large */}
-              <div className="px-lg-3 pb-3 d-lg-none ">
-                <img  src={require("../static/img/ambassadors/02.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Interview")}</h6>
-                  <p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
+                <p className="p-lg-3 mb-2 longform">{translate("Apply now to become an XRPL Campus Ambassador.")}</p>
+                <div className="d-none d-lg-block p-lg-3">
+                <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
                 </div>
-              </div>
-              <div className="px-lg-3 pb-3">
-                <img  src={require("../static/img/ambassadors/03.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Join")}</h6>
-                  <p>{translate("Congrats on your new role! Join the global cohort of Ambassadors and meet with community participants during onboarding.")}</p>
-                </div>
-              </div>
-              {/* Hide on large */}
-              <div className="p-lg-3 pb-3 d-lg-none">
-                <img  src={require("../static/img/ambassadors/04.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Learn")}</h6>
-                  <p> {translate("Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.")}</p>
-                </div>
-              </div>
             </div>
-            {/* end col 1 */}
-            {/* Show on large */}
-            <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block mt-5">
-              <div className="px-lg-3 pb-3 mt-5">
-                <img  src={require("../static/img/ambassadors/02.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3">
-                  <h6 className="mb-3">{translate("Interview")}</h6>
-                  <p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
+            <div className="order-2 col-lg-6 px-0 ml-lg-2">
+                <div className="row m-0">
+                    <div className="col-12 col-lg-6 p-0 pr-lg-4">
+                        <div className="px-lg-3 pb-3">
+                            <img  src={require("../static/img/ambassadors/01.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Apply")}</h6>
+                                <p>{translate("Submit an application to be considered for the Campus Ambassador program.")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="px-lg-3 pb-3 d-lg-none ">
+                            <img  src={require("../static/img/ambassadors/02.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Interview")}</h6>
+                                <p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
+                            </div>
+                        </div>
+                        <div className="px-lg-3 pb-3">
+                            <img  src={require("../static/img/ambassadors/03.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Join")}</h6>
+                                <p>{translate("Congrats on your new role! Join the global cohort of Ambassadors and meet with community participants during onboarding.")}</p>
+                            </div>
+                        </div>
+                        {/* Hide on large */}
+                        <div className="p-lg-3 pb-3 d-lg-none">
+                            <img  src={require("../static/img/ambassadors/04.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Learn")}</h6>
+                                <p> {translate("Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 1 */}
+                    {/* Show on large */}
+                    <div className="col-12 col-lg-6 p-0 pl-lg-4 d-none d-lg-block mt-5">
+                        <div className="px-lg-3 pb-3 mt-5">
+                            <img  src={require("../static/img/ambassadors/02.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3">
+                                <h6 className="mb-3">{translate("Interview")}</h6>
+                                <p>{translate("Tell the XRPL community-led panel more about yourself and your interest in the program during an interview.")}</p>
+                            </div>
+                        </div>
+                        <div className="p-lg-3 pb-3 ">
+                            <img  src={require("../static/img/ambassadors/04.svg")} className="pl-lg-3" />
+                            <div className="p-lg-3 pt-3 pb-lg-0">
+                                <h6 className="mb-3">{translate("Learn")}</h6>
+                                <p className="pb-lg-0">{translate("Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    {/* end col 2 */}
                 </div>
-              </div>
-              <div className="p-lg-3 pb-3 ">
-                <img  src={require("../static/img/ambassadors/04.svg")} className="pl-lg-3" />
-                <div className="p-lg-3 pt-3 pb-lg-0">
-                  <h6 className="mb-3">{translate("Learn")}</h6>
-                  <p className="pb-lg-0">{translate("Participate in personalized learning and training sessions for Ambassadors on the XRPL and blockchain technology.")}</p>
-                </div>
-              </div>
             </div>
-            {/* end col 2 */}
-          </div>
+            <div className="d-lg-none order-3 mt-4 pt-3">
+                <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
+            </div>
         </div>
-        <div className="d-lg-none order-3 mt-4 pt-3">
-          <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-        </div>
-      </div>
     </section>
     {/* Image Block */}
     <div>
-      <img alt="Ripple Conferences and two people Sitting" src={require("../static/img/ambassadors/students-large.png")} className="w-100" />
+        <img alt="Ripple Conferences and two people Sitting" src={require("../static/img/ambassadors/students-large.png")} className="w-100" />
     </div>
     {/* Global Community Carousel */}
     <section className="container-new pt-26">
-      <div className="p-0 col-lg-5">
-        <div className="d-flex flex-column-reverse p-lg-3">
-          <h3 className="h4 h2-sm">{translate("Join a global cohort of Student Ambassadors")}</h3>
-          <h6 className="eyebrow mb-3">{translate("Global Community")}</h6>
+        <div className="p-0 col-lg-5">
+            <div className="d-flex flex-column-reverse p-lg-3">
+                <h3 className="h4 h2-sm">{translate("Join a global cohort of Student Ambassadors")}</h3>
+                <h6 className="eyebrow mb-3">{translate("Global Community")}</h6>
+            </div>
         </div>
-      </div>
     </section>
     <div id="container-scroll">
-      <div className="photobanner">
-        <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
-        <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
-        <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
-      </div>
-      <div className="photobanner photobanner-bottom">
-        <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
-        <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
-        <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
-      </div>
+        <div className="photobanner">
+            <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
+            <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
+            <img src={require("../static/img/ambassadors/locations-row-1.png")} alt="Ambassador locations" height="48px" className="px-5" />
+        </div>
+        <div className="photobanner photobanner-bottom">
+            <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
+            <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
+            <img src={require("../static/img/ambassadors/locations-row-2.png")} alt="Ambassador locations" height="48px" className="px-5" />
+        </div>
     </div>
     {/* Connect */}
     <section className="container-new py-26">
-      {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-      <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-        <div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
-          <div className="d-flex flex-column-reverse p-lg-3">
-            <h3 className="h4 h2-sm">{translate("Stay connected to the XRPL Community")}</h3>
-            <h6 className="eyebrow mb-3">{translate("Connect")}</h6>
-          </div>
-          <p className="p-lg-3 mb-2 longform">{translate("To stay up-to-date on the latest activity, meetups, and events of the XRPL Community be sure to follow these channels:")}</p>
-          <div className="d-none d-lg-block p-lg-3">
-            <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-          </div>
-        </div>
-        <div className="order-2 col-lg-6 px-0 ml-lg-5">
-          <div className="row align-items-center m-0">
-            <div className="col-12 col-lg-6 p-0 pr-lg-4">
-              <div className="p-lg-3 mb-3 pb-3">
-                <img alt="meetup" src={require("../static/img/ambassadors/icon_meetup.svg")} className="mb-3" />
-                <div>
-                  <h6 className="mb-3"><a className="btn-arrow" href="https://www.meetup.com/pro/xrpl-community/">{translate("MeetUp")}</a></h6>
-                  <p>{translate("Attend an XRPL Meetup in your local area")}</p>
+        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div className="order-1 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0">
+                <div className="d-flex flex-column-reverse p-lg-3">
+                    <h3 className="h4 h2-sm">{translate("Stay connected to the XRPL Community")}</h3>
+                    <h6 className="eyebrow mb-3">{translate("Connect")}</h6>
                 </div>
-              </div>
-              <div className="p-lg-3 mb-3 pb-3">
-                <img alt="devto" src={require("../static/img/ambassadors/icon_devto.svg")} className="mb-3" />
-                <div>
-                  <h6 className="mb-3"><a className="btn-arrow" href="https://dev.to/t/xrpl">{translate("Dev.to Blog")}</a></h6>
-                  <p>{translate("Read more about the activity of the XRPL Ambassadors")}</p>
+                <p className="p-lg-3 mb-2 longform">{translate("To stay up-to-date on the latest activity, meetups, and events of the XRPL Community be sure to follow these channels:")}</p>
+                <div className="d-none d-lg-block p-lg-3">
+                    <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
                 </div>
-              </div>
             </div>
-            <div className="col-12 col-lg-6 p-0 pl-lg-4">
-              <div className="p-lg-3 mb-3 pb-3 ">
-                <img alt="discord" src={require("../static/img/ambassadors/icon_discord.svg")} className="mb-3" />
-                <div>
-                  <h6 className="mb-3"><a className="btn-arrow" href="https://xrpldevs.org">{translate("Discord")}</a></h6>
-                  <p>{translate("Join the conversation on the XRPL Developer Discord")}</p>
+            <div className="order-2 col-lg-6 px-0 ml-lg-5">
+                <div className="row align-items-center m-0">
+                    <div className="col-12 col-lg-6 p-0 pr-lg-4">
+                        <div className="p-lg-3 mb-3 pb-3">
+                            <img alt="meetup" src={require("../static/img/ambassadors/icon_meetup.svg")} className="mb-3" />
+                            <div>
+                                <h6 className="mb-3"><a className="btn-arrow" href="https://www.meetup.com/pro/xrpl-community/">{translate("MeetUp")}</a></h6>
+                                <p>{translate("Attend an XRPL Meetup in your local area")}</p>
+                            </div>
+                        </div>
+                        <div className="p-lg-3 mb-3 pb-3">
+                            <img alt="devto" src={require("../static/img/ambassadors/icon_devto.svg")} className="mb-3" />
+                            <div>
+                                <h6 className="mb-3"><a className="btn-arrow" href="https://dev.to/t/xrpl">{translate("Dev.to Blog")}</a></h6>
+                                <p>{translate("Read more about the activity of the XRPL Ambassadors")}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-12 col-lg-6 p-0 pl-lg-4">
+                        <div className="p-lg-3 mb-3 pb-3 ">
+                            <img alt="discord" src={require("../static/img/ambassadors/icon_discord.svg")} className="mb-3" />
+                            <div>
+                                <h6 className="mb-3"><a className="btn-arrow" href="https://xrpldevs.org">{translate("Discord")}</a></h6>
+                                <p>{translate("Join the conversation on the XRPL Developer Discord")}</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
-          </div>
+            <div className="d-lg-none order-3 mt-4 pt-3">
+              <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
+            </div>
         </div>
-        <div className="d-lg-none order-3 mt-4 pt-3">
-          <button className="btn btn-primary btn-arrow-out" onClick={() => window.open('https://share.hsforms.com/1k47bfuX2SL2DKZtZoJzArg4vgrs', "_blank")} >{translate("Apply for Fall 2024")}</button>
-        </div>
-      </div>
     </section>
-  </div>
+</div>
+
+    </div>
   )
 }

community/developer-funding.page.tsx

@@ -19,148 +19,261 @@ export default function Funding() {
 
   return (
     <div className="landing page-funding">
-      <section className="container-new py-26 text-lg-center">
-        <div className="p-0 col-lg-6 mx-lg-auto">
-          <div className="d-flex flex-column-reverse">
-            <h1 className="mb-0">
-              {translate("XRPL Developer Funding Programs")}
-            </h1>
-            <h6 className="eyebrow mb-3">{translate("Project Resources")}</h6>
-          </div>
+      <div>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="purple waves"
+            src={require("../static/img/backgrounds/funding-purple.svg")}
+            className="position-absolute"
+            style={{ top: 0, right: 0 }}
+          />
         </div>
-      </section>
-      <section className="container-new py-26">
-        <div className="p-0 col-lg-6 mx-lg-auto" style={{ maxWidth: 520 }}>
-          <div className="d-flex flex-column-reverse">
-            <h1 className="mb-0 h4 h2-sm">
-              {translate(
-                "Explore funding opportunities for developers and teams"
-              )}
-            </h1>
-            <h6 className="eyebrow mb-3">{translate("Funding Overview")}</h6>
-          </div>
-          <p className="mt-3 py-3 p-0 longform">
-            {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."
-            )}
-          </p>
-        </div>
-      </section>
-      {/* Hackathons */}
-      <section className="container-new py-26">
-        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-          <div
-            className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
-            style={{ maxWidth: 520 }}
-          >
-            <div className="d-flex flex-column-reverse p-lg-3">
-              <h3 className="h4 h2-sm">{translate("XRPL Hackathons")}</h3>
-              <h6 className="eyebrow mb-3">{translate("Join an Event")}</h6>
+        <section className="container-new py-26 text-lg-center">
+          <div className="p-0 col-lg-6 mx-lg-auto">
+            <div className="d-flex flex-column-reverse">
+              <h1 className="mb-0">
+                {translate("XRPL Developer Funding Programs")}
+              </h1>
+              <h6 className="eyebrow mb-3">{translate("Project Resources")}</h6>
             </div>
-            <p className="p-lg-3 mb-2 longform">
+          </div>
+        </section>
+        <section className="container-new py-26">
+          <div className="p-0 col-lg-6 mx-lg-auto" style={{ maxWidth: 520 }}>
+            <div className="d-flex flex-column-reverse">
+              <h1 className="mb-0 h4 h2-sm">
+                {translate(
+                  "Explore funding opportunities for developers and teams"
+                )}
+              </h1>
+              <h6 className="eyebrow mb-3">{translate("Funding Overview")}</h6>
+            </div>
+            <p className="mt-3 py-3 p-0 longform">
               {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."
+                "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."
               )}
             </p>
-            <div className="d-none d-lg-block p-lg-3">
-              <Link className="btn btn-primary btn-arrow" to="/community/events">
-                {translate("See Upcoming Events")}
-              </Link>
-            </div>
           </div>
-          <div className="order-2 order-lg-1 col-lg-6 px-0">
-            <div className="row align-items-center m-0 funding-list">
-              {/* funding list */}
-              <div className="col-12 col-lg-6 p-0">
-                <div className="px-lg-3 pb-3">
-                  <img alt="user" id="funding-01" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Best for")}</h6>
-                    <p>
-                      {translate(
-                        "Software developers and teams building directly on the XRP Ledger"
-                      )}
-                    </p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="book" id="funding-02" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Required")}</h6>
-                    <p>{translate("Some coding experience")}</p>
-                  </div>
-                </div>
-                <div className="px-lg-3 pb-3 pt-lg-5">
-                  <img alt="arrow" id="funding-03" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Level")}</h6>
-                    <p>{translate("XRPL beginner to advanced developers")}</p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>{translate("Prize money and awards")}</p>
-                  </div>
-                </div>
+        </section>
+        {/* Hackathons */}
+        <section className="container-new py-26">
+          {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+          <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div
+              className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
+              style={{ maxWidth: 520 }}
+            >
+              <div className="d-flex flex-column-reverse p-lg-3">
+                <h3 className="h4 h2-sm">{translate("XRPL Hackathons")}</h3>
+                <h6 className="eyebrow mb-3">{translate("Join an Event")}</h6>
               </div>
-              {/* end col 1 */}
-              {/* Show on large */}
-              <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
-                <div className="px-lg-3 pb-3 pt-5 mt-5">
-                  <div className="pt-1 mt-3">
+              <p className="p-lg-3 mb-2 longform">
+                {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."
+                )}
+              </p>
+              <div className="d-none d-lg-block p-lg-3">
+                <Link className="btn btn-primary btn-arrow" to="/community/events">
+                  {translate("See Upcoming Events")}
+                </Link>
+              </div>
+            </div>
+            <div className="order-2 order-lg-1 col-lg-6 px-0">
+              <div className="row align-items-center m-0 funding-list">
+                {/* funding list */}
+                <div className="col-12 col-lg-6 p-0">
+                  <div className="px-lg-3 pb-3">
+                    <img alt="user" id="funding-01" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Best for")}</h6>
+                      <p>
+                        {translate(
+                          "Software developers and teams building directly on the XRP Ledger"
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
                     <img alt="book" id="funding-02" />
                     <div className="pt-3">
                       <h6 className="mb-3">{translate("Required")}</h6>
                       <p>{translate("Some coding experience")}</p>
                     </div>
                   </div>
-                </div>
-                <div className="px-lg-3 pb-3 pt-5">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>{translate("Prize money and awards")}</p>
+                  <div className="px-lg-3 pb-3 pt-lg-5">
+                    <img alt="arrow" id="funding-03" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Level")}</h6>
+                      <p>{translate("XRPL beginner to advanced developers")}</p>
+                    </div>
+                  </div>
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>{translate("Prize money and awards")}</p>
+                    </div>
                   </div>
                 </div>
+                {/* end col 1 */}
+                {/* Show on large */}
+                <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
+                  <div className="px-lg-3 pb-3 pt-5 mt-5">
+                    <div className="pt-1 mt-3">
+                      <img alt="book" id="funding-02" />
+                      <div className="pt-3">
+                        <h6 className="mb-3">{translate("Required")}</h6>
+                        <p>{translate("Some coding experience")}</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="px-lg-3 pb-3 pt-5">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>{translate("Prize money and awards")}</p>
+                    </div>
+                  </div>
+                </div>
+                {/* end col 2 */}
               </div>
-              {/* end col 2 */}
+            </div>
+            <div className="d-lg-none order-3 mt-4 pt-3">
+              <Link className="btn btn-primary btn-arrow" to="/community/events">
+                {translate("See Upcoming Events")}
+              </Link>
             </div>
           </div>
-          <div className="d-lg-none order-3 mt-4 pt-3">
-            <Link className="btn btn-primary btn-arrow" to="/community/events">
-              {translate("See Upcoming Events")}
-            </Link>
-          </div>
-        </div>
-      </section>
-      {/* Eligibility */}
-      <section className="container-new py-26">
-        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-        <div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
-          <div className="order-1  mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 p-lg-3">
-            <div className="d-flex flex-column-reverse py-lg-3">
-              <h3 className="h4 h2-sm">{translate("XRPL Grants")}</h3>
-              <h6 className="eyebrow mb-3">
-                {translate("Fund Your Project")}
-              </h6>
+        </section>
+        {/* Eligibility */}
+        <section className="container-new py-26">
+          {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+          <div className="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-4">
+            <div className="order-1  mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0 p-lg-3">
+              <div className="d-flex flex-column-reverse py-lg-3">
+                <h3 className="h4 h2-sm">{translate("XRPL Grants")}</h3>
+                <h6 className="eyebrow mb-3">
+                  {translate("Fund Your Project")}
+                </h6>
+              </div>
+              <p className="py-lg-3 mb-2 longform" style={{ maxWidth: 520 }}>
+                {translate(
+                  "Developer grants for projects that contribute to the growing XRP Ledger community."
+                )}
+              </p>
+              <div className="mt-4 pt-3" style={{ maxWidth: 520 }}>
+                <span className="h6" style={{ fontSize: "1rem" }}>
+                  {translate("Past awardees include:")}
+                </span>
+                <div className="mb-4 py-3" id="xrplGrantsDark" />
+              </div>
+              <div className="d-none d-lg-block py-lg-3">
+                <a
+                  className="btn btn-primary btn-arrow-out"
+                  target="_blank"
+                  href="https://xrplgrants.org/"
+                >
+                  {translate("Visit XRPL Grants")}
+                </a>
+              </div>
             </div>
-            <p className="py-lg-3 mb-2 longform" style={{ maxWidth: 520 }}>
-              {translate(
-                "Developer grants for projects that contribute to the growing XRP Ledger community."
-              )}
-            </p>
-            <div className="mt-4 pt-3" style={{ maxWidth: 520 }}>
-              <span className="h6" style={{ fontSize: "1rem" }}>
-                {translate("Past awardees include:")}
-              </span>
-              <div className="mb-4 py-3" id="xrplGrantsDark" />
+            <div className="order-2 col-lg-6 px-0 pl-lg-3">
+              <div className="row align-items-center m-0 funding-list">
+                {/* funding list */}
+                <div className="col-12 col-lg-6 p-0">
+                  <div className="px-lg-3 pb-3">
+                    <img alt="user" id="funding-01" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Best for")}</h6>
+                      <p>
+                        {translate(
+                          "Software developers, teams, and start-ups building directly on the XRP Ledger"
+                        )}
+                      </p>
+                    </div>
+                  </div>
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
+                    <img alt="book" id="funding-02" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Required")}</h6>
+                      <p>
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Coding experience")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Github repository")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Project narrative/description")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("At least one developer on the core team")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Budget and milestones")}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="px-lg-3 pb-3 pt-lg-5">
+                    <img alt="arrow" id="funding-03" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Level")}</h6>
+                      <p>
+                        {translate("XRPL intermediate to advanced developers")}
+                      </p>
+                    </div>
+                  </div>
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>{translate("$10,000 - $200,000")}</p>
+                    </div>
+                  </div>
+                </div>
+                {/* end col 1 */}
+                {/* Show on large */}
+                <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
+                  <div className="px-lg-3 pb-3 pt-5 mt-5">
+                    <div className="pt-1 mt-3">
+                      <img alt="book" id="funding-02" />
+                      <div className="pt-3">
+                        <h6 className="mb-3">{translate("Required")}</h6>
+                        <p>
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Coding experience")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Github repository")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Project narrative/description")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("At least one developer on the core team")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Budget and milestones")}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="px-lg-3 pb-3 pt-5">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>{translate("$10,000 - $200,000")}</p>
+                    </div>
+                  </div>
+                </div>
+                {/* end col 2 */}
+              </div>
             </div>
-            <div className="d-none d-lg-block py-lg-3">
+            <div className="d-lg-none order-3 mt-4 pt-3">
               <a
                 className="btn btn-primary btn-arrow-out"
                 target="_blank"
@@ -170,202 +283,52 @@ export default function Funding() {
               </a>
             </div>
           </div>
-          <div className="order-2 col-lg-6 px-0 pl-lg-3">
-            <div className="row align-items-center m-0 funding-list">
-              {/* funding list */}
-              <div className="col-12 col-lg-6 p-0">
-                <div className="px-lg-3 pb-3">
-                  <img alt="user" id="funding-01" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Best for")}</h6>
-                    <p>
-                      {translate(
-                        "Software developers, teams, and start-ups building directly on the XRP Ledger"
-                      )}
-                    </p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="book" id="funding-02" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Required")}</h6>
-                    <p>
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Coding experience")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Github repository")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Project narrative/description")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("At least one developer on the core team")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Budget and milestones")}
-                    </p>
-                  </div>
-                </div>
-                <div className="px-lg-3 pb-3 pt-lg-5">
-                  <img alt="arrow" id="funding-03" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Level")}</h6>
-                    <p>
-                      {translate("XRPL intermediate to advanced developers")}
-                    </p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>{translate("$10,000 - $200,000")}</p>
-                  </div>
-                </div>
+        </section>
+        {/* Accelerator */}
+        <section className="container-new py-26">
+          {/* flex. Col for mobile. Row for large. on large align content to the center  */}
+          <div className="d-flex flex-column flex-lg-row align-items-lg-center">
+            <div
+              className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
+              style={{ maxWidth: 520 }}
+            >
+              <div className="d-flex flex-column-reverse p-lg-3">
+                <h3 className="h4 h2-sm">{translate("XRPL Accelerator")}</h3>
+                <h6 className="eyebrow mb-3">
+                  {translate("Advance your project")}
+                </h6>
               </div>
-              {/* end col 1 */}
-              {/* Show on large */}
-              <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
-                <div className="px-lg-3 pb-3 pt-5 mt-5">
-                  <div className="pt-1 mt-3">
-                    <img alt="book" id="funding-02" />
+              <p className="p-lg-3 mb-2 longform">
+                {translate(
+                  "12-week program for entrepreneurs building on the XRP Ledger to scale their projects into thriving businesses."
+                )}
+              </p>
+              <div className="d-none d-lg-block p-lg-3">
+                <a
+                  className="btn btn-primary btn-arrow"
+                  href="https://xrplaccelerator.org/"
+                >
+                  {translate("View XRPL Accelerator")}
+                </a>
+              </div>
+            </div>
+            <div className="order-2 order-lg-1 col-lg-6 px-0">
+              <div className="row align-items-center m-0 funding-list">
+                {/* funding list */}
+                <div className="col-12 col-lg-6 p-0">
+                  <div className="px-lg-3 pb-3">
+                    <img alt="user" id="funding-01" />
                     <div className="pt-3">
-                      <h6 className="mb-3">{translate("Required")}</h6>
+                      <h6 className="mb-3">{translate("Best for")}</h6>
                       <p>
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Coding experience")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Github repository")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Project narrative/description")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("At least one developer on the core team")}
-                        <br />
-                        <span style={{ color: "#7919FF" }}>•</span>{" "}
-                        {translate("Budget and milestones")}
+                        {translate(
+                          "Start-ups building scalable products on XRPL that can capture a large market opportunity"
+                        )}
                       </p>
                     </div>
                   </div>
-                </div>
-                <div className="px-lg-3 pb-3 pt-5">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>{translate("$10,000 - $200,000")}</p>
-                  </div>
-                </div>
-              </div>
-              {/* end col 2 */}
-            </div>
-          </div>
-          <div className="d-lg-none order-3 mt-4 pt-3">
-            <a
-              className="btn btn-primary btn-arrow-out"
-              target="_blank"
-              href="https://xrplgrants.org/"
-            >
-              {translate("Visit XRPL Grants")}
-            </a>
-          </div>
-        </div>
-      </section>
-      {/* Accelerator */}
-      <section className="container-new py-26">
-        {/* flex. Col for mobile. Row for large. on large align content to the center  */}
-        <div className="d-flex flex-column flex-lg-row align-items-lg-center">
-          <div
-            className="order-1 order-lg-2 mb-4 pb-3 mb-lg-0 pb-lg-0 col-lg-6 px-0"
-            style={{ maxWidth: 520 }}
-          >
-            <div className="d-flex flex-column-reverse p-lg-3">
-              <h3 className="h4 h2-sm">{translate("XRPL Accelerator")}</h3>
-              <h6 className="eyebrow mb-3">
-                {translate("Advance your project")}
-              </h6>
-            </div>
-            <p className="p-lg-3 mb-2 longform">
-              {translate(
-                "12-week program for entrepreneurs building on the XRP Ledger to scale their projects into thriving businesses."
-              )}
-            </p>
-            <div className="d-none d-lg-block p-lg-3">
-              <a
-                className="btn btn-primary btn-arrow"
-                href="https://xrplaccelerator.org/"
-              >
-                {translate("View XRPL Accelerator")}
-              </a>
-            </div>
-          </div>
-          <div className="order-2 order-lg-1 col-lg-6 px-0">
-            <div className="row align-items-center m-0 funding-list">
-              {/* funding list */}
-              <div className="col-12 col-lg-6 p-0">
-                <div className="px-lg-3 pb-3">
-                  <img alt="user" id="funding-01" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Best for")}</h6>
-                    <p>
-                      {translate(
-                        "Start-ups building scalable products on XRPL that can capture a large market opportunity"
-                      )}
-                    </p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="book" id="funding-02" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Required")}</h6>
-                    <p>
-                      <span style={{ color: "#7919FF" }}>•</span>{" "}
-                      {translate("Strong founding team")}
-                      <br />
-                      <span style={{ color: "#7919FF" }}>•</span>{" "}
-                      {translate("Bold, ambitious vision")}
-                      <br />
-                      <span style={{ color: "#7919FF" }}>•</span>{" "}
-                      {translate("Ideally an MVP and monetization strategy")}
-                    </p>
-                  </div>
-                </div>
-                <div className="px-lg-3 pb-3 pt-lg-5">
-                  <img alt="arrow" id="funding-03" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Level")}</h6>
-                    <p>
-                      <span style={{ color: "#7919FF" }}>•</span>{" "}
-                      {translate("XRPL advanced developers")}
-                      <br />
-                      <span style={{ color: "#7919FF" }}>•</span>{" "}
-                      {translate("Business acumen")}
-                    </p>
-                  </div>
-                </div>
-                {/* Hide on large */}
-                <div className="px-lg-3 pb-3 d-lg-none">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>
-                      {translate(
-                        "$50,000 (grant) + pitch for venture funding"
-                      )}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              {/* end col 1 */}
-              {/* Show on large */}
-              <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
-                <div className="px-lg-3 pb-3 pt-5 mt-5">
-                  <div className="pt-1 mt-3">
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
                     <img alt="book" id="funding-02" />
                     <div className="pt-3">
                       <h6 className="mb-3">{translate("Required")}</h6>
@@ -377,38 +340,92 @@ export default function Funding() {
                         {translate("Bold, ambitious vision")}
                         <br />
                         <span style={{ color: "#7919FF" }}>•</span>{" "}
+                        {translate("Ideally an MVP and monetization strategy")}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="px-lg-3 pb-3 pt-lg-5">
+                    <img alt="arrow" id="funding-03" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Level")}</h6>
+                      <p>
+                        <span style={{ color: "#7919FF" }}>•</span>{" "}
+                        {translate("XRPL advanced developers")}
+                        <br />
+                        <span style={{ color: "#7919FF" }}>•</span>{" "}
+                        {translate("Business acumen")}
+                      </p>
+                    </div>
+                  </div>
+                  {/* Hide on large */}
+                  <div className="px-lg-3 pb-3 d-lg-none">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>
                         {translate(
-                          "Ideally an MVP and monetization strategy"
+                          "$50,000 (grant) + pitch for venture funding"
                         )}
                       </p>
                     </div>
                   </div>
                 </div>
-                <div className="px-lg-3 pb-3 pt-5">
-                  <img alt="dollar sign" id="funding-04" />
-                  <div className="pt-3">
-                    <h6 className="mb-3">{translate("Funding Levels")}</h6>
-                    <p>
-                      {translate(
-                        "$50,000 (grant) + pitch for venture funding"
-                      )}
-                    </p>
+                {/* end col 1 */}
+                {/* Show on large */}
+                <div className="col-12 col-lg-6 p-0 d-none d-lg-block">
+                  <div className="px-lg-3 pb-3 pt-5 mt-5">
+                    <div className="pt-1 mt-3">
+                      <img alt="book" id="funding-02" />
+                      <div className="pt-3">
+                        <h6 className="mb-3">{translate("Required")}</h6>
+                        <p>
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Strong founding team")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate("Bold, ambitious vision")}
+                          <br />
+                          <span style={{ color: "#7919FF" }}>•</span>{" "}
+                          {translate(
+                            "Ideally an MVP and monetization strategy"
+                          )}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="px-lg-3 pb-3 pt-5">
+                    <img alt="dollar sign" id="funding-04" />
+                    <div className="pt-3">
+                      <h6 className="mb-3">{translate("Funding Levels")}</h6>
+                      <p>
+                        {translate(
+                          "$50,000 (grant) + pitch for venture funding"
+                        )}
+                      </p>
+                    </div>
                   </div>
                 </div>
+                {/* end col 2 */}
               </div>
-              {/* end col 2 */}
+            </div>
+            <div className="d-lg-none order-3 mt-4 pt-3">
+              <a
+                className="btn btn-primary btn-arrow"
+                href="https://xrplaccelerator.org/"
+              >
+                {translate("View XRPL Accelerator")}
+              </a>
             </div>
           </div>
-          <div className="d-lg-none order-3 mt-4 pt-3">
-            <a
-              className="btn btn-primary btn-arrow"
-              href="https://xrplaccelerator.org/"
-            >
-              {translate("View XRPL Accelerator")}
-            </a>
-          </div>
+        </section>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="orange waves"
+            src={require("../static/img/backgrounds/funding-orange.svg")}
+            id="funding-orange"
+          />
         </div>
-      </section>
+      </div>
     </div>
   );
 }

community/events.page.tsx

@@ -1270,7 +1270,7 @@ const events = [
     link: "https://luma.com/llwjrmcx",
     location: "Rome, Italy",
     date: "November 07, 2025",
-    image: hackathon,
+    image: italyHackathon,
     end_date: "November 08, 2025",
   },
   {
@@ -1306,6 +1306,17 @@ const events = [
     date: "December 10, 2025",
     end_date: "December 10, 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: "Nov 14 - Dec 06, 2025",
+    image: require("../static/img/events/hackathon-kaigi.png"),
+    end_date: "December 06, 2025",
+  },
 ];
 
 
@@ -1364,303 +1375,311 @@ export default function Events() {
   
   return (
     <div className="landing page-events">
-      <section className="text-center py-26">
-        <div className="mx-auto text-center col-lg-5">
-          <div className="d-flex flex-column-reverse">
-            <h1 className="mb-0">
-              {translate("Find the XRPL Community Around the World")}
-            </h1>
-            <h6 className="mb-3 eyebrow">{translate("Events")}</h6>
-          </div>
+      <div>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="orange waves"
+            src={require("../static/img/backgrounds/events-orange.svg")}
+            id="events-orange"
+          />
         </div>
-      </section>
-      <section className="container-new py-26">
-        <div className="event-hero card-grid card-grid-2xN">
-          <div className="pe-2 col">
-            <img
-              alt="xrp ledger events hero"
-              src={require("../static/img/events/xrp-community-night.png")}
-              className="w-100"
-            />
-          </div>
-          <div className="pt-5 pe-2 col">
+        <section className="text-center py-26">
+          <div className="mx-auto text-center col-lg-5">
             <div className="d-flex flex-column-reverse">
-              <h2 className="mb-8 h4 h2-sm">
-                {translate("XRP Community Night NYC")}
-              </h2>
-              <h6 className="mb-3 eyebrow">{translate("Save the Date")}</h6>
+              <h1 className="mb-0">
+                {translate("Find the XRPL Community Around the World")}
+              </h1>
+              <h6 className="mb-3 eyebrow">{translate("Events")}</h6>
             </div>
-            <p className="mb-4">
+          </div>
+        </section>
+        <section className="container-new py-26">
+          <div className="event-hero card-grid card-grid-2xN">
+            <div className="pr-2 col">
+              <img
+                alt="xrp ledger events hero"
+                src={require("../static/img/events/xrp-community-night.png")}
+                className="w-100"
+              />
+            </div>
+            <div className="pt-5 pr-2 col">
+              <div className="d-flex flex-column-reverse">
+                <h2 className="mb-8 h4 h2-sm">
+                  {translate("XRP Community Night NYC")}
+                </h2>
+                <h6 className="mb-3 eyebrow">{translate("Save the Date")}</h6>
+              </div>
+              <p className="mb-4">
+                {translate(
+                  "Join the XRP community in NYC—meet builders, users, and projects innovating on the XRP Ledger."
+                )}
+              </p>
+              <div className=" my-3 event-small-gray">
+                {translate("Location: New York, NY")}
+              </div>
+              <div className="py-2 my-3 event-small-gray">
+                {translate("November 5, 2025")}
+              </div>
+              <div className="d-lg-block">
+                <a
+                  className="btn btn-primary btn-arrow-out"
+                  target="_blank"
+                  href="https://lu.ma/g5uja58m?utm_source=xrpleventspage"
+                >
+                  {translate("Register Now")}
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+        {/* Upcoming Events */}
+        <section className="container-new py-26" id="upcoming-events">
+          <div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
+            <h3 className="h4 h2-sm">
               {translate(
-                "Join the XRP community in NYC—meet builders, users, and projects innovating on the XRP Ledger."
+                "Check out meetups, hackathons, and other events hosted by the XRPL Community"
               )}
-            </p>
-            <div className=" my-3 event-small-gray">
-              {translate("Location: New York, NY")}
-            </div>
-            <div className="py-2 my-3 event-small-gray">
-              {translate("November 5, 2025")}
-            </div>
-            <div className="d-lg-block">
-              <a
-                className="btn btn-primary btn-arrow-out"
-                target="_blank"
-                href="https://lu.ma/g5uja58m?utm_source=xrpleventspage"
-              >
-                {translate("Register Now")}
-              </a>
+            </h3>
+            <h6 className="mb-3 eyebrow">{translate("Upcoming Events")}</h6>
+          </div>
+          <div className="filter row col-12 mt-lg-5 d-flex flex-column">
+            <h6 className="mb-3">{translate("Filter By:")}</h6>
+            <div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="conference"
+                  id="conference-upcoming"
+                  name="conference-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.conference}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="conference-upcoming">
+                  {translate("Conference")}
+                </label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="meetup"
+                  id="meetup-upcoming"
+                  name="meetup-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.meetup}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="meetup-upcoming">{translate("Meetups")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="hackathon"
+                  id="hackathon-upcoming"
+                  name="hackathon-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.hackathon}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="hackathon-upcoming">
+                  {translate("Hackathons")}
+                </label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="ama"
+                  id="ama-upcoming"
+                  name="ama-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.ama}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="ama-upcoming">{translate("AMAs")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="cc"
+                  id="cc-upcoming"
+                  name="cc-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.cc}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="cc-upcoming">
+                  {translate("Community Calls")}
+                </label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="zone"
+                  id="zone-upcoming"
+                  name="zone-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters.zone}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="zone-upcoming">{translate("XRPL Zone")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="info"
+                  id="info-upcoming"
+                  name="info-upcoming"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={upcomingFilters["info"]}
+                  onChange={handleUpcomingFilterChange}
+                />
+                <label htmlFor="info-upcoming">
+                  {translate("Info Session")}
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-      </section>
-      {/* Upcoming Events */}
-      <section className="container-new py-26" id="upcoming-events">
-        <div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
-          <h3 className="h4 h2-sm">
-            {translate(
-              "Check out meetups, hackathons, and other events hosted by the XRPL Community"
-            )}
-          </h3>
-          <h6 className="mb-3 eyebrow">{translate("Upcoming Events")}</h6>
-        </div>
-        <div className="filter row col-12 mt-lg-5 d-flex flex-column">
-          <h6 className="mb-3">{translate("Filter By:")}</h6>
-          <div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="conference"
-                id="conference-upcoming"
-                name="conference-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.conference}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="conference-upcoming">
-                {translate("Conference")}
-              </label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="meetup"
-                id="meetup-upcoming"
-                name="meetup-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.meetup}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="meetup-upcoming">{translate("Meetups")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="hackathon"
-                id="hackathon-upcoming"
-                name="hackathon-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.hackathon}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="hackathon-upcoming">
-                {translate("Hackathons")}
-              </label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="ama"
-                id="ama-upcoming"
-                name="ama-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.ama}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="ama-upcoming">{translate("AMAs")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="cc"
-                id="cc-upcoming"
-                name="cc-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.cc}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="cc-upcoming">
-                {translate("Community Calls")}
-              </label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="zone"
-                id="zone-upcoming"
-                name="zone-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters.zone}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="zone-upcoming">{translate("XRPL Zone")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="info"
-                id="info-upcoming"
-                name="info-upcoming"
-                type="checkbox"
-                className="events-filter"
-                checked={upcomingFilters["info"]}
-                onChange={handleUpcomingFilterChange}
-              />
-              <label htmlFor="info-upcoming">
-                {translate("Info Session")}
-              </label>
-            </div>
-          </div>
-        </div>
-        {/* # Available Types - conference, hackathon, ama, cc, zone, meetup, info  */}
-        <div className="row row-cols-1 row-cols-lg-3 g-4 mt-2">
-          {filteredUpcoming.map((event, i) => (
-            <div key={event.name + i} className="col">
+          {/* # Available Types - conference, hackathon, ama, cc, zone, meetup, info  */}
+          <div className="mt-2 row row-cols-1 row-cols-lg-3 card-deck">
+            {filteredUpcoming.map((event, i) => (
               <a
-                className={`event-card ${event.type} h-100`}
+                key={event.name + i}
+                className={`event-card ${event.type}`}
                 href={event.link}
+                style={{}}
                 target="_blank"
               >
-              <div
-                className="event-card-header"
-                style={{
-                  background: `url(${event.image}) no-repeat`,
-                }}
-              >
-                <div className="event-card-title">
-                  {translate(event.name)}
+                <div
+                  className="event-card-header"
+                  style={{
+                    background: `url(${event.image}) no-repeat`,
+                  }}
+                >
+                  <div className="event-card-title">
+                    {translate(event.name)}
+                  </div>
                 </div>
-              </div>
-              <div className="event-card-body">
-                <p>{translate(event.description)}</p>
-              </div>
-              <div className="mt-lg-auto event-card-footer d-flex flex-column">
-                <span className="mb-2 d-flex icon icon-location">
-                  {event.location}
-                </span>
-                <span className="d-flex icon icon-date">{event.date}</span>
-              </div>
-            </a>
+                <div className="event-card-body">
+                  <p>{translate(event.description)}</p>
+                </div>
+                <div className="mt-lg-auto event-card-footer d-flex flex-column">
+                  <span className="mb-2 d-flex icon icon-location">
+                    {event.location}
+                  </span>
+                  <span className="d-flex icon icon-date">{event.date}</span>
+                </div>
+              </a>
+            ))}
           </div>
-          ))}
-        </div>
-      </section>
-      {/* Past Events */}
-      <section className="container-new pt-26" id="past-events">
-        <div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
-          <h3 className="h4 h2-sm">
-            {translate("Explore past community-hosted events")}
-          </h3>
-          <h6 className="mb-3 eyebrow">{translate("Past Events")}</h6>
-        </div>
-        <div className="filter row col-12 mt-lg-5 d-flex flex-column">
-          <h6 className="mb-3">{translate("Filter By:")}</h6>
-          <div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="conference"
-                id="conference-past"
-                name="conference-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.conference}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="conference-past">
-                {translate("Conference")}
-              </label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="meetup"
-                id="meetup-past"
-                name="meetup-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.meetup}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="meetup-past">{translate("Meetups")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="hackathon"
-                id="hackathon-past"
-                name="hackathon-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.hackathon}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="hackathon-past">
-                {translate("Hackathons")}
-              </label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="ama"
-                id="ama-past"
-                name="ama-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.ama}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="ama-past">{translate("AMAs")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="cc"
-                id="cc-past"
-                name="cc-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.cc}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="cc-past">{translate("Community Calls")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="zone"
-                id="zone-past"
-                name="zone-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters.zone}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="zone-past">{translate("XRPL Zone")}</label>
-            </div>
-            <div className="form-check form-check-inline">
-              <input
-                defaultValue="info"
-                id="info-past"
-                name="info-past"
-                type="checkbox"
-                className="events-filter"
-                checked={pastFilters["info"]}
-                onChange={handlePastFilterChange}
-              />
-              <label htmlFor="info-past">
-                {translate("Info Session")}
-              </label>
+        </section>
+        {/* Past Events */}
+        <section className="container-new pt-26" id="past-events">
+          <div className="p-0 pb-2 mb-4 d-flex flex-column-reverse col-lg-6 pr-lg-5">
+            <h3 className="h4 h2-sm">
+              {translate("Explore past community-hosted events")}
+            </h3>
+            <h6 className="mb-3 eyebrow">{translate("Past Events")}</h6>
+          </div>
+          <div className="filter row col-12 mt-lg-5 d-flex flex-column">
+            <h6 className="mb-3">{translate("Filter By:")}</h6>
+            <div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="conference"
+                  id="conference-past"
+                  name="conference-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.conference}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="conference-past">
+                  {translate("Conference")}
+                </label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="meetup"
+                  id="meetup-past"
+                  name="meetup-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.meetup}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="meetup-past">{translate("Meetups")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="hackathon"
+                  id="hackathon-past"
+                  name="hackathon-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.hackathon}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="hackathon-past">
+                  {translate("Hackathons")}
+                </label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="ama"
+                  id="ama-past"
+                  name="ama-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.ama}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="ama-past">{translate("AMAs")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="cc"
+                  id="cc-past"
+                  name="cc-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.cc}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="cc-past">{translate("Community Calls")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="zone"
+                  id="zone-past"
+                  name="zone-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters.zone}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="zone-past">{translate("XRPL Zone")}</label>
+              </div>
+              <div className="form-check form-check-inline">
+                <input
+                  defaultValue="info"
+                  id="info-past"
+                  name="info-past"
+                  type="checkbox"
+                  className="events-filter"
+                  checked={pastFilters["info"]}
+                  onChange={handlePastFilterChange}
+                />
+                <label htmlFor="info-past">
+                  {translate("Info Session")}
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="row row-cols-1 row-cols-lg-3 g-4 mt-2 mb-0">
-          {filteredPast.map((event, i) => (
-            <div key={event.name + i} className="col">
+          <div className="mt-2 mb-0 row row-cols-1 row-cols-lg-3 card-deck ">
+            {filteredPast.map((event, i) => (
               <a
-                className={`event-card ${event.type} h-100`}
+                key={event.name + i}
+                className="event-card {event.type}"
                 href={event.link}
                 target="_blank"
               >
@@ -1681,13 +1700,13 @@ export default function Events() {
                   <span className="mb-2 d-flex icon icon-location">
                     {event.location}
                   </span>
-                <span className="d-flex icon icon-date">{event.date}</span>
-              </div>
-            </a>
-            </div>
-          ))}
-        </div>
-      </section>
+                  <span className="d-flex icon icon-date">{event.date}</span>
+                </div>
+              </a>
+            ))}
+          </div>
+        </section>
+      </div>
     </div>
   );
 }

community/index.page.tsx

@@ -390,10 +390,22 @@ const events = [
     link: "https://xrpl.vegahacks.xyz/",
     location: "Virtual",
     date: "October 01 - November 14, 2025",
-    image: hackathon,
+    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",
+  },
 
 ];
 
@@ -618,7 +630,7 @@ const CommunityPage: React.FC = () => {
           />
         </div>
 
-        <div className="mx-auto text-start col-lg-6 text-md-center hero-title">
+        <div className="mx-auto text-left col-lg-6 text-md-center hero-title">
           <div className="d-flex flex-column-reverse align-items-center sm-align-items-start">
             <img
               src={require("../static/img/icons/arrow-down.svg")}
@@ -870,6 +882,7 @@ const CommunityPage: React.FC = () => {
       {/* Bottom Cards Section 2 cards */}
       <section className="bottom-cards-section bug-bounty">
         <div className="com-card ripplex-bug-bounty">
+          <img className="top-right-img bug-bounty-card-bg" alt="Top Right Image" />
           <div className="card-content">
             <h6 className="card-title">
               {translate("RippleX Bug Bounty Program")}
@@ -909,6 +922,7 @@ const CommunityPage: React.FC = () => {
           </div>
         </div>
         <div className="com-card">
+          <img className="bottom-right-img bug-bounty-card-bg-2" alt="Bottom Right Image" />
           <div className="card-content">
             <h6 className="card-title">{translate("Report a Scam")}</h6>
             <h6 className="card-subtitle pr-bt28">
@@ -936,6 +950,7 @@ const CommunityPage: React.FC = () => {
       {/* Bottom Cards Section */}
       <section className="bottom-cards-section">
         <div className="com-card">
+          <img className="top-left-img" alt="Top Left Image" />
           <div className="card-content">
             <h6 className="card-title">
               {translate("Contribute to Consensus")}
@@ -981,6 +996,7 @@ const CommunityPage: React.FC = () => {
           </div>
         </div>
         <div className="com-card">
+          <img className="bottom-right-img" alt="Bottom Right Image" />
           <div className="card-content">
             <h6 className="card-title">{translate("XRPL Careers")}</h6>
             <h6 className="card-subtitle pr-bt16">
@@ -1005,6 +1021,7 @@ const CommunityPage: React.FC = () => {
           </div>
         </div>
         <div className="com-card">
+          <img className="top-right-img" alt="Top Right Image" />
           <div className="card-content">
             <h6 className="card-title">
               {translate("Contribute to XRPL.org")}

docs/concepts/accounts/addresses.md

@@ -1,10 +1,8 @@
 ---
-html: addresses.html
-parent: accounts.html
 seo:
     description: Addresses uniquely identify XRP Ledger accounts, using base58 format.
 labels:
-  - Accounts
+    - Accounts
 ---
 # Addresses
 
@@ -24,16 +22,16 @@ Some addresses have special meaning, or historical uses, in the XRP Ledger. In m
 |-------------------------------|------|---------|-------------|
 | `rrrrrrrrrrrrrrrrrrrrrhoLvTp` | ACCOUNT\_ZERO | An address that is the XRP Ledger's [base58][] encoding of the value `0`. In peer-to-peer communications, `rippled` uses this address as the issuer for XRP. | Yes |
 | `rrrrrrrrrrrrrrrrrrrrBZbvji`  | ACCOUNT\_ONE | An address that is the XRP Ledger's [base58][] encoding of the value `1`. In the ledger, [RippleState entries](../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md) use this address as a placeholder for the issuer of a trust line balance. | Yes |
-| `rHb9CJAWyB4rj91VRWn96DkukG4bwdtyTh` | The genesis account | When `rippled` starts a new genesis ledger from scratch (for example, in stand-alone mode), this account holds all the XRP. This address is generated from the seed value `masterpassphrase` which is [hard-coded](https://github.com/XRPLF/rippled/blob/94ed5b3a53077d815ad0dd65d490c8d37a147361/src/ripple/app/ledger/Ledger.cpp#L184). | No |
+| `rHb9CJAWyB4rj91VRWn96DkukG4bwdtyTh` | The genesis account | When `rippled` starts a new genesis ledger from scratch (for example, in stand-alone mode), this account holds all the XRP. This address is generated from the seed value `masterpassphrase` which is [hard-coded](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/app/ledger/Ledger.cpp#L184). | No |
 | `rrrrrrrrrrrrrrrrrNAMEtxvNvQ` | Ripple Name reservation black-hole | In the past, Ripple asked users to send XRP to this account to reserve Ripple Names.| Yes |
-| `rrrrrrrrrrrrrrrrrrrn5RM1rHd` | NaN Address | Previous versions of [ripple-lib](https://github.com/XRPLF/xrpl.js) generated this address when encoding the value [NaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) using the XRP Ledger's [base58][] string encoding format. | Yes |
+| `rrrrrrrrrrrrrrrrrrrn5RM1rHd` | NaN Address | Old JavaScript client libraries generated this address when encoding the value [NaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN) using the XRP Ledger's [base58][] string encoding format. | Yes |
 
 
 ## Address Encoding
 
 {% admonition type="success" name="Tip" %}These technical details are only relevant for people building low-level library software for XRP Ledger compatibility!{% /admonition %}
 
-[[Source]](https://github.com/XRPLF/rippled/blob/35fa20a110e3d43ffc1e9e664fc9017b6f2747ae/src/ripple/protocol/impl/AccountID.cpp#L109-L140 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/libxrpl/protocol/AccountID.cpp#L133-L175 "Source")
 
 XRP Ledger addresses are encoded using [base58][] with the _dictionary_ `rpshnaf39wBUDNEGHJKLM4PQRST7VWXYZ2bcdeCg65jkm8oFqi1tuvAxyz`. Since the XRP Ledger encodes several types of keys with base58, it prefixes the encoded data with a one-byte "type prefix" (also called a "version prefix") to distinguish them. The type prefix causes addresses to usually start with different letters in base58 format.
 

docs/concepts/accounts/cryptographic-keys.md

@@ -154,14 +154,14 @@ The process of deriving a key pair depends on the signing algorithm. In all case
 The key derivation processes described here are implemented in multiple places and programming languages:
 
 - In C++ in the `rippled` code base:
-    - [Seed definition](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/Seed.h)
-    - [General & Ed25519 key derivation](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/impl/SecretKey.cpp)
-    - [secp256k1 key derivation](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/impl/SecretKey.cpp)
+    - [Seed definition](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/Seed.cpp)
+    - [General & Ed25519 key derivation](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/SecretKey.cpp)
+    - [secp256k1 key derivation](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/SecretKey.cpp)
 - In Python 3 in {% repo-link path="_code-samples/key-derivation/py/key_derivation.py" %}this repository's code samples section{% /repo-link %}.
 - In JavaScript in the [`ripple-keypairs`](https://github.com/XRPLF/xrpl.js/tree/main/packages/ripple-keypairs) package.
 
 ### Ed25519 Key Derivation
-[[Source]](https://github.com/XRPLF/rippled/blob/fc7ecd672a3b9748bfea52ce65996e324553c05f/src/ripple/protocol/impl/SecretKey.cpp#L203 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/libxrpl/protocol/SecretKey.cpp#L311-L317 "Source")
 
 [{% inline-svg file="/docs/img/key-derivation-ed25519.svg" /%}](/docs/img/key-derivation-ed25519.svg "Passphrase → Seed → Secret Key → Prefix + Public Key")
 
@@ -182,7 +182,7 @@ The key derivation processes described here are implemented in multiple places a
     Validator ephemeral keys cannot be Ed25519.
 
 ### secp256k1 Key Derivation
-[[Source]](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/impl/SecretKey.cpp "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/SecretKey.cpp "Source")
 
 [{% inline-svg file="/docs/img/key-derivation-secp256k1.svg" /%}](/docs/img/key-derivation-secp256k1.svg "Passphrase → Seed → Root Key Pair → Intermediate Key Pair → Master Key Pair")
 
@@ -201,7 +201,7 @@ The steps to derive the XRP Ledger's secp256k1 account key pair from a seed valu
 
     2. Calculate the [SHA-512Half][] of the concatenated (seed+root sequence) value.
 
-    3. If the result is not a valid secp256k1 secret key, increment the root sequence by 1 and start over. [[Source]](https://github.com/XRPLF/rippled/blob/fc7ecd672a3b9748bfea52ce65996e324553c05f/src/ripple/crypto/impl/GenerateDeterministicKey.cpp#L103 "Source")
+    3. If the result is not a valid secp256k1 secret key, increment the root sequence by 1 and start over. [[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/libxrpl/protocol/SecretKey.cpp#L103-L114 "Source")
 
         A valid secp256k1 key must not be zero, and it must be numerically less than the _secp256k1 group order_. The secp256k1 group order is the constant value `0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEBAAEDCE6AF48A03BBFD25E8CD0364141`.
 

docs/concepts/consensus-protocol/consensus-structure.md

@@ -107,7 +107,7 @@ When the consensus process completes, each server independently computes a new l
 
 2. Place the agreed-upon transaction set in _canonical order_ so that every server processes them the same way.
 
-    [Canonical order](https://github.com/XRPLF/rippled/blob/8429dd67e60ba360da591bfa905b58a35638fda1/src/ripple/app/misc/CanonicalTXSet.cpp#L25-L36) is not the order the transactions were received, because servers may receive the same transactions in different order. To prevent participants from competing over transaction ordering, canonical order is hard to manipulate.
+    [Canonical order](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/misc/CanonicalTXSet.cpp) is not the order the transactions were received, because servers may receive the same transactions in different order. To prevent participants from competing over transaction ordering, canonical order is hard to manipulate.
 
 3. Process each transaction according to its instructions, in order. Update the ledger's state data accordingly.
 

docs/concepts/consensus-protocol/invariant-checking.md

@@ -1,11 +1,9 @@
 ---
-html: invariant-checking.html
-parent: consensus.html
 seo:
     description: Understand what invariant checking is, why it exists, how it works, and what invariant checks are active.
 labels:
-  - Blockchain
-  - Security
+    - Blockchain
+    - Security
 ---
 # Invariant Checking
 
@@ -29,49 +27,25 @@ The processing of incorrect transaction would undermine the value of trust in th
 
 ## How it Works
 
-The invariant checker is a second layer of code that runs automatically in real-time after each transaction. Before the transaction's results are committed to the ledger, the invariant checker examines those changes for correctness. If the transaction's results would break one of the XRP Ledger's strict rules, the invariant checker rejects the transaction. Transactions that are rejected this way have the result code `tecINVARIANT_FAILED` and are included in the ledger with no effects.
+The invariant checker is a second layer of code that runs automatically in real-time after each transaction. Before the transaction's results are committed to the ledger, the invariant checker examines those changes for correctness. If the transaction's results would break one of the XRP Ledger's strict rules, the invariant checker rejects the transaction. Transactions that are rejected this way have the [result code](../../references/protocol/transactions/transaction-results/index.md) `tecINVARIANT_FAILED` and are included in the ledger with no effects.
 
 To include the transaction in the ledger with a `tec`-class code, some minimal processing is necessary. If this minimal processing still breaks an invariant, the transaction fails with the code `tefINVARIANT_FAILED` instead, and is not included in the ledger at all.
 
 
 ## Active Invariants
 
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/tx/detail/InvariantCheck.h "Source")
+
 The XRP Ledger checks all the following invariants on each transaction:
 
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L92 "Source")
-
 - [Transaction Fee Check](#transaction-fee-check)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L118 "Source")
-
 - [XRP Not Created](#xrp-not-created)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L146 "Source")
-
 - [Account Roots Not Deleted](#account-roots-not-deleted)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L173 "Source")
-
 - [XRP Balance Checks](#xrp-balance-checks)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L197 "Source")
-
 - [Ledger Entry Types Match](#ledger-entry-types-match)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L224 "Source")
-
 - [No XRP Trust Lines](#no-xrp-trust-lines)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L251 "Source")
-
 - [No Bad Offers](#no-bad-offers)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L275 "Source")
-
 - [No Zero Escrow](#no-zero-escrow)
-
-[[Source]](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h#L300 "Source")
-
 - [Valid New Account Root](#valid-new-account-root)
 
 
@@ -97,7 +71,7 @@ The XRP Ledger checks all the following invariants on each transaction:
 ### XRP Balance Checks
 
 - **Invariant Condition(s):**
-    - An account's XRP balance must be of type XRP, and it cannot be less than 0 or more than 100 billion XRP exactly.
+    - An account's XRP balance must be of type XRP, and it cannot be less than 0 or more than [100 billion XRP exactly](https://github.com/XRPLF/rippled/blob/a7792ebcae63db64e9ae3d7704576252837c2512/include/xrpl/protocol/SystemParameters.h#L44-L51).
 
 
 ### Ledger Entry Types Match
@@ -155,18 +129,12 @@ The XRP Ledger checks all the following invariants on each transaction:
 ## See Also
 
 - **Blog:**
-    - [Protecting the Ledger: Invariant Checking](https://xrpl.org/blog/2017/invariant-checking.html)
+    - [Protecting the Ledger: Invariant Checking](/blog/2017/invariant-checking.md)
 
 - **Repository:**
-    - [Invariant Check.h](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.h)
-    - [Invariant Check.cpp](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/app/tx/impl/InvariantCheck.cpp)
-    - [System Parameters](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/SystemParameters.h#L43)
-    - [XRP Amount](https://github.com/XRPLF/rippled/blob/develop/src/ripple/basics/XRPAmount.h#L244)
-    - [Ledger Formats](https://github.com/XRPLF/rippled/blob/023f5704d07d09e70091f38a0d4e5df213a3144b/src/ripple/protocol/LedgerFormats.h#L36-L94)
+    - [`InvariantCheck.h`](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/tx/detail/InvariantCheck.h)
+    - [`InvariantCheck.cpp`](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/tx/detail/InvariantCheck.cpp)
+    - [`XRPAmount.h`](https://github.com/XRPLF/rippled/blob/master/include/xrpl/protocol/XRPAmount.h)
 
 
-- **Other:**
-    - [Authorized Trust Lines](../tokens/fungible-tokens/authorized-trust-lines.md)
-    - [Calculating Balance Changes for a Transaction](https://xrpl.org/blog/2015/calculating-balance-changes-for-a-transaction.html#calculating-balance-changes-for-a-transaction)
-
 {% raw-partial file="/docs/_snippets/common-links.md" /%}

docs/concepts/networks-and-servers/peer-protocol.md

@@ -1,11 +1,9 @@
 ---
-html: peer-protocol.html
-parent: networks-and-servers.html
 seo:
     description: The peer protocol specifies the language rippled servers speak to each other.
 labels:
-  - Core Server
-  - Blockchain
+    - Core Server
+    - Blockchain
 ---
 # Peer Protocol
 
@@ -18,11 +16,11 @@ The peer protocol is the main mode of communication between servers in the XRP L
 - Requesting ledger data from historical ledgers, or providing that data.
 - Proposing a set of transactions for consensus, or sharing the calculated outcome of applying a consensus transaction set.
 
-To set up a peer-to-peer connection, one server connects to another using HTTPS and requests an [HTTP upgrade](https://tools.ietf.org/html/rfc7230#section-6.7) to switch to the `XRPL/2.0` protocol (formerly `RTXP/1.2`). (For more information, see the [Overlay Network](https://github.com/XRPLF/rippled/blob/96bbabbd2ece106779bb544aa0e4ce174e99fdf6/src/ripple/overlay/README.md#handshake) article in the [`rippled` repository](https://github.com/ripple/rippled).)
+To set up a peer-to-peer connection, one server connects to another using HTTPS and requests an [HTTP upgrade](https://tools.ietf.org/html/rfc7230#section-6.7) to switch to the `XRPL/2.0` protocol (formerly `RTXP/1.2`). For more information, see the source code's [Overlay Network](https://github.com/XRPLF/rippled/blob/master/src/xrpld/overlay/README.md#handshake) article.
 
 ## Peer Discovery
 
-The XRP Ledger uses a "gossip" protocol to help find servers find others to connect to in the XRP Ledger network. Whenever a server starts up, it reconnects to any other peers it previously connected to. As a fallback, it uses the [hardcoded public hubs](https://github.com/XRPLF/rippled/blob/fa57859477441b60914e6239382c6fba286a0c26/src/ripple/overlay/impl/OverlayImpl.cpp#L518-L525). After a server successfully connects to a peer, it asks that peer for the contact information (generally, IP address and port) of other XRP Ledger servers that may also be seeking peers. The server can then connect to those servers, and ask them for the contact information of yet more XRP Ledger servers to peer with. Through this process, the server makes enough peer connections that it can remain reliably connected to the rest of the network even if it loses a connection to any single peer.
+The XRP Ledger uses a "gossip" protocol to help find servers find others to connect to in the XRP Ledger network. Whenever a server starts up, it reconnects to any other peers it previously connected to. As a fallback, it uses the [hardcoded public hubs](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/overlay/detail/OverlayImpl.cpp#L495-L508). After a server successfully connects to a peer, it asks that peer for the contact information (generally, IP address and port) of other XRP Ledger servers that may also be seeking peers. The server can then connect to those servers, and ask them for the contact information of yet more XRP Ledger servers to peer with. Through this process, the server makes enough peer connections that it can remain reliably connected to the rest of the network even if it loses a connection to any single peer.
 
 Typically, a server needs to connect to a public hub only once, for a short amount of time, to find other peers. After doing so, the server may or may not remain connected to the hub, depending on how stable its network connection is, how busy the hub is, and how many other high-quality peers the server finds. The server saves the addresses of these other peers so it can try reconnecting directly to those peers later, after a network outage or a restart.
 

docs/concepts/tokens/decentralized-exchange/automated-market-makers.md

@@ -31,16 +31,10 @@ LP tokens enable liquidity providers to:
 An AMM holds two different assets: at most one of these can be XRP, and one or both of them can be [tokens](../index.md). 
 For any given pair of assets, there can be up to one AMM in the ledger. Anyone can create the AMM for an asset pair if it doesn't exist, or deposit to an AMM if it already exists.
 
-When you want to trade in the decentralized exchange, your [Offers](offers.md) and [Cross-Currency Payments](../../payment-types/cross-currency-payments.md) can automatically use AMMs to complete the trade. A single transaction might execute by matching Offers, AMMs, or a mix of both, depending on what's cheaper.
+When you want to trade in the decentralized exchange, your [offers](offers.md) and [cross-currency payments](../../payment-types/cross-currency-payments.md) can automatically use AMMs to complete the trade. A single transaction might execute by matching offers, AMMs, or a mix of both, depending on what's cheaper. You can [read a transaction's metadata](../../transactions/finality-of-results/look-up-transaction-results.md) to see what liquidity it consumed.
 
 ![1 Transaction using offers, AMMs, or both.](/docs/img/cpt-amm-or-offer.png)
 
-{% admonition type="info" name="Note" %}
-
-You can determine if a `Payment` or `OfferCreate` transaction interacted with an AMM by checking for a [`RippleState`](../../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md) ledger entry in the transaction metadata. A `Flags` value of `16777216` indicates AMM liquidity was consumed.
-
-{% /admonition %}
-
 An AMM sets its exchange rate based on the balance of assets in the pool. When you trade against an AMM, the exchange rate adjusts based on how much your trade shifts the balance of assets the AMM holds. As its supply of one asset goes down, the price of that asset goes up; as its supply of an asset goes up, the price of that asset goes down.
 
 ![As supply increases, prices drop, and vice-versa.](/docs/img/cpt-amm-balance.png)

docs/concepts/tokens/decentralized-exchange/offers.md

@@ -85,7 +85,7 @@ Trust line limits protect you from receiving more of a token as payment than you
 
 Existing Offers are grouped by exchange rate, which is measured as the ratio between `TakerGets` and `TakerPays`. Offers with a higher exchange rate are taken preferentially. (That is, the person accepting the offer receives as much as possible for the amount of currency they pay out.) Offers with the same exchange rate are taken on the basis of which offer was placed first.
 
-When Offers execute in the same ledger block, the order in which they execute is determined by the [canonical order](https://github.com/XRPLF/rippled/blob/release/src/ripple/app/misc/CanonicalTXSet.cpp "Source code: Transaction ordering") in which the transactions were [applied to the ledger](https://github.com/XRPLF/rippled/blob/5425a90f160711e46b2c1f1c93d68e5941e4bfb6/src/ripple/app/consensus/LedgerConsensus.cpp#L1435-L1538 "Source code: Applying transactions"). This behavior is designed to be deterministic, efficient, and hard to game.
+When Offers execute in the same ledger block, the order in which they execute is determined by the [canonical order](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/misc/CanonicalTXSet.cpp "Source code: Transaction ordering") in which transactions were applied to the ledger. Transactions that fail initially can be pushed back and retried at the end of the ledger. This behavior is designed to be deterministic, efficient, and hard to game.
 
 
 ## Offer Expiration

docs/concepts/tokens/fungible-tokens/multi-purpose-tokens.md

@@ -45,6 +45,94 @@ Every MPT issuance has a set of key properties defined in the ledger as an [MPTo
 
 After the MPT is issued, the on-chain data cannot be changed. However, the proposed [XLS-94: Dynamic MPT standard](https://github.com/XRPLF/XRPL-Standards/tree/master/XLS-0094-dynamic-MPT) {% not-enabled /%} would allow fields to be marked as mutable during creation, so that those fields can be changed later.
 
+#### Metadata Schema
+
+To fit within the 1024-byte limit, MPT metadata must use compressed JSON keys. The following table describes these keys and their corresponding fields:
+
+| Field Name      | Key  | Type             | Required? | Description |
+|:--------------- |:---- |:---------------- |---------- |-------------|
+| ticker          | `t`  | String           | Yes       | The ticker symbol used to represent the token. Must be uppercase letters (A-Z) and digits (0-9) only. A maximum of 6 characters is recommended. |
+| name            | `n`  | String           | Yes       | The display name of the token. Any UTF-8 string is permitted.  |
+| desc            | `d`  | String           | No        | A short description of the token. Any UTF-8 string is permitted. |
+| icon            | `i`  | String           | Yes       | The URI to the token icon. Can be `hostname/path` (HTTPS is assumed), or full URI for other protocols. |
+| asset_class     | `ac` | String           | Yes️       | Categorizes tokens by their primary purpose and backing. See [Asset Class](#asset-class) for more details. |
+| asset_subclass  | `as` | String           | No        | An optional subcategory that is only required if the `asset_class` is `rwa`. See [Asset Subclass](#asset-subclass) for more details. |
+| issuer_name     | `in` | String           | Yes       | Name of the entity issuing the token. Any UTF-8 string is permitted. |
+| uris            | `us` | Array            | No        | The list of related URIs such as website, documentation, and social media. See [URIs](#uris) for more details.|
+| additional_info | `ai` | Object or String | No        | Freeform field for key token details like interest rate, maturity date, term, or other relevant info. Any valid JSON object or UTF-8 string is permitted. |
+
+##### Asset Class
+
+The `asset_class` field categorizes tokens by their primary purpose and backing. These categories help applications understand the nature of the token and its intended use case.
+
+| Category | Definition |
+|----------|------------|
+| `rwa` | Tokens representing real-world assets (RWAs), which derive value from legally enforceable claims on physical or off-chain financial assets. |
+| `memes` | Community-driven tokens without intrinsic backing or utility claims, primarily driven by internet culture or speculation. |
+| `wrapped` | Tokens representing assets from other blockchains, typically backed 1:1 by bridges or custodians. |
+| `gaming` | Tokens used in games or virtual worlds, often representing in-game currency, assets, or rewards. |
+| `defi` | Tokens native to or used within DeFi protocols, including governance tokens, DEX tokens, and lending assets. |
+| `other` | Tokens that do not clearly fit into the defined categories. This may include experimental, test, or tokens with unique use cases not covered elsewhere. |
+
+##### Asset Subclass
+
+When `asset_class` is set to `rwa`, an `asset_subclass` can be specified to provide more granular categorization. This describes what type of real-world asset backs the token and what legal or regulatory framework might apply.
+
+| Subclass | Definition |
+|----------|------------|
+| `stablecoin` | Tokens pegged to a stable value, typically fiat currencies like USD, which are backed by reserves like cash, treasuries, or crypto collateral. |
+| `commodity` | Tokens that represent physical commodities like gold, silver, or oil, often redeemable or legally linked to off-chain reserves. |
+| `real_estate` | Tokens representing ownership or claims on real estate, including fractionalized property shares or REIT-like instruments. |
+| `private_credit` | Tokens representing debt obligations from private entities, such as loans, invoices, or receivables. |
+| `equity` | Tokens representing ownership shares in companies, similar to traditional stock or equity instruments. |
+| `treasury` | Tokens backed by government debt instruments, such as U.S. Treasury bills or bonds. |
+| `other` | Tokens that do not fit into the predefined categories, including experimental, hybrid, or emerging real-world asset types. |
+
+##### URIs
+
+The `us` array contains a list of URI objects, each with a URI link, category, and human-readable title.
+
+| Field Name | Key | Type   | Required?  | Description |
+|:---------- |:--- |:------ |:--------- |:-------------|
+| uri        | `u` | String | Yes️       |`hostname/path` or full URI link to the related resource. |
+| category   | `c` | String | Yes       | The category of the link provided. Allowed values are: `website`, `social`, `docs`, `other`. |
+| title      | `t` | String | Yes       | Human-readable label for the link. |
+
+#### Example JSON Metadata
+
+The following example shows metadata for a treasury-backed token.
+
+```json
+{
+  "t": "TBILL",
+  "n": "T-Bill Yield Token",
+  "d": "A yield-bearing stablecoin backed by short-term U.S. Treasuries and money market instruments.",
+  "i": "example.org/tbill-icon.png",
+  "ac": "rwa",
+  "as": "treasury",
+  "in": "Example Yield Co.",
+  "us": [
+    {
+      "u": "exampleyield.co/tbill",
+      "c": "website",
+      "t": "Product Page"
+    },
+    {
+      "u": "exampleyield.co/docs",
+      "c": "docs",
+      "t": "Yield Token Docs"
+    }
+  ],
+  "ai": {
+    "interest_rate": "5.00%",
+    "interest_type": "variable",
+    "yield_source": "U.S. Treasury Bills",
+    "maturity_date": "2045-06-30",
+    "cusip": "912796RX0"
+  }
+}
+```
+
 ### Transferability Controls
 
 MPTs can be configured with different levels of transferability controls by adjusting the following flags:

docs/concepts/transactions/finality-of-results/look-up-transaction-results.md

@@ -227,15 +227,15 @@ If the payment contains a `CreatedNode` with `"LedgerEntryType": "AccountRoot"`,
 
 #### Token Payments
 
-Payments involving tokens are a bit more complicated.
+Payments involving [trust line tokens](../../tokens/fungible-tokens/trust-line-tokens.md) are a bit more complicated.
 
-All changes in token balances are reflected in [RippleState objects](../../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md), which represent [trust lines](../../tokens/fungible-tokens/index.md). An increase to one party's balance on a trust line is considered to decrease the counterparty's balance by equal amount; in the metadata, this is only recorded as a single change to the shared `Balance` for the RippleState object. Whether this change is recorded as an "increase" or "decrease" depends on which account has the numerically higher address.
+All changes to trust line token balances are reflected in [RippleState entries](../../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md), which represent [trust lines](../../tokens/fungible-tokens/index.md). An increase to one party's balance on a trust line is considered to decrease the counterparty's balance by equal amount; transaction metadata records only a single net change to the shared `Balance` of a `RippleState` entry. Whether this change is recorded as an "increase" or "decrease" depends on which account has the numerically higher address.
 
-A single payment may go across a long [path](../../tokens/fungible-tokens/paths.md) consisting of several trust lines and order books. The process of changing the balances on several trust lines to connect parties indirectly is called [rippling](../../tokens/fungible-tokens/rippling.md). Depending on the `issuer` specified in the transaction's `Amount` field, it is also possible that the amount delivered may be split between several trust lines (`RippleState` accounts) connected to the destination account.
+A single payment may go across a long [path](../../tokens/fungible-tokens/paths.md) consisting of several trust lines and order books. The process of changing the balances on several trust lines to connect parties indirectly is called [rippling](../../tokens/fungible-tokens/rippling.md). Depending on the `issuer` specified in the transaction's `Amount` field, it is also possible that the amount delivered may be split between several trust lines (separate RippleState entries) connected to the destination account.
 
 {% admonition type="success" name="Tip" %}The order that modified objects are presented in the metadata does not necessarily match the order those objects were visited while processing a payment. To better understand payment execution, it may help to reorder `AffectedNodes` members to reconstruct the paths the funds took through the ledger.{% /admonition %}
 
-Cross-currency payments consume [Offers](../../../references/protocol/ledger-data/ledger-entry-types/offer.md) in part or entirely to change between different currency codes and issuers. If a transaction shows `DeletedNode` objects for `Offer` types, that can indicate an Offer that was fully consumed, or an Offer that was found to be [expired or unfunded](../../tokens/decentralized-exchange/offers.md#lifecycle-of-an-offer) at the time of processing. If a transaction shows a `ModifiedNode` of type `Offer`, that indicates an Offer that was partially consumed.
+Cross-currency payments use [offers](../../tokens/decentralized-exchange/offers.md) and [AMMs](../../tokens/decentralized-exchange/automated-market-makers.md) to convert between different currency codes and issuers. Offers can be partially or fully consumed. If a transaction shows `DeletedNode` objects for `Offer` types, that can indicate an offer that was fully consumed, or an offer that was found to be [expired or unfunded](../../tokens/decentralized-exchange/offers.md#lifecycle-of-an-offer) at the time of processing. If a transaction shows a `ModifiedNode` of type `Offer`, that indicates an offer that was partially consumed.
 
 The [`QualityIn` and `QualityOut` settings of trust lines](../../../references/protocol/transactions/types/trustset.md) can affect how one side of a trust line values the token, so that the numeric change in balances is different from how the sender values that token. The `delivered_amount` shows how much was delivered as valued by the recipient.
 
@@ -243,9 +243,17 @@ If the amount to be sent or received is outside of the [token precision](../../.
 
 Depending on the length of the [paths](../../tokens/fungible-tokens/paths.md), the metadata for cross-currency payments can be _long_. For example, [transaction 8C55AFC2A2AA42B5CE624AEECDB3ACFDD1E5379D4E5BF74A8460C5E97EF8706B](https://xrpcharts.ripple.com/#/transactions/8C55AFC2A2AA42B5CE624AEECDB3ACFDD1E5379D4E5BF74A8460C5E97EF8706B) delivered 2.788 GCB issued by `rHaaans...`, spending XRP but passing through USD from 2 issuers, paying XRP to 2 accounts, removing an unfunded offer from `r9ZoLsJ...` to trade EUR for ETH, plus bookkeeping for a total of 17 different ledger objects modified. <!-- SPELLING_IGNORE: gcb -->
 
+#### Using AMM Liquidity
+
+You can tell if an AMM was involved in a transaction by looking for [RippleState entries](../../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md) that belong to an AMM. Check the `Flags` value of each `RippleState` entry in the `AffectedNodes` array; if the [`lsfAMMNode` flag](../../../references/protocol/ledger-data/ledger-entry-types/ripplestate.md#ripplestate-flags) is enabled, then that trust line is connected to an AMM. Flags are combined using bitwise operations. To check if `lsfAMMNode` is enabled, use a bitwise-AND operator, like the following pseudo-code:
+
+```
+isEnabled = RippleState.Flags & lsfAMMNode
+```
+
 ### Offers
 
-An [OfferCreate transaction][] may or may not create an object in the ledger, depending on how much was matched and whether the transaction used flags such as `tfImmediateOrCancel`. Look for a `CreatedNode` entry with `"LedgerEntryType": "Offer"` to see if the transaction added a new Offer to the ledger's order books. For example:
+An [OfferCreate transaction][] may or may not create an object in the ledger, depending on how much was matched and whether the transaction used flags such as `tfImmediateOrCancel`. Look for a `CreatedNode` entry with `"LedgerEntryType": "Offer"` to see if the transaction added a new Offer entry to the ledger's order books. For example:
 
 ```json
 {
@@ -268,11 +276,11 @@ An [OfferCreate transaction][] may or may not create an object in the ledger, de
 }
 ```
 
-A `ModifiedNode` of type `Offer` indicates an Offer that was matched and partially consumed. A single transaction can consume a large number of Offers. An Offer to trade two tokens might also consume Offers to trade XRP because of [auto-bridging](../../tokens/decentralized-exchange/autobridging.md). All or part of an exchange can be auto-bridged.
+A `ModifiedNode` of type `Offer` indicates an offer that was matched and partially consumed. A single transaction can consume a large number of offers. An offer to trade two tokens might also consume offers to trade XRP because of [auto-bridging](../../tokens/decentralized-exchange/autobridging.md). All or part of an exchange can be auto-bridged. Offers can also use AMMs to convert currency; you can recognize when this happens by [checking for a `RippleState` entry with the `lsfAMMNode` flag](#using-amm-liquidity) in the `AffectedNodes` array.
 
-A `DeletedNode` of type `Offer` can indicate a matching Offer that was fully consumed, an Offer that was found to be [expired or unfunded](../../tokens/decentralized-exchange/offers.md#lifecycle-of-an-offer) at the time of processing, or an Offer that was canceled as part of placing a new Offer. You can recognize a canceled Offer because the `Account` that placed it is the sender of the transaction that deleted it.
+A `DeletedNode` of type `Offer` can indicate a matching offer that was fully consumed, an offer that was found to be [expired or unfunded](../../tokens/decentralized-exchange/offers.md#lifecycle-of-an-offer) at the time of processing, or an offer that was canceled as part of placing a new offer. You can recognize a canceled offer because the `Account` that placed it is the sender of the transaction that deleted it.
 
-Example of a deleted Offer:
+Example of a deleted offer:
 
 ```json
 {
@@ -300,11 +308,11 @@ Example of a deleted Offer:
 }
 ```
 
-Offers can create, delete, and modify both types of [DirectoryNode objects](../../../references/protocol/ledger-data/ledger-entry-types/directorynode.md), to keep track of who placed which Offers and which Offers are available at which exchange rates. Generally, users don't need to pay close attention to this bookkeeping.
+Offers can create, delete, and modify [DirectoryNode entries](../../../references/protocol/ledger-data/ledger-entry-types/directorynode.md), both to keep track of who placed which offers and which offers are available at which exchange rates. Generally, users don't need to pay close attention to this bookkeeping.
 
-An [OfferCancel transaction][] may have the code `tesSUCCESS` even if there was no Offer to delete. Look for a `DeletedNode` of type `Offer` to confirm that the transaction actually deleted an Offer. If not, the Offer may already have been removed by a previous transaction, or the OfferCancel transaction may have used the wrong sequence number in the `OfferSequence` field.
+An [OfferCancel transaction][] may have the code `tesSUCCESS` even if there was no offer to delete. Look for a `DeletedNode` of type `Offer` to confirm that the transaction actually deleted an offer. If not, the offer may already have been removed by a previous transaction, or the OfferCancel transaction may have used the wrong sequence number in the `OfferSequence` field.
 
-If an OfferCreate transaction shows a `CreatedNode` of type `RippleState`, that indicates that [the Offer created a trust line](../../tokens/decentralized-exchange/offers.md#offers-and-trust) to hold a token received in the trade.
+If an OfferCreate transaction shows a `CreatedNode` of type `RippleState`, that indicates that [the offer created a trust line](../../tokens/decentralized-exchange/offers.md#offers-and-trust) to hold a token received in the trade.
 
 ### Escrows
 

docs/concepts/transactions/transaction-cost.md

@@ -64,7 +64,7 @@ For each new ledger version, the server picks a soft limit on the number of tran
 
 The open ledger cost requirement is [proportional to the normal cost of the transaction](#fee-levels), not the absolute transaction cost. Transaction types that have a higher-than-normal requirement, such as [multi-signed transactions](../accounts/multi-signing.md) must pay more to meet the open ledger cost than transactions which have minimum transaction cost requirements.
 
-See also: [Fee Escalation explanation in `rippled` repository](https://github.com/XRPLF/rippled/blob/release/src/ripple/app/misc/FeeEscalation.md).
+See also: [Fee Escalation explanation in `rippled` repository](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/misc/FeeEscalation.md).
 
 ### Queued Transactions
 

docs/index.page.tsx

@@ -396,6 +396,8 @@ export default function Docs() {
             </div>
             <div className="col">
               <div className="card cta-card p-8-sm p-10-until-sm br-8">
+                <img src={require('../static/img/backgrounds/cta-home-purple.svg')} className="d-none-sm cta cta-top-left" />
+                <img src={require('../static/img/backgrounds/cta-home-green.svg')} className="cta cta-bottom-right" />
                 <div className="z-index-1 position-relative">
                   <h2 className="h4 mb-8-sm mb-10-until-sm">{translate('Get Free Test XRP')}</h2>
                   <p className="mb-10">

docs/infrastructure/configuration/connect-your-rippled-to-the-xrp-test-net.md

@@ -43,11 +43,6 @@ Edit your `rippled.cfg` file.
     # No [ips] stanza. Use the default hubs to connect to Mainnet.
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [ips]
-    sidechain-net2.devnet.rippletest.net 51235
-    ```
-
     {% /tabs %}
 
 2. Comment out the previous `[ips]` stanza, if there is one:
@@ -77,11 +72,6 @@ Edit your `rippled.cfg` file.
     main
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [network_id]
-    262
-    ```
-
     {% /tabs %}
 
     For custom networks, everyone who connects to the network should use a value unique to that network. When creating a new network, choose a network ID at random from the integers 11 to 4,294,967,295.
@@ -120,14 +110,6 @@ Edit your `validators.txt` file. This file is located in the same folder as your
     ED2677ABFFD1B33AC6FBC3062B71F1E8397C1505E1C42C64D11AD1B28FF73F4734
     ```
 
-    ```{% label="Sidechain-Devnet" %}
-    [validator_list_sites]
-    https://vlsidechain-net2.devnet.rippletest.net
-
-    [validator_list_keys]
-    EDA5504C7133743FADA46342229B4E9CBBE1CF9BCA19D16633574F7CBB72F79569
-    ```
-
     {% /tabs %}
 
     {% admonition type="success" name="Tip" %}Preview packages might come with the necessary stanzas pre-configured, but check them just in case.{% /admonition %}
@@ -181,13 +163,6 @@ For some test networks using experimental features, you must also forcefully ena
 ```
 {% /tab %}
 
-{% tab label="Sidechain-Devnet" %}
-```
-[features]
-XChainBridge
-```
-{% /tab %}
-
 {% /tabs %}
 
 {% admonition type="danger" name="Warning" %}Do not use the `[features]` stanza when connecting to Mainnet or Testnet. Forcefully enabling different features than the rest of the network could cause your server to diverge from the network.{% /admonition %}

docs/infrastructure/configuration/data-retention/online-deletion.md

@@ -8,7 +8,7 @@ labels:
   - Core Server
 ---
 # Online Deletion
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/app/misc/SHAMapStoreImp.cpp "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/misc/SHAMapStoreImp.cpp "Source")
 
 The online deletion feature lets the `rippled` server delete the server's local copy of old ledger versions to keep disk usage from rapidly growing over time. The default config file sets online deletion to run automatically, but online deletion can also be configured to run only when prompted.
 

docs/infrastructure/testing-and-auditing/start-a-new-genesis-ledger-in-stand-alone-mode.md

@@ -18,7 +18,7 @@ rippled -a --start --conf=/path/to/rippled.cfg
 
 For more information on the options you can use when starting `rippled` in stand-alone mode, see [Commandline Usage: Stand-Alone Mode Options](../commandline-usage.md#stand-alone-mode-options).
 
-In a genesis ledger, the [genesis address](../../concepts/accounts/addresses.md#special-addresses) holds all 100 billion XRP. The keys of the genesis address are [hardcoded](https://github.com/XRPLF/rippled/blob/94ed5b3a53077d815ad0dd65d490c8d37a147361/src/ripple/app/ledger/Ledger.cpp#L184) as follows:
+In a genesis ledger, the [genesis address](../../concepts/accounts/addresses.md#special-addresses) holds all 100 billion XRP. The keys of the genesis address are [hardcoded](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/app/ledger/Ledger.cpp#L184) as follows:
 
 **Address:** `rHb9CJAWyB4rj91VRWn96DkukG4bwdtyTh`
 

docs/infrastructure/troubleshooting/understanding-log-messages.md

@@ -1,10 +1,8 @@
 ---
-html: understanding-log-messages.html
-parent: troubleshoot-the-rippled-server.html
 seo:
     description: Interpret and respond to warning and error messages in the debug log.
 labels:
-  - Core Server
+    - Core Server
 ---
 # Understanding Log Messages
 
@@ -122,10 +120,10 @@ A large number of these messages around the same time may indicate a problem, su
 The following log message indicates that a client to the server's public API has been dropped as a result of [rate limiting](../../references/http-websocket-apis/api-conventions/rate-limiting.md):
 
 ```text
-Resource:WRN Consumer entry 169.55.164.21 dropped with balance 15970 at or above drop threshold 15000
+Resource:WRN Consumer entry 169.55.164.21 dropped with balance 25970 at or above drop threshold 25000
 ```
 
-The entry contains the IP address of the client that exceeded its rate limit, and the client's "balance", which is a score estimating the rate at which the client has been using the API. The threshold for dropping a client is [hardcoded to a score of 15000](https://github.com/XRPLF/rippled/blob/06c371544acc3b488b9d9c057cee4e51f6bef7a2/src/ripple/resource/impl/Tuning.h#L34-L35).
+The entry contains the IP address of the client that exceeded its rate limit, and the client's "balance", which is a score estimating the rate at which the client has been using the API. The threshold for dropping a client is [hardcoded to a score of 25000](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/include/xrpl/resource/detail/Tuning.h#L35). {% badge href="https://xrpl.org/blog/2025/rippled-2.3.1" %}Updated in: rippled 2.3.1{% /badge %}
 
 If you see frequent messages from the same IP address, you may want to block those IP addresses from your network to reduce the load on your server's public API. (For example, you may be able to configure your firewall to block those IP addresses.)
 

docs/references/protocol/binary-format.md

@@ -1,21 +1,12 @@
 ---
-html: serialization.html
-parent: protocol-reference.html
 seo:
     description: Conversion between JSON and canonical binary format for XRP Ledger transactions and other objects.
 labels:
-  - Blockchain
-  - Transaction Sending
-curated_anchors:
-  - name: Sample Code
-    anchor: "#sample-code"
-  - name: Canonical Field Order
-    anchor: "#canonical-field-order"
-  - name: Type List
-    anchor: "#type-list"
+    - Blockchain
+    - Transaction Sending
 ---
 # Binary Format
-[[Source]](https://github.com/XRPLF/rippled/blob/develop/include/xrpl/protocol/SField.h "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/include/xrpl/protocol/SField.h "Source")
 
 This page describes the XRP Ledger's canonical binary format for transactions and other data. This binary format is necessary to create and verify digital signatures of those transactions' contents, and is also used in other places including in the [peer-to-peer communications between servers](../../concepts/networks-and-servers/peer-protocol.md). The [`rippled` APIs](../http-websocket-apis/index.md) typically use JSON to communicate with client applications. However, JSON is unsuitable as a format for serializing transactions for being digitally signed, because JSON can represent the same data in many different but equivalent ways.
 
@@ -55,7 +46,7 @@ Both signed and unsigned transactions can be represented in both JSON and binary
 
 The serialization processes described here are implemented in multiple places and programming languages:
 
-- In C++ [in the `rippled` code base](https://github.com/XRPLF/rippled/blob/develop/src/ripple/protocol/impl/STObject.cpp).
+- In C++ [in the `rippled` code base](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/STObject.cpp).
 - In JavaScript in {% repo-link path="_code-samples/tx-serialization/" %}this repository's code samples section{% /repo-link %}.
 - In Python 3 in {% repo-link path="_code-samples/tx-serialization/" %}this repository's code samples section{% /repo-link %}.
 
@@ -65,7 +56,7 @@ Additionally, many [client libraries](../client-libraries.md) provide serializat
 
 ## Internal Format
 
-Each field has an canonical binary format, or _internal format_ used in the XRP Ledger protocol to represent that field in transactions and ledger data. The binary format is needed for signing, but it is also used in peer-to-peer communications, in ledger storage, and in other places. The binary formats for all fields are defined in the source code of [`SField.h`](https://github.com/XRPLF/rippled/blob/develop/include/xrpl/protocol/SField.h). The JSON format for transactions and ledger data is standardized for convenience, but JSON is only used in APIs and client libraries: strictly speaking, only the binary format exists at the level of the XRP Ledger protocol.
+Each field has an canonical binary format, or _internal format_ used in the XRP Ledger protocol to represent that field in transactions and ledger data. The binary format is needed for signing, but it is also used in peer-to-peer communications, in ledger storage, and in other places. The binary formats for all fields are defined in the source code of [`SField.h`](https://github.com/XRPLF/rippled/blob/master/include/xrpl/protocol/SField.h). The JSON format for transactions and ledger data is standardized for convenience, but JSON is only used in APIs and client libraries: strictly speaking, only the binary format exists at the level of the XRP Ledger protocol.
 
 The [Transaction Format Reference](transactions/index.md) and [Ledger Data Reference](ledger-data/index.md) list both the JSON and the internal (binary) formats for all fields. For example, the `Flags` [common transaction field](transactions/common-fields.md) is a Number in JSON and a UInt32 in binary. Even though the JSON representation uses a data type that can contain decimal places or very large values, the field is limited to values that can be represented as a 32-bit unsigned integer.
 
@@ -265,7 +256,7 @@ The following diagram shows the serialization formats for all three amount forma
 [{% inline-svg file="/docs/img/serialization-amount.svg" /%}](/docs/img/serialization-amount.svg 'The first bit is an amount type bit (0 = XRP or MPT, 1 = fungible token). XRP has a sign bit (always 1 for positive), an MPT indicator bit (0=XRP) and 61 bits of precision. MPTs have a sign bit (always 1 for positive), an MPT indicator bit (1=MPT), 5 reserved bits, 64 bit integer quantity, and a 192 bit MPT Issuance ID which consists of the 32-bit Sequence number followed by 160-bit issuer AccountID. Fungible Token amounts consist start with an amount type bit of 1, a sign bit which can be 1 or 0, an exponent (8 bits), significant digits (54 bits), currency code (160 bits), and issuer (160 bits).')
 
 #### Token Amount Format
-[[Source]](https://github.com/XRPLF/rippled/blob/35fa20a110e3d43ffc1e9e664fc9017b6f2747ae/src/ripple/protocol/impl/STAmount.cpp "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/STAmount.cpp "Source")
 
 [{% inline-svg file="/docs/img/currency-number-format.svg" /%}](/docs/img/currency-number-format.svg "Token Amount Format diagram")
 
@@ -354,12 +345,12 @@ The following example shows the serialization format for an object (a single `Me
 
 The `Paths` field of a cross-currency [Payment transaction][] is a "PathSet", represented in JSON as an array of arrays. For more information on what paths are used for, see [Paths](../../concepts/tokens/fungible-tokens/paths.md).
 
-A PathSet is serialized as **1 to 6** individual paths in sequence[[Source]](https://github.com/XRPLF/rippled/blob/4cff94f7a4a05302bdf1a248515379da99c5bcd4/src/ripple/app/tx/impl/Payment.h#L35-L36 "Source"). Each complete path is followed by a byte that indicates what comes next:
+A PathSet is serialized as **1 to 6** individual paths in sequence[[Source]](https://github.com/XRPLF/rippled/blob/5e33ca56fd51b02a5490e8e156e2de65937cf88e/src/xrpld/app/tx/detail/Payment.h#L30 "Source"). Each complete path is followed by a byte that indicates what comes next:
 
 - `0xff` indicates another path follows
 - `0x00` indicates the end of the PathSet
 
-Each path consists of **1 to 8** path steps in order[[Source]](https://github.com/XRPLF/rippled/blob/4cff94f7a4a05302bdf1a248515379da99c5bcd4/src/ripple/app/tx/impl/Payment.h#L38-L39 "Source"). Each step starts with a **type** byte, followed by one or more fields describing the path step. The type indicates which fields are present in that path step through bitwise flags. (For example, the value `0x30` indicates changing both currency and issuer.) If more than one field is present, the fields are always placed in a specific order.
+Each path consists of **1 to 8** path steps in order[[Source]](https://github.com/XRPLF/rippled/blob/5e33ca56fd51b02a5490e8e156e2de65937cf88e/src/xrpld/app/tx/detail/Payment.h#L33 "Source"). Each step starts with a **type** byte, followed by one or more fields describing the path step. The type indicates which fields are present in that path step through bitwise flags. (For example, the value `0x30` indicates changing both currency and issuer.) If more than one field is present, the fields are always placed in a specific order.
 
 The following table describes the possible fields and the bitwise flags to set in the type byte to indicate them:
 

docs/references/protocol/data-types/basic-data-types.md

@@ -28,7 +28,7 @@ Each closed [Ledger](../ledger-data/index.md) has a [Ledger Index][] and a [Hash
 
 
 ### Hash Prefixes
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/HashPrefix.h "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/include/xrpl/protocol/HashPrefix.h "Source")
 
 In many cases, the XRP Ledger prefixes an object's binary data with a 4-byte code before calculating its hash, so that objects of different types have different hashes even if their binary formats are the same. The existing 4-byte codes are structured as three alphabetic characters, encoded as ASCII, followed by a zero byte.
 

docs/references/protocol/ledger-data/common-fields.md

@@ -1,10 +1,9 @@
 ---
-html: ledger-entry-common-fields.html
 seo:
     description: These common fields are part of every ledger entry.
 ---
 # Ledger Entry Common Fields
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/LedgerFormats.cpp)
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/LedgerFormats.cpp)
 
 Every entry in a [ledger](../../../concepts/ledgers/index.md)'s state data has the same set of common fields, plus additional fields based on the [ledger entry type](ledger-entry-types/index.md). Field names are case-sensitive. The common fields for all ledger entries are:
 
@@ -19,9 +18,9 @@ Every entry in a [ledger](../../../concepts/ledgers/index.md)'s state data has t
 
 ## Ledger Entry ID
 
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/Indexes.cpp)
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/Indexes.cpp)
 
-Each ledger entry has a unique ID. The ID is derived by hashing important contents of the entry, along with a [namespace identifier](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/LedgerFormats.h). The [ledger entry type](ledger-entry-types/index.md) determines the namespace identifier to use and which contents to include in the hash. This ensures every ID is unique. The hash function is [SHA-512Half][].
+Each ledger entry has a unique ID. The ID is derived by hashing important contents of the entry, along with a _namespace identifier_ which is a 16 bit value. The [ledger entry type](ledger-entry-types/index.md) determines the namespace identifier to use and which contents to include in the hash. This ensures every ID is unique. The hash function is [SHA-512Half][].
 
 Generally, a ledger entry's ID is returned as the `index` field in JSON, at the same level as the object's contents. In [transaction metadata](../transactions/metadata.md), the ledger object's ID in JSON is `LedgerIndex`.
 

docs/references/protocol/ledger-data/ledger-entry-types/accountroot.md

@@ -42,7 +42,7 @@ In addition to the [common fields](../common-fields.md), {% code-page-name /%} e
 | `AMMID`                       | String    | UInt256           | No        | {% amendment-disclaimer name="AMM" /%} The ledger entry ID of the corresponding AMM ledger entry. Set during account creation; cannot be modified. If present, indicates that this is a special AMM AccountRoot; always omitted on non-AMM accounts. |
 | `Balance`                     | String    | Amount            | No        | The account's current [XRP balance in drops][XRP, in drops], represented as a string. |
 | `BurnedNFTokens`              | Number    | UInt32            | No        | How many total of this account's issued [non-fungible tokens](../../../../concepts/tokens/nfts/index.md) have been burned. This number is always equal or less than `MintedNFTokens`. |
-| `Domain`                      | String    | Blob              | No        | A domain associated with this account. In JSON, this is the hexadecimal for the ASCII representation of the domain. [Cannot be more than 256 bytes in length.](https://github.com/xrplf/rippled/blob/55dc7a252e08a0b02cd5aa39e9b4777af3eafe77/src/ripple/app/tx/impl/SetAccount.h#L34) |
+| `Domain`                      | String    | Blob              | No        | A domain associated with this account. In JSON, this is the hexadecimal for the ASCII representation of the domain. [Cannot be more than 256 bytes in length.](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/include/xrpl/protocol/Protocol.h#L98) |
 | `EmailHash`                   | String    | UInt128           | No        | The md5 hash of an email address. Clients can use this to look up an avatar through services such as [Gravatar](https://en.gravatar.com/). |
 | `FirstNFTokenSequence`        | Number    | UInt32            | No        | The account's [Sequence Number][] at the time it minted its first [non-fungible-token](../../../../concepts/tokens/nfts/index.md). {% amendment-disclaimer name="fixNFTokenRemint" /%} |
 | `LedgerEntryType`             | String    | UInt16            | Yes       | The value `0x0061`, mapped to the string `AccountRoot`, indicates that this is an AccountRoot object. |

docs/references/protocol/ledger-data/ledger-entry-types/check.md

@@ -64,7 +64,7 @@ There are no flags defined for {% code-page-name /%} entries.
 
 
 ## Check ID Format
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/Indexes.cpp#L193-L200 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/libxrpl/protocol/Indexes.cpp#L335-L339 "Source")
 
 The ID of a `Check` entry is the [SHA-512Half][] of the following values, concatenated in order:
 

docs/references/protocol/ledger-data/ledger-entry-types/ledgerhashes.md

@@ -72,7 +72,7 @@ There are no flags defined for {% code-page-name /%} entries.
 
 
 ## LedgerHashes ID Formats
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/Indexes.cpp#L26-L42)
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/libxrpl/protocol/Indexes.cpp#L195-L211)
 
 There are two formats for `LedgerHashes` ledger entry IDs, depending on whether the entry is a "recent history" sub-type or a "previous history" sub-type.
 

docs/references/protocol/ledger-data/ledger-entry-types/ripplestate.md

@@ -2,7 +2,7 @@
 seo:
     description: A trust line, which tracks the net balance of fungible tokens between two accounts.
 labels:
-  - Tokens
+    - Tokens
 ---
 # RippleState
 [[Source]](https://github.com/XRPLF/rippled/blob/f64cf9187affd69650907d0d92e097eb29693945/include/xrpl/protocol/detail/ledger_entries.macro#L277-L289 "Source")
@@ -69,19 +69,19 @@ In addition to the [common fields](../common-fields.md), {% code-page-name /%} e
 
 `RippleState` entries can have the following flags combined into the `Flags` field:
 
-| Flag Name         | Hex Value    | Decimal Value | Corresponding [TrustSet Flag](../../transactions/types/trustset.md#trustset-flags) | Description |
-|-------------------|--------------|---------------|-----------------|---------|
-| `lsfAMMNode`      | `0x01000000` | 16777216      | (None)          | This entry consumed AMM liquidity to complete a [`Payment`](../../transactions/types/payment.md) transaction. |
-| `lsfLowReserve`   | `0x00010000` | 65536         | (None)          | This entry [contributes to the low account's owner reserve](#ripplestate-reserve). |
-| `lsfHighReserve`  | `0x00020000` | 131072        | (None)          | This entry [contributes to the high account's owner reserve](#ripplestate-reserve). |
-| `lsfLowAuth`      | `0x00040000` | 262144        | `tfSetAuth`     | The low account has authorized the high account to hold tokens issued by the low account. |
-| `lsfHighAuth`     | `0x00080000` | 524288        | `tfSetAuth`     | The high account has authorized the low account to hold tokens issued by the high account. |
-| `lsfLowNoRipple`  | `0x00100000` | 1048576       | `tfSetNoRipple` | The low account [has disabled rippling](../../../../concepts/tokens/fungible-tokens/rippling.md) from this trust line. |
-| `lsfHighNoRipple` | `0x00200000` | 2097152       | `tfSetNoRipple` | The high account [has disabled rippling](../../../../concepts/tokens/fungible-tokens/rippling.md) from this trust line. |
-| `lsfLowFreeze`    | `0x00400000` | 4194304       | `tfSetFreeze`   | The low account has frozen the trust line, preventing the high account from transferring the asset. |
-| `lsfHighFreeze`   | `0x00800000` | 8388608       | `tfSetFreeze`   | The high account has frozen the trust line, preventing the low account from transferring the asset. |
-| `lsfLowDeepFreeze` | `0x02000000` | 33554432 |`tfSetLowDeepFreeze` | The low account has deep-frozen the trust line, preventing the high account from sending and receiving the asset. |
-| `lsfHighDeepFreeze` | `0x04000000` | 67108864 | `tfSetHighDeepFreeze` | The high account has deep-frozen the trust line, preventing the low account from sending and receiving the asset. |
+| Flag Name           | Hex Value    | Decimal Value | Corresponding [TrustSet Flag](../../transactions/types/trustset.md#trustset-flags) | Description |
+|---------------------|--------------|---------------|-----------------------|---------|
+| `lsfLowReserve`     | `0x00010000` | 65536         | (None)                | This entry [contributes to the low account's owner reserve](#ripplestate-reserve). |
+| `lsfHighReserve`    | `0x00020000` | 131072        | (None)                | This entry [contributes to the high account's owner reserve](#ripplestate-reserve). |
+| `lsfLowAuth`        | `0x00040000` | 262144        | `tfSetAuth`           | The low account has authorized the high account to hold tokens issued by the low account. |
+| `lsfHighAuth`       | `0x00080000` | 524288        | `tfSetAuth`           | The high account has authorized the low account to hold tokens issued by the high account. |
+| `lsfLowNoRipple`    | `0x00100000` | 1048576       | `tfSetNoRipple`       | The low account [has disabled rippling](../../../../concepts/tokens/fungible-tokens/rippling.md) from this trust line. |
+| `lsfHighNoRipple`   | `0x00200000` | 2097152       | `tfSetNoRipple`       | The high account [has disabled rippling](../../../../concepts/tokens/fungible-tokens/rippling.md) from this trust line. |
+| `lsfLowFreeze`      | `0x00400000` | 4194304       | `tfSetFreeze`         | The low account has frozen the trust line, preventing the high account from transferring the asset. |
+| `lsfHighFreeze`     | `0x00800000` | 8388608       | `tfSetFreeze`         | The high account has frozen the trust line, preventing the low account from transferring the asset. |
+| `lsfAMMNode`        | `0x01000000` | 16777216      | (None)                | This trust line holds one of the assets in an [Automated Market Maker](../../../../concepts/tokens/decentralized-exchange/automated-market-makers.md)'s pool; one of this trust line's accounts is the AMM, and the other is the issuer of the token. {% amendment-disclaimer name="AMM" /%} |
+| `lsfLowDeepFreeze`  | `0x02000000` | 33554432      |`tfSetLowDeepFreeze`   | The low account has deep-frozen the trust line, preventing the high account from sending and receiving the asset. {% amendment-disclaimer name="DeepFreeze" /%} |
+| `lsfHighDeepFreeze` | `0x04000000` | 67108864      | `tfSetHighDeepFreeze` | The high account has deep-frozen the trust line, preventing the low account from sending and receiving the asset. {% amendment-disclaimer name="DeepFreeze" /%} |
 
 The two accounts connected by the trust line can each change their own settings with a [TrustSet transaction][].
 

docs/references/protocol/ledger-data/ledger-header.md

@@ -8,7 +8,7 @@ labels:
   - Blockchain
 ---
 # Ledger Header
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/ledger/ReadView.h#L71 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/consensus/RCLCxLedger.h "Source")
 
 Every [ledger version](../../../concepts/ledgers/index.md) has a unique header that describes the contents. You can look up a ledger's header information with the [ledger method][]. The contents of the ledger header are as follows:
 

docs/references/protocol/transactions/transaction-results/index.md

@@ -8,7 +8,7 @@ labels:
 ---
 # Transaction Results
 
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/TER.h "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/TER.cpp "Source")
 
 The `rippled` server summarizes transaction results with result codes, which appear in fields such as `engine_result` and `meta.TransactionResult`. These codes are grouped into several categories of with different prefixes:
 

docs/references/protocol/transactions/transaction-results/tec-codes.md

@@ -7,7 +7,7 @@ labels:
   - Transaction Sending
 ---
 # tec Codes
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/TER.cpp "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/libxrpl/protocol/TER.cpp "Source")
 
 These codes indicate that the transaction did not succeed, but it was applied to a ledger to apply the [transaction cost](../../../../concepts/transactions/transaction-cost.md) and may have had other side effects to the ledger. The `tec` codes have numerical values in the range 100 to 199. It is recommended to use the text code, not the numeric value.
 

docs/references/protocol/transactions/types/accountset.md

@@ -30,7 +30,7 @@ Modify the settings or properties of an [account in the XRP Ledger](../../../../
 | Field            | JSON Type        | [Internal Type][] | Description        |
 |:-----------------|:-----------------|:------------------|:-------------------|
 | [`ClearFlag`](#accountset-flags) | Number | UInt32      | Unique identifier of a flag to disable for this account. |
-| [`Domain`](#domain) | String        | Blob              | The domain that owns this account, as a string of hex representing the ASCII for the domain in lowercase. [Cannot be more than 256 bytes in length.](https://github.com/XRPLF/rippled/blob/55dc7a252e08a0b02cd5aa39e9b4777af3eafe77/src/ripple/app/tx/impl/SetAccount.h#L34) |
+| [`Domain`](#domain) | String        | Blob              | The domain that owns this account, as a string of hex representing the ASCII for the domain in lowercase. [Cannot be more than 256 bytes in length.](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/include/xrpl/protocol/Protocol.h#L98) |
 | `EmailHash`      | String           | UInt128           | An arbitrary 128-bit value. Conventionally, clients treat this as the md5 hash of an email address to use for displaying a [Gravatar](http://en.gravatar.com/site/implement/hash/) image. |
 | `MessageKey`     | String           | Blob              | Public key for sending encrypted messages to this account. To set the key, it must be exactly 33 bytes, with the first byte indicating the key type: `0x02` or `0x03` for secp256k1 keys, `0xED` for Ed25519 keys. To remove the key, use an empty value. |
 | `NFTokenMinter`  | String - [Address][] | AccountID     | Another account that can [mint NFTokens for you](../../../../tutorials/javascript/nfts/assign-an-authorized-minter.md). {% amendment-disclaimer name="NonFungibleTokensV1_1" /%} |

docs/references/protocol/transactions/types/ammcreate.md

@@ -19,21 +19,32 @@ Creates both an [AMM entry][] and a [special AccountRoot entry](../../ledger-dat
 
 ```json
 {
-    "Account" : "rJVUeRqDFNs2xqA7ncVE6ZoAhPUoaJJSQm",
-    "Amount" : {
-        "currency" : "TST",
-        "issuer" : "rP9jPyP5kyvFRb6ZiRghAGw5u8SGAmU4bd",
-        "value" : "25"
-    },
-    "Amount2" : "250000000",
-    "Fee" : "2000000",
-    "Flags" : 2147483648,
-    "Sequence" : 6,
-    "TradingFee" : 500,
-    "TransactionType" : "AMMCreate"
+  "Account": "r3qNwezAqKp2FRFteiFjhC4V1at4KePFx7",
+  "Amount": {
+    "currency": "SKY",
+    "issuer": "rSKYachd4cqUgztsTr83mEKTAcNZG4Ez2",
+    "value": "80"
+  },
+  "Amount2": "20000000",
+  "Fee": "200000",
+  "Flags": 2147483648,
+  "LastLedgerSequence": 99502897,
+  "Memos": [
+    {
+      "Memo": {
+        "MemoData": "414D4D2063726561746520696E69746961746564207669612058506D61726B65742E636F6D"
+      }
+    }
+  ],
+  "Sequence": 94041760,
+  "SourceTag": 20221212,
+  "TradingFee": 1000,
+  "TransactionType": "AMMCreate",
 }
 ```
 
+{% tx-example txid="E4CC45E28421618FFEB1920B8FE152EAAB70489BD9AD52FEF24D58389C011C5E" /%}
+
 {% raw-partial file="/docs/_snippets/tx-fields-intro.md" /%}
 
 | Field        | JSON Type           | [Internal Type][] | Required? | Description |

docs/references/protocol/transactions/types/oracleset.md

@@ -16,27 +16,79 @@ Create or update a [price oracle](../../../../concepts/decentralized-storage/pri
 
 ```json
 {
-  "TransactionType": "OracleSet",
-  "Account": "rNZ9m6AP9K7z3EVg6GhPMx36V4QmZKeWds",
-  "OracleDocumentID": 34,
-  "Provider": "70726F7669646572",
-  "LastUpdateTime": 1724871860,
+  "Account": "roosteri9aGNFRXZrJNYQKVBfxHiE5abg",
   "AssetClass": "63757272656E6379",
+  "Fee": "12",
+  "LastUpdateTime": 1760397040,
+  "OracleDocumentID": 3,
   "PriceDataSeries": [
     {
       "PriceData": {
+        "AssetPrice": "267e",
         "BaseAsset": "XRP",
-        "QuoteAsset": "USD",
-        "AssetPrice": 740,
+        "QuoteAsset": "SAR",
         "Scale": 3
       }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "214a",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "THB",
+        "Scale": 2
+      }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "1abc8",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "TRY",
+        "Scale": 3
+      }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "13b19",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "TWD",
+        "Scale": 3
+      }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "686e090",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "UAH",
+        "Scale": 6
+      }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "a34",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "USD",
+        "Scale": 3
+      }
+    },
+    {
+      "PriceData": {
+        "AssetPrice": "11d9",
+        "BaseAsset": "XRP",
+        "QuoteAsset": "ZAR",
+        "Scale": 2
+      }
     }
-  ]
+  ],
+  "Provider": "7468726565787270",
+  "Sequence": 95076881,
+  "TransactionType": "OracleSet",
+  "URI": "68747470733A2F2F6174746573746174696F6E2E74687265657872702E6465762F63757272656E63793A39393530323934303A39353037363838313A33"
 }
 ```
 
+{% tx-example txid="11449FDBDF40345F08B2E1537EA9590369B5A662CDEB3DB71F9A2CC04E1012C1" /%}
 
-## OracleSet Fields
+{% raw-partial file="/docs/_snippets/tx-fields-intro.md" /%}
 
 | Field              | JSON Type | Internal Type | Required? | Description |
 |--------------------|-----------|---------------|-----------|-------------|

docs/references/protocol/transactions/types/setregularkey.md

@@ -6,7 +6,7 @@ labels:
 ---
 # SetRegularKey
 
-[[Source]](https://github.com/XRPLF/rippled/blob/4239880acb5e559446d2067f00dabb31cf102a23/src/ripple/app/transactors/SetRegularKey.cpp "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/master/src/xrpld/app/tx/detail/SetRegularKey.cpp "Source")
 
 Assign, change, or remove the [regular key pair](../../../../concepts/accounts/cryptographic-keys.md) associated with your account.
 

docs/references/protocol/transactions/types/xchainaccountcreatecommit.md

@@ -6,7 +6,7 @@ labels:
 status: not_enabled
 ---
 # XChainAccountCreateCommit
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/TxFormats.cpp#L466-L474 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/app/tx/detail/XChainBridge.h#L235 "Source")
 
 Create a new account for a [witness server](../../../../concepts/xrpl-sidechains/witness-servers.md) to submit transactions on an issuing chain. This transaction can only be used for XRP-XRP bridges.
 

docs/references/protocol/transactions/types/xchainaddaccountcreateattestation.md

@@ -6,7 +6,7 @@ labels:
 status: not_enabled
 ---
 # XChainAddAccountCreateAttestation
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/TxFormats.cpp#L447-L464 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/app/tx/detail/XChainBridge.h#L189 "Source")
 
 Provide an attestation from a [witness server](../../../../concepts/xrpl-sidechains/witness-servers.md) that an `XChainAccountCreateCommit` transaction occurred on the other chain.
 

docs/references/protocol/transactions/types/xchainaddclaimattestation.md

@@ -6,7 +6,7 @@ labels:
 status: not_enabled
 ---
 # XChainAddClaimAttestation
-[[Source]](https://github.com/XRPLF/rippled/blob/master/src/ripple/protocol/impl/TxFormats.cpp#L429-L445 "Source")
+[[Source]](https://github.com/XRPLF/rippled/blob/70d5c624e8cf732a362335642b2f5125ce4b43c1/src/xrpld/app/tx/detail/XChainBridge.h#L169 "Source")
 
 Provide proof from a [witness server](../../../../concepts/xrpl-sidechains/witness-servers.md) attesting to an `XChainCommit` transaction.
 

docs/tutorials/how-tos/use-xrpl-sidechains/set-up-iou-iou-bridge.md

@@ -26,7 +26,7 @@ Setting up an IOU-IOU bridge enables you to move tokens between chains.
 const xrpl = require('xrpl')
 
 const WS_URL_lockingchain = 'wss://s.devnet.rippletest.net:51233/' // Locking chain
-const WS_URL_issuingchain = 'wss://sidechain-net2.devnet.rippletest.net:51233/' // Issuing chain
+const WS_URL_issuingchain = 'wss://example-sidechain.net:12345/' // Issuing chain
 
 // Define the XChainBridge, using the "TST" token.
 const xchainbridge = {

docs/tutorials/how-tos/use-xrpl-sidechains/set-up-xrp-xrp-bridge.md

@@ -27,7 +27,7 @@ Setting up an XRP-XRP bridge enables you to move XRP between chains. The set up
 const xrpl = require('xrpl')
 
 const WS_URL_lockingchain = 'wss://s.devnet.rippletest.net:51233/' // Locking chain
-const WS_URL_issuingchain = 'wss://sidechain-net2.devnet.rippletest.net:51233/' // Issuing chain
+const WS_URL_issuingchain = 'wss://example-sidechain.net:12345/' // Issuing chain
 
 // Define the XChainBridge
 const xchainbridge = {

docs/tutorials/how-tos/use-xrpl-sidechains/submit-cross-chain-transaction.md

@@ -25,7 +25,7 @@ This tutorial explains how to create a test account on a locking chain (_Devent_
 const xrpl = require('xrpl')
 
 const WS_URL_lockingchain = 'wss://s.devnet.rippletest.net:51233/' // Locking chain
-const WS_URL_issuingchain = 'wss://sidechain-net2.devnet.rippletest.net:51233/' // Issuing chain
+const WS_URL_issuingchain = 'wss://example-sidechain.net:12345/' // Issuing chain
 
 // Define the XChainBridge
 const xchainbridge = {

docs/tutorials/javascript/build-apps/build-a-desktop-wallet-in-javascript.md

@@ -1106,7 +1106,7 @@ const { sendXrp } = require('./library/7_helpers')
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h1 class="modal-title subhead-sm-r" id="send-xrp-modal-label">Send XRP</h1>
+                    <h1 class="modal-title fs-5" id="send-xrp-modal-label">Send XRP</h1>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">

docs/tutorials/public-servers.md

@@ -32,7 +32,6 @@ If you don't [run your own `rippled` server](../infrastructure/installation/inde
 | Ripple[¹][]   | Testnet (Clio) | `https://clio.altnet.rippletest.net:51234/`	| `wss://clio.altnet.rippletest.net:51233/` | Testnet public server with Clio |
 | Ripple[¹][]   | Devnet      | `https://s.devnet.rippletest.net:51234/` | `wss://s.devnet.rippletest.net:51233/` | Devnet public server |
 | Ripple[¹][]   | Devnet (Clio)  | `https://clio.devnet.rippletest.net:51234/`	| `wss://clio.devnet.rippletest.net:51233/` | Devnet public server with Clio |
-| Ripple[¹][]   | Sidechain-Devnet | `https://sidechain-net2.devnet.rippletest.net:51234/` | `wss://sidechain-net2.devnet.rippletest.net:51233/` | Sidechain Devnet to test cross-chain bridge features. Devnet serves as the locking chain while this sidechain serves as the issuing chain. |
 | XRPL Labs     | Xahau Testnet | `https://xahau-test.net/` | `wss://xahau-test.net/` | [Hooks-enabled](https://hooks.xrpl.org/) Xahau Testnet |
 
 

docs/use-cases/payments/index.page.tsx

@@ -221,7 +221,7 @@ const PaymentsPage: React.FC = () => {
             
           </div>
           <div className="text-content">
-            <h6 className="eyebrow mb-3 subhead-sm-r">
+            <h6 className="eyebrow mb-3 text-large">
               {translate("Payments")}
             </h6>
             <h2 className="h4 h2-sm mb-10">

docs/use-cases/tokenization/index.page.tsx

@@ -199,7 +199,7 @@ export default function Tokenization() {
                   "Work with a variety of tokens supported by the XRP Ledger."
                 )}
               </h2>
-              <h6 className="eyebrow mb-3 subhead-sm-r">
+              <h6 className="eyebrow mb-3 text-large">
                 {translate("Tokenization")}
               </h6>
             </div>
@@ -220,7 +220,7 @@ export default function Tokenization() {
                 {translate("Quick Start")}
               </Link>{" "}
               <a
-                className="ms-4 video-external-link btn-none"
+                className="ml-4 video-external-link btn-none"
                 target="_blank"
                 href="https://www.youtube.com/playlist?list=PLJQ55Tj1hIVZtJ_JdTvSum2qMTsedWkNi"
               >
@@ -273,7 +273,7 @@ export default function Tokenization() {
                 target="_blank"
                 href={article.url}
               >
-                <div className="time h4 mb-8">
+                <div className="time h4 normal mb-8">
                   {translate(article.time)}
                 </div>
                 <div className="h5 mb-4">{translate(article.title)}</div>

docs/use-cases/tokenization/real-world-assets.page.tsx

@@ -401,6 +401,13 @@ function TokenHeroSection() {
   const { translate } = useTranslate();
   return (
     <section className="token-hero-section">
+      <div className="position-relative d-none-sm">
+        <img
+          alt="orange waves"
+          src={require("./../../../static/img/backgrounds/events-orange.svg")}
+          id="events-orange"
+        />
+      </div>
       <div className="token-title-container">
         <h1 className="token-title">
           {translate("Real-World Asset (RWA) Tokenization")}

index.page.tsx

@@ -1,7 +1,6 @@
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { BenefitsSection } from 'shared/components/benefits-section';
-import { PageGrid, PageGridCol, PageGridRow } from 'shared/components/PageGrid/page-grid';
 
 export const frontmatter = {
   seo: {
@@ -118,7 +117,7 @@ export default function Index() {
           </div>
           <div className="col-lg-6 mx-auto text-center pl-0 pr-0">
             <div className="d-flex flex-column-reverse">
-              <h1 className="display-lg mb-10">
+              <h1 className="mb-10">
                 {translate('home.hero.h1part1', 'The Blockchain')}
                 <br className="until-sm" />
                 {translate('home.hero.h1part2', 'Built for Business')}
@@ -130,8 +129,12 @@ export default function Index() {
             </Link>
           </div>
         </section>
-        <PageGrid className="py-26">
-          <PageGrid.Col span={{ base: 12, lg: 6 }} offset={{ lg: 3 }}>
+        <div className="position-relative d-none-sm">
+          <img src={require('./static/img/backgrounds/home-purple.svg')} id="home-purple" loading="lazy" />
+          <img src={require('./static/img/backgrounds/home-green.svg')} id="home-green" loading="lazy" />
+        </div>
+        <section className="container-new py-26">
+          <div className="col-lg-6 offset-lg-3 pl-0-sm pr-0-sm p-8-sm p-10-until-sm">
             <h2 className="h4 mb-8 h2-sm">{translate('The XRP Ledger: The Blockchain Built for Business')}</h2>
             <h6 className="longform mb-10">
               {translate(
@@ -143,8 +146,8 @@ export default function Index() {
                 'Proven reliable over more than a decade of error-free functioning, the XRPL offers streamlined development, low transaction costs, high performance, and sustainability. So you can build with confidence–and move your most critical projects forward.'
               )}
             </p>
-          </PageGrid.Col>
-        </PageGrid>
+          </div>
+        </section>
         <BenefitsSection
           eyebrow="Benefits"
           title="Why developers choose the XRP Ledger"
@@ -191,6 +194,8 @@ export default function Index() {
         </section>
         <section className="container-new py-26">
           <div className="col-lg-6 offset-lg-3 p-6-sm p-10-until-sm br-8 cta-card">
+            <img src={require('./static/img/backgrounds/cta-home-purple.svg')} className="d-none-sm cta cta-top-left" />
+            <img src={require('./static/img/backgrounds/cta-home-green.svg')} className="cta cta-bottom-right" />
             <div className="z-index-1 position-relative">
               <h2 className="h4 mb-8-sm mb-10-until-sm">{translate('Our Shared Vision for XRPL’s Future')}</h2>
               <p className="mb-10">
@@ -227,6 +232,7 @@ export default function Index() {
         </section>
         <section className="container-new py-26">
           <div className="col-md-6 offset-md-3 p-8-sm p-10-until-sm br-8 cta-card">
+            <img alt="" src={require('./static/img/backgrounds/cta-home-magenta.svg')} className="cta cta-bottom-right" />
             <div className="z-index-1 position-relative">
               <div className="d-flex flex-column-reverse">
                 <h2 className="h4 mb-8-sm mb-10-until-sm">

package.json

@@ -5,10 +5,8 @@
   "type": "module",
   "description": "The XRP Ledger Dev Portal is the authoritative source for XRP Ledger documentation, including the `rippled` server, client libraries, and other open-source XRP Ledger software.",
   "scripts": {
-    "analyze-css": "node scripts/analyze-css.js",
-    "build-css": "sass --load-path styles/scss --load-path . styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css && NODE_ENV=production postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css",
-    "build-css:dev": "sass --load-path styles/scss --load-path . styles/xrpl.scss ./static/css/devportal2024-v1.tmp.css --source-map && postcss ./static/css/devportal2024-v1.tmp.css -o ./static/css/devportal2024-v1.css && rm -f ./static/css/devportal2024-v1.tmp.css",
-    "build-css:watch": "sass --watch --load-path styles/scss --load-path . styles/xrpl.scss:static/css/devportal2024-v1.css --source-map",
+    "build-css": "sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map",
+    "build-css-watch": "sass --watch --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map",
     "start": "realm develop"
   },
   "keywords": [],
@@ -39,13 +37,8 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^7.0.2",
-    "autoprefixer": "^10.4.21",
-    "bootstrap": "^5.3.3",
-    "cssnano": "^7.1.1",
+    "bootstrap": "^4.6.2",
     "htmltojsx": "^0.3.0",
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.1",
-    "sass": "^1.93.2"
+    "sass": "1.26.10"
   }
 }

postcss.config.cjs

@@ -1,151 +0,0 @@
-/**
- * PostCSS Configuration
- * 
- * Processes compiled Sass output through:
- * 1. PurgeCSS - Removes unused CSS selectors
- * 2. Autoprefixer - Adds vendor prefixes for browser compatibility
- * 3. cssnano - Minifies and optimizes CSS (production only)
- */
-
-const purgecss = require('@fullhuman/postcss-purgecss').default;
-const autoprefixer = require('autoprefixer');
-const cssnano = require('cssnano');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-module.exports = {
-  plugins: [
-    // Only run PurgeCSS in production or when explicitly enabled
-    ...(isProduction || process.env.PURGECSS === 'true'
-      ? [
-          purgecss({
-            // Scan all content files for class names
-            content: [
-              './**/*.tsx',
-              './**/*.ts',
-              './**/*.md',
-              './**/*.yaml',
-              './**/*.html',
-              './static/js/**/*.js',
-              './static/vendor/**/*.js',
-              // Ignore node_modules except for specific libraries that inject classes
-              '!./node_modules/**/*',
-            ],
-            
-            // Default extractor - looks for class names in content
-            defaultExtractor: content => {
-              // Match all words, including those with dashes and numbers
-              const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
-              // Match class names in className="..." or class="..." 
-              const classMatches = content.match(/(?:class|className)=["']([^"']*)["']/g) || [];
-              const classes = classMatches.flatMap(match => {
-                const m = match.match(/["']([^"']*)["']/);
-                return m ? m[1].split(/\s+/) : [];
-              });
-              return [...broadMatches, ...classes];
-            },
-
-            // Safelist - classes that should never be removed
-            safelist: {
-              // Standard safelist - dynamic state classes
-              standard: [
-                'html',
-                'body',
-                'light',
-                'dark',
-                'show',
-                'hide',
-                'active',
-                'disabled',
-                'open',
-                'collapsed',
-                'collapsing',
-                'lang-ja', // Japanese language class
-                /^lang-/, // All language classes
-                // Common Bootstrap utility patterns that should always be kept
-                /^container/, // All container classes
-                /^row$/, // Row class
-                /^col-/, // Column classes
-                /^g-/, // Gap utilities
-                /^p-/, // Padding utilities
-                /^m-/, // Margin utilities  
-                /^px-/, /^py-/, /^pt-/, /^pb-/, /^ps-/, /^pe-/, // Directional padding
-                /^mx-/, /^my-/, /^mt-/, /^mb-/, /^ms-/, /^me-/, // Directional margin
-                /^d-/, // Display utilities
-                /^flex-/, // Flexbox utilities
-                /^justify-/, // Justify content
-                /^align-/, // Align items
-                /^w-/, // Width utilities
-                /^h-/, // Height utilities
-                /^text-/, // Text utilities
-                /^bg-/, // Background utilities
-                /^border/, // Border utilities
-                /^rounded/, // Border radius
-              ],
-              
-              // Deep safelist - MINIMAL - only truly dynamic components
-              deep: [
-                // Bootstrap JS components (only if actually used with JS)
-                /dropdown-menu/,
-                /dropdown-item/,
-                /modal-backdrop/,
-                /fade/,
-                
-                // Third-party libraries
-                /cm-/,
-                /CodeMirror/,
-                /lottie/,
-              ],
-
-              // Greedy safelist - VERY MINIMAL
-              greedy: [
-                /data-theme/, // Theme switching
-              ],
-            },
-
-            // Reject specific patterns - don't remove these even if not found
-            rejected: [],
-            
-            // Variables - keep CSS custom properties
-            variables: true,
-            
-            // Keyframes - keep animation keyframes
-            keyframes: true,
-            
-            // Font-face rules
-            fontFace: true,
-          }),
-        ]
-      : []),
-
-    // Autoprefixer - adds vendor prefixes
-    autoprefixer({
-      overrideBrowserslist: [
-        '>0.2%',
-        'not dead',
-        'not op_mini all',
-        'last 2 versions',
-      ],
-    }),
-
-    // cssnano - minification (production only)
-    ...(isProduction
-      ? [
-          cssnano({
-            preset: [
-              'default',
-              {
-                discardComments: {
-                  removeAll: true,
-                },
-                normalizeWhitespace: true,
-                colormin: true,
-                minifySelectors: true,
-              },
-            ],
-          }),
-        ]
-      : []),
-  ],
-};
-

redocly.yaml

@@ -56,12 +56,16 @@ scripts:
   head:
     - src: https://cmp.osano.com/AzyjT6TIZMlgyLyy8/f11f7772-8ed5-4b73-bd17-c0814edcc440/osano.js
     - src: ./static/js/xrpl-2.11.0.min.js
-    # - src: ./static/vendor/jquery-3.7.1.min.js
+    - src: ./static/vendor/jquery-3.7.1.min.js
     - src: ./static/vendor/bootstrap.min.js
     - src: ./static/js/osano.js
       type: text/javascript
 links:
-  - href: https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&family=Noto+Serif:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap
+  - href: https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap
+    rel: stylesheet
+  - href: https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700&display=swap
+    rel: stylesheet
+  - href: https://fonts.googleapis.com/css?family=Space+Grotesk:300,400,600,700&display=swap
     rel: stylesheet
   - href: ./static/css/devportal2024-v1.css
     rel: stylesheet

resources/code-samples.page.tsx

@@ -40,17 +40,25 @@ export default function CodeSamples() {
             {/* <a className="mt-12 btn btn-primary btn-arrow">Submit Code Samples</a> */}
           </div>
         </section>
+        <div className="position-relative d-none-sm">
+          <img
+            alt="orange waves"
+            src={require('../static/img/backgrounds/xrpl-overview-orange.svg')}
+            id="xrpl-overview-orange"
+          />
+        </div>
         <section className="container-new py-26">
           <div className="d-flex flex-column col-sm-8 p-0">
             <h3 className="h4 h2-sm">
               {translate('Browse sample code for building common use cases on the XRP Ledger')}
             </h3>
           </div>
-          <div className="row gx-4 gy-5 mt-10 mb-20" id="code-samples-deck">
-            {codeSamples.map(card => (
-              <div key={card.href} className="col-12 col-lg-6 mb-4">
+          <div className="row col-12  card-deck mt-10" id="code-samples-deck">
+            <div className="row col-md-12 px-0" id="code_samples_list">
+              {codeSamples.map(card => (
                 <a
-                  className={`card cardtest h-100 ${card.langs.join(' ')}`}
+                  key={card.href}
+                  className={`card cardtest col-12 col-lg-5 ${card.langs.join(' ')}`}
                   href={target.github_forkurl + `/tree/${target.github_branch}/${card.href}`.replace('/content','')}
                 >
                   <div className="card-header">
@@ -64,9 +72,10 @@ export default function CodeSamples() {
                     <h4 className="card-title h5">{card.title}</h4>
                     <p className="card-text">{card.description}</p>
                   </div>
+                  <div className="card-footer">&nbsp;</div>
                 </a>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         </section>
         <section className="container-new py-26">
@@ -77,8 +86,8 @@ export default function CodeSamples() {
                 {translate('Help the XRPL community by submitting your own code samples')}
               </h6>
             </div>
-            <div className="row ps-4">
-              <div className=" col-lg-3 ps-4 ps-lg-0 pe-4 contribute  dot contribute_1">
+            <div className="row pl-4">
+              <div className=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_1">
                 <span className="dot" />
                 <h5 className="pb-4 pt-md-5">{translate('Fork and clone')}</h5>
                 <p className="pb-4">
@@ -89,7 +98,7 @@ export default function CodeSamples() {
                   {translate('resources.contribute.1.part3', '. Using git, clone the fork to your computer.')}
                 </p>
               </div>
-              <div className=" col-lg-3 ps-4 ps-lg-0 pe-4 contribute  dot contribute_2">
+              <div className=" col-lg-3 pl-4 pl-lg-0 pr-4 contribute  dot contribute_2">
                 <span className="dot" />
                 <h5 className="pb-4 pt-md-5">{translate('Add to folder')}</h5>
                 <p className="pb-4">

resources/contribute-documentation/documentation-translations.md

@@ -1,81 +1,62 @@
 ---
-html: documentation-translations.html
-parent: contribute-documentation.html
 seo:
     description: Learn how to contribute and maintain translations of the documentation on this website.
 ---
 # Translations
 
-The XRP Ledger Dev Portal is mostly written in English, so the English version is generally the most up-to-date and accurate version. However, to broaden the reach of the XRP Ledger software and community, this repository also contains translated versions of the documentation. We strongly encourage members of the community who understand other languages to contribute translations of the dev portal contents in their native languages.
+The XRP Ledger Dev Portal (XRPL.org) is mostly written in English, so the English version is generally the most up-to-date and accurate version. However, to broaden the reach of the XRP Ledger software and community, this repository also contains translated versions of the documentation. We strongly encourage members of the community who understand other languages to contribute translations of the dev portal contents in their native languages.
 
-The `dactyl-config.yml` contains a "target" entry for each available language. (Currently, the available languages are English and Japanese.) This entry includes a dictionary of strings used in the template files. For example:
+The languages currently provided are:
 
-```yaml
--   name: en
-    lang: en
-    display_name: XRP Ledger Dev Portal
-    # These github_ fields are used by the template's "Edit on GitHub" link.
-    #  Override them with --vars to change which fork/branch to edit.
-    github_forkurl: https://github.com/XRPLF/xrpl-dev-portal
-    github_branch: master
-    strings:
-        blog: "Blog"
-        search: "Search site with Google..."
-        bc_home: "Home"
-        # ...
-```
-
-There is also a top-level `languages` listing that defines some properties for each supported language. The short code for each language should be short code according to [IETF BCP47](https://tools.ietf.org/html/bcp47). For example, "en" for English, "es" for Spanish, "ja" for Japanese, "zh-CN" for Simplified Chinese, "zh-TW" for Traditional Chinese (as used in Taiwan), and so on. The `display_name` field defines the language's name as written natively in that language. The `prefix` field defines a prefix to be used in hyperlinks to that language's version of the site. Example `languages` definition:
-
-```yaml
-languages:
-    -   code: en
-        display_name: English
-        prefix: "/"
-    -   code: ja
-        display_name: 日本語
-        prefix: "/ja/"
-```
-
-The same `dactyl-config.yml` file contains an entry for each content page in the XRP Ledger Dev Portal. If a page has been translated, there is a separate entry for each translation, linked to the "target" for that translation. If a page has not yet been translated, the English version is used across all targets. (If a new page is added only to English and not other languages, the link checker reports that as a broken link.)
-
-Translating a page means separating out the entry for that page in the other language. Here are some tips for translating the page's metadata, which can be in either the `dactyl-config.yml` file or the frontmatter at the top of the page's Markdown file:
-
-| Field | Notes |
-|-------|-------|
-| `html` | The HTML file name of the page. By convention, this should be the same across all language versions. |
-| `md` | The Markdown source file for the page. Translated Markdown source files should use the same filename as the English-language version except that the file extension should be `.{language code}.md` instead of only `.md` for English. For example, Japanese translated files end in `.ja.md`. |
-| `blurb` | A short summary of the page. This should be translated. This text is used in metadata for search engine optimization and also on automatically-generated landing pages. |
+| Language          | Code | Status |
+|-------------------|------|--------|
+| English           | (N/A) | Primary language, with most work and updates being done in English first. |
+| Japanese (日本語)  | `ja` | Available on the site. Maintained on a best-effort basis, but sometimes not as up-to-date as the English version. |
+| Spanish (Español) | `es-ES` | Incomplete, not actively maintained. Not currently served on the production site. |
 
 
-Example of English and Japanese entries for the `server_info` method page:
+## Translations Folder
 
-```yaml
-    -   md: references/http-websocket-apis/public-api-methods/server-info-methods/server_info.md
-        targets:
-            - en
+The `@l10n` folder of the repository contains the translated docs for the site, including documentation pages (written in Markdown) and non-documentation pages such as dev tools that use the translations file to replace smaller strings of text where possible. Each translation exists in a separate folder identified by an [IETF BCP47](https://tools.ietf.org/html/bcp47) language code. Within the folder for a given language, the folder structure mirrors the top of the repository, such that content files whose path matches exactly are used instead of the English language versions. For example, `@l10n/ja/docs/concepts/accounts/index.md` is a Japanese-translated version of `docs/concepts/accounts/index.md`.
 
-    -   md: references/http-websocket-apis/public-api-methods/server-info-methods/server_info.ja.md
-        targets:
-            - ja
-```
+If there is not a parallel version of a file in the translation folder, the English version displays when you navigate to that page on the translated version of the site.
 
-Example entry for a page that isn't translated:
 
-```yaml
-    -   md: concepts/payment-system-basics/transaction-basics/source-and-destination-tags.md
-        targets:
-            - en
-            - ja
-```
+## Strings File
+
+The `translations.yaml` file contains strings of text that are used in specially-stylized pages (with the `.page.tsx` extension) including dev tools and the "marketing" pages in the `about/` and `community/` sections of the site, and in some cases the `sidebars.yaml` file too.
+
+Preferably, strings should use a key such as `topnav.docs.tutorials` to uniquely indicate the text being translated. Strings can also be matched by exactly the English text being translated, but matching by the English text is not ideal because the same text may need to be translated differently based on context, or different segments of text may need to be translated non-exactly to display correctly. The original files should be updated to use translation keys as needed.
+
+
+## Moving or Renaming Files
+
+When files are moved or renamed, the translated files also need to be moved or renamed the same way.
+
+When you add redirects to the `redirects.yaml` file at the repository top, also add redirects for each translation (these are grouped later in the file).
+
 
 ## Where to Start
 
-If you want to translate the XRP Ledger Dev Portal into your native language of choice, start with the {% repo-link path="docs/concepts/introduction/what-is-the-xrp-ledger.md" %}"What is the XRP Ledger?" page{% /repo-link %}, which introduces the core concepts behind the XRP Ledger.
+If you want to translate the XRP Ledger Dev Portal into your native language of choice, start with the {% repo-link path="docs/introduction/what-is-the-xrp-ledger.md" %}"What is the XRP Ledger?" page{% /repo-link %}, which introduces the core concepts behind the XRP Ledger.
 
-Save the file as `what-is-the-xrp-ledger.{language code}.md`, where `{language code}` is the [IETF BCP47](https://tools.ietf.org/html/bcp47) language code. (For example, "es" for Spanish, "ja" for Japanese, "zh-CN" for Simplified Chinese, "zh-TW" for Traditional Chinese as used in Taiwan, and so on.) Then open a [pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) adding your file to this repository. One of the repository's maintainers can help with the other necessary setup to add the language to the site.
+Save the file as `@l10n/{language code}/docs/introduction/what-is-the-xrp-ledger.md`, where `{language code}` is the [IETF BCP47](https://tools.ietf.org/html/bcp47) language code. (For example, "es-ES" for Spanish (Spain), "ja" for Japanese, "zh-CN" for Simplified Chinese, "zh-TW" for Traditional Chinese as used in Taiwan, and so on.) Then open a [pull request](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests) adding your file to this repository. One of the repository's maintainers can help with the other necessary setup to add the language to the site.
 
 For the Markdown content files, please use the following conventions:
 
 - Line-feed newline characters (`\n`) only (Unix style). Do not use carriage return (`\r`) characters (Windows style).
 - Use UTF-8 encoding. Avoid the use of Byte-order marks.
+
+To test changes with the translated version of the site, modify the `redocly.yaml` file at the repository top and add the language in question to the `l10n.locales` list:
+
+```yaml
+l10n:
+  defaultLocale: en-US
+  locales:
+    - code: en-US
+      name: English
+    - code: ja
+      name: 日本語
+```
+
+Then start the local dev server with `npm run start` from the repository top, use your web browser to view the local site, and choose the language from the dropdown in the main menu.

resources/contribute-documentation/index.md

@@ -1,6 +1,6 @@
 ---
-html: contribute-documentation.html
-parent: resources.html
+metadata:
+    indexPage: true
 seo:
     description: Contribution guides for XRP Ledger documentation.
 ---
@@ -23,18 +23,17 @@ The official source repository for the site is at <https://github.com/XRPLF/xrpl
 
 - `_api-examples/` - Sample API requests and responses, especially ones used in the documentation.
 - `_code-samples/` - Code samples used or referenced by the documentation. Where possible, these are fully functional / executable scripts.
-- `@l10n` - Translations into languages other than English. Currently, only Japanese.
+- `@l10n` - Translations into languages other than English. See [Documentation Translations](./documentation-translations.md) for details.
 - `@theme` - Overrides and custom components used in Markdoc contents as well as custom React pages.
 - `about/` - Source files for the About section's pages.
 - `blog/` - Source files for the XRPL Dev Blog.
 - `community/` - Source files for the Community section's pages.
 - `docs/` - Source files used to build the documentation. Mostly in Markdown.
     - `docs/_snippets/` - Reusable pieces of text used in the documentation.
-    - `docs/img/` - Diagrams and other images used in the documentation.
+    - `docs/img/` - Diagrams and other images used in the documentation. Diagrams can also be placed in the folder with the files that reference them.
     - `docs/img/_sources/` - Source files for images used in the documentation, where available.
-- `locale/` - **DEPRECATED** Old localization files.
 - `resources/` - Source files for the Resources section's pages.
-- `shared/` - Configuration files for some dependencies like CodeMirror.
+- `shared/` - Configuration files for some dependencies like CodeMirror, and React components for some specially styled pages.
 - `static/` - Static files used by the site's templates and theme.
 - `styles/` - SCSS source files for custom CSS.
 - `redirects.yaml` - Definitions of redirects from old site URLs to current paths.
@@ -45,11 +44,13 @@ The official source repository for the site is at <https://github.com/XRPLF/xrpl
 
 ## Requirements for a Successful Pull Request
 
-Before being considered for review or merging, each pull request must:
+Before being considered for merging, each pull request must:
 
-- Pass continuous integration tests.
-- Be [marked as drafts](https://github.blog/2019-02-14-introducing-draft-pull-requests/) until they are ready for review.
-- Adhere to the [code of conduct](https://github.com/XRPLF/xrpl-dev-portal/blob/master/CODE-OF-CONDUCT.md) for this repository.
+1. Pass continuous integration tests.
+2. Adhere to the [code of conduct](https://github.com/XRPLF/xrpl-dev-portal/blob/master/CODE-OF-CONDUCT.md) for this repository.
+3. Pass review from at least one maintainer, who will consider the quality, relevance, and maintainability of the contents in their review.
+
+If your PR is not yet ready to be merged, [mark it as a draft](https://github.blog/2019-02-14-introducing-draft-pull-requests/).
 
 ## Redocly Setup
 
@@ -84,6 +85,36 @@ If you add a new page, you should add it to the appropriate `sidebars.yaml` file
 
 The Markdown file for a page should start with a [frontmatter stanza](#frontmatter-fields).
 
+## Writing Style
+
+In general, follow the [Microsoft Style Guide](https://learn.microsoft.com/en-us/style-guide/)'s recommendations for tone, phrasing, and structure. You are allowed to deviate from the Microsoft guide.
+
+Try to split documentation pages into the following categories, based on their contents:
+
+- **Concepts:** Explain the _how_ and _why_ of a topic, feature, or practice. Don't go overboard with specific names, values, or code. Use [diagrams](./creating-diagrams.md) to help with understanding.
+- **References:** Describe all the possible properties, modes, or features of a piece of technology. Provide only small amounts of context, while linking to concepts for the bigger picture. Use tables or bulleted lists, sorted, to help users find what they need.
+- **Tutorials:** Demonstrate how to accomplish a task or use a feature. Provide step-by-step instructions with working code samples if possible. Link to references for more details of the functions used and alternative options. For more recommendations on how to build tutorials, see the [Tutorial Guidelines](./tutorial-guidelines.md).
+
+These types of documents serve people with different roles, or sometimes the same people at different points in their process. For example, software architects or CTOs making technical decisions might read a concept page to decide how to structure their integration or to determine which technology meets their needs; engineers might copy code from tutorials while building, then use the reference to adapt it for their use case.
+
+Some pages, like **Use Cases**, don't fit cleanly into these categories. It is OK to have exceptions where justified.
+
+### Interlinking
+
+Linking is useful for readers, who may arrive at any page in any order, without full context. Links in the body text help humans navigate through the site, since it's common to end up on a page that does not actually have the information you are looking for, but is related in some way to the page that does; links can send people to the right place while also building an understanding of the relationship between pieces of the whole. Frequent usage of links also helps machines point people at the right place, both in terms of search engine optimization and generative engine (AI) optimization.
+
+Links commonly fall into these categories:
+
+- _external links_ go to other sites. These should be used sparingly and clearly indicated; otherwise, suddenly ending up on a different site can be jarring. External links may open in a new tab or window; non-external links should always stay within the same tab.
+- _deep links_ go into greater detail than the current page, explaining a topic or option with more specifics. They are called "deep" links because the pages they link to typically exist at a level that is deeper into the site's hierarchical navigation and information architecture. Deep links are commonly introduced with a phrase such as, "For more information about {topic}," or placed in a "See Also" section at the bottom of a page, but that is not always necessary.
+- _backlinks_ provide background information or context for understanding the current page. They are called "back" links because they typically send readers "back" to shallower levels of the information architecture instead of following the typical progression of knowledge.
+
+Links can and should be used regularly, but without going overboard. Some additional guidelines:
+
+- In the first paragraph or even first sentence of any reference page, include a backlink to a concept page that provides more context about when and why that reference may be used.
+- When using a keyword that may need some explanation, to link the first instance of that keyword back to a concept page that explains it. Don't make every instance of the keyword into a link, which is overkill and distracting, but you may want to link it again if it comes up again in a separate section of the same page, especially if readers are likely to jump ahead to a specific section rather than reading straight through from the first mention to the later one.
+- On concept pages that are in the shallower parts of the information architecture, use caution when putting deep links into the text body. Readers may interpret these as backlinks, implying that they need additional background reading to understand the current section, interrupting the flow of information from simpler to more advanced. It is OK to use deep links in concepts when introduced with a warning phrase such as "For more information," or when context makes it clear that it is a deep link—for example, when saying that users can use a particular transaction type to accomplish a certain goal, it is appropriate to use a deep link to the transaction type reference documentation.
+
 ## Conventions
 
 Use the following conventions when creating a page:
@@ -101,29 +132,7 @@ Use the following conventions when creating a page:
 
 ### New Features
 
-When documenting a new feature, include a badge indicating the version of the program when the feature was introduced. The badge tag takes the structure:
-
-<pre><code>
-{% badge href="url" date="date of release" %}New in: program version{% /badge%}
-</code></pre>
-
-For example, the following badge definition:
-
-<pre><code>
-{% badge href="https://github.com/XRPLF/clio/releases/tag/2.0.0" date="February 18, 2024" %}New in: Clio v2.0.0{% /badge %}
-</code></pre>
-
-renders as {% badge href="https://github.com/XRPLF/clio/releases/tag/2.0.0" date="February 18, 2024" %}New in: Clio v2.0.0{% /badge %}.
-
-When updating a feature, replace _New in:_ with _Updated in:_. For example, the following badge definition:
-
-`{% badge href="https://github.com/XRPLF/clio/releases/tag/2.1.0" date="May 4, 2024" %} Updated  in: Clio v2.1.0{% /badge %}`
-
-renders as {% badge href="https://github.com/XRPLF/clio/releases/tag/2.1.0" date="May 4, 2024" %}Updated in: Clio v2.1.0{% /badge %}.
-
-Some phrases automatically set the color of the badge, or you can add a color parameter such as `color="purple"` to the tag to set the color explicitly.
-
-It is a best practice to remove any new/updated badges more than 2 years old.
+When documenting a new feature, include a [badge](./markdoc-tags.md#badge) indicating the version of the program when the feature was introduced. It is a best practice to remove any new/updated badges more than 2 years old.
 
 ### Terminology
 
@@ -153,20 +162,60 @@ Use the following words and phrases as described:
 
 ## Frontmatter Fields
 
-***Note: The details of Realm's frontmatter specification are not fully documented. Update this with a link when Realm exits closed beta.***
-
 Frontmatter for Markdown files can include details such as the following:
 
 ```yaml
 ---
 metadata:
-  indexPage: true # Add this if you want the page to contain an auto-generated list of its child pages.
+    indexPage: true # Use if you want to use the {% child-pages /%} macro to display a list of page children
 seo:
-  description: rippled is the core peer-to-peer server that manages the XRP Ledger. This section covers concepts that help you learn the "what" and "why" behind fundamental aspects of the rippled server.
+    description: Transact with confidence using the XRP Ledger's suite of compliance features for following government regulations and security practices.
 ---
 ```
 
-Some pages in the site have leftover metadata from the previous (Dactyl) toolchain, such as `html`, `parent`, or `targets` fields. These fields have no effect and can be omitted from new pages.
+Some pages in the site have leftover metadata from the previous (Dactyl) toolchain, such as `html`, `parent`, or `targets` fields. These fields have no effect and can be removed. For a reference of frontmatter fields that are supported by the current (Redocly) toolchain, see [Front matter configuration options (Realm docs)](https://redocly.com/docs/realm/config/front-matter-config).
+
+Usually, you should not specify a title in the frontmatter, but you might use the `seo` field's `title` sub-field (see below) for non-Markdown pages or when recommended for search engine optimization.
+
+### seo.title, default title, and sidebar label
+
+Every markdown page should have an h1 on the first line of the markdown contents, such as this:
+
+```
+# What is XRP?
+```
+
+By default, the text of this title is used as the title of the page. You don't need to specify a title separately in the frontmatter, especially since someone might change it in one place and forget to update the other. Sometimes pages have a longer title in the frontmatter's `seo.title` field, for purposes of search engine optimization (SEO). These titles are usually longer and optimized to include phrases or search terms that are likely to match queries people might type while looking for the page. **Titles in the frontmatter should only be used when recommended for SEO.** For example:
+
+```
+---
+seo:
+    title: What is XRP and Why is it Valuable?
+---
+```
+
+A third place a page might have a title is in a `label` field in the `sidebars.yaml` file. This should always come with a translation key in the `labelTranslationKey` field. Labels in the `sidebars.yaml` file should only be used in these cases:
+
+- To provide a translatable title for a `.page.tsx` file.
+- To shorten an SEO title so that it fits better in the sidebar. In this case, the label contents should match the original h1 title.
+
+For example:
+
+```
+- page: docs/introduction/what-is-xrp.md
+  label: What is XRP?
+  labelTranslationKey: sidebar.docs.introduction.what-is-xrp
+```
+
+For reference, here's the hierarchy that determines which title gets used where:
+
+| Location | Which title it uses |
+|----------|---------------------|
+| `<title>` element (the text that displays in the tab name and the title bar of your browser, if it has one) | `seo.title`, falling back to md h1 |
+| `<meta name="title" ...>`, `<meta name="og:title" ...>`, `<meta name="twitter:title" ...>` and so on in the `<head>` of the page, which are used when "unfurling" a link (showing a preview) in various chat and social media apps like Discord, Slack, or X (Twitter) | `seo.title`, falling back to md h1 |
+| Sidebar navigation | `label` from `sidebars.yaml`, then `seo.title`, and finally md h1 |
+| In-page header, that is, the big text in the center column | md h1 only |
+
 
 ### Next and Previous Buttons
 
@@ -188,9 +237,9 @@ Store your graphics in the `/docs/img` directory. Embed graphics using the synta
 
 `![image_description](/docs/img/my_image.png)`
 
-For example, `![XRPL Foundation Logo](/docs/img/xrplf-logo.png)` renders as follows.
+For example, `![XRPL X mark](/static/img/xrp-x-logo.png)` renders as follows.
 
-![XRPL Foundation Logo](/docs/img/xrplf-logo.png)
+![XRPL X mark](/static/img/xrp-x-logo.png)
 
 ## Videos
 
@@ -220,71 +269,44 @@ referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 ## Tables
 
-Markdoc provides three different syntax styles for generating tables.
+Use Markdown tables liberally. Tables are a good way to convey possible options, especially in reference documentation.
 
-In most cases, create tables using the pipe character (|) to separate columns and three or more hyphens (---) to create the column headers.
-
-```
-|          | Head 1 |
-| -------  | ------ |
-| Label 1  | Val 1  |
-```
-
-This code renders as follows.
-
-|          | Head 1 |
-| -------  | ------ |
-| Label 1  | Val 1  |
-
-The cells do not have to be the same width. The renderer aligns the columns and wraps text as needed, as shown.
+The GitHub Flavored Markdown syntax uses the pipe character (|) to separate columns and three or more hyphens (---) to create the column headers. For example:
 
 ```
 | Key | Value |
-| --- | ----- |
+|-----|-------|
 | Name | H. G. Wells |
 | Genre | Science Fiction |
 | Hyperbole | The greatest story ever told! No one has ever written anything more important than this Victorian era classic. Oh, how swells the heart to ponder the heady philosophies introduced therein! |
 ```
 
+This table displays as follows:
+
 | Key | Value |
-| --- | ----- |
+|-----|-------|
 | Name | H. G. Wells |
 | Genre | Science Fiction |
 | Hyperbole | The greatest story ever told! No one has ever written anything more important than this Victorian era classic. Oh, how swells the heart to ponder the heady philosophies introduced therein! |
 
-Use colons in the heading lines to align columns left (:--), middle (:-:), or right (--:).
+The cells do not have to be the same width. The renderer aligns the columns and wraps text as needed. However, it is often helpful for editors if you align the columns of the table in the markdown source file.
+
+Optionally, use colons in the heading lines to align columns left (:--), middle (:-:), or right (--:). For example:
 
 ```
-| Model | Color | Price |
-| :-: | :--  | --:  |
+| Model    | Color | Price |
+|:--------:|:------|------:|
 | Protexra | Electric Blue | 50,000 XRP |
 | Joatic | Hot Pink | 165,000 XRP |
 | Zhanu | Neon Green | 234,000 XRP |
 ```
 
-| Model | Color | Price |
-| :-: | :--  | --:  |
+| Model    | Color | Price |
+|:--------:|:------|------:|
 | Protexra | Electric Blue | 50,000 XRP |
 | Joatic | Hot Pink | 165,000 XRP |
-| Zhanu | Impetuous Green | 1,728,000 XRP |
+| Zhanu | Neon Green | 234,000 XRP |
 
-The left column is bold by default. If you don't want a bold label in the left column, you can use an empty left column and start your table one column over.
-
-```
-|     | French | English | German |
-| --- | ---    | ---     | ---    |
-|     | Fromage | Cheese | Käse |
-|     | Maux d'estomac | Stomach ache | Magenschmerzen |
-|     | Cornichon | Pickle | Essiggurke |
-```
-
-|     | French | English | German |
-| --- | ---    | ---     | ---    |
-|     | Fromage | Cheese | Käse |
-|     | Maux d'estomac | Stomach ache | Magenschmerzen |
-|     | Cornichon | Pickle | Essiggurke |
-
-Use these basic tables whenever possible. If you genuinely require special formatting not provided by the examples above, you can create a table using HTML syntax.
 
 ## Links
 
@@ -306,11 +328,11 @@ To make it easier to link to pages that are commonly cited, you can add a `{% ra
 
 Format method names and other code structures inline enclosing the code in backtick (&#96;) characters. For example:
 
-&nbsp;&nbsp;&nbsp;&nbsp;My favorite method ever is &#96;nft_info&#96;.
+> My favorite method ever is &#96;nft_info&#96;.
 
 renders as
 
-&nbsp;&nbsp;&nbsp;&nbsp;My favorite method ever is `nft_info`.
+> My favorite method ever is `nft_info`.
 
 For longer code blocks, use three backtics (&#96;&#96;&#96;) followed by the language name. Type a return, and enter the sample code. At the end of your code sample, type a return and close the block again with three backticks (&#96;&#96;&#96;).
 
@@ -338,123 +360,10 @@ renders as
   })
 ```
 
-## Markdoc Components
+## Markdoc Tags
 
-The files are processed with [Markdoc](https://markdoc.dev/), which means they can contain special tags in `{% ... %}` syntax. In addition to Redocly's built-in tags, this repository has some custom tags defined in `/@theme/markdoc/`.
-
-### Badges
-
-See [New Features](#new-features).
-
-### Partials
-
-If you have text that you use frequently, or  text that requires periodic update in a number of places in the documentation, you can create a &#95;snippet file for reuse. 
-
-Store your file in the `_snippet` directory. To insert the partial file, use the syntax `{% partial file="<file url>" /%}`.
-
-For example, here is the snippet `/docs/_snippets/secret-key-warning.md`.
-
-<blockquote>
-{&#37; admonition type="warning" name="Caution" &#37;}<br/>
-Never submit a secret key to a server you do not control. Do not send a secret key unencrypted over the network.<br/>
-{% /admonition %}
-</blockquote>
-
-To embed the text, use the tag `{% partial file="/docs/_snippets/secret-key-warning.md" /%}`.
-
-For example:
-
-<blockquote>
-There I was, happy as a lark, skipping through the daisies, when I shyly handed my secret
- key to my one true love.
-
-{&#37; partial file="/docs/_snippets/secret-key-warning.md" /&#37;}
-
-Alas, if only I had heeded that sage advice, I would not rue the day as I do today.
-</blockquote>
-
-renders as:
-
-<blockquote>
-There I was, happy as a lark, skipping through the daisies, when I shyly handed my secret key to my one true love.
-
-{% partial file="/docs/_snippets/secret-key-warning.md" /%}
-
-Alas, if only I had heeded that sage advice, I would not rue the day as I do today.
-</blockquote>
-
-### Not-Enabled Badge
-
-The `{% not-enabled /%}` Markdoc component displays a yellow flask icon with a tooltip about how the feature is not available on the production XRP Ledger. Use this when discussing amendments that are open for voting but not currently enabled. Example: {% not-enabled /%}
-
-This tag is self-closing, and it takes no parameters.
-
-### Repo Link
-
-This tag links to a particular file in the source code repository for this site, usually a code sample. For example:
-
-<pre><code>
-{% repo-link path="_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %}
-</code></pre>
-
-becomes: {% repo-link path="_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %}
-
-If you are working from a fork or branch of the site, all such links can be updated at once with a site configuration change.
-
-
-### Try It
-
-The `{% try-it ... /%}` Markdoc tag provides a convenient shortcut for linking to the WebSocket tool as a button. This tag is self-closing.
-Example:
-
-{% try-it method="account_currencies" server="testnet" /%}
-
-Example syntax:
-
-<pre><code>
-{% try-it method="account_currencies" server="testnet" /%}
-</code></pre>
-
-The text of the button is normally "Try it!" in English, and can be translated by setting the `component.tryit` key in the localization's `translations.yaml` file.
-
-This tag takes the following parameters:
-
-| Parameter | Required? | Description |
-|---|---|---|
-| `method` | Yes | The ID of the anchor to use on the WebSocket Tool page. For most WebSocket API methods, this is the API method exactly, but it could contain more. For example, different `ledger_entry` variations use a suffix like `ledger_entry-nft-page`. If you are documenting a new method, you must also add that method to the WebSocket tool by editing `/resources/dev-tools/components/websocket-api/data/command-list.json`. |
-| `server` | No | A specific server to use for the request. You may want to specify the server if a method is specific to Clio or `rippled` servers, or if the example uses data or amendments that are only on a specific test network. |
-
-The values you can provide to the `server` parameter are as follows:
-
-| `server` value | Server to use |
-|---|---|
-| (Omitted) | The WebSocket tool's default server (currently `s1.ripple.com`) |
-| `s1` | Ripple's `s1.ripple.com` Mainnet public cluster, typically served by Clio servers. |
-| `s2` | Ripple's `s2.ripple.com` Mainnet full-history public cluster, typically served by Clio servers. |
-| `xrplcluster` | The `xrplcluster.com` cluster of public servers, typically served by `rippled` servers with a lightweight proxy in front. |
-| `devnet` | The `s.altnet.rippletest.net` cluster of Testnet servers. |
-| `testnet` | The `s.devnet.rippletest.net` cluster of Devnet servers. |
-
-### Tx Example
-
-The `{% tx-example ... /%}` Markdoc tag provides a convenient shortcut for linking to the WebSocket tool as a button with a body pre-filled to look up a specific example transaction. This tag is self-closing. Example:
-
-{% tx-example txid="1AF19BF9717DA0B05A3BFC5007873E7743BA54C0311CCCCC60776AAEAC5C4635" /%}
-
-Example syntax:
-
-<pre><code>
-{% tx-example txid="1AF19BF9717DA0B05A3BFC5007873E7743BA54C0311CCCCC60776AAEAC5C4635" /%}
-</code></pre>
-
-The text of the button is normally "Query example transaction" in English, and can be translated by setting the `component.queryexampletx` key in the localization's `translations.yaml` file.
-
-This tag takes the following parameters:
-
-| Parameter | Required? | Description |
-|---|---|---|
-| `txid` | Yes | The unique hash of the transaction to look up. |
-| `server` | No | A specific server to use for the request. Possible values are the same as `{% try-it %}` as defined above. For example, you may need to specify `devnet` to show a transaction added by an amendment that isn't enabled on Mainnet. |
+The files are processed with [Markdoc](https://markdoc.dev/), which means they can contain special tags in `{% ... %}` syntax. In addition to Redocly's built-in tags, this repository has some custom tags. For details on markdoc tags and their usage, see [Markdoc Tags](./markdoc-tags.md).
 
+## More Contributor Documentation
 
 {% child-pages /%}

resources/contribute-documentation/markdoc-tags.md

@@ -0,0 +1,265 @@
+---
+seo:
+    description: Read about all the Markdoc tags commonly used in XRPL documentation, including custom tags.
+---
+# Markdoc Tags
+
+This page serves as a reference of the [Markdoc tags](https://redocly.com/docs/realm/content/markdoc-tags/tag-library) used in XRPL documentation. These extensions of Markdown syntax allow for stylized and dynamic contents.
+
+When using self-closing tags, be sure to include the closing slash in the tag definition. Otherwise, content after the unclosed tag will not be displayed.
+
+## Redocly Built-In Tags
+
+This section describes the Redocly built-in tags that XRPL documentation uses most often and the conventions for using them in the site.
+
+
+### Admonition
+
+Show text in a colored box that stands out from regular paragraphs, sometimes referred to as a _callout_. There are four levels of admonition with escalating levels of severity. You can put any text in the `name` attribute, but there are recommended names for each category that can be automatically translated. For historical reasons, the recommended names do not align cleanly with the `type` options. The recommended names are:
+
+| `type`    | Color         | Recommended `name` | Usage |
+|-----------|---------------|--------------------|-------|
+| `success` | Green         | `Tip` | Optional, additional information, shortcuts, and cases where people might think there's a problem but there actually isn't. |
+| `info`    | Blue          | `Note` | Quirks, background information, or other details that are not critical but may be good to know. |
+| `warning` | Yellow/Orange | `Caution` | Common mistakes, misunderstandings, or limitations that may cause confusion and inconvenience. |
+| `danger`  | Red/Magenta   | `Warning` | Mistakes or risks that may cause financial loss, security incidents, or other substantial problems. |
+
+Example usage:
+
+<pre><code>
+{% admonition type="success" name="Tip" %}
+Admonitions create colored boxes that stand out from regular paragraphs.
+{% /admonition %}
+</code></pre>
+
+Demonstration:
+
+{% admonition type="success" name="Tip" %}
+Admonitions create colored boxes that stand out from regular paragraphs.
+{% /admonition %}
+
+It is valid to put an admonition's opening and closing tags all on the same line as its contents. To avoid a Redocly bug, make sure multi-line admonitions have their opening and closing tags on separate lines.
+
+### Inline SVG
+
+Include an image in SVG format inline in the page's markup. This allows the diagram's color scheme to adapt to the user's current (light/dark) theme. Typically, you should use the tag inside a link that opens the SVG file as a stand-alone image so the user can view it and zoom in or out as needed. For tips on making diagrams compatible with this feature, see [Creating Diagrams](./creating-diagrams.md). This tag is self-closing.
+
+Example usage:
+<pre><code>
+[{% inline-svg file="/docs/img/anatomy-of-a-ledger-simplified.svg" /%}](/docs/img/anatomy-of-a-ledger-simplified.svg "Figure 1: Anatomy of a ledger version, which includes transactions, state, and metadata")
+</code></pre>
+
+Demonstration:
+
+[{% inline-svg file="/docs/img/anatomy-of-a-ledger-simplified.svg" /%}](/docs/img/anatomy-of-a-ledger-simplified.svg "Figure 1: Anatomy of a ledger version, which includes transactions, state, and metadata")
+
+
+### Partial and Raw Partial
+
+Include text from another, reusable file, called a _snippet_. Unlike environment variables, partials are typically an entire paragraph or more. If text needs to be updated in multiple places, you can use this component to reuse a single file's contents in multiple places. Store the source file in the `docs/_snippets/` directory. This tag is self-closing.
+
+Example usage:
+
+<pre><code>
+{% partial file="/docs/_snippets/secret-key-warning.md" /%}
+</code></pre>
+
+Demonstration:
+
+{% partial file="/docs/_snippets/secret-key-warning.md" /%}
+
+Links and markup inside snippets are parsed separately before being added to the including file. Relative links are resolved based on the location of the snippet, not on the file including it. To include a snippet that resolves its contents in the context of the including page instead, include the file as a raw partial instead. This is useful when you want the partial to refer to the name of the page that included it, or if it defines common links used throughout the site.
+
+Example usage:
+
+<pre><code>
+&lcub;% raw-partial file="/docs/_snippets/tx-fields-intro.md" /%}
+</code></pre>
+
+
+### Variables
+
+Include the contents of a predefined variable, inline in the document. Unlike partials, these are typically only a few words at most. Common use cases include `{% $frontmatter.seo.title %}` for referring to the title of the current page (used in some templates and snippets), and environment variables for the current reserve amounts on the XRP Ledger Mainnet.
+
+Example usage:
+
+<pre><code>
+Each NFToken page requires a reserve of {% $env.PUBLIC_OWNER_RESERVE %}.
+</code></pre>
+
+Demonstration:
+
+Each NFToken page requires a reserve of {% $env.PUBLIC_OWNER_RESERVE %}.
+
+{% admonition type="warning" name="Caution" %}Variable references are like self-closing tags, but they don't use a slash like self-closing tags should (`/%}`).{%/admonition%}
+
+
+
+
+## Custom Tags
+
+Markdown supports creating custom tags with user-defined functionality. This repository defines several such tags for convenience in editing, as follows.
+
+
+### Amendment Disclaimer
+
+Show a disclaimer that functionality is based on an amendment to the XRP Ledger protocol, which updates live with the status of the amendment on Mainnet. The `name` parameter is required and is case-sensitive. This tag is self-closing.
+
+Example usage:
+
+<pre><code>
+{% amendment-disclaimer name="Credentials" /%}
+</code></pre>
+
+Demonstration:
+
+{% amendment-disclaimer name="Credentials" /%}
+
+When the amendment is not enabled on Mainnet, the component adds a paragraph that says, "Requires the (name) amendment," with a badge showing the amendment's voting percentage. After the amendment is enabled, the paragraph changes to say, "Added by the (name) amendment," with a badge showing the date the amendment became enabled. 
+
+The `compact=true` parameter (note, it is an error to put true in quotation marks here) displays only the name of the amendment and the status badge.
+
+The `mode="updated"` parameter (case-sensitive) changes the paragraph so that it says,  "The (name) amendment updates this," before the amendment is enabled, and "Updated by the (name) amendment," afterward, with the same badges.
+
+
+### Badge
+
+Show a colored inline badge. Use these to point out new or updated features, especially in the API, that are not tied to an amendment. The contents are the text of the badge; the left and right halves are split by the `:` character in the text.
+
+Example usage:
+
+<pre><code>
+{% badge href="https://github.com/XRPLF/clio/releases/tag/2.0.0" date="February 18, 2024" %}New in: Clio 2.0.0{% /badge %}
+</code></pre>
+
+Demonstration:
+
+{% badge href="https://github.com/XRPLF/clio/releases/tag/2.0.0" date="February 18, 2024" %}New in: Clio 2.0.0{% /badge %}
+
+The `date` parameter is optional, and is not displayed. It is helpful to remind editors when a change is old enough to remove the badge.
+
+When updating a feature, replace _New in:_ with _Updated in:_. These and certain other phrases automatically set the color of the badge and can be automatically translated. If necessary, you can add a color parameter such as `color="purple"` to the tag to set the color explicitly.
+
+### Card Grid and XRPL Card
+
+Create a grid of cards with specific links and icons. By default, the grid is 3 cards wide on desktop and 1 card wide on mobile. The contents of the card grid should only be `xrpl-card` tags. The `xrpl-card` tag is self-closing.
+
+Example usage:
+
+<pre><code>
+{% card-grid %}
+{% xrpl-card title="Javascript" body="Using the xrpl.js client library." href="/docs/tutorials/javascript/" image="/img/logos/javascript.svg" imageAlt="Javascript logo" /%}
+{% xrpl-card title="Python" body="Using xrpl.py, a pure Python library." href="/docs/tutorials/python/" image="/img/logos/python.svg" imageAlt="Python logo" /%}
+{% /card-grid %}
+</pre></code>
+
+Demonstration:
+
+{% card-grid %}
+{% xrpl-card title="Javascript" body="Using the xrpl.js client library." href="/docs/tutorials/javascript/" image="/img/logos/javascript.svg" imageAlt="Javascript logo" /%}
+{% xrpl-card title="Python" body="Using xrpl.py, a pure Python library." href="/docs/tutorials/python/" image="/img/logos/python.svg" imageAlt="Python logo" /%}
+{% /card-grid %}
+
+
+### Child Pages
+
+Show a bulleted list of pages that are children of the page using this tag. The descriptions of the pages use the frontmatter's `seo.description` field. This tag is self-closing and takes no parameters.
+
+Example usage:
+
+<pre><code>
+{% child-pages /%}
+</code></pre>
+
+This tag only works if you include the following data in the page's frontmatter:
+
+```
+metadata:
+    indexPage: true
+```
+
+
+### Not Enabled
+
+Display a yellow flask icon with a tooltip about how the feature is not available on the production XRP Ledger. Usually, you should use an [amendment-disclaimer](#amendment-disclaimer) instead, but there may be edge cases where you want to include this icon. This tag is self-closing and takes no parameters. 
+
+Example usage:
+
+<pre><code>
+{% not-enabled /%}
+</code></pre>
+
+Demonstration:
+
+{% not-enabled /%}
+
+
+### Repo Link
+
+Link to a particular file in the source code repository for this site, usually a code sample. If you are working from a fork or branch of the site, all such links can be updated at once with a site configuration change. The contents are the text of the link.
+
+Example usage:
+
+<pre><code>
+{% repo-link path="_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %}
+</code></pre>
+
+
+Demonstration: 
+
+{% repo-link path="_code-samples/build-a-desktop-wallet/js/1_ledger-index.js" %}`1-ledger-index/index.js`{% /repo-link %}
+
+
+### Try It
+
+Link to the WebSocket tool as a button. The text of the button is normally "Try it!" in English, and can be translated by setting the `component.tryit` key in the localization's `translations.yaml` file. This tag is self-closing.
+
+Example usage:
+
+<pre><code>
+{% try-it method="account_currencies" server="testnet" /%}
+</code></pre>
+
+Demonstration:
+
+{% try-it method="account_currencies" server="testnet" /%}
+
+This tag takes the following parameters:
+
+| Parameter | Required? | Description |
+|---|---|---|
+| `method` | Yes | The ID of the anchor to use on the WebSocket Tool page. For most WebSocket API methods, this is the API method exactly, but it could contain more. For example, different `ledger_entry` variations use a suffix like `ledger_entry-nft-page`. If you are documenting a new method, you must also add that method to the WebSocket tool by editing `/resources/dev-tools/components/websocket-api/data/command-list.json`. |
+| `server` | No | A specific server to use for the request. You may want to specify the server if a method is specific to Clio or `rippled` servers, or if the example uses data or amendments that are only on a specific test network. |
+
+The values you can provide to the `server` parameter are as follows:
+
+| `server` value | Server to use |
+|---|---|
+| (Omitted) | The WebSocket tool's default server (currently `s1.ripple.com`) |
+| `s1` | Ripple's `s1.ripple.com` Mainnet public cluster, typically served by Clio servers. |
+| `s2` | Ripple's `s2.ripple.com` Mainnet full-history public cluster, typically served by Clio servers. |
+| `xrplcluster` | The `xrplcluster.com` cluster of public servers, typically served by `rippled` servers with a lightweight proxy in front. |
+| `devnet` | The `s.altnet.rippletest.net` cluster of Testnet servers. |
+| `testnet` | The `s.devnet.rippletest.net` cluster of Devnet servers. |
+
+
+### Tx Example
+
+Link to the WebSocket tool, as a button, with a body pre-filled to look up a specific example transaction. The text of the button is normally "Query example transaction" in English, and can be translated by setting the `component.queryexampletx` key in the localization's `translations.yaml` file. This tag is self-closing.
+
+Example usage:
+
+<pre><code>
+{% tx-example txid="1AF19BF9717DA0B05A3BFC5007873E7743BA54C0311CCCCC60776AAEAC5C4635" /%}
+</code></pre>
+
+Demonstration:
+
+{% tx-example txid="1AF19BF9717DA0B05A3BFC5007873E7743BA54C0311CCCCC60776AAEAC5C4635" /%}
+
+This tag takes the following parameters:
+
+| Parameter | Required? | Description |
+|---|---|---|
+| `txid` | Yes | The unique hash of the transaction to look up. |
+| `server` | No | A specific server to use for the request. Possible values are the same as `{% try-it %}` as defined above. For example, you may need to specify `devnet` to show a transaction added by an amendment that isn't enabled on Mainnet. |

resources/dev-tools/components/websocket-api/curl-modal.tsx

@@ -62,8 +62,8 @@ export function CurlButton ({selectedConnection, currentBody}: CurlButtonProps)
   return <>
       <button
         className="btn btn-outline-secondary curl"
-        data-bs-toggle="modal"
-        data-bs-target="#wstool-1-curl"
+        data-toggle="modal"
+        data-target="#wstool-1-curl"
         title={translate("cURL Syntax")}
         onClick={() => setShowCurlModal(true)}
       >

resources/dev-tools/components/websocket-api/permalink-modal.tsx

@@ -62,8 +62,8 @@ export function PermalinkButton ({currentBody, selectedConnection}: PermaLinkBut
   return <>
     <button
       className="btn btn-outline-secondary permalink"
-      data-bs-toggle="modal"
-      data-bs-target="#wstool-1-permalink"
+      data-toggle="modal"
+      data-target="#wstool-1-permalink"
       title={translate("Permalink")}
       onClick={() => setShowPermalinkModal(true)}
     >

resources/dev-tools/faucets.json

@@ -31,6 +31,14 @@
             "faucetHost": "batch.faucet.nerdnest.xyz",
             "shortName": "Batch-Devnet",
             "desc": "Preview of XLS-56d Batch transactions."
-        }   
+        },
+        {
+            "id": "faucet-select-lending-devnet",
+            "wsUrl": "wss://lend.devnet.rippletest.net:51233/",
+            "jsonRpcUrl": "https://lend.devnet.rippletest.net:51234/",
+            "faucetHost": "lend-faucet.devnet.rippletest.net",
+            "shortName": "Lending-Devnet",
+            "desc": "Preview of XLS-66d Lending Protocol."
+        }
     ]
 }

resources/dev-tools/index.page.tsx

@@ -146,8 +146,8 @@ export default function DevTools() {
                   <button
                     className="nav-link active dev-tools-tab"
                     id="explorers-tab"
-                    data-bs-toggle="tab"
-                    data-bs-target="#explorers"
+                    data-toggle="tab"
+                    data-target="#explorers"
                     role="tab"
                     aria-controls="explorers"
                     aria-selected="true"
@@ -159,8 +159,8 @@ export default function DevTools() {
                   <button
                     className="nav-link  dev-tools-tab"
                     id="api-access-tab"
-                    data-bs-toggle="tab"
-                    data-bs-target="#api-access"
+                    data-toggle="tab"
+                    data-target="#api-access"
                     role="tab"
                     aria-controls="api-access"
                     aria-selected="false"
@@ -172,8 +172,8 @@ export default function DevTools() {
                   <button
                     className="nav-link  dev-tools-tab"
                     id="other-tab"
-                    data-bs-toggle="tab"
-                    data-bs-target="#other"
+                    data-toggle="tab"
+                    data-target="#other"
                     role="tab"
                     aria-controls="other"
                     aria-selected="false"
@@ -278,6 +278,16 @@ export default function DevTools() {
         </section>
         <section className="container-new py-10 px-0">
           <div className="col-lg-12 p-6-sm p-10-until-sm br-8 cta-card">
+            <img
+              alt="purple waves"
+              src={require("../../static/img/backgrounds/cta-home-purple.svg")}
+              className="d-none-sm cta cta-top-left"
+            />
+            <img
+              alt="green waves"
+              src={require("../../static/img/backgrounds/cta-home-green.svg")}
+              className="cta cta-bottom-right"
+            />
             <div className="z-index-1 position-relative">
               <h2 className="h4 mb-8-sm mb-10-until-sm">
                 {translate("Have an Idea For a Tool?")}

resources/dev-tools/websocket-api-tool.page.tsx

@@ -238,7 +238,7 @@ export function WebsocketApiTool() {
                 className="btn-toolbar justify-content-between pt-4"
                 role="toolbar"
               >
-                <div className="btn-group me-3" role="group">
+                <div className="btn-group mr-3" role="group">
                   <button
                     className="btn btn-outline-secondary send-request"
                     onClick={() => sendWebSocketMessage(currentBody)}
@@ -259,8 +259,8 @@ export function WebsocketApiTool() {
                       connected ? "btn-success" : "btn-outline-secondary"
                     } ${connectionError ?? "btn-danger"}`}
                     onClick={openConnectionModal}
-                    data-bs-toggle="modal"
-                    data-bs-target="#wstool-1-connection-settings"
+                    data-toggle="modal"
+                    data-target="#wstool-1-connection-settings"
                   >
                     {`${selectedConnection.shortname}${
                       connected ? ` (${translate('Connected')})` : ` (${translate('Not Connected')})`

resources/dev-tools/xrp-faucets.page.tsx

@@ -184,7 +184,7 @@ function TestCredentials({selectedFaucet, translate}) {
                 setBalance, 
                 setSequence,
                 translate)
-            } className="btn btn-primary me-2 mb-2">
+            } className="btn btn-primary mr-2 mb-2">
               {`${translate('resources.dev-tools.faucet.cred-btn.part1', 'Generate ')}${selectedFaucet.shortName}${translate('resources.dev-tools.faucet.cred-btn.part2', ' credentials')}`}
           </button>
         </div>

scripts/analyze-css.js

@@ -1,166 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * CSS Analysis Script
- * 
- * Analyzes the compiled CSS bundle to identify:
- * - Total size and line count
- * - Bootstrap vs custom CSS breakdown
- * - Most common selectors and patterns
- * - Potential optimization opportunities
- */
-
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-const CSS_FILE = path.join(__dirname, '../static/css/devportal2024-v1.css');
-
-function analyzeCSS() {
-  console.log('🔍 Analyzing CSS Bundle...\n');
-
-  if (!fs.existsSync(CSS_FILE)) {
-    console.error(`❌ CSS file not found: ${CSS_FILE}`);
-    console.log('💡 Run "npm run build-css" first to generate the CSS bundle.');
-    process.exit(1);
-  }
-
-  const css = fs.readFileSync(CSS_FILE, 'utf-8');
-  const stats = fs.statSync(CSS_FILE);
-
-  // Basic stats
-  const lines = css.split('\n').length;
-  const sizeKB = (stats.size / 1024).toFixed(2);
-  const selectors = css.match(/[^{}]+(?=\{)/g) || [];
-  const uniqueSelectors = new Set(selectors.map(s => s.trim())).size;
-
-  console.log('📊 Bundle Statistics:');
-  console.log('━'.repeat(50));
-  console.log(`   Size:              ${sizeKB} KB`);
-  console.log(`   Lines:             ${lines.toLocaleString()}`);
-  console.log(`   Total Selectors:   ${selectors.length.toLocaleString()}`);
-  console.log(`   Unique Selectors:  ${uniqueSelectors.toLocaleString()}`);
-  console.log('');
-
-  // Bootstrap component detection
-  const bootstrapPatterns = {
-    'Grid System': /\.(container|row|col-)/g,
-    'Buttons': /\.btn-/g,
-    'Forms': /\.(form-control|form-select|form-check)/g,
-    'Cards': /\.card-/g,
-    'Navbar': /\.navbar-/g,
-    'Dropdown': /\.dropdown-/g,
-    'Modal': /\.modal-/g,
-    'Alert': /\.alert-/g,
-    'Badge': /\.badge-/g,
-    'Breadcrumb': /\.breadcrumb/g,
-    'Pagination': /\.page-/g,
-    'Accordion': /\.accordion/g,
-    'Carousel': /\.carousel/g,
-    'Tooltip': /\.tooltip/g,
-    'Popover': /\.popover/g,
-    'Toast': /\.toast/g,
-    'Spinner': /\.spinner-/g,
-  };
-
-  console.log('🎨 Bootstrap Component Usage:');
-  console.log('━'.repeat(50));
-  
-  const componentUsage = [];
-  for (const [component, pattern] of Object.entries(bootstrapPatterns)) {
-    const matches = css.match(pattern);
-    const count = matches ? matches.length : 0;
-    componentUsage.push({ component, count });
-  }
-
-  componentUsage.sort((a, b) => b.count - a.count);
-  componentUsage.forEach(({ component, count }) => {
-    const bar = '█'.repeat(Math.min(Math.floor(count / 10), 40));
-    console.log(`   ${component.padEnd(20)} ${count.toString().padStart(4)} ${bar}`);
-  });
-  console.log('');
-
-  // Custom classes analysis
-  const customPatterns = [
-    { name: 'Dev Tools', pattern: /\.(rpc-tool|websocket|code-tab)/g },
-    { name: 'Navigation', pattern: /\.(top-nav|side-nav|breadcrumb)/g },
-    { name: 'Content', pattern: /\.(content-|landing-|page-)/g },
-    { name: 'Cards', pattern: /\.(card-deck|project-card)/g },
-    { name: 'Video', pattern: /\.video-/g },
-    { name: 'Blog', pattern: /\.blog-/g },
-  ];
-
-  console.log('🎯 Custom Component Patterns:');
-  console.log('━'.repeat(50));
-  customPatterns.forEach(({ name, pattern }) => {
-    const matches = css.match(pattern);
-    const count = matches ? matches.length : 0;
-    if (count > 0) {
-      console.log(`   ${name.padEnd(20)} ${count.toString().padStart(4)}`);
-    }
-  });
-  console.log('');
-
-  // Optimization recommendations
-  console.log('💡 Optimization Recommendations:');
-  console.log('━'.repeat(50));
-  
-  const recommendations = [];
-  
-  // Check for unused Bootstrap components
-  const lowUsageComponents = componentUsage.filter(c => c.count < 5 && c.count > 0);
-  if (lowUsageComponents.length > 0) {
-    recommendations.push({
-      priority: 'HIGH',
-      message: `${lowUsageComponents.length} Bootstrap components with <5 usages detected`,
-      action: 'Consider manually importing only needed Bootstrap modules'
-    });
-  }
-
-  const noUsageComponents = componentUsage.filter(c => c.count === 0);
-  if (noUsageComponents.length > 0) {
-    recommendations.push({
-      priority: 'HIGH',
-      message: `${noUsageComponents.length} Bootstrap components with 0 usages detected`,
-      action: 'Remove unused components from Bootstrap import'
-    });
-  }
-
-  if (sizeKB > 200) {
-    recommendations.push({
-      priority: 'CRITICAL',
-      message: 'Bundle size exceeds 200KB',
-      action: 'Implement PurgeCSS to remove unused styles'
-    });
-  }
-
-  recommendations.push({
-    priority: 'MEDIUM',
-    message: 'No code splitting detected',
-    action: 'Consider splitting vendor CSS from custom styles'
-  });
-
-  recommendations.forEach(({ priority, message, action }) => {
-    const emoji = priority === 'CRITICAL' ? '🔴' : priority === 'HIGH' ? '🟡' : '🔵';
-    console.log(`   ${emoji} [${priority}] ${message}`);
-    console.log(`      → ${action}`);
-    console.log('');
-  });
-
-  // Estimate potential savings
-  const estimatedReduction = Math.round(parseFloat(sizeKB) * 0.75);
-  const estimatedFinal = Math.round(parseFloat(sizeKB) * 0.25);
-  
-  console.log('📈 Estimated Optimization Potential:');
-  console.log('━'.repeat(50));
-  console.log(`   Current Size:      ${sizeKB} KB`);
-  console.log(`   Potential Savings: ~${estimatedReduction} KB (75%)`);
-  console.log(`   Expected Size:     ~${estimatedFinal} KB`);
-  console.log('');
-}
-
-analyzeCSS();
-

shared/components/Button/Button.md

@@ -1,459 +0,0 @@
-# Button Component Documentation
-
-## Overview
-
-The Button component is a scalable, accessible button implementation following the XRPL Brand Design System (BDS). It supports three visual variants (Primary, Secondary, Tertiary) and two color themes (Green, Black), with comprehensive state management and smooth animations.
-
-## Features
-
-- **Three Variants**: Primary (solid), Secondary (outline), Tertiary (text-only)
-- **Two Color Themes**: Green (default) and Black
-- **Animated Arrow Icon**: Optional icon with smooth hover animations
-- **Full State Support**: Enabled, Hover, Focus, Active, and Disabled states
-- **Responsive Design**: Adaptive padding and spacing across breakpoints
-- **Accessibility**: WCAG compliant with keyboard navigation and screen reader support
-- **Smooth Animations**: 150ms transitions with custom bezier timing
-
-## Props API
-
-```typescript
-interface ButtonProps {
-  /** Button variant - determines visual style */
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  /** Color theme - green (default) or black */
-  color?: 'green' | 'black';
-  /** Button content/label */
-  children: React.ReactNode;
-  /** Click handler */
-  onClick?: () => void;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Button type attribute */
-  type?: 'button' | 'submit' | 'reset';
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether to show the arrow icon */
-  showIcon?: boolean;
-}
-```
-
-### Default Values
-
-- `variant`: `'primary'`
-- `color`: `'green'`
-- `disabled`: `false`
-- `type`: `'button'`
-- `className`: `''`
-- `showIcon`: `true`
-
-## Variants
-
-### Primary Button
-
-The Primary button is used for the main call-to-action on a page. It features a solid background that fills from bottom-to-top on hover.
-
-**Visual Characteristics:**
-- Solid background (Green 300 / Black)
-- High visual emphasis
-- Background color transitions on hover
-- Black text on green background, white text on black background
-
-**Usage:**
-```tsx
-<Button variant="primary" onClick={handleClick}>
-  Get Started
-</Button>
-```
-
-### Secondary Button
-
-The Secondary button is used for supporting actions. It features an outline style with a transparent background that fills on hover.
-
-**Visual Characteristics:**
-- Transparent background with 2px border
-- Medium visual emphasis
-- Background fills from bottom-to-top on hover
-- Green/Black text and border
-
-**Usage:**
-```tsx
-<Button variant="secondary" onClick={handleClick}>
-  Learn More
-</Button>
-```
-
-### Tertiary Button
-
-The Tertiary button is used for low-emphasis or contextual actions. It appears as text-only with optional underline on hover.
-
-**Visual Characteristics:**
-- Text-only, no background or border
-- Lowest visual emphasis
-- Underline appears on hover/focus
-- Different typography (Body R token vs Label R)
-
-**Usage:**
-```tsx
-<Button variant="tertiary" onClick={handleClick}>
-  View Details
-</Button>
-```
-
-## Color Themes
-
-### Green Theme (Default)
-
-The green theme uses the XRPL brand green colors:
-- **Primary**: Green 300 background (#21E46B), Green 200 hover (#70EE97)
-- **Secondary**: Green 400 text/border (#0DAA3E), Green 500 hover (#078139)
-- **Tertiary**: Green 400 text (#0DAA3E), Green 500 hover (#078139)
-
-### Black Theme
-
-The black theme provides an alternative color scheme:
-- **Primary**: Black background (#141414), 80% black hover
-- **Secondary**: Black text/border (#141414), 15% black hover fill
-- **Tertiary**: Black text (#141414)
-
-**Usage:**
-```tsx
-<Button variant="primary" color="black" onClick={handleClick}>
-  Dark Button
-</Button>
-```
-
-## States
-
-### Enabled State
-
-The default interactive state of the button. All variants display their base styling.
-
-### Hover State
-
-Triggered when the user hovers over the button with a mouse:
-- **Primary/Secondary**: Background fills from bottom-to-top
-- **Tertiary**: Underline appears, text color darkens
-- **All Variants**: Arrow icon line shrinks, gap increases (with icon)
-
-### Focus State
-
-Triggered when the button receives keyboard focus (Tab key):
-- Similar visual changes to hover state
-- Additional focus outline (2px border/outline)
-- Ensures keyboard accessibility
-
-### Active State
-
-Triggered when the button is being pressed:
-- Returns to default padding/gap
-- Background resets (for Primary/Secondary)
-- Maintains visual feedback during press
-
-### Disabled State
-
-When `disabled={true}`:
-- Icon is automatically hidden
-- Gray text and background (Primary) or border (Secondary)
-- Cursor changes to `not-allowed`
-- `pointer-events: none` prevents interaction
-- `aria-disabled` attribute set for screen readers
-
-**Usage:**
-```tsx
-<Button variant="primary" disabled>
-  Unavailable
-</Button>
-```
-
-## How It Works
-
-### Component Structure
-
-The Button component uses BEM (Block Element Modifier) naming convention with the `bds` namespace:
-
-- `.bds-btn` - Base button class
-- `.bds-btn--primary` - Primary variant modifier
-- `.bds-btn--secondary` - Secondary variant modifier
-- `.bds-btn--tertiary` - Tertiary variant modifier
-- `.bds-btn--green` - Green color theme (default)
-- `.bds-btn--black` - Black color theme
-- `.bds-btn--disabled` - Disabled state modifier
-- `.bds-btn--no-icon` - No icon modifier
-- `.bds-btn__label` - Label element
-- `.bds-btn__icon` - Icon container
-- `.bds-btn__icon-line` - Arrow horizontal line
-- `.bds-btn__icon-chevron` - Arrow chevron
-
-### Background Animation
-
-Primary and Secondary variants use a shared animation pattern:
-
-1. **Pseudo-element (`::before`)**: Creates the hover background fill
-2. **Transform Origin**: Set to `bottom center` for bottom-to-top fill
-3. **Initial State**: `scaleY(0)` - background hidden
-4. **Hover/Focus**: `scaleY(1)` - background fills from bottom
-5. **Active**: `scaleY(0)` - background resets during press
-
-This creates a smooth, directional fill animation that feels natural and responsive.
-
-### Arrow Icon Animation
-
-The arrow icon consists of two parts:
-1. **Horizontal Line**: Shrinks from right to left (`scaleX(0)`) on hover/focus
-2. **Chevron**: Stays visible, shifts right via increased gap
-
-The gap between label and icon increases on hover/focus:
-- **Default**: 16px (desktop), 16px (mobile)
-- **Hover/Focus**: 22px (desktop), 21px (mobile)
-
-This creates the illusion of the arrow "moving forward" as the line disappears.
-
-### Padding Adjustments
-
-On hover/focus, padding adjusts to accommodate the increased gap:
-- **Primary**: `8px 19px 8px 20px` → `8px 13px 8px 20px` (desktop)
-- **Secondary**: `6px 17px 6px 18px` → `6px 11px 6px 18px` (desktop)
-- **Tertiary**: `8px 20px` → `8px 14px 8px 20px` (desktop)
-
-These adjustments maintain visual balance while allowing the icon animation to work smoothly.
-
-### Responsive Behavior
-
-The component adapts to screen size at the `1023px` breakpoint:
-
-**Desktop (≥1024px):**
-- Larger padding values
-- 22px gap on hover/focus
-
-**Tablet/Mobile (≤1023px):**
-- Reduced padding values
-- 21px gap on hover/focus
-
-All transitions remain smooth across breakpoints.
-
-## Typography
-
-### Primary & Secondary Variants
-- **Font**: Booton, sans-serif
-- **Size**: 16px (Label R token)
-- **Weight**: 400
-- **Line Height**: 23.2px
-- **Letter Spacing**: 0px
-
-### Tertiary Variant
-- **Font**: Booton, sans-serif
-- **Size**: 18px (Body R token)
-- **Weight**: 400
-- **Line Height**: 26.1px
-- **Letter Spacing**: -0.5px
-
-## Spacing & Layout
-
-- **Border Radius**: 100px (fully rounded)
-- **Max Height**: 40px
-- **Icon Size**: 15px × 14px
-- **Transitions**: 150ms with `cubic-bezier(0.98, 0.12, 0.12, 0.98)`
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { Button } from 'shared/components/Button';
-
-// Primary button (default)
-<Button onClick={handleClick}>
-  Get Started
-</Button>
-
-// Secondary button
-<Button variant="secondary" onClick={handleClick}>
-  Learn More
-</Button>
-
-// Tertiary button
-<Button variant="tertiary" onClick={handleClick}>
-  View Details
-</Button>
-```
-
-### Form Integration
-
-```tsx
-<form onSubmit={handleSubmit}>
-  <Button variant="primary" type="submit">
-    Submit
-  </Button>
-  <Button variant="tertiary" type="reset">
-    Reset
-  </Button>
-  <Button variant="tertiary" type="button" onClick={handleCancel}>
-    Cancel
-  </Button>
-</form>
-```
-
-### Without Icon
-
-```tsx
-<Button variant="primary" showIcon={false} onClick={handleClick}>
-  No Arrow
-</Button>
-```
-
-### Disabled State
-
-```tsx
-<Button variant="primary" disabled>
-  Unavailable
-</Button>
-```
-
-### Color Themes
-
-```tsx
-{/* Green theme (default) */}
-<Button variant="primary" color="green" onClick={handleClick}>
-  Green Button
-</Button>
-
-{/* Black theme */}
-<Button variant="primary" color="black" onClick={handleClick}>
-  Black Button
-</Button>
-```
-
-### Visual Hierarchy
-
-```tsx
-{/* Use variants to create clear visual hierarchy */}
-<Button variant="primary" onClick={handlePrimaryAction}>
-  Main Action
-</Button>
-<Button variant="secondary" onClick={handleSecondaryAction}>
-  Secondary Action
-</Button>
-<Button variant="tertiary" onClick={handleTertiaryAction}>
-  Tertiary Action
-</Button>
-```
-
-## Accessibility
-
-### Keyboard Navigation
-
-- **Tab**: Focus next button
-- **Shift+Tab**: Focus previous button
-- **Enter/Space**: Activate button
-- **Focus Indicator**: Visible outline/border (2px)
-- **Disabled buttons**: Not focusable
-
-### Screen Reader Support
-
-- Semantic `<button>` element
-- Button label announced
-- `aria-disabled` attribute for disabled state
-- Icon marked with `aria-hidden="true"`
-
-### Color Contrast
-
-All variants meet WCAG AA standards:
-- **Primary**: Black on Green 300 = sufficient contrast
-- **Secondary/Tertiary**: Green 400/500 on White = 4.52:1 / 5.12:1
-- **Disabled**: Gray 400/500 indicates non-interactive state
-
-### Focus Management
-
-- Focus outline appears on keyboard navigation (`:focus-visible`)
-- Focus styles match hover styles for consistency
-- Square corners on Tertiary focus outline for better visibility
-
-## Design Tokens
-
-The component uses design tokens from the XRPL Brand Design System:
-
-### Colors
-- `$green-100` through `$green-500`
-- `$gray-200`, `$gray-400`, `$gray-500`
-- `$white`
-- Neutral black (`#141414`)
-
-### Spacing
-- Border radius: `100px`
-- Focus border width: `2px`
-- Responsive breakpoint: `1023px`
-
-### Motion
-- Transition duration: `150ms`
-- Timing function: `cubic-bezier(0.98, 0.12, 0.12, 0.98)`
-
-## Best Practices
-
-1. **Use Primary for main actions**: Reserve primary buttons for the most important action on a page
-2. **Use Secondary for supporting actions**: Use secondary buttons for actions that support the primary action
-3. **Use Tertiary for low-emphasis actions**: Use tertiary buttons for cancel, skip, or less important actions
-4. **Maintain visual hierarchy**: Don't use multiple primary buttons on the same page
-5. **Provide clear labels**: Button text should clearly indicate the action
-6. **Handle disabled states**: Always provide feedback when actions are unavailable
-7. **Test keyboard navigation**: Ensure all buttons are accessible via keyboard
-8. **Consider context**: Choose color theme based on background and design context
-
-## Implementation Details
-
-### Class Name Generation
-
-The component builds class names dynamically:
-
-```typescript
-const classNames = [
-  'bds-btn',
-  `bds-btn--${variant}`,
-  `bds-btn--${color}`,
-  disabled ? 'bds-btn--disabled' : '',
-  !shouldShowIcon ? 'bds-btn--no-icon' : '',
-  className,
-]
-  .filter(Boolean)
-  .join(' ');
-```
-
-### Icon Visibility Logic
-
-The icon is automatically hidden when:
-- `showIcon={false}` is passed
-- `disabled={true}` is set
-
-This ensures disabled buttons don't show interactive elements.
-
-### State Management
-
-The component manages states through CSS classes and props:
-- **Disabled**: Controlled via `disabled` prop and `aria-disabled` attribute
-- **Hover/Focus**: Handled by CSS `:hover` and `:focus-visible` pseudo-classes
-- **Active**: Handled by CSS `:active` pseudo-class
-
-## Browser Support
-
-The component uses modern CSS features:
-- CSS Grid/Flexbox (widely supported)
-- `:focus-visible` (supported in modern browsers)
-- CSS transforms and transitions (widely supported)
-- CSS custom properties (supported in modern browsers)
-
-For older browser support, consider polyfills or fallbacks as needed.
-
-## Related Components
-
-- See showcase pages for interactive examples:
-  - `about/button-showcase-tertiary.page.tsx`
-  - Other variant showcase pages
-
-## File Structure
-
-```
-shared/components/Button/
-├── Button.tsx          # Component implementation
-├── Button.scss        # Component styles
-├── Button.md          # This documentation
-└── index.ts           # Exports
-```

shared/components/Button/Button.tsx

@@ -1,137 +0,0 @@
-import React from 'react';
-
-export interface ButtonProps {
-  /** Button variant - determines visual style */
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  /** Color theme - green (default) or black */
-  color?: 'green' | 'black';
-  /** Button content/label */
-  children: React.ReactNode;
-  /** Click handler */
-  onClick?: () => void;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Button type attribute */
-  type?: 'button' | 'submit' | 'reset';
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether to show the arrow icon */
-  showIcon?: boolean;
-  /** Accessibility label - defaults to button text if not provided */
-  ariaLabel?: string;
-}
-
-/**
- * Animated Arrow Icon Component
- * The horizontal line shrinks from left to right on hover/focus,
- * while the chevron shifts right via the gap change.
- */
-const ArrowIcon: React.FC = () => (
-  <svg
-    className="bds-btn__icon"
-    width="15"
-    height="14"
-    viewBox="0 0 15 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-  >
-    {/* Horizontal line - shrinks on hover */}
-    <line
-      className="bds-btn__icon-line"
-      x1="0"
-      y1="7"
-      x2="14"
-      y2="7"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      strokeMiterlimit="10"
-    />
-    {/* Chevron - stays visible */}
-    <path
-      className="bds-btn__icon-chevron"
-      d="M8.16755 1.16743L14.0005 7.00038L8.16755 12.8333"
-      stroke="currentColor"
-      strokeWidth="1.3"
-      strokeMiterlimit="10"
-      fill="none"
-    />
-  </svg>
-);
-
-/**
- * BDS Button Component
- * 
- * A scalable button component following the XRPL Brand Design System.
- * Supports Primary, Secondary, and Tertiary variants with green (default) or black color themes.
- * 
- * @example
- * <Button variant="primary" onClick={handleClick}>Get Started</Button>
- * <Button variant="secondary" onClick={handleClick}>Learn More</Button>
- * <Button variant="tertiary" onClick={handleClick}>View Details</Button>
- * <Button variant="primary" color="black" onClick={handleClick}>Dark Button</Button>
- */
-/**
- * Helper function to extract text content from ReactNode
- */
-const getTextFromChildren = (children: React.ReactNode): string => {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return String(children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(getTextFromChildren).join('');
-  }
-  if (React.isValidElement(children)) {
-    const props = children.props as { children?: React.ReactNode };
-    if (props.children) {
-      return getTextFromChildren(props.children);
-    }
-  }
-  return '';
-};
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary',
-  color = 'green',
-  children,
-  onClick,
-  disabled = false,
-  type = 'button',
-  className = '',
-  showIcon = true,
-  ariaLabel,
-}) => {
-  // Hide icon when disabled (per design spec)
-  const shouldShowIcon = showIcon && !disabled;
-
-  // Default ariaLabel to button text if not provided
-  const buttonAriaLabel = ariaLabel || getTextFromChildren(children);
-
-  // Build class names using BEM with bds namespace
-  const classNames = [
-    'bds-btn',
-    `bds-btn--${variant}`,
-    `bds-btn--${color}`,
-    disabled ? 'bds-btn--disabled' : '',
-    !shouldShowIcon ? 'bds-btn--no-icon' : '',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button
-      type={type}
-      className={classNames}
-      onClick={onClick}
-      disabled={disabled}
-      aria-disabled={disabled}
-      aria-label={buttonAriaLabel}
-    >
-      <span className="bds-btn__label">{children}</span>
-      {shouldShowIcon && <ArrowIcon />}
-    </button>
-  );
-};
-
-export default Button;

shared/components/Button/index.ts

@@ -1,2 +0,0 @@
-export { Button, type ButtonProps } from './Button';
-export { default } from './Button';

shared/components/Divider/Divider.md

@@ -1,350 +0,0 @@
-# Divider Component Documentation
-
-## Overview
-
-The Divider component is a visual separator that creates clear boundaries between content sections, elements, or groups. Following the XRPL Brand Design System (BDS), it supports two orientations, three stroke weights, and three color variants to adapt to different visual contexts and hierarchy needs.
-
-## Features
-
-- **Two Orientations**: Horizontal (default) and Vertical
-- **Three Stroke Weights**: Thin (0.5px), Regular (1px), Strong (2px)
-- **Three Color Variants**: Gray (default), Black, Green
-- **Theme Support**: Automatic light/dark mode adaptation
-- **Accessibility**: Configurable for decorative or semantic use
-- **Flexible Sizing**: Inherits width/height from parent container
-
-## Props API
-
-```typescript
-interface DividerProps {
-  /** Divider orientation - horizontal separates vertical content, vertical separates horizontal content */
-  orientation?: 'horizontal' | 'vertical';
-  /** Stroke weight - controls visual thickness */
-  weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether the divider is purely decorative (hides from screen readers) */
-  decorative?: boolean;
-}
-```
-
-### Default Values
-
-- `orientation`: `'horizontal'`
-- `weight`: `'regular'`
-- `color`: `'gray'`
-- `className`: `''`
-- `decorative`: `true`
-
-## Orientations
-
-### Horizontal Divider
-
-Horizontal dividers extend left to right to separate vertically stacked content. They span the full width of their container by default.
-
-**Common Uses:**
-- Between content blocks or sections
-- Separating list items
-- Within cards to divide content areas
-
-**Usage:**
-```tsx
-<Divider orientation="horizontal" />
-// or simply (horizontal is default)
-<Divider />
-```
-
-### Vertical Divider
-
-Vertical dividers extend top to bottom to separate horizontally aligned content. They inherit height from their parent container.
-
-**Common Uses:**
-- Between columns in a layout
-- Separating navigation items
-- Within toolbars or action bars
-
-**Usage:**
-```tsx
-<Divider orientation="vertical" />
-```
-
-**Note:** Vertical dividers require a parent container with a defined height.
-
-## Stroke Weights
-
-### Thin (0.5px)
-
-The lightest weight for subtle, unobtrusive separation. Use when content is closely related but needs minimal visual distinction.
-
-**Best For:**
-- Within cards or small content areas
-- Between tightly grouped elements
-- Dense layouts where heavier dividers would feel cluttered
-
-**Usage:**
-```tsx
-<Divider weight="thin" />
-```
-
-### Regular (1px) - Default
-
-The standard weight for most use cases. Provides clear separation without dominating the visual hierarchy.
-
-**Best For:**
-- Most layout and section separations
-- Between content blocks
-- General-purpose dividers
-
-**Usage:**
-```tsx
-<Divider weight="regular" />
-// or simply (regular is default)
-<Divider />
-```
-
-### Strong (2px)
-
-The heaviest weight for maximum emphasis. Use sparingly to highlight major transitions or boundaries.
-
-**Best For:**
-- Major section breaks
-- Key boundaries between distinct content areas
-- Emphasizing important transitions
-
-**Usage:**
-```tsx
-<Divider weight="strong" />
-```
-
-## Color Variants
-
-### Gray (Default)
-
-Neutral, subtle separation that works in most contexts without drawing attention.
-
-**Best For:**
-- Most separations
-- Subtle visual breaks
-- Backgrounds where you don't want the divider to stand out
-
-**Usage:**
-```tsx
-<Divider color="gray" />
-// or simply (gray is default)
-<Divider />
-```
-
-### Black
-
-High-contrast separation for maximum visibility. In dark mode, this renders as white for proper contrast.
-
-**Best For:**
-- When stronger contrast is needed
-- Light backgrounds where gray may be too subtle
-- Important structural boundaries
-
-**Usage:**
-```tsx
-<Divider color="black" />
-```
-
-### Green
-
-Brand-colored separation that reinforces XRPL identity or indicates active/important areas.
-
-**Best For:**
-- Highlighting branded sections
-- Active or selected states
-- Drawing attention to specific content areas
-
-**Usage:**
-```tsx
-<Divider color="green" />
-```
-
-## When to Use
-
-Use a Divider to:
-
-- **Separate content sections** - Create clear boundaries between distinct content groups
-- **Organize lists** - Divide list items for better scanability
-- **Structure cards** - Separate header, body, and footer areas within cards
-- **Define columns** - Visually separate side-by-side content
-- **Indicate transitions** - Mark boundaries between zones of information
-
-## When NOT to Use
-
-Avoid using a Divider when:
-
-- **Spacing alone is sufficient** - If whitespace provides enough separation, skip the divider
-- **Backgrounds provide contrast** - Different background colors may eliminate the need for dividers
-- **It adds clutter** - In minimal designs, too many dividers can distract from content
-- **To compensate for poor spacing** - Dividers should enhance, not replace, proper layout structure
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { Divider } from 'shared/components/Divider';
-
-// Default horizontal divider
-<Divider />
-
-// Vertical divider
-<Divider orientation="vertical" />
-
-// Strong green divider for emphasis
-<Divider weight="strong" color="green" />
-```
-
-### List Separation
-
-```tsx
-<div className="list">
-  <div className="list-item">Item One</div>
-  <Divider weight="thin" />
-  <div className="list-item">Item Two</div>
-  <Divider weight="thin" />
-  <div className="list-item">Item Three</div>
-</div>
-```
-
-### Card Content Separation
-
-```tsx
-<div className="card">
-  <div className="card-header">
-    <h3>Card Title</h3>
-  </div>
-  <Divider weight="thin" color="gray" />
-  <div className="card-body">
-    <p>Card content goes here...</p>
-  </div>
-  <Divider weight="thin" color="gray" />
-  <div className="card-footer">
-    <button>Action</button>
-  </div>
-</div>
-```
-
-### Column Separation
-
-```tsx
-<div className="d-flex align-items-stretch" style={{ height: '200px' }}>
-  <div className="column">Column One</div>
-  <Divider orientation="vertical" color="gray" />
-  <div className="column">Column Two</div>
-  <Divider orientation="vertical" color="gray" />
-  <div className="column">Column Three</div>
-</div>
-```
-
-### Navigation Separation
-
-```tsx
-<nav className="d-flex align-items-center" style={{ height: '24px', gap: '1rem' }}>
-  <a href="/">Home</a>
-  <Divider orientation="vertical" weight="thin" />
-  <a href="/docs">Documentation</a>
-  <Divider orientation="vertical" weight="thin" />
-  <a href="/api">API</a>
-</nav>
-```
-
-### Major Section Break
-
-```tsx
-<section>
-  <h2>Primary Content</h2>
-  <p>Main content area...</p>
-</section>
-
-<Divider weight="strong" color="green" />
-
-<section>
-  <h2>Secondary Content</h2>
-  <p>Supporting content area...</p>
-</section>
-```
-
-### Semantic Divider (Accessible)
-
-```tsx
-// For dividers that should be announced by screen readers
-<Divider decorative={false} />
-```
-
-## Accessibility
-
-### Decorative vs Semantic
-
-By default, dividers are decorative (`decorative={true}`) and hidden from screen readers:
-- Sets `aria-hidden="true"`
-- Uses `role="presentation"`
-
-For semantic dividers that should be announced:
-- Set `decorative={false}`
-- Adds `role="separator"`
-- Includes `aria-orientation` attribute
-
-### Keyboard Navigation
-
-Dividers are non-interactive elements and do not receive focus.
-
-### Color Contrast
-
-- **Gray variant**: Meets contrast requirements on dark backgrounds; may need weight adjustment on light backgrounds
-- **Black variant**: High contrast in both themes (renders as white in dark mode)
-- **Green variant**: Brand color provides good contrast in both themes
-
-## Best Practices
-
-1. **Use consistent weights** - Stick to one weight within the same context (e.g., all list dividers should be the same weight)
-
-2. **Match hierarchy to importance** - Use thinner dividers for minor separations, stronger for major breaks
-
-3. **Don't overuse dividers** - If every element has a divider, none stand out; use sparingly for maximum effect
-
-4. **Consider spacing first** - Before adding a divider, try adjusting margins or padding
-
-5. **Maintain alignment** - Dividers should align with content; avoid full-width dividers in padded containers
-
-6. **Use color purposefully** - Reserve green for branded emphasis; gray for most cases; black for high contrast needs
-
-7. **Test in both themes** - Verify dividers are visible and appropriate in both light and dark modes
-
-8. **Parent container setup** - For vertical dividers, ensure the parent has `display: flex`, `align-items: stretch`, and a defined height
-
-## Theme Support
-
-The component automatically adapts colors for light and dark modes:
-
-| Color | Dark Mode (Default) | Light Mode |
-|-------|---------------------|------------|
-| Gray | `$gray-600` (#454549) | `$gray-300` (#C1C1C2) |
-| Black | `$white` (#FFFFFF) | `$gray-900` (#111112) |
-| Green | `$green-300` (#21E46B) | `$green-300` (#21E46B) |
-
-## Related Components
-
-- **Card** - Often uses horizontal dividers between sections
-- **List** - May use dividers between list items
-- **Navigation** - Vertical dividers separate nav groups
-- **Form** - Dividers separate form sections
-
-## Showcase
-
-See the interactive showcase at `/about/divider-showcase` for live examples of all variants, weights, colors, and real-world usage patterns.
-
-## File Structure
-
-```
-shared/components/Divider/
-├── Divider.tsx        # Component implementation
-├── Divider.scss       # Component styles
-├── Divider.md         # This documentation
-└── index.ts           # Exports
-```

shared/components/Divider/Divider.scss

@@ -1,165 +0,0 @@
-// BDS Divider Component Styles
-// Brand Design System - Visual separator component
-//
-// Naming Convention: BEM with 'bds' namespace
-// .bds-divider              - Base divider (removes default hr styling)
-// .bds-divider--horizontal  - Horizontal orientation (default)
-// .bds-divider--vertical    - Vertical orientation
-// .bds-divider--thin        - Thin stroke weight (0.5px)
-// .bds-divider--regular     - Regular stroke weight (1px, default)
-// .bds-divider--strong      - Strong stroke weight (2px)
-// .bds-divider--gray        - Gray color variant (default)
-// .bds-divider--black       - Black color variant
-// .bds-divider--green       - Green color variant
-//
-// Note: This file is imported within xrpl.scss after Bootstrap and project
-// variables are loaded, so $grid-breakpoints, colors, and mixins are available.
-
-// =============================================================================
-// Design Tokens
-// =============================================================================
-
-// Stroke Weights (from Figma design spec)
-$bds-divider-thin: 0.5px;
-$bds-divider-regular: 1px;
-$bds-divider-strong: 2px;
-
-// Colors - Dark Mode (default, mapped from _colors.scss)
-// Site defaults to dark mode, uses html.light for light mode
-$bds-divider-gray-dark: $gray-600;    // #454549 - visible on dark backgrounds
-$bds-divider-black-dark: $white;      // #FFFFFF - inverted for dark mode
-$bds-divider-green-dark: $green-300;  // #21E46B - brand color stays same
-
-// Colors - Light Mode (mapped from _colors.scss)
-// Figma Neutral300 (#CAD4DF) → closest match: $gray-300
-// Figma Black (#141414) → closest match: $gray-900
-// Figma Green 300 (#21E46B) → exact match: $green-300
-$bds-divider-gray-light: $gray-300;   // #C1C1C2
-$bds-divider-black-light: $gray-900;  // #111112
-$bds-divider-green-light: $green-300; // #21E46B
-
-// =============================================================================
-// Base Divider Styles
-// =============================================================================
-
-// Use more specific selector to override Bootstrap hr styles
-// hr.bds-divider has higher specificity than just hr
-hr.bds-divider,
-.bds-divider {
-  // Reset default <hr> styles and override Bootstrap/global hr styles
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-top: none;
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
-  background: transparent;
-  opacity: 1; // Override Bootstrap's hr opacity: 0.25
-  color: transparent; // Override inherited color
-  
-  // Default to gray color (dark mode default)
-  background-color: $bds-divider-gray-dark;
-}
-
-// =============================================================================
-// Orientation Modifiers
-// =============================================================================
-
-// Horizontal divider - spans full width, uses height for stroke
-.bds-divider--horizontal {
-  display: block;
-  width: 100%;
-  min-width: 100%;
-  
-  // Height set by weight modifier
-}
-
-// Vertical divider - spans full height, uses width for stroke
-.bds-divider--vertical {
-  display: inline-block;
-  height: 100%;
-  min-height: 100%;
-  vertical-align: middle;
-  
-  // Width set by weight modifier
-}
-
-// =============================================================================
-// Weight Modifiers
-// =============================================================================
-
-// Thin weight (0.5px)
-.bds-divider--thin {
-  &.bds-divider--horizontal {
-    height: $bds-divider-thin;
-  }
-  
-  &.bds-divider--vertical {
-    width: $bds-divider-thin;
-  }
-}
-
-// Regular weight (1px) - default
-.bds-divider--regular {
-  &.bds-divider--horizontal {
-    height: $bds-divider-regular;
-  }
-  
-  &.bds-divider--vertical {
-    width: $bds-divider-regular;
-  }
-}
-
-// Strong weight (2px)
-.bds-divider--strong {
-  &.bds-divider--horizontal {
-    height: $bds-divider-strong;
-  }
-  
-  &.bds-divider--vertical {
-    width: $bds-divider-strong;
-  }
-}
-
-// =============================================================================
-// Color Modifiers - Dark Mode (Default)
-// =============================================================================
-// Site defaults to dark mode, so base styles are for dark backgrounds
-
-// Gray variant (default) - subtle, neutral separation
-.bds-divider--gray {
-  background-color: $bds-divider-gray-dark;
-}
-
-// Black variant - uses white for contrast on dark backgrounds
-.bds-divider--black {
-  background-color: $bds-divider-black-dark;
-}
-
-// Green variant - branded, accent separation
-.bds-divider--green {
-  background-color: $bds-divider-green-dark;
-}
-
-// =============================================================================
-// Light Mode Styles
-// =============================================================================
-// Site uses html.light class for light mode
-
-html.light {
-  // Gray variant in light mode
-  .bds-divider--gray {
-    background-color: $bds-divider-gray-light;
-  }
-  
-  // Black variant in light mode - use dark color for contrast
-  .bds-divider--black {
-    background-color: $bds-divider-black-light;
-  }
-  
-  // Green variant stays the same in light mode (brand color)
-  .bds-divider--green {
-    background-color: $bds-divider-green-light;
-  }
-}

shared/components/Divider/Divider.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-export interface DividerProps {
-  /** Divider orientation - horizontal separates vertical content, vertical separates horizontal content */
-  orientation?: 'horizontal' | 'vertical';
-  /** Stroke weight - controls visual thickness */
-  weight?: 'thin' | 'regular' | 'strong';
-  /** Color variant - gray (default), black for stronger contrast, green for brand emphasis */
-  color?: 'gray' | 'black' | 'green';
-  /** Additional CSS classes */
-  className?: string;
-  /** Whether the divider is purely decorative (hides from screen readers) */
-  decorative?: boolean;
-}
-
-/**
- * BDS Divider Component
- * 
- * A visual separator component following the XRPL Brand Design System.
- * Provides clear visual separation between sections, elements, or content groups.
- * 
- * @example
- * // Horizontal divider (default)
- * <Divider />
- * 
- * // Vertical divider between columns
- * <Divider orientation="vertical" />
- * 
- * // Strong green divider for emphasis
- * <Divider weight="strong" color="green" />
- * 
- * // Thin black divider
- * <Divider weight="thin" color="black" />
- */
-export const Divider: React.FC<DividerProps> = ({
-  orientation = 'horizontal',
-  weight = 'regular',
-  color = 'gray',
-  className = '',
-  decorative = true,
-}) => {
-  // Build class names using BEM with bds namespace
-  const classNames = [
-    'bds-divider',
-    `bds-divider--${orientation}`,
-    `bds-divider--${weight}`,
-    `bds-divider--${color}`,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <hr
-      className={classNames}
-      aria-hidden={decorative}
-      role={decorative ? 'presentation' : 'separator'}
-      aria-orientation={!decorative ? orientation : undefined}
-    />
-  );
-};
-
-export default Divider;

shared/components/Divider/index.ts

@@ -1,2 +0,0 @@
-export { Divider, type DividerProps } from './Divider';
-export { default } from './Divider';

shared/components/Link/Link.md

@@ -1,395 +0,0 @@
-# Link Component
-
-A comprehensive, accessible link component from the XRPL.org Brand Design System (BDS). Supports multiple variants, sizes, and automatic theme-aware color states with animated arrow icons.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Basic Usage](#basic-usage)
-- [Props API](#props-api)
-- [Variants](#variants)
-- [Sizes](#sizes)
-- [Color States](#color-states)
-- [Icon Animations](#icon-animations)
-- [Accessibility](#accessibility)
-- [Best Practices](#best-practices)
-- [Examples](#examples)
-- [Related Components](#related-components)
-
----
-
-## Installation
-
-```tsx
-import { Link } from 'shared/components/Link';
-// or
-import { Link } from 'shared/components/Link/Link';
-```
-
----
-
-## Basic Usage
-
-```tsx
-// Internal link (default)
-<Link href="/docs">View Documentation</Link>
-
-// External link
-<Link href="https://example.com" variant="external" target="_blank" rel="noopener noreferrer">
-  External Resource
-</Link>
-
-// Inline link (no icon)
-<p>
-  Learn more about <Link href="/about" variant="inline">our mission</Link>.
-</p>
-```
-
----
-
-## Props API
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | **required** | The URL the link points to |
-| `variant` | `'internal' \| 'external' \| 'inline'` | `'internal'` | Link variant determining icon and behavior |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the link text and icon |
-| `icon` | `'arrow' \| 'external' \| null` | `null` | Override icon type (auto-determined by variant if `null`) |
-| `disabled` | `boolean` | `false` | Disables the link, preventing navigation |
-| `children` | `React.ReactNode` | **required** | Link text content |
-| `className` | `string` | - | Additional CSS classes |
-| `...rest` | `AnchorHTMLAttributes` | - | All standard anchor attributes (`target`, `rel`, etc.) |
-
----
-
-## Variants
-
-### Internal (Default)
-
-For navigation within the same website. Displays a horizontal arrow (→) that animates to a chevron (>) on hover.
-
-```tsx
-<Link href="/docs" variant="internal">
-  Internal Documentation
-</Link>
-```
-
-### External
-
-For links to external websites. Displays a diagonal arrow with corner bracket (↗) that animates on hover. Always use with `target="_blank"` and `rel="noopener noreferrer"` for security.
-
-```tsx
-<Link 
-  href="https://github.com/XRPLF" 
-  variant="external" 
-  target="_blank" 
-  rel="noopener noreferrer"
->
-  GitHub Repository
-</Link>
-```
-
-### Inline
-
-For links embedded within body text. No icon is displayed, making the link flow naturally within paragraphs.
-
-```tsx
-<p>
-  The XRP Ledger is a decentralized blockchain. You can{" "}
-  <Link href="/docs" variant="inline">read the documentation</Link>{" "}
-  to learn more.
-</p>
-```
-
----
-
-## Sizes
-
-| Size | Font Size | Line Height | Icon Gap |
-|------|-----------|-------------|----------|
-| `small` | 14px | 1.5 | 6px |
-| `medium` | 16px | 1.5 | 8px |
-| `large` | 20px | 1.5 | 10px |
-
-```tsx
-<Link href="/docs" size="small">Small Link</Link>
-<Link href="/docs" size="medium">Medium Link</Link>
-<Link href="/docs" size="large">Large Link</Link>
-```
-
----
-
-## Color States
-
-The Link component automatically handles color states based on the current theme. Colors are applied via CSS and follow the Figma design specifications.
-
-### Light Mode
-
-| State | Color Token | Hex Value | Additional Styles |
-|-------|-------------|-----------|-------------------|
-| **Enabled** | Green 400 | `#0DAA3E` | No underline |
-| **Hover** | Green 500 | `#078139` | Underline, arrow animates |
-| **Focus** | Green 500 | `#078139` | Underline, black outline |
-| **Active** | Green 400 | `#0DAA3E` | Underline |
-| **Visited** | Lilac 400 | `#7649E3` | No underline |
-| **Disabled** | Gray 400 | `#A2A2A4` | No underline, no pointer |
-
-### Dark Mode
-
-| State | Color Token | Hex Value | Additional Styles |
-|-------|-------------|-----------|-------------------|
-| **Enabled** | Green 300 | `#21E46B` | No underline |
-| **Hover** | Green 200 | `#70EE97` | Underline, arrow animates |
-| **Focus** | Green 200 | `#70EE97` | Underline, white outline |
-| **Active** | Green 300 | `#21E46B` | Underline |
-| **Visited** | Lilac 300 | `#C0A7FF` | No underline |
-| **Disabled** | Gray 500 | `#838386` | No underline, no pointer |
-
-### Focus Outline
-
-- **Light Mode**: 2px solid black (`#000000`)
-- **Dark Mode**: 2px solid white (`#FFFFFF`)
-
----
-
-## Icon Animations
-
-Both internal and external arrow icons feature a smooth animation on hover/focus:
-
-- **Animation Duration**: 150ms
-- **Timing Function**: `cubic-bezier(0.98, 0.12, 0.12, 0.98)`
-
-### Internal Arrow Animation
-
-The horizontal line of the arrow (→) shrinks from left to right, revealing a chevron shape (>).
-
-### External Arrow Animation
-
-The diagonal line of the external arrow (↗) scales down toward the top-right corner, leaving just the corner bracket.
-
-### Disabled State
-
-When disabled, the animation is disabled and the icon opacity is reduced to 50%.
-
----
-
-## Accessibility
-
-The Link component follows accessibility best practices:
-
-### Keyboard Navigation
-
-- Focusable via Tab key
-- Activatable via Enter key
-- Clear focus indicator with high-contrast outline
-
-### ARIA Attributes
-
-- `aria-disabled="true"` is applied when the link is disabled
-- Icons are marked with `aria-hidden="true"` to prevent screen reader announcement
-
-### Best Practices
-
-1. **Use descriptive link text** - Avoid "click here" or "read more"
-2. **External links** - Consider adding "(opens in new tab)" for screen readers
-3. **Disabled state** - Provide context for why the link is disabled
-
-```tsx
-// Good - Descriptive link text
-<Link href="/pricing">View pricing plans</Link>
-
-// Bad - Non-descriptive
-<Link href="/pricing">Click here</Link>
-
-// External with screen reader context
-<Link 
-  href="https://example.com" 
-  variant="external" 
-  target="_blank"
-  rel="noopener noreferrer"
-  aria-label="GitHub Repository (opens in new tab)"
->
-  GitHub Repository
-</Link>
-```
-
----
-
-## Best Practices
-
-### Do's
-
-1. **Use appropriate variants**
-   ```tsx
-   // Internal navigation
-   <Link href="/about" variant="internal">About Us</Link>
-   
-   // External sites
-   <Link href="https://github.com" variant="external" target="_blank" rel="noopener noreferrer">
-     GitHub
-   </Link>
-   
-   // Within paragraphs
-   <p>Learn about <Link href="/xrp" variant="inline">XRP</Link> today.</p>
-   ```
-
-2. **Match size to context**
-   ```tsx
-   // Navigation/CTA - use large
-   <Link href="/get-started" size="large">Get Started</Link>
-   
-   // Body content - use medium
-   <Link href="/docs" size="medium">Documentation</Link>
-   
-   // Footnotes/captions - use small
-   <Link href="/terms" size="small">Terms of Service</Link>
-   ```
-
-3. **Always use security attributes for external links**
-   ```tsx
-   <Link 
-     href="https://external-site.com" 
-     variant="external"
-     target="_blank"
-     rel="noopener noreferrer"
-   >
-     External Site
-   </Link>
-   ```
-
-### Don'ts
-
-1. **Don't use disabled for navigation prevention** - Use proper routing instead
-   ```tsx
-   // Bad - Using disabled for auth gate
-   <Link href="/dashboard" disabled={!isAuthenticated}>Dashboard</Link>
-   
-   // Good - Handle in onClick or router
-   <Link href="/dashboard" onClick={handleAuthCheck}>Dashboard</Link>
-   ```
-
-2. **Don't mix variants inappropriately**
-   ```tsx
-   // Bad - External link with internal variant
-   <Link href="https://example.com" variant="internal">External Site</Link>
-   
-   // Good
-   <Link href="https://example.com" variant="external">External Site</Link>
-   ```
-
-3. **Don't use inline variant for standalone links**
-   ```tsx
-   // Bad - Standalone inline link
-   <Link href="/docs" variant="inline">Documentation</Link>
-   
-   // Good - Use internal for standalone
-   <Link href="/docs" variant="internal">Documentation</Link>
-   ```
-
----
-
-## Examples
-
-### Navigation Menu
-
-```tsx
-<nav className="d-flex flex-column gap-3">
-  <Link href="/docs" size="medium">Documentation</Link>
-  <Link href="/tutorials" size="medium">Tutorials</Link>
-  <Link href="/api" size="medium">API Reference</Link>
-  <Link 
-    href="https://github.com/XRPLF" 
-    variant="external" 
-    size="medium"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    GitHub
-  </Link>
-</nav>
-```
-
-### Call-to-Action Section
-
-```tsx
-<div className="d-flex flex-column gap-4">
-  <Link href="/get-started" size="large">
-    Get Started with XRPL
-  </Link>
-  <Link href="/use-cases" size="large">
-    Explore Use Cases
-  </Link>
-</div>
-```
-
-### Rich Text Content
-
-```tsx
-<article>
-  <p>
-    The XRP Ledger (XRPL) is a decentralized, public blockchain led by a{" "}
-    <Link href="/community" variant="inline">global community</Link>{" "}
-    of businesses and developers. It supports a wide variety of{" "}
-    <Link href="/use-cases" variant="inline">use cases</Link>{" "}
-    including payments, tokenization, and DeFi.
-  </p>
-  
-  <p>
-    To learn more, check out the{" "}
-    <Link href="/docs" variant="inline">official documentation</Link>{" "}
-    or visit the{" "}
-    <Link 
-      href="https://github.com/XRPLF" 
-      variant="inline"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      GitHub repository
-    </Link>.
-  </p>
-</article>
-```
-
-### Disabled State
-
-```tsx
-<div className="d-flex flex-column gap-3">
-  <Link href="/premium" size="medium" disabled>
-    Premium Features (Coming Soon)
-  </Link>
-  <span className="text-muted">This feature is not yet available.</span>
-</div>
-```
-
----
-
-## Related Components
-
-- **LinkArrow** - The animated arrow icon component used internally by Link
-- **Button** - For actions that don't navigate (forms, modals, etc.)
-
----
-
-## File Structure
-
-```
-shared/components/Link/
-├── index.ts          # Exports
-├── Link.tsx          # Main component
-├── Link.md           # This documentation
-├── LinkArrow.tsx     # Arrow icon component
-├── _link.scss        # Link styles
-└── _link-icons.scss  # Arrow icon styles & animations
-```
-
----
-
-## Changelog
-
-### v1.0.0
-
-- Initial release with internal, external, and inline variants
-- Three size options (small, medium, large)
-- Theme-aware color states (light/dark mode)
-- Animated arrow icons
-- Full accessibility support

shared/components/Link/Link.tsx

@@ -1,168 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { LinkArrow, LinkArrowVariant } from './LinkArrow';
-
-export type LinkVariant = 'internal' | 'external' | 'inline';
-export type LinkSize = 'small' | 'medium' | 'large';
-export type LinkIconType = 'arrow' | 'external' | null;
-
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /**
-   * Link variant - internal, external, or inline
-   * @default 'internal'
-   */
-  variant?: LinkVariant;
-  
-  /**
-   * Size of the link
-   * @default 'medium'
-   */
-  size?: LinkSize;
-  
-  /**
-   * Icon type - arrow, external, or null
-   * If null, icon is determined by variant (internal/external)
-   * Arrow icons animate to chevron shape on hover
-   * @default null
-   */
-  icon?: LinkIconType;
-  
-  /**
-   * Disabled state - prevents navigation and applies disabled styles
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /**
-   * Link URL (required)
-   */
-  href: string;
-  
-  /**
-   * Link text content
-   */
-  children: React.ReactNode;
-}
-
-/**
- * Link Component
- * 
- * A comprehensive link component supporting multiple sizes, icon types, and states.
- * Arrow icons animate to chevron shape on hover.
- * 
- * Color states are handled automatically via CSS per theme:
- * 
- * Light Mode:
- * - Enabled: Green 400 (#0DAA3E)
- * - Hover/Focus: Green 500 (#078139) + underline + arrow animates to chevron
- * - Active: Green 400 (#0DAA3E) + underline
- * - Visited: Lilac 400 (#7649E3)
- * - Disabled: Gray 400 (#A2A2A4)
- * - Focus outline: Black (#000000)
- * 
- * Dark Mode:
- * - Enabled: Green 300 (#21E46B)
- * - Hover/Focus: Green 200 (#70EE97) + underline + arrow animates to chevron
- * - Active: Green 300 (#21E46B) + underline
- * - Visited: Lilac 300 (#C0A7FF)
- * - Disabled: Gray 500 (#838386)
- * - Focus outline: White (#FFFFFF)
- * 
- * @see Link.md for full documentation
- * 
- * @example
- * ```tsx
- * // Basic internal link (arrow animates to chevron on hover)
- * <Link href="/docs" size="medium">
- *   View documentation
- * </Link>
- * 
- * // External link
- * <Link href="https://example.com" variant="external" size="large">
- *   External resource
- * </Link>
- * 
- * // Disabled link
- * <Link href="#" disabled>
- *   Coming soon
- * </Link>
- * 
- * // Inline link (no icon)
- * <Link href="/docs" variant="inline">
- *   Learn more
- * </Link>
- * ```
- */
-export const Link: React.FC<LinkProps> = ({
-  variant = 'internal',
-  size = 'medium',
-  icon = null,
-  disabled = false,
-  href,
-  children,
-  className,
-  onClick,
-  ...rest
-}) => {
-  // Determine icon type based on variant if not explicitly provided
-  const getIconType = (): LinkArrowVariant | null => {
-    if (icon === null) {
-      // Auto-determine icon based on variant
-      if (variant === 'external') {
-        return 'external';
-      }
-      if (variant === 'internal') {
-        return 'internal'; // Default to internal arrow for internal variant
-      }
-      return null; // Inline links have no icon
-    }
-    
-    // Map icon prop to LinkArrow variant
-    if (icon === 'arrow') return 'internal';
-    if (icon === 'external') return 'external';
-    return null;
-  };
-
-  const iconType = getIconType();
-  const shouldShowIcon = variant !== 'inline' && iconType !== null;
-
-  const classes = clsx(
-    'bds-link',
-    `bds-link--${variant}`,
-    `bds-link--${size}`,
-    {
-      'bds-link--disabled': disabled,
-    },
-    className
-  );
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    }
-    onClick?.(e);
-  };
-
-  return (
-    <a
-      href={disabled ? '#' : href}
-      className={classes}
-      onClick={handleClick}
-      aria-disabled={disabled}
-      {...rest}
-    >
-      {children}
-      {shouldShowIcon && (
-        <LinkArrow
-          variant={iconType as LinkArrowVariant}
-          size={size}
-          disabled={disabled}
-        />
-      )}
-    </a>
-  );
-};
-
-Link.displayName = 'Link';

shared/components/Link/LinkArrow.tsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-
-export type LinkArrowVariant = 'internal' | 'external';
-export type LinkArrowSize = 'small' | 'medium' | 'large';
-
-export interface LinkArrowProps extends React.SVGProps<SVGSVGElement> {
-  /**
-   * Arrow variant - internal (→) or external (↗)
-   * Both variants animate on hover (horizontal line shrinks to show chevron)
-   * @default 'internal'
-   */
-  variant?: LinkArrowVariant;
-  
-  /**
-   * Size of the arrow icon
-   * @default 'medium'
-   */
-  size?: LinkArrowSize;
-  
-  /**
-   * Color of the arrow (hex color or CSS color value)
-   * @default 'currentColor' (inherits from parent)
-   */
-  color?: string;
-  
-  /**
-   * Disabled state - reduces opacity and prevents hover animation
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-// Size mappings for internal arrow (viewBox 0 0 26 22)
-const internalSizeMap: Record<LinkArrowSize, { width: number; height: number }> = {
-  small: { width: 15, height: 14 },
-  medium: { width: 17, height: 16 },
-  large: { width: 26, height: 22 },
-};
-
-// Size mappings for external arrow (viewBox 0 0 21 21, square aspect ratio)
-const externalSizeMap: Record<LinkArrowSize, { width: number; height: number }> = {
-  small: { width: 14, height: 14 },
-  medium: { width: 16, height: 16 },
-  large: { width: 21, height: 21 },
-};
-
-/**
- * LinkArrow Component
- * 
- * A customizable SVG arrow icon for use in link components.
- * Supports internal (→) and external (↗) variants with three size options.
- * Both variants animate on hover - horizontal line shrinks to reveal chevron shape.
- * 
- * @example
- * ```tsx
- * <LinkArrow variant="internal" size="medium" />
- * <LinkArrow variant="external" size="large" color="#0DAA3E" />
- * <LinkArrow variant="internal" size="small" disabled />
- * ```
- */
-export const LinkArrow: React.FC<LinkArrowProps> = ({
-  variant = 'internal',
-  size = 'medium',
-  color = 'currentColor',
-  disabled = false,
-  className,
-  ...svgProps
-}) => {
-  const dimensions = variant === 'external' 
-    ? externalSizeMap[size] 
-    : internalSizeMap[size];
-  
-  const classes = clsx(
-    'bds-link-icon',
-    `bds-link-icon--${variant}`,
-    `bds-link-icon--${size}`,
-    {
-      'bds-link-icon--disabled': disabled,
-    },
-    className
-  );
-
-  // Internal arrow (→) - horizontal arrow pointing right
-  // Horizontal line animates away on hover to show chevron
-  const renderInternalArrow = () => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={dimensions.width}
-      height={dimensions.height}
-      viewBox="0 0 26 22"
-      fill="none"
-      aria-hidden="true"
-      {...svgProps}
-    >
-      {/* Chevron part (static) */}
-      <path
-        d="M14.0019 1.00191L24.0015 11.0015L14.0019 21.001"
-        stroke={color}
-        strokeWidth="2"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-      />
-      {/* Horizontal line (animates away on hover) */}
-      <path
-        d="M23.999 10.999H0"
-        stroke={color}
-        strokeWidth="2"
-        strokeMiterlimit="10"
-        strokeLinecap="round"
-        className="arrow-horizontal"
-      />
-    </svg>
-  );
-
-  // External arrow (↗) - diagonal arrow with corner bracket
-  // Diagonal line animates away on hover, leaving just the chevron bracket
-  const renderExternalArrow = () => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={dimensions.width}
-      height={dimensions.height}
-      viewBox="0 0 21 21"
-      fill="none"
-      aria-hidden="true"
-      {...svgProps}
-    >
-      {/* Corner bracket - horizontal line (static) */}
-      <path
-        d="M4.0031 2L19 2"
-        stroke={color}
-        strokeWidth="2"
-        strokeMiterlimit="10"
-      />
-      {/* Corner bracket - vertical line (static) */}
-      <path
-        d="M19 2V17"
-        stroke={color}
-        strokeWidth="2"
-        strokeMiterlimit="10"
-      />
-      {/* Diagonal arrow line (animates away on hover) */}
-      <path
-        d="M18.9963 2L1 20"
-        stroke={color}
-        strokeWidth="2"
-        strokeMiterlimit="10"
-        className="arrow-horizontal"
-      />
-    </svg>
-  );
-
-  return (
-    <span className={classes}>
-      {variant === 'external' ? renderExternalArrow() : renderInternalArrow()}
-    </span>
-  );
-};
-
-LinkArrow.displayName = 'LinkArrow';

shared/components/Link/_link-icons.scss

@@ -1,157 +0,0 @@
-// Link Arrow Icon Styles and Animations
-// -----------------------------------------------------------------------------
-// Styles for link arrow icons with hover animations that transform arrow to chevron
-// Animation: 150ms with custom cubic-bezier per Figma specs
-
-@import "../../../styles/_colors.scss";
-
-// Animation timing per Figma
-$bds-link-transition-duration: 150ms;
-$bds-link-transition-timing: cubic-bezier(0.98, 0.12, 0.12, 0.98);
-
-// Base styles for link icons
-.bds-link-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  svg {
-    display: block;
-
-    path {
-      stroke: currentColor; // Inherits color from parent link
-    }
-
-    .arrow-horizontal {
-      transition: transform $bds-link-transition-duration $bds-link-transition-timing;
-    }
-  }
-}
-
-// Internal arrow: horizontal line shrinks from left toward right (toward the chevron)
-.bds-link-icon--internal svg .arrow-horizontal {
-  transform-origin: right center;
-}
-
-// External arrow: diagonal line shrinks toward top-right corner (leaving just the bracket)
-.bds-link-icon--external svg .arrow-horizontal {
-  transform-origin: 19px 2px; // Top-right corner where diagonal starts
-}
-
-// Hover state - shrink/hide the horizontal line to create chevron effect
-// Applies to both internal and external icons when not disabled
-
-// Internal: scale the horizontal line from right
-a:hover .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal,
-a:focus .bds-link-icon--internal:not(.bds-link-icon--disabled) svg .arrow-horizontal {
-  transform: scaleX(0);
-}
-
-// External: scale the diagonal line toward the corner (uniform scale for diagonal)
-a:hover .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal,
-a:focus .bds-link-icon--external:not(.bds-link-icon--disabled) svg .arrow-horizontal {
-  transform: scale(0);
-}
-
-// Disabled state
-.bds-link-icon--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  
-  svg {
-    path {
-      // Disabled icons use gray color from theme
-      stroke: currentColor;
-    }
-    
-    .arrow-horizontal {
-      transition: none; // Disable animation when disabled
-    }
-  }
-}
-
-// Theme-specific disabled colors
-html.light,
-.light {
-  .bds-link-icon--disabled svg path {
-    stroke: $gray-400;
-  }
-}
-
-html.dark,
-.dark,
-html:not(.light) {
-  .bds-link-icon--disabled svg path {
-    stroke: $gray-500;
-  }
-}
-
-// Size variants for internal arrows (wider aspect ratio)
-// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
-// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
-.bds-link-icon--internal {
-  &.bds-link-icon--small {
-    // Mobile/Tablet: 14x13
-    width: 14px;
-    height: 13px;
-
-    // Desktop (xl): 15x14
-    @include media-breakpoint-up(xl) {
-      width: 15px;
-      height: 14px;
-    }
-  }
-
-  &.bds-link-icon--medium {
-    // Mobile/Tablet: 17x14
-    width: 17px;
-    height: 14px;
-
-    // Desktop (xl): 17x16
-    @include media-breakpoint-up(xl) {
-      height: 16px;
-    }
-  }
-
-  &.bds-link-icon--large {
-    // Mobile/Tablet: 20x16
-    width: 20px;
-    height: 16px;
-
-    // Desktop (xl): 26x22
-    @include media-breakpoint-up(xl) {
-      width: 26px;
-      height: 22px;
-    }
-  }
-}
-
-// Size variants for external arrows (square aspect ratio)
-// Responsive: Mobile/Tablet (xs-md, lg) → Desktop (xl)
-// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
-.bds-link-icon--external {
-  &.bds-link-icon--small {
-    // Same at all breakpoints
-    width: 14px;
-    height: 14px;
-  }
-
-  &.bds-link-icon--medium {
-    // Same at all breakpoints
-    width: 16px;
-    height: 16px;
-  }
-
-  &.bds-link-icon--large {
-    // Mobile/Tablet: 17x17
-    width: 17px;
-    height: 17px;
-
-    // Desktop (xl): 21x21
-    @include media-breakpoint-up(xl) {
-      width: 21px;
-      height: 21px;
-    }
-  }
-}

shared/components/Link/_link.scss

@@ -1,271 +0,0 @@
-// Link Component Styles
-// -----------------------------------------------------------------------------
-// Styles for the Link component with support for sizes, states, and themes
-// Light mode colors per Figma: Enabled=green-400, Hover/Focus=green-500+underline,
-// Active=green-400+underline, Visited=lilac-400, Disabled=gray-400
-// Dark mode colors per Figma: Enabled=green-300, Hover/Focus=green-200+underline,
-// Active=green-300+underline, Visited=lilac-300, Disabled=gray-500
-
-@import "../../../styles/_colors.scss";
-
-// Base link styles
-.bds-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  text-decoration: none;
-  transition: color 0.2s ease, text-decoration 0.2s ease;
-  cursor: pointer;
-  
-  // Focus styles for accessibility (outline color set per theme below)
-  &:focus-visible {
-    outline: 2px solid $white; // Default to white (dark mode)
-    outline-offset: 2px;
-  }
-  
-  // Icon spacing
-  .bds-link-icon {
-    margin-left: 0;
-    flex-shrink: 0;
-  }
-}
-
-// Size variants - Mobile First (xs-md base)
-// Typography specs from Figma: Desktop (xl), Tablet (lg), Mobile (xs-md)
-// Breakpoints reference: $grid-breakpoints in styles/xrpl.scss (xl: 1280px)
-
-.bds-link--small {
-  // Mobile/Tablet: 14px/20.1px
-  font-size: 14px;
-  line-height: 20.1px;
-  letter-spacing: 0;
-  gap: 16px;
-
-  // Desktop (xl): 16px/23.2px
-  @include media-breakpoint-up(xl) {
-    font-size: 16px;
-    line-height: 23.2px;
-  }
-}
-
-.bds-link--medium {
-  // Mobile/Tablet: 16px/23.2px
-  font-size: 16px;
-  line-height: 23.2px;
-  letter-spacing: 0;
-  gap: 16px;
-
-  // Desktop (xl): 18px/26.1px
-  @include media-breakpoint-up(xl) {
-    font-size: 18px;
-    line-height: 26.1px;
-    letter-spacing: -0.5px;
-  }
-}
-
-.bds-link--large {
-  // Mobile/Tablet: 18px/30px
-  font-size: 18px;
-  line-height: 30px;
-  letter-spacing: -0.5px;
-  gap: 24px;
-
-  // Desktop (xl): 24px/30px
-  @include media-breakpoint-up(xl) {
-    font-size: 24px;
-    letter-spacing: 0;
-  }
-}
-
-// Link color states (Light Mode - per Figma specs)
-// Use element + class selector for higher specificity to override html.light a rules
-a.bds-link,
-.bds-link {
-  // Enabled state: Green 400
-  color: $green-400;
-  text-decoration: none;
-  
-  // Hover state: Green 500 + underline
-  &:hover:not(.bds-link--disabled) {
-    color: $green-500;
-    text-decoration: underline;
-  }
-  
-  // Focus state: Green 500 + underline
-  &:focus:not(.bds-link--disabled) {
-    color: $green-500;
-    text-decoration: underline;
-  }
-  
-  // Active state: Green 400 + underline
-  &:active:not(.bds-link--disabled) {
-    color: $green-400;
-    text-decoration: underline;
-  }
-  
-  // Visited state: Lilac 400 (purple)
-  &:visited:not(.bds-link--disabled) {
-    color: $purple;
-  }
-}
-
-// Light theme overrides - BDS links are excluded from general light theme rules
-// so these rules will apply naturally without needing !important
-html.light {
-  a.bds-link,
-  nav a.bds-link {
-    // Enabled state: Green 400
-    color: $green-400;
-    text-decoration: none;
-    
-    // Focus outline: Black for light mode
-    &:focus-visible {
-      outline-color: $black;
-    }
-    
-    // Hover state: Green 500 + underline
-    &:hover:not(.bds-link--disabled) {
-      color: $green-500;
-      text-decoration: underline;
-    }
-    
-    // Focus state: Green 500 + underline
-    &:focus:not(.bds-link--disabled) {
-      color: $green-500;
-      text-decoration: underline;
-    }
-    
-    // Active state: Green 400 + underline
-    &:active:not(.bds-link--disabled) {
-      color: $green-400;
-      text-decoration: underline;
-    }
-    
-    // Visited state: Lilac 400 (purple)
-    &:visited:not(.bds-link--disabled) {
-      color: $purple;
-    }
-    
-    // Disabled state - needs to be here for specificity
-    &.bds-link--disabled {
-      color: $gray-400;
-      cursor: not-allowed;
-      pointer-events: none;
-      text-decoration: none;
-      
-      &:hover,
-      &:focus,
-      &:active,
-      &:visited {
-        color: $gray-400;
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-// Dark theme styles (per Figma specs)
-html.dark {
-  a.bds-link,
-  nav a.bds-link {
-    // Enabled state: Green 300
-    color: $green-300;
-    text-decoration: none;
-    
-    // Focus outline: White for dark mode
-    &:focus-visible {
-      outline-color: $white;
-    }
-    
-    // Hover state: Green 200 + underline
-    &:hover:not(.bds-link--disabled) {
-      color: $green-200;
-      text-decoration: underline;
-    }
-    
-    // Focus state: Green 200 + underline
-    &:focus:not(.bds-link--disabled) {
-      color: $green-200;
-      text-decoration: underline;
-    }
-    
-    // Active state: Green 300 + underline
-    &:active:not(.bds-link--disabled) {
-      color: $green-300;
-      text-decoration: underline;
-    }
-    
-    // Visited state: Lilac 300
-    &:visited:not(.bds-link--disabled) {
-      color: $lilac-300;
-    }
-    
-    // Disabled state - needs to be here for specificity
-    &.bds-link--disabled {
-      color: $gray-500;
-      cursor: not-allowed;
-      pointer-events: none;
-      text-decoration: none;
-      
-      &:hover,
-      &:focus,
-      &:active,
-      &:visited {
-        color: $gray-500;
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-// Disabled state (base/dark theme)
-// Use element + class selector for higher specificity
-a.bds-link.bds-link--disabled,
-.bds-link.bds-link--disabled {
-  color: $gray-400;
-  cursor: not-allowed;
-  pointer-events: none;
-  text-decoration: none;
-  
-  .bds-link-icon {
-    opacity: 0.5;
-  }
-  
-  &:hover,
-  &:focus,
-  &:active,
-  &:visited {
-    color: $gray-400;
-    text-decoration: none;
-  }
-}
-
-// Dark theme adjustments for disabled (fallback for non-html.dark contexts)
-html.dark,
-.dark,
-html:not(.light) {
-  a.bds-link.bds-link--disabled,
-  .bds-link.bds-link--disabled {
-    color: $gray-500;
-    
-    &:hover,
-    &:focus,
-    &:active,
-    &:visited {
-      color: $gray-500;
-    }
-  }
-}
-
-// Inline variant (no icon spacing adjustment needed)
-.bds-link--inline {
-  display: inline;
-  gap: 0;
-  
-  .bds-link-icon {
-    display: none;
-  }
-}
-
-// Standalone variants (internal/external)
-// These variants use icons, spacing is handled by gap property in .bds-link

shared/components/Link/index.ts

@@ -1,5 +0,0 @@
-export { Link } from './Link';
-export type { LinkProps, LinkVariant, LinkSize, LinkIconType } from './Link';
-
-export { LinkArrow } from './LinkArrow';
-export type { LinkArrowProps, LinkArrowVariant, LinkArrowSize } from './LinkArrow';