mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 11:55:50 +00:00
Update Use Cases page w/ new brands and fixes
- New logos, descriptions - Fixes use case responsiveness resolve pr comments rm important Fix Zerpmon filename casing
This commit is contained in:
akcodez
@@ -36,8 +36,8 @@ const logos = {
|
||||
"xrp-cafe",
|
||||
"xrp-oval",
|
||||
],
|
||||
exchanges: ["sologenic_dex", "xpmarket"],
|
||||
gaming: ["forte", "ledger-city"],
|
||||
exchanges: ["sologenic_dex", "xpmarket", 'orchestra-finance','moai-finance', 'first-ledger-bot'],
|
||||
gaming: ["forte", "ledger-city", "futureverse", 'zerpmon'],
|
||||
security: ["anchain"],
|
||||
payments: ["ripple", "supermojo"],
|
||||
cbdc: ["ripple"],
|
||||
@@ -90,6 +90,24 @@ const cardsData = [
|
||||
category_name: "Gaming",
|
||||
link: "https://forte.io",
|
||||
},
|
||||
{
|
||||
id: "futureverse",
|
||||
title: "Futureverse",
|
||||
description:
|
||||
"Revolutionary AI + metaverse technologies that enable open, scalable, and interoperable apps, games, and experiences.",
|
||||
category_id: "gaming",
|
||||
category_name: "Gaming",
|
||||
link: "https://www.futureverse.com/",
|
||||
},
|
||||
{
|
||||
id: "zerpmon",
|
||||
title: "Zerpmon",
|
||||
description:
|
||||
"Zerpmon is an original collection of digital collectible creatures that live on the XRPL, with each Zerpmon being a completely unique 1/1. Train and level-up your Zerpmon by taking them on Missions, then Battle other Trainers for XRP, NFTs, massive Tournament prizes, and the glory that comes with becoming the very best.",
|
||||
category_id: "gaming",
|
||||
category_name: "Gaming",
|
||||
link: "https://www.zerpmon.world/",
|
||||
},
|
||||
{
|
||||
id: "gatehub",
|
||||
title: "Gatehub",
|
||||
@@ -261,6 +279,33 @@ const cardsData = [
|
||||
category_name: "Exchanges",
|
||||
link: "https://sologenic.org/",
|
||||
},
|
||||
{
|
||||
id: "orchestra-finance",
|
||||
title: "Orchestra Finance",
|
||||
description:
|
||||
"Orchestra Finance is a first-in-class AMM DEX on the XRP Ledger(XRPL). We provide the quintessential AMM experience, with low fees, speedy transactions, and a user-friendly interface.",
|
||||
category_id: "exchanges",
|
||||
category_name: "Exchanges",
|
||||
link: "https://orchestra.finance/",
|
||||
},
|
||||
{
|
||||
id: "moai-finance",
|
||||
title: "Moai Finance",
|
||||
description:
|
||||
"Moai Finance is an innovative multi-chain DEX and cross-chain DEX aggregator, strategically positioned within the XRPL ecosystem to harness its untapped liquidity across various side-chains. ",
|
||||
category_id: "exchanges",
|
||||
category_name: "Exchanges",
|
||||
link: "https://moai-finance.xyz/",
|
||||
},
|
||||
{
|
||||
id: "first-ledger-bot",
|
||||
title: "First Ledger Bot",
|
||||
description:
|
||||
"First Ledger is the fastest way to trade on the xrpl. This tool allows you to trade with speed within a couple of clicks.",
|
||||
category_id: "exchanges",
|
||||
category_name: "Exchanges",
|
||||
link: "https://firstledger.net/",
|
||||
},
|
||||
{
|
||||
id: "sologenic-nft",
|
||||
title: "Sologenic NFT",
|
||||
@@ -419,14 +464,14 @@ const uses = [
|
||||
{
|
||||
id: "exchanges",
|
||||
title: "Exchanges",
|
||||
number: 2,
|
||||
number: 5,
|
||||
description:
|
||||
"Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.",
|
||||
},
|
||||
{
|
||||
id: "gaming",
|
||||
title: "Gaming",
|
||||
number: 2,
|
||||
number: 4,
|
||||
description:
|
||||
"The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.",
|
||||
},
|
||||
@@ -717,7 +762,6 @@ export default function Uses() {
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
style={{ gridTemplateColumns: "repeat(4,1fr)" }}
|
||||
className="card-grid use-cases-grid ls-none mt-4 pt-lg-2"
|
||||
id="use-case-card-grid"
|
||||
>
|
||||
|
||||
File diff suppressed because one or more lines are too long
26
static/img/uses/first-ledger-bot.svg
Normal file
26
static/img/uses/first-ledger-bot.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<g>
|
||||
<path class="cls-1" d="M819.41,798.26h27.72v31.85h-31.61c-7.78,0-12.89,5.59-12.89,14.1v10.7h42.31v31.85h-42.31v84.12h-35.98v-84.12h-31.12v-31.85h31.12v-7.78c0-33.31,16.29-48.87,52.76-48.87Z"/>
|
||||
<path class="cls-1" d="M965.78,939.03h35.5v31.85h-114.03v-31.85h42.55v-65.16h-42.55v-31.85h78.53v97.01ZM929.79,798.26h35.5v29.18h-35.5v-29.18Z"/>
|
||||
<path class="cls-1" d="M1084.91,866.33c4.13-16.78,14.83-24.31,31.85-24.31h27.96v31.85h-23.34c-17.99,0-24.56,6.81-24.56,24.07v41.09h37.2v31.85h-104.3v-31.85h31.36v-65.16h-31.36v-31.85h53l2.19,24.31Z"/>
|
||||
<path class="cls-1" d="M1229.33,870.22c-9.24,0-16.05,3.4-15.07,10.21.73,7.29,9.73,9.72,28.45,13.86,26.26,5.35,45.22,19.94,45.22,40.6,0,25.53-20.91,38.9-54.22,38.9s-57.87-17.75-59.81-45.22l38.9-1.46c.97,10.21,9.24,15.56,20.91,15.56,9.97,0,16.05-2.43,16.05-8.51s-8.51-9.24-25.53-13.37c-29.18-7.05-48.14-20.18-48.14-40.85,0-24.56,23.58-40.85,55.43-40.85,28.69,0,51.79,16.78,55.68,43.52l-39.63,1.46c-1.46-9.73-8.27-13.86-18.23-13.86Z"/>
|
||||
<path class="cls-1" d="M1387.37,807.98v34.04h45.47v31.85h-45.47v47.9c0,10.7,5.84,17.26,16.53,17.26h28.45v31.85h-35.74c-30.39,0-44.98-14.83-44.98-43.52v-53.49h-35.01v-31.85h35.01v-34.04h35.74Z"/>
|
||||
<path class="cls-1" d="M782.21,1144.85v-95.31c0-9.24-4.13-13.62-12.89-13.62h-29.66v-31.85h29.66c32.34,0,48.63,15.07,48.63,45.47v95.31h37.44v31.85h-115.97v-31.85h42.79Z"/>
|
||||
<path class="cls-1" d="M940.25,1044.92c32.09,0,61.51,20.91,62,68.08v7.29h-86.31c1.94,17.51,10.7,28.2,24.31,28.2,9.97,0,18.23-6.08,22.12-16.29l37.93,3.89c-7.05,26.26-30.63,43.52-60.05,43.52-38.66,0-62.97-26.02-62.97-67.35s24.31-67.35,62.97-67.35ZM963.35,1098.41c-3.16-14.34-11.91-22.37-23.1-22.37-12.16,0-20.42,8.27-23.34,22.37h46.44Z"/>
|
||||
<path class="cls-1" d="M1142.29,1176.7h-34.77l-.73-18.72c-7.29,13.86-18.24,21.64-35.5,21.64-29.91,0-48.63-27.23-48.63-67.35s18.72-67.35,48.63-67.35c16.05,0,26.99,7.54,35.01,21.64v-62.49h35.98v172.62ZM1084.91,1148.5c15.56,0,23.83-15.07,23.83-36.23s-8.27-36.47-23.83-36.47-24.07,15.07-24.07,36.47,8.27,36.23,24.07,36.23Z"/>
|
||||
<path class="cls-1" d="M1172.93,1111.3c0-40.36,19.69-66.38,49.11-66.38,16.78,0,27.96,8.02,34.77,22.12l.73-19.21h34.77v107.46c-.97,41.82-19.69,60.78-57.38,60.78-31.61,0-51.3-14.34-57.14-36.71l37.44-2.43c3.4,8.02,10.21,12.64,19.69,12.64,13.13,0,20.91-9.72,21.4-27.47v-10.21c-5.83,11.18-20.18,17.99-34.28,17.99-29.18,0-49.11-24.31-49.11-58.6ZM1234.68,1145.82c14.59,0,23.58-14.1,23.83-35.25,0-21.4-9-35.25-23.83-35.25s-23.83,13.86-23.83,35.25,9.24,35.25,23.83,35.25Z"/>
|
||||
<path class="cls-1" d="M1377.89,1044.92c32.09,0,61.51,20.91,62,68.08v7.29h-86.31c1.94,17.51,10.7,28.2,24.31,28.2,9.97,0,18.24-6.08,22.13-16.29l37.93,3.89c-7.05,26.26-30.63,43.52-60.05,43.52-38.66,0-62.97-26.02-62.97-67.35s24.31-67.35,62.97-67.35ZM1400.99,1098.41c-3.16-14.34-11.91-22.37-23.1-22.37-12.16,0-20.42,8.27-23.34,22.37h46.44Z"/>
|
||||
<path class="cls-1" d="M1522.55,1072.15c4.13-16.78,14.83-24.31,31.85-24.31h27.96v31.85h-23.34c-17.99,0-24.56,6.81-24.56,24.07v41.09h37.2v31.85h-104.3v-31.85h31.36v-65.16h-31.36v-31.85h53l2.19,24.31Z"/>
|
||||
<path class="cls-1" d="M1729.71,1184.24v32.82h-122.05v-32.82h122.05Z"/>
|
||||
</g>
|
||||
<path class="cls-1" d="M644.52,792.94h-386.14v386.14h386.14v-386.14ZM562.24,875.22v221.58h-221.58v-166.15l83.06,83.06.03-.03v.03h55.4v-55.4h-.03l.03-.03-83.06-83.06h166.15Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
15
static/img/uses/futureverse.svg
Executable file
15
static/img/uses/futureverse.svg
Executable file
@@ -0,0 +1,15 @@
|
||||
<svg width="480" height="480" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1_84)">
|
||||
<g clip-path="url(#clip1_1_84)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M415.029 297.083C426.814 313.715 437.319 329.986 446.317 345.647V345.663C479.496 403.388 488.537 446.596 471.777 467.346C464.953 475.803 454.249 480 440.205 480C419.763 480 392.228 471.12 359.12 453.565C304.533 424.624 240.635 375.496 179.197 315.234C49.2259 187.74 -25.888 54.8438 8.20043 12.6539C24.9603 -8.09645 64.9765 -3.19466 120.857 26.3884C151.107 42.4249 184.215 64.6944 218.175 91.5836H442.479C448.549 91.5836 453.482 97.1745 453.482 104.05V162.166C453.482 169.057 448.563 174.632 442.479 174.632H180.234C139.721 174.632 106.883 137.454 106.883 91.5993H191.777C175.742 80.1202 160.248 70.1443 145.649 61.9851C118.355 46.7316 96.0797 38.8856 80.9972 38.8856C72.9655 38.8856 66.9666 41.1094 63.3275 45.6197C52.8366 58.6024 61.6785 90.7381 87.6073 133.805C108.404 168.352 138.328 206.956 173.781 245.293C183.703 227.283 201.344 215.303 221.473 215.303H444.554C449.473 215.303 453.467 219.829 453.467 225.404V286.982C453.467 292.557 449.473 297.083 444.554 297.083H415.029H394.829H276.629C266.223 297.083 257.779 306.636 257.779 318.429V326.118C328.23 386.114 387.793 417.451 418.1 417.451C426.117 417.451 432.073 415.259 435.656 410.827H435.641C446.132 397.844 437.29 365.708 411.362 322.641C406.358 314.341 400.828 305.791 394.829 297.083H415.029ZM165.292 411.461V324.45C165.825 324.975 166.353 325.505 166.881 326.037C167.535 326.696 168.191 327.355 168.86 328.005C198.285 356.868 228.28 383.224 257.762 406.214V411.461C257.762 417.036 253.768 421.562 248.849 421.562H174.205C169.286 421.562 165.292 417.036 165.292 411.461Z" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1_84">
|
||||
<rect width="480" height="480" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_1_84">
|
||||
<rect width="480" height="480" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
11
static/img/uses/lightmode/first-ledger-bot.svg
Normal file
11
static/img/uses/lightmode/first-ledger-bot.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M1553.85,446.15H446.15v1107.7h1107.7V446.15ZM1317.82,682.18v635.64h-635.64v-476.63l238.27,238.27h159v-159l-238.27-238.27h476.63Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 394 B |
12
static/img/uses/lightmode/moai-finance.svg
Normal file
12
static/img/uses/lightmode/moai-finance.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1758_7052)">
|
||||
<path d="M192.658 512.694L161.008 552.653C159.289 554.82 158.635 557.621 159.196 560.311C160.587 567.023 171.038 582.449 178.78 582.449C198.271 582.449 201.259 537.99 197.393 513.41C197.066 511.335 193.984 511.05 192.658 512.694Z" fill="black"/>
|
||||
<path d="M268.632 498.885C266.026 529.663 267.576 545.391 277.84 583.579C284.424 608.076 261.973 619.351 236.038 626.504C212.802 632.913 162.773 638.247 191.08 599.408C235.599 538.33 235.188 491.971 190.968 492.742C183.085 492.88 199.793 448.972 218.425 449C240.521 449.028 270.78 473.47 268.632 498.885Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M562.886 539.519C562.886 508.574 583.898 479.999 619.919 479.999C655.939 479.999 680.268 505.904 680.268 540.479C680.268 571.424 659.586 599.999 623.4 599.999C587.215 599.999 562.886 574.259 562.886 539.519ZM655.789 577.739C655.789 543.794 620.714 488.849 598.126 488.849C591.807 488.849 587.545 493.424 587.545 502.259C587.545 536.204 623.25 591.149 645.043 591.149C651.992 591.149 655.789 586.889 655.789 577.739ZM463.469 556.649L437.279 485.264H379V594.749H414.781V518.279L444.738 594.734H481.974L511.916 517.904V594.734H547.697V485.264H489.418L463.469 556.649ZM727.185 485.264L679.143 594.734H719.306L726.795 576.344H777.824L785.314 594.734H825.477L777.434 485.264H727.185ZM752.302 513.737L752.31 513.719H752.295L752.302 513.737ZM752.302 513.737L738.982 546.419H765.622L752.302 513.737ZM835.262 485.264H872.949V594.734H835.262V485.264ZM1598.88 481.799C1565.31 481.799 1543.24 503.399 1543.24 536.324H1543.21C1543.21 572.459 1566.36 598.199 1601.61 598.199C1620.16 598.199 1636.87 588.704 1644.22 575.534L1644.07 575.384C1641.16 576.764 1635.8 577.379 1631.51 577.379C1598.87 577.379 1566.99 545.369 1566.99 506.309C1566.99 494.054 1572.21 488.849 1578.95 488.849C1589.83 488.849 1602.09 499.109 1625.39 544.604H1625.54L1639.03 491.144C1627.85 485.324 1614.67 481.799 1598.88 481.799ZM1036.72 516.568V485.068H934.988V594.958H972.81V559.498H1033.79V527.998H972.81V516.568H1036.72ZM1050.94 485.068H1088.76V594.958H1050.94V485.068ZM1208.23 567.405L1208.23 567.403V567.418L1208.23 567.405ZM1197.97 551.489V485.068H1234.62V594.958H1187.27L1142.99 526.209V594.958H1106.34V485.068H1155.16L1197.97 551.489ZM1341.63 485.068L1389.87 594.958H1349.55L1342.03 576.493H1290.82L1283.29 594.958H1242.98L1291.2 485.068H1341.63ZM1316.42 513.656L1329.79 546.463H1303.05L1316.42 513.656ZM1500.1 567.405L1500.11 567.403V567.418L1500.1 567.405ZM1489.84 551.489V485.068H1526.49V594.958H1479.14L1434.87 526.209V594.958H1398.21V485.068H1447.04L1489.84 551.489ZM1694.55 565.063L1696.53 553.063H1755.57V526.978H1696.55L1694.57 514.963H1760.28V485.068H1654.57L1662.63 540.013L1654.57 594.958H1761V565.063H1694.55Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1758_7052">
|
||||
<rect width="1920" height="1080" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
41
static/img/uses/lightmode/orchestra-finance.svg
Normal file
41
static/img/uses/lightmode/orchestra-finance.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
12
static/img/uses/moai-finance.svg
Normal file
12
static/img/uses/moai-finance.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1758_7049)">
|
||||
<path d="M192.658 512.694L161.008 552.653C159.289 554.82 158.635 557.621 159.196 560.311C160.587 567.023 171.038 582.449 178.78 582.449C198.271 582.449 201.259 537.99 197.393 513.41C197.066 511.335 193.984 511.05 192.658 512.694Z" fill="white"/>
|
||||
<path d="M268.632 498.885C266.026 529.663 267.576 545.391 277.84 583.579C284.424 608.076 261.973 619.351 236.038 626.504C212.802 632.913 162.773 638.247 191.08 599.408C235.599 538.33 235.188 491.971 190.968 492.742C183.085 492.88 199.793 448.972 218.425 449C240.521 449.028 270.78 473.47 268.632 498.885Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M562.886 539.518C562.886 508.573 583.898 479.998 619.919 479.998C655.939 479.998 680.268 505.903 680.268 540.478C680.268 571.423 659.586 599.998 623.4 599.998C587.215 599.998 562.886 574.258 562.886 539.518ZM655.789 577.738C655.789 543.793 620.714 488.848 598.126 488.848C591.807 488.848 587.545 493.423 587.545 502.258C587.545 536.203 623.25 591.148 645.043 591.148C651.992 591.148 655.789 586.888 655.789 577.738ZM463.469 556.648L437.279 485.263H379V594.748H414.781V518.278L444.738 594.733H481.974L511.916 517.903V594.733H547.697V485.263H489.418L463.469 556.648ZM727.185 485.263L679.143 594.733H719.306L726.795 576.343H777.824L785.314 594.733H825.477L777.434 485.263H727.185ZM752.302 513.737L752.31 513.718H752.295L752.302 513.737ZM752.302 513.737L738.982 546.418H765.622L752.302 513.737ZM835.262 485.263H872.949V594.733H835.262V485.263ZM1598.88 481.799C1565.31 481.799 1543.24 503.399 1543.24 536.324H1543.21C1543.21 572.459 1566.36 598.199 1601.61 598.199C1620.16 598.199 1636.87 588.704 1644.22 575.534L1644.07 575.384C1641.16 576.764 1635.8 577.379 1631.51 577.379C1598.87 577.379 1566.99 545.369 1566.99 506.309C1566.99 494.054 1572.21 488.849 1578.95 488.849C1589.83 488.849 1602.09 499.109 1625.39 544.604H1625.54L1639.03 491.144C1627.85 485.324 1614.67 481.799 1598.88 481.799ZM1036.72 516.568V485.068H934.988V594.958H972.81V559.498H1033.79V527.998H972.81V516.568H1036.72ZM1050.94 485.068H1088.76V594.958H1050.94V485.068ZM1208.23 567.405L1208.23 567.403V567.418L1208.23 567.405ZM1197.97 551.489V485.068H1234.62V594.958H1187.27L1142.99 526.209V594.958H1106.34V485.068H1155.16L1197.97 551.489ZM1341.63 485.068L1389.87 594.958H1349.55L1342.03 576.493H1290.82L1283.29 594.958H1242.98L1291.2 485.068H1341.63ZM1316.42 513.656L1329.79 546.463H1303.05L1316.42 513.656ZM1500.1 567.405L1500.11 567.403V567.418L1500.1 567.405ZM1489.84 551.489V485.068H1526.49V594.958H1479.14L1434.87 526.209V594.958H1398.21V485.068H1447.04L1489.84 551.489ZM1694.55 565.063L1696.53 553.063H1755.57V526.978H1696.55L1694.57 514.963H1760.28V485.068H1654.57L1662.63 540.013L1654.57 594.958H1761V565.063H1694.55Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1758_7049">
|
||||
<rect width="1920" height="1080" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
46
static/img/uses/orchestra-finance.svg
Normal file
46
static/img/uses/orchestra-finance.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
BIN
static/img/uses/zerpmon.png
Normal file
BIN
static/img/uses/zerpmon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@@ -1,245 +0,0 @@
|
||||
$(document).ready(() => {
|
||||
// Note: Use lowercase filenames here to avoid case inconsistency between
|
||||
// dev environments like macOS and Windows which are not case-sensitive,
|
||||
// and production Linux servers which use case-sensitive file systems.
|
||||
const logos = {
|
||||
infrastructure: [
|
||||
"xrp-ledger",
|
||||
"gatehub",
|
||||
"towolabs",
|
||||
"xrpscan",
|
||||
"xrp-toolkit",
|
||||
"bithomp",
|
||||
"onthedex",
|
||||
],
|
||||
developer_tooling: [
|
||||
"cryptum",
|
||||
"evernode",
|
||||
"threezy",
|
||||
"tokenize",
|
||||
],
|
||||
interoperability: ["multichain"],
|
||||
wallet: [
|
||||
"bitfrost",
|
||||
"crossmark",
|
||||
"edge",
|
||||
"gem-wallet",
|
||||
"xumm",
|
||||
],
|
||||
nfts: [
|
||||
"aesthetes",
|
||||
"audiotarky",
|
||||
"nftmaster",
|
||||
"peerkat",
|
||||
"sologenic_dex",
|
||||
"xrp-cafe",
|
||||
"xrp-oval",
|
||||
],
|
||||
exchanges: ["sologenic_dex", "xpmarket"],
|
||||
gaming: [
|
||||
"forte",
|
||||
"ledger-city",
|
||||
],
|
||||
security: ["anchain"],
|
||||
payments: ["ripple", "supermojo"],
|
||||
cbdc: ["ripple"],
|
||||
sustainability: ["carbonland-trust"],
|
||||
custody: ["gatehub", "bitgo"],
|
||||
};
|
||||
// Helper function to create a logo element
|
||||
function createLogoElement(logoSrc, title, id) {
|
||||
const logoElem = document.createElement("div");
|
||||
logoElem.alt = `${title} logo`;
|
||||
logoElem.classList.add(`logo-item`);
|
||||
logoElem.classList.add(`${logoSrc}`);
|
||||
return logoElem;
|
||||
}
|
||||
// Add two new constiables for arrow buttons
|
||||
const leftArrow = document.getElementById("leftArrow");
|
||||
const rightArrow = document.getElementById("rightArrow");
|
||||
// Handle arrow button clicks
|
||||
function handleArrowClick(direction) {
|
||||
// Get the current data index
|
||||
const currentIndex = parseInt(modal.getAttribute("data-index"));
|
||||
|
||||
// Calculate the new index based on the direction
|
||||
const newIndex = direction === "left" ? currentIndex - 1 : currentIndex + 1;
|
||||
|
||||
// Update the modal content with the new data
|
||||
updateModalContent(useCaseData[newIndex]);
|
||||
|
||||
// Update the modal's data-index attribute
|
||||
modal.setAttribute("data-index", newIndex);
|
||||
|
||||
// Show or hide the arrow buttons based on the new index
|
||||
leftArrow.style.display = newIndex === 0 ? "none" : "block";
|
||||
rightArrow.style.display =
|
||||
newIndex === useCaseData.length - 1 ? "none" : "block";
|
||||
}
|
||||
|
||||
// Add click event listeners for arrow buttons
|
||||
leftArrow.addEventListener("click", () => handleArrowClick("left"));
|
||||
rightArrow.addEventListener("click", () => handleArrowClick("right"));
|
||||
const modal = document.getElementById("myModal");
|
||||
const openModalBtns = document.querySelectorAll("li.open-modal");
|
||||
const useCaseData = [];
|
||||
|
||||
// Populate the useCaseData array with data from the li elements
|
||||
openModalBtns.forEach(function (btn) {
|
||||
const id = btn.getAttribute("data-id");
|
||||
const title = btn.getAttribute("data-title");
|
||||
const description = btn.getAttribute("data-description");
|
||||
const number = btn.getAttribute("data-number");
|
||||
const src = btn.getAttribute("data-src");
|
||||
|
||||
useCaseData.push({ id, title, number, src, description });
|
||||
});
|
||||
|
||||
// Get the elements in the modal that will be updated
|
||||
const modalImage = document.querySelector(".modal .section-image");
|
||||
const modalTextDescription = document.querySelector(
|
||||
".modal .section-text-description"
|
||||
);
|
||||
const modalTextTitle = document.querySelector(".modal .section-text-title");
|
||||
const modalLogos = document.querySelector(".modal .section-logos");
|
||||
// Add a function to update the modal content
|
||||
function updateModalContent({ id, title, number, src, description, index }) {
|
||||
const arrowContainer = document.getElementById("arrows-container");
|
||||
modalImage.src = src;
|
||||
modalImage.id = id;
|
||||
modalImage.alt = title + " logo";
|
||||
modalTextDescription.textContent = description;
|
||||
modalTextTitle.textContent = title;
|
||||
modalLogos.innerHTML = "";
|
||||
const logoArray = logos[id] || [];
|
||||
// Reset styles and classes for modalLogos
|
||||
modalLogos.removeAttribute("style");
|
||||
modalLogos.className = "";
|
||||
|
||||
if (logoArray.length > 0) {
|
||||
const topRowDiv = document.createElement("div");
|
||||
topRowDiv.className = "top-row";
|
||||
const bottomRowDiv = document.createElement("div");
|
||||
bottomRowDiv.className = "bottom-row";
|
||||
|
||||
if (logoArray.length === 7) {
|
||||
// 4 on top, 3 on bottom
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
}
|
||||
for (let i = 4; i < 7; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
bottomRowDiv.appendChild(logoElem);
|
||||
}
|
||||
}else if (logoArray.length === 8) {
|
||||
// 4 on top, 4 on bottom
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
}
|
||||
for (let i = 4; i < 8; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
bottomRowDiv.appendChild(logoElem);
|
||||
}
|
||||
} else if (logoArray.length === 6) {
|
||||
// Special case: 3 on top, 3 on bottom
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
}
|
||||
for (let i = 3; i < 6; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
bottomRowDiv.appendChild(logoElem);
|
||||
}
|
||||
} else if (logoArray.length === 5) {
|
||||
// Special case: 3 on top, 2 on bottom
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
}
|
||||
for (let i = 3; i < 5; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
bottomRowDiv.appendChild(logoElem);
|
||||
}
|
||||
bottomRowDiv.style.justifyContent = "center"; // Center the logos
|
||||
} else if (logoArray.length === 4) {
|
||||
// Special case: 2 on top, 2 on bottom
|
||||
for (let i = 0; i < 2; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
}
|
||||
for (let i = 2; i < 4; i++) {
|
||||
const logoElem = createLogoElement(logoArray[i], title, id);
|
||||
bottomRowDiv.appendChild(logoElem);
|
||||
}
|
||||
bottomRowDiv.style.justifyContent = "center"; // Center the logos
|
||||
} else {
|
||||
// Default case
|
||||
logoArray.forEach((logoSrc) => {
|
||||
const logoElem = createLogoElement(logoSrc, title, id);
|
||||
topRowDiv.appendChild(logoElem);
|
||||
});
|
||||
}
|
||||
|
||||
modalLogos.appendChild(topRowDiv);
|
||||
if (bottomRowDiv.hasChildNodes()) {
|
||||
modalLogos.appendChild(bottomRowDiv);
|
||||
}
|
||||
} else {
|
||||
modalLogos.className = "flex-center";
|
||||
}
|
||||
if (id === "infrastructure") {
|
||||
arrowContainer.style.justifyContent = "end";
|
||||
} else {
|
||||
arrowContainer.style.justifyContent = "space-between";
|
||||
}
|
||||
}
|
||||
openModalBtns.forEach(function (btn, index) {
|
||||
btn.onclick = function () {
|
||||
const arrowContainer = document.getElementById("arrows-container");
|
||||
// Read the data-* attributes from the clicked li
|
||||
const id = btn.getAttribute("data-id");
|
||||
const title = btn.getAttribute("data-title");
|
||||
const description = btn.getAttribute("data-description");
|
||||
const number = btn.getAttribute("data-number");
|
||||
const src = btn.getAttribute("data-src");
|
||||
// Update the modal content with the data from the clicked li
|
||||
modalImage.id = id;
|
||||
modalImage.alt = title + " logo";
|
||||
modalTextDescription.textContent = description;
|
||||
modalTextTitle.textContent = title;
|
||||
|
||||
// Set the data index on the modal
|
||||
modal.setAttribute("data-index", index);
|
||||
|
||||
// Update the modal content with the data from the clicked li
|
||||
updateModalContent({ id, title, number, src, description, index });
|
||||
|
||||
// Show or hide the arrow buttons based on the index
|
||||
leftArrow.style.display = index === 0 ? "none" : "block";
|
||||
rightArrow.style.display =
|
||||
index === useCaseData.length - 1 ? "none" : "block";
|
||||
|
||||
modal.style.display = "block";
|
||||
|
||||
if (id === "infrastructure") {
|
||||
arrowContainer.style.justifyContent = "end";
|
||||
} else {
|
||||
arrowContainer.style.justifyContent = "space-between";
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
window.onclick = function (event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", function (event) {
|
||||
if (event.key === "Escape") {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -365,6 +365,10 @@
|
||||
"xp-market": "svg",
|
||||
"ledger-city": "svg",
|
||||
"forte": "svg",
|
||||
"futureverse": "svg",
|
||||
'first-ledger-bot': 'svg',
|
||||
"moai-finance": "svg",
|
||||
"orchestra-finance": "svg",
|
||||
"anchain-ai": "svg",
|
||||
"coil": "svg",
|
||||
"carbonland-trust": "svg",
|
||||
@@ -374,6 +378,7 @@
|
||||
"ripples-on-demand-liquidity": "svg",
|
||||
"ripples-cbdc-platform": "svg",
|
||||
"momento": "svg",
|
||||
"zerpmon": "png",
|
||||
"Crossmark": "png",
|
||||
"Edge": "png"
|
||||
|
||||
@@ -387,6 +392,22 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.orchestra-finance{
|
||||
max-height: 52px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
#use_case_companies_list {
|
||||
#first-ledger-bot {
|
||||
.biz-logo {
|
||||
max-height: 81px !important;
|
||||
}
|
||||
}
|
||||
#zerpmon {
|
||||
.biz-logo {
|
||||
max-height: 81px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
h1 {
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
/* Use Cases ---------------------------------------------------------------- */
|
||||
|
||||
// Define each category's logos
|
||||
$infrastructure-logos: "xrp-ledger", "gatehub", "towolabs", "xrpscan",
|
||||
"xrp-toolkit", "bithomp", "onthedex";
|
||||
$infrastructure-logos: "xrp-ledger", "gatehub", "towolabs", "xrpscan", "xrp-toolkit", "bithomp", "onthedex";
|
||||
$developer-tooling-logos: "cryptum", "evernode", "threezy", "tokenize";
|
||||
$interoperability-logos: "multichain";
|
||||
$wallet-logos: "crossmark", "edge", "gem-wallet", "xumm";
|
||||
$nfts-logos: "aesthetes", "audiotarky", "nftmaster", "peerkat", "sologenic_dex",
|
||||
"xrp-cafe", "xrp-oval";
|
||||
$exchanges-logos: "sologenic_dex", "xpmarket";
|
||||
$gaming-logos: "forte", "ledger-city";
|
||||
$nfts-logos: "aesthetes", "audiotarky", "nftmaster", "peerkat", "sologenic_dex", "xrp-cafe", "xrp-oval";
|
||||
$exchanges-logos: "sologenic_dex", "xpmarket", "orchestra-finance", "moai-finance", "first-ledger-bot";
|
||||
$gaming-logos: "forte", "ledger-city", "futureverse", "zerpmon";
|
||||
$security-logos: "anchain";
|
||||
$payments-logos: "ripple", "supermojo";
|
||||
$cbdc-logos: "ripple";
|
||||
@@ -30,6 +28,40 @@ $custody-logos: "gatehub", "bitgo";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content-uses {
|
||||
.first-ledger-bot{
|
||||
min-height: 80px !important;
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
content: url("../img/uses/first-ledger-bot.svg");
|
||||
}
|
||||
.orchestra-finance{
|
||||
content: url("../img/uses/orchestra-finance.svg");
|
||||
}
|
||||
.moai-finance{
|
||||
min-height: 80px !important;
|
||||
position: relative;
|
||||
bottom: 20px;
|
||||
content: url("../img/uses/moai-finance.svg");
|
||||
}
|
||||
.ledger-city{
|
||||
margin: 0px !important;
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
left: 6px;
|
||||
max-height: 47px !important;
|
||||
}
|
||||
.zerpmon {
|
||||
margin: 0px;
|
||||
min-width: 80px;
|
||||
min-height: 84px;
|
||||
position: relative;
|
||||
bottom: 13px;
|
||||
content: url("../img/uses/zerpmon.png") !important;
|
||||
}
|
||||
}
|
||||
|
||||
#use_case_companies_list {
|
||||
#threezy {
|
||||
.biz-logo {
|
||||
@@ -37,7 +69,9 @@ $custody-logos: "gatehub", "bitgo";
|
||||
content: url("../img/uses/modallogos/threezy.png");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html.light {
|
||||
.cryptum {
|
||||
content: url(../img/uses/lightmode/cryptum.jpg) !important;
|
||||
@@ -49,6 +83,7 @@ html.light {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Use the mixin for each category
|
||||
@include create-logo-classes($infrastructure-logos);
|
||||
@include create-logo-classes($developer-tooling-logos);
|
||||
@@ -105,6 +140,7 @@ html.light {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 10;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
top: 30px;
|
||||
}
|
||||
@@ -123,6 +159,7 @@ html.light {
|
||||
|
||||
.left-arrow {
|
||||
margin-left: 40px;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
@@ -130,6 +167,7 @@ html.light {
|
||||
|
||||
.right-arrow {
|
||||
margin-right: 40px;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
@@ -287,6 +325,7 @@ html.light {
|
||||
.bottom-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -313,6 +352,20 @@ html.light {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#use-case-card-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.use-case-circle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -643,11 +643,15 @@ pre code, pre {
|
||||
@each $company, $type in ('bitgo': 'svg',
|
||||
'sologenic-nft': 'svg',
|
||||
'carbonland-trust': 'svg',
|
||||
'futureverse': 'png',
|
||||
"moai-finance": "svg",
|
||||
"orchestra-finance": "svg",
|
||||
'x-tokenize': 'svg',
|
||||
'casino-coin': 'svg',
|
||||
'xrp-cafe': 'svg',
|
||||
'coil': 'svg',
|
||||
'xrp-toolkit': 'svg',
|
||||
'first-ledger-bot': 'svg',
|
||||
'cryptum': 'svg',
|
||||
'xrpl-org-ledger-explorer': 'svg',
|
||||
'evernode': 'svg',
|
||||
@@ -677,8 +681,19 @@ pre code, pre {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.modal-content-uses{
|
||||
.first-ledger-bot{
|
||||
content: url("../img/uses/lightmode/first-ledger-bot.svg");
|
||||
}
|
||||
.moai-finance{
|
||||
content: url("../img/uses/lightmode/moai-finance.svg");
|
||||
}
|
||||
.orchestra-finance{
|
||||
max-height: 52px ;
|
||||
margin: 0;
|
||||
content: url("../img/uses/lightmode/orchestra-finance.svg");
|
||||
}
|
||||
}
|
||||
|
||||
// Monochrome logos; invert.
|
||||
#bitpay,
|
||||
|
||||
Reference in New Issue
Block a user