adding logos, chips scss file, changes to impact, home, and use case pages

styles/_buttons.scss

@@ -20,7 +20,7 @@ button[disabled="disabled"] {
   cursor: not-allowed;
 }
 
-.btn-outline-secondary,
+// .btn-outline-secondary,
 .content a.button,
 .navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
   color: $white;
@@ -52,6 +52,39 @@ p + .readmore {
   color: inherit;
 }
 
+.btn-primary {
+  background: $blue-purple-500;
+  font-weight: bold;
+  color: $white;
+  border: none;
+  border-color: transparent;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  line-height: 16px;
+  &::after {
+    display: inline-block;
+    content: url(../../img/icons/arrow-right.svg);
+    vertical-align: middle;
+    padding-left: 8px;
+    -webkit-transition: transform 0.3s ease-out;
+    -moz-transition: transform 0.3s ease-out;
+    -ms-transition: transform 0.3s ease-out;
+    -o-transition: transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+  }
+  &:hover {
+    background: $blue-purple-500 !important;
+    border: none;
+    &::after {
+      -webkit-transform: translateX(4px);
+      -moz-transform: translateX(4px);
+      -ms-transform: translateX(4px);
+      -o-transform: translateX(4px);
+      transform: translateX(4px);
+    }
+  }
+}
+
 /* (Jump to) "Top" button */
 
 .jump-to-top {
@@ -68,3 +101,4 @@ p + .readmore {
     content: " ↑"
   }
 }
+

styles/_chips.scss

@@ -0,0 +1,35 @@
+.chip {
+	display: inline;
+	font-size: 1rem;
+	font-weight: bold;
+	padding: 0.5rem 1rem;
+	border-radius: 100px;
+	&-red-purple {
+		color: $red-purple-300;
+		background-color: $red-purple-900;
+	}
+	&-orange {
+		color: $orange-300;
+		background-color: $orange-900;
+	}
+	&-green {
+		color: $green-500;
+		background-color: $green-1000;
+	}
+	&-blue-purple {
+		color: $blue-purple-300;
+		background-color: $blue-purple-900;
+	}
+	&-magenta {
+		color: $magenta-300;
+		background-color: $magenta-900;
+	}
+	&-blue {
+		color: $blue-300;
+		background-color: $blue-900;
+	}
+	&-yellow {
+		color: $yellow-300;
+		background-color: $yellow-900;
+	}
+}

styles/_helpers.scss

@@ -293,6 +293,9 @@
     display: none;
   }
 }
+.d-block {
+  display: block;
+}
 
 /* COLOR ELEMENTS */
 .border-green {

styles/_layout.scss

@@ -138,6 +138,19 @@ section {
     }
   }
 
+  &.card-grid-2xN {
+    /* 2 equal columns and any number of auto-sized rows. */
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+
+    /* No "hero" blocks expected here. */
+
+    @include media-breakpoint-down(md) {
+      /* Switch to 1-column layout on smaller widths */
+      grid-template-columns: 1fr;
+    }
+  }
+
   &.card-grid-Nx1 {
     /* 1 row of equal sized columns */
     grid-auto-flow: column;
@@ -203,7 +216,6 @@ $columns: 12; // Number of columns in the grid system
     }  
   }
   .col-new {
-    --width: 4;
     background-position: bottom;
     background-repeat: no-repeat;
     background-size: contain;
@@ -230,6 +242,33 @@ $columns: 12; // Number of columns in the grid system
     &#orange {
       background-image: url(../../img/cards/orange.svg);
     }
+    &#orange-yellow {
+      background-image: url(../../img/cards/orange-yellow.svg);
+    }
+    &#orange-yellow-2 {
+      background-image: url(../../img/cards/orange-yellow-2.svg);
+    }
+    &#magenta-orange {
+      background-image: url(../../img/cards/magenta-orange.svg);
+    }
+    &#blue-green {
+      background-image: url(../../img/cards/blue-green.svg);
+    }
+    &#light-blue {
+      background-image: url(../../img/cards/light-blue.svg);
+    }
+    &#green-blue {
+      background-image: url(../../img/cards/green-blue.svg);
+    }
+    &#green-purple {
+      background-image: url(../../img/cards/green-purple.svg);
+    }
+    &#purple-blue {
+      background-image: url(../../img/cards/purple-blue.svg);
+    }
+    &#blue-light-blue {
+      background-image: url(../../img/cards/blue-light-blue.svg);
+    }
     .card-new {
       padding: 32px;
       min-height: 264px;
@@ -244,9 +283,13 @@ $columns: 12; // Number of columns in the grid system
   }
   .col-new-card {
     transition: all 0.35s ease-out;
+    cursor: pointer;
     &:hover {
-      margin-top: 24px;
-      margin-bottom: 56px;
+      -webkit-transform: translateY(-16px);
+      -moz-transform: translateY(-16px);
+      -ms-transform: translateY(-16px);
+      -o-transform: translateY(-16px);
+      transform: translateY(-16px);
     }
   }
 }

styles/xrpl.scss

@@ -33,6 +33,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
 @import "_side-nav.scss";
 @import "_helpers.scss";
 @import "_buttons.scss";
+@import "_chips.scss";
 @import "_tables.scss";
 @import "_tables.scss";
 @import "_use-cases.scss";