From f83076bbb8c92f4b24c64ca1a5b2a2d2d0cd4320 Mon Sep 17 00:00:00 2001
From: Phu Pham <ppham@ripple.com>
Date: Tue, 2 May 2023 14:23:12 -0400
Subject: [PATCH] update footer colors

---
 styles/_tutorials.scss                 | 72 +++++++++++++++++++-------
 template/pagetype-tutorials.html.jinja |  2 +-
 2 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/styles/_tutorials.scss b/styles/_tutorials.scss
index a1024f7380..2d5f711c73 100644
--- a/styles/_tutorials.scss
+++ b/styles/_tutorials.scss
@@ -1,28 +1,60 @@
 /* Tutorials ---------------------------------------------------------------- */
-#tutorial-cards {
-  .card:nth-child(1) .card-footer {
-    background-image: url(../img/cards/4col-light-blue-3.svg);
+.tutorial-content {
+  #beginner-cards {
+    .card:nth-child(1) .card-footer {
+      background-image: url(../img/cards/4col-magenta-3.svg);
+    }
   }
-  .card:nth-child(2) .card-footer {
-    background-image: url(../img/cards/4col-purple-blue-2.svg);
+
+  #sdk-cards {
+    .card:nth-child(1) .card-footer {
+      background-image: url(../img/cards/4col-light-blue-3.svg);
+    }
+    .card:nth-child(2) .card-footer {
+      background-image: url(../img/cards/4col-magenta-3.svg);
+    }
+    .card:nth-child(3) .card-footer {
+      background-image: url(../img/cards/4col-green-2.svg);
+    }
+    .card:nth-child(4) .card-footer {
+      background-image: url(../img/cards/4col-yellow-2.svg);
+    }
   }
-  .card:nth-child(3) .card-footer {
-    background-image: url(../img/cards/4col-magenta-3.svg);
+
+  #use-cases-cards {
+    .card:nth-child(1) .card-footer {
+      background-image: url(../img/cards/3col-green-purple.svg);
+    }
+    .card:nth-child(2) .card-footer {
+      background-image: url(../img/cards/3-col-light-blue-2.svg);
+    }
+    .card:nth-child(3) .card-footer {
+      background-image: url(../img/cards/3-col-purple.svg);
+    }
   }
-  .card:nth-child(4) .card-footer {
-    background-image: url(../img/cards/4col-green-2.svg);
+
+  #servers-cards {
+    .card:nth-child(1) .card-footer {
+      background-image: url(../img/cards/4col-orange-yellow.svg);
+    }
+    .card:nth-child(2) .card-footer {
+      background-image: url(../img/cards/3-col-light-blue-2.svg);
+    }
+    .card:nth-child(3) .card-footer {
+      background-image: url(../img/cards/3-col-pink2.svg);
+    }
+    .card:nth-child(4) .card-footer {
+      background-image: url(../img/cards/3-col-purple-blue.svg);
+    }
   }
-  .card:nth-child(5) .card-footer {
-    background-image: url(../img/cards/4col-orange-yellow-2.svg);
-  }
-  .card:nth-child(6) .card-footer {
-    background-image: url(../img/cards/4col-blue-purple.svg);
-  }
-  .card:nth-child(7) .card-footer {
-    background-image: url(../img/cards/4col-yellow-2.svg);
-  }
-  .card:nth-child(8) .card-footer {
-    background-image: url(../img/cards/4col-orange-2.svg);
+
+  #businesses-cards {
+    .card:nth-child(1) .card-footer {
+      background-image: url(../img/cards/4col-light-blue-3.svg);
+    }
+    .card:nth-child(2) .card-footer {
+      background-image: url(../img/cards/3col-green.svg);
+    }
   }
 }
 
diff --git a/template/pagetype-tutorials.html.jinja b/template/pagetype-tutorials.html.jinja
index 97b9146c50..a35f23cf39 100644
--- a/template/pagetype-tutorials.html.jinja
+++ b/template/pagetype-tutorials.html.jinja
@@ -195,7 +195,7 @@
         {% for category in categoriesTutorials %}
         <h5 id="{{category.id}}">{{category.title}}</h5>
         <p>{{category.description}}</p>
-        <div id="tutorial-cards" class="card-grid card-grid-3xN tutorial-card-grid">
+        <div id="{{category.id}}-cards" class="card-grid card-grid-3xN tutorial-card-grid">
           {% for child in category.children %}
           {{ tutorialCard(child.title, child.description, child.href, child.img, child.external)}}
           {% endfor %}