Add basic version of Explore SDKs

styles/_dev-tools.scss

@@ -68,7 +68,6 @@
   }
 }
 
-
 .rpc-tool .main {
   h1::before, h2::before, h3::before {
     // These aren't anchors, and the placement of the anchor fix thing

styles/_docs.scss

@@ -0,0 +1,93 @@
+// // TODO: Refactor this to have `.page-docs-index` at the top and everything else as sub-tiems
+
+// #main {
+//     flex: 0 0 75%;
+//     max-width: 75%;
+// }
+
+// Light mode
+.light .sdk-img{
+    content:url(../assets/img/backgrounds/sdk-white.png);
+  }
+  
+// Utilizes whitespace better when there's only a left sidebar
+// TODO: Figure out why this isn't working - but this sizing looks good as a temporary state.
+.page-docs-index main {
+    flex: 0 0 75%;
+    max-width: 75%;
+}
+
+.page-docs-index .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;
+  }
+  .page-docs-index .langs .btn-arrow::after{
+    content: url(../img/icons/arrow-right-purple.svg);
+    vertical-align: baseline;
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .page-docs-index .dev-tools-link .btn-arrow::after{
+    content: url(../img/icons/arrow-right-purple.svg);
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  
+  .page-docs-index .langs a{
+    color:#E0E0E1
+  }
+  .light .langs a{
+    color: #000;
+  }
+  .page-docs-index .langs h5{
+    margin-block-start: 0 !important;
+  }
+  .page-docs-index h1,h2,h3,h4,h5,h6,p{
+    font-family: 'Work Sans'!important;
+  }
+  .page-docs-index h1{
+    font-size: 3.875rem;
+  }
+  @media (max-width: 991.98px) {
+    /* Fix dropdown size with top banner present */
+    .page-docs-index .langs-cards {
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: auto;
+    }
+  }
+  
+  .circled-logo{
+    margin-left:0.1rem;
+  }
+  
+  .circled-logo {
+    background-color: 757575;
+    border-radius: 50%;
+    padding: .65rem;
+    width: 50px;
+    height: 50px;
+    margin-bottom: 0.75rem;
+    border: 2px solid #232325;
+  }
+  .circled-logo .img {
+    width: 26px;
+    height: 26px;
+    display: inline-block;
+  }

styles/xrpl.scss

@@ -69,6 +69,7 @@ $line-height-base: 1.5;
 @import "_video.scss";
 //@import "_top-banner.scss";
 @import "_toml-checker.scss";
+@import "_docs.scss";
 
 // Light/Dark theme settings ---------------------------------------------------
 // Option to only change theme on user system settings.  No toggle.

template/page-docs.html.jinja

@@ -48,6 +48,67 @@
       { "description": _("XRP Ledger Explorer"), "link": "https://livenet.xrpl.org" },
   ] %}
 
+  {# <section class="container-new mb-50-until-sm" id="sdk-links">
+    <div class="row">
+      <div class="col-lg-6 mb-10" id="sdk-list">
+        <p>{% trans %}Explore SDKs{% endtrans %}</p>
+        <h2 class="h4">{% trans %}Browse By Recommended Pages{% endtrans %}</h2>
+        <ul class="nav flex-column">
+          {% for page in recommendedPages %}
+            <li class="nav-item"><a href="{{page.link}}" class="nav-link">{{page.description}}</a>
+          {% endfor %}
+        </ul>
+      </div>
+      <div class="col-lg-6 mb-10">
+        <img src="img/backgrounds/docs-sdk@2x.png" class="img-fluid pt-20 sdk-img" alt="A computer with 'SDKs' written on it.">
+      </div>
+    </div>
+  </section> #}
+
+  <section class="py-26 px-20 text-left">
+        <div class="card-grid card-grid-2xN">
+          <div class="col">
+            <h6>Explore SDKs</h6>
+            <h4>Interact with the XRP Ledger in a language of your choice</h4>
+            <div class="card-grid langs-cards card-grid-2xN mt-10">
+              <div class="col langs">
+                <a href="https://xrpl.org/get-started-using-javascript.html">
+                  <img
+                    src="/assets/img/logos/javascript.svg"
+                    class="circled-logo"
+                  >
+                  <h5 class="btn-arrow">Javascript</h5>
+                </a>
+              </div>
+              <div class="col langs">
+                <a href="https://xrpl.org/get-started-using-python.html">
+                  <img
+                    src="/assets/img/logos/python.svg"
+                    class="circled-logo"
+                  >
+                  <h5 class="btn-arrow">Python</h5>
+                </a>
+              </div>
+              <div class="col langs">
+                <a href="https://xrpl.org/get-started-using-java.html">
+                  <img
+                    src="/assets/img/logos/java.svg"
+                    class="circled-logo"
+                  >
+                  <h5 class="btn-arrow">Java</h5>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="col">
+            <img
+              src="/assets/img/backgrounds/sdk-black.png"
+              class="img-fluid pt-20 sdk-img"
+            />
+          </div>
+        </div>
+      </section>
+
   <section class="container-new mb-50-until-sm" id="software-and-sdks">
     <div class="d-flex flex-column-reverse w-100">
       <h2 class="h4">{% trans %}Software and SDKs{% endtrans %}</h2>