merge w master

styles/_docs-landing.scss

@@ -172,6 +172,16 @@
   h1 {
     font-size: 3.875rem;
   }
+
+  .arrow-purple::after {
+    content: url(../img/icons/arrow-right-purple.svg);
+  }
+
+  .documentation-index:hover, .documentation-index::after {
+    color: $purple;
+    text-decoration: none !important;
+    background: none !important;
+  }
 } 
 
 @media (max-width: 765px) {

styles/_pages.scss

@@ -921,6 +921,7 @@
     position: relative;
     z-index: 5;
     width: 100%;
+    transform: translateY(0%);
 
     p a {
       text-decoration: none;

styles/_tutorials.scss

@@ -0,0 +1,117 @@
+$footer-images: 3col-magenta-orange, 3col-green-blue, 3col-orange, 3col-purple, 3-col-green-purple, 3col-magenta, 3col-light-green, 3col-orange-yellow, 3-col-dark-blue;
+
+/* Tutorials ---------------------------------------------------------------- */
+@mixin card-footer-color($offset){
+  $index: 0;
+  @for $i from $offset + 1 through length($footer-images) {
+    $index: $index + 1;
+
+    .card:nth-child(9n + #{$index}) .card-footer {
+      background-image: url("../img/cards/#{nth($footer-images, $i)}.svg");
+    }
+  }
+
+  @for $i from 1 through $offset + 1 {
+    $index: $index + 1;
+
+    .card:nth-child(9n + #{$index}) .card-footer {
+      background-image: url("../img/cards/#{nth($footer-images, $i)}.svg");
+    }
+  }
+}
+
+.tutorial-content {
+  #beginner-cards {
+    @include card-footer-color(0);
+  }
+
+  #sdk-cards {
+    @include card-footer-color(2);
+  }
+
+  #use-cases-cards {
+    @include card-footer-color(4);
+  }
+
+  #servers-cards {
+    @include card-footer-color(6);
+  }
+
+  #businesses-cards {
+    @include card-footer-color(8);
+  }
+}
+
+.tutorial-card-grid {
+  grid-gap: 40px !important;
+  row-gap: 0 !important;
+  &.card-grid {
+    .card {
+      margin-bottom: 2.5rem;
+      background-position: bottom;
+      background-repeat: no-repeat;
+      background-size: contain;
+      padding: 0;
+      min-height: 0;
+
+      .card-body {
+        padding: 32px;
+      }
+
+      .card-title {
+        margin-bottom: 16px;
+        margin-top: 0;
+
+        &.external-link::after {
+          background-size: 0.9rem;
+          vertical-align: middle;
+          margin-left: 12px;
+          margin-bottom: 12px;
+          margin-right: 10px;
+          width: 1.5rem;
+        }
+
+        &.nav-link {
+          padding: 0;
+        }
+      }
+
+      .card-footer {
+        font-size: 0;
+        padding: 1rem;
+        background-position: bottom;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-top: 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    code {
+      color: $green-600;
+      background-color: $green-1000;
+      border-radius: 4px;
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+
+    .card-icon-container {
+      width: 50px;
+      height: 50px;
+      background: $gray-600;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      margin-bottom: 12px;
+
+      img {
+        width: 70%;
+        height: 70%;
+      }
+    }
+  }
+}

styles/light/_light-theme.scss

@@ -985,4 +985,14 @@ $placeholder-color: $gray-600;
 
 }
 
+.tutorial-card-grid {
+  code {
+    background-color: $green-100;
+  }
+
+  .card-icon-container {
+    background: $gray-300;
+  }
+}
+
 

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^7.0.0"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v17.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v17.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v17.css --output-style compressed --source-map true"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v18.css --output-style compressed",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v18.css --output-style compressed --source-map true",
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v18.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

styles/xrpl.scss

@@ -69,6 +69,7 @@ $line-height-base: 1.5;
 @import "_video.scss";
 //@import "_top-banner.scss";
 @import "_toml-checker.scss";
+@import "_tutorials.scss";
 @import "_docs-landing.scss";
 
 // Light/Dark theme settings ---------------------------------------------------