Add dev tools links

styles/_docs.scss

@@ -25,24 +25,33 @@
 
 // Explore SDKs
 
-.page-docs-index .langs h5:hover {
+.page-docs-index {
+
+  .dev-tools-links {
+    grid-gap: 40px;
+
+    h6:hover {
+      color:#9A52FF;
+      text-decoration: none;
+      background: none!important;
+    }
+    p:hover {
+      text-decoration: none !important;
+      background: none !important;
+    }
+    a:hover{
+      color:#9A52FF;
+      text-decoration: none !important;
+    }
+  }
+
+  .langs h5:hover {
     color:#9A52FF;
     text-decoration: none !important;
     background: none!important;
   }
-  .page-docs-index .dev-tools-link h6:hover {
-    color:#9A52FF;
-    text-decoration: none;
-    background: none!important;
-  }
-  .page-docs-index .dev-tools-link p:hover {
-    text-decoration: none !important;
-    background: none !important;
-  }
-  .page-docs-index .dev-tools-link a:hover{
-    color:#9A52FF;
-    text-decoration: none !important;
-  }
+}
+
   .page-docs-index .langs a:hover{
     text-decoration: none !important;
   }
@@ -52,7 +61,7 @@
     width: 1.5rem;
     height: 1.5rem;
   }
-  .page-docs-index .dev-tools-link .btn-arrow::after{
+  .page-docs-index .dev-tools-links .btn-arrow::after{
     content: url(../img/icons/arrow-right-purple.svg);
     width: 1.5rem;
     height: 1.5rem;
@@ -171,8 +180,6 @@
 }
 
 .quickstart-card {
-  padding: 32px;
-
   .quickstart-image {
     margin-left: -32px;
     margin-right: -32px;

template/page-docs.html.jinja

@@ -73,11 +73,11 @@
   {% endmacro %}
 
   {% macro devToolsCard(link, title, description) %}
-    <div class="col dev-tools-link">
+    <div class="col dev-tools-links">
       <a href="{{ link }}">
         <h6 class="btn-arrow">{{ title }}</h6>
-        <p> {{ description }}</p>
       </a>
+      <p> {{ description }}</p>
     </div>
   {% endmacro %}
 
@@ -201,6 +201,34 @@
     },
     ]
   %}
+  {%
+    set devTools = [
+    {
+      "title": "Faucets",
+      "link": "https://xrpl.org/xrp-testnet-faucet.html",
+      "description":
+        "Get credentials and test-XRP for XRP Ledger Testnet or Devnet.",
+    },
+    {
+      "title": "WebSocket Tool",
+      "link": "https://xrpl.org/websocket-api-tool.html",
+      "description":
+        "Send sample requests and get responses from the rippled API.",
+    },
+    {
+      "title": "XRP Ledger Explorer",
+      "link": "https://livenet.xrpl.org",
+      "description":
+        "View validations of new ledger versions in real-time, chart the location of servers in the XRP Ledger.",
+    },
+    {
+      "title": "Transaction Sender",
+      "link": "https://xrpl.org/tx-sender.html",
+      "description":
+        "Test how your code handles various XRP Ledger transactions by sending them over the Testnet to the address.",
+    },
+  ]
+  %}
 
   <section class="text-left">
     <div class="mx-auto mb-10">
@@ -243,7 +271,7 @@
 
   <section class="text-left">
     <div class="mx-auto mb-10">
-      <h4>Getting Started with XRP Ledger</h4>
+      <h4>Getting Started</h4>
     </div>
     <div class="card-grid card-grid-2xN quickstart-card">
       <div class="col">