diff options
18 files changed, 493 insertions, 1 deletions
diff --git a/packages/website/public/images/launch_kit/0x_cupboard.svg b/packages/website/public/images/launch_kit/0x_cupboard.svg new file mode 100644 index 000000000..4c4e6ba1b --- /dev/null +++ b/packages/website/public/images/launch_kit/0x_cupboard.svg @@ -0,0 +1,53 @@ +<svg width="325" height="356" viewBox="0 0 325 356" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path opacity="0.4" d="M74 108.5L149 85.5" stroke="white" stroke-width="3" stroke-dasharray="7 4"/> +<path opacity="0.4" d="M32 90L107 67" stroke="white" stroke-width="3" stroke-dasharray="7 4"/> +<path opacity="0.4" d="M71.5 161.5L122.5 146.5" stroke="white" stroke-width="3" stroke-dasharray="7 4"/> +<path opacity="0.18" d="M235 352.304L320.3 311.604C321.4 311.104 322 310.004 322 308.804V80.5041C322 79.3041 321.3 78.204 320.2 77.604L160.8 3.30405C160.2 3.00405 159.5 2.90405 158.8 3.10405L58.8996 24.4041C56.5996 24.8041 59.4996 25.6041 61.5996 26.6041L233 107.904C234.3 108.504 235.8 108.604 237.2 108.104L322.1 78.5041" stroke="white" stroke-width="4.1573" stroke-miterlimit="10" stroke-linecap="round"/> +<path d="M55 98.6042V83.2042V28.4042C55 26.4042 56.8 25.0042 58.7 25.3042C58.9 25.4042 59.2 25.4042 59.5 25.5042L61.3 26.3042L160.1 73.1042L233 107.704L233.3 107.804C234.4 108.304 235.1 109.404 235.1 110.604V233.504V349.904C235.1 352.304 232.6 353.804 230.5 352.604L56.6 255.904C55.6 255.404 55 254.304 55 253.204V168.004V167.504" stroke="white" stroke-width="4" stroke-miterlimit="10"/> +<path d="M160 95.8042V73.3042" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M123.5 116.704L74 131.704" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M74.5 148L235 233.604" stroke="white" stroke-width="4" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/> +<path d="M55 253.204L73.2 246.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M235.999 257.304L212.499 245.804C211.499 245.304 210.399 245.204 209.399 245.504L181.199 254.004C179.399 254.504 178.199 256.204 178.199 258.104V305.004C178.199 306.504 178.999 308.004 180.399 308.704L215.899 328.504C216.999 329.104 218.299 329.204 219.499 328.804L236.099 322.504" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M217.699 328.504V274.104L237.599 267.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M178.199 254.904L217.699 274.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M191.6 301.405C195.7 306.505 200.8 309.405 204.8 308.705C205.9 308.505 206.9 308.105 207.7 307.405C207 305.905 206.3 304.305 205.5 302.705L204.9 301.405C204.1 302.405 202.9 303.005 201.4 302.905L199.2 299.205L191.6 301.405Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M186.899 278.805C185.899 280.205 185.399 282.005 185.199 284.205C184.999 287.205 185.699 290.705 187.199 294.205C187.899 295.905 188.799 297.505 189.799 299.005C190.799 298.805 191.799 298.505 192.799 298.205L193.599 297.905C192.299 296.205 191.199 294.205 190.599 292.205L192.699 290.905L186.899 278.805Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M204.299 283.404C200.199 278.304 195.099 275.404 191.099 276.104C189.999 276.304 188.999 276.704 188.199 277.404C188.899 278.904 189.599 280.504 190.399 282.104L190.999 283.404C191.799 282.404 192.999 281.804 194.499 281.904L196.499 285.404L204.299 283.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M208.999 306.104C211.299 302.704 211.199 296.804 208.699 290.804C207.999 289.104 207.099 287.504 206.099 286.004C205.099 286.204 204.099 286.504 203.099 286.804L202.299 287.104C203.599 288.804 204.699 290.804 205.299 292.804V292.904L203.199 294.204L208.999 306.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M197.5 249.004V237.604C197.5 236.004 196.6 234.504 195.1 233.804L159.8 216.504C158.8 216.004 157.7 215.904 156.7 216.204L128.5 224.704C126.7 225.204 125.5 226.904 125.5 228.804V275.704C125.5 277.204 126.3 278.704 127.7 279.404L163.2 299.204C164.3 299.804 165.6 299.904 166.8 299.504L178.2 295.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M165 299.204V244.804L196.5 235.004" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M125.5 225.604L165 244.804" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M138.9 272.204C143 277.304 148.1 280.204 152.1 279.504C153.2 279.304 154.2 278.904 155 278.204C154.3 276.704 153.6 275.104 152.8 273.504L152.2 272.204C151.4 273.204 150.2 273.804 148.7 273.704L146.5 270.004L138.9 272.204Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M134.2 249.504C133.2 250.904 132.7 252.704 132.5 254.904C132.3 257.904 133 261.404 134.5 264.904C135.2 266.604 136.1 268.204 137.1 269.704C138.1 269.504 139.1 269.204 140.1 268.904L140.9 268.604C139.6 266.904 138.5 264.904 137.9 262.904L140 261.604L134.2 249.504Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M151.6 254.104C147.5 249.004 142.4 246.104 138.4 246.804C137.3 247.004 136.3 247.404 135.5 248.104C136.2 249.604 136.9 251.204 137.7 252.804L138.3 254.104C139.1 253.104 140.3 252.504 141.8 252.604L143.8 256.104L151.6 254.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M156.3 276.804C158.6 273.404 158.5 267.504 156 261.504C155.3 259.804 154.4 258.204 153.4 256.704C152.4 256.904 151.4 257.204 150.4 257.504L149.6 257.804C150.9 259.504 152 261.504 152.6 263.504V263.604L150.5 264.904L156.3 276.804Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M146 220.504V208.304C146 206.704 145.1 205.204 143.6 204.504L108.3 187.204C107.3 186.704 106.2 186.604 105.2 186.904L77 195.404C75.2 195.904 74 197.604 74 199.504V246.404C74 247.904 74.8 249.404 76.2 250.104L111.7 269.904C112.8 270.504 114.1 270.604 115.3 270.204L125.8 266.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M113.5 270.004V215.504L145 205.704" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M74 196.404L113.5 215.504" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M87.3008 242.904C91.4008 248.004 96.5008 250.904 100.501 250.204C101.601 250.004 102.601 249.604 103.401 248.904C102.701 247.404 102.001 245.804 101.201 244.204L100.601 242.904C99.8008 243.904 98.6008 244.504 97.1008 244.404L94.9008 240.704L87.3008 242.904Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M82.7003 220.204C81.7003 221.604 81.2003 223.404 81.0003 225.604C80.8003 228.604 81.5003 232.104 83.0003 235.604C83.7003 237.304 84.6003 238.904 85.6003 240.404C86.6003 240.204 87.6003 239.904 88.6003 239.604L89.4003 239.304C88.1003 237.604 87.0003 235.604 86.4003 233.604L88.5003 232.304L82.7003 220.204Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M100.1 224.904C96 219.804 90.9 216.904 86.9 217.604C85.8 217.804 84.8 218.204 84 218.904C84.7 220.404 85.4 222.004 86.2 223.604L86.8 224.904C87.6 223.904 88.8 223.304 90.3 223.404L92.3 226.904L100.1 224.904Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M104.8 247.504C107.1 244.104 107 238.204 104.5 232.204C103.8 230.504 102.9 228.904 101.9 227.404C100.9 227.604 99.8996 227.904 98.8996 228.204L98.0996 228.504C99.3996 230.204 100.5 232.204 101.1 234.204V234.304L98.9996 235.604L104.8 247.504Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M234.999 133.504L211.499 122.004C210.499 121.504 209.399 121.404 208.399 121.704L180.199 130.204C178.399 130.704 177.199 132.404 177.199 134.304V181.204C177.199 182.704 177.999 184.204 179.399 184.904L214.899 204.704C215.999 205.304 217.299 205.404 218.499 205.004L235.099 198.704" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M216.699 204.804V150.304L234.999 144.604" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M177.199 131.204L216.699 150.304" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M190.6 177.704C194.7 182.804 199.8 185.704 203.8 185.004C204.9 184.804 205.9 184.404 206.7 183.704C206 182.204 205.3 180.604 204.5 179.004L203.9 177.704C203.1 178.704 201.9 179.304 200.4 179.204L198.2 175.504L190.6 177.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M185.899 155.004C184.899 156.404 184.399 158.204 184.199 160.404C183.999 163.404 184.699 166.904 186.199 170.404C186.899 172.104 187.799 173.704 188.799 175.204C189.799 175.004 190.799 174.704 191.799 174.404L192.599 174.104C191.299 172.404 190.199 170.404 189.599 168.404L191.699 167.104L185.899 155.004Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M203.299 159.704C199.199 154.604 194.099 151.704 190.099 152.404C188.999 152.604 187.999 153.004 187.199 153.704C187.899 155.204 188.599 156.804 189.399 158.404L189.999 159.704C190.799 158.704 191.999 158.104 193.499 158.204L195.499 161.704L203.299 159.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M207.999 182.304C210.299 178.904 210.199 173.004 207.699 167.004C206.999 165.304 206.099 163.704 205.099 162.204C204.099 162.404 203.099 162.704 202.099 163.004L201.299 163.304C202.599 165.004 203.699 167.004 204.299 169.004V169.104L202.199 170.404L207.999 182.304Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M195.5 125.704V115.904C195.5 114.304 194.6 112.804 193.1 112.104L157.8 94.8042C156.8 94.3042 155.7 94.2042 154.7 94.5042L126.5 103.004C124.7 103.504 123.5 105.204 123.5 107.104V154.004C123.5 155.504 124.3 157.004 125.7 157.704L161.2 177.504C162.3 178.104 163.6 178.204 164.8 177.804L177.2 173.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M163 177.504V123.104L194.5 113.204" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M123.5 103.904L163 123.104" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M136.9 150.405C141 155.505 146.1 158.405 150.1 157.705C151.2 157.505 152.2 157.105 153 156.405C152.3 154.905 151.6 153.305 150.8 151.705L150.2 150.405C149.4 151.405 148.2 152.005 146.7 151.905L144.5 148.205L136.9 150.405Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M132.2 127.705C131.2 129.105 130.7 130.905 130.5 133.105C130.3 136.105 131 139.605 132.5 143.105C133.2 144.805 134.1 146.405 135.1 147.905C136.1 147.705 137.1 147.405 138.1 147.105L138.9 146.805C137.6 145.105 136.5 143.105 135.9 141.105L138 139.805L132.2 127.705Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M149.6 132.404C145.5 127.304 140.4 124.404 136.4 125.104C135.3 125.304 134.3 125.704 133.5 126.404C134.2 127.904 134.9 129.504 135.7 131.104L136.3 132.404C137.1 131.404 138.3 130.804 139.8 130.904L141.8 134.404L149.6 132.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M154.3 155.004C156.6 151.604 156.5 145.704 154 139.704C153.3 138.004 152.4 136.404 151.4 134.904C150.4 135.104 149.4 135.404 148.4 135.704L147.6 136.004C148.9 137.704 150 139.704 150.6 141.704V141.804L148.5 143.104L154.3 155.004Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M43.3 172.504L71.2 161.904C72.9 161.304 74 159.704 74 157.904V110.504C74 108.904 73.1 107.404 71.6 106.704L36.3 89.4043C35.3 88.9043 34.2 88.8043 33.2 89.1043L5 97.7043C3.2 98.2043 2 99.9043 2 101.804V148.704C2 150.204 2.8 151.704 4.2 152.404L39.7 172.204C40.8 172.804 42.1 172.904 43.3 172.504Z" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M41.5 172.204V117.804L73 107.904" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M2 98.6045L41.5 117.804" stroke="white" stroke-width="3" stroke-miterlimit="10"/> +<path d="M15.3008 145.104C19.4008 150.204 24.5008 153.104 28.5008 152.404C29.6008 152.204 30.6008 151.804 31.4008 151.104C30.7008 149.604 30.0008 148.004 29.2008 146.404L28.6008 145.104C27.8008 146.104 26.6008 146.704 25.1008 146.604L22.9008 142.904L15.3008 145.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M10.7003 122.404C9.70027 123.804 9.20027 125.604 9.00027 127.804C8.80027 130.804 9.50027 134.304 11.0003 137.804C11.7003 139.504 12.6003 141.104 13.6003 142.604C14.6003 142.404 15.6003 142.104 16.6003 141.804L17.4003 141.504C16.1003 139.804 15.0003 137.804 14.4003 135.804L16.5003 134.504L10.7003 122.404Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M28.1 127.104C24 122.004 18.9 119.104 14.9 119.804C13.8 120.004 12.8 120.404 12 121.104C12.7 122.604 13.4 124.204 14.2 125.804L14.8 127.104C15.6 126.104 16.8 125.504 18.3 125.604L20.3 129.104L28.1 127.104Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +<path d="M32.7996 149.704C35.0996 146.304 34.9996 140.404 32.4996 134.404C31.7996 132.704 30.8996 131.104 29.8996 129.604C28.8996 129.804 27.8996 130.104 26.8996 130.404L26.0996 130.704C27.3996 132.404 28.4996 134.404 29.0996 136.404V136.504L26.9996 137.804L32.7996 149.704Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10"/> +</svg> diff --git a/packages/website/public/images/launch_kit/enable_trading.svg b/packages/website/public/images/launch_kit/enable_trading.svg new file mode 100644 index 000000000..84a081629 --- /dev/null +++ b/packages/website/public/images/launch_kit/enable_trading.svg @@ -0,0 +1,9 @@ +<svg width="62" height="67" viewBox="0 0 62 67" fill="none" xmlns="http://www.w3.org/2000/svg"> +<circle r="29.25" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="2.5"/> +<circle cx="25.5" cy="16.5" r="12.25" stroke="white" stroke-width="2.5"/> +<circle cx="9" cy="25" r="4.75" stroke="white" stroke-width="2.5"/> +<circle cx="50" cy="31" r="7.75" stroke="white" stroke-width="2.5"/> +<circle cx="19.5" cy="41.5" r="11.25" stroke="white" stroke-width="2.5"/> +<rect x="40.25" y="12.25" width="9.5" height="10.5" stroke="white" stroke-width="2.5"/> +<path d="M33.9032 56.2038L32.5823 33.8826L52.5734 43.8992L33.9032 56.2038Z" stroke="white" stroke-width="2.5"/> +</svg> diff --git a/packages/website/public/images/launch_kit/fork.svg b/packages/website/public/images/launch_kit/fork.svg new file mode 100644 index 000000000..83d2f6d65 --- /dev/null +++ b/packages/website/public/images/launch_kit/fork.svg @@ -0,0 +1,4 @@ +<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg"> +<circle r="29" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="3"/> +<path d="M31 58.5V46.5M31 1.5V24M31 46.5L42 38V3.5M31 46.5V24M31 24L19.5 16.5V3.5" stroke="white" stroke-width="3"/> +</svg> diff --git a/packages/website/public/images/launch_kit/in_game_marketplace.svg b/packages/website/public/images/launch_kit/in_game_marketplace.svg new file mode 100644 index 000000000..853efe7ca --- /dev/null +++ b/packages/website/public/images/launch_kit/in_game_marketplace.svg @@ -0,0 +1,11 @@ +<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M31.0182 31.004L42.293 42.2788L59.0405 25.5311L47.7658 14.2563L31.0182 31.004Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.998 31.0008L30.998 46.6162L55.5365 46.6162L55.5365 31.0008L30.998 31.0008Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.9995 31.0026L19.7246 42.2773L36.4723 59.0249L47.7472 47.7501L30.9995 31.0026Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.9982 31H15.3828V54.4231H30.9982V31Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.9994 30.9843L19.7246 19.7095L2.97701 36.4571L14.2518 47.732L30.9994 30.9843Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.998 31.0002L30.998 15.3848L7.57497 15.3848L7.57497 31.0002L30.998 31.0002Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M31.0025 30.994L42.2773 19.7192L25.5297 2.97167L14.2548 14.2464L31.0025 30.994Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M30.9998 31.0005L46.6152 31.0005L46.6152 7.57741L30.9998 7.57741L30.9998 31.0005Z" fill="#1B1B1B" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +<path d="M31 60C47.0163 60 60 47.0163 60 31C60 14.9837 47.0163 2 31 2C14.9837 2 2 14.9837 2 31C2 47.0163 14.9837 60 31 60Z" stroke="white" stroke-width="2.5" stroke-miterlimit="10"/> +</svg> diff --git a/packages/website/public/images/launch_kit/local_market.svg b/packages/website/public/images/launch_kit/local_market.svg new file mode 100644 index 000000000..05f7fd993 --- /dev/null +++ b/packages/website/public/images/launch_kit/local_market.svg @@ -0,0 +1,12 @@ +<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g style="mix-blend-mode:screen"> +<line x1="1" y1="32.75" x2="60" y2="32.75" stroke="white" stroke-width="2.5"/> +<circle r="29.25" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="2.5"/> +<mask id="path-3-inside-1" fill="white"> +<path d="M13 19.2842C13 9.73842 20.8063 2 30.4359 2H30.5641C40.1937 2 48 9.73842 48 19.2842C48 24.3185 46.0144 27.2967 44.7837 29.2892C39.8746 36.5685 33.9497 40.9315 30.5641 51H30.4359C27.0503 40.9315 21.1254 36.5685 16.2163 29.2892C14.9856 27.2967 13 24.3185 13 19.2842Z"/> +</mask> +<path d="M13 19.2842C13 9.73842 20.8063 2 30.4359 2H30.5641C40.1937 2 48 9.73842 48 19.2842C48 24.3185 46.0144 27.2967 44.7837 29.2892C39.8746 36.5685 33.9497 40.9315 30.5641 51H30.4359C27.0503 40.9315 21.1254 36.5685 16.2163 29.2892C14.9856 27.2967 13 24.3185 13 19.2842Z" fill="black"/> +<path d="M13 19.2842L15.5 19.2843V19.2842H13ZM30.4359 51L28.0662 51.7968L28.639 53.5H30.4359V51ZM16.2163 29.2892L14.0894 30.603L14.1156 30.6455L14.1436 30.687L16.2163 29.2892ZM48 19.2842H45.5V19.2843L48 19.2842ZM30.5641 51V53.5H32.3611L32.9338 51.7968L30.5641 51ZM44.7837 29.2892L46.8564 30.687L46.8844 30.6455L46.9106 30.603L44.7837 29.2892ZM30.4359 -0.5C19.4462 -0.5 10.5 8.33717 10.5 19.2842H15.5C15.5 11.1397 22.1664 4.5 30.4359 4.5V-0.5ZM32.8055 50.2032C30.9961 44.8221 28.5008 40.968 25.8758 37.5702C23.1584 34.053 20.7047 31.4734 18.289 27.8914L14.1436 30.687C16.637 34.3843 19.6003 37.6258 21.9191 40.6271C24.3301 43.7478 26.4901 47.1094 28.0662 51.7968L32.8055 50.2032ZM18.3433 27.9754C17.1317 26.0138 15.5 23.5597 15.5 19.2843L10.5 19.2842C10.5 25.0773 12.8395 28.5795 14.0894 30.603L18.3433 27.9754ZM30.5641 4.5C38.8336 4.5 45.5 11.1397 45.5 19.2842H50.5C50.5 8.33717 41.5538 -0.5 30.5641 -0.5V4.5ZM32.9338 51.7968C34.5099 47.1094 36.6699 43.7478 39.0809 40.6271C41.3997 37.6258 44.363 34.3843 46.8564 30.687L42.711 27.8914C40.2953 31.4734 37.8416 34.053 35.1242 37.5702C32.4992 40.968 30.0039 44.8221 28.1945 50.2032L32.9338 51.7968ZM46.9106 30.603C48.1605 28.5795 50.5 25.0773 50.5 19.2842L45.5 19.2843C45.5 23.5597 43.8683 26.0138 42.6567 27.9754L46.9106 30.603ZM30.4359 4.5H30.5641V-0.5H30.4359V4.5ZM30.5641 48.5H30.4359V53.5H30.5641V48.5Z" fill="white" mask="url(#path-3-inside-1)"/> +<path d="M36.75 17.9247C36.75 21.27 33.9757 24.0247 30.5 24.0247C27.0243 24.0247 24.25 21.27 24.25 17.9247C24.25 14.5795 27.0243 11.8247 30.5 11.8247C33.9757 11.8247 36.75 14.5795 36.75 17.9247Z" stroke="white" stroke-width="2.5"/> +</g> +</svg> diff --git a/packages/website/public/images/launch_kit/secondary_market.svg b/packages/website/public/images/launch_kit/secondary_market.svg new file mode 100644 index 000000000..bc7d94f65 --- /dev/null +++ b/packages/website/public/images/launch_kit/secondary_market.svg @@ -0,0 +1,6 @@ +<svg width="61" height="61" viewBox="0 0 61 61" fill="none" xmlns="http://www.w3.org/2000/svg"> +<circle r="29" transform="matrix(1 0 0 -1 30.5 30.5)" stroke="white" stroke-width="3"/> +<path d="M25.0905 43.4553C25.7806 39.0493 22.7432 34.8925 18.2807 34.1894C13.8181 33.4864 9.65627 36.509 8.96618 40.915C8.27608 45.321 11.3134 49.4778 15.776 50.1808C20.2385 50.8838 24.4004 47.8612 25.0905 43.4553Z" stroke="white" stroke-width="3"/> +<path d="M38.8014 30.8527C39.4915 26.4467 36.4541 22.2899 31.9916 21.5869C27.5291 20.8839 23.3672 23.9065 22.6771 28.3125C21.987 32.7184 25.0244 36.8752 29.4869 37.5783C33.9495 38.2813 38.1113 35.2587 38.8014 30.8527Z" stroke="white" stroke-width="3"/> +<path d="M52.5104 18.2512C53.2005 13.8452 50.1631 9.68838 45.7006 8.98534C41.238 8.2823 37.0762 11.3049 36.3861 15.7109C35.696 20.1169 38.7334 24.2737 43.1959 24.9767C47.6584 25.6797 51.8203 22.6571 52.5104 18.2512Z" stroke="white" stroke-width="3"/> +</svg> diff --git a/packages/website/public/images/launch_kit/shared_liquidity.svg b/packages/website/public/images/launch_kit/shared_liquidity.svg new file mode 100644 index 000000000..0647ecf0d --- /dev/null +++ b/packages/website/public/images/launch_kit/shared_liquidity.svg @@ -0,0 +1,28 @@ +<svg width="66" height="68" viewBox="0 0 66 68" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M55.4993 17.3314C58.2035 20.9755 60.0433 25.2995 60.7157 30M49.6681 11.5002C46.2838 8.98885 42.3133 7.22296 37.9993 6.44531M27.9993 6.44531C23.6853 7.22296 19.7147 8.98885 16.3305 11.5002M60.7157 38.0004C60.0343 42.7638 58.154 47.1404 55.3903 50.8148M49.8193 56.3872C46.4023 58.9585 42.3777 60.7658 37.9993 61.555M27.9993 61.555C23.6209 60.7658 19.5963 58.9585 16.1793 56.3872M10.6083 50.8148C7.84454 47.1404 5.96424 42.7638 5.28286 38.0004M5.25195 30.2224C5.91687 25.2922 7.86494 20.769 10.749 17" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M33 11C35.7614 11 38 8.76142 38 6C38 3.23858 35.7614 1 33 1C30.2386 1 28 3.23858 28 6C28 8.76142 30.2386 11 33 11Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M53 18C55.2091 18 57 16.2091 57 14C57 11.7909 55.2091 10 53 10C50.7909 10 49 11.7909 49 14C49 16.2091 50.7909 18 53 18Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M61 38C63.2091 38 65 36.2091 65 34C65 31.7909 63.2091 30 61 30C58.7909 30 57 31.7909 57 34C57 36.2091 58.7909 38 61 38Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M53 58C55.2091 58 57 56.2091 57 54C57 51.7909 55.2091 50 53 50C50.7909 50 49 51.7909 49 54C49 56.2091 50.7909 58 53 58Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M33 67C35.7614 67 38 64.7614 38 62C38 59.2386 35.7614 57 33 57C30.2386 57 28 59.2386 28 62C28 64.7614 30.2386 67 33 67Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M13 58C15.2091 58 17 56.2091 17 54C17 51.7909 15.2091 50 13 50C10.7909 50 9 51.7909 9 54C9 56.2091 10.7909 58 13 58Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M5 38C7.20914 38 9 36.2091 9 34C9 31.7909 7.20914 30 5 30C2.79086 30 1 31.7909 1 34C1 36.2091 2.79086 38 5 38Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M13 18C15.2091 18 17 16.2091 17 14C17 11.7909 15.2091 10 13 10C10.7909 10 9 11.7909 9 14C9 16.2091 10.7909 18 13 18Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M31.5815 35.4185C30.8062 34.6432 30.8062 33.3744 31.5815 32.5815C32.3568 31.8062 33.6255 31.8062 34.4185 32.5815C35.1938 33.3568 35.1938 34.6256 34.4185 35.4185C33.6255 36.1938 32.3568 36.1938 31.5815 35.4185Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M22.5815 35.4185C21.8062 34.6432 21.8062 33.3744 22.5815 32.5815C23.3568 31.8062 24.6256 31.8062 25.4185 32.5815C26.1938 33.3568 26.1938 34.6256 25.4185 35.4185C24.6256 36.1938 23.3744 36.1938 22.5815 35.4185Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M13.8722 36.1278C12.7093 34.9648 12.7093 33.0617 13.8722 31.8722C15.0352 30.7093 16.9383 30.7093 18.1278 31.8722C19.2907 33.0352 19.2907 34.9383 18.1278 36.1278C16.9383 37.2907 15.0352 37.2907 13.8722 36.1278Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M40.5815 35.4185C39.8062 34.6432 39.8062 33.3744 40.5815 32.5815C41.3568 31.8062 42.6255 31.8062 43.4185 32.5815C44.1938 33.3568 44.1938 34.6256 43.4185 35.4185C42.6255 36.1938 41.3568 36.1938 40.5815 35.4185Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M47.8722 36.1278C46.7093 34.9648 46.7093 33.0617 47.8722 31.8722C49.0352 30.7093 50.9383 30.7093 52.1278 31.8722C53.2907 33.0352 53.2907 34.9383 52.1278 36.1278C50.9383 37.2907 49.0352 37.2907 47.8722 36.1278Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M24 27.4998C24 26.1061 25.1283 25 26.5 25C27.8938 25 29 26.1282 29 27.4998C29 28.8936 27.8717 29.9997 26.5 29.9997C25.1283 30.0218 24 28.8936 24 27.4998Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M18 22C18 20.3274 19.354 19 21 19C22.6726 19 24 20.354 24 22C24 23.6726 22.646 25 21 25C19.3274 25 18 23.6726 18 22Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M37 40.4998C37 39.1061 38.1283 38 39.5 38C40.8938 38 42 39.1282 42 40.4998C42 41.8936 40.8717 42.9997 39.5 42.9997C38.1062 43.0218 37 41.8936 37 40.4998Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M42 46C42 44.3274 43.354 43 45 43C46.6726 43 48 44.354 48 46C48 47.6726 46.646 49 45 49C43.354 49 42 47.646 42 46Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M39.5 25C40.8938 25 42 26.1283 42 27.5C42 28.8938 40.8717 30 39.5 30C38.1062 30 37 28.8717 37 27.5C37 26.1283 38.1062 25 39.5 25Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M45.0002 19C46.6727 19 48 20.354 48 22C48 23.6726 46.6461 25 45.0002 25C43.3277 25 42.0004 23.646 42.0004 22C41.9738 20.3274 43.3277 19 45.0002 19Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M26.5 38C27.8938 38 29 39.1283 29 40.5C29 41.8938 27.8717 43 26.5 43C25.1062 43 24 41.8717 24 40.5C24 39.1062 25.1283 38 26.5 38Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M21 43C22.6726 43 24 44.354 24 46C24 47.6726 22.646 49 21 49C19.3274 49 18 47.646 18 46C18 44.354 19.3274 43 21 43Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M31.5928 23.5815C32.3655 22.8062 33.6301 22.8062 34.4204 23.5815C35.1932 24.3568 35.1932 25.6256 34.4204 26.4185C33.6476 27.1938 32.3831 27.1938 31.5928 26.4185C30.8024 25.6256 30.8024 24.3744 31.5928 23.5815Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M30.8891 14.8722C32.0483 13.7093 33.9451 13.7093 35.1306 14.8722C36.2898 16.0352 36.2898 17.9383 35.1306 19.1278C33.9715 20.2907 32.0746 20.2907 30.8891 19.1278C29.7036 17.9383 29.7036 16.0352 30.8891 14.8722Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M31.5928 41.5815C32.3655 40.8062 33.6301 40.8062 34.4204 41.5815C35.1932 42.3568 35.1932 43.6255 34.4204 44.4185C33.6476 45.1938 32.3831 45.1938 31.5928 44.4185C30.8024 43.6255 30.8024 42.3568 31.5928 41.5815Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +<path d="M30.8891 48.8722C32.0483 47.7093 33.9451 47.7093 35.1306 48.8722C36.2898 50.0352 36.2898 51.9383 35.1306 53.1278C33.9715 54.2907 32.0746 54.2907 30.8891 53.1278C29.7036 51.9383 29.7036 50.0352 30.8891 48.8722Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/> +</svg> diff --git a/packages/website/translations/chinese.json b/packages/website/translations/chinese.json index 95b9bda62..489b6b5ae 100644 --- a/packages/website/translations/chinese.json +++ b/packages/website/translations/chinese.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json index 465bd49b4..02c7f2e8a 100644 --- a/packages/website/translations/english.json +++ b/packages/website/translations/english.json @@ -99,6 +99,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "OUR_MISSION_AND_VALUES": "our mission & values", "GAMING_AND_COLLECTABLES": "gaming & collectables", "GAMING_AND_COLLECTABLES_DESCRIPTION": diff --git a/packages/website/translations/korean.json b/packages/website/translations/korean.json index 5485e5583..aa2a24c5b 100644 --- a/packages/website/translations/korean.json +++ b/packages/website/translations/korean.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/russian.json b/packages/website/translations/russian.json index a2e2a8cef..6d35452ca 100644 --- a/packages/website/translations/russian.json +++ b/packages/website/translations/russian.json @@ -95,6 +95,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/translations/spanish.json b/packages/website/translations/spanish.json index acbc59c3d..31b9e1a7a 100644 --- a/packages/website/translations/spanish.json +++ b/packages/website/translations/spanish.json @@ -96,6 +96,12 @@ "LIBRARIES_AND_TOOLS_DESCRIPTION": "A list of available tools maintained by the 0x core developers and wider community for building on top of 0x Protocol and Ethereum", "MORE": "more", + "LAUNCH_KIT": "0x launch kit", + "LAUNCH_KIT_PITCH": "Launch an exchange in under a minute.", + "GET_STARTED": "get started", + "GET_IN_TOUCH": "get in touch", + "EXPLORE_THE_DOCS": "explore the docs", + "LEARN_MORE": "learn more", "START_BUILDING_ON_0X": "Start building on 0x", "START_BUILDING_ON_0X_DESCRIPTION": "Follow one of our \"Getting started\" guides to learn more about building ontop of 0x." diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx index dfedcba55..e10005a0a 100644 --- a/packages/website/ts/components/footer.tsx +++ b/packages/website/ts/components/footer.tsx @@ -23,6 +23,7 @@ const languageToMenuTitle = { export interface FooterProps { translate: Translate; dispatcher: Dispatcher; + backgroundColor?: string; } interface FooterState { @@ -30,6 +31,9 @@ interface FooterState { } export class Footer extends React.Component<FooterProps, FooterState> { + public static defaultProps = { + backgroundColor: colors.darkerGrey, + }; constructor(props: FooterProps) { super(props); this.state = { @@ -112,7 +116,7 @@ export class Footer extends React.Component<FooterProps, FooterState> { return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />; }); return ( - <div className="relative pb4 pt2" style={{ backgroundColor: colors.darkerGrey }}> + <div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}> <div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}> <div className="col lg-col-4 md-col-4 col-12 left"> <div className="sm-mx-auto" style={{ width: 148 }}> diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index ece077563..7eab2a50f 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -1,3 +1,4 @@ +import { TextAlignProperty } from 'csstype'; import * as React from 'react'; type StringOrNum = string | number; @@ -26,6 +27,7 @@ export interface ContainerProps { height?: StringOrNum; minWidth?: StringOrNum; minHeight?: StringOrNum; + textAlign?: TextAlignProperty; isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; diff --git a/packages/website/ts/containers/launch_kit.ts b/packages/website/ts/containers/launch_kit.ts new file mode 100644 index 000000000..2557f38a5 --- /dev/null +++ b/packages/website/ts/containers/launch_kit.ts @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { connect } from 'react-redux'; +import { Dispatch } from 'redux'; +import { LaunchKit as LaunchKitComponent, LaunchKitProps } from 'ts/pages/launch_kit/launch_kit'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { State } from 'ts/redux/reducer'; +import { Translate } from 'ts/utils/translate'; + +interface ConnectedState { + translate: Translate; +} + +interface ConnectedDispatch { + dispatcher: Dispatcher; +} + +const mapStateToProps = (state: State, _ownProps: LaunchKitProps): ConnectedState => ({ + translate: state.translate, +}); + +const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({ + dispatcher: new Dispatcher(dispatch), +}); + +export const LaunchKit: React.ComponentClass<LaunchKitProps> = connect(mapStateToProps, mapDispatchToProps)( + LaunchKitComponent, +); diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx index 21157e427..96e7184f8 100644 --- a/packages/website/ts/index.tsx +++ b/packages/website/ts/index.tsx @@ -9,6 +9,7 @@ import { DocsHome } from 'ts/containers/docs_home'; import { FAQ } from 'ts/containers/faq'; import { Jobs } from 'ts/containers/jobs'; import { Landing } from 'ts/containers/landing'; +import { LaunchKit } from 'ts/containers/launch_kit'; import { NotFound } from 'ts/containers/not_found'; import { Wiki } from 'ts/containers/wiki'; import { createLazyComponent } from 'ts/lazy_component'; @@ -87,6 +88,7 @@ render( <Switch> <Route exact={true} path="/" component={Landing as any} /> <Redirect from="/otc" to={`${WebsitePaths.Portal}`} /> + <Route path={WebsitePaths.LaunchKit} component={LaunchKit as any} /> <Route path={WebsitePaths.Careers} component={Jobs as any} /> <Route path={WebsitePaths.Portal} component={LazyPortal} /> <Route path={WebsitePaths.FAQ} component={FAQ as any} /> diff --git a/packages/website/ts/pages/launch_kit/launch_kit.tsx b/packages/website/ts/pages/launch_kit/launch_kit.tsx new file mode 100644 index 000000000..7c3cc1c99 --- /dev/null +++ b/packages/website/ts/pages/launch_kit/launch_kit.tsx @@ -0,0 +1,297 @@ +import { colors, Link } from '@0x/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; +import DocumentTitle from 'react-document-title'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar/top_bar'; +import { Button } from 'ts/components/ui/button'; +import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/text'; +import { Dispatcher } from 'ts/redux/dispatcher'; +import { Deco, Key, ScreenWidths, WebsitePaths } from 'ts/types'; +import { constants } from 'ts/utils/constants'; +import { Translate } from 'ts/utils/translate'; +import { utils } from 'ts/utils/utils'; + +export interface LaunchKitProps { + location: Location; + translate: Translate; + dispatcher: Dispatcher; +} + +interface LaunchKitState { + screenWidth: ScreenWidths; +} + +const THROTTLE_TIMEOUT = 100; +const lighterBackgroundColor = '#222222'; +const darkerBackgroundColor = '#1B1B1B'; + +interface Benefit { + icon: string; + description: string; +} +const BENEFITS_1: Benefit[] = [ + { + icon: '/images/launch_kit/shared_liquidity.svg', + description: 'Tap into and share liquidity with other relayers', + }, + { + icon: '/images/launch_kit/fork.svg', + description: 'Fork and extend to support new modes of exchange', + }, + { + icon: '/images/launch_kit/enable_trading.svg', + description: 'Enable trading for any ERC-20 or ERC-721 asset', + }, +]; +const BENEFITS_2: Benefit[] = [ + { + icon: '/images/launch_kit/secondary_market.svg', + description: 'Quickly form a secondary market for your own token', + }, + { + icon: '/images/launch_kit/in_game_marketplace.svg', + description: 'Seamlessly create an in-game marketplace for digital items and collectables', + }, + { + icon: '/images/launch_kit/local_market.svg', + description: 'Easily build a 0x relayer for your local market', + }, +]; + +export class LaunchKit extends React.Component<LaunchKitProps, LaunchKitState> { + private readonly _throttledScreenWidthUpdate: () => void; + constructor(props: LaunchKitProps) { + super(props); + this.state = { + screenWidth: utils.getScreenWidth(), + }; + this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT); + } + public componentDidMount(): void { + window.addEventListener('resize', this._throttledScreenWidthUpdate); + window.scrollTo(0, 0); + } + public componentWillUnmount(): void { + window.removeEventListener('resize', this._throttledScreenWidthUpdate); + } + public render(): React.ReactNode { + return ( + <div id="launchKit" className="clearfix" style={{ color: colors.grey500 }}> + <DocumentTitle title="0x Launch Kit" /> + <TopBar + blockchainIsLoaded={false} + location={this.props.location} + isNightVersion={true} + style={{ backgroundColor: lighterBackgroundColor, position: 'relative' }} + translate={this.props.translate} + /> + {this._renderHero()} + {this._renderSection()} + {this._renderCallToAction()} + <Footer + backgroundColor={darkerBackgroundColor} + translate={this.props.translate} + dispatcher={this.props.dispatcher} + /> + </div> + ); + } + private _renderHero(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const smallButtonPadding = '12px 30px 12px 30px'; + const largeButtonPadding = '14px 60px 14px 60px'; + const left = 'col lg-col-6 md-col-6 col-12 lg-pl2 md-pl2 sm-pl0 sm-px3 sm-center'; + const flexClassName = isSmallScreen + ? 'flex items-center flex-column justify-center' + : 'flex items-center justify-center'; + return ( + <div className="clearfix pt4" style={{ backgroundColor: lighterBackgroundColor }}> + <div className="mx-auto max-width-4 clearfix"> + <div className={`${flexClassName} lg-pb4 md-pb4 sm-mb4`}> + <div className={left} style={{ color: colors.white }}> + <div + className="inline-block lg-align-middle md-align-middle sm-align-top" + style={{ + paddingLeft: isSmallScreen ? 0 : 12, + lineHeight: '36px', + }} + > + <Text + className="sm-pb2" + fontFamily="Roboto" + display="inline-block" + fontColor={colors.white} + fontWeight="bold" + lineHeight="1.3em" + letterSpacing="1px" + fontSize={isSmallScreen ? '38px' : '46px'} + > + {this.props.translate.get(Key.LaunchKit, Deco.CapWords)} + </Text> + <Container paddingTop="18px"> + <Text fontColor={colors.linkSectionGrey} fontSize="18px"> + {this.props.translate.get(Key.LaunchKitPitch, Deco.Cap)} + </Text> + </Container> + <Container + paddingTop="54px" + className={`flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} + > + <Container paddingRight="20px"> + <Link to={WebsitePaths.Docs}> + <Button + padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} + borderRadius="4px" + borderColor={colors.white} + > + <Text fontSize="16px" fontWeight="bold"> + {this.props.translate.get(Key.GetStarted, Deco.Cap)} + </Text> + </Button> + </Link> + </Container> + <div> + <Link to={WebsitePaths.Portal}> + <Button + backgroundColor={lighterBackgroundColor} + borderColor={colors.white} + fontColor={colors.white} + padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} + borderRadius="4px" + > + <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}> + {this.props.translate.get(Key.LearnMore, Deco.Cap)} + </Text> + </Button> + </Link> + </div> + </Container> + </div> + </div> + <Container + marginTop={isSmallScreen ? '60px' : '30px'} + marginBottom="30px" + marginLeft="15px" + marginRight="15px" + > + <Image + src="/images/launch_kit/0x_cupboard.svg" + maxWidth={isSmallScreen ? '75%' : '100%'} + height="auto" + /> + </Container> + </div> + </div>; + {this._renderBenefits(BENEFITS_1)} + </div> + ); + } + private _renderSection(): React.ReactNode { + return ( + <div className="clearfix pb4" style={{ backgroundColor: darkerBackgroundColor }}> + <Container + className="mx-auto" + textAlign="center" + paddingTop="89px" + paddingBottom="89px" + maxWidth="421px" + > + <Text fontSize="26px" lineHeight="37px" fontWeight="medium" fontColor={colors.white}> + Perfect for developers who need simple exchange functionality + </Text> + </Container> + {this._renderBenefits(BENEFITS_2)} + </div> + ); + } + private _renderCallToAction(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const smallButtonPadding = '8px 14px 8px 14px'; + const largeButtonPadding = '8px 14px 8px 14px'; + return ( + <Container + className="clearfix" + backgroundColor={lighterBackgroundColor} + paddingTop="90px" + paddingBottom="90px" + > + <Container className="clearfix mx-auto" maxWidth="850px"> + <Container className="lg-left md-left sm-mx-auto sm-pb3" width="348px"> + <Text fontColor={colors.white} fontSize="18px"> + View our comprehensive documentation to start building today. + </Text> + </Container> + <Container + className={`lg-right md-right flex clearfix sm-mx-auto ${ + isSmallScreen ? 'justify-center' : '' + }`} + paddingTop="5px" + > + <Container paddingRight="20px"> + <Link to={WebsitePaths.Docs}> + <Button + padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} + borderRadius="4px" + backgroundColor={lighterBackgroundColor} + borderColor={colors.white} + > + <Text fontSize="16px" fontWeight="bold" fontColor={colors.white}> + {this.props.translate.get(Key.ExploreTheDocs, Deco.Cap)} + </Text> + </Button> + </Link> + </Container> + <div> + <Link to={constants.URL_ZEROEX_CHAT}> + <Button + padding={isSmallScreen ? smallButtonPadding : largeButtonPadding} + borderRadius="4px" + > + <Text fontSize="16px" fontWeight="bold"> + {this.props.translate.get(Key.GetInTouch, Deco.Cap)} + </Text> + </Button> + </Link> + </div> + </Container> + </Container> + </Container> + ); + } + private _renderBenefits(benefits: Benefit[]): React.ReactNode { + return ( + <Container className="lg-flex md-flex justify-between mx-auto pb4" maxWidth="890px"> + {_.map(benefits, benefit => { + return ( + <Container className="mx-auto sm-pb4" width="240px"> + <Container textAlign="center"> + <img src={benefit.icon} /> + </Container> + <Container paddingTop="26px"> + <Text + fontSize="18px" + lineHeight="28px" + textAlign="center" + fontColor={colors.linkSectionGrey} + > + {benefit.description} + </Text> + </Container> + </Container> + ); + })} + </Container> + ); + } + private _updateScreenWidth(): void { + const newScreenWidth = utils.getScreenWidth(); + if (newScreenWidth !== this.state.screenWidth) { + this.setState({ + screenWidth: newScreenWidth, + }); + } + } +} diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts index ce4b50a58..7065097d9 100644 --- a/packages/website/ts/types.ts +++ b/packages/website/ts/types.ts @@ -352,6 +352,7 @@ export enum WebsitePaths { Home = '/', FAQ = '/faq', About = '/about', + LaunchKit = '/launch-kit', Whitepaper = '/pdfs/0x_white_paper.pdf', SmartContracts = '/docs/contracts', Connect = '/docs/connect', @@ -479,6 +480,12 @@ export enum Key { More = 'MORE', StartBuildOn0x = 'START_BUILDING_ON_0X', StartBuildOn0xDescription = 'START_BUILDING_ON_0X_DESCRIPTION', + LaunchKit = 'LAUNCH_KIT', + LaunchKitPitch = 'LAUNCH_KIT_PITCH', + ExploreTheDocs = 'EXPLORE_THE_DOCS', + GetInTouch = 'GET_IN_TOUCH', + LearnMore = 'LEARN_MORE', + GetStarted = 'GET_STARTED', } export enum SmartContractDocSections { |
