exosystem page updates

styles/_layout.scss

@@ -120,6 +120,15 @@ section {
     padding-right: 0;
   }
 
+  &.card-grid-4xN {
+    /* 4 equal columns and any number of auto-sized rows. */
+    grid-auto-rows: auto;
+    grid-template-columns: 1fr 1fr;
+    @include media-breakpoint-up(lg) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+  }
+
   &.card-grid-3xN {
     /* 3 equal columns and any number of auto-sized rows. */
     grid-auto-rows: auto;

styles/_use-cases.scss

@@ -21,7 +21,7 @@
   color: #eae7e6;
   font-size: 5.16em;
   font-weight: 400;
-  font-family: 'Space Mono', sans-serif;
+  font-family: "Space Mono", sans-serif;
 }
 
 .use-case-step-length {
@@ -29,7 +29,114 @@
   color: #888;
   font-size: 1rem;
 }
+.use-case-circle {
+  display: inline-block;
+  width: 230px;
+  height: 230px;
+  border: 1px solid #343437;
+  border-radius: 50%;
+}
+.use-case-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 230px;
+  height: 230px;
+  border: 1px solid grey;
+  border-radius: 50%;
+  margin-bottom: 30px;
+  @include media-breakpoint-up(lg) {
+    margin-bottom: 0;
+  }
+}
 
+.circle-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 13px; /* Adjust the space between the elements */
+}
+
+.circle-img {
+  width: 40px;
+  height: 40px;
+}
+
+.circle-text {
+  font-family: "Work Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  margin-bottom: 0px;
+}
+
+.join-xrpl-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.colorful-join-text-wrapper {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  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 */
+  }
+}
+
+.colorful-join-text {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font-family: "Work Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 38px;
+  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;
+}
+
+@include media-breakpoint-up(lg) {
+  .colorful-join-text {
+    width: 750px;
+  }
+}
+
+.pill-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3.69087px 29.527px;
+  width: 73.05px;
+  height: 37.38px;
+  /* Blue-Purple/Blue-Purple 50 */
+  background: #7919ff;
+  /* Blue-Purple/Blue-Purple 60 */
+  border: 3.69087px solid #5f00e5;
+  border-radius: 184.543px;
+}
+
+.pill-number {
+  font-family: "Work Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 22.1452px;
+  color: #f0e5ff;
+}
 .use-case-steps h2 {
   margin-top: 10px;
   margin-bottom: 10px;
@@ -66,10 +173,10 @@
   padding-top: 2px;
 }
 .related-tasks-links a:hover::after {
-  padding-left: .5em;
+  padding-left: 0.5em;
 }
 .related-tasks-links a::after {
   content: " ➝";
   padding-left: 0;
-  transition: all .2s ease-in-out;
+  transition: all 0.2s ease-in-out;
 }

template/page-uses.html.jinja

@@ -345,8 +345,8 @@
    <section class="container-new py-26 text-lg-center">
     <div class="p-3 col-lg-8 mx-lg-auto">
       <div class="d-flex flex-column-reverse">
-        <h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
+        <h1 class="mb-0">{% trans %}Powering Innovative Use Cases and Projects.{% endtrans %}</h1>
-        <h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
+        <h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
       </div>
     </div>
   </section>
@@ -354,14 +354,14 @@
   <section class="container-new py-26">
     <div class="col-lg-5 p-3 mb-3 mb-lg-5">
       <div class="d-flex flex-column-reverse">
-        <h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
+        <p class="text-sm">{% trans %}The XRPL has a rich ecosystem with many contributors globally. Explore the community of developers, validators, and partners.{% endtrans %}</p>
-        <h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
+        <h6 class="eyebrow mb-3">{% trans %}Introducing the XRPL Ecosystem{% endtrans %}</h6>
       </div>
     </div>
 
-    <ul class="card-grid card-grid-3xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
+
+    <ul class="card-grid card-grid-4xN ls-none mt-4 pt-lg-2" id="use-case-card-grid">
       {% 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.")},
@@ -409,22 +409,30 @@
           {"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 p-3">
+      <li class="col use-case-circle ls-none p-3">
-        <img id="{{use.id}}" alt="{{use.title}} icon">
+        <div class="circle-content">
-        <h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
+          <img class="circle-img" src="assets/img/uses/infrastructure.png" alt="use-logos">
-        <p class="mt-2 mt-md-3 mb-0">{{use.description}}</p>
+          <p class="circle-text">Your Text Here</p>
+          <div class="pill-box">
+            <span class="pill-number">1</span>
+          </div>
+        </div>
       </li>
       {% endfor %}
     </ul>
   </section>
 
+  <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>
+        <div class="mt-10">
+          <a class="btn btn-primary btn-arrow" href="docs.html">{% trans %}Submit Your Project{% endtrans %}</a>
+        </div>
+  </div>
+  </section>
+
   <section class="container-new py-26">
     <div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
       <div class="d-flex flex-column-reverse">
@@ -491,7 +499,6 @@
   </section>
 
 </div>
-
 {% endblock %}
 
 {% block analytics %}