Use same styles as homepage, custom left sidebar, mobile flat card treatment

template/page-docs.html.jinja

@@ -4,8 +4,12 @@
 
 {% block breadcrumbs %}{% endblock %}
 
-{% block main %}
+{% block left_sidebar %}
+  {% set tree_top = pages|selectattr("html", "defined_and_equalto", "docs.html")|first %}
+  {% include 'component-tree-nav.html.jinja' %}
+{% endblock %}
 
+{% block main %}
 <div class="landing page-docs landing-builtin-bg overflow-hidden styled-page">
   <section class="text-center title-space">
     <div class="col-lg-9 mx-auto text-center">
@@ -31,7 +35,9 @@
         class="mb-2 {{imgClass}}"
         alt={{title}}
       />
-      <h5 class="row">{{ title }}</h5>
+      <h5 class="row">
+        <a href="{{href}}" class="nav-link">{{ title }}</a>
+      </h5>
       <p class="row faded-text flat-card-padding">
         {{ description }}
       </p>
@@ -234,8 +240,8 @@
   ]
   %}
 
-  <section class="text-left">
-    <div class="card-grid flat-card-grid card-grid-3xN">
+  <section class="container-new py-26">
+    <div class="nav card-grid flat-card-grid card-grid-3xN">
       <div class="col">
         {{ flatCard("./concepts/", 
                     "Concepts", 
@@ -260,7 +266,7 @@
     </div>
   </section>
 
-  <section class="text-left">
+  <section class="container-new py-26">
     <h4 class="pb-4">Use Cases</h4>
     <div class="card-grid card-grid-3xN use-cases">
       {% for useCase in useCases %}
@@ -269,10 +275,8 @@
     </div>
   </section>
 
-  <section class="text-left">
-    <div class="mx-auto mb-10">
-      <h4>Getting Started</h4>
-    </div>
+  <section class="container-new py-26">
+    <h4 class="pb-4">Getting Started</h4>
     <div class="card-grid card-grid-2xN quickstart-card">
       <div class="col">
         <div class="card video-image">
@@ -309,11 +313,13 @@
     </div>
   </section>
 
-  <section class="text-left">
+  <section class="container-new py-26">
+    <div class="d-flex flex-column-reverse col-sm-8 p-0">
+      <h3 class="h4 h2-sm">Interact with the XRP Ledger in a language of your choice</h3>
+      <h6 class="eyebrow mb-3">Explore SDKs</h6>
+    </div>
     <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" id="langs-cards">
           <div class="col langs">
             <a href="https://xrpl.org/get-started-using-javascript.html">
@@ -353,7 +359,7 @@
     </div>
   </section>
 
-  <section class="text-left">
+  <section class="container-new py-26">
     <h4 class="pb-4">Intermediate Learning Sources</h4>
     <div class="card-grid card-grid-3xN">
       {% for video in intermediateVideos %}
@@ -362,7 +368,7 @@
     </div>
   </section>
 
-  <section class="text-left">
+  <section class="container-new py-26">
     <div class="card-grid card-grid-2xN">
       <div class="col d-flex align-items-center justify-content-center">
         <img
@@ -387,24 +393,26 @@
     </div>
   </section>
 
-  <section class="container-new" id="docs-browse-by">
-    <div class="row">
-      <div class="col-lg-6 mb-10" id="popular-topics">
-        <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>
+  <section class="container-new py-26" id="docs-browse-by">
+    <div class="row card-grid card-grid-2xN">
+      <div class="col" id="popular-topics">
+       
+          <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><!--/#popular-topics-->
-
-      <div class="col-lg-6 p-6-sm p-10-until-sm br-8 cta-card">
-        <img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
-        <img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
-        <div class="z-index-1 position-relative">
-          <h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Have an Idea for a Tool?{% endtrans %}</h2>
-          <p class="mb-10">{% trans %}Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.{% endtrans %}</p>
-          <a class="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">Generate Testnet Credentials</a>
+      <div class="col">
+        <div class="card cta-card p-8-sm p-10-until-sm br-8">
+          <img src="./img/backgrounds/cta-home-purple.svg" class="d-none-sm cta cta-top-left">
+          <img src="./img/backgrounds/cta-home-green.svg" class="cta cta-bottom-right">
+          <div class="z-index-1 position-relative">
+            <h2 class="h4 mb-8-sm mb-10-until-sm">{% trans %}Have an Idea for a Tool?{% endtrans %}</h2>
+            <p class="mb-10">{% trans %}Connect to the XRP Ledger Testnet network to develop and test your apps built on the XRP Ledger, without risking real money or impacting production XRP Ledger users.{% endtrans %}</p>
+            <a class="btn btn-primary btn-arrow" href="xrp-testnet-faucet.html">Generate Testnet Credentials</a>
+          </div>
         </div>
       </div>
     </div>