adds logos to modals and logix to display different layouts based off logo size

assets/js/modal.js

@@ -2,14 +2,61 @@ $(document).ready(() => {
   const logos = {
     infrastructure: [
       "XRP-Ledger.png",
+      "Gatehub.png",
       "towoLabs.png",
       "xrpscan.png",
       "xrp-toolkit.png",
       "bithomp.png",
       "onthedex.png",
     ],
-    // "developer_tooling": ['logo3.png'],
+    developer_tooling: [
+      "blockforce.png",
+      "Evernode.png",
+      "threezy.png",
+      "tokenize.png",
+    ],
+    interoperability: ["Allbridge.png", "futureverse.png", "multichain.png"],
+    wallet: [
+      "Bitfrost.png",
+      "Crossmark.png",
+      "Edge.png",
+      "gem-wallet.png",
+      "Xumm.png",
+    ],
+    nfts: [
+      "aesthetes.png",
+      "audiotarky.png",
+      "nftmaster.png",
+      "peerkat.png",
+      "sologenic_dex.png",
+      "xrp-cafe.png",
+      "xrp-oval.png",
+    ],
+    exchanges: ["sologenic_dex.png", "XPMarket.png"],
+    gaming: [
+      "Forte.png",
+      "Futureverse.png",
+      "ledger-city.png",
+      "onXRP.png",
+      "styngr.png",
+    ],
+    security: ["Anchain.png"],
+    payments: ["ripple.png", "SuperMojo.png"],
+    cbdc: ["ripple.png"],
+    carbon_markets: ["carbonland-trust.png", "Rootmaker.png"],
+    other: ["casino-coin.png", "Momento.png"],
   };
+  // Helper function to create a logo element
+  function createLogoElement(logoSrc, title, id) {
+    const logoElem = document.createElement("img");
+    const src = `assets/img/uses/${id}/${logoSrc}`;
+    console.log({ src });
+    logoElem.src = src;
+    logoElem.alt = `${title} logo`;
+    logoElem.classList.add(`logo-item`);
+    logoElem.classList.add(`${logoSrc.replace(".png", "")}-logo`);
+    return logoElem;
+  }
   // Add two new constiables for arrow buttons
   const leftArrow = document.getElementById("leftArrow");
   const rightArrow = document.getElementById("rightArrow");
@@ -68,21 +115,73 @@ $(document).ready(() => {
     modalTextTitle.textContent = title;
     modalLogos.innerHTML = "";
     const logoArray = logos[id] || [];
-    // Set grid layout based on the number of logos
-    if (logoArray.length >= 3) {
-      modalLogos.style.display = "grid";
-      modalLogos.style.gridTemplateColumns = "repeat(2, 1fr)";
+    // 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.style.display = "flex";
-      modalLogos.style.justifyContent = "center";
+      modalLogos.className = "flex-center";
     }
-    logoArray.forEach((logoSrc) => {
-      const logoElem = document.createElement('img');
-      logoElem.src = `assets/img/uses/infrastructure/${logoSrc}`;
-      logoElem.alt = `${title} logo`;
-      logoElem.classList.add('logo-item');
-      modalLogos.appendChild(logoElem);
-    });
     if (id === "infrastructure") {
       arrowContainer.style.justifyContent = "end";
     } else {

assets/js/use-cases.js

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

styles/_use-cases.scss

@@ -3,9 +3,11 @@
   color: $gray-600;
   text-decoration: none;
 }
+
 .related-tasks-links a:hover {
   color: $black;
 }
+
 .use-case-external-link {
   border: 1px solid $gray-300;
 }
@@ -29,6 +31,7 @@
   color: #888;
   font-size: 1rem;
 }
+
 .arrows-container {
   position: absolute;
   top: 50%;
@@ -72,7 +75,8 @@
 }
 
 .modal-content-uses {
-  position: relative; /* Add position: relative to modal-content-uses */
+  position: relative;
+  /* Add position: relative to modal-content-uses */
   background-color: #232325;
   position: absolute;
   left: 50%;
@@ -86,6 +90,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .modal-content-uses::before {
   content: "";
   position: absolute;
@@ -93,15 +98,14 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background: linear-gradient(
-    90deg,
-    #b480ff -0.32%,
-    #5f00e6 32.7%,
-    #1aa4ff 61.53%,
-    #19ff83 100.32%,
-    #19ff83 100.32%
-  );
+  background: linear-gradient(90deg,
+      #b480ff -0.32%,
+      #5f00e6 32.7%,
+      #1aa4ff 61.53%,
+      #19ff83 100.32%,
+      #19ff83 100.32%);
 }
+
 .content-section {
   width: 100%;
   display: flex;
@@ -123,6 +127,7 @@
   text-align: center;
   color: #ffffff;
 }
+
 .section-text-description {
   max-width: 320px;
   font-family: "Work Sans";
@@ -150,12 +155,14 @@
   width: 218px;
   height: 96px;
 }
+
 .arrow-animation {
   position: relative;
   right: 23px;
   top: -11px;
   width: 60px !important;
 }
+
 .explore-projects {
   font-family: "Work Sans";
   font-style: normal;
@@ -174,10 +181,43 @@
   border-top: 1px solid #ccc;
 }
 
+.threezy-logo {
+  margin: 4px;
+  max-height: 38px;
+}
+
+.blockforce-logo {
+  margin: 0px !important;
+  max-height: 45px !important;
+}
+
+.Evernode-logo {
+  margin-right: 39px;
+}
+
+.logo-grid {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 8px;
+  justify-items: center;
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+}
+
+.top-row,
+.bottom-row {
+  display: flex;
+  justify-content: center;
+}
+
 .logo-item {
-  width: 50px;
-  height: 50px;
-  margin: 10px;
+  max-height: 24px;
+  max-width: 107px;
+  margin: 10px 11px;
 }
 
 
@@ -200,25 +240,28 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: calc(20vw - 20px); /* Adjust as needed */
-  height: calc(47vw - 20px); /* Adjust as needed */
-  min-width: 100px; /* Minimum size */
-  min-height: 100px; /* Minimum size */
+  width: calc(20vw - 20px);
+  height: calc(47vw - 20px);
+  min-width: 100px;
+  min-height: 100px;
   border: 1px solid #343437;
   border-radius: 50%;
   margin-bottom: 30px;
   cursor: pointer;
+
   @include media-breakpoint-up(md) {
     width: 230px;
     height: 266px;
   }
+
   @include media-breakpoint-up(lg) {
     margin-bottom: 0;
     height: 230px;
 
   }
 }
-.use-case-circle:hover{
+
+.use-case-circle:hover {
   border-color: #ee5555;
 
 }
@@ -227,7 +270,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 13px; /* Adjust the space between the elements */
+  gap: 13px;
+  /* Adjust the space between the elements */
 }
 
 .circle-img {
@@ -253,14 +297,18 @@
   display: flex;
   justify-content: center;
   flex-direction: column;
-  padding: 0 5%; /* Percentage-based padding to make it responsive */
+  padding: 0 5%;
+  /* Percentage-based padding to make it responsive */
   box-sizing: border-box;
 }
+
 @include media-breakpoint-up(lg) {
   .colorful-join-text-wrapper {
-    padding: 0 4%; /* Percentage-based padding to make it responsive */
+    padding: 0 4%;
+    /* Percentage-based padding to make it responsive */
   }
 }
+
 .colorful-join-text {
   display: block;
   width: 100%;
@@ -270,37 +318,42 @@
   font-weight: 400;
   font-size: 32px;
   line-height: 38px;
-  background: linear-gradient(
-    90deg,
-    #feff01 0%,
-    #ff2d9a 30.82%,
-    #e24cff 64.01%,
-    #9a52ff 100%
-  );
+  background: linear-gradient(90deg,
+      #feff01 0%,
+      #ff2d9a 30.82%,
+      #e24cff 64.01%,
+      #9a52ff 100%);
 
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+
 #numbersAnimation {
   display: block;
 }
+
 #numbersAnimationLight {
   display: none;
 }
+
 html.light {
-  .section-separator{
+  .section-separator {
     background: #C1C1C2;
   }
+
   .section-text-description {
     color: #343437;
   }
+
   .modal-content-uses {
     background: #ffffff;
   }
+
   #numbersAnimation {
     display: none;
   }
+
   #numbersAnimationLight {
     display: block;
   }
@@ -316,6 +369,7 @@ html.light {
     line-height: 16px;
     color: #232325;
   }
+
   .colorful-join-text {
     display: block;
     width: 100%;
@@ -325,17 +379,16 @@ html.light {
     font-weight: 400;
     font-size: 32px;
     line-height: 38px;
-    background: linear-gradient(
-      90deg,
-      #b480ff -0.32%,
-      #5f00e6 32.7%,
-      #1aa4ff 61.53%,
-      #19ff83 100.32%
-    );
+    background: linear-gradient(90deg,
+        #b480ff -0.32%,
+        #5f00e6 32.7%,
+        #1aa4ff 61.53%,
+        #19ff83 100.32%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
+
   @include media-breakpoint-up(lg) {
     .colorful-join-text {
       width: 750px;
@@ -370,6 +423,7 @@ html.light {
   font-size: 22.1452px;
   color: #f0e5ff;
 }
+
 .use-case-steps h2 {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -377,6 +431,7 @@ html.light {
   line-height: 32px;
   font-weight: 700;
 }
+
 .use-case-steps h2 a {
   text-decoration: none;
 }
@@ -389,10 +444,12 @@ html.light {
   font-size: 2.4em;
   padding-bottom: 10px;
 }
+
 .use-case-steps h2:before {
   margin-top: -30px;
   height: 0;
 }
+
 .use-case-steps h2:first-of-type {
   margin-top: -30px;
 }
@@ -401,15 +458,18 @@ html.light {
   list-style-type: none;
   padding-left: 0;
 }
+
 .related-tasks-links ul li {
   margin: 0px;
   padding-top: 2px;
 }
+
 .related-tasks-links a:hover::after {
   padding-left: 0.5em;
 }
+
 .related-tasks-links a::after {
   content: " ➝";
   padding-left: 0;
   transition: all 0.2s ease-in-out;
-}
+}