Merge branch 'master' into py_time_escrow

assets/img/uses/left-arrow-light.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.5" stroke="#C1C1C2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 20.9995H17.414L18.707 22.2925C19.098 22.6825 19.098 23.3165 18.707 23.7065C18.512 23.9015 18.256 23.9995 18 23.9995C17.744 23.9995 17.488 23.9015 17.293 23.7065L14.294 20.7065C14.201 20.6145 14.128 20.5045 14.077 20.3815C14.027 20.2605 14.001 20.1315 14.001 20.0025L14 19.9995C14 19.8695 14.027 19.7395 14.077 19.6175C14.128 19.4945 14.201 19.3845 14.293 19.2925L17.293 16.2925C17.684 15.9025 18.316 15.9025 18.707 16.2925C19.098 16.6825 19.098 17.3165 18.707 17.7065L17.414 18.9995H25C25.552 18.9995 26 19.4475 26 19.9995C26 20.5515 25.552 20.9995 25 20.9995Z" fill="#343437"/>
+</svg>

assets/img/uses/left-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.5" stroke="#454549"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 20.9995H17.414L18.707 22.2925C19.098 22.6825 19.098 23.3165 18.707 23.7065C18.512 23.9015 18.256 23.9995 18 23.9995C17.744 23.9995 17.488 23.9015 17.293 23.7065L14.294 20.7065C14.201 20.6145 14.128 20.5045 14.077 20.3815C14.027 20.2605 14.001 20.1315 14.001 20.0025L14 19.9995C14 19.8695 14.027 19.7395 14.077 19.6175C14.128 19.4945 14.201 19.3845 14.293 19.2925L17.293 16.2925C17.684 15.9025 18.316 15.9025 18.707 16.2925C19.098 16.6825 19.098 17.3165 18.707 17.7065L17.414 18.9995H25C25.552 18.9995 26 19.4475 26 19.9995C26 20.5515 25.552 20.9995 25 20.9995Z" fill="#A2A2A4"/>
+</svg>

assets/img/uses/momento.svg

@@ -0,0 +1,90 @@
+<svg width="68" height="40" viewBox="0 0 68 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.0293 23.7356V33.543L43.164 23.3982L43.1842 13.6602L35.0293 23.7356Z" fill="url(#paint0_linear_2238_120)"/>
+<path d="M0 4.87891V40H10.9578V20.4812L29.8571 40V29.9859L9.52974 4.87891H0Z" fill="url(#paint1_linear_2238_120)"/>
+<path d="M0 4.87887L7.44761 0H15.9962L9.52974 4.87887H0Z" fill="url(#paint2_linear_2238_120)"/>
+<path d="M15.9958 0L35.0284 23.7352L29.8561 29.9859L9.5293 4.87944L15.9958 0Z" fill="url(#paint3_linear_2238_120)"/>
+<path d="M10.957 40.0002L17.764 27.5123L10.957 20.4824V40.0002Z" fill="url(#paint4_linear_2238_120)"/>
+<path d="M67.3679 30.0273H56.4102V39.9992H67.3679V30.0273Z" fill="url(#paint5_linear_2238_120)"/>
+<path d="M56.4096 40.0004L43.1631 23.3982L43.1832 13.6602L56.4096 30.0286V40.0004Z" fill="url(#paint6_linear_2238_120)"/>
+<path d="M47.8149 7.98047L67.3683 30.0272H56.4105L43.1836 13.6593" fill="url(#paint7_linear_2238_120)"/>
+<path d="M43.184 13.6593L35.0291 23.7348L30.2578 17.7805L38.5925 7.98047H47.8153" fill="url(#paint8_linear_2238_120)"/>
+<path d="M30.258 17.7812L24.9922 23.9705L29.857 29.9874L35.0293 23.7362L30.258 17.7812Z" fill="url(#paint9_linear_2238_120)"/>
+<path d="M47.8149 17.7669V7.98047L43.1836 13.6593L47.1614 18.5799L47.8149 17.7669Z" fill="url(#paint10_linear_2238_120)"/>
+<path d="M43.1833 13.6593L38.5918 7.98047V17.6289L39.2728 18.4836L43.1833 13.6593Z" fill="url(#paint11_linear_2238_120)"/>
+<path d="M35.0291 23.7344V33.5417L29.8574 39.9997V29.9856L35.0291 23.7344Z" fill="url(#paint12_linear_2238_120)"/>
+<path d="M43.1631 23.3982L47.1605 18.5813L43.1832 13.6602L43.1631 23.3982Z" fill="url(#paint13_linear_2238_120)"/>
+<path d="M43.184 13.6602L39.2734 18.4844L43.1638 23.3982" fill="url(#paint14_linear_2238_120)"/>
+<defs>
+<linearGradient id="paint0_linear_2238_120" x1="34.8759" y1="23.6049" x2="44.5322" y2="23.6049" gradientUnits="userSpaceOnUse">
+<stop stop-color="#50ECB1"/>
+<stop offset="0.14" stop-color="#50E7B5"/>
+<stop offset="0.29" stop-color="#51DAC1"/>
+<stop offset="0.45" stop-color="#54C3D4"/>
+<stop offset="0.62" stop-color="#57A4F0"/>
+<stop offset="0.67" stop-color="#5999FB"/>
+<stop offset="1" stop-color="#023D86"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2238_120" x1="-0.43401" y1="22.4395" x2="29.6101" y2="22.4395" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCAB87"/>
+<stop offset="1" stop-color="#FF3CBF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2238_120" x1="-3.83889" y1="17.2732" x2="373.671" y2="17.2732" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCAB87"/>
+<stop offset="1" stop-color="#FF3CBF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2238_120" x1="30.6569" y1="12.5155" x2="10.446" y2="18.5976" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDA9F3"/>
+<stop offset="0.96" stop-color="#FF4082"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2238_120" x1="15.5889" y1="20.1934" x2="11.5586" y2="31.8935" gradientUnits="userSpaceOnUse">
+<stop stop-color="#946450"/>
+<stop offset="1" stop-color="#FF4082"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2238_120" x1="56.3301" y1="35.0099" x2="67.3282" y2="35.0099" gradientUnits="userSpaceOnUse">
+<stop stop-color="#50ECB1"/>
+<stop offset="1" stop-color="#5999FB"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2238_120" x1="42.616" y1="26.8303" x2="56.8705" y2="26.8303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#50ECB1"/>
+<stop offset="0.33" stop-color="#5999FB"/>
+<stop offset="1" stop-color="#023D86"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2238_120" x1="2220.51" y1="315.093" x2="2031.91" y2="825.302" gradientUnits="userSpaceOnUse">
+<stop stop-color="#50ECB1"/>
+<stop offset="1" stop-color="#5999FB"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2238_120" x1="44.2581" y1="6.43681" x2="29.0317" y2="24.0452" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#50ECB1"/>
+<stop offset="0.56" stop-color="#5999FB"/>
+<stop offset="0.91" stop-color="#023D86"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2238_120" x1="40.2475" y1="25.5142" x2="22.7044" y2="22.8805" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AA44A2"/>
+<stop offset="0.16" stop-color="#A846A6"/>
+<stop offset="0.33" stop-color="#A34FB3"/>
+<stop offset="0.5" stop-color="#9A5DC8"/>
+<stop offset="0.68" stop-color="#8E71E5"/>
+<stop offset="0.8" stop-color="#8482FF"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2238_120" x1="43.1573" y1="13.2802" x2="48.7227" y2="13.2802" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44A378"/>
+<stop offset="1" stop-color="#5999FB"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2238_120" x1="37.9982" y1="13.2317" x2="43.8369" y2="13.2317" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B5092"/>
+<stop offset="1" stop-color="#5999FB"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2238_120" x1="32.4464" y1="21.2679" x2="32.4464" y2="34.5963" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9C41A"/>
+<stop offset="1" stop-color="#FA9DC1"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2238_120" x1="42.0688" y1="18.5261" x2="47.3677" y2="18.5261" gradientUnits="userSpaceOnUse">
+<stop stop-color="#48D7A1"/>
+<stop offset="1" stop-color="#8482FF"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2238_120" x1="38.2721" y1="18.5261" x2="45.7399" y2="18.5261" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#50ECB1"/>
+<stop offset="0.91" stop-color="#023D86"/>
+</linearGradient>
+</defs>
+</svg>

assets/img/uses/right-arrow-light.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.5" stroke="#C1C1C2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 20.9995H22.586L21.293 22.2925C20.902 22.6825 20.902 23.3165 21.293 23.7065C21.488 23.9015 21.744 23.9995 22 23.9995C22.256 23.9995 22.512 23.9015 22.707 23.7065L25.706 20.7065C25.799 20.6145 25.872 20.5045 25.923 20.3815C25.973 20.2605 25.999 20.1315 25.999 20.0025L26 19.9995C26 19.8695 25.973 19.7395 25.923 19.6175C25.872 19.4945 25.799 19.3845 25.707 19.2925L22.707 16.2925C22.316 15.9025 21.684 15.9025 21.293 16.2925C20.902 16.6825 20.902 17.3165 21.293 17.7065L22.586 18.9995H15C14.448 18.9995 14 19.4475 14 19.9995C14 20.5515 14.448 20.9995 15 20.9995Z" fill="#343437"/>
+</svg>

assets/img/uses/right-arrow.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19.5" stroke="#454549"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 20.9995H22.586L21.293 22.2925C20.902 22.6825 20.902 23.3165 21.293 23.7065C21.488 23.9015 21.744 23.9995 22 23.9995C22.256 23.9995 22.512 23.9015 22.707 23.7065L25.706 20.7065C25.799 20.6145 25.872 20.5045 25.923 20.3815C25.973 20.2605 25.999 20.1315 25.999 20.0025L26 19.9995C26 19.8695 25.973 19.7395 25.923 19.6175C25.872 19.4945 25.799 19.3845 25.707 19.2925L22.707 16.2925C22.316 15.9025 21.684 15.9025 21.293 16.2925C20.902 16.6825 20.902 17.3165 21.293 17.7065L22.586 18.9995H15C14.448 18.9995 14 19.4475 14 19.9995C14 20.5515 14.448 20.9995 15 20.9995Z" fill="#A2A2A4"/>
+</svg>

assets/js/modal.js

@@ -0,0 +1,235 @@
+$(document).ready(() => {
+  const logos = {
+    infrastructure: [
+      "XRP-Ledger",
+      "Gatehub",
+      "towoLabs",
+      "xrpscan",
+      "xrp-toolkit",
+      "bithomp",
+      "onthedex",
+    ],
+    developer_tooling: [
+      "blockforce",
+      "Evernode",
+      "threezy",
+      "tokenize",
+    ],
+    interoperability: ["Allbridge", "futureverse", "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",
+      "Futureverse",
+      "ledger-city",
+      "onXRP",
+      "styngr",
+    ],
+    security: ["Anchain"],
+    payments: ["ripple", "SuperMojo"],
+    cbdc: ["ripple"],
+    sustainability: ["carbonland-trust", "Rootmaker"],
+    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 === 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";
+    }
+  });
+});

assets/js/theme-switch.js

@@ -5,6 +5,7 @@ function apply_color_scheme(theme) {
   const disable_theme = (theme == "dark") ? "light" : "dark";
   document.documentElement.classList.add(theme)
   document.documentElement.classList.remove(disable_theme)
+  document.documentElement.setAttribute("data-theme", theme)
   // $("#css-toggle-btn").prop( "checked", (theme == 'dark') );
 }
 

assets/js/use-cases.js

@@ -1,5 +1,4 @@
 $(document).ready(() => {
-
     //show these featured on load. 
     const show_cats_arr = ["infrastructure", "developer_tooling"]