Implement dev home

15 files changed, 473 insertions, 15 deletions

diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 5a20eeaa1..778a5bc20 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -26,8 +26,9 @@ const baseColors = {
     darkestGrey: '#272727',
     lightBlue: '#60A4F4',
     lightBlueA700: '#0091EA',
-    linkBlue: '#1D5CDE',
+    lightLinkBlue: '#3289F1',
     mediumBlue: '#488AEA',
+    linkBlue: '#1D5CDE',
     darkBlue: '#4D5481',
     lightTurquois: '#aefcdc',
     turquois: '#058789',
diff --git a/packages/website/public/images/developers/tutorials/0x_order_basics.svg b/packages/website/public/images/developers/tutorials/0x_order_basics.svg
new file mode 100644
index 000000000..57b04dfa5
--- /dev/null
+++ b/packages/website/public/images/developers/tutorials/0x_order_basics.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72"><defs><style>.cls-1{fill:#3289f1;}.cls-2{fill:#fff;}</style></defs><title>Artboard 1</title><path class="cls-1" d="M62.64,26.77a0,0,0,0,0,0,0A2.44,2.44,0,0,0,62,25.28L48.2,11.43a2.38,2.38,0,0,0-1.53-.71H35.45a16.12,16.12,0,0,1,.44,3.5H45v9.26a5,5,0,0,0,5,5h9.15V65.41A2.16,2.16,0,0,1,57,67.57H21.8a2.16,2.16,0,0,1-2.15-2.16V31.46H19a16.81,16.81,0,0,1-2.86-.24V65.41a5.67,5.67,0,0,0,5.65,5.66H57a5.67,5.67,0,0,0,5.66-5.66V27A1.48,1.48,0,0,0,62.64,26.77ZM50,25a1.49,1.49,0,0,1-1.49-1.49V16.71L56.69,25Z"/><path class="cls-1" d="M48,11.23a1.75,1.75,0,0,0-1.34-.51,2.38,2.38,0,0,1,1.53.71ZM62.14,25.47,62,25.28a2.44,2.44,0,0,1,.69,1.46A1.71,1.71,0,0,0,62.14,25.47Z"/><path class="cls-2" d="M17.26,12.83V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Z"/><path class="cls-2" d="M17.26,12.83V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Zm0,0V13a1.33,1.33,0,0,1,.14-.19Z"/><path class="cls-1" d="M32.65,14.21a13.47,13.47,0,0,0-.55-3.5,13.66,13.66,0,1,0-16,17.23,13.47,13.47,0,0,0,2.86.3c.22,0,.43,0,.64,0a13.67,13.67,0,0,0,13-13.64C32.66,14.46,32.66,14.33,32.65,14.21Zm-13,10.51-.64,0a9.94,9.94,0,0,1-2.86-.41A10.15,10.15,0,1,1,28.39,10.71a9.92,9.92,0,0,1,.76,3.5c0,.12,0,.25,0,.37A10.17,10.17,0,0,1,19.65,24.72Z"/><path class="cls-1" d="M25,12.83v3.5H20.76v4.22h-3.5V16.33H13v-3.5h4.22V13a1.33,1.33,0,0,1,.14-.19h-.14V8.61h3.5v4.22Z"/><path class="cls-1" d="M17.4,12.83a1.33,1.33,0,0,0-.14.19v-.19Z"/><path class="cls-1" d="M17.4,12.83a1.33,1.33,0,0,0-.14.19v-.19Z"/><rect class="cls-1" x="27.4" y="35.38" width="22" height="3.5"/><rect class="cls-1" x="27.4" y="55.38" width="22" height="3.5"/><rect class="cls-1" x="27.4" y="45.38" width="16" height="3.5"/></svg>
\ No newline at end of file
diff --git a/packages/website/public/images/developers/tutorials/build_a_relayer.svg b/packages/website/public/images/developers/tutorials/build_a_relayer.svg
new file mode 100644
index 000000000..afda40d88
--- /dev/null
+++ b/packages/website/public/images/developers/tutorials/build_a_relayer.svg
@@ -0,0 +1,3 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70.0766 46.9825C70.3778 45.294 70.4782 43.6054 70.4782 41.8174C70.4782 30.8913 64.9564 20.8591 55.72 14.8993C54.8164 14.3034 53.712 14.6013 53.1096 15.4953C52.5073 16.3892 52.8085 17.4819 53.6116 18.0778C61.8441 23.3423 66.6631 32.2819 66.6631 41.9168C66.6631 43.208 66.5627 44.4993 66.362 45.7906C65.7596 45.6913 65.0568 45.592 64.4544 45.592C58.1295 45.592 52.9089 50.6577 52.9089 57.0148C52.9089 63.3718 58.0291 68.4376 64.4544 68.4376C70.8798 68.4376 76 63.3718 76 57.0148C76 52.6443 73.5905 48.9691 70.0766 46.9825ZM64.4544 64.6631C60.1374 64.6631 56.7239 61.1866 56.7239 57.0148C56.7239 52.7436 60.2378 49.3664 64.4544 49.3664C68.7715 49.3664 72.1849 52.843 72.1849 57.0148C72.2853 61.1866 68.7715 64.6631 64.4544 64.6631ZM50.3989 67.5436C46.4835 69.4309 42.2668 70.3248 37.9498 70.3248C31.5244 70.3248 25.2999 68.2389 20.2801 64.2658C21.9868 62.2792 23.0912 59.6966 23.0912 56.8161C23.0912 50.5584 17.9709 45.3933 11.5456 45.3933C5.22061 45.3933 6.1277e-06 50.4591 6.1277e-06 56.8161C6.1277e-06 63.1731 5.12022 68.2389 11.5456 68.2389C13.6539 68.2389 15.5614 67.6429 17.2682 66.6497C23.0912 71.4174 30.3197 74 37.8494 74C42.7688 74 47.4875 72.9074 51.9049 70.8215C52.8085 70.4242 53.21 69.2322 52.8085 68.3383C52.5073 67.5436 51.3025 67.1463 50.3989 67.5436ZM3.81505 56.9154C3.81505 52.6443 7.32894 49.2671 11.5456 49.2671C15.7622 49.2671 19.2761 52.7436 19.2761 56.9154C19.2761 61.1866 15.7622 64.5638 11.5456 64.5638C7.32894 64.5638 3.81505 61.1866 3.81505 56.9154ZM7.42933 42.5128C7.42933 42.5128 7.52972 42.5128 7.42933 42.5128C8.53369 42.5128 9.33685 41.7181 9.33685 40.7248C9.63804 31.0899 14.8586 22.349 23.1915 17.3826C24.3963 16.6873 25.6011 16.0913 26.8058 15.5946C28.5126 19.7664 32.6288 22.8456 37.5482 22.8456C43.8732 22.8456 49.0938 17.7799 49.0938 11.4228C49.0938 5.06578 43.9736 1.21251e-05 37.5482 1.21251e-05C31.2233 1.21251e-05 26.0026 5.06578 26.0026 11.4228C26.0026 11.6215 26.0026 11.7208 26.0026 11.9195C24.3963 12.6148 22.79 13.3101 21.1836 14.3034C11.7464 19.9651 5.92339 29.7987 5.5218 40.7248C5.6222 41.6188 6.42536 42.5128 7.42933 42.5128ZM37.5482 3.67516C41.8653 3.67516 45.2787 7.15168 45.2787 11.3235C45.2787 15.5946 41.7649 18.9718 37.5482 18.9718C33.2312 18.9718 29.8177 15.4953 29.8177 11.3235C29.8177 7.15168 33.3316 3.67516 37.5482 3.67516Z" fill="#3289F1"/>
+</svg>
diff --git a/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg
new file mode 100644
index 000000000..960616bfe
--- /dev/null
+++ b/packages/website/public/images/developers/tutorials/build_a_trading_bot.svg
@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72 36.63C72 35.1978 71.4436 33.8243 70.4532 32.8116C69.4628 31.7989 68.1195 31.23 66.7188 31.23H65.6626V23.76C65.6626 21.8504 64.9207 20.0191 63.6002 18.6688C62.2796 17.3186 60.4886 16.56 58.621 16.56H37.7604V1.8C37.7604 1.32261 37.5749 0.864774 37.2448 0.527208C36.9146 0.189643 36.4669 0 36 0C35.5331 0 35.0854 0.189643 34.7552 0.527208C34.4251 0.864774 34.2396 1.32261 34.2396 1.8V16.56H13.379C11.5114 16.56 9.72038 17.3186 8.39983 18.6688C7.07929 20.0191 6.33741 21.8504 6.33741 23.76V31.23H5.28117C3.88052 31.23 2.53723 31.7989 1.54682 32.8116C0.556407 33.8243 3.35768e-07 35.1978 3.35768e-07 36.63V47.25C3.35768e-07 48.6822 0.556407 50.0557 1.54682 51.0684C2.53723 52.0811 3.88052 52.65 5.28117 52.65H6.33741V64.8C6.33741 66.7096 7.07929 68.5409 8.39983 69.8912C9.72038 71.2414 11.5114 72 13.379 72H58.621C60.4886 72 62.2796 71.2414 63.6002 69.8912C64.9207 68.5409 65.6626 66.7096 65.6626 64.8V52.65H66.7188C68.1195 52.65 69.4628 52.0811 70.4532 51.0684C71.4436 50.0557 72 48.6822 72 47.25V36.63ZM68.4792 47.25C68.4792 47.7274 68.2937 48.1852 67.9636 48.5228C67.6335 48.8604 67.1857 49.05 66.7188 49.05H63.9022C63.4353 49.05 62.9876 49.2396 62.6574 49.5772C62.3273 49.9148 62.1418 50.3726 62.1418 50.85V64.8C62.1418 65.7548 61.7709 66.6705 61.1106 67.3456C60.4503 68.0207 59.5548 68.4 58.621 68.4H13.379C12.4452 68.4 11.5497 68.0207 10.8894 67.3456C10.2291 66.6705 9.85819 65.7548 9.85819 64.8V50.85C9.85819 50.3726 9.67272 49.9148 9.34258 49.5772C9.01245 49.2396 8.56468 49.05 8.0978 49.05H5.28117C4.81429 49.05 4.36653 48.8604 4.03639 48.5228C3.70625 48.1852 3.52078 47.7274 3.52078 47.25V36.63C3.52078 36.1526 3.70625 35.6948 4.03639 35.3572C4.36653 35.0196 4.81429 34.83 5.28117 34.83H8.0978C8.56468 34.83 9.01245 34.6404 9.34258 34.3028C9.67272 33.9652 9.85819 33.5074 9.85819 33.03V23.76C9.85819 22.8052 10.2291 21.8895 10.8894 21.2144C11.5497 20.5393 12.4452 20.16 13.379 20.16H58.621C59.5548 20.16 60.4503 20.5393 61.1106 21.2144C61.7709 21.8895 62.1418 22.8052 62.1418 23.76V33.03C62.1418 33.5074 62.3273 33.9652 62.6574 34.3028C62.9876 34.6404 63.4353 34.83 63.9022 34.83H66.7188C67.1857 34.83 67.6335 35.0196 67.9636 35.3572C68.2937 35.6948 68.4792 36.1526 68.4792 36.63V47.25Z" fill="#3289F1"/>
+<path d="M32.2998 38.5204C32.2998 36.9718 31.8507 35.458 31.0092 34.1703C30.1678 32.8827 28.9718 31.8791 27.5726 31.2865C26.1733 30.6938 24.6336 30.5388 23.1481 30.8409C21.6627 31.143 20.2982 31.8887 19.2273 32.9838C18.1563 34.0788 17.427 35.474 17.1315 36.9929C16.836 38.5117 16.9877 40.0861 17.5673 41.5168C18.1469 42.9476 19.1284 44.1705 20.3877 45.0308C21.647 45.8912 23.1275 46.3504 24.6421 46.3504C26.673 46.3504 28.6208 45.5255 30.0569 44.0571C31.493 42.5887 32.2998 40.5971 32.2998 38.5204ZM24.6421 42.7504C24.0988 42.7504 23.5609 42.641 23.0589 42.4284C22.557 42.2159 22.101 41.9043 21.7168 41.5115C21.3327 41.1187 21.028 40.6524 20.8201 40.1392C20.6122 39.626 20.5052 39.0759 20.5052 38.5204C20.5052 37.3986 20.941 36.3226 21.7168 35.5294C22.4927 34.7361 23.5449 34.2904 24.6421 34.2904C25.7393 34.2904 26.7915 34.7361 27.5673 35.5294C28.3431 36.3226 28.779 37.3986 28.779 38.5204C28.779 39.6423 28.3431 40.7182 27.5673 41.5115C26.7915 42.3048 25.7393 42.7504 24.6421 42.7504Z" fill="#3289F1"/>
+<path d="M47.3533 30.6001C45.8177 30.5823 44.3116 31.0316 43.0263 31.8909C41.741 32.7503 40.7345 33.9809 40.1347 35.4264C39.5349 36.8719 39.3689 38.4671 39.6578 40.0093C39.9466 41.5515 40.6773 42.9711 41.757 44.0878C42.8367 45.2045 44.2166 45.9678 45.7215 46.2807C47.2264 46.5937 48.7882 46.4422 50.2087 45.8455C51.6292 45.2487 52.8442 44.2338 53.6992 42.9294C54.5543 41.6251 55.0109 40.0904 55.011 38.5201C55.0226 37.4843 54.8331 36.4565 54.4535 35.4961C54.0739 34.5357 53.5117 33.6618 52.7994 32.9252C52.0872 32.1886 51.2391 31.6037 50.3042 31.2046C49.3694 30.8055 48.3664 30.6001 47.3533 30.6001ZM47.3533 42.7501C46.2561 42.7501 45.2039 42.3045 44.428 41.5112C43.6522 40.7179 43.2164 39.642 43.2164 38.5201C43.2164 37.9646 43.3234 37.4146 43.5313 36.9014C43.7392 36.3882 44.0439 35.9218 44.428 35.5291C44.8122 35.1363 45.2682 34.8247 45.7701 34.6121C46.2721 34.3995 46.81 34.2901 47.3533 34.2901C47.8965 34.2901 48.4345 34.3995 48.9364 34.6121C49.4383 34.8247 49.8944 35.1363 50.2785 35.5291C50.6627 35.9218 50.9674 36.3882 51.1753 36.9014C51.3832 37.4146 51.4902 37.9646 51.4902 38.5201C51.4902 39.642 51.0543 40.7179 50.2785 41.5112C49.5027 42.3045 48.4505 42.7501 47.3533 42.7501Z" fill="#3289F1"/>
+<path d="M46.7424 55.7109H25.2656V59.3109H46.7424V55.7109Z" fill="#3289F1"/>
+</svg>
diff --git a/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg
new file mode 100644
index 000000000..e2c492ecd
--- /dev/null
+++ b/packages/website/public/images/developers/tutorials/develop_on_ethereum.svg
@@ -0,0 +1,4 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0349 38.5774C14.0366 38.5844 14.0366 38.5914 14.0383 38.5975C14.0459 38.6273 14.0595 38.6553 14.0688 38.6842C14.079 38.7148 14.085 38.7463 14.0977 38.7761C14.1003 38.7813 14.1045 38.7848 14.1062 38.7901C14.1461 38.8802 14.1979 38.9625 14.2582 39.0387C14.2752 39.0597 14.293 39.0781 14.3109 39.0973C14.3627 39.1534 14.4187 39.2041 14.4816 39.2488C14.4994 39.2619 14.5164 39.2768 14.5351 39.289C14.5436 39.2943 14.5503 39.3013 14.5588 39.3065L36.3144 52.3229C36.4876 52.4262 36.6812 52.4779 36.874 52.4779C36.9173 52.4779 36.9589 52.4656 37.0014 52.4603C37.0439 52.4656 37.0863 52.4779 37.1288 52.4779C37.3224 52.4779 37.5152 52.4262 37.6884 52.3229L59.444 39.3065C59.703 39.1516 59.8898 38.896 59.9645 38.5975C60.0384 38.299 59.9934 37.9821 59.8389 37.7178L38.0859 0.552394C37.8659 0.177746 37.4642 -0.0148298 37.0515 0.014932C36.6065 -0.0594723 36.1564 0.147984 35.9195 0.552394L14.1631 37.7187C14.1487 37.7432 14.1402 37.7703 14.1274 37.7966C14.1087 37.8351 14.0884 37.8718 14.0739 37.9121C14.0629 37.9427 14.0569 37.9751 14.0476 38.0075C14.0366 38.0478 14.0247 38.0881 14.0179 38.1292C14.0128 38.1607 14.0128 38.1931 14.0102 38.2255C14.0068 38.2684 14.0026 38.3104 14.0043 38.3542C14.0051 38.3874 14.0111 38.4198 14.0153 38.4531C14.0213 38.4942 14.0247 38.5354 14.0349 38.5774ZM38.2455 5.27838L56.1991 35.9496L38.2455 27.7826V5.27838ZM38.2455 30.2957L56.3197 38.5179L38.2455 49.3319V30.2957ZM35.759 5.27838V27.6662L17.898 35.7912L35.759 5.27838ZM35.759 30.1802V49.331L17.5744 38.4522L35.759 30.1802Z" fill="#3289F1"/>
+<path d="M58.3132 42.4975L36.9993 55.5568L15.6854 42.4975C15.2327 42.2192 14.651 42.3076 14.2943 42.7076C13.9368 43.1085 13.9011 43.7125 14.2085 44.1546L35.9641 75.5182C36.1772 75.8263 36.5186 75.9996 36.8719 75.9996C36.9144 75.9996 36.9568 75.9839 36.9993 75.9786C37.0418 75.9839 37.0842 75.9996 37.1267 75.9996C37.48 75.9996 37.8205 75.8263 38.0345 75.5182L59.79 44.1546C60.0975 43.7125 60.0609 43.1085 59.7043 42.7076C59.3467 42.3076 58.7659 42.22 58.3132 42.4975ZM35.756 71.2649L19.1145 47.2743L35.756 57.4703V71.2649ZM38.2426 71.2649V57.4703L54.884 47.2743L38.2426 71.2649Z" fill="#3289F1"/>
+</svg>
diff --git a/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg
new file mode 100644
index 000000000..c402964aa
--- /dev/null
+++ b/packages/website/public/images/developers/tutorials/use_shared_liquidity.svg
@@ -0,0 +1,3 @@
+<svg width="70" height="74" viewBox="0 0 70 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.5152 52.7109C46.8864 53.3447 46.3452 54.0413 45.8772 54.7779L25.1416 42.092C25.69 40.7084 26.0008 39.2038 26.0008 37.6255C26.0008 36.0472 25.69 34.5426 25.1428 33.159L45.8832 20.5699C48.0132 23.9418 51.7475 26.1889 56.0002 26.1889C62.6169 26.1889 68 20.7634 68 14.0945C68 7.42558 62.6169 2 56.0002 2C49.3835 2 44.0004 7.42558 44.0004 14.0945C44.0004 15.6135 44.292 17.0625 44.8008 18.4025L24.0328 31.0086C21.8872 27.7141 18.1937 25.531 13.9998 25.531C7.3831 25.531 2 30.9566 2 37.6255C2 44.2944 7.3831 49.72 13.9998 49.72C18.1937 49.72 21.886 47.5369 24.0316 44.2424L44.796 56.9452C44.28 58.307 43.9992 59.762 43.9992 61.2629C43.9992 64.4934 45.2472 67.5315 47.514 69.8149C49.8527 72.1721 52.9259 73.3513 55.999 73.3513C59.0722 73.3513 62.1453 72.1721 64.4841 69.8149C66.7508 67.5303 67.9988 64.4934 67.9988 61.2629C67.9988 58.0325 66.7508 54.9944 64.4841 52.7109C59.8054 47.9941 52.1939 47.9941 47.5152 52.7109ZM56.0002 4.41889C61.2933 4.41889 65.6 8.7596 65.6 14.0945C65.6 19.4293 61.2933 23.7701 56.0002 23.7701C50.7071 23.7701 46.4004 19.4293 46.4004 14.0945C46.4004 8.7596 50.7059 4.41889 56.0002 4.41889ZM14.001 47.3011C8.70788 47.3011 4.40116 42.9604 4.40116 37.6255C4.40116 32.2906 8.70788 27.9499 14.001 27.9499C19.2941 27.9499 23.6008 32.2906 23.6008 37.6255C23.6008 42.9604 19.2941 47.3011 14.001 47.3011ZM62.7873 68.1048C59.0446 71.877 52.9547 71.877 49.2119 68.1048C47.3988 66.2773 46.4004 63.8463 46.4004 61.2629C46.4004 58.6795 47.3988 56.2486 49.2119 54.4211C51.0839 52.5343 53.5415 51.5922 56.0002 51.5922C58.459 51.5922 60.9165 52.5343 62.7885 54.4211C64.6017 56.2486 65.6 58.6795 65.6 61.2629C65.6 63.8463 64.6017 66.2773 62.7873 68.1048Z" fill="#3289F1" stroke="#3289F1" stroke-width="0.5"/>
+</svg>
diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json
index 7c3872cee..11b31b20b 100644
--- a/packages/website/translations/chinese.json
+++ b/packages/website/translations/chinese.json
@@ -86,5 +86,7 @@
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
-    "LIVE_CHAT": "live chat"
+    "LIVE_CHAT": "live chat",
+    "LIBRARIES_AND_TOOLS": "Libraries & Tools",
+    "MORE": "more"
 }
diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 52e4eeb50..e9bc53aa7 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -88,5 +88,7 @@
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
-    "LIVE_CHAT": "live chat"
+    "LIVE_CHAT": "live chat",
+    "LIBRARIES_AND_TOOLS": "Libraries & Tools",
+    "MORE": "more"
 }
diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json
index 81fbea6e3..934f28eb6 100644
--- a/packages/website/translations/korean.json
+++ b/packages/website/translations/korean.json
@@ -86,5 +86,7 @@
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
-    "LIVE_CHAT": "live chat"
+    "LIVE_CHAT": "live chat",
+    "LIBRARIES_AND_TOOLS": "Libraries & Tools",
+    "MORE": "more"
 }
diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json
index 4cc7aab91..6ee1eb1d7 100644
--- a/packages/website/translations/russian.json
+++ b/packages/website/translations/russian.json
@@ -86,5 +86,7 @@
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
-    "LIVE_CHAT": "live chat"
+    "LIVE_CHAT": "live chat",
+    "LIBRARIES_AND_TOOLS": "Libraries & Tools",
+    "MORE": "more"
 }
diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json
index f906de984..036cd3500 100644
--- a/packages/website/translations/spanish.json
+++ b/packages/website/translations/spanish.json
@@ -87,5 +87,7 @@
     "VIEW_ALL_DOCUMENTATION": "view all documentation",
     "SANDBOX": "0x.js sandbox",
     "GITHUB": "github",
-    "LIVE_CHAT": "live chat"
+    "LIVE_CHAT": "live chat",
+    "LIBRARIES_AND_TOOLS": "Libraries & Tools",
+    "MORE": "more"
 }
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index 148f2f7cb..dede6f636 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,11 +1,11 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
-import { Deco, Key, ObjectMap, WebsitePaths } from 'ts/types';
+import { Link } from 'ts/components/ui/link';
+import { Deco, Key, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -57,11 +57,11 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                 title: this.props.translate.get(Key.LiveChat, Deco.Cap),
                 url: constants.URL_ZEROEX_CHAT,
                 iconUrl: '/images/developers/chat_icon.svg',
-                textStyle: { color: '#3289F1', fontWeight: 'bold' },
+                textStyle: { color: colors.lightLinkBlue, fontWeight: 'bold' },
             },
         ];
         return (
-            <Container height={75} className="pb1">
+            <Container height={75} className="pb2 mb3">
                 <Container className="flex items-center lg-pt3 md-pt3 sm-pt1 relative" width="100%">
                     <div className="col col-2 sm-hide xs-hide">
                         <Link
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
new file mode 100644
index 000000000..b83fd82c2
--- /dev/null
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -0,0 +1,73 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { TutorialInfo } from 'ts/types';
+
+export interface TutorialButtonProps {
+    tutorialInfo: TutorialInfo;
+}
+
+export interface TutorialButtonState {
+    isHovering: boolean;
+}
+
+export class TutorialButton extends React.Component<TutorialButtonProps, TutorialButtonState> {
+    constructor(props: TutorialButtonProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        return (
+            <Link
+                to={this.props.tutorialInfo.location}
+                style={{ textDecoration: 'none' }}
+                onMouseEnter={this._onHover.bind(this)}
+                onMouseLeave={this._onHoverOff.bind(this)}
+            >
+                <div
+                    className="flex relative"
+                    style={{
+                        borderRadius: 4,
+                        border: `1px solid ${this.state.isHovering ? colors.lightLinkBlue : '#dfdfdf'}`,
+                        padding: 20,
+                        marginBottom: 15,
+                        backgroundColor: this.state.isHovering ? '#e7f1fd' : colors.white,
+                    }}
+                >
+                    <div>
+                        <img src={this.props.tutorialInfo.iconUrl} height={40} />
+                    </div>
+                    <div className="pl2">
+                        <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                            {this.props.tutorialInfo.title}
+                        </Text>
+                        <Text Tag="div" fontColor="#555555" fontSize="16">
+                            {this.props.tutorialInfo.description}
+                        </Text>
+                    </div>
+                    <div className="absolute" style={{ top: 31, right: 31 }}>
+                        <i
+                            className="zmdi zmdi-chevron-right bold"
+                            style={{ fontSize: 26, color: colors.lightLinkBlue }}
+                        />
+                    </div>
+                </div>
+            </Link>
+        );
+    }
+    private _onHover(_event: React.FormEvent<HTMLInputElement>): void {
+        this.setState({
+            isHovering: true,
+        });
+    }
+    private _onHoverOff(): void {
+        this.setState({
+            isHovering: false,
+        });
+    }
+}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index a065efc80..ab29b7f07 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -4,13 +4,261 @@ import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { TutorialButton } from 'ts/components/documentation/tutorial_button';
 import { Container } from 'ts/components/ui/container';
+import { Link } from 'ts/components/ui/link';
+import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ScreenWidths } from 'ts/types';
+import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
+interface Package {
+    name: string;
+    description: string;
+    to: string;
+    isExternal?: boolean;
+    shouldOpenInNewTab?: boolean;
+}
+
 const THROTTLE_TIMEOUT = 100;
+const TUTORIALS: TutorialInfo[] = [
+    {
+        title: 'Develop on Ethereum',
+        iconUrl: '/images/developers/tutorials/develop_on_ethereum.svg',
+        description: 'Learn more about building applications ontop of the Ethereum blockchain',
+        location: `${WebsitePaths.Wiki}#Ethereum-Development`,
+    },
+    {
+        title: 'Build a relayer',
+        iconUrl: '/images/developers/tutorials/build_a_relayer.svg',
+        description: 'Learn how to build your own 0x relayer from scratch',
+        location: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+    },
+    {
+        title: 'Learn the 0x order basics',
+        iconUrl: '/images/developers/tutorials/0x_order_basics.svg',
+        description: 'Tutorial on how to create, validate and fill an order over 0x protocol',
+        location: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+    },
+    {
+        title: 'Tap into shared liquidity',
+        iconUrl: '/images/developers/tutorials/use_shared_liquidity.svg',
+        description: 'Learn how to tap into the 0x shared liquidity pool using the Standard Relayer API',
+        location: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+    },
+];
+const CATEGORY_TO_PACKAGES: { [category: string]: Package[] } = {
+    '0x Protocol': [
+        {
+            name: '0x.js',
+            description:
+                'A library for interacting with the 0x protocol. It is a high level package which combines a number of smaller specific-purpose packages such as `order-utils` and `contract-wrappers`.',
+            to: WebsitePaths.ZeroExJs,
+        },
+        {
+            name: '0x starter project',
+            description:
+                'A Typescript starter project that will walk you through the basics of how to interact with 0x Protocol and trade of an SRA relayer',
+            to: 'https://github.com/0xProject/0x-starter-project',
+            isExternal: true,
+            shouldOpenInNewTab: true,
+        },
+        {
+            name: '@0xproject/connect',
+            description:
+                'An http & websocket client for interacting with relayers that have implemented the Standard Relayer API',
+            to: WebsitePaths.Connect,
+        },
+        {
+            name: '@0xproject/contract-wrappers',
+            description:
+                'Typescript/Javascript wrappers of the 0x protocol Ethereum smart contracts. Use this library to call methods on the 0x smart contracts, subscribe to contract events and to fetch information stored in the contracts.',
+            to: WebsitePaths.ContractWrappers,
+        },
+        {
+            name: '@0xproject/json-schemas',
+            description:
+                'A collection of 0x-related JSON-schemas (incl. SRA request/response schemas, 0x order message format schema, etc...)',
+            to: WebsitePaths.JSONSchemas,
+        },
+        {
+            name: '@0xproject/order-utils',
+            description:
+                'A set of utils for working with 0x orders. It includes utilities for creating, signing, validating 0x orders, encoding/decoding assetData and much more.',
+            to: WebsitePaths.OrderUtils,
+        },
+        {
+            name: '@0xproject/order-watcher',
+            description:
+                "A daemon that watches a set of 0x orders and emits events when an order's fillability has changed. Can be used by a relayer to prune their orderbook or by a trader to keep their view of the market up-to-date.",
+            to: WebsitePaths.OrderWatcher,
+        },
+        {
+            name: '@0xproject/sra-spec',
+            description:
+                'Contains the Standard Relayer API OpenAPI Spec. The package distributes both a javascript object version and a json version.',
+            to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/sra-spec',
+            isExternal: true,
+            shouldOpenInNewTab: true,
+        },
+    ],
+    Ethereum: [
+        {
+            name: 'abi-gen',
+            description:
+                "This package allows you to generate TypeScript contract wrappers from ABI files. It's heavily inspired by Geth abigen but takes a different approach. You can write your custom handlebars templates which will allow you to seamlessly integrate the generated code into your existing codebase with existing conventions.",
+            to: 'https://github.com/0xProject/0x-monorepo/tree/development/packages/abi-gen',
+            isExternal: true,
+            shouldOpenInNewTab: true,
+        },
+        {
+            name: 'ethereum-types',
+            description:
+                'A collection of Typescript types that are useful when working on an Ethereum-based project (e.g RawLog, Transaction, TxData, SolidityTypes, etc...).',
+            to: WebsitePaths.EthereumTypes,
+        },
+        {
+            name: '@0xproject/sol-compiler',
+            description:
+                'A wrapper around `solc-js` that adds smart re-compilation, ability to compile an entire project, Solidity version specific compilation, standard input description support and much more.',
+            to: WebsitePaths.SolCompiler,
+        },
+        {
+            name: '@0xproject/sol-cov',
+            description:
+                'A Solidity code coverage tool. Sol-cov uses transaction traces to figure out which lines of your code has been covered by your tests.',
+            to: WebsitePaths.SolCov,
+        },
+        {
+            name: '@0xproject/subproviders',
+            description:
+                'A collection of subproviders to use with `web3-provider-engine` (e.g subproviders for interfacing with Ledger hardware wallet, Mnemonic wallet, private key wallet, etc...)',
+            to: WebsitePaths.Subproviders,
+        },
+        {
+            name: '@0xproject/web3-wrapper',
+            description:
+                'A raw Ethereum JSON RPC client to simplify interfacing with Ethereum nodes. Also includes some convenience functions for awaiting transactions to be mined, converting between token units, etc...',
+            to: WebsitePaths.Web3Wrapper,
+        },
+    ],
+    'Community Maintained': [
+        {
+            name: '0x Event Extractor',
+            description:
+                'NodeJS worker originally built for 0x Tracker which extracts 0x fill events from the Ethereum blockchain and persists them to MongoDB. Support for both V1 and V2 of the 0x protocol is included with events tagged against the protocol version they belong to.',
+            to: 'https://github.com/0xTracker/0x-event-extractor',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: '0x Tracker Worker',
+            description:
+                'NodeJS worker built for 0x Tracker which performs various ETL tasks related to the 0x protocol trading data and other information used on 0x Tracker.',
+            to: 'https://github.com/0xTracker/0x-tracker-worker',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'Aquaduct',
+            description:
+                "ERCdex's Javascript SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+            to: 'https://www.npmjs.com/package/aqueduct',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'Aquaduct Server SDK',
+            description:
+                'SDKs for automation using Aqueduct & ERC dEX. Aqueduct Server is a lightweight, portable and secure server that runs locally on any workstation. The server exposes a small number of foundational endpoints that enable working with the decentralized Aqueduct liquidity pool from any context or programming language.',
+            to: 'https://github.com/ERCdEX/aqueduct-server-sdk',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'DDEX Node.js SDK',
+            description: 'A node.js SDK for trading on the DDEX relayer',
+            to: 'https://www.npmjs.com/package/ddex-api',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'ERCdex Widget',
+            description: "The ERC dEX Trade Widget let's any website provide token liquidity to it's users",
+            to: 'https://github.com/ERCdEX/widget',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'ERCdex Java SDK',
+            description: "ERCdex's Java SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+            to: 'https://github.com/ERCdEX/java',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'ERCdex Python SDK',
+            description: "ERCdex's Python SDK for trading on their relayer, as well as other Aquaduct partner relayers",
+            to: 'https://github.com/ERCdEX/python',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'Massive',
+            description:
+                'A set of command-line tools for creating command-line scripts for interacting with the Ethereum blockchain in general, and 0x in particular',
+            to: 'https://github.com/NoteGio/massive',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'OpenRelay',
+            description: 'An open-source API-only Relayer written in Go',
+            to: 'https://github.com/NoteGio/openrelay',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'OpenRelay.js',
+            description:
+                'A JavaScript Library for Interacting with OpenRelay.xyz and other 0x Standard Relayer API Implementations',
+            to: 'https://github.com/NoteGio/openrelay.js',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'Radar SDK',
+            description:
+                'The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs',
+            to: 'https://github.com/RadarRelay/sdk',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'The Ocean Javascript SDK',
+            description:
+                'The Ocean provides a simple REST API, WebSockets API, and JavaScript library to help you integrate decentralized trading into your existing trading strategy.',
+            to: 'https://github.com/TheOceanTrade/theoceanx-javascript',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'Tokenlon Javascript SDK',
+            description: "Tokenlon SDK provides APIs for developers to trade of imToken's relayer",
+            to: 'https://www.npmjs.com/package/tokenlon-sdk',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+        {
+            name: 'AssetData decoder library in Java',
+            description: 'A small library that implements the 0x order assetData encoding/decoding in Java',
+            to: 'https://github.com/wildnothing/asset-data-decoder',
+            shouldOpenInNewTab: true,
+            isExternal: true,
+        },
+    ],
+};
 
 export interface HomeProps {
     location: Location;
@@ -54,26 +302,126 @@ export class Home extends React.Component<HomeProps, HomeState> {
                         paddingRight={22}
                         paddingTop={2}
                         backgroundColor={colors.grey100}
-                        height="100vh"
                     >
                         <DocsLogo height={36} containerStyle={{ paddingTop: 28 }} />
                     </Container>
                     <Container
                         width={isSmallScreen ? '100vw' : 716}
+                        paddingBottom="100px"
                         paddingLeft={mainContentPadding}
                         paddingRight={mainContentPadding}
                         backgroundColor={colors.white}
-                        height="100vh"
                     >
                         <DocsContentTopBar location={this.props.location} translate={this.props.translate} />
                         <div>
-                            <h1 style={{ color: '#333333', fontSize: 30 }}>Start building on 0x</h1>
+                            {this._renderSectionTitle('Start building on 0x')}
+                            <Container paddingTop="12px">
+                                {this._renderSectionDescription(
+                                    'Follow one of our "Getting started" guides to learn more about building ontop of 0x.',
+                                )}
+                                <Container marginTop="36px">
+                                    {_.map(TUTORIALS, tutorialInfo => (
+                                        <TutorialButton
+                                            tutorialInfo={tutorialInfo}
+                                            key={`tutorial-${tutorialInfo.title}`}
+                                        />
+                                    ))}
+                                </Container>
+                            </Container>
+                        </div>
+                        <div className="mt4">
+                            {this._renderSectionTitle(this.props.translate.get(Key.LibrariesAndTools, Deco.CapWords))}
+                            <Container paddingTop="12px">
+                                {this._renderSectionDescription(
+                                    'A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum',
+                                )}
+                                <Container marginTop="36px">
+                                    {_.map(CATEGORY_TO_PACKAGES, (pkgs, category) =>
+                                        this._renderPackageCategory(category, pkgs),
+                                    )}
+                                </Container>
+                            </Container>
                         </div>
                     </Container>
                 </div>
             </Container>
         );
     }
+    private _renderPackageCategory(category: string, pkgs: Package[]): React.ReactNode {
+        return (
+            <div key={`category-${category}`}>
+                <Text fontSize="18px">{category}</Text>
+                <div>{_.map(pkgs, pkg => this._renderPackage(pkg))}</div>
+            </div>
+        );
+    }
+    private _renderPackage(pkg: Package): React.ReactNode {
+        return (
+            <div className="pb2" key={`package-${pkg.name}`}>
+                <div
+                    style={{
+                        width: '100%',
+                        height: 1,
+                        backgroundColor: colors.grey300,
+                        marginTop: 11,
+                    }}
+                />
+                <div className="clearfix mt2 pt1">
+                    <div className="col col-4">
+                        <Link
+                            to={pkg.to}
+                            className="text-decoration-none"
+                            style={{ color: colors.lightLinkBlue }}
+                            isExternal={!!pkg.isExternal}
+                            shouldOpenInNewTab={!!pkg.shouldOpenInNewTab}
+                        >
+                            <Text Tag="div" fontColor={colors.lightLinkBlue} fontWeight="bold">
+                                {pkg.name}
+                            </Text>
+                        </Link>
+                    </div>
+                    <div className="col col-6">
+                        <Text Tag="div" fontColor={colors.grey700}>
+                            {pkg.description}
+                        </Text>
+                    </div>
+                    <div className="col col-2 relative">
+                        <Link
+                            to={pkg.to}
+                            className="text-decoration-none absolute"
+                            style={{ right: 0, color: colors.lightLinkBlue }}
+                            isExternal={!!pkg.isExternal}
+                            shouldOpenInNewTab={!!pkg.shouldOpenInNewTab}
+                        >
+                            <div className="flex">
+                                <div>{this.props.translate.get(Key.More, Deco.Cap)}</div>
+                                <Container paddingTop="1px" paddingLeft="6px">
+                                    <i
+                                        className="zmdi zmdi-chevron-right bold"
+                                        style={{ fontSize: 18, color: colors.lightLinkBlue }}
+                                    />
+                                </Container>
+                            </div>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _renderSectionTitle(text: string): React.ReactNode {
+        return (
+            <Text fontColor="#333333" fontSize="30px" fontWeight="bold">
+                {text}
+            </Text>
+        );
+    }
+    private _renderSectionDescription(text: string): React.ReactNode {
+        return (
+            <Text fontColor="#999999" fontSize="18px" fontFamily="Roboto Mono">
+                {text}
+            </Text>
+        );
+    }
     private _updateScreenWidth(): void {
         const newScreenWidth = utils.getScreenWidth();
         this.props.dispatcher.updateScreenWidth(newScreenWidth);
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index c208ce90f..106287178 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -476,6 +476,8 @@ export enum Key {
     Sandbox = 'SANDBOX',
     Github = 'GITHUB',
     LiveChat = 'LIVE_CHAT',
+    LibrariesAndTools = 'LIBRARIES_AND_TOOLS',
+    More = 'MORE',
 }
 
 export enum SmartContractDocSections {
@@ -622,4 +624,11 @@ export interface InjectedWeb3 {
         getNetwork(cd: (err: Error, networkId: string) => void): void;
     };
 }
+
+export interface TutorialInfo {
+    title: string;
+    iconUrl: string;
+    description: string;
+    location: string;
+}
 // tslint:disable:max-file-line-count