added 2 new templates for the marketing pages, base template has script for new font, new image assets for the marketing pages, edits to the dactyl-config file, changes to overall font stylings, body tag now bg black and color white

2025-11-08 22:05:50 +00:00 · 2020-08-04 15:12:29 -07:00
parent af34ef4bc9
commit d06ba9a975
20 changed files with 1915 additions and 15 deletions
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
--- a/assets/img/XRPLedger_DevPortal-white.svg
+++ b/assets/img/XRPLedger_DevPortal-white.svg
@@ -0,0 +1,9 @@
+<svg width="468" height="116" viewBox="0 0 468 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.9">
+<path opacity="0.9" d="M191.43 51.8301L197.43 39.7701H207.5L197.29 57.7701L207.76 76.1901H197.66L191.57 63.8701L185.47 76.1901H175.4L185.87 57.7701L175.66 39.7701H185.74L191.43 51.8301ZM223.5 63.2201H218.73V76.0801H210V39.7701H224.3C228.67 39.7701 231.98 40.7001 234.37 42.6901C235.58 43.6506 236.546 44.8828 237.191 46.2866C237.835 47.6905 238.14 49.2265 238.08 50.7701C238.155 52.9971 237.605 55.2005 236.49 57.1301C235.322 58.9247 233.668 60.3501 231.72 61.2401L239.27 75.9401V76.3401H229.86L223.5 63.2201ZM218.86 56.4701H224.43C225.109 56.5414 225.795 56.4589 226.437 56.2286C227.079 55.9984 227.661 55.6263 228.14 55.1401C229.022 54.1082 229.492 52.7871 229.46 51.4301C229.509 50.754 229.416 50.0752 229.189 49.4366C228.962 48.798 228.605 48.2135 228.14 47.7201C227.653 47.2459 227.07 46.8825 226.429 46.6547C225.789 46.4269 225.107 46.34 224.43 46.4001H218.86V56.4701ZM251.73 63.7501V76.0801H243V39.7701H257.58C260.143 39.7175 262.683 40.2618 265 41.3601C267.03 42.3389 268.758 43.8489 270 45.7301C271.199 47.6808 271.797 49.9415 271.72 52.2301C271.773 53.8434 271.455 55.4474 270.789 56.9179C270.123 58.3884 269.128 59.6859 267.88 60.7101C265.36 62.8301 261.88 63.8901 257.41 63.8901H251.72L251.73 63.7501ZM251.73 57.0001H257.42C258.12 57.0708 258.827 56.9885 259.491 56.7588C260.156 56.5292 260.763 56.1577 261.27 55.6701C261.742 55.209 262.106 54.6484 262.334 54.0291C262.563 53.4098 262.65 52.7474 262.59 52.0901C262.68 50.6061 262.209 49.1425 261.27 47.9901C260.812 47.4622 260.24 47.0449 259.597 46.7695C258.955 46.4941 258.258 46.3678 257.56 46.4001H251.73V57.0001ZM296.73 69.4501H312V76.2101H287.9V39.7701H296.65V69.4501H296.73ZM337.81 60.7101H324.07V69.4501H340.37V76.2101H315.37V39.7701H340.55V46.5301H324.25V54.2101H337.9L337.81 60.7101ZM343.37 76.0801V39.7701H355.16C358.25 39.7375 361.295 40.5058 364 42.0001C366.568 43.4425 368.655 45.6093 370 48.2301C371.442 50.9709 372.216 54.0134 372.26 57.1101V58.8301C372.324 61.9609 371.595 65.0569 370.14 67.8301C368.731 70.4528 366.622 72.6337 364.048 74.1306C361.475 75.6275 358.537 76.3819 355.56 76.3101H343.42L343.37 76.0801ZM352.12 46.5301V69.4501H355.12C356.241 69.5121 357.36 69.3038 358.383 68.8426C359.407 68.3814 360.304 67.6809 361 66.8001C362.333 64.9534 363 62.3034 363 58.8501V57.2601C363 53.6801 362.333 51.0301 361 49.3101C360.287 48.4178 359.37 47.7109 358.325 47.2495C357.28 46.7881 356.14 46.5859 355 46.6601H352.09L352.12 46.5301ZM405.83 71.7001C404.158 73.3731 402.096 74.6035 399.83 75.2801C397.058 76.2148 394.145 76.6647 391.22 76.6101C386.45 76.6101 382.6 75.1501 379.82 72.2301C377.04 69.3101 375.45 65.2301 375.18 60.0401V56.8601C375.131 53.6307 375.765 50.4274 377.04 47.4601C378.217 44.9066 380.101 42.7443 382.47 41.2301C384.959 39.7722 387.806 39.038 390.69 39.1101C395.19 39.1101 398.77 40.1701 401.29 42.2901C403.81 44.4101 405.29 47.4601 405.66 51.5601H397.18C397.066 49.909 396.355 48.3558 395.18 47.1901C394.003 46.2386 392.51 45.7671 391 45.8701C389.971 45.8449 388.953 46.0881 388.047 46.5755C387.14 47.0629 386.376 47.7779 385.83 48.6501C384.465 51.0865 383.823 53.8617 383.98 56.6501V58.9001C383.98 62.4801 384.64 65.2601 385.83 67.1201C387.02 68.9801 389.01 69.9001 391.66 69.9001C393.521 70.0287 395.363 69.4621 396.83 68.3101V62.6101H390.74V56.6101H405.58V71.7001H405.83ZM433 60.7001H419.22V69.4401H435.51V76.2001H410.51V39.7701H435.69V46.5301H419.39V54.2101H433.17V60.7101L433 60.7001ZM452.21 63.2101H447.44V76.0801H438.56V39.7701H452.87C457.25 39.7701 460.56 40.7001 462.94 42.6901C464.152 43.649 465.119 44.8809 465.764 46.2851C466.409 47.6893 466.712 49.2261 466.65 50.7701C466.725 52.9971 466.175 55.2005 465.06 57.1301C463.892 58.9247 462.238 60.3501 460.29 61.2401L467.85 75.9401V76.3401H458.44L452.21 63.2101ZM447.44 56.4601H453C453.679 56.5314 454.365 56.4489 455.007 56.2186C455.649 55.9884 456.231 55.6163 456.71 55.1301C457.579 54.0965 458.038 52.7798 458 51.4301C458.046 50.7542 457.953 50.0761 457.726 49.4378C457.499 48.7996 457.143 48.2149 456.68 47.7201C456.197 47.2499 455.618 46.8888 454.983 46.6611C454.348 46.4334 453.672 46.3444 453 46.4001H447.43L447.44 56.4601Z" fill="white"/>
+<path opacity="0.9" d="M35.4 7.20001H38.2V8.86606e-06H35.4C32.4314 -0.00262172 29.4914 0.580149 26.7482 1.71497C24.0051 2.8498 21.5126 4.5144 19.4135 6.61353C17.3144 8.71266 15.6498 11.2051 14.515 13.9483C13.3801 16.6914 12.7974 19.6314 12.8 22.6V39C12.806 42.4725 11.4835 45.8158 9.10354 48.3445C6.72359 50.8732 3.46651 52.3957 0 52.6L0.2 56.2L0 59.8C3.46651 60.0043 6.72359 61.5268 9.10354 64.0555C11.4835 66.5842 12.806 69.9275 12.8 73.4V92.3C12.7894 98.5716 15.2692 104.591 19.6945 109.035C24.1198 113.479 30.1284 115.984 36.4 116V108.8C32.0513 108.797 27.8814 107.069 24.8064 103.994C21.7314 100.919 20.0026 96.7487 20 92.4V73.4C20.003 70.0079 19.1752 66.6667 17.5889 63.6684C16.0026 60.6701 13.706 58.1059 10.9 56.2C13.698 54.286 15.9885 51.7202 17.5738 48.7237C19.1592 45.7272 19.9918 42.39 20 39V22.6C20.0184 18.5213 21.6468 14.615 24.5309 11.7309C27.415 8.84683 31.3213 7.21842 35.4 7.20001V7.20001Z" fill="white"/>
+<path opacity="0.9" d="M118.6 7.2H115.8V0H118.6C124.58 0.0158944 130.309 2.40525 134.528 6.643C138.747 10.8808 141.111 16.6202 141.1 22.6V39C141.094 42.4725 142.416 45.8158 144.796 48.3445C147.176 50.8732 150.433 52.3957 153.9 52.6L153.7 56.2L153.9 59.8C150.433 60.0043 147.176 61.5268 144.796 64.0555C142.416 66.5842 141.094 69.9275 141.1 73.4V92.3C141.111 98.5716 138.631 104.591 134.206 109.035C129.78 113.479 123.772 115.984 117.5 116V108.8C121.849 108.797 126.019 107.069 129.094 103.994C132.169 100.919 133.897 96.7487 133.9 92.4V73.4C133.897 70.0079 134.725 66.6667 136.311 63.6684C137.897 60.6701 140.194 58.1059 143 56.2C140.202 54.286 137.911 51.7201 136.326 48.7237C134.741 45.7272 133.908 42.39 133.9 39V22.6C133.911 20.5831 133.523 18.584 132.759 16.7173C131.995 14.8507 130.87 13.1533 129.448 11.7225C128.027 10.2916 126.337 9.1556 124.475 8.37952C122.613 7.60345 120.617 7.20261 118.6 7.2V7.2Z" fill="white"/>
+<path opacity="0.9" d="M103.2 29H113.9L91.6 49.9C87.599 53.5203 82.3957 55.525 77 55.525C71.6042 55.525 66.4009 53.5203 62.4 49.9L40.1 29H50.8L67.7 44.8C70.2237 47.1162 73.5245 48.4013 76.95 48.4013C80.3754 48.4013 83.6763 47.1162 86.2 44.8L103.2 29Z" fill="white"/>
+<path opacity="0.9" d="M50.7 87H40L62.4 66C66.3788 62.3351 71.5905 60.3007 77 60.3007C82.4095 60.3007 87.6212 62.3351 91.6 66L114 87H103.3L86.3 71C83.7763 68.6838 80.4755 67.3987 77.05 67.3987C73.6245 67.3987 70.3237 68.6838 67.8 71L50.7 87Z" fill="white"/>
+</g>
+</svg>
--- a/assets/img/icon-green-arrow.svg
+++ b/assets/img/icon-green-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="29" height="8" viewBox="0 0 29 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.4365 4.35355C28.6318 4.15829 28.6318 3.84171 28.4365 3.64644L25.2546 0.464464C25.0593 0.269202 24.7427 0.269202 24.5474 0.464464C24.3522 0.659727 24.3522 0.976309 24.5474 1.17157L27.3759 4L24.5474 6.82843C24.3522 7.02369 24.3522 7.34027 24.5474 7.53553C24.7427 7.73079 25.0593 7.73079 25.2546 7.53553L28.4365 4.35355ZM5.44232e-08 4.5L28.083 4.5L28.083 3.5L-5.44232e-08 3.5L5.44232e-08 4.5Z" fill="#19FF83"/>
+</svg>
--- a/content/marketing/impact.md
+++ b/content/marketing/impact.md
@@ -0,0 +1,9 @@
+#### Impact
+# Faster, Cheaper, Green Money
+
+## The digital asset XRP is a truly global currency—ideally suited to enable today’s global economy.
+
+As an optimal medium of exchange, XRP and the XRP Ledger on which it operates help to move money around the world faster, cheaper and more sustainably than any other currency available today.
+
+It was designed this way, and it’s proving its impact in global payments and beyond.
+
--- a/dactyl-config.yml
+++ b/dactyl-config.yml
@@ -153,6 +153,23 @@ targets:

 pages:

+# New Marketing Page ---------------------------------------------------------------------
+    -   name: Impact
+        funnel: Impact
+        template: template-marketing-impact.html
+        html: impact.html
+        sidebar: disabled
+        targets: 
+            - en
+
+    -   name: Usage
+        funnel: Impact
+        template: template-marketing-usage.html
+        html: usage.html
+        sidebar: disabled
+        targets: 
+            - en
+
    -   name: Docs
        funnel: Docs
        template: template-landing-docs.html
--- a/img/marketing/green-graphic.png
+++ b/img/marketing/green-graphic.png
--- a/img/marketing/green-graphic@2x.png
+++ b/img/marketing/green-graphic@2x.png
--- a/img/marketing/impact-crypto-strengths.png
+++ b/img/marketing/impact-crypto-strengths.png
--- a/img/marketing/impact-crypto-strengths@2x.png
+++ b/img/marketing/impact-crypto-strengths@2x.png
--- a/img/marketing/impact-democratizing-payments.png
+++ b/img/marketing/impact-democratizing-payments.png
--- a/img/marketing/impact-democratizing-payments@2x.png
+++ b/img/marketing/impact-democratizing-payments@2x.png
--- a/styles/_font.scss
+++ b/styles/_font.scss
@@ -1,10 +1,15 @@
 // Font Settings ===============================================================

 body {
-  font-feature-settings: "liga", "kern";
+  // font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
-  font-size: 0.9375rem;
+  font-size: 1rem;
+  background: #000;
+  background-color: #000;
+  line-height: 1.5;
+  color: #FFF;
+  font-family: 'Work Sans', sans-serif;
 }

 pre, code {
@@ -14,10 +19,40 @@ pre, code {
  font-variant-ligatures: none;
 }

-h1, h2, h3, h4, h5 {
-  font-family: 'Space Mono', monospace;
-  font-weight: 700;
-  color: $black;
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-weight: bold;
+}
+h1, .h1 {
+  font-size: 2.625rem;
+}
+h6, .h6 {
+  font-size: 1.125rem;
+}
+p {
+  line-height: 1.5;
+}
+a:hover {
+  text-decoration: none;
+}
+.fs-base {
+  font-size: 1rem;
+}
+.fs-5 {
+  font-size: 1.25rem;
+}
+.fs-5-5 {
+  font-size: 1.375rem;
+}
+.fs-6 {
+  font-size: 1.5rem;
+}
+.normal {
+  font-weight: normal;
+}
+.bold {
+  font-weight: bold;
 }

 /* Japanese language font override ------------------------------------------ */
@@ -30,8 +65,8 @@ h1, h2, h3, h4, h5 {
  .right-sidebar .level-1 a,
  .right-sidebar .separator,
  .use-case-step-num {
-    //font-family: 'M PLUS 1p', 'Space Mono', sans-serif;
-    //font-family: '851Gkktt', 'Space Mono', sans-serif;
-    font-family: 'Makinas-4-Flat', 'Makinas-4-Square', 'Space Mono', sans-serif;
+    font-family: 'M PLUS 1p', 'Work Sans', sans-serif;
+    font-family: '851Gkktt', 'Work Sans', sans-serif;
+    // font-family: 'Makinas-4-Flat', 'Makinas-4-Square', 'Space Mono', sans-serif;
  }
 }
--- a/styles/_marketing.scss
+++ b/styles/_marketing.scss
@@ -0,0 +1,177 @@
+// Font Settings ===============================================================
+.marketing-wrapper {
+	section {
+		border-bottom: none;
+	}
+	.row {
+		margin-right: -15px;
+    margin-left: -15px;
+	}
+}
+:root {
+	--main-green: #19FF83;
+	--white: #FFFFFF;
+}
+.va-middle {
+	vertical-align: middle;
+}
+.text-white {
+	color: var(--white);
+}
+.text-green {
+	color: var(--main-green);
+}
+.text-green:hover {
+	color: var(--main-green);
+}
+.arrow-link:after {
+	content: url(../img/icon-green-arrow.svg);
+	width: 28px;
+  padding-left: 7px;
+  transition: all .2s ease-in-out;
+  display: inline-block;
+  text-decoration: none;
+}
+.arrow-link:hover:after {
+	padding-left: 14px;
+}
+.text-largest {
+	font-size: 1.5rem;
+	font-weight: normal;
+}
+.top-10 {
+	top: 2.5rem;
+}
+.vh100 {
+	height: 100vh;
+	min-height: 100%;
+}
+.align-items-stretch {
+	align-items: stretch;
+}
+
+/* SPACING HELPERS */
+/* To create new margin classes, multiply by 4px */
+.mt-8 {
+	margin-top: 2rem;
+}
+.mt-9 {
+	margin-top: 2.25rem;
+}
+.mb-9 {
+	margin-bottom: 2.25rem;
+}
+.mt-10 {
+	margin-top: 2.5rem;
+}
+.mb-10 {
+	margin-bottom: 2.5rem;
+}
+.my-10 {
+	margin-top: 2.5rem;
+	margin-bottom: 2.5rem;
+}
+.mt-12 {
+	margin-top: 3rem;
+}
+.mb-12 {
+	margin-bottom: 3rem;
+}
+.my-12 {
+	margin-top: 3rem;
+	margin-bottom: 3rem;
+}
+.mt-13 {
+	margin-top: 3.25rem;
+}
+.mb-13 {
+	margin-bottom: 3.25rem;
+}
+.mt-14 {
+	margin-top: 3.5rem;
+}
+.mt-16 {
+	margin-top: 4rem;
+}
+.mb-16 {
+	margin-bottom: 4rem;
+}
+.mb-18 {
+	margin-bottom: 4.5rem;
+}
+.mt-20 {
+	margin-top: 5rem;
+}
+.mb-20 {
+	margin-bottom: 5rem;
+}
+.my-20 {
+	margin-top: 5rem;
+	margin-bottom: 5rem;
+}
+.mt-30 {
+	margin-top: 7.5rem;
+}
+.mt-40 {
+	margin-top: 10rem;
+}
+.mb-40 {
+	margin-bottom: 10rem;
+}
+.my-40 {
+	margin-top: 10rem;
+	margin-bottom: 10rem;
+}
+.mb-49 {
+	margin-bottom: 12.25rem;
+}
+.mb-50 {
+	margin-bottom: 12.5rem;
+}
+.ls-none {
+	list-style: none;
+}
+
+/* COMPONENTS */
+.border-green {
+	border: 1px solid var(--main-green);
+}
+.btn {
+	padding: 16px 24px;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 1.25;
+}
+.btn-clear {
+	color: var(--white);
+	border: 1px solid var(--white);
+}
+.btn-clear:hover {
+	background: var(--white);
+	color: #000;
+}
+.card-wrapper {
+	width: 100%;
+}
+.card {
+	margin: 0 0.75rem;
+	background: black;
+	padding: 3rem 2rem;
+	color: var(--white);
+}
+.card h5 {
+	height: 38px;
+	padding-bottom: 5rem;
+}
+section {
+	position: relative;
+}
+.section-marker {
+	position: absolute;
+	font-size: 0.875rem;
+	transform: rotate(90deg);
+	font-weight: normal;
+	top: calc(50% - 4px);
+	margin-left: -48px;
+}
+
--- a/styles/package.json
+++ b/styles/package.json
@@ -5,5 +5,8 @@
  },
  "scripts": {
    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal.css --output-style compressed"
+  },
+  "dependencies": {
+    "sass": "^1.26.10"
  }
 }
--- a/styles/xrpl.scss
+++ b/styles/xrpl.scss
@@ -33,8 +33,8 @@ $border-radius: 0;
 $border-radius-lg: 0;
 $border-radius-sm: 0;

-@import "_font-face.scss";
-$font-family-monospace: 'Space Mono', monospace;
+// @import "_font-face.scss";
+$font-family-monospace: 'Work Sans', monospace;
 $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;

 // Bootstrap v4
@@ -60,3 +60,5 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
@import "_lang-selector.scss";
@import "_dev-tools.scss";
@import "_print.scss";
+@import "_marketing.scss";
+
--- a/styles/yarn-error.log
+++ b/styles/yarn-error.log
--- a/styles/yarn.lock
+++ b/styles/yarn.lock
@@ -49,6 +49,14 @@ ansi-styles@^3.2.0:
  dependencies:
    color-convert "^1.9.0"

+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.0.3:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -111,6 +119,11 @@ bcrypt-pbkdf@^1.0.0:
  dependencies:
    tweetnacl "^0.14.3"

+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
 block-stream@*:
  version "0.0.9"
  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -131,6 +144,13 @@ brace-expansion@^1.1.7:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 camelcase-keys@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
@@ -165,6 +185,21 @@ chalk@^1.1.1:
    strip-ansi "^3.0.0"
    supports-color "^2.0.0"

+"chokidar@>=2.0.0 <4.0.0":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.1.tgz#e905bdecf10eaa0a0b1db0c664481cc4cbc22ba1"
+  integrity sha512-TQTJyr2stihpC4Sya9hs2Xh+O2wf+igjL36Y75xx2WdHuiICcn/XJza46Jwt0eT5hVpQOzo3FpY3cj3RVYLX0g==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 cliui@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -300,6 +335,13 @@ fast-json-stable-stringify@^2.0.0:
  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==

+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 find-up@^1.0.0:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -334,6 +376,11 @@ fs.realpath@^1.0.0:
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=

+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 fstream@^1.0.0, fstream@^1.0.12:
  version "1.0.12"
  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
@@ -382,6 +429,13 @@ getpass@^0.1.1:
  dependencies:
    assert-plus "^1.0.0"

+glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@~7.1.1:
  version "7.1.6"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -477,6 +531,18 @@ is-arrayish@^0.2.1:
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=

+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
 is-finite@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
@@ -494,6 +560,18 @@ is-fullwidth-code-point@^2.0.0:
  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=

+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-typedarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -709,6 +787,11 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
    semver "2 || 3 || 4 || 5"
    validate-npm-package-license "^3.0.1"

+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -821,6 +904,11 @@ performance-now@^2.1.0:
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=

+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
 pify@^2.0.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -893,6 +981,13 @@ readable-stream@^2.0.1, readable-stream@^2.0.6:
    string_decoder "~1.1.1"
    util-deprecate "~1.0.1"

+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 redent@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -983,6 +1078,13 @@ sass-graph@2.2.5:
    scss-tokenizer "^0.2.3"
    yargs "^13.3.2"

+sass@^1.26.10:
+  version "1.26.10"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760"
+  integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 scss-tokenizer@^0.2.3:
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -1148,6 +1250,13 @@ tar@^2.0.0:
    fstream "^1.0.12"
    inherits "2"

+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 tough-cookie@~2.5.0:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
--- a/tool/template-base.html
+++ b/tool/template-base.html
@@ -50,8 +50,8 @@

 <body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">

-  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
-    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-black.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
+  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-black">
+    <a href="{% if target.no_cover is defined and target.no_cover %}/{% else %}index.html{% endif %}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
    <button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
--- a/tool/template-marketing-impact.html
+++ b/tool/template-marketing-impact.html
@@ -0,0 +1,111 @@
+{% extends "template-base.html" %}
+{% block head %}
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
+
+{% endblock %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+  <div class="container my-40 marketing-wrapper">
+    <section class="row mb-50">
+      <div class="col-sm-4">
+        <h6 class="text-green fs-base mb-4">{% trans %}Impact{% endtrans %}</h6>
+        <h1 class="mb-18">{% trans %}Faster, Cheaper, Green Money{% endtrans %}</h1>
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable today’s global economy.{% endtrans %}</h2>
+        <p>{% trans %}As an optimal medium of exchange, XRP and the XRP Ledger on which it operates help to move money around the world faster, cheaper and more sustainably than any other currency available today.{% endtrans %}</p>
+        <p class="mb-10">{% trans %}It was designed this way, and it’s proving its impact in global payments and beyond.{% endtrans %}</p>
+        <a href="#" class="arrow-link text-white bold">{% trans %}How Green Is Your Currency?{% endtrans %}</a>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Global Payments{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <h2 class="mb-10">{% trans %}Democratizing Global Payments{% endtrans %}</h2>
+        <h5 class="mb-10 normal">{% trans %}For the 23 million people immigrating worldwide, sending and receiving money across borders is an expensive, unreliable and complex endeavor.{% endtrans %}</h5>
+        <div class="mb-10 row">
+          <p class="col-sm">{% trans %}XRP and the XRP Ledger are changing that. The technology has been adopted by financial institutions around the world. They use it to source liquidity for international transactions, and because of the unprecedented efficiency it offers, they’re able to both bring down costs and improve services.{% endtrans %}</p>
+          <p class="col-sm">{% trans %}This means the millions of people worldwide who need to move money across borders can do so more affordably and reliably than ever before.{% endtrans %}</p>
+        </div>
+        <a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
+      </div>
+    </section>
+    
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 order-1 order-sm-2">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
+        <h2 class="mb-10">{% trans %}Building for the Future{% endtrans %}</h2>
+        <h5 class="mb-10 normal">{% trans %}Digital assets and blockchain technology are the future of finance. Open and decentralized, they offer the first-ever global standards for value exchange broadly—whether it’s money, stocks, loyalty points, intellectual property or more.{% endtrans %}</h5>
+        <div class="row mb-10">
+          <p class="col-sm">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like cross-border payments.{% endtrans %}</p>
+          <p class="col-sm">{% trans %}With usage growing, it’s critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
+        </div>
+        <a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Digital Assets{% endtrans %}</h6>
+        <div class="col-sm-4 offset-sm-1">
+          <img class="mw-100" src="./img/marketing/impact-crypto-strengths@2x.png">
+        </div>
+        <div class="col-sm-6 offset-sm-1">
+          <h2 class="mb-10">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h2>
+          <div class="row mb-10">
+            <div class="col-sm">
+              <p>{% trans %}Each digital asset and blockchain technology has different strengths that make them ideal for various use cases today.{% endtrans %}</p>
+              <p>{% trans %}Bitcoin is recognized broadly as a store of value and Ether (ETH) for use in smart contracts.{% endtrans %}</p>
+            <p class="col-sm">
+              <p>{% trans %}XRP is optimal for transacting—it’s fast, cheap, scalable and energy-efficient. It was designed this way; to be ideal for use in global payments.{% endtrans %}</p>
+              <p>{% trans %}And, the same characteristics that make it ideal for payments mean it’s also better for our environment. XRP is green by nature.{% endtrans %}</p>
+          </div>
+        </div>
+    </section>
+
+    <section class="row mb-20">
+      <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
+      <div class="col-sm-4">
+        <img class="mw-100 mt-20" src="./img/marketing/green-graphic@2x.png">
+      </div>
+      <div class="col-sm-8">
+        <h3 class="h2 mb-9">{% trans %}What Makes XRP and XRPL Green?{% endtrans %}</h3>
+        <h5 class="mb-10 normal">{% trans %}Most currency today—whether digital or physical—is not environmentally friendly. The potential for long-term impact on our planet could hold startling consequences.{% endtrans %}</h5>
+        <div class="row mb-10">
+          <div class="col-sm">
+            <p>{% trans %}The digital asset XRP was designed with sustainability in mind. The XRP Ledger processes   transactions through a unique “consensus” mechanism that consumes negligible energy and all XRP currency is already in circulation.{% endtrans %}</p>
+            <p>{% trans %}Other digital assets, like Bitcoin, rely on a different mechanism to both validate transactions and create new coins. This “proof-of-work” algorithm requires “mining.” Mining is an incredibly energy-intensive process for validating transactions that consumes more energy in a year than entire countries.{% endtrans %}</p>
+          <div class="col-sm">
+            <p>{% trans %}Cash also leaves a substantial carbon footprint, and the environmental impact goes beyond energy consumption—deforestation, water pollution and more factor into the equation.{% endtrans %}</p>
+              <p>{% trans %}Adopting XRP more broadly will help limit this waste and ensure a sustainable future for our planet and global economy.{% endtrans %}</p>
+        </div>
+        <a href="#" class="btn btn-clear">{% trans %}Discover the Green Currency Calculator{% endtrans %}</a>
+      </div>
+    </section>
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}
--- a/tool/template-marketing-usage.html
+++ b/tool/template-marketing-usage.html
@@ -0,0 +1,100 @@
+{% extends "template-base.html" %}
+{% block head %}
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
+
+{% endblock %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+  <div class="container my-40 marketing-wrapper">
+    <section class="row mb-50">
+      <div class="col-sm-4 offset-sm-1 mb-10">
+        <h6 class="text-green fs-base mb-4">{% trans %}Using XRP{% endtrans %}</h6>
+        <h1 class="mb-18">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
+      </div>
+      <div class="col-sm-4 offset-sm-1">
+        <h2 class="mt-12 mb-10">{% trans %}XRP and the XRP Ledger are used to power innovative technology across the payments space.{% endtrans %}</h2>
+        <p>{% trans %}Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas maximus ligula, id tincidunt odio condimentum ac. Pellentesque vulputate felis lacus, id imperdiet elit tristique id. Ut sapien lorem, finibus id auctor eu, volutpat finibus nisi. {% endtrans %}</p>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
+        <h2 class="mb-10">{% trans %}Cross-Border Payments{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Through RippleNet, financial institutions can use XRP to bridge two currencies in 3-5 seconds, ensuring payments are quickly sent and received in the local currency on either side of a transaction.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
+      </div>
+    </section>
+    
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <h2 class="mb-10">{% trans %}Micropayments{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Businesses are leveraging XRP and the XRP Ledger to build innovative products for gaming, content and web monetization, among other applications where money is at the center.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Learn About XRPL Businesses{% endtrans %}</a>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
+        <h2 class="mb-10">{% trans %}Digital Cryptocurrency Wallets{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Individuals can use mobile wallets to store private and public passwords and interact with various blockchains to send and receive digital assets, including XRP.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Explore Wallets{% endtrans %}</a>
+      </div>
+    </section>
+    
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-4 offset-sm-1">
+        <h2 class="mb-10">{% trans %}Exchanges{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Market makers and individuals use exchanges to trade XRP and other digital assets. Exchanges are often also intermediaries in cross-border payments among financial institutions.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Explore Exchanges{% endtrans %}</a>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1 order-1 order-sm-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-sm-6 offset-sm-1 order-2 order-sm-1">
+        <h2 class="mb-10">{% trans %}Institutional Trading{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Market participants use XRP as a high-speed, cost-efficient and reliable trading collateral. This means seizing arbitrage opportunities, servicing margin calls and managing general trade inventory in real time.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Learn More{% endtrans %}</a>
+      </div>
+    </section>
+
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}