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"]