feat(app): add hand-drawn recipe

src/assets/ruler.svg

@@ -0,0 +1,105 @@
+<svg width="148" height="723" viewBox="0 0 148 723" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_133_2520)">
+<rect x="1" y="1" width="144" height="719" rx="8" fill="#F8C666"/>
+<rect x="0.5" y="0.5" width="145" height="720" rx="8.5" stroke="#3C402B"/>
+</g>
+<path d="M1 9H56.5C56.7761 9 57 9.22386 57 9.5C57 9.77614 56.7761 10 56.5 10H1V9Z" fill="#3C402B"/>
+<path d="M1 18H56.5C56.7761 18 57 18.2239 57 18.5C57 18.7761 56.7761 19 56.5 19H1V18Z" fill="#3C402B"/>
+<path d="M1 27H56.5C56.7761 27 57 27.2239 57 27.5C57 27.7761 56.7761 28 56.5 28H1V27Z" fill="#3C402B"/>
+<path d="M1 36H56.5C56.7761 36 57 36.2239 57 36.5C57 36.7761 56.7761 37 56.5 37H1V36Z" fill="#3C402B"/>
+<path d="M1 45H56.5C56.7761 45 57 45.2239 57 45.5C57 45.7761 56.7761 46 56.5 46H1V45Z" fill="#3C402B"/>
+<path d="M1 54H56.5C56.7761 54 57 54.2239 57 54.5C57 54.7761 56.7761 55 56.5 55H1V54Z" fill="#3C402B"/>
+<path d="M1 63H56.5C56.7761 63 57 63.2239 57 63.5C57 63.7761 56.7761 64 56.5 64H1V63Z" fill="#3C402B"/>
+<path d="M1 72H88.5C88.7761 72 89 72.2239 89 72.5C89 72.7761 88.7761 73 88.5 73H1V72Z" fill="#3C402B"/>
+<path d="M1 81H56.5C56.7761 81 57 81.2239 57 81.5C57 81.7761 56.7761 82 56.5 82H1V81Z" fill="#3C402B"/>
+<path d="M1 90H56.5C56.7761 90 57 90.2239 57 90.5C57 90.7761 56.7761 91 56.5 91H1V90Z" fill="#3C402B"/>
+<path d="M1 99H56.5C56.7761 99 57 99.2239 57 99.5C57 99.7761 56.7761 100 56.5 100H1V99Z" fill="#3C402B"/>
+<path d="M1 108H56.5C56.7761 108 57 108.224 57 108.5C57 108.776 56.7761 109 56.5 109H1V108Z" fill="#3C402B"/>
+<path d="M1 117H56.5C56.7761 117 57 117.224 57 117.5C57 117.776 56.7761 118 56.5 118H1V117Z" fill="#3C402B"/>
+<path d="M1 126H56.5C56.7761 126 57 126.224 57 126.5C57 126.776 56.7761 127 56.5 127H1V126Z" fill="#3C402B"/>
+<path d="M1 135H56.5C56.7761 135 57 135.224 57 135.5C57 135.776 56.7761 136 56.5 136H1V135Z" fill="#3C402B"/>
+<path d="M1 144H88.5C88.7761 144 89 144.224 89 144.5C89 144.776 88.7761 145 88.5 145H1V144Z" fill="#3C402B"/>
+<path d="M1 153H56.5C56.7761 153 57 153.224 57 153.5C57 153.776 56.7761 154 56.5 154H1V153Z" fill="#3C402B"/>
+<path d="M1 162H56.5C56.7761 162 57 162.224 57 162.5C57 162.776 56.7761 163 56.5 163H1V162Z" fill="#3C402B"/>
+<path d="M1 171H56.5C56.7761 171 57 171.224 57 171.5C57 171.776 56.7761 172 56.5 172H1V171Z" fill="#3C402B"/>
+<path d="M1 180H56.5C56.7761 180 57 180.224 57 180.5C57 180.776 56.7761 181 56.5 181H1V180Z" fill="#3C402B"/>
+<path d="M1 189H56.5C56.7761 189 57 189.224 57 189.5C57 189.776 56.7761 190 56.5 190H1V189Z" fill="#3C402B"/>
+<path d="M1 198H56.5C56.7761 198 57 198.224 57 198.5C57 198.776 56.7761 199 56.5 199H1V198Z" fill="#3C402B"/>
+<path d="M1 207H56.5C56.7761 207 57 207.224 57 207.5C57 207.776 56.7761 208 56.5 208H1V207Z" fill="#3C402B"/>
+<path d="M1 216H88.5C88.7761 216 89 216.224 89 216.5C89 216.776 88.7761 217 88.5 217H1V216Z" fill="#3C402B"/>
+<path d="M1 225H56.5C56.7761 225 57 225.224 57 225.5C57 225.776 56.7761 226 56.5 226H1V225Z" fill="#3C402B"/>
+<path d="M1 234H56.5C56.7761 234 57 234.224 57 234.5C57 234.776 56.7761 235 56.5 235H1V234Z" fill="#3C402B"/>
+<path d="M1 243H56.5C56.7761 243 57 243.224 57 243.5C57 243.776 56.7761 244 56.5 244H1V243Z" fill="#3C402B"/>
+<path d="M1 252H56.5C56.7761 252 57 252.224 57 252.5C57 252.776 56.7761 253 56.5 253H1V252Z" fill="#3C402B"/>
+<path d="M1 261H56.5C56.7761 261 57 261.224 57 261.5C57 261.776 56.7761 262 56.5 262H1V261Z" fill="#3C402B"/>
+<path d="M1 270H56.5C56.7761 270 57 270.224 57 270.5C57 270.776 56.7761 271 56.5 271H1V270Z" fill="#3C402B"/>
+<path d="M1 279H56.5C56.7761 279 57 279.224 57 279.5C57 279.776 56.7761 280 56.5 280H1V279Z" fill="#3C402B"/>
+<path d="M1 288H88.5C88.7761 288 89 288.224 89 288.5C89 288.776 88.7761 289 88.5 289H1V288Z" fill="#3C402B"/>
+<path d="M1 297H56.5C56.7761 297 57 297.224 57 297.5C57 297.776 56.7761 298 56.5 298H1V297Z" fill="#3C402B"/>
+<path d="M1 306H56.5C56.7761 306 57 306.224 57 306.5C57 306.776 56.7761 307 56.5 307H1V306Z" fill="#3C402B"/>
+<path d="M1 315H56.5C56.7761 315 57 315.224 57 315.5C57 315.776 56.7761 316 56.5 316H1V315Z" fill="#3C402B"/>
+<path d="M1 324H56.5C56.7761 324 57 324.224 57 324.5C57 324.776 56.7761 325 56.5 325H1V324Z" fill="#3C402B"/>
+<path d="M1 333H56.5C56.7761 333 57 333.224 57 333.5C57 333.776 56.7761 334 56.5 334H1V333Z" fill="#3C402B"/>
+<path d="M1 342H56.5C56.7761 342 57 342.224 57 342.5C57 342.776 56.7761 343 56.5 343H1V342Z" fill="#3C402B"/>
+<path d="M1 351H56.5C56.7761 351 57 351.224 57 351.5C57 351.776 56.7761 352 56.5 352H1V351Z" fill="#3C402B"/>
+<path d="M1 360H88.5C88.7761 360 89 360.224 89 360.5C89 360.776 88.7761 361 88.5 361H1V360Z" fill="#3C402B"/>
+<path d="M1 369H56.5C56.7761 369 57 369.224 57 369.5C57 369.776 56.7761 370 56.5 370H1V369Z" fill="#3C402B"/>
+<path d="M1 378H56.5C56.7761 378 57 378.224 57 378.5C57 378.776 56.7761 379 56.5 379H1V378Z" fill="#3C402B"/>
+<path d="M1 387H56.5C56.7761 387 57 387.224 57 387.5C57 387.776 56.7761 388 56.5 388H1V387Z" fill="#3C402B"/>
+<path d="M1 396H56.5C56.7761 396 57 396.224 57 396.5C57 396.776 56.7761 397 56.5 397H1V396Z" fill="#3C402B"/>
+<path d="M1 405H56.5C56.7761 405 57 405.224 57 405.5C57 405.776 56.7761 406 56.5 406H1V405Z" fill="#3C402B"/>
+<path d="M1 414H56.5C56.7761 414 57 414.224 57 414.5C57 414.776 56.7761 415 56.5 415H1V414Z" fill="#3C402B"/>
+<path d="M1 423H56.5C56.7761 423 57 423.224 57 423.5C57 423.776 56.7761 424 56.5 424H1V423Z" fill="#3C402B"/>
+<path d="M1 432H88.5C88.7761 432 89 432.224 89 432.5C89 432.776 88.7761 433 88.5 433H1V432Z" fill="#3C402B"/>
+<path d="M1 441H56.5C56.7761 441 57 441.224 57 441.5C57 441.776 56.7761 442 56.5 442H1V441Z" fill="#3C402B"/>
+<path d="M1 450H56.5C56.7761 450 57 450.224 57 450.5C57 450.776 56.7761 451 56.5 451H1V450Z" fill="#3C402B"/>
+<path d="M1 459H56.5C56.7761 459 57 459.224 57 459.5C57 459.776 56.7761 460 56.5 460H1V459Z" fill="#3C402B"/>
+<path d="M1 468H56.5C56.7761 468 57 468.224 57 468.5C57 468.776 56.7761 469 56.5 469H1V468Z" fill="#3C402B"/>
+<path d="M1 477H56.5C56.7761 477 57 477.224 57 477.5C57 477.776 56.7761 478 56.5 478H1V477Z" fill="#3C402B"/>
+<path d="M1 486H56.5C56.7761 486 57 486.224 57 486.5C57 486.776 56.7761 487 56.5 487H1V486Z" fill="#3C402B"/>
+<path d="M1 495H56.5C56.7761 495 57 495.224 57 495.5C57 495.776 56.7761 496 56.5 496H1V495Z" fill="#3C402B"/>
+<path d="M1 504H88.5C88.7761 504 89 504.224 89 504.5C89 504.776 88.7761 505 88.5 505H1V504Z" fill="#3C402B"/>
+<path d="M1 513H56.5C56.7761 513 57 513.224 57 513.5C57 513.776 56.7761 514 56.5 514H1V513Z" fill="#3C402B"/>
+<path d="M1 522H56.5C56.7761 522 57 522.224 57 522.5C57 522.776 56.7761 523 56.5 523H1V522Z" fill="#3C402B"/>
+<path d="M1 531H56.5C56.7761 531 57 531.224 57 531.5C57 531.776 56.7761 532 56.5 532H1V531Z" fill="#3C402B"/>
+<path d="M1 540H56.5C56.7761 540 57 540.224 57 540.5C57 540.776 56.7761 541 56.5 541H1V540Z" fill="#3C402B"/>
+<path d="M1 549H56.5C56.7761 549 57 549.224 57 549.5C57 549.776 56.7761 550 56.5 550H1V549Z" fill="#3C402B"/>
+<path d="M1 558H56.5C56.7761 558 57 558.224 57 558.5C57 558.776 56.7761 559 56.5 559H1V558Z" fill="#3C402B"/>
+<path d="M1 567H56.5C56.7761 567 57 567.224 57 567.5C57 567.776 56.7761 568 56.5 568H1V567Z" fill="#3C402B"/>
+<path d="M1 576H88.5C88.7761 576 89 576.224 89 576.5C89 576.776 88.7761 577 88.5 577H1V576Z" fill="#3C402B"/>
+<path d="M1 585H56.5C56.7761 585 57 585.224 57 585.5C57 585.776 56.7761 586 56.5 586H1V585Z" fill="#3C402B"/>
+<path d="M1 594H56.5C56.7761 594 57 594.224 57 594.5C57 594.776 56.7761 595 56.5 595H1V594Z" fill="#3C402B"/>
+<path d="M1 603H56.5C56.7761 603 57 603.224 57 603.5C57 603.776 56.7761 604 56.5 604H1V603Z" fill="#3C402B"/>
+<path d="M1 612H56.5C56.7761 612 57 612.224 57 612.5C57 612.776 56.7761 613 56.5 613H1V612Z" fill="#3C402B"/>
+<path d="M1 621H56.5C56.7761 621 57 621.224 57 621.5C57 621.776 56.7761 622 56.5 622H1V621Z" fill="#3C402B"/>
+<path d="M1 630H56.5C56.7761 630 57 630.224 57 630.5C57 630.776 56.7761 631 56.5 631H1V630Z" fill="#3C402B"/>
+<path d="M1 639H56.5C56.7761 639 57 639.224 57 639.5C57 639.776 56.7761 640 56.5 640H1V639Z" fill="#3C402B"/>
+<path d="M1 648H88.5C88.7761 648 89 648.224 89 648.5C89 648.776 88.7761 649 88.5 649H1V648Z" fill="#3C402B"/>
+<path d="M1 657H56.5C56.7761 657 57 657.224 57 657.5C57 657.776 56.7761 658 56.5 658H1V657Z" fill="#3C402B"/>
+<path d="M1 666H56.5C56.7761 666 57 666.224 57 666.5C57 666.776 56.7761 667 56.5 667H1V666Z" fill="#3C402B"/>
+<path d="M1 675H56.5C56.7761 675 57 675.224 57 675.5C57 675.776 56.7761 676 56.5 676H1V675Z" fill="#3C402B"/>
+<path d="M1 684H56.5C56.7761 684 57 684.224 57 684.5C57 684.776 56.7761 685 56.5 685H1V684Z" fill="#3C402B"/>
+<path d="M1 693H56.5C56.7761 693 57 693.224 57 693.5C57 693.776 56.7761 694 56.5 694H1V693Z" fill="#3C402B"/>
+<path d="M1 702H56.5C56.7761 702 57 702.224 57 702.5C57 702.776 56.7761 703 56.5 703H1V702Z" fill="#3C402B"/>
+<path d="M1 711H56.5C56.7761 711 57 711.224 57 711.5C57 711.776 56.7761 712 56.5 712H1V711Z" fill="#3C402B"/>
+<path d="M107 62.5003V82.5003C107 82.7655 106.895 83.0199 106.707 83.2074C106.52 83.395 106.265 83.5003 106 83.5003C105.735 83.5003 105.481 83.395 105.293 83.2074C105.106 83.0199 105 82.7655 105 82.5003V64.2666L101.515 66.3578C101.288 66.4944 101.015 66.535 100.758 66.4708C100.501 66.4066 100.279 66.2427 100.143 66.0153C100.006 65.7879 99.9655 65.5155 100.03 65.2581C100.094 65.0007 100.258 64.7794 100.485 64.6428L105.485 61.6428C105.637 61.5516 105.81 61.5024 105.987 61.5001C106.164 61.4978 106.339 61.5425 106.493 61.6297C106.647 61.7169 106.775 61.8435 106.864 61.9964C106.953 62.1494 107 62.3233 107 62.5003Z" fill="#3C402B"/>
+<path d="M111 154.5C111 154.765 110.895 155.02 110.707 155.207C110.52 155.395 110.265 155.5 110 155.5H100C99.8143 155.5 99.6322 155.448 99.4743 155.351C99.3163 155.253 99.1886 155.113 99.1056 154.947C99.0225 154.781 98.9874 154.595 99.004 154.41C99.0207 154.225 99.0886 154.049 99.2 153.9L108.192 141.91C108.513 141.491 108.748 141.013 108.883 140.502C109.019 139.992 109.051 139.46 108.98 138.937C108.909 138.414 108.735 137.911 108.468 137.455C108.201 137 107.846 136.602 107.425 136.284C107.004 135.966 106.523 135.735 106.012 135.604C105.501 135.472 104.969 135.444 104.446 135.519C103.924 135.594 103.422 135.772 102.968 136.042C102.515 136.313 102.12 136.67 101.805 137.094C101.617 137.344 101.458 137.615 101.333 137.901C101.226 138.144 101.028 138.335 100.781 138.432C100.534 138.528 100.259 138.523 100.016 138.417C99.7726 138.311 99.5818 138.112 99.4851 137.865C99.3884 137.618 99.3937 137.343 99.5 137.1C99.839 136.324 100.339 135.628 100.966 135.059C101.593 134.49 102.333 134.06 103.139 133.797C103.944 133.535 104.795 133.446 105.638 133.536C106.48 133.626 107.293 133.894 108.024 134.321C108.756 134.748 109.388 135.325 109.881 136.015C110.373 136.704 110.714 137.489 110.881 138.32C111.047 139.15 111.037 140.006 110.849 140.832C110.661 141.658 110.301 142.435 109.791 143.111L102 153.5H110C110.265 153.5 110.52 153.605 110.707 153.793C110.895 153.98 111 154.235 111 154.5Z" fill="#3C402B"/>
+<path d="M111 220.5C111 221.851 110.609 223.174 109.874 224.307C109.139 225.441 108.091 226.338 106.858 226.89C105.624 227.441 104.258 227.624 102.923 227.416C101.587 227.208 100.341 226.618 99.3339 225.718C99.2311 225.631 99.1466 225.526 99.0855 225.406C99.0243 225.287 98.9879 225.156 98.9782 225.023C98.9685 224.889 98.9858 224.755 99.0291 224.628C99.0724 224.501 99.1408 224.384 99.2302 224.284C99.3196 224.184 99.4282 224.103 99.5495 224.046C99.6708 223.989 99.8023 223.957 99.9363 223.951C100.07 223.946 100.204 223.968 100.329 224.015C100.455 224.063 100.569 224.135 100.666 224.228C101.271 224.768 101.997 225.153 102.783 225.35C103.569 225.547 104.391 225.55 105.179 225.359C105.966 225.168 106.695 224.788 107.304 224.252C107.912 223.717 108.381 223.041 108.67 222.284C108.959 221.527 109.06 220.711 108.964 219.907C108.867 219.102 108.577 218.333 108.118 217.665C107.658 216.998 107.043 216.452 106.326 216.075C105.609 215.697 104.811 215.5 104 215.5C103.814 215.5 103.632 215.448 103.474 215.351C103.316 215.253 103.189 215.113 103.106 214.947C103.023 214.781 102.988 214.595 103.004 214.41C103.021 214.225 103.089 214.049 103.2 213.9L108 207.5H100C99.7349 207.5 99.4806 207.395 99.293 207.207C99.1055 207.02 99.0001 206.765 99.0001 206.5C99.0001 206.235 99.1055 205.98 99.293 205.793C99.4806 205.605 99.7349 205.5 100 205.5H110C110.186 205.5 110.368 205.552 110.526 205.649C110.684 205.747 110.812 205.887 110.895 206.053C110.978 206.219 111.013 206.405 110.996 206.59C110.979 206.775 110.912 206.951 110.8 207.1L105.82 213.74C107.306 214.142 108.618 215.022 109.554 216.244C110.49 217.465 110.998 218.961 111 220.5Z" fill="#3C402B"/>
+<path d="M112 291.5C112 291.765 111.895 292.019 111.708 292.207C111.52 292.394 111.266 292.5 111 292.5H109V298.5C109 298.765 108.895 299.019 108.708 299.207C108.52 299.394 108.266 299.5 108 299.5C107.735 299.5 107.481 299.394 107.293 299.207C107.106 299.019 107 298.765 107 298.5V292.5H98.0005C97.8403 292.5 97.6824 292.461 97.5402 292.387C97.3981 292.313 97.2757 292.207 97.1834 292.076C97.0912 291.945 97.0317 291.793 97.0101 291.635C96.9885 291.476 97.0053 291.314 97.0592 291.164L102.059 277.164C102.154 276.922 102.34 276.726 102.576 276.619C102.813 276.511 103.082 276.5 103.326 276.588C103.571 276.675 103.772 276.854 103.887 277.087C104.002 277.32 104.021 277.589 103.942 277.836L99.4192 290.5H107V284.5C107 284.235 107.106 283.98 107.293 283.793C107.481 283.605 107.735 283.5 108 283.5C108.266 283.5 108.52 283.605 108.708 283.793C108.895 283.98 109 284.235 109 284.5V290.5H111C111.266 290.5 111.52 290.605 111.708 290.793C111.895 290.98 112 291.235 112 291.5Z" fill="#3C402B"/>
+<path d="M111 364.5C111 365.851 110.609 367.174 109.874 368.307C109.139 369.441 108.091 370.338 106.858 370.89C105.624 371.441 104.258 371.624 102.923 371.416C101.587 371.208 100.341 370.618 99.3339 369.718C99.2311 369.631 99.1466 369.526 99.0855 369.406C99.0243 369.287 98.9879 369.156 98.9782 369.023C98.9685 368.889 98.9858 368.755 99.0291 368.628C99.0724 368.501 99.1408 368.384 99.2302 368.284C99.3196 368.184 99.4282 368.103 99.5495 368.046C99.6708 367.989 99.8023 367.957 99.9363 367.951C100.07 367.946 100.204 367.968 100.329 368.015C100.455 368.063 100.569 368.135 100.666 368.228C101.382 368.867 102.266 369.288 103.214 369.439C104.162 369.589 105.133 369.464 106.012 369.078C106.89 368.692 107.639 368.061 108.169 367.26C108.699 366.46 108.987 365.524 108.999 364.565C109.012 363.605 108.747 362.662 108.238 361.848C107.729 361.035 106.996 360.385 106.128 359.976C105.26 359.568 104.292 359.418 103.34 359.544C102.389 359.671 101.494 360.069 100.763 360.69C100.604 360.823 100.409 360.904 100.202 360.921C99.9961 360.938 99.7896 360.891 99.6114 360.786C99.4331 360.681 99.2918 360.523 99.2069 360.335C99.1221 360.146 99.0979 359.936 99.1376 359.733L101.02 350.304C101.065 350.077 101.188 349.873 101.367 349.727C101.545 349.58 101.769 349.5 102 349.5H110C110.265 349.5 110.52 349.605 110.707 349.793C110.895 349.98 111 350.235 111 350.5C111 350.765 110.895 351.02 110.707 351.207C110.52 351.395 110.265 351.5 110 351.5H102.82L101.53 357.95C102.59 357.55 103.73 357.414 104.854 357.552C105.977 357.69 107.051 358.099 107.982 358.743C108.913 359.387 109.674 360.247 110.2 361.25C110.726 362.253 111 363.368 111 364.5Z" fill="#3C402B"/>
+<path d="M105 429.501C104.339 429.501 103.682 429.595 103.047 429.779L106.875 422.992C107.005 422.76 107.038 422.486 106.965 422.229C106.893 421.973 106.723 421.756 106.49 421.626C106.258 421.496 105.984 421.463 105.728 421.536C105.472 421.608 105.255 421.779 105.125 422.011L98.9311 433.011C98.1631 434.346 97.857 435.897 98.0602 437.424C98.2635 438.951 98.9647 440.368 100.055 441.456C101.146 442.544 102.565 443.242 104.092 443.442C105.62 443.641 107.17 443.331 108.504 442.56C109.837 441.789 110.879 440.599 111.468 439.176C112.056 437.752 112.159 436.174 111.76 434.687C111.361 433.199 110.482 431.884 109.26 430.947C108.038 430.009 106.54 429.501 105 429.501ZM105 441.501C104.011 441.501 103.044 441.207 102.222 440.658C101.4 440.109 100.759 439.328 100.38 438.414C100.002 437.5 99.903 436.495 100.096 435.525C100.289 434.555 100.765 433.664 101.464 432.965C102.164 432.266 103.054 431.79 104.024 431.597C104.994 431.404 106 431.503 106.913 431.881C107.827 432.26 108.608 432.9 109.157 433.723C109.707 434.545 110 435.512 110 436.501C110 437.827 109.473 439.098 108.535 440.036C107.598 440.974 106.326 441.501 105 441.501Z" fill="#3C402B"/>
+<path d="M110.958 494.787L104.958 514.788C104.877 515.036 104.702 515.243 104.47 515.364C104.239 515.485 103.969 515.511 103.719 515.436C103.469 515.36 103.258 515.19 103.132 514.962C103.005 514.733 102.973 514.464 103.042 514.212L108.656 495.5H100C99.7348 495.5 99.4804 495.395 99.2929 495.207C99.1054 495.02 99 494.765 99 494.5C99 494.235 99.1054 493.98 99.2929 493.793C99.4804 493.605 99.7348 493.5 100 493.5H110C110.156 493.5 110.31 493.537 110.449 493.607C110.588 493.677 110.709 493.778 110.802 493.903C110.895 494.028 110.958 494.173 110.985 494.327C111.012 494.48 111.002 494.638 110.958 494.787Z" fill="#3C402B"/>
+<path d="M108.444 575.409C109.488 574.677 110.273 573.631 110.682 572.423C111.092 571.215 111.106 569.907 110.722 568.691C110.338 567.474 109.576 566.411 108.547 565.657C107.518 564.903 106.276 564.496 105 564.496C103.724 564.496 102.482 564.903 101.453 565.657C100.424 566.411 99.662 567.474 99.2781 568.691C98.8942 569.907 98.9081 571.215 99.3177 572.423C99.7274 573.631 100.512 574.677 101.556 575.409C100.21 576.17 99.1533 577.355 98.5516 578.78C97.9499 580.205 97.8369 581.789 98.2302 583.284C98.6236 584.78 99.5011 586.103 100.726 587.047C101.951 587.992 103.454 588.504 105 588.504C106.546 588.504 108.049 587.992 109.274 587.047C110.499 586.103 111.376 584.78 111.77 583.284C112.163 581.789 112.05 580.205 111.448 578.78C110.847 577.355 109.79 576.17 108.444 575.409ZM101 570.501C101 569.71 101.235 568.936 101.674 568.278C102.114 567.621 102.738 567.108 103.469 566.805C104.2 566.502 105.004 566.423 105.78 566.578C106.556 566.732 107.269 567.113 107.828 567.672C108.388 568.232 108.769 568.944 108.923 569.72C109.077 570.496 108.998 571.3 108.696 572.031C108.393 572.762 107.88 573.387 107.222 573.827C106.564 574.266 105.791 574.501 105 574.501C103.939 574.501 102.922 574.079 102.172 573.329C101.421 572.579 101 571.562 101 570.501ZM105 586.501C104.011 586.501 103.044 586.207 102.222 585.658C101.4 585.109 100.759 584.328 100.381 583.414C100.002 582.5 99.9031 581.495 100.096 580.525C100.289 579.555 100.765 578.664 101.464 577.965C102.164 577.266 103.055 576.79 104.025 576.597C104.994 576.404 106 576.503 106.913 576.881C107.827 577.26 108.608 577.901 109.157 578.723C109.707 579.545 110 580.512 110 581.501C110 582.827 109.473 584.099 108.536 585.036C107.598 585.974 106.326 586.501 105 586.501Z" fill="#3C402B"/>
+<path d="M105 637.5C103.997 637.5 103.006 637.715 102.094 638.131C101.181 638.546 100.369 639.154 99.7112 639.911C99.0538 640.668 98.5667 641.558 98.283 642.52C97.9993 643.482 97.9256 644.493 98.0669 645.486C98.2082 646.479 98.5611 647.43 99.1019 648.274C99.6426 649.119 100.359 649.838 101.201 650.381C102.044 650.925 102.993 651.282 103.986 651.427C104.978 651.571 105.99 651.501 106.953 651.221L103.125 658.009C102.995 658.241 102.963 658.515 103.035 658.771C103.107 659.027 103.278 659.244 103.51 659.374C103.742 659.504 104.016 659.537 104.272 659.465C104.528 659.393 104.745 659.222 104.875 658.99L111.069 647.99C111.681 646.926 112.003 645.719 112.001 644.491C112 643.263 111.675 642.057 111.06 640.995C110.445 639.932 109.562 639.049 108.498 638.436C107.434 637.823 106.228 637.5 105 637.5ZM105 649.5C104.011 649.5 103.045 649.207 102.222 648.657C101.4 648.108 100.759 647.327 100.381 646.413C100.002 645.5 99.9034 644.494 100.096 643.525C100.289 642.555 100.765 641.664 101.465 640.964C102.164 640.265 103.055 639.789 104.025 639.596C104.995 639.403 106 639.502 106.914 639.881C107.827 640.259 108.608 640.9 109.158 641.722C109.707 642.544 110 643.511 110 644.5C110 645.826 109.473 647.098 108.536 648.036C107.598 648.973 106.326 649.5 105 649.5Z" fill="#3C402B"/>
+<defs>
+<filter id="filter0_d_133_2520" x="0" y="0" width="148" height="723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.192157 0 0 0 0 0.207843 0 0 0 0 0.121569 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_133_2520"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_133_2520" result="shape"/>
+</filter>
+</defs>
+</svg>

src/components/Footer/Footer.css

@@ -58,6 +58,8 @@ footer .links {
 }
 
 .illustrations-footer {
+  position: fixed;
+  margin: auto;
   display: none;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -92,11 +94,9 @@ footer .links {
   }
 
   .illustrations-footer {
-    max-width: 100%;
     height: 440px;
-    display: flex;
+    display: initial;
-    justify-content: center;
+    overflow-y: hidden;
-    overflow: hidden;
   }
 }
 
@@ -127,6 +127,11 @@ footer .links {
     right: -18px;
     top: 144px;
   }
+
+  .ruler {
+    position: absolute;
+    transform: rotate(-5deg);
+  }
 }
 
 @media screen and (min-width: 1239px) {
@@ -143,9 +148,7 @@ footer .links {
   .illustrations-footer {
     display: initial;
     position: absolute;
-    left: -240px;
+    bottom: 0;
-    top: 632px;
+    height: 500px !important;
-    height: 584px;
-    overflow: hidden;
   }
 }

src/components/Footer/Footer.tsx

@@ -5,7 +5,7 @@ import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";
 import Links from "@/components/Links/Links";
 
 import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
-import { ReactComponent as PostIt } from "@/assets/footer-mobile.svg";
+import { ReactComponent as Ruler } from "@/assets/ruler.svg";
 import { useMediaQuery } from "@/hooks";
 import { selectionEntryAtom } from "@/state";
 import "./Footer.css";
@@ -122,11 +122,11 @@ const Footer = (_: FooterProps) => {
               </a>{" "}
               by Mikhail Sharanda.
             </p>
-            <MarkerGreen id="marker-green" />
           </div>
         </div>
         <div className="illustrations-footer">
-          <PostIt id="post-it" width="878" height="667" />
+          <Ruler className="ruler" width="878" height="667" />
+          <MarkerGreen id="marker-green" />
         </div>
       </div>
     </footer>

src/components/Header/Header.tsx

@@ -9,18 +9,6 @@ import Banner from "@/components/Banner";
 import { ReactComponent as MarkerPurple } from "@/assets/marker-purple.svg";
 import { ReactComponent as PaperClips } from "@/assets/paperclips-header-mobile.svg";
 import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-header.svg";
-import { ReactComponent as Tablet } from "@/assets/tablet.svg";
-import { ReactComponent as TabletSpec } from "@/assets/tablet-spec.svg";
-import { ReactComponent as BilliardBall } from "@/assets/billiard-ball.svg";
-import { ReactComponent as BilliardBallSpec } from "@/assets/billiard-ball-spec.svg";
-import { ReactComponent as Warning } from "@/assets/warning.svg";
-import { ReactComponent as WarningSpec } from "@/assets/warning-spec.svg";
-import { ReactComponent as CuttingMat } from "@/assets/cutting-mat.svg";
-import { ReactComponent as CuttingMatSpec } from "@/assets/cutting-mat-spec.svg";
-import { ReactComponent as Receipt } from "@/assets/receipt.svg";
-import { ReactComponent as ReceiptSpec } from "@/assets/receipt-spec.svg";
-import { ReactComponent as Calculator } from "@/assets/calculator.svg";
-import { ReactComponent as CalculatorSpec } from "@/assets/calculator-spec.svg";
 import { ReactComponent as IPad } from "@/assets/ipad.svg";
 import { ReactComponent as Map } from "@/assets/map.svg";
 import { ReactComponent as Synth } from "@/assets/synth.svg";

src/components/Recipes/Recipe.tsx

@@ -6,7 +6,7 @@ export type RecipeProps = {
   Example: () => JSX.Element;
 };
 
-const Recipe = ({ title, url, Example }: RecipeProps) => {
+const Recipe = ({ url, Example }: RecipeProps) => {
   return (
     <a className="recipe card" href={url}>
       {/* <h1>{title}</h1> */}

src/components/Recipes/items/HandDrawn.tsx

@@ -0,0 +1,50 @@
+import { CassetteTape, Cube, Virus, ThumbsUp } from "@phosphor-icons/react";
+
+import { RecipeProps } from "../Recipe";
+
+const animation: RecipeProps = {
+  title: "Hand Drawn",
+  url: "https://stackblitz.com/edit/react-ts-f7q7gs?file=App.tsx,style.css",
+  Example() {
+    return (
+      <div className="example">
+        <CassetteTape
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+         >
+          <defs>
+            <filter id="displacementFilter">
+              <feTurbulence
+                type="turbulence"
+                baseFrequency="0.02"
+                numOctaves="3"
+                result="turbulence"
+              />
+              <feDisplacementMap
+                in2="turbulence"
+                in="SourceGraphic"
+                scale="4"
+                xChannelSelector="R"
+                yChannelSelector="G"
+              />
+            </filter>
+          </defs>
+        </CassetteTape>
+        <Cube
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+        <ThumbsUp
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+        <Virus
+          color="teal"
+          style={{ filter: "url(#displacementFilter)" }}
+        />
+      </div>
+    );
+  },
+};
+
+export default animation;

src/components/Recipes/items/index.ts

@@ -1,8 +1,9 @@
 import animation from "./Animation";
 import duocolor from "./Duocolor";
 import gradient from "./Gradient";
+import handdrawn from "./HandDrawn";
 
 import { RecipeProps } from "../Recipe";
 
-const items: RecipeProps[] = [duocolor, animation, gradient];
+const items: RecipeProps[] = [duocolor, handdrawn, animation, gradient];
 export default items;