adds new design for ecosystem page

assets/js/modal.js

@@ -0,0 +1,97 @@
+$(document).ready(() => {
+  // Add two new variables for arrow buttons
+  var leftArrow = document.getElementById("leftArrow");
+  var rightArrow = document.getElementById("rightArrow");
+  // Handle arrow button clicks
+  function handleArrowClick(direction) {
+    // Get the current data index
+    var currentIndex = parseInt(modal.getAttribute("data-index"));
+
+    // Calculate the new index based on the direction
+    var 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"));
+  var modal = document.getElementById("myModal");
+  var openModalBtns = document.querySelectorAll("li.open-modal");
+  var useCaseData = [];
+
+  // Populate the useCaseData array with data from the li elements
+  openModalBtns.forEach(function (btn) {
+    var id = btn.getAttribute("data-id");
+    var title = btn.getAttribute("data-title");
+    var number = btn.getAttribute("data-number");
+    var src = btn.getAttribute("data-src");
+
+    useCaseData.push({ id, title, number, src });
+  });
+
+  // Get the elements in the modal that will be updated
+  var modalImage = document.querySelector(".modal .section-image");
+  var modalTextDescription = document.querySelector(
+    ".modal .section-text-description"
+  );
+  var modalTextTitle = document.querySelector(".modal .section-text-title");
+  var modalLogos = document.querySelector(".modal .section-logos");
+  // Add a function to update the modal content
+  function updateModalContent({id, title, number, src }) {
+    modalImage.src = src;
+    modalImage.alt = title + " logo";
+    modalTextDescription.textContent = title;
+    modalTextTitle.textContent = title;
+    modalLogos.textContent = "Group of logos for " + title + " here...";
+  }
+  openModalBtns.forEach(function (btn, index) {
+    btn.onclick = function () {
+      // Read the data-* attributes from the clicked li
+      var id = btn.getAttribute("data-id");
+      var title = btn.getAttribute("data-title");
+      var number = btn.getAttribute("data-number");
+      var src = btn.getAttribute("data-src");
+      // Update the modal content with the data from the clicked li
+      modalImage.src = src;
+      modalImage.alt = title + " logo";
+      modalTextDescription.textContent = title;
+      modalTextTitle.textContent = title;
+      modalLogos.textContent = "Group of logos for " + title + " here...";
+
+      // 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 });
+
+      // 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";
+    };
+  });
+
+  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/use-cases.js

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

styles/_use-cases.scss

@@ -29,22 +29,150 @@
   color: #888;
   font-size: 1rem;
 }
-.use-case-circle {
+.arrows-container {
-  display: inline-block;
+  position: absolute;
-  width: 230px;
+  top: 50%;
-  height: 230px;
+  left: 0;
-  border: 1px solid #343437;
+  right: 0;
-  border-radius: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  z-index: 10;
 }
+
+.arrow-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.arrow-button img {
+  width: 40px;
+  height: 40px;
+}
+
+.left-arrow {
+  margin-left: 40px;
+}
+
+.right-arrow {
+  margin-right: 40px;
+}
+
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content-uses {
+  position: relative; /* Add position: relative to modal-content-uses */
+  background-color: #232325;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 20px;
+  width: 60% !important;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.modal-content-uses::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  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%
+  );
+}
+.content-section {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.section-image {
+  display: block;
+}
+
+.section-text-title {
+  font-family: "Work Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 32px;
+  text-align: center;
+  color: #ffffff;
+}
+.section-text-description {
+  font-family: "Work Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: #c1c1c2;
+}
+
+.section-separator {
+  width: 50%;
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+
+.section-logos {
+  font-size: 16px;
+}
+
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
 .use-case-circle {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 230px;
+  width: 185px;
-  height: 230px;
+  height: 185px;
-  border: 1px solid grey;
+  border: 1px solid #343437;
   border-radius: 50%;
   margin-bottom: 30px;
+  cursor: pointer;
+  @include media-breakpoint-up(md) {
+    width: 230px;
+    height: 230px;
+  }
   @include media-breakpoint-up(lg) {
     margin-bottom: 0;
   }

template/page-uses.html.jinja

@@ -364,66 +364,124 @@
       {% set uses = [
           {"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.")},
+            "number": 7,
+            "src": "assets/img/uses/infrastructure.png"
+            },
 
           {"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.")},
+            "number": 4,
+            "src": "assets/img/uses/infrastructure.png"
+          },
+          {"id": "interoperability",
+            "title": _("Interoperability"),
+            "number": 3,
+            "src": "assets/img/uses/infrastructure.png"
 
+          },
           {"id": "wallet",
             "title": _("Wallet"),
-            "description": _("Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.")},
+            "number": 4,
+            "src": "assets/img/uses/infrastructure.png"
 
+          },
           {"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).")},
+            "number": 7,
+            "src": "assets/img/uses/infrastructure.png"
 
+          },
           {"id": "exchanges",
             "title": _("Exchanges"),
-            "description": _("Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.")},
+            "number": 2,
+            "src": "assets/img/uses/infrastructure.png"
 
+          },
           {"id": "gaming",
             "title": _("Gaming"),
-            "description": _("The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.")},
+            "number": 5,
+            "src": "assets/img/uses/infrastructure.png"
 
+          },
           {"id": "security",
             "title": _("Security"),
-            "description": _("Build services and tools that help prevent and combat fraudulent activity with the XRPL.")},
+            "number": 1,
+            "src": "assets/img/uses/infrastructure.png"
+
+          },
 
           {"id": "payments",
             "title": _("Payments"),
-            "description": _("Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.")},
+            "number": 2,
-
+            "src": "assets/img/uses/infrastructure.png"
-          {"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).")},
+            "number": 1,
+            "src": "assets/img/uses/infrastructure.png"
+          },
 
-          {"id": "custody",
+          {"id": "carbon_markets",
-            "title": _("Custody"),
+            "title": _("Carbon Markets"),
-            "description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")},
+            "number": 2,
+            "src": "assets/img/uses/infrastructure.png"
+
+          },
+
+          {"id": "other",
+            "title": _("Other"),
+            "number": 1,
+                        "src": "assets/img/uses/infrastructure.png"
+
+          },
       ] %}
  {% for use in uses %}
-      <li class="col use-case-circle ls-none p-3">
+<li class="col use-case-circle ls-none p-3 open-modal" data-id="{{use.id}}" data-title="{{use.title}}" data-number="{{use.number}}" data-src="{{use.src}}">
   <div class="circle-content">
-          <img class="circle-img" src="assets/img/uses/infrastructure.png" alt="use-logos">
+    <img class="circle-img" src={{use.src}} alt="use-logos">
-          <p class="circle-text">Your Text Here</p>
+    <p class="circle-text">{{use.title}}</p>
     <div class="pill-box">
-            <span class="pill-number">1</span>
+      <span class="pill-number">{{use.number}}</span>
     </div>
   </div>
 </li>
 {% endfor %}
+
     </ul>
   </section>
 
+<div class="modal" id="myModal">
+  
+  <div class="modal-content-uses">
+      <div class="arrows-container">
+      <button class="arrow-button left-arrow" id="leftArrow">
+        <img src="assets/img/uses/left-arrow.png" alt="left arrow">
+      </button>
+      <button class="arrow-button right-arrow" id="rightArrow">
+        <img src="assets/img/uses/right-arrow.png" alt="right arrow">
+      </button>
+    </div>
+
+    <div class="content-section">
+      <img class="section-image" src="your-image-url.png" alt="section image" width="40" height="40">
+    </div>
+    <div class="content-section">
+      <p class="section-text-title">Title</p>
+    </div>
+    <div class="content-section">
+      <p class="section-text-description">Description</p>
+    </div>
+    <div class="content-section">
+      <hr class="section-separator">
+    </div>
+    <div class="content-section">
+      <p class="section-logos">Group of logos here...</p>
+    </div>
+  </div>
+</div>
+
+
   <section class="join-xrpl-section py-26">
   <div class="colorful-join-text-wrapper">
     <span class="colorful-join-text"> Join the XRPL Ecosystem and showcase your XRPL project, application, or product. Get featured on the Developer Reflections blog or Ecosystem page. </span>
@@ -513,6 +571,8 @@
 {% endblock analytics %}
 
 
+
 {% block endbody %}
+<script type="application/javascript" src="{{currentpage.prefix}}assets/js/modal.js"></script>
 <script type="application/javascript" src="{{currentpage.prefix}}assets/js/use-cases.js"></script>
 {% endblock %}