first pass usecases update. desktop.

assets/js/use-cases.js

@@ -0,0 +1,59 @@
+$(document).ready(() => {
+
+    //show these featured on load. 
+    const show_cats_arr = ["infrastructure", "developer_tooling"]
+
+    function refreshList() {
+
+        $("#use_case_companies_list .card-uses").hide()
+
+        for (const category of show_cats_arr) {
+            $(`#use_case_companies_list .card-uses.category_${category}`).show()  
+        } 
+
+
+        const featured_count = show_cats_arr.filter( (current) => {
+            return current == "infrastructure" || current == "developer_tooling"
+        })
+
+        const other_count = show_cats_arr.filter( (current) => {
+            if ( current !== "infrastructure" && current !== "developer_tooling" ){
+                return current
+            }
+        })
+
+        // update category counts
+        if (featured_count.length === 0) {
+            $("#featured_count").hide()
+        }else {
+            $("#featured_count").html(featured_count.length)
+            $("#featured_count").show()
+        }
+
+        if (other_count.length === 0) {
+            $("#other_count").hide()
+        }else{
+            $("#other_count").html(other_count.length)
+            $("#other_count").show()
+        }
+    }
+
+
+  $(".cat_checkbox input").change((event) => {
+    const lang = $(event.target).val().toLowerCase().split(' ').join('_')
+    const lang_checked = $(event.target).prop("checked")
+    
+
+    if (lang_checked) {
+        show_cats_arr.push(lang)
+    } else {
+        show_cats_arr.indexOf(lang) !== -1 && show_cats_arr.splice(show_cats_arr.indexOf(lang), 1)
+    }
+
+    // refresh all visible. 
+    refreshList()
+  })
+
+    // on first load show the featured cats. 
+    refreshList()
+})

styles/_pages.scss

@@ -157,9 +157,9 @@
 }
 
 #use-case-card-grid {
-  @include media-breakpoint-up(lg) {
-    margin-top: -40px; // offset the 40px margin of the cols
-  }
+  // @include media-breakpoint-up(lg) {
+  //   margin-top: -40px; // offset the 40px margin of the cols
+  // }
 }
 
 #validator-graphic {
@@ -168,13 +168,35 @@
 
 .page-uses {
   &::before {
+    transform: scaleX(-1);
     background-image: url(../img/backgrounds/use-cases-blue.svg);
   }
-  @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
-    ##{$usecase} {
-      content: url("../img/icons/#{$usecase}.svg");
-    }
+
+@each $usecase in "infrastructure",
+"developer_tooling",
+"interoperability",
+"wallet",
+"nfts",
+"exchanges",
+"gaming",
+"security",
+"payments",
+"web_monetization",
+"sustainability",
+"cbdc",
+"custody",
+"defi" {
+  ##{$usecase} {
+    max-height: 48px;
+    content: url("../img/icons/usecases/ic_#{$usecase}.png");
   }
+}
+
+  // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
+  //   ##{$usecase} {
+  //     content: url("../img/icons/#{$usecase}.svg");
+  //   }
+  // }
 
   @each $company,$card-graphic in (
     "bitgo": "magenta-3",

styles/_status-labels.scss

@@ -336,6 +336,8 @@
   &.label-payment-channels,
   &.label-アカウント,
   &.label-payment-channel,
+  &.label-use-infrastructure,
+  &.label-use-security,
   &.chip-indigo {
     @include chip-indigo;
   }
@@ -344,6 +346,7 @@
   &.label-xrp,
   &.label-ブロックチェーン,
   &.label-non-fungible-tokens-nfts,
+  &.label-use-nfts,
   &.chip-green {
     @include chip-green;
   }
@@ -351,6 +354,8 @@
   &.label-checks,
   &.label-core-server,
   &.label-コアサーバー,
+  &.label-use-interoperability,
+  &.label-use-web_monetization,
   &.chip-purple  {
     @include chip-purple;
   }
@@ -359,6 +364,8 @@
   &.label-security,
   &.label-複数通貨間,
   &.label-セキュリティ,
+  &.label-use-gaming,
+  &.label-use-defi,
   &.chip-yellow {
     @include chip-yellow;
   }
@@ -369,6 +376,8 @@
   &.label-分散型取引所,
   &.label-スマートコントラクト,
   &.label-トランザクション送信,
+  &.label-use-developer_tooling,
+  &.label-use-payments,
   &.chip-blue {
     @include chip-blue;
   }
@@ -378,6 +387,8 @@
   &.label-development,
   &.label-トークン,
   &.label-開発,
+  &.label-use-wallet,
+  &.label-use-sustainability,
   &.chip-orange {
     @include chip-orange;
   }
@@ -388,6 +399,8 @@
   &.label-手数料,
   &.label-支払い,
   &.label-データ保持,
+  &.label-use-exchanges,
+  &.label-use-custody,
   &.chip-magenta {
     @include chip-magenta;
   }

template/page-uses.html.jinja

@@ -16,9 +16,26 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
+
+<!-- temp -->
+<style>
+  .container-new {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  @media (min-width: 992px) {
+    .container-new {
+      padding-left: 64px;
+      padding-right: 64px;
+    }
+  }
+</style>
+
+
 <div class="overflow-hidden">
    <section class="py-26 text-center">
-    <div class="col-lg-5 mx-auto text-center">
+    <div class="col-lg-6 mx-auto text-center">
       <div class="d-flex flex-column-reverse">
         <h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
         <h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
@@ -26,34 +43,75 @@
     </div>
   </section>
 
-
   <section class="container-new py-26">
-    <ul class="card-grid card-grid-3xN ls-none" id="use-case-card-grid">
+    <div class="col-lg-5 p-3 mb-5">
+      <div class="d-flex flex-column-reverse">
+        <h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
+        <h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
+      </div>
+    </div>
+    <ul class="card-grid card-grid-3xN ls-none mt-4 pt-2" id="use-case-card-grid">
       {% set uses = [
-        { "id": "micropayments",
-          "title": _("Micropayments"),
-          "description": _("Developers are using the XRP Ledger to build innovative products for gaming, content, and web monetization, among other applications where currency is at the center.")},
-        { "id": "wallets",
-          "title": _("Cryptocurrency Wallets"),
-          "description": _("Use the Ledger to build digital wallets to store private and public passwords and interact with various blockchains to send and receive digital assets, including XRP.")},
-        { "id": "exchanges",
-          "title": _("Exchanges"),
-          "description": _("Build sophisticated exchanges where users can invest and trade crypto and non-blockchain assets such as stocks, ETFs, and commodities.")},
-        { "id": "stablecoins",
-          "title": _("Stablecoins"),
-          "description": _("Financial institutions can use Issued Currencies to issue stablecoins on the XRP Ledger. XRPL’s integrated decentralized exchange (DEX) allows neutral, counterparty-free digital assets to be seamlessly exchanged to and from “issued assets,” including stablecoins.")},
-        { "id": "nft",
-          "title": _("NFTs"),
-          "description": _("XRPL allows issuance of IOUs which can represent a currency of any value, which can be extended to the issuance of non-fungible tokens (NFTs).")},
-        { "id": "defi",
-          "title": _("DeFi"),
-          "description": _("Provide access to financial products and services online in a decentralized and borderless manner on XRPL, with decentralized smart contract protocols replacing the traditional role of financial institutions.")},
-        { "id": "cbdc",
-          "title": _("CBDCs"),
-          "description": _("The CBDC Private Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).")},
+        
+          {"id": "infrastructure",
+            "title": _("Infrastructure"),
+            "description": _("Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.")},
+
+          {"id": "developer_tooling",
+            "title": _("Developer Tooling"),
+            "description": _("Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.")},
+
+          {"id": "interoperability",
+            "title": _("Interoperability"),
+            "description": _("Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.")},
+
+          {"id": "wallet",
+            "title": _("Wallet"),
+            "description": _("Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.")},
+
+          {"id": "nfts",
+            "title": _("NFTs"),
+            "description": _("XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).")},
+
+          {"id": "exchanges",
+            "title": _("Exchanges"),
+            "description": _("Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.")},
+
+          {"id": "gaming",
+            "title": _("Gaming"),
+            "description": _("The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.")},
+
+          {"id": "security",
+            "title": _("Security"),
+            "description": _("Build services and tools that help prevent and combat fraudulent activity with the XRPL.")},
+
+          {"id": "payments",
+            "title": _("Payments"),
+            "description": _("Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.")},
+
+          {"id": "web_monetization",
+            "title": _("Web Monetization"),
+            "description": _("Support creators and their content directly leveraging the power of the XRP Ledger.")},
+
+          {"id": "sustainability",
+            "title": _("Sustainability"),
+            "description": _("Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).")},
+
+          {"id": "cbdc",
+            "title": _("CBDC"),
+            "description": _("A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).")},
+
+          {"id": "custody",
+            "title": _("Custody"),
+            "description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")},
+
+          {"id": "defi",
+            "title": _("DeFi"),
+            "description": _("Provide access to financial products and services replacing the traditional role of financial institutions.")},
+
       ] %}
       {% for use in uses %}
-      <li class="col ls-none">
+      <li class="col ls-none p-3">
         <img id="{{use.id}}" alt="{{use.title}} icon">
         <h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
         <p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
@@ -62,12 +120,9 @@
     </ul>
   </section>
 
-  <div class="position-relative d-none-sm">
-    <img src="./img/backgrounds/use-cases-orange.svg" id="use-cases-orange">
-  </div>
 
   <section class="container-new py-26">
-    <div class="col-sm-7 p-0">
+    <div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
       <div class="d-flex flex-column-reverse">
         <h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
         <h6 class="eyebrow mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
@@ -76,75 +131,479 @@
     </div>
 
     {% set cards = [
-      { "link": "https://www.bitgo.com/",
-        "name": "BitGo",
-        "id": "bitgo",
-        "title": _("Asset Custody"),
-        "description": _("BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.")},
-      { "link": "https://bitpay.com/",
-        "id": "bitpay",
-        "name": "BitPay",
-        "title": _("Payment Processing"),
-        "description": _("BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.")},
-      { "link": "https://coil.com/",
-        "id": "coil",
-        "name": "Coil",
-        "title": _("Web Monetization"),
-        "description": _("Coil provides web monetization as an alternative to traditional paid advertising. Coil uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRPL’s payment channels provide an ideal system for settling these micropayments at high speed and low cost.")},
-      { "link": "https://www.forte.io/",
-        "id": "forte",
-        "name": "Forte",
-        "title": _("Online Gaming"),
-        "description": _("Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.")},
-      { "link": "https://gatehub.net/",
-        "id": "gatehub",
-        "name": "Gatehub",
-        "title": _("Wallet and Platforms"),
-        "description": _("GateHub is a platform for the Internet of Value, built on the XRP Ledger protocol. It allows everyone to send, receive, trade and manage any type of assets.")},
-      { "link": "https://www.exodus.io/",
-        "id": "exodus",
-        "name": "Exodus",
-        "title": _("Wallets and Apps"),
-        "description": _("Exodus offers wallets and applications for securing, managing and exchanging crypto.")},
-      { "link": "https://ripple.com/",
-        "id": "ripple",
-        "name": "Ripple",
-        "title": _("On-Demand Liquidity"),
-        "description": _("Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.")},
-      { "link": "https://towolabs.com",
-        "id": "towo",
-        "name": "Towo Labs",
-        "title": _("Infrastructure"),
-        "description": _("Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.")},
-      { "link": "https://raisedinspace.com/",
-        "id": "raisedinspace",
-        "name": "Raised in Space",
-        "title": _("Music"),
-        "description": _("Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.")},
-      { "link": "https://xrpl-labs.com/",
-        "id": "xrpl-labs",
-        "name": "XRPL Labs",
-        "title": _("Applications"),
-        "description": _("From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.")},
-      { "link": "https://xrplorer.com/",
-        "id": "xrplorer",
-        "name": "Xrplorer",
-        "title": _("Security"),
-        "description": _("Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.")},
+      {
+        "id": "",
+        "title": _("Aesthetes"),
+        "description": _("Aesthetes is a bridge between fine art and blockchain, enabling everyone, around the world, to buy and sell with just a click for fractional ownership of international physical art."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://aesthetes.art/",
+      },
+      {
+        "id": "",
+        "title": _("Anchain.AI"),
+        "description": _("AnChain.AI offers AI-powered intelligence enhancing blockchain security, risk, and compliance strategies."),
+        "category_id": "security",
+        "category_name": "Security",
+        "link": "https://anchain.ai",
+      },
+      {
+        "id": "",
+        "title": _("Anifie"),
+        "description": _("Anifie is an interactive event and immersive metaverse that provides a one-stop solution for brands who want to monetize their digital content IP."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://anifie.com/",
+      },
+      {
+        "id": "",
+        "title": _("Audiotarky"),
+        "description": _("Audiotarky is a new music streaming platform that prioritises artists and privacy over algorithms and shareholders."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://www.audiotarky.com/",
+      },
+      {
+        "id": "",
+        "title": _("Bithomp"),
+        "description": _("Bithomp is an XRPL explorer and toolkit, used by many cryptocurrency exchanges. Bithomp was launched in 2015 with a mission to build the most user-friendly XRPL explorer."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://bithomp.com/",
+      },
+      {
+        "id": "",
+        "title": _("Blockchain Benchmarking Framework"),
+        "description": _("Blockchain Benchmarking Framework focuses on the development of a user-friendly UI that abstracts the underlying complexities of blockchain technology."),
+        "category_id": "developer_tooling",
+        "category_name": "Developer Tooling",
+        "link": "https://github.com/UNIC-IFF/blockchain-benchmarking-framework/",
+      },
+      {
+        "id": "",
+        "title": _("Carbonland Trust"),
+        "description": _("Carbonland Trust offers transparent nature-based carbon credits, and inclusive access to voluntary carbon markets for landowners and corporations alike. "),
+        "category_id": "sustainability",
+        "category_name": "Sustainability",
+        "link": "https://www.carbonlandtrust.com/",
+      },
+      {
+        "id": "",
+        "title": _("Casino Coin"),
+        "description": _("CasinoCoin (CSC) is a digital currency developed specifically for the regulated gaming industry."),
+        "category_id": "other",
+        "category_name": "Other",
+        "link": "https://casinocoin.im/",
+      },
+      {
+        "id": "",
+        "title": _("Coil"),
+        "description": _("Coil provides better ways to access and reward the creators, publishers and platforms that create the content people love."),
+        "category_id": "web_monetization",
+        "category_name": "Web Monetization",
+        "link": "https://coil.com/",
+      },
+      {
+        "id": "",
+        "title": _("Cryptum"),
+        "description": _("Cryptum is an API/SDK platform for integrating the XRP Ledger with any application."),
+        "category_id": "developer_tooling",
+        "category_name": "Developer Tooling",
+        "link": "https://blockforce.in/products/cryptum",
+      },
+      {
+        "id": "",
+        "title": _("Evernode"),
+        "description": _("Evernode proposes a permissionless, flexible, scalable Layer 2 smart contract network built from the XRP Ledger."),
+        "category_id": "developer_tooling",
+        "category_name": "Developer Tooling",
+        "link": "https://evernode.wordpress.com/",
+      },
+      {
+        "id": "",
+        "title": _("Gatehub XRP Ledger Markets"),
+        "description": _("Gatehub XRP Ledger Markets is an explorer to track Gatehub's inssuances on the XRP Ledger."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://gatehub.net/markets",
+      },
+      {
+        "id": "",
+        "title": _("Junkiverse"),
+        "description": _("Junkiverse is a collection of unique 3D Voxel characters that serve digital identity in genre-breaking MMORPG."),
+        "category_id": "gaming",
+        "category_name": "Gaming",
+        "link": "https://xrpjunkies.club/",
+      },
+      {
+        "id": "",
+        "title": _("Ledger City"),
+        "description": _("Ledger City is a crypto real estate game powered by the XRP Ledger."),
+        "category_id": "gaming",
+        "category_name": "Gaming",
+        "link": "https://ledgercitygame.com/",
+      },
+      {
+        "id": "",
+        "title": _("Mint NFT"),
+        "description": _("mintNFT is a premium studio and marketplace for NFTs that makes collecting NFTs simple, safe and social."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://mintnft.com/",
+      },
+      {
+        "id": "",
+        "title": _("Multichain"),
+        "description": _("Multichain is the ultimate Router for web3. It is an infrastructure developed for arbitrary cross-chain interactions."),
+        "category_id": "interoperability",
+        "category_name": "Interoperability",
+        "link": "https://multichain.org/",
+      },
+      {
+        "id": "",
+        "title": _("NFT Master"),
+        "description": _("NFT Master is an NFT marketplace where creators can buy, mint and sell NFTs."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://nftmaster.com/",
+      },
+      {
+        "id": "",
+        "title": _("OnTheDex"),
+        "description": _("OnTheDex is a quality source of information for aggregator sites to take live feeds of XRPL token activity."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://onthedex.live/",
+      },
+      {
+        "id": "",
+        "title": _("onXRP"),
+        "description": _("onXRP is an NFT marketplace where creators can buy, mint and sell NFTs built by the XPUNKs."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://onxrp.com/about/",
+      },
+      {
+        "id": "",
+        "title": _("Palisade"),
+        "description": _("Palisade is a secure, regulated, and insured multi-chain custody platform paired with a non-custodial mobile app intended as a day-to-day wallet."),
+        "category_id": "custody",
+        "category_name": "Custody",
+        "link": "https://www.palisade.co/",
+      },
+      {
+        "id": "",
+        "title": _("Peerkat"),
+        "description": _("Peerkat is an NFT services and tooling provider for the XRPL community."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://peerkat.io/",
+      },
+      {
+        "id": "",
+        "title": _("Ripple Reefs"),
+        "description": _("The RippleReefs project features a 10,000 piece NFT collection that will directly enable the community to support the conservation of oceans and marine life."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://linktr.ee/RippleReefs",
+      },
+      {
+        "id": "",
+        "title": _("Sologenic DEX"),
+        "description": _("Sologenic DEX is a popular decentralized exchange on the XRP Ledger made by Sologenic."),
+        "category_id": "exchanges",
+        "category_name": "Exchanges",
+        "link": "https://sologenic.org/",
+      },
+      {
+        "id": "",
+        "title": _("Sologenic NFT"),
+        "description": _("Sologenic NFT is an NFT marketplace designed by Sologenic."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://sologenic.org/nfts/marketplace?network=mainnet",
+      },
+      {
+        "id": "",
+        "title": _("Sologenic XRPL Trading Data"),
+        "description": _("Sologenic XRPL Trading Data is an API that is currently being used in the Sologenic DEX production environment."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://github.com/sologenic/xrpl-trading-data",
+      },
+      {
+        "id": "",
+        "title": _("Trustline"),
+        "description": _("Trustline is a new startup developing new ways to represent assets on the XRPL."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://trustline.co/",
+      },
+      {
+        "id": "",
+        "title": _("X-tokenize"),
+        "description": _("X-Tokenize is a command line tool to simplify the process of creating, managing and distributing issued currencies and eventually NFTs on the XRPL."),
+        "category_id": "developer_tooling",
+        "category_name": "Developer Tooling",
+        "link": "https://x-tokenize.com/",
+      },
+      {
+        "id": "",
+        "title": _("xMochiDonuts"),
+        "description": _("xMochiDonuts is an NFT collection made exclusively for the XRPL community."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://linktr.ee/xMochiDonuts",
+      },
+      {
+        "id": "",
+        "title": _("XP Market"),
+        "description": _("XP Market is a price-tracking website for cryptoassets on the XRPL coupled with a decentralized exchange."),
+        "category_id": "exchanges",
+        "category_name": "Exchanges",
+        "link": "https://xpmarket.com/",
+      },
+      {
+        "id": "",
+        "title": _("Xpunks"),
+        "description": _("Xpunks is an NFT collection with a limited series of 10,000 NFTs generated on the XRP Ledger."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://xpunks.club/",
+      },
+      {
+        "id": "",
+        "title": _("XRP Cafe"),
+        "description": _("XRP Cafe is an NFT marketplace built by the community that aims to be the easiest way to build, sell and mint NFTs."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://xrp.cafe/",
+      },
+      {
+        "id": "",
+        "title": _("XRP Toolkit"),
+        "description": _("XRP Toolkit is a platform for managing crypto assets and trading on the XRP Ledger's decentralized exchange."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://www.xrptoolkit.com/",
+      },
+      {
+        "id": "",
+        "title": _("XRPL Foundation"),
+        "description": _("The XRP Ledger Foundation is an independent non-profit entity which works to support development and usage of the XRP Ledger."),
+        "category_id": "other",
+        "category_name": "Other",
+        "link": "https://foundation.xrpl.org/",
+      },
+      {
+        "id": "",
+        "title": _("XRPL Merch"),
+        "description": _("XRPL Merch is a XRPL focused merch shop."),
+        "category_id": "other",
+        "category_name": "Other",
+        "link": "https://xrplmerch.com/",
+      },
+      {
+        "id": "",
+        "title": _("XRPL Rosetta"),
+        "description": _("XRPL Rosetta explores fiat data on XRPL through visualization."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://threexrp.dev/",
+      },
+      {
+        "id": "",
+        "title": _("XRPL.org Ledger Explorer"),
+        "description": _("XRPL.org's Ledger Explorer is a block explorer of the XRP Ledger."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://livenet.xrpl.org/",
+      },
+      {
+        "id": "",
+        "title": _("XRPScan"),
+        "description": _("XRPSCAN is an explorer and analytics platform for the XRP Ledger. We provide a clean and simple way to look up accounts, ledgers and transactions."),
+        "category_id": "infrastructure",
+        "category_name": "Infrastructure",
+        "link": "https://xrpscan.com/",
+      },
+      {
+        "id": "",
+        "title": _("xShrooms"),
+        "description": _("xShrooms is an NFT collection with 10,000 unique collectible xshrooms minted as NFTs on the XRP Ledger."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://xshrooms.art/",
+      },
+      {
+        "id": "",
+        "title": _("xSPECTAR"),
+        "description": _("xSPECTAR is the Xclusive Society in the metaverse for the protection of equity, currencies, tokens, assets and realty on the XRPL."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://xspectar.com/",
+      },
+      {
+        "id": "",
+        "title": _("Xumm Wallet"),
+        "description": _("Xumm Wallet is a non custodial wallet with superpower for the XRP Ledger."),
+        "category_id": "wallet",
+        "category_name": "Wallet",
+        "link": "https://xumm.app/#team",
+      },
+      {
+        "id": "",
+        "title": _("Yoniverse"),
+        "description": _("The purpose of the Yonix art collective is to give creatives the possibility to join together in creating collective value. They create art, music, comics and phygitals."),
+        "category_id": "nfts",
+        "category_name": "NFTs",
+        "link": "https://linktr.ee/yoniverse.one",
+      },
+
     ] %}
 
-    <div class="row row-cols-1 row-cols-lg-3 card-deck">
-      {% for card in cards %}
-      <a class="card" href="{{card.link}}" target="_blank" id="{{card.id}}">
-        <div class="card-body">
-          <img class="mw-100 mb-3 biz-logo" alt="{{card.name|default(card.id)}}">
-          <h4 class="card-title h5">{{card.title}}</h4>
-          <p class="card-text">{{card.description}}</p>
+<!-- temp -->
+<style>
+  .card-title {
+    margin-bottom: 0.5rem;
+    line-height: 26px;
+  }
+  .card-uses {
+    padding: 16px;
+    margin: 0;
+    text-decoration: none;
+    transition: all 0.35s ease-out;
+  }
+  .card-uses:hover {
+    text-decoration: none;
+    color: #E0E0E1;
+    transform: translateY(-16px);
+    text-decoration: none;
+  }
+  .card-body {
+    background: #232325;
+    border-radius: 8px;
+    height: 100%;
+    padding: 32px;
+    margin: 0;
+  }
+  .page-events .label {
+    font-weight: normal;
+    font-size: 14px;
+    margin: 0;
+    padding-left: 26px;
+  }
+  .category-header {
+    font-weight: bold;
+    /*color: $gray-300;*/
+    color: #c1c1c2;
+  }
+  .category-checkbox {
+    display: flex;
+    align-items: center;
+  }
+  .category-checkbox label {
+    font-weight: normal;
+    font-size: 14px;
+    margin: 0;
+    padding-left: 26px;
+  }
+  .category_count {
+    padding: 0px 8px;
+    width: 24px;
+    height: 16px;
+    /* Blue-Purple / Blue-Purple 80 */
+    background: #350080;
+    border-radius: 100px;
+
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 16px;
+    /* Blue-Purple / Blue-Purple 30 */
+    color: #B480FF;
+  }
+  .page-events {
+    position: sticky;
+    top: 10px;
+  }
+
+
+  @media (min-width: 992px) {
+    .card-uses {
+      padding: 24px;
+    }
+
+
+  }
+
+</style>
+
+<!-- // TODO:rename events- css  -->
+
+    <div class="row col-12 m-0 p-0 mt-4 pt-2">
+      <div class="col-3 m-0 p-0 mt-2 d-none d-lg-block">
+
+        {% set featured_categories = [
+            "Infrastructure",
+            "Developer Tooling",
+        ] %}
+
+        {% set other_categories = [
+            "Interoperability",
+            "Wallet",
+            "NFTs",
+            "Exchanges",
+            "Gaming",
+            "Security",
+            "Payments",
+            "Web Monetization",
+            "Sustainability",
+            "CBDCs",
+            "Custody",
+            "DeFi",
+            "Other",
+        ] %}
+
+        <div class="p-3 page-events">
+            <form >
+              <p class="category-header mb-4">Featured Categories <span id="featured_count" class="category_count">2</span></p>
+                {% for category in featured_categories %}
+                  <div class="cat_checkbox category-checkbox pb-2">
+                      <input class="events-filter" type="checkbox" name="categories" id="input_{{category}}" value="{{category}}" checked>
+                      <label for="input_{{category}}">{{ category }}</label>
+                  </div>
+                {% endfor %}
+
+              <br><br>
+
+              <p class="category-header pt-4 mt-3 mb-4">Other Categories <span id="other_count" class="category_count">2</span></p>    
+                {% for category in other_categories %}
+                  <div class="cat_checkbox category-checkbox pb-2">
+                      <input class="events-filter" type="checkbox" name="categories" id="input_{{category}}" value="{{category}}">
+                      <label for="input_{{category}}">{{ category }}</label>
+                  </div>
+                {% endfor %}
+            </form>
         </div>
-        <div class="card-footer">&nbsp;</div>
-      </a>
-      {% endfor %}
+      </div>
+
+      <!-- cards -->
+      <div class="right row col row-cols-lg-2 m-0 p-0" id="use_case_companies_list">
+
+        {% for card in cards %}
+        <a class="card-uses category_{{card.category_id}}" href="{{card.link}}" target="_blank" id="{{card.id}}">
+          <div class="card-body row">
+            <!-- <img class="mw-100 mb-3 biz-logo" alt="{{card.name|default(card.id)}}"> -->
+            <h4 class="card-title h6">{{card.title}}</h4>
+            <p class="card-text">{{card.description}}</p>
+            <div class="align-self-end"><span class="label label-use-{{card.category_id}}">{{card.category_name}}</span></div>
+          </div>
+        </a>
+        {% endfor %}
+
+      </div>
     </div>
+
   </section>
 </div>
 
@@ -160,3 +619,8 @@
     })
     </script>
 {% endblock analytics %}
+
+
+{% block endbody %}
+<script type="application/javascript" src="{{currentpage.prefix}}assets/js/use-cases.js"></script>
+{% endblock %}