Add new first-time tutorial (#9531)

* Prepare to load onboarding as a full page

* Update the first-time introduction

* Improve responsive design

* Replace speech bubble with logo

* Increase text size and reword first paragraph

app/javascript/images/screen_federation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="806.09998" width="1197.7164" viewBox="0 0 1197.7164 806.09999" id="Layer_1"><path id="path6078" d="M482.4164 557.4c-42.3-31.3-89.9-55.7-141.2-72.5-53.2-17.4-109.1-26.2-166.3-26.2-59.7 0-117.9 9.6-173.1 28.5v315.9h645.6c-21.6-95.7-80.1-182.9-165-245.7z" class="st33" fill="#fff"/><path stroke-miterlimit="10" id="path6082" d="M515.7164 589.8c-1.1 3.3-6.4 5.1-7.4 4.2l-.2-7.1.2-3.6c-86.1-74.6-203.7-120.6-333.4-120.6-61 0-119.4 10.2-173.1 28.8v313.6h641.9c-18.4-83.2-63.7-157.2-128-215.3" class="st80" fill="#587faa" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6084" d="M351.5164 565.1l9.3 4.8" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6086" d="M336.5164 558c2.2 1 4.4 2 6.5 3" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6088" d="M321.5164 551.5c2.6 1 5.1 2.1 7.7 3.2" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6090" d="M304.8164 545.1c3.4 1.2 6.7 2.5 10 3.7" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><g id="g6092" transform="translate(-1343.3836 -75.800003)"><path stroke-miterlimit="10" id="path6094" d="M1890.4 836.8c1.9 3.9 3.8 7.8 5.5 11.7" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6100" d="M1880.9 818.7c1.5 2.7 2.9 5.4 4.4 8.1" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6102" d="M1871.4 802.4c1.8 2.9 3.5 5.8 5.2 8.8" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6104" d="M1860.3 785.1c2 2.9 4 5.9 5.9 8.9" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6106" d="M1848.4 768.6c2.2 2.9 4.3 5.8 6.4 8.8" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path stroke-miterlimit="10" id="path6108" d="M1834.4 751c2.6 3.1 5.2 6.3 7.7 9.5" class="st81" fill="none" stroke="#2d3f68" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><path id="path6110" d="M156.6164 523.5c-54.6 0-106.7 10.1-154.8 28.4V805h559.5c-59.5-164.1-218.2-281.5-404.7-281.5z" class="st82" fill="#2d3f68"/><g id="g6112" transform="translate(-1343.3836 -75.800003)"><path id="path6114" d="M2065.2 128.3c1.4 69-36.9 80.4-35.7 141.1 1.2 60.6 39.9 70.5 41.3 139.5 1.4 69-36.9 80.4-35.7 141.1 1.2 60.6 39.9 70.5 41.3 139.5 1.4 69-36.9 80.4-35.7 141.1.4 20.5 5.1 35.2 11.2 48.3H2541v-803h-487.3c6.2 13.6 11 29.7 11.5 52.4z"/></g><g id="g6116" transform="translate(-1343.3836 -75.800003)"><circle stroke-miterlimit="10" id="circle6118" r="33.799999" cy="645.40002" cx="2236.6001" class="st83" fill="#ebb548" stroke="#663f09" stroke-width="3.30660009" stroke-linecap="round" stroke-linejoin="round"/><g id="g6120"><path stroke-miterlimit="10" id="path6122" d="M2243.3 641.5c-2.4-5.6-8-6.2-15.8-3.2-5.7 2.2-18.2 7.3-24.5 9.9.7 8.2 4.3 15.5 9.7 21 6.7-2.6 21.3-8.2 32-12.6 14.3-5.9 12.9-9.1 10.2-14.1-2.7-5-11.6-1-11.6-1z" class="st84" fill="#ad6a3b" stroke="#663f09" stroke-width="1.65330005"/><path stroke-miterlimit="10" id="path6124" d="M2243.4 612.3c-12.6 4.4-13.1 7.3-11.2 11.6 2.1 4.6 9.4 2.6 15.4.1 2.6-1 6.8-2.8 10.7-4.5-4.2-3.5-9.2-6.1-14.9-7.2z" class="st84" fill="#ad6a3b" stroke="#663f09" stroke-width="1.65330005"/></g><g id="g6126"><circle id="circle6128" r="3" cy="627.70001" cx="2218.8" class="st33" fill="#fff"/></g></g><g id="g6130" transform="translate(-1343.3836 -75.800003)"><circle stroke-miterlimit="10" id="circle6132" r="33.799999" cy="485.79999" cx="2402.5" class="st83" fill="#ebb548" stroke="#663f09" stroke-width="3.30660009" stroke-linecap="round" stroke-linejoin="round"/><g id="g6134"><circle id="circle6136" r="3" cy="468.20001" cx="2384.8" class="st33" fill="#fff"/></g></g><path id="path6138" d="M292.3164 506.3c-2.7 0-6.7-.4-9.8-3.5-2.9-3-4.2-7.6-4-14 .1-2.2.2-4.1.2-5.9-2.9-.4-5.8-.9-8.6-1.7-17.4-4.7-31.5-16.3-39.6-32.8-1-2.1-2-4.2-2.8-6.4-.6 0-1.2 0-1.7.1-.9 2.2-1.8 4.3-2.8 6.4-8.1 16.5-22.1 28.1-39.6 32.8-2.8.8-5.7 1.3-8.6 1.7.1 1.7.1 3.7.2 5.9.3 6.4-1 11-4 14-3.1 3.2-7.1 3.5-9.8 3.5H149.6164c-13.1 0-13.1-9.7-13.1-14.9v-14.7c-2-.9-3.9-1.9-5.7-3-1.6 2.7-4.5 5.6-9.3 6.9-4.8 1.2-8.9 1.8-12.5 1.8-4.5 0-8.3-1-11.2-2.9-3.3-2.2-5.4-5.7-6-10.1-1.5-10.5-.6-17.6 2.6-21.8 1.8-2.3 4.2-3.6 7.1-3.9l5.5-.5c-9.9-1.8-15.4-7.7-16.4-17.5-.8-8.1 6.6-16.9 11-18.6 1.1-.5 2.2-.7 3.1-.7 1.8 0 3.2.8 4.2 2.2 1 1.4 1.9 4.3-2.2 8.4-.7.9-3.3 6.5-Line truncated

app/javascript/images/screen_hello.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="803.09998" width="1197.8285" viewBox="0 0 1197.8284 803.09996" id="Layer_1"><path id="path6218" d="M419.21425 718.72051s1 40 2 51 3 16 20 17 41-2 50-4 16-6 14-29-4-51-4-51" class="st6" fill="#e09c5c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6220" d="M504.21425 771.52051l-.1-.6c-1.5-5.7-4.5-7-8-6.3-4.8 1-6.1 7.7-6.9 16.7 0 .4-.1.8-.1 1.3l.7.3c.4-.1.9-.2 1.3-.3 5.9-1.2 10.9-3.4 13.1-11.1z" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6222" d="M510.81425 399.72051c46-5 79-28 84-32 0 0-14-12-3-20s18 2 18 2 23.5-29.9 43.5-13.9c20 16 27.5 32.9 20.5 48.9s-52 72-147 85" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6224" d="M239.81425 697.72051c-16 15-41 23-54 5s-4-26-7-30-21 8-13 31 54 48 97 14" class="st4" fill="#e09c5c"/><path id="path6226" d="M500.21425 361.82051s34.6 70.9 43.1 175.4c7.2 89 15 139-46 168s-142 24-180 25-78-4-88-47 .5-76.5.5-76.5 1.4-71.2-2.1-82.7-9.2-28.7-9.2-28.7-5.7 40.1-35.5 53.6c-29.8 13.6-56.1.8-53.9-36.5 0 0-25.5-42.6-37.600004-79.9-12.1-37.3 19.800004-73.9 78.300004-58.8 2-71 63.6-130.7 149.1-137.7 85.4-7.1 106.3 38.7 151.9 40.7 44 2 75-12 98-35s70-53 107-29c0 0 18-6 20 10s-7 16-12 19c0 0 7 22-7 25s-12-18-12-18-23-3-42 27-47.2 70.2-122.6 86.1c-16.1 1.4-29.5-3.9-29.5-3.9" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6228" d="M259.81425 704.72051c0 23-4 53-5 64s3 22.4 21 23c28 1 82 5 87-12 6.3-21.6 5-58 0-70" class="st6" fill="#e09c5c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6230" d="M295.01425 792.42051c.8-9.7 1.8-15.7 6.8-16.7s8.8 3.1 8.9 17.1" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6232" d="M311.01425 792.42051c.8-9.7 1.8-15.7 6.8-16.7s8.8 3.1 8.9 17.1" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6234" d="M326.81425 792.72051c.8-9.7 2-17 7-18s8.9 2.1 9 16" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6236" d="M332.61425 746.52051h-15.4c-7.8 0-14.2-6.4-14.2-14.2 0-7.8 6.4-14.2 14.2-14.2h15.4c7.8 0 14.2 6.4 14.2 14.2 0 7.8-6.4 14.2-14.2 14.2z" fill="#fbc16c"/><path id="path6238" d="M127.01425 433.92051c7.3 9.1 20.6 38.2 19.8 61-.9 22.9 23.8 32.8 36.8 13 13-19.8 16.6-58.4 7.6-77.2-9-18.9-13.9-26-13.9-26s-4.9 9-17.5 10.8c-12.6 1.8-13-3.1-17.3-9.8 0 0 .6 7.4-10.6 11.5-11.2 4.2-14.8-5-14.8-5s2.7 12.7 9.9 21.7z" class="st4" fill="#e09c5c"/><path id="path6240" d="M309.31425 728.32051c-21.3 0-36.8-2.7-48.9-8.4-15.4-7.3-25-19.4-29.1-37.2-9.8-42 .4-75.1.5-75.4l.1-.3v-.3s.1-3.7.1-9.7c13.9.5 33.3 2.8 50.3 10.8 16.8 7.9 27.4 19.6 31.6 34.6 9.3 33.4 33.5 49.6 74.1 49.6 12.6 0 27-1.5 43.9-4.6 8.6-1.6 17.1-2.8 25.3-4 38.7-5.6 72.8-10.5 87.9-47.9-3.3 28.9-14.8 51.7-48.6 67.8-51.3 24.4-116.2 24.5-159.1 24.6-7.7 0-14.3 0-20.1.2-2.9.1-5.5.2-8 .2z" class="st4" fill="#e09c5c"/><path id="path6242" d="M417.81425 390.12051c1.3-8.5 2-14.7-7.8-12.6-9.8 2.1-69.8 18-80.5 20.3-10.8 2.3-8.7 12.1 1.8 18s39.7 23.2 51.7 21.6c12-1.6 22.7-3.8 27.6-19.2 4.9-15.3 7.2-28.1 7.2-28.1z" fill="#2e2314" stroke="#2b2011" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><g transform="translate(-77.185754 15.820514)" id="g6244"><path id="path6246" d="M458.6 419.7c-11.4 0-36.3-14.2-46.9-20.2l-2.2-1.3c-5.1-2.9-8.4-7.1-7.9-10.2.3-2 2.3-3.4 5.5-4.1 5.5-1.2 24-5.9 41.8-10.5l3.8-1c15.9 4.2 28.4 14.9 33.4 28.7l-.2.7c-4.5 14-13.6 16.2-25.9 17.8-.5.1-.9.1-1.4.1z" fill="#ad4949"/></g><g transform="translate(-77.185754 15.820514)" id="g6248"><path id="path6250" d="M404 397c-3.6-2.6-5.6-6.3-5-9.5.5-2.8 2.7-4.7 6.3-5.4 5.8-1.2 25.1-6.2 43.7-11 8.9-2.3 17.5-4.5 24.3-6.2l3.4 15L404 397z" class="st33" fill="#fff"/><path id="path6252" d="M471.9 367.4l2.5 11.1-70 16.4c-2.5-2.1-3.9-4.7-3.5-6.9.5-2.6 3.2-3.5 4.8-3.9 5.8-1.2 25.1-6.2 43.8-11 8.2-2.1 16-4.1 22.4-5.7m3-4.9c-20.4 5.1-61.2 15.8-70 17.7-10.3 2.2-10.6 13-1.3 19l75.6-17.8-4.3-18.9z" class="st42" fill="#7d7d65"/></g><path id="path6254" d="M215.61425 319.92051c-20.7 3.4-36.9-.3-43.7-27.4-6.8-27.1 17-58.9 51.2-71.3 34.2-12.4 68-2.3 68-2.3s9.5-22.5 12.8-35.5c3.3-13 13.3-14.1 23.6 5.2 0 0 28.8-4.1 32.3 26.8 3.6 30.9-20.7 46.4-20.7 46.4" class="st2" fill="#fbc16c" stroke="#946f3a" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6256" d="M327.61425 188.52051c4.3 10.3 2.9 22.9 2.7 27" class="st2" fill="#fbc16cLine truncated

app/javascript/images/screen_interactions.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="803" width="1195.8" viewBox="0 0 1195.8 802.99999" id="Layer_1"><path id="path6294" d="M132.1 466.49998c-6 5.8-11.8 5-18.2-.6-2.5-2.2-4.6.9-.6 4.9 4 4 13.5 8.3 22 .8" class="st99" fill="#e09c5c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6296" d="M295.2 263.49998h-59.8c-15 0-27.3 12.3-27.3 27.3v12.9c0 6.3 2.2 12.1 5.8 16.8-6.7 13.7-21.4 16.9-21.4 16.9 18.9 2.3 24.6-3.5 30.7-9.2 3.7 1.8 7.8 2.9 12.2 2.9h59.8c15 0 27.3-12.3 27.3-27.3v-12.9c.1-15.1-12.2-27.4-27.3-27.4z" fill="#fff" stroke="#668794" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6298" d="M176.3 472.49998c-.1 11.9-2.4 21.1 7.9 21.2 10.3.1 13.2-2.5 13.1-10.1-.1-7.6-.6-21-.6-21" class="st99" fill="#e09c5c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6300" d="M161.8 365.79998c-20.2 0-35.1 7.6-35.1 36v54.3c0 8 4.4 21.8 21.8 21.8h24.1c8.5 0 16.3-2.8 22.5-9.4 6.2-6.6 9.2-13.3 9.2-25.5v-46.6s20.4-.5 29.4-13.3c8.9-12.8 6.9-28.2 5.7-32.6 0 0 5.1-.5 4-4.4-1.1-3.9-7.3-3.3-10.1-1.1 0 0-1.6-1.8-7-1.7-5.4.1-3.7 6.2.7 6.7 0 0 2.4 13.8-4.6 18.7-7 4.9-21.4 6.6-29.8 2.7-8.5-3.7-11.3-5.6-30.8-5.6z" class="st101" fill="#fbc16c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6302" d="M148.5 476.79998c-20.1 0-20.6-18.5-20.6-20.6v-23.1c13 .1 18.8 1.5 18.8 12.4 0 13.2 2.2 19.8 13.9 19.8H192c1.7 0 3.4-.1 5-.7-.8 1-1.7 2.1-2.7 3.2-5.6 6-12.9 9-21.6 9h-24.2z" class="st4" fill="#e09c5c"/><path id="path6304" d="M154.8 372.09998c-9.6-2.9-14.7-4.9-11.8-13.3 2.9-8.4 17-6.6 24.7-2.7 0 0 4-2.4 6.3-3.3 2.3-.9 6.6-1.3 6.7 1.7 0 0 5.4.6 4.4 4.9 0 0 6.4 3.7-8.1 10.7" class="st101" fill="#fbc16c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6306" d="M138.5 381.49998c0-6.4-3.8-10.3-11.8-10.3s-14.8 7.5-13 18.7c1.8 11.2-4.3 19.9 2.8 24.9s14.4 1.9 16.7-1.9c0 0 7.6 2 7-9.9" class="st101" fill="#fbc16c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6308" d="M167.3 395.79998c-5.7 0-8.8 4.4-7.5 10.2 1.3 5.7 5 10 11.4 10.2 6.4.1 12.5-2.1 14.4-11.4 1.9-9.3-1.6-9.4-4.4-9.4-2.8 0-13.9.4-13.9.4z" fill="#544024" stroke="#3b3024" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6310" d="M176.8 408.89998c0-6.7-5.4-12.2-12.2-12.2-.6 0-1.1.1-1.7.1-2.8 1.6-4.1 5-3.2 9.1 1.3 5.7 5 10 11.4 10.2 1.1 0 2.2 0 3.3-.2 1.6-2 2.4-4.4 2.4-7z" fill="#693131" stroke="#381916" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6312" d="M181.1 402.49998v-7.2c-3 0-13.8.4-13.8.4-4.5 0-7.4 2.8-7.8 6.8h21.6z" class="st104" fill="#fff" stroke="#7d7d65" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6314" d="M146.2 410.69998c6 5.8 14.3 5.8 18.1 2.6 3.8-3.2 5.8-11.4 2.7-12.2-3.1-.8-2.4 4.7-5.2 6.3-2.8 1.6-6 1.2-9-.7-2.9-1.9-5.9-3.2-7.4-1.4-1.3 2-.6 4 .8 5.4z" class="st104" fill="#fff" stroke="#7d7d65" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6316" d="M349.4 440.69998c-5.7 6.2-14 6.6-18 3.6-4-3-6.4-11-3.4-12 3-1 2.7 4.5 5.5 6s6.1.9 8.9-1.1c2.8-2 5.7-3.6 7.3-1.7 1.6 1.9 1.1 3.8-.3 5.2z" fill="none" stroke="#000" stroke-width=".57069999" stroke-miterlimit="10"/><path id="path6318" d="M134.3 415.29998l-20.5.1s-.7-3.4-3.8-2.9c-3.1.5-3.8 2.3-3.9 3.4 0 0-6.8.4-6.9 7.2-.1 6.8 4.9 9.5 12.1 9.1 7.2-.4 24.4 0 24.4 0" class="st101" fill="#fbc16c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6320" d="M135.4 472.49998c-.1 11.9-2.4 21.1 7.9 21.2 10.3.1 13.2-2.5 13.1-10.1-.1-7.6-.2-10.4-.2-10.4" class="st99" fill="#e09c5c" stroke="#946f3a" stroke-width="2.28270006" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6322" d="M152.7 399.79998c-.9 0-1.6-.7-1.6-1.6v-10.9c0-.9.7-1.6 1.6-1.6.9 0 1.6.7 1.6 1.6v10.9c0 .9-.7 1.6-1.6 1.6z" fill="#402f19"/><path id="path6324" d="M524.8 296.99998c-6.9-8.5-22.1-16.7-42.9-6.4-20.8 10.3-26.2 38-14.9 56.5 11.3 18.5 14.4 22.6 14.4 22.6v46.7c0 9.8 2.8 13.3 10 13.3s11.3-2.8 11.3-9.8v-10.5h29.5v11c0 4.3 2.6 9 9.5 9s9.8-2.3 9.8-11.8v-62.6s.8-27.4-26.7-58z" class="st106" fill="#fbc16c" stroke="#946f3a" stroke-width="3.56489992" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path id="path6326" d="M491.4 427.89998c-6.2 0-8.2-2.8-8.2-11.6v-47.3l-.4-.5s-2-2.7-8.5-13.1c.1-1.4.2-2.8.1-4.1l13 17.2v22c0 5.2 1.1 11.2 9.9 11.2h52.3v15.8c0 9-2.6 10-8 10-7.2 0-7.7-5.5-7.7-7.2v-12.7H501v12.3c0 5.5-3 8-9.6 8z" classLine truncated