edits to the explore > wallet, explore > exchanges, explore > businesses, and home page. added img folers and correlating images to the folders. minor changes to style. still *need to clean up styling*

dactyl-config.yml

@@ -214,17 +214,32 @@ pages:
             - en
             - ja
 
-    -   md: explore/wallets.md
+    -   name: Wallets
+        funnel: Explore
+        category: Wallets
+        template: template-explore-wallets.html
+        html: wallets.html
+        sidebar: disabled
         targets:
             - en
             - ja
 
-    -   md: explore/exchanges.md
+    -   name: Exchanges
+        funnel: Explore
+        category: Exchanges
+        template: template-explore-exchanges.html
+        html: exchanges.html
+        sidebar: disabled
         targets:
             - en
             - ja
 
-    -   md: explore/xrpl-businesses.md
+    -   name: Businesses
+        funnel: Explore
+        category: Businesses
+        template: template-explore-businesses.html
+        html: businesses.html
+        sidebar: disabled
         targets:
             - en
             - ja

img/graphics/home-hero-graphic.svg

@@ -0,0 +1,484 @@
+<svg width="1306" height="293" viewBox="0 0 1306 293" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.95">
+<g opacity="0.1">
+<path d="M1295.34 230.631H1302.9L1287.18 246.479C1281.49 252.22 1272.27 252.22 1266.58 246.479L1250.85 230.631H1258.4L1270.35 242.671C1273.95 246.299 1279.79 246.299 1283.4 242.671L1295.34 230.631Z" stroke="url(#paint0_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M1258.31 274.693H1250.75L1266.57 258.736C1272.26 252.996 1281.49 252.996 1287.18 258.736L1303 274.675H1295.44L1283.41 262.545C1279.8 258.916 1273.97 258.916 1270.36 262.545L1258.31 274.693Z" stroke="url(#paint1_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.2">
+<path d="M1243.91 210.255H1253.65L1233.38 230.688C1226.05 238.089 1214.16 238.089 1206.84 230.688L1186.57 210.255H1196.31L1211.69 225.778C1216.33 230.453 1223.87 230.453 1228.51 225.778L1243.91 210.255Z" stroke="url(#paint2_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M1196.2 267.042H1186.47L1206.86 246.482C1214.2 239.081 1226.08 239.081 1233.41 246.482L1253.79 267.024H1244.06L1228.55 251.374C1223.91 246.699 1216.37 246.699 1211.73 251.374L1196.2 267.042Z" stroke="url(#paint3_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.3">
+<path d="M1192.53 189.878H1204.45L1179.66 214.878C1170.69 223.921 1156.14 223.921 1147.15 214.878L1122.36 189.878H1134.28L1153.13 208.867C1158.82 214.589 1168.03 214.589 1173.72 208.867L1192.53 189.878Z" stroke="url(#paint4_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M1134.12 259.39H1122.19L1147.15 234.228C1156.12 225.185 1170.67 225.185 1179.66 234.228L1204.61 259.372H1192.69L1173.7 240.221C1168.01 234.499 1158.8 234.499 1153.11 240.221L1134.12 259.39Z" stroke="url(#paint5_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.4">
+<path d="M1141.11 169.501H1155.21L1125.87 199.068C1115.25 209.772 1098.04 209.772 1087.42 199.068L1058.09 169.501H1072.19L1094.48 191.974C1101.21 198.761 1112.12 198.761 1118.84 191.974L1141.11 169.501Z" stroke="url(#paint6_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M1071.79 251.527H1057.69L1087.19 221.762C1097.81 211.058 1115.03 211.058 1125.65 221.762L1155.17 251.509H1141.07L1118.6 228.856C1111.87 222.069 1100.96 222.069 1094.24 228.856L1071.79 251.527Z" stroke="url(#paint7_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.5">
+<path d="M1089.7 149.124H1105.97L1072.1 183.275C1059.83 195.64 1039.97 195.64 1027.7 183.275L993.832 149.124H1010.11L1035.84 175.062C1043.61 182.896 1056.19 182.896 1063.97 175.062L1089.7 149.124Z" stroke="url(#paint8_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M1009.92 244.087H993.65L1027.72 209.719C1039.99 197.355 1059.85 197.355 1072.12 209.719L1106.21 244.069H1089.94L1063.98 217.914C1056.21 210.08 1043.63 210.08 1035.86 217.914L1009.92 244.087Z" stroke="url(#paint9_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.6">
+<path d="M1038.3 128.747H1056.77L1018.37 167.483C1004.47 181.509 981.922 181.509 968.022 167.483L929.603 128.765H948.069L977.247 158.187C986.054 167.068 1000.33 167.068 1009.14 158.187L1038.3 128.747Z" stroke="url(#paint10_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M947.814 236.436H929.347L967.984 197.465C981.884 183.44 1004.43 183.44 1018.33 197.465L1056.98 236.418H1038.52L1009.1 206.761C1000.3 197.88 986.016 197.88 977.208 206.761L947.814 236.436Z" stroke="url(#paint11_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.7">
+<path d="M986.891 108.37H1007.53L964.582 151.673C949.033 167.341 923.825 167.359 908.276 151.673L865.325 108.37H885.967L918.587 141.258C928.428 151.186 944.394 151.186 954.234 141.258L986.891 108.37Z" stroke="url(#paint12_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M885.732 228.785H865.091L908.295 185.211C923.844 169.543 949.053 169.525 964.602 185.211L1007.82 228.767H987.182L954.29 195.608C944.449 185.68 928.483 185.68 918.643 195.608L885.732 228.785Z" stroke="url(#paint13_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8">
+<path d="M935.475 87.9925H958.291L910.81 135.863C893.63 153.191 865.757 153.191 848.559 135.863L801.078 87.9925H823.894L859.976 124.364C870.868 135.339 888.519 135.339 899.393 124.364L935.475 87.9925Z" stroke="url(#paint14_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M823.639 221.133H800.822L848.593 172.956C865.773 155.628 893.646 155.628 910.844 172.956L958.633 221.115H935.817L899.445 184.454C888.554 173.48 870.902 173.48 860.029 184.454L823.639 221.133Z" stroke="url(#paint15_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.9">
+<path d="M884.08 67.6158H909.089L857.077 120.071C838.248 139.06 807.712 139.06 788.882 120.071L736.853 67.6339H761.862L801.387 107.471C813.311 119.493 832.648 119.493 844.573 107.471L884.08 67.6158Z" stroke="url(#paint16_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M761.536 213.483H736.527L788.865 160.703C807.695 141.714 838.231 141.714 857.06 160.703L909.416 213.465H884.407L844.556 173.302C832.631 161.28 813.294 161.28 801.37 173.302L761.536 213.483Z" stroke="url(#paint17_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<path d="M832.663 47.2385H859.847L803.287 104.26C782.808 124.91 749.626 124.91 729.147 104.26L672.587 47.2566H699.771L742.739 90.5779C755.715 103.647 776.737 103.647 789.695 90.5779L832.663 47.2385Z" stroke="url(#paint18_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M699.448 205.813H672.265L729.169 148.43C749.648 127.78 782.83 127.78 803.309 148.43L860.213 205.794H833.03L789.717 162.13C776.741 149.062 755.719 149.062 742.761 162.13L699.448 205.813Z" stroke="url(#paint19_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M781.257 25.0562H810.633L749.542 86.6628C727.433 108.955 691.568 108.973 669.459 86.6628L608.35 25.0742H637.708L684.12 71.8613C698.129 85.9768 720.836 85.9768 734.845 71.8613L781.257 25.0562Z" stroke="url(#paint20_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M637.345 196.356H607.986L669.458 134.371C691.568 112.078 727.432 112.06 749.542 134.371L811.013 196.338H781.655L734.862 149.172C720.854 135.056 698.146 135.056 684.137 149.172L637.345 196.356Z" stroke="url(#paint21_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<g opacity="0.1">
+<path d="M10.6567 247.185H3.10348L18.8077 263.034C24.4953 268.774 33.715 268.774 39.4026 263.034L55.125 247.185H47.5717L35.6351 259.225C32.0305 262.853 26.198 262.853 22.5934 259.225L10.6567 247.185Z" stroke="url(#paint22_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M47.6665 291.247H55.2197L39.4068 275.29C33.7193 269.55 24.4995 269.55 18.812 275.29L2.99906 291.229H10.5523L22.5795 279.099C26.1841 275.471 32.0166 275.471 35.6211 279.099L47.6665 291.247Z" stroke="url(#paint23_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.2">
+<path d="M62.0557 217.78H52.3288L72.5795 238.213C79.9154 245.614 91.7977 245.614 99.1155 238.213L119.366 217.78H109.639L94.2612 233.304C89.6241 237.979 82.089 237.979 77.452 233.304L62.0557 217.78Z" stroke="url(#paint24_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M109.746 274.567H119.473L99.0952 254.008C91.7593 246.607 79.8769 246.607 72.5591 254.008L52.1816 274.549H61.9085L77.4135 258.899C82.0505 254.224 89.5856 254.224 94.2226 258.899L109.746 274.567Z" stroke="url(#paint25_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.3">
+<path d="M113.415 189.553H101.497L126.276 214.553C135.242 223.597 149.787 223.597 158.771 214.553L183.55 189.553H171.631L152.794 208.543C147.106 214.265 137.904 214.265 132.217 208.543L113.415 189.553Z" stroke="url(#paint26_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M171.796 259.066H183.715L158.773 233.904C149.807 224.86 135.262 224.86 126.278 233.904L101.336 259.048H113.254L132.237 239.896C137.924 234.174 147.126 234.174 152.814 239.896L171.796 259.066Z" stroke="url(#paint27_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.4">
+<path d="M164.803 169.176H150.711L180.037 198.743C190.651 209.447 207.859 209.447 218.473 198.743L247.78 169.176H233.688L211.409 191.649C204.689 198.436 193.785 198.436 187.064 191.649L164.803 169.176Z" stroke="url(#paint28_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M234.095 251.203H248.188L218.699 221.437C208.085 210.733 190.877 210.733 180.263 221.437L150.756 251.185H164.848L187.309 228.531C194.029 221.744 204.933 221.744 211.653 228.531L234.095 251.203Z" stroke="url(#paint29_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.5">
+<path d="M216.192 148.799H199.927L233.78 182.951C246.043 195.316 265.895 195.316 278.158 182.951L312.012 148.799H295.746L270.025 174.738C262.254 182.572 249.684 182.572 241.913 174.738L216.192 148.799Z" stroke="url(#paint30_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M295.927 243.763H312.192L278.139 209.395C265.877 197.03 246.025 197.03 233.762 209.395L199.691 243.745H215.956L241.895 217.59C249.665 209.756 262.236 209.756 270.007 217.59L295.927 243.763Z" stroke="url(#paint31_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.6">
+<path d="M267.562 128.423H249.105L287.487 167.159C301.38 181.184 323.913 181.184 337.806 167.159L376.206 128.441H357.749L328.586 157.863C319.783 166.744 305.51 166.744 296.707 157.863L267.562 128.423Z" stroke="url(#paint32_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M358.003 236.112H376.461L337.843 197.141C323.95 183.115 301.417 183.115 287.525 197.141L248.889 236.094H267.346L296.744 206.437C305.547 197.556 319.821 197.556 328.624 206.437L358.003 236.112Z" stroke="url(#paint33_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.7">
+<path d="M318.946 108.045H298.315L341.244 151.348C356.785 167.016 381.98 167.034 397.522 151.348L440.45 108.045H419.819L387.215 140.933C377.38 150.861 361.422 150.861 351.586 140.933L318.946 108.045Z" stroke="url(#paint34_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M420.054 228.46H440.685L397.502 184.886C381.961 169.218 356.766 169.2 341.224 184.886L298.024 228.442H318.655L351.531 195.283C361.366 185.356 377.324 185.356 387.16 195.283L420.054 228.46Z" stroke="url(#paint35_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8">
+<path d="M370.337 87.6682H347.532L394.989 135.538C412.16 152.867 440.019 152.867 457.208 135.538L504.665 87.6682H481.86L445.797 124.04C434.911 135.015 417.268 135.015 406.4 124.04L370.337 87.6682Z" stroke="url(#paint36_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M482.116 220.809H504.921L457.174 172.632C440.003 155.303 412.144 155.303 394.955 172.632L347.19 220.791H369.995L406.348 184.13C417.234 173.155 434.877 173.155 445.745 184.13L482.116 220.809Z" stroke="url(#paint37_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.9">
+<path d="M421.709 67.2914H396.713L448.698 119.746C467.517 138.736 498.038 138.736 516.858 119.746L568.861 67.3095H543.865L504.36 107.147C492.441 119.169 473.114 119.169 461.196 107.147L421.709 67.2914Z" stroke="url(#paint38_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M544.188 213.158H569.185L516.873 160.378C498.054 141.389 467.533 141.389 448.713 160.378L396.384 213.14H421.38L461.211 172.978C473.13 160.956 492.457 160.956 504.375 172.978L544.188 213.158Z" stroke="url(#paint39_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<path d="M473.094 46.9141H445.924L502.456 103.936C522.924 124.586 556.089 124.586 576.557 103.936L633.089 46.9322H605.919L562.972 90.2535C550.003 103.322 528.992 103.322 516.041 90.2535L473.094 46.9141Z" stroke="url(#paint40_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M606.242 205.488H633.412L576.536 148.105C556.068 127.456 522.903 127.456 502.435 148.105L445.559 205.47H472.729L516.02 161.806C528.989 148.737 550 148.737 562.951 161.806L606.242 205.488Z" stroke="url(#paint41_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M524.476 24.7318H495.114L556.174 86.3384C578.272 108.631 614.119 108.649 636.217 86.3384L697.295 24.7498H667.951L621.563 71.5369C607.562 85.6524 584.866 85.6524 570.864 71.5369L524.476 24.7318Z" stroke="url(#paint42_linear)" stroke-width="2" stroke-miterlimit="10"/>
+<path d="M668.316 196.032H697.659L636.219 134.046C614.121 111.754 578.274 111.736 556.176 134.046L494.736 196.014H524.079L570.848 148.848C584.849 134.732 607.545 134.732 621.547 148.848L668.316 196.032Z" stroke="url(#paint43_linear)" stroke-width="2" stroke-miterlimit="10"/>
+</g>
+<path d="M587.01 0H560.03L616.144 56.6139C636.46 77.1067 669.406 77.1067 689.722 56.6139L745.851 0.015443H718.871L676.224 43.0241C663.362 55.9962 642.488 55.9962 629.626 43.0241L587.01 0Z" fill="white"/>
+<path d="M719.197 157.441H746.177L689.707 100.472C669.391 79.9789 636.461 79.9789 616.129 100.472L559.659 157.425H586.639L629.627 114.077C642.489 101.105 663.363 101.105 676.225 114.077L719.197 157.441Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="1250.68" y1="240.71" x2="1303.06" y2="240.71" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="1250.58" y1="264.564" x2="1303.17" y2="264.564" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="1186.36" y1="223.25" x2="1253.86" y2="223.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="1186.25" y1="253.99" x2="1254.01" y2="253.99" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="1122.09" y1="205.773" x2="1204.72" y2="205.773" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="1121.93" y1="243.422" x2="1204.88" y2="243.422" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="1057.78" y1="188.303" x2="1155.53" y2="188.303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="1057.37" y1="232.635" x2="1155.48" y2="232.635" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="993.47" y1="170.841" x2="1106.34" y2="170.841" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="993.287" y1="222.272" x2="1106.57" y2="222.272" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="929.192" y1="153.38" x2="1057.18" y2="153.38" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint11_linear" x1="928.934" y1="211.697" x2="1057.4" y2="211.697" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint12_linear" x1="864.866" y1="135.907" x2="1007.99" y2="135.907" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint13_linear" x1="864.63" y1="201.125" x2="1008.29" y2="201.125" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint14_linear" x1="800.57" y1="118.433" x2="958.801" y2="118.433" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint15_linear" x1="800.312" y1="190.554" x2="959.146" y2="190.554" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint16_linear" x1="736.296" y1="100.972" x2="909.648" y2="100.972" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint17_linear" x1="735.969" y1="179.98" x2="909.978" y2="179.98" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint18_linear" x1="671.982" y1="83.5017" x2="860.455" y2="83.5017" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint19_linear" x1="671.657" y1="169.386" x2="860.824" y2="169.386" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint20_linear" x1="607.696" y1="64.2318" x2="811.29" y2="64.2318" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint21_linear" x1="607.33" y1="157.01" x2="811.672" y2="157.01" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint22_linear" x1="55.2931" y1="257.265" x2="2.93461" y2="257.265" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint23_linear" x1="55.3885" y1="281.119" x2="2.82954" y2="281.119" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint24_linear" x1="119.583" y1="230.775" x2="52.1112" y2="230.775" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint25_linear" x1="119.69" y1="261.515" x2="51.9632" y2="261.515" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint26_linear" x1="183.815" y1="205.448" x2="101.23" y2="205.448" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint27_linear" x1="183.981" y1="243.097" x2="101.068" y2="243.097" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint28_linear" x1="248.094" y1="187.978" x2="150.396" y2="187.978" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint29_linear" x1="248.502" y1="232.311" x2="150.44" y2="232.311" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint30_linear" x1="312.374" y1="170.517" x2="199.563" y2="170.517" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint31_linear" x1="312.556" y1="221.947" x2="199.326" y2="221.947" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint32_linear" x1="376.617" y1="153.056" x2="248.692" y2="153.056" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint33_linear" x1="376.873" y1="211.373" x2="248.475" y2="211.373" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint34_linear" x1="440.909" y1="135.582" x2="297.854" y2="135.582" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint35_linear" x1="441.146" y1="200.801" x2="297.561" y2="200.801" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint36_linear" x1="505.173" y1="118.109" x2="347.022" y2="118.109" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint37_linear" x1="505.431" y1="190.229" x2="346.678" y2="190.229" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint38_linear" x1="569.418" y1="100.648" x2="396.154" y2="100.648" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint39_linear" x1="569.743" y1="179.655" x2="395.823" y2="179.655" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint40_linear" x1="633.694" y1="83.1773" x2="445.316" y2="83.1773" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint41_linear" x1="634.019" y1="169.062" x2="444.949" y2="169.062" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint42_linear" x1="697.948" y1="63.9074" x2="494.458" y2="63.9074" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+<linearGradient id="paint43_linear" x1="698.315" y1="156.685" x2="494.077" y2="156.685" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B480FF"/>
+<stop offset="0.104167" stop-color="#974CFF"/>
+<stop offset="0.260417" stop-color="#5F00E6"/>
+<stop offset="0.416667" stop-color="#1AA4FF"/>
+<stop offset="0.552083" stop-color="#1AA4FF"/>
+<stop offset="0.739583" stop-color="#B3E1FF"/>
+<stop offset="1" stop-color="#19FF83"/>
+</linearGradient>
+</defs>
+</svg>

styles/_content.scss

@@ -119,3 +119,31 @@ th, td {
 td:nth-child(1) {
   font-weight: bold;
 }
+
+
+
+/* Cards ------------------------------- */
+.card {
+  background-color: transparent;
+}
+.square {
+  position: relative;
+  flex-basis: calc(25% - 30px);
+  margin: 15px;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+}
+@media (max-width: 768px) { 
+  .square {
+    flex-basis: calc(50% - 30px);
+  }
+}
+
+.square:before {
+  content: '';
+  display: block;
+  padding-top: 100%;
+}
+
+

styles/_font.scss

@@ -30,6 +30,10 @@ h1, .h1 {
 h6, .h6 {
   font-size: 1.125rem;
 }
+.h6 {
+  font-size: 1.125rem !important;
+}
+
 p {
   line-height: 1.5;
 }

styles/_landings.scss

@@ -125,7 +125,6 @@
   margin-bottom: 1.5rem;
 }
 
-.landing h3,
 #test-net-servers h3 {
   font-size: 1.4rem;
   font-weight: 700;

styles/_marketing.scss

@@ -74,17 +74,23 @@
 .card-wrapper {
 	width: 100%;
 }
-.card {
-	margin: 0 0.75rem;
-	background: black;
-	padding: 3rem 2rem;
-	color: $white;
-}
-.card h5 {
-	height: 38px;
-	padding-bottom: 5rem;
+.card-b {
+	padding: 2rem;
+	background: rgba(34, 37, 43, 0.5);
 }
 
+// change this to be less generic
+// .card {
+// 	margin: 0 0.75rem;
+// 	background: black;
+// 	padding: 3rem 2rem;
+// 	color: $white;
+// }
+// .card h5 {
+// 	height: 38px;
+// 	padding-bottom: 5rem;
+// }
+
 .section-marker {
 	position: absolute;
 	font-size: 0.875rem;
@@ -95,3 +101,55 @@
 	transform-origin: top left;
 }
 
+
+/* HOME STYLINGS */
+#home-hero-marker {
+	top: unset;
+	bottom: 64px;
+}
+#home-hero-marker:after {
+	position: absolute;
+	content: " ➝";
+	box-sizing: initial;
+  animation: arrowDance 1.2s infinite;
+}
+#bg-home-1 {
+	background-image: url(../../img/graphics/home-bg.png);
+	background-repeat: no-repeat;
+  background-size: 90%;
+  background-position: 90px -180px;
+}
+@media only screen and (max-width: 992px) {
+	#bg-home-1 {
+		background-size: cover;
+	}
+}
+.hc {
+	background: black;
+	padding: 2.25rem 2rem 7.75rem;
+	color: var(--white);
+	background-position: bottom;
+	background-repeat: no-repeat;
+	background-size: 100% 70px;
+}
+.hc h5 {
+	height: 38px;
+	padding-bottom: 5rem;
+}
+#hc-1 {
+	background-image: url(../../img/graphics/hc-1.png);
+	border: 1px solid #FAFF1A;
+}
+#hc-2 {
+	background-image: url(../../img/graphics/hc-2.png);
+	border: 1px solid #FF1A8B;
+}
+#hc-3 {
+	background-image: url(../../img/graphics/hc-3.png);
+	border: 1px solid #974CFF;
+}
+@keyframes arrowDance {
+  0% { padding-left: 7px; }
+  50% { padding-left: 14px; }
+  100% { padding-left: 7px; }
+}

tool/template-calculator.html

@@ -0,0 +1,64 @@
+{% 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]-->
+
+{% 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-md-5">
+        <h6 class="text-primary mb-4">{% trans %}Contribute to XRPL.org{% endtrans %}</h6>
+        <h1 class="mb-10">{% trans %}How to Suggest Changes to the Site{% endtrans %}</h1>
+        <p>{% trans %}Thank you for your interest in contributing to XRPL.org.{% endtrans %}</p>
+        <p>{% trans %}This website was created for the community and is meant to be a living, breathing source of truth for XRP resources.{% endtrans %}</p>
+				<p>{% trans %}If you’d like to recommend new content, please fill out the form or submit your changes in GitHub.{% endtrans %}</p>
+      </div>
+      <div class="col-md-6 offset-md-1">
+        <form id="contact-form" method="post" action="contact-form-handler.php">
+        	<label class="text-primary bold h6" for="name">Name*</label>
+        	<input type="text" name="name" placeholder="Your Name" required>
+        	<label class="text-primary bold h6 mt-4" for="email">Email*</label>
+        	<input type="email" name="email" placeholder="Your Email" required>
+        	<label class="text-primary bold h6 mt-4" for="message">Message*</label>
+        	<textarea name="message" placeholder="Message" required name="message"></textarea>
+        	<input type="submit" class="form-control submit mt-4" value="Submit">
+        </form>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100 mb-10" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-1">
+        <h2 class="mb-10 h1">{% trans %}For Developers{% endtrans %}</h2>
+        <p class="mb-10 normal">{% trans %}Contributing to the developer portal of XRPL.org is a great way to learn about the XRP Ledger.{% endtrans %}</p>
+        <p>{% trans %}You may also be interested in learning about Interledger Protocol (ILP), which, along with the XRP Ledger, is another part of the Xpring developer ecosystem.{% endtrans %}</p>
+				<p>{% trans %}If you choose to submit your changes to the site through TGitHub, please read and consider the contributing guidelines.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Learn About On-Demand Liquidity{% endtrans %}</a>
+      </div>
+    </section>
+    
+
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script src="https://www.google.com/recaptcha/api.js"></script>
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}

tool/template-explore-businesses.html

@@ -0,0 +1,112 @@
+{% 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]-->
+
+{% 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-md-4 d-flex flex-column-reverse justify-content-end">
+        <h1 class="mb-10">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h1>
+        <h3 class="text-primary mb-4 h6">{% trans %}Businesses Running on the XRP Ledger{% endtrans %}</h3>
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <p class="mt-12 mb-10">{% trans %}While exchanges and wallet providers are the most common businesses running on the XRP Ledger, there are many other companies that leverage the technology to solve interesting problems across myriad industries.{% endtrans %}</p>
+        <div class="row">
+          <ul class="col ml-3">
+            <li>{% trans %}Asset Custody{% endtrans %}</li>
+            <li>{% trans %}Payment Processing{% endtrans %}</li> 
+            <li>{% trans %}Micropayments{% endtrans %}</li>
+            <li>{% trans %}Wallets{% endtrans %}</li>
+            <li>{% trans %}Music{% endtrans %}</li>
+          </ul>
+          <ul class="col">
+            <li>{% trans %}On-Demand Liquidity{% endtrans %}</li>
+            <li>{% trans %}Gaming{% endtrans %}</li> 
+            <li>{% trans %}Infrastructure{% endtrans %}</li>
+            <li>{% trans %}Security{% endtrans %}</li>
+            <li>{% trans %}Applications{% endtrans %}</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">Businesses Using XRP</h6>
+      <div class="col-md-5 mb-20 card-b">
+        <img class="mw-100" src="./img/businesses/bitgo.png">
+        <h3 class="my-10 h4">Asset Custody</h3>
+        <p>BitGo provides custodial and non-custodial asset holdings for digital assets including XRP. BitGo's enterprise-level security empowers businesses to integrate digital currencies like XRP into new and existing financial systems.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b offset-md-1">
+        <img class="mw-100" src="./img/businesses/bitpay.png">
+        <h3 class="my-10 h4">Payment Processing</h3>
+        <p>BitPay builds powerful, enterprise-grade tools for accepting and spending cryptocurrencies, including XRP.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b">
+        <img class="mw-100" src="./img/businesses/coil.png">
+        <h3 class="my-10 h4">Web Monetization</h3>
+        <p>Coil provides an alternative to the status quo of paid advertisements with web monetization. Coil's web monetization uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRP Ledger's payment channels provide an ideal system for settling these micropayments at high speed and low cost.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b offset-md-1">
+        <img class="mw-100" src="./img/businesses/forte.png">
+        <h3 class="my-10 h4">Online Gaming</h3>
+        <p>Forte offers an unprecedented set of easy-to-use tools and services for game developers to integrate blockchain technology into their games, to unlock new economic and creative opportunities for gamers across the world.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b">
+        <img class="mw-100" src="./img/businesses/exodus.png">
+        <h3 class="my-10 h4">Wallets and Apps</h3>
+        <p>Exodus offers wallets and applications for securing, managing and exchanging crypto.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b offset-md-1">
+        <img class="mw-100" src="./img/businesses/raised-in-space.png">
+        <h3 class="my-10 h4">Music</h3>
+        <p>Raised in Space is a music/tech investment group focused on raising the value of music, innovating across the entire value chain of the music industry.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b">
+        <img class="mw-100" src="./img/businesses/ripple.png">
+        <h3 class="my-10 h4">On-Demand Liquidity</h3>
+        <p>Ripple powers instant, lower-cost settlement of cross-border payments using XRP to source liquidity on demand. XRP is ideally suited for global payments because it's quicker, less costly, and more scalable than any other digital asset.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b offset-md-1">
+        <img class="mw-100" src="./img/businesses/towo-labs.png">
+        <h3 class="my-10 h4">Infrastructure</h3>
+        <p>Towo Labs was founded in 2019, to develop XRP Ledger and Interledger infrastructures and make non-custodial crypto management easier.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b">
+        <img class="mw-100" src="./img/businesses/xrplorer.png">
+        <h3 class="my-10 h4">Security</h3>
+        <p>Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.</p>
+      </div>
+      <div class="col-md-5 mb-20 card-b offset-md-1">
+        <img class="mw-100" src="./img/businesses/xrpl-labs.png">
+        <h3 class="my-10 h4">Applications</h3>
+        <p>From cold storage to apps for signing transactions, XRPL Labs is dedicated to building software on the XRP Ledger.</p>
+      </div>
+      <div class="w-100"></div>
+      <div class="col-md-4 offset-md-6">
+        <p style="font-size: 10px;">Disclaimer: XRPL.org does not endorse or recommend any wallets or exchanges, or make any representations with respect to wallets. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology.</p>
+      </div>
+    </section>
+
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}

tool/template-explore-exchanges.html

@@ -0,0 +1,80 @@
+{% 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]-->
+
+{% 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 mt-40 mb-40">
+      <div class="col-sm-4 mb-10">
+        <h3 class="text-primary mb-4 h6">XRP Exchanges</h3>
+        <h1 class="mb-18">XRP Is Traded on More Than 100 Markets and Exchanges Worldwide</h1>
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <h2 class="mt-12 mb-10">Exchanges are where people trade currencies.</h2>
+        <p>There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial).</p>
+        <p>Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates. Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future.</p>
+        <p>Custodial exchanges manage a user’s private keys, and publish centralized order books of buyers and sellers. Non-custodial exchanges, also known as decentralized exchanges, do not manage a user’s private keys, and publish decentralized order books of buyers and sellers on a blockchain.</p>
+      </div>
+    </section>
+
+    <section class="mb-50 row">
+      <h5 class="ml-3 mb-3">Top Exchanges:</h5>
+      <div class="w-100"></div>
+      <div class="d-flex flex-wrap w-100">
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/coinbase.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/binance.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/bitstamp.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/kraken.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/cex-io.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/bitfinex.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/luno.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/bittrex.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/independent-reserve.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/exchanges/liquid.png">
+        </a>
+      </div>
+      <div class="w-100"></div>
+      <p class="col-sm-4 offset-sm-8 mt-16" style="font-size: 10px;">Disclaimer: This information is drawn from other sources on the internet.  XRPL.org does not endorse or recommend any exchanges or make any representations with respect to exchanges or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices.</p>
+    </section>
+
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}

tool/template-explore-news.html

@@ -0,0 +1,99 @@
+{% 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]-->
+
+{% 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-md-4 d-flex flex-column-reverse justify-content-end">
+        <h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
+        <h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-4 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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 %}

tool/template-explore-wallets.html

@@ -0,0 +1,73 @@
+{% 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]-->
+
+{% 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 mt-40 mb-40">
+      <div class="col-sm-4 mb-10">
+        <h3 class="text-primary mb-4 h6">XRP Wallets</h3>
+        <h1 class="mb-18">Options for Storing XRP</h1>
+      </div>
+      <div class="col-sm-6 offset-sm-1">
+        <h2 class="mt-12 mb-10">Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: custodia and non-custodial.</h2>
+        <p>Custodial wallets manage a user's private key, which allows the wallet to withdraw crypto currency on a user's behalf. Non-custodial wallets do not manage a user's private key, which is up to the user to manage, and therefore cannot send crypto currency on the user's behalf.</p>
+      </div>
+    </section>
+
+    <section class="mb-50 row">
+      <h5 class="ml-3 mb-3">XRPL Trusted Exchanges:</h5>
+      <div class="w-100"></div>
+      <div class="d-flex flex-wrap w-100 mb-10">
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/xpring.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/xumm.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/trust-wallet.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/harbor-wallet.png">
+        </a>
+      </div>
+      <h5 class="ml-3 mb-3">Hardware Exchanges:</h5>
+      <div class="d-flex flex-wrap w-100">
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/trezor.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/ledger.png">
+        </a>
+        <a class="square d-flex card-b" href="#">
+          <img class="mw-100" src="./img/wallets/secalot.png">
+        </a>
+      </div>
+      <div class="w-100"></div>
+      <p class="col-sm-4 offset-sm-8 mt-16" style="font-size: 10px;">Disclaimer: XRPL.org does not endorse or recommend any wallets or make any representations with respect to wallets or the purchase or sale of digital assets more generally. It’s advisable to conduct your own due diligence before relying on any third party or third-party technology, and providers may vary significantly in their compliance, data security, and privacy practices.</p>
+    </section>
+
+  </div>
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}

tool/template-hom-original.html

@@ -0,0 +1,317 @@
+{% 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]-->
+
+{% endblock %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+  <section class="container-fluid card-grid card-grid-2x2">
+      <div class="section-hero card justify-content-end">
+        <div>
+          <h1 class="display-4">{% trans %}Powering the Internet of Value.{% endtrans %}</h1>
+          <div class="blurb">
+            <p>{% trans %}The <a href="#xrp_ledger_intro">XRP Ledger</a> is open-source technology that anyone can use.{% endtrans %}</p>
+            <p>{% trans %}Use the tools and information provided here to integrate with and contribute to the open-source platform.{% endtrans %}</p>
+            <h5>{% trans %}Want more?{% endtrans %}</h5>
+            <p>{% trans %}Get updates about XRP Ledger webinars, releases, and documentation!{% endtrans %}</p>
+          </div><!--/.blurb-->
+          <a class="btn btn-outline-secondary external-link" href="https://goo.gl/forms/sHMFxU8dKiTUaltE3" target="_blank">{% trans %}Sign up!{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
+        </div>
+      </div><!--/.section-hero-->
+
+      {% set flag_n = cycler(* range(1,99)) %}
+      <div class="card">
+        {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'get-started-with-the-rippled-api.html')|first %}
+        <div class="card-header">
+          <h3 class="card-title"><a href="{{cardpage.html}}">{{cardpage.name}}</a></h3>
+        </div><!--/.card-header-->
+        <div class="card-body">
+          <p>{{cardpage.blurb}}</p>
+        </div><!--/.card-body-->
+        <div class="card-footer">
+          <a href="get-started-with-the-rippled-api.html" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
+        </div><!--/.card-footer-->
+        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+      </div><!--/.card-->
+
+      <div class="card pr-0">
+        <div class="card-header">
+          <h3 class="card-title"><a href="concepts.html">{% trans %}Learn How It Works{% endtrans %}</a></h3>
+        </div><!--/.card-header-->
+        <div class="card-body">
+          <div class="curated-links">
+            <ul>
+              <li><a href="intro-to-consensus.html">{{(pages|selectattr('html', 'defined_and_equalto', 'intro-to-consensus.html')|first).name}}</a></li>
+              <li><a href="xrp.html">{% trans %}About XRP{% endtrans %}</a></li>
+              <li><a href="payment-system-basics.html">{{(pages|selectattr('html', 'defined_and_equalto', 'payment-system-basics.html')|first).name}}</a></li>
+              <li><a href="decentralized-exchange.html">{{(pages|selectattr('html', 'defined_and_equalto', 'decentralized-exchange.html')|first).name}}</a></li>
+            </ul>
+          </div><!--/.curated-links-->
+        </div><!--/.card-body-->
+        <div class="card-footer">
+          <a href="concepts.html" class="btn btn-outline-secondary">{% trans %}All Concepts{% endtrans %}</a>
+        </div><!--/.card-footer-->
+        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+      </div><!--/.card-->
+
+      <div class="card">
+        <div class="card-header">
+          <h3 class="card-title"><a href="docs.html">{% trans %}Read Documentation{% endtrans %}</a></h3>
+        </div><!--/.card-header-->
+        <div class="card-body">
+          <div class="curated-links">
+            <ul>
+              <li><a href="references.html">{{(pages|selectattr('html', 'defined_and_equalto', 'references.html')|first).longer_name}}</a></li>
+              <li><a href="concepts.html">{{(pages|selectattr('html', 'defined_and_equalto', 'concepts.html')|first).name}}</a></li>
+              <li><a href="tutorials.html">{{(pages|selectattr('html', 'defined_and_equalto', 'tutorials.html')|first).name}}</a></li>
+              <li><a href="docs.html#full-doc-index">{% trans %}Full Doc Index{% endtrans %}</a></li>
+            </ul>
+          </div><!--/.curated-links-->
+        </div><!--/.card-body-->
+        <div class="card-footer">
+          <a href="docs.html" class="btn btn-outline-secondary">{% trans %}All Docs{% endtrans %}</a>
+        </div><!--/.card-footer-->
+        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+      </div><!--/.card-->
+
+      <div class="card pr-0">
+        <div class="card-header">
+          <h3 class="card-title">{% trans %}Explore the XRP Ledger{% endtrans %}</h3>
+        </div><!--/.card-header-->
+        <div class="card-body">
+          <p>{% trans %}Use the XRPL Explorer to view a stream of ledger activity and see validator statuses.{% endtrans %}</p>
+        </div><!--/.card-body-->
+        <div class="card-footer">
+          <div class="readmore">
+            <a href="https://livenet.xrpl.org/" class="btn btn-outline-secondary">{% trans %}Go to the Explorer{% endtrans %}</a>
+          </div>
+        </div><!--/.card-footer-->
+        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+      </div><!--/.card-->
+
+  </section><!--/"Above the fold" .card-grid-2x2-->
+
+  <section class="container-fluid card-grid">
+    <div class="card pl-0">
+      <div class="card-header">
+        <h2><a href="/blog/">XRP Ledger Blog</a></h2>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <div class="blurb">
+          <p>Visit the blog for the latest XRP Ledger info, including <a href="/blog/label/rippled-release-notes.html">Release Notes</a>, <a href="/blog/label/amendments.html">Amendments</a> to the XRP Ledger protocol, <a href="/blog/label/features.html">Feature articles</a> from XRP experts, and more.</p>
+        </div>
+      </div>
+      <div class="card-footer">
+        <a href="/blog/" class="btn btn-outline-secondary">View Blog</a>
+      </div>
+    </div>
+  </section>
+
+  {% set flag_n = cycler(* range(1,99)) %}
+  <section class="container-fluid card-grid card-grid-2x4" id="xrp_ledger_intro">
+    <div class="card section-hero pl-0">
+      <div class="card-header">
+        <h2><a href="xrp-ledger-overview.html">{% trans %}What is the XRP Ledger?{% endtrans %}</a></h2>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <p>{% trans %}The XRP Ledger is a decentralized cryptographic ledger, powered by a network of peer-to-peer servers. It is the home of XRP, a digital asset designed to bridge the many different currencies in use worldwide.{% endtrans %}</p>
+      </div>
+    </div><!--/.section-hero-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#the-digital-asset-for-payments{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-digital-asset.svg" alt="{% trans %}(digital asset icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}The Digital Asset for Payments{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#censorship-resistant-transaction-processing{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-censorship-resistant.svg" alt="{% trans %}(censorship resistance icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Censorship-Resistant Transaction Processing{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#fast-efficient-consensus-algorithm{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-fast-algorithm.svg" alt="{% trans %}(consensus algorithm icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Fast, Efficient Consensus Algorithm{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#finite-xrp-supply{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-finite.svg" alt="{% trans %}(xrp supply icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Finite XRP Supply{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#responsible-software-governance{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-responsible.svg" alt="{% trans %}(governance icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Responsible Software Governance{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#secure-adaptable-cryptography{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-secure.svg" alt="{% trans %}(cryptography icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Secure, Adaptable Cryptography{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#modern-features-for-smart-contracts{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-modern-smart-contracts.svg" alt="{% trans %}(smart contracts icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}Modern Features for Smart Contracts{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+    <a href="{% trans %}xrp-ledger-overview.html#on-ledger-decentralized-exchange{% endtrans %}" class="card">
+      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-on-ledger-decentralized.svg" alt="{% trans %}(decentralized exchange icon){% endtrans %}" /></div>
+      <div class="card-footer"><h3>{% trans %}On-Ledger Decentralized Exchange{% endtrans %}</h3></div>
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </a><!--/.card-->
+
+  </section><!--/#xrp_ledger_intro-->
+
+
+  <section class="container-fluid card-grid card-grid-2x2">
+    <div class="section-hero card pl-0">
+      <h2>{% trans %}Start Building{% endtrans %}</h2>
+      <div class="blurb">
+        <p>{% trans %}Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.{% endtrans %}</p>
+      </div>
+    </div><!--/.section-hero-->
+
+    {% set flag_n = cycler(* range(1,99)) %}
+    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'list-xrp-in-your-exchange.html')|first %}
+    <div class="card">
+      <div class="card-header">
+          <a href="{{cardpage.html}}" class="header-link">
+            <img class="image-icon" src="assets/img/icon-xrp-list-xrp.svg" alt="{% trans %}'list xrp' icon{% endtrans %}">
+            <h3 class="card-title">{{cardpage.name}}</h3>
+        </a>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <p>{{cardpage.blurb}}</p>
+      </div><!--/.card-body-->
+      <div class="card-footer">
+        <div class="readmore">
+          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
+        </div>
+      </div><!--/.card-footer-->
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </div><!--/.card-->
+
+    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'send-xrp.html')|first %}
+    <div class="card">
+      <div class="card-header">
+        <a href="{{cardpage.html}}" class="header-link">
+          <img class="image-icon" src="assets/img/icon-xrp-send-xrp.svg" alt="{% trans %}'send xrp' icon{% endtrans %}">
+          <h3 class="card-title">{{cardpage.name}}</h3>
+        </a>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <p>{{cardpage.blurb}}</p>
+      </div><!--/.card-body-->
+      <div class="card-footer">
+        <div class="readmore">
+          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
+        </div>
+      </div><!--/.card-footer-->
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </div><!--/.card-->
+
+    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'manage-the-rippled-server.html')|first %}
+    <div class="card">
+      <div class="card-header">
+        <a href="{{cardpage.html}}" class="header-link">
+          <img class="image-icon" src="assets/img/icon-xrp-run-rippled.svg" alt="{% trans %}'run rippled' icon{% endtrans %}">
+          <h3 class="card-title">{{cardpage.name}}</h3>
+        </a>
+        </div><!--/.card-header-->
+      <div class="card-body">
+        <p>{{cardpage.blurb}}</p>
+      </div><!--/.card-body-->
+      <div class="card-footer">
+        <div class="readmore">
+          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
+        </div>
+      </div><!--/.card-footer-->
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </div><!--/.card-->
+
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title"><a href="tutorials.html">{% trans %}More Tutorials{% endtrans %}</a></h3>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <div class="curated-links">
+          <ul>
+            <li><a href="assign-a-regular-key-pair.html">{{(pages|selectattr('html', 'defined_and_equalto', 'manage-the-rippled-server.html')|first).name}}</a></li>
+            <li><a href="set-up-multi-signing.html">{{(pages|selectattr('html', 'defined_and_equalto', 'set-up-multi-signing.html')|first).name}}</a></li>
+            <li><a href="use-escrows.html">{{(pages|selectattr('html', 'defined_and_equalto', 'use-escrows.html')|first).name}}</a></li>
+            <li><a href="use-payment-channels.html">{{(pages|selectattr('html', 'defined_and_equalto', 'use-payment-channels.html')|first).name}}</a></li>
+          </ul>
+        </div><!--/.curated-links-->
+      </div><!--/.card-body-->
+      <div class="card-footer">
+        <a href="tutorials.html" class="btn btn-outline-secondary">{% trans %}All Tutorials{% endtrans %}</a>
+      </div><!--/.card-footer-->
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </div><!--/.card-->
+
+  </section>
+
+  <section class="container-fluid related-projects card-grid card-grid-2x1">
+    <div class="section-hero card pl-0">
+      <h2>{% trans %}Related Projects{% endtrans %}</h2>
+      <div class="blurb">
+        <p>{% trans %}You're not alone in building the Internet of Value. These projects are proudly collaborating with the XRP Ledger to make all the world's money move like information moves today.{% endtrans %}</p>
+      </div>
+    </div><!--/.section-hero-->
+
+    {% set flag_n = cycler(* range(1,99)) %}
+
+    <div class="card interledger-link">
+      <div class="card-header">
+          <img class="project-icon" src="assets/img/ilp_logo.svg" alt="{% trans %}Interledger logo{% endtrans %}" />
+          <h3 class="card-title">{% trans %}Interledger{% endtrans %}</h3>
+      </div><!--/.card-header-->
+      <div class="card-body">
+        <p class="project-summary">{% trans %}Interledger is an open protocol suite for sending payments across different ledgers.{% endtrans %}</p>
+      </div><!--/.card-body-->
+      <div class="card-footer">
+        <a class="btn btn-outline-secondary external-link" href="https://interledger.org/" target="_blank">{% trans %}Learn More{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
+      </div><!--/.card-footer-->
+      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+    </div><!--/.card-->
+
+    <div class="card xpring-link">
+        <div class="card-header">
+            <img class="project-icon" src="assets/img/xpring-logo.svg" alt="{% trans %}Xpring logo{% endtrans %}" />
+            <h3 class="card-title">{% trans %}Xpring{% endtrans %}</h3>
+        </div><!--/.card-header-->
+        <div class="card-body">
+          <p class="project-summary">{% trans %}Xpring is Ripple’s initiative to create an open developer platform for money.{% endtrans %}</p>
+        </div><!--/.card-body-->
+        <div class="card-footer">
+          <a class="btn btn-outline-secondary external-link" href="https://xpring.io/" target="_blank">{% trans %}Learn More{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
+        </div><!--/.card-footer-->
+        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
+      </div><!--/.card-->
+
+  </section><!-- / Related Projects -->
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}

tool/template-home.html

@@ -16,297 +16,114 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <section class="container-fluid card-grid card-grid-2x2">
-      <div class="section-hero card justify-content-end">
-        <div>
-          <h1 class="display-4">{% trans %}Powering the Internet of Value.{% endtrans %}</h1>
-          <div class="blurb">
-            <p>{% trans %}The <a href="#xrp_ledger_intro">XRP Ledger</a> is open-source technology that anyone can use.{% endtrans %}</p>
-            <p>{% trans %}Use the tools and information provided here to integrate with and contribute to the open-source platform.{% endtrans %}</p>
-            <h5>{% trans %}Want more?{% endtrans %}</h5>
-            <p>{% trans %}Get updates about XRP Ledger webinars, releases, and documentation!{% endtrans %}</p>
-          </div><!--/.blurb-->
-          <a class="btn btn-outline-secondary external-link" href="https://goo.gl/forms/sHMFxU8dKiTUaltE3" target="_blank">{% trans %}Sign up!{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
+  <div class="container my-40 marketing-wrapper">
+
+    <section class="row">
+      <h6 class="section-marker" id="home-hero-marker">{% trans %}Scroll Down{% endtrans %}</h6>
+      <img class="mw-100" src="./img/graphics/home-hero-graphic.svg">
+      <div class="col-sm-6 mx-auto text-center my-5">
+        <h1 class="mb-18">{% trans %}The Best Digital Asset for Payments{% endtrans %}</h1>
+        <a href="#" class="btn btn-clear inline-block mr-4">{% trans %}Learn More{% endtrans %}</a>
+        <a href="#" class="btn btn-clear inline-block">{% trans %}Build with XRP{% endtrans %}</a>
+      </div>
+    </section>
+
+    <section class="row py-50" id="bg-home-1">
+      <h6 class="section-marker">{% trans %}XRP Ledger{% endtrans %}</h6>
+
+      <div class="row mb-20 ml-0 mr-0">
+        <div class="col-lg-4 offset-lg-2">
+          <p class="text-green bold">{% trans %}What is XRPL.org?{% endtrans %}</p>
+          <h2 class="mb-10">{% trans %}A Community-Driven Resource for All Things XRP and XRP Ledger.{% endtrans %}</h2>
+          <p>{% trans %}Whether you’re a developer building on XRPL or just getting acquainted with blockchain and digital assets, XRPL.org is your source for technical information, reference materials, tools and all things XRP.{% endtrans %}</p>
         </div>
-      </div><!--/.section-hero-->
+      </div>
 
-      {% set flag_n = cycler(* range(1,99)) %}
-      <div class="card">
-        {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'get-started-with-the-rippled-api.html')|first %}
-        <div class="card-header">
-          <h3 class="card-title"><a href="{{cardpage.html}}">{{cardpage.name}}</a></h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <p>{{cardpage.blurb}}</p>
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <a href="get-started-with-the-rippled-api.html" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
-        </div><!--/.card-footer-->
-        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-      </div><!--/.card-->
-
-      <div class="card pr-0">
-        <div class="card-header">
-          <h3 class="card-title"><a href="concepts.html">{% trans %}Learn How It Works{% endtrans %}</a></h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <div class="curated-links">
-            <ul>
-              <li><a href="intro-to-consensus.html">{{(pages|selectattr('html', 'defined_and_equalto', 'intro-to-consensus.html')|first).name}}</a></li>
-              <li><a href="xrp.html">{% trans %}About XRP{% endtrans %}</a></li>
-              <li><a href="payment-system-basics.html">{{(pages|selectattr('html', 'defined_and_equalto', 'payment-system-basics.html')|first).name}}</a></li>
-              <li><a href="decentralized-exchange.html">{{(pages|selectattr('html', 'defined_and_equalto', 'decentralized-exchange.html')|first).name}}</a></li>
-            </ul>
-          </div><!--/.curated-links-->
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <a href="concepts.html" class="btn btn-outline-secondary">{% trans %}All Concepts{% endtrans %}</a>
-        </div><!--/.card-footer-->
-        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-      </div><!--/.card-->
-
-      <div class="card">
-        <div class="card-header">
-          <h3 class="card-title"><a href="docs.html">{% trans %}Read Documentation{% endtrans %}</a></h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <div class="curated-links">
-            <ul>
-              <li><a href="references.html">{{(pages|selectattr('html', 'defined_and_equalto', 'references.html')|first).longer_name}}</a></li>
-              <li><a href="concepts.html">{{(pages|selectattr('html', 'defined_and_equalto', 'concepts.html')|first).name}}</a></li>
-              <li><a href="tutorials.html">{{(pages|selectattr('html', 'defined_and_equalto', 'tutorials.html')|first).name}}</a></li>
-              <li><a href="docs.html#full-doc-index">{% trans %}Full Doc Index{% endtrans %}</a></li>
-            </ul>
-          </div><!--/.curated-links-->
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <a href="docs.html" class="btn btn-outline-secondary">{% trans %}All Docs{% endtrans %}</a>
-        </div><!--/.card-footer-->
-        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-      </div><!--/.card-->
-
-      <div class="card pr-0">
-        <div class="card-header">
-          <h3 class="card-title">{% trans %}Explore the XRP Ledger{% endtrans %}</h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <p>{% trans %}Use the XRPL Explorer to view a stream of ledger activity and see validator statuses.{% endtrans %}</p>
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <div class="readmore">
-            <a href="https://livenet.xrpl.org/" class="btn btn-outline-secondary">{% trans %}Go to the Explorer{% endtrans %}</a>
+      <div class="row ml-0 mr-0">
+        <div class="col-lg-4 offset-lg-2">
+          <div class="mt-16 mb-16">
+            <div class="row mb-16">
+              <div class="col text-center">
+                <img class="mw-100 mt-1" src="./img/icons/fast.png">
+                <h6 class="mt-8">{% trans %}Fast{% endtrans %}</h6>
+              </div>
+              <div class="col text-center">
+                <img class="mw-100 mt-3" src="./img/icons/scalable.png">
+                <h6 class="mt-8">{% trans %}Scalable{% endtrans %}</h6>
+              </div>
+              <div class="col text-center"></div>
+            </div>
+            <div class="row">
+              <div class="col text-center"></div>
+              <div class="col text-center">
+                <img class="mw-100 mt-3" src="./img/icons/low-cost.png">
+                <h6 class="mt-8">{% trans %}Low Cost{% endtrans %}</h6>
+              </div>
+              <div class="col text-center" style="width: 33%;">
+                <img class="mw-100" src="./img/icons/sustainable.png">
+                <h6 class="mt-8">{% trans %}Sustainable{% endtrans %}</h6>
+              </div>
+            </div>
           </div>
-        </div><!--/.card-footer-->
-        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-      </div><!--/.card-->
+        </div>
+        <div class="col-lg-4 offset-lg-1">
+          <p class="text-green bold">{% trans %}What is XRP?{% endtrans %}</p>
+          <h2 class="mb-10">{% trans %}A Digital Asset Built for Payments{% endtrans %}</h2>
+          <p class="mb-4">{% trans %}XRP is the native digital asset on the XRP Ledger—an open-source, permissionless and decentralized blockchain technology that can settle transactions in 3-5 seconds.{% endtrans %}</p>
+          <p class="mb-4">{% trans %}Using XRP is the best way to move money around the world; the fuel for our growing digital economy.{% endtrans %}</p>
           
-  </section><!--/"Above the fold" .card-grid-2x2-->
-
-  <section class="container-fluid card-grid">
-    <div class="card pl-0">
-      <div class="card-header">
-        <h2><a href="/blog/">XRP Ledger Blog</a></h2>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <div class="blurb">
-          <p>Visit the blog for the latest XRP Ledger info, including <a href="/blog/label/rippled-release-notes.html">Release Notes</a>, <a href="/blog/label/amendments.html">Amendments</a> to the XRP Ledger protocol, <a href="/blog/label/features.html">Feature articles</a> from XRP experts, and more.</p>
+          <a href="#" class="btn btn-clear mr-4">{% trans %}Learn about XRP{% endtrans %}</a>
+          <a href="#" class="arrow-link mt-4 text-green d-block"><span class="text-white">{% trans %}XRP History{% endtrans %}</span></a>
         </div>
       </div>
-      <div class="card-footer">
-        <a href="/blog/" class="btn btn-outline-secondary">View Blog</a>
+    </section>
+
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Use Cases{% endtrans %}</h6>
+      <h2 class="h1 ml-3">{% trans %}XRP in the Real World{% endtrans %}</h2>
+      <div class="w-100 mt-20"></div>
+      <div class="col-sm-6 col-lg-4 mb-10">
+        <div class="card rounded hc" id="hc-1">
+          <h5 class="mb-12 h2">{% trans %}Uses of XRP{% endtrans %}</h5>
+          <p>{% trans %}XRP is helping solve previously unsolvable problems for people and industries around the world, and is the only digital asset with a commercial use case.{% endtrans %}</p>
+          <a href="" class="arrow-link mt-12 text-white">{% trans %}Explore Uses{% endtrans %}</a>
       </div>
-    </div>
-  </section>
-
-  {% set flag_n = cycler(* range(1,99)) %}
-  <section class="container-fluid card-grid card-grid-2x4" id="xrp_ledger_intro">
-    <div class="card section-hero pl-0">
-      <div class="card-header">
-        <h2><a href="xrp-ledger-overview.html">{% trans %}What is the XRP Ledger?{% endtrans %}</a></h2>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <p>{% trans %}The XRP Ledger is a decentralized cryptographic ledger, powered by a network of peer-to-peer servers. It is the home of XRP, a digital asset designed to bridge the many different currencies in use worldwide.{% endtrans %}</p>
       </div>
-    </div><!--/.section-hero-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#the-digital-asset-for-payments{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-digital-asset.svg" alt="{% trans %}(digital asset icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}The Digital Asset for Payments{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#censorship-resistant-transaction-processing{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-censorship-resistant.svg" alt="{% trans %}(censorship resistance icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Censorship-Resistant Transaction Processing{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#fast-efficient-consensus-algorithm{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-fast-algorithm.svg" alt="{% trans %}(consensus algorithm icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Fast, Efficient Consensus Algorithm{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#finite-xrp-supply{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-finite.svg" alt="{% trans %}(xrp supply icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Finite XRP Supply{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#responsible-software-governance{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-responsible.svg" alt="{% trans %}(governance icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Responsible Software Governance{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#secure-adaptable-cryptography{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-secure.svg" alt="{% trans %}(cryptography icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Secure, Adaptable Cryptography{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#modern-features-for-smart-contracts{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-modern-smart-contracts.svg" alt="{% trans %}(smart contracts icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}Modern Features for Smart Contracts{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-    <a href="{% trans %}xrp-ledger-overview.html#on-ledger-decentralized-exchange{% endtrans %}" class="card">
-      <div class="card-header"><img class="card-img-top" src="assets/img/icon-xrp-on-ledger-decentralized.svg" alt="{% trans %}(decentralized exchange icon){% endtrans %}" /></div>
-      <div class="card-footer"><h3>{% trans %}On-Ledger Decentralized Exchange{% endtrans %}</h3></div>
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </a><!--/.card-->
-
-  </section><!--/#xrp_ledger_intro-->
-
-
-  <section class="container-fluid card-grid card-grid-2x2">
-    <div class="section-hero card pl-0">
-      <h2>{% trans %}Start Building{% endtrans %}</h2>
-      <div class="blurb">
-        <p>{% trans %}Use these tutorials to get step-by-step guidance to perform common tasks with the XRP Ledger.{% endtrans %}</p>
-      </div>
-    </div><!--/.section-hero-->
-
-    {% set flag_n = cycler(* range(1,99)) %}
-    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'list-xrp-in-your-exchange.html')|first %}
-    <div class="card">
-      <div class="card-header">
-          <a href="{{cardpage.html}}" class="header-link">
-            <img class="image-icon" src="assets/img/icon-xrp-list-xrp.svg" alt="{% trans %}'list xrp' icon{% endtrans %}">
-            <h3 class="card-title">{{cardpage.name}}</h3>
-        </a>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <p>{{cardpage.blurb}}</p>
-      </div><!--/.card-body-->
-      <div class="card-footer">
-        <div class="readmore">
-          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
+      <div class="col-sm-6 col-lg-4 mb-10">
+        <div class="card rounded hc" id="hc-2">
+          <h5 class="mb-12 h2">{% trans %}Businesses on the Ledger{% endtrans %}</h5>
+          <p>{% trans %}From gaming to web monetization, XRP and the XRP Ledger are powering innovative new technology across the payments space.{% endtrans %}</p>
+          <a href="" class="arrow-link mt-12 text-white">{% trans %}Explore Businesses{% endtrans %}</a>
         </div>
-      </div><!--/.card-footer-->
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </div><!--/.card-->
-
-    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'send-xrp.html')|first %}
-    <div class="card">
-      <div class="card-header">
-        <a href="{{cardpage.html}}" class="header-link">
-          <img class="image-icon" src="assets/img/icon-xrp-send-xrp.svg" alt="{% trans %}'send xrp' icon{% endtrans %}">
-          <h3 class="card-title">{{cardpage.name}}</h3>
-        </a>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <p>{{cardpage.blurb}}</p>
-      </div><!--/.card-body-->
-      <div class="card-footer">
-        <div class="readmore">
-          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
-        </div>
-      </div><!--/.card-footer-->
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </div><!--/.card-->
-
-    {% set cardpage = pages|selectattr('html', 'defined_and_equalto', 'manage-the-rippled-server.html')|first %}
-    <div class="card">
-      <div class="card-header">
-        <a href="{{cardpage.html}}" class="header-link">
-          <img class="image-icon" src="assets/img/icon-xrp-run-rippled.svg" alt="{% trans %}'run rippled' icon{% endtrans %}">
-          <h3 class="card-title">{{cardpage.name}}</h3>
-        </a>
-        </div><!--/.card-header-->
-      <div class="card-body">
-        <p>{{cardpage.blurb}}</p>
-      </div><!--/.card-body-->
-      <div class="card-footer">
-        <div class="readmore">
-          <a href="{{cardpage.html}}" class="btn btn-outline-secondary">{{cardpage.cta_text}}</a>
-        </div>
-      </div><!--/.card-footer-->
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </div><!--/.card-->
-
-    <div class="card">
-      <div class="card-header">
-        <h3 class="card-title"><a href="tutorials.html">{% trans %}More Tutorials{% endtrans %}</a></h3>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <div class="curated-links">
-          <ul>
-            <li><a href="assign-a-regular-key-pair.html">{{(pages|selectattr('html', 'defined_and_equalto', 'manage-the-rippled-server.html')|first).name}}</a></li>
-            <li><a href="set-up-multi-signing.html">{{(pages|selectattr('html', 'defined_and_equalto', 'set-up-multi-signing.html')|first).name}}</a></li>
-            <li><a href="use-escrows.html">{{(pages|selectattr('html', 'defined_and_equalto', 'use-escrows.html')|first).name}}</a></li>
-            <li><a href="use-payment-channels.html">{{(pages|selectattr('html', 'defined_and_equalto', 'use-payment-channels.html')|first).name}}</a></li>
-          </ul>
-        </div><!--/.curated-links-->
-      </div><!--/.card-body-->
-      <div class="card-footer">
-        <a href="tutorials.html" class="btn btn-outline-secondary">{% trans %}All Tutorials{% endtrans %}</a>
-      </div><!--/.card-footer-->
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </div><!--/.card-->
-
-  </section>
-
-  <section class="container-fluid related-projects card-grid card-grid-2x1">
-    <div class="section-hero card pl-0">
-      <h2>{% trans %}Related Projects{% endtrans %}</h2>
-      <div class="blurb">
-        <p>{% trans %}You're not alone in building the Internet of Value. These projects are proudly collaborating with the XRP Ledger to make all the world's money move like information moves today.{% endtrans %}</p>
       </div>
-    </div><!--/.section-hero-->
+      <div class="col-sm-6 col-lg-4 mb-10">
+        <div class="card rounded hc" id="hc-3">
+          <h5 class="mb-12 h2">{% trans %}Real-World Impact{% endtrans %}</h5>
+          <p>{% trans %}With its real-world utility and inherently green design, XRP will help ensure a more sustainable future for our planet and global economy.{% endtrans %}</p>
+          <a href="" class="arrow-link mt-12 text-white">{% trans %}Explore Impact{% endtrans %}</a>
+        </div>
+      </div>
+    </section>
 
-    {% set flag_n = cycler(* range(1,99)) %}
-
-    <div class="card interledger-link">
-      <div class="card-header">
-          <img class="project-icon" src="assets/img/ilp_logo.svg" alt="{% trans %}Interledger logo{% endtrans %}" />
-          <h3 class="card-title">{% trans %}Interledger{% endtrans %}</h3>
-      </div><!--/.card-header-->
-      <div class="card-body">
-        <p class="project-summary">{% trans %}Interledger is an open protocol suite for sending payments across different ledgers.{% endtrans %}</p>
-      </div><!--/.card-body-->
-      <div class="card-footer">
-        <a class="btn btn-outline-secondary external-link" href="https://interledger.org/" target="_blank">{% trans %}Learn More{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
-      </div><!--/.card-footer-->
-      <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-    </div><!--/.card-->
-
-    <div class="card xpring-link">
-        <div class="card-header">
-            <img class="project-icon" src="assets/img/xpring-logo.svg" alt="{% trans %}Xpring logo{% endtrans %}" />
-            <h3 class="card-title">{% trans %}Xpring{% endtrans %}</h3>
-        </div><!--/.card-header-->
-        <div class="card-body">
-          <p class="project-summary">{% trans %}Xpring is Ripple’s initiative to create an open developer platform for money.{% endtrans %}</p>
-        </div><!--/.card-body-->
-        <div class="card-footer">
-          <a class="btn btn-outline-secondary external-link" href="https://xpring.io/" target="_blank">{% trans %}Learn More{% endtrans %} <i class="fa fa-external-link" aria-hidden="true"></i></a>
-        </div><!--/.card-footer-->
-        <div class="flag-vertical">{{"%02d"|format(flag_n.next())}}</div>
-      </div><!--/.card-->
-
-  </section><!-- / Related Projects -->
+    <section class="row mb-50">
+      <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
+      <div class="col-sm-4 offset-sm-1">
+        <img class="mw-100" src="./img/green/green-graphic.png">
+      </div>
+      <div class="col-sm-5 offset-sm-1">
+        <h3 class="h1 mb-9">{% trans %}Green by Nature{% endtrans %}</h3>
+        <p>{% trans %}XRP was designed with sustainability in mind. Contrary to other blockchains that use proof-of-work, the XRP Ledger confirms transactions through a unique “consensus” mechanism that consumes negligible energy.{% endtrans %}</p>
+        <p class="mb-10">{% trans %}Explore the energy consumption of XRP compared to cash, credit cards and other popular crypto with the Green Currency Calculator.{% endtrans %}</p>
+        <a href="#" class="btn btn-clear">{% trans %}Go Green{% endtrans %}</a>
+        <h4 class="mt-20 mb-10">{% trans %}Partners in Sustainability{% endtrans %}</h4>
+        <div class="d-flex align-items-center flex-wrap justify-content-between">
+          <img class="mw-100" src="./img/green/energy-web.png">
+          <img class="mw-100" src="./img/green/rocky-mountain-inst.png">
+          <img class="mw-100" src="./img/green/reba.png">
+        </div>
+      </div>
+    </section>
+  </div>
 {% endblock %}
 
 

tool/template-learn-history.html

@@ -0,0 +1,99 @@
+{% 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]-->
+
+{% 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-md-4 d-flex flex-column-reverse justify-content-end">
+        <h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
+        <h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-4 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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 %}

tool/template-learn-overview.html

@@ -0,0 +1,99 @@
+{% 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]-->
+
+{% 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-md-4 d-flex flex-column-reverse justify-content-end">
+        <h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
+        <h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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-md-4 offset-md-1 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-4 offset-md-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-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+      </div>
+      <div class="col-md-6 offset-md-1 order-2 order-md-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 %}

tool/template-learn-uses.html

@@ -31,7 +31,7 @@
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
       <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+        <img class="mw-100" src="./img/uses/xb-payment.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Cross-Border Payments{% endtrans %}</h2>
@@ -43,7 +43,7 @@
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
       <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+        <img class="mw-100" src="./img/uses/micropayments.png">
       </div>
       <div class="col-md-6 offset-md-1">
         <h2 class="mb-10">{% trans %}Micropayments{% endtrans %}</h2>
@@ -55,7 +55,7 @@
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
       <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+        <img class="mw-100" src="./img/uses/digital-wallets.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Digital Cryptocurrency Wallets{% endtrans %}</h2>
@@ -67,7 +67,7 @@
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
       <div class="col-md-4 offset-md-1 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+        <img class="mw-100" src="./img/uses/exchanges.png">
       </div>
       <div class="col-md-4 offset-md-1">
         <h2 class="mb-10">{% trans %}Exchanges{% endtrans %}</h2>
@@ -79,7 +79,7 @@
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
       <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
-        <img class="mw-100" src="./img/marketing/impact-democratizing-payments@2x.png">
+        <img class="mw-100" src="./img/uses/inst-trading.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">
         <h2 class="mb-10">{% trans %}Institutional Trading{% endtrans %}</h2>