Add proper styling, Add tutorial box with placeholders

frontend/src/assets/wave.svg

@@ -1,71 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="1920"
-   height="1090"
-   viewBox="0 0 507.99999 288.39584"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
-   sodipodi:docname="wave.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.49497475"
-     inkscape:cx="780.33701"
-     inkscape:cy="571.26377"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     units="px"
-     inkscape:snap-intersection-paths="true"
-     inkscape:window-width="1900"
-     inkscape:window-height="1024"
-     inkscape:window-x="10"
-     inkscape:window-y="1090"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-8.6041499)">
-    <path
-       style="fill:#a6c1ff;stroke:none;stroke-width:0.27366662px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
-       d="m 0.35196777,296.86315 c 0,0 71.49211123,-90.18365 135.77937223,-91.22795 64.28726,-1.0443 88.83997,60.64185 153.57412,59.31918 64.73415,-1.32267 125.57465,-67.0285 218.73339,-111.59538 l -0.8453,143.50415 z"
-       id="path4518"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="czzccc" />
-    <path
-       style="fill:#3366ff;fill-opacity:1;stroke:none;stroke-width:2.02030516"
-       d="M 5.9546961,1085.1863 C 10.843034,1076.4967 61.390179,1021.1245 96.463738,986.03746 161.79046,920.68568 215.2437,875.762 274.25059,836.6201 c 67.72363,-44.92409 116.86814,-68.16513 173.32676,-81.9684 61.52005,-15.04069 125.02765,-11.56636 188.53509,10.31426 48.08417,16.56675 86.87429,37.9577 166.44793,91.7883 98.88716,66.89598 150.44254,92.31388 215.16253,106.07974 25.9207,5.51329 82.0811,7.58077 112.2187,4.1312 58.5531,-6.70204 120.3443,-26.95481 192.5969,-63.12577 59.2149,-29.64408 109.8287,-60.14058 228.5449,-137.70585 120.2947,-78.59665 194.0735,-124.28421 259.6092,-160.7631 34.9687,-19.46452 109.1385,-57.49953 109.9384,-56.37755 0.2564,0.35968 -0.206,101.11364 -1.0277,223.89768 -0.8216,122.78404 -1.5706,243.92659 -1.6642,269.20569 l -0.1703,45.9619 H 961.05393 c -826.35379,0 -956.4947093,-0.3913 -955.0992339,-2.8719 z"
-       id="path4520"
-       inkscape:connector-curvature="0"
-       transform="matrix(0.26458333,0,0,0.26458333,0,8.6041499)" />
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396.94 109.802"><path d="M.138 109.68c-2.277 0 24.06-18.611 42.516-31.79C66.92 61.467 95.677 53.776 115.77 53.776c19.428 0 35.073 2.42 58.804 12.95 21.102 10.134 30.514 21.029 55.662 18.228 11.14-1.36 22.894-5.468 36.639-12.806 11.264-6.014 20.892-12.2 43.476-27.937 22.884-15.945 36.918-25.213 49.385-32.614C366.388 7.647 385.59.564 396.916 0c0 30.572.05 74.015.004 109.691-61.154 0-100.93.111-219.715.111-86.686 0-157.776-.123-177.067-.123z" fill="#36f"/></svg>