From bf16cc158ec251451448358e632d4bf4c46c2694 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Wed, 17 Jul 2024 19:25:00 -0300
Subject: [PATCH] feat: add undraw cards for new flows (#2772)

Added cards for Complex Agent, Sequential Tasks and HierarchicalTasks
---
 .../src/assets/undraw_educator_re_ju47.svg    |  1 +
 .../src/assets/undraw_firmware_re_fgdy.svg    |  1 +
 .../undraw_project_completed_re_jr7u.svg      |  1 +
 .../components/undrawCards/index.tsx          | 33 +++++++++++++++++++
 4 files changed, 36 insertions(+)
 create mode 100644 src/frontend/src/assets/undraw_educator_re_ju47.svg
 create mode 100644 src/frontend/src/assets/undraw_firmware_re_fgdy.svg
 create mode 100644 src/frontend/src/assets/undraw_project_completed_re_jr7u.svg

diff --git a/src/frontend/src/assets/undraw_educator_re_ju47.svg b/src/frontend/src/assets/undraw_educator_re_ju47.svg
new file mode 100644
index 000000000..aac29ef13
--- /dev/null
+++ b/src/frontend/src/assets/undraw_educator_re_ju47.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="851.034" height="557.34684" viewBox="0 0 851.034 557.34684" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M785.20402,269.12891H95.10929c-9.25,0-16.77539-7.52539-16.77539-16.77637V16.77539c0-9.25,7.52539-16.77539,16.77539-16.77539H785.20402c9.25,0,16.77539,7.52539,16.77539,16.77539V252.35254c0,9.25098-7.52539,16.77637-16.77539,16.77637ZM95.10929,2c-8.14697,0-14.77539,6.62842-14.77539,14.77539V252.35254c0,8.14746,6.62842,14.77637,14.77539,14.77637H785.20402c8.14697,0,14.77539-6.62891,14.77539-14.77637V16.77539c0-8.14697-6.62842-14.77539-14.77539-14.77539H95.10929Z" fill="#3f3d56"/><rect id="uuid-dac6dc9f-03bc-4283-a90c-97bcdcbf45dc" y="550.55711" width="851.034" height="1.683" fill="#e6e6e6"/><rect id="uuid-2f9646f7-bb94-4523-8d2e-fd8f0877664c" y="464.55711" width="851.034" height="1.683" fill="#e6e6e6"/><g><path id="uuid-bb35f39c-94aa-41c4-b5d9-34ca9a9e88f1-555" d="M387.84012,277.7924c.6111,7.67992,5.06908,13.58982,9.95656,13.20011,4.88749-.38971,8.35284-6.93077,7.7405-14.61335-.20251-3.07223-1.13781-6.05129-2.72768-8.68793l-3.00018-32.50744-15.22478,1.73305,4.57404,31.86258c-1.15299,2.85593-1.6051,5.94649-1.31846,9.01298Z" fill="#ffb6b6"/><path d="M369.65265,126.13324s14.23183-7.53394,21.44832,3.72455c7.21649,11.25849,12.19715,133.02108,12.19715,133.02108l-20.0018,2.13549-3.79168-85.80267-9.85198-53.07844Z" fill="#e6e6e6"/><g><polygon points="340.11391 458.20431 351.70127 458.20318 357.21344 413.50859 340.11158 413.50978 340.11391 458.20431" fill="#ffb6b6"/><path d="M379.81365,457.94146h0c.36079,.60764,.55116,2.56882,.55116,3.27545h0c0,2.172-1.76073,3.9328-3.9328,3.9328h-35.88469c-1.48173,0-2.68297-1.20117-2.68297-2.68297v-1.49399s-1.77518-4.49023,1.8796-10.02469c0,0,4.54241,4.33356,11.32993-2.45396l2.00158-3.62601,14.48869,10.59629,8.03086,.98852c1.75699,.21625,3.31472-.03356,4.21849,1.48856h.00014Z" fill="#2f2e41"/></g><g><polygon points="407.16841 456.28595 418.39497 453.41695 412.67359 408.74865 396.10412 412.98257 407.16841 456.28595" fill="#ffb6b6"/><path d="M445.56792,446.20546h0c.49996,.49944,1.1698,2.35248,1.3447,3.03713h0c.53758,2.10442-.73257,4.24622-2.83706,4.78381l-34.76822,8.88157c-1.43562,.36673-2.89679-.49976-3.26354-1.93545l-.36977-1.44751s-2.83129-3.91116-.66002-10.178c0,0,5.47365,3.07447,10.37006-5.1818l1.04186-4.0086,16.66052,6.68062,8.02566-1.0299c1.75585-.22534,3.20328-.85292,4.45567,.39816l.00014-.00003Z" fill="#2f2e41"/></g><polygon points="330.5274 116.5252 329.97801 112.53821 336.50788 96.59024 354.44935 94.59675 358.32324 117.42831 330.5274 116.5252" fill="#ffb6b6"/><polygon points="330.5274 116.5252 329.97801 112.53821 336.50788 96.59024 354.44935 94.59675 358.32324 117.42831 330.5274 116.5252" opacity=".1"/><polygon points="309.59569 229.15772 301.6217 251.08618 307.60219 263.04715 337.50463 436.4813 357.38465 436.4813 353.4526 282.98211 399.30301 436.4813 418.97897 436.4813 403.15657 332.81951 391.32902 237.13171 384.15521 232.6999 349.46561 213.20976 309.59569 229.15772" fill="#2f2e41"/><polygon points="360.42983 244.10894 348.46886 246.10244 332.52089 208.22602 368.40382 208.22602 360.42983 244.10894" fill="#e6e6e6"/><polygon points="384.35179 234.14146 360.42983 244.10894 352.45585 226.16748 348.46886 246.10244 306.60544 232.62639 312.58593 208.22602 306.60544 128.48618 327.71662 114.41198 330.5274 112.53821 356.44284 114.53171 358.71546 115.76767 374.38431 124.49919 378.3713 190.28455 384.35179 234.14146" fill="#2f2e41"/><polygon points="358.71546 115.76767 347.47211 163.37236 327.71662 114.41198 330.5274 112.53821 356.44284 114.53171 358.71546 115.76767" fill="#e6e6e6"/><polygon points="339.49813 112.53821 335.51114 119.4047 339.49813 121.69353 337.50463 163.49619 345.47862 174.33659 353.4526 158.31478 347.47211 121.69353 349.46561 112.53821 339.49813 112.53821" fill="#2f2e41"/><circle cx="345.47862" cy="89.61301" r="18.93821" fill="#ffb6b6"/><path d="M333.37575,91.27425l4.09196,1.78584,1.78584-10.71504s7.14336-3.57168,12.50088-1.78584,14.28672,0,14.28672,0c0,0,0-17.8584-12.50088-17.8584s-25.00176,1.78584-25.00176,7.14336-5.35752,10.71504-5.35752,10.71504c0,0-7.14336,10.71504,0,17.8584,7.14336,7.14336,10.71504,7.14336,10.71504,7.14336l-.52028-14.28672Z" fill="#2f2e41"/><path id="uuid-97233535-ec91-4408-928f-bf1e5273ca3e-556" d="M296.62879,277.23211c-.20767,7.7014,3.59771,14.05116,8.49895,14.18252s9.04142-6.00486,9.24813-13.70902c.12478-3.07637-.48897-6.13789-1.78994-8.92841l.46781-32.64224-15.32272,.10697,1.16561,32.1681c-1.44966,2.71738-2.22731,5.74249-2.26784,8.82207Z" fill="#ffb6b6"/><path d="M315.58593,124.46179s-12.95772-3.98699-18.93821,7.97398c-5.98049,11.96098,1.9935,133.56423,1.9935,133.56423h20.11547l-5.33868-85.72033,2.16793-55.81789Z" fill="#e6e6e6"/></g><g><path d="M812.65719,351.00821l-48.32166-14.79238c-1.06882-.32716-2.19038-.4466-3.30415-.3518l-244.90187,20.84269c-3.49184,.29715-4.36942,5.00693-1.21895,6.54176l7.84468,3.82176h-.20917v182.95168h7.39199v-179.45234l24.58572,11.97763c1.88116,.91644,3.98046,1.29052,6.06233,1.08022l2.61589-.26422v166.65871h7.39199v-167.4054l189.41967-19.13326v186.53866h7.39199v-187.28535l31.41595-3.17331v190.45866h7.39199v-191.20535l5.7314-.57891c4.0236-.40645,4.57916-6.04575,.71223-7.22945Z" fill="#3f3d56"/><path d="M587.22595,355.98226c4.61999,0,72.99587-8.31599,72.99587-8.31599l10.16398,13.85998-71.14788,13.85998-12.01198-19.40397Z" fill="#fff"/><g><polygon points="662.26939 542.91667 650.39 542.89512 644.81757 497.06436 662.35045 497.09569 662.26939 542.91667" fill="#a0616a"/><path d="M621.56955,542.57731h0c-.37095,.62232-.56957,2.63259-.57082,3.35703h0c-.00382,2.22674,1.79818,4.03501,4.02499,4.03884l36.78911,.06316c1.51907,.00261,2.7527-1.22673,2.75531-2.74587l.00263-1.53165s1.82782-4.60028-1.90933-10.28065c0,0-4.66452,4.43479-11.61116-2.53575l-2.04565-3.72093-14.87251,10.83785-8.23501,.9993c-1.80165,.21861-3.39821-.04024-4.32743,1.51866h-.00014Z" fill="#2f2e41"/></g><g><polygon points="726.02735 521.60456 716.65452 528.67376 684.92538 495.88695 698.75852 485.45309 726.02735 521.60456" fill="#a0616a"/><path d="M693.75683,545.61506h0c.07894,.71161,1.12159,2.41402,1.55275,2.98556h0c1.32526,1.75677,3.82374,2.10662,5.58057,.78132l29.02444-21.89533c1.19846-.90409,1.43715-2.60858,.53302-3.80709l-.91157-1.20838s-1.30394-4.71495-7.63691-6.96136c0,0-1.02986,6.27668-10.66123,4.92822l-3.83137-1.71153-5.2534,17.41094-5.89241,5.69963c-1.28915,1.24695-2.70151,1.99536-2.50376,3.77794l-.00011,.00009Z" fill="#2f2e41"/></g><path d="M701.20012,284.7398c0,10.95483-8.88064,19.83547-19.83547,19.83547-10.95483,0-19.83547-8.88064-19.83547-19.83547s8.88064-19.83547,19.83547-19.83547,19.83547,8.88064,19.83547,19.83547Z" fill="#a0616a"/><path d="M699.33129,399.1067s-73.0319-4.13388-77.16578,4.13388,22.34833,121.83338,22.34833,121.83338l23.62655-4.95175-11.52587-79.6767s60.94342,16.14005,69.21118-3.1514c8.26776-19.29144,5.88766-26.47475,5.88766-26.47475l-32.38207-11.71266Z" fill="#2f2e41"/><path d="M718.04278,385.22869s-71.52378,15.33281-73.3233,24.3996,53.78128,111.58133,53.78128,111.58133l21.47498-11.02537-32.19248-73.78934s63.04198-.55653,65.91197-21.34785c2.86999-20.79132-1.32556-27.08911-1.32556-27.08911l-34.3269-2.72925Z" fill="#2f2e41"/><path d="M726.20152,307.47234h-34.36221l-23.51213,38.58289s-5.51184,24.93349,0,27.62431c5.51184,2.69082,5.51184,31.62799,5.51184,31.62799l57.87433,5.51184s8.26776-86.8115,5.51184-95.07926c-2.75592-8.26776-11.02368-8.26776-11.02368-8.26776Z" fill="#6c63ff"/><path d="M671.77208,332.96463l-3.44492,40.71481-38.74748-16.44473-9.24771-4.6509c-1.81128-2.36188-4.16183-4.25556-6.85504-5.52279-6.69735-3.264-13.80747-2.4555-15.8841,1.80514-2.07668,4.26063,1.66736,10.35956,8.36279,13.62153,2.6583,1.34088,5.59915,2.02531,8.57642,1.99632l27.05797,15.36813,.03186-.06012,.11996,.21419,42.43185,17.72245,9.76312-53.44911-22.16474-11.31492Z" fill="#a0616a"/><path d="M667.63821,287.49192s-20.6694,2.75592-12.40164-15.15756c0,0-1.2606-9.71082,4.88154-10.36725s14.4099-11.68011,14.4099-11.68011c0,0,18.95509-9.64572,28.76899,0,9.8139,9.64572,38.75106,66.14209,38.75106,66.14209l-19.29144,20.6694s-11.59783-30.48873-25.09036-26.95703c-13.49253,3.5317-25.89417,14.06171-25.89417,14.06171,0,0-13.6928-6.8525-7.53538-12.82513,6.15742-5.97263,3.4015-23.88612,3.4015-23.88612Z" fill="#2f2e41"/><path d="M695.19741,317.80704s-9.64572-12.40164-16.53552-2.75592c-6.8898,9.64572-12.40164,22.04736-12.40164,22.04736l27.55921,9.64572,1.37796-28.93717Z" fill="#6c63ff"/><path d="M799.83575,547.27902l-32.01899-101.77021,.00468-.00034h.07394l-.12937-.16637-.00282-.00361-2.28061-7.24885,.00113-.0009c3.47424-2.99375,5.83968-7.27186,6.31092-12.19685l-14.63616-80.49862c1.00718-10.5706-7.0963-19.81058-17.71303-20.18945l-33.02369-.08313c-9.3878-.33263-17.51903,6.44949-18.88653,15.74497l-.72994,4.93412-10.11779,68.82863c-.36962,2.47625-.22175,4.91573,.36037,7.19798l-7.28111,.95175-2.20837,.29563-8.7318,1.1365-.02769,.00925-1.09031,.13862h-1.18275v29.56795h.07394v94.50658c0,.60976,.49894,1.10875,1.10881,1.10875,.61906,0,1.118-.499,1.118-1.10875v-94.50658h12.95448l12.92673,94.39559c.08318,.55449,.55438,.96099,1.10881,.96099,.04619,0,.10163,0,.14781-.00925,.60987-.08313,1.03487-.64675,.95175-1.25662l-12.88054-94.09072h62.15733c6.17174,0,11.89073-1.95853,16.54743-5.31209l24.64454,99.53455c.12825,.50373,.58088,.83839,1.07785,.83839,.09074,0,.18312-.01083,.27527-.03418,.59555-.15159,.95558-.75752,.80421-1.35306l-24.88288-100.49712c.33093-.27589,.66192-.57005,.97453-.87347l9.89305-.58179,32.1857,102.30011c.14939,.47497,.58821,.77929,1.06127,.77929,.11059,0,.22305-.01681,.3342-.05166,.58635-.18475,.9121-.80974,.72763-1.39604Zm-36.46799-107.61017c.08313-.04625,.15706-.10174,.231-.14798l.00056-.00045,.23777,.75571-.46933-.60728Z" fill="#e6e6e6"/></g><g><g><polygon points="171.56525 374.77477 193.11428 361.07087 201.87509 366.35537 171.56525 401.18319 171.56525 374.77477" fill="#ffb6b6"/><path d="M142.09734,321.73254s-14.31298,3.36776-7.57746,22.73238,28.62597,59.77775,35.36149,57.25193c6.73552-2.52582,7.57746-27.78403,7.57746-27.78403,0,0-.84194,.84194-4.2097-2.52582-3.36776-3.36776-3.36776-1.82973-3.36776-5.54554s-2.75454-6.47034-2.75454-6.47034l-3.13904-6.50681s0-30.30985-12.6291-31.99373c-12.6291-1.68388-9.26134,.84194-9.26134,.84194Z" fill="#e6e6e6"/><ellipse cx="202.71703" cy="359.19888" rx="14.31298" ry="8.84037" transform="translate(-194.61752 248.54951) rotate(-45)" fill="#ffb6b6"/></g><g><polygon points="86.34807 433.29001 101.05215 457.62779 186.74142 452.55742 163.92475 423.14927 86.34807 433.29001" fill="#e6e6e6"/><path d="M111.95221,547.11985c-.49911,0-.93386-.36839-1.00343-.87642l-25.60538-187.00708c-.07601-.55507,.31219-1.06656,.86701-1.14232,.55457-.08021,1.06607,.31195,1.14232,.86701l25.60538,187.00708c.07601,.55507-.31219,1.06656-.86701,1.14232-.04679,.00644-.09309,.00941-.13889,.00941Z" fill="#e6e6e6"/><path d="M86.34807,547.35752c-.56002,0-1.01407-.45406-1.01407-1.01407v-187.20861c0-.56002,.45406-1.01407,1.01407-1.01407,.56002,0,1.01407,.45406,1.01407,1.01407v187.20861c0,.56002-.45406,1.01407-1.01407,1.01407Z" fill="#e6e6e6"/><path d="M214.88174,546.61331c-.43103,0-.83087-.27729-.96703-.71005l-60.59094-192.58449c-.1681-.53427,.12874-1.1037,.66301-1.27205,.53402-.16736,1.1037,.12924,1.27155,.66301l60.59094,192.58449c.1681,.53427-.12874,1.1037-.66301,1.27205-.10126,.03169-.20376,.04704-.30452,.04704Z" fill="#e6e6e6"/><path d="M196.37439,546.85049c-.45282,0-.86528-.30501-.98214-.76402l-42.08408-169.96935c-.1379-.54269,.19014-1.09478,.73283-1.23293,.54442-.13716,1.09478,.19014,1.23293,.73283l42.08408,169.96935c.1379,.54269-.19014,1.09478-.73283,1.23293-.08393,.02129-.1681,.03119-.2508,.03119Z" fill="#e6e6e6"/><polygon points="86.34807 362.11717 156.57271 361.03722 169.50216 434.81112 87.36214 434.81112 86.34807 362.11717" fill="#e6e6e6"/></g><g><polygon points="194.26591 470.59655 176.56797 501.75497 197.11665 506.27891 205.68358 484.11776 194.26591 470.59655" fill="#ffb6b6"/><path d="M182.92462,495.87253s-.68769-5.08127-4.73068-3.46879-15.71126,7.60503-15.71126,7.60503c0,0,30.43363,49.4508,36.20933,47.14726,5.7757-2.30353-1.13827-16.28208-1.13827-16.28208l1.52597-24.70853-16.1551-10.29289Z" fill="#2f2e41"/><path d="M115.9972,410.13626s-6.31455,29.04694,13.05007,39.15022c19.36462,10.10328,85.45693-14.73395,85.45693-14.73395l-30.30985,45.41505,21.0485,8.46912s47.99059-63.14551,44.62283-73.24879c-3.36776-10.10328-26.10015-10.94522-26.10015-10.94522l-51.35835,2.52582-13.47104-4.2097-42.93895,7.57746Z" fill="#2f2e41"/></g><g><polygon points="168.08352 484.4253 140.26086 507.00768 157.75463 518.69879 173.79831 501.17426 168.08352 484.4253" fill="#ffb6b6"/><path d="M148.32224,503.84158s1.20844-4.98316-3.14413-4.9524-17.40151,1.36661-17.40151,1.36661c0,0,10.35295,57.13496,16.57091,57.09102,6.21796-.04394,4.86453-15.58006,4.86453-15.58006l10.41237-22.45936-11.30217-15.46582Z" fill="#2f2e41"/><path d="M117.181,399.62925s-16.45134,24.75786-2.09067,41.21496c14.36067,16.4571,84.95984,17.37244,84.95984,17.37244l-44.7577,31.27238,16.52375,15.54771s67.67815-41.35361,68.21767-51.98973c.53953-10.63612-20.32807-19.69226-20.32807-19.69226l-48.75657-16.33576-11.01569-8.82298-42.75257-8.56676Z" fill="#2f2e41"/></g><path d="M159.4433,342.28438s-15.99686-5.89358-23.57432-5.89358c-.72406,0-1.43974,.08417-2.15536,.23572-4.84958,1.02719-9.31186,5.19481-11.45037,7.46801-.83356,.89245-1.31342,1.49025-1.31342,1.49025,0,0,.05051-.58094,.15154-1.59971,.49672-5.35473,2.33214-22.92601,5.62415-34.17432,1.17869-4.01607,2.53425-7.22386,4.09182-8.78143,3.62876-3.63719,5.30421-7.99843,6.07878-11.24831,.65674-2.78687,.65674-4.74855,.65674-4.74855l-6.13773-2.6437-1.13665-7.42592c-.20206,.8756-1.1366,2.58476-4.27702,5.85992-.26943,.2778-.56414,.51357-.87565,.71563-4.52964,2.84576-13.7657-2.10485-18.7416-5.22004,2.07119-7.19858,5.82626-13.78256,12.64596-14.86021,15.99686-2.52582,15.99686-11.78716,26.10015-1.68388,.83351,.83351,1.67545,1.63337,2.51739,2.40794,3.23307,6.17986,4.41176,14.46453,4.83273,20.22342,.30314,4.03287,.22734,6.83655,.22734,6.83655,0,0,4.2097,25.25821,10.94522,30.30985,6.73552,5.05164-4.2097,22.73238-4.2097,22.73238Z" fill="#2f2e41"/><polygon points="128.29151 301.87125 116.91538 318.55786 142.6045 325.44557 142.6045 301.87125 128.29151 301.87125" fill="#ffb6b6"/><polygon points="128.29151 301.87125 116.91538 318.55786 142.6045 325.44557 142.6045 301.87125 128.29151 301.87125" opacity=".1"/><path d="M144.20219,317.94381l-24.41626-10.10328s-32.83567,14.31298-30.30985,42.09701c2.52582,27.78403,26.10015,75.77462,26.10015,75.77462l47.14865-20.20656-5.05164-53.88417-13.47104-33.67761Z" fill="#e6e6e6"/><circle cx="133.73351" cy="287.78009" r="21.54104" fill="#ffb6b6"/><path d="M162.81106,279.9808c-4.2097,4.2097-7.57746,8.4194-7.57746,8.4194l-1.68388-6.73552s-.38731,.28623-1.06928,.74091c-2.66894,1.81857-9.83386,6.3903-15.58432,7.3754-2.55948,.43777-4.83273,.15992-6.31455-1.38079-3.14042-3.27516-4.07496-4.98432-4.27702-5.85992l-1.13665,7.42592-6.13773,2.6437s0,9.24449,6.73552,15.99686c.32837,.32837,.64831,.73248,.95982,1.20397,3.21622,4.84958,5.52313,16.72092,6.98809,26.81577,1.29657,8.97511,1.9196,16.53572,1.9196,16.53572,0,0-6.37344-7.98158-13.36996-9.06771-.38731-.05894-.77462-.10103-1.16188-.10946-.12631-.0168-.261-.0168-.38731-.0168-7.57746,0-23.57432,5.89358-23.57432,5.89358,0,0-10.94522-17.68074-4.2097-22.73238,6.73552-5.05164,10.94522-30.30985,10.94522-30.30985,0,0-.27785-10.81053,2.50897-20.50127,2.07119-7.19858,5.82626-13.78256,12.64596-14.86021,15.99686-2.52582,15.99686-11.78716,26.10015-1.68388,.83351,.83351,1.67545,1.63337,2.51739,2.40794,9.41288,8.65517,19.02788,13.9341,15.16335,17.79863Z" fill="#2f2e41"/><rect x="60.3339" y="393" width="8" height="158" fill="#3f3d56"/><rect x="254.3339" y="393" width="8" height="158" fill="#3f3d56"/><rect x="158.3339" y="326" width="53" height="53" fill="#6c63ff"/><g><polygon points="127.78436 382.35224 149.33339 368.64833 158.09421 373.93283 127.78436 408.76065 127.78436 382.35224" fill="#ffb6b6"/><path d="M98.31645,329.31001s-14.31298,3.36776-7.57746,22.73238c6.73552,19.36462,28.62597,59.77775,35.36149,57.25193,6.73552-2.52582,7.57746-27.78403,7.57746-27.78403,0,0-.84194,.84194-4.2097-2.52582-3.36776-3.36776-3.36776-1.82973-3.36776-5.54554s-2.75454-6.47034-2.75454-6.47034l-3.13904-6.50681s0-30.30985-12.6291-31.99373c-12.6291-1.68388-9.26134,.84194-9.26134,.84194Z" fill="#e6e6e6"/><ellipse cx="158.93615" cy="366.77634" rx="14.31298" ry="8.84037" transform="translate(-212.79872 219.81113) rotate(-45)" fill="#ffb6b6"/></g><rect x="36.3339" y="387" width="242" height="18" fill="#3f3d56"/></g><rect x="483.3339" y="243" width="46" height="25" rx="5.12992" ry="5.12992" fill="#3f3d56"/><rect x="558.3339" y="257.74015" width="46" height="10.25985" rx="5.12992" ry="5.12992" fill="#6c63ff"/></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/undraw_firmware_re_fgdy.svg b/src/frontend/src/assets/undraw_firmware_re_fgdy.svg
new file mode 100644
index 000000000..70aa3dc16
--- /dev/null
+++ b/src/frontend/src/assets/undraw_firmware_re_fgdy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="738.81995" height="576.27002" viewBox="0 0 738.81995 576.27002" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M844.96867,410.38909s-17.37008,9.66141-12.37008,20.66141,76,2,76,2-5-15-14-18S844.96867,410.38909,844.96867,410.38909Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><path d="M838.19741,412.96505a33.803,33.803,0,0,1,11.44641-4.73315,77.516,77.516,0,0,1,41.17743,1.2843l-.24481-.1991a45.94574,45.94574,0,0,1,14.66607,12.22834Z" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><path d="M915.11861,460.27047q-.36,5.385-.72,10.76a172.67437,172.67437,0,0,1-2.45,22.38c-1.22,6.19-3.16,12.33-6.63,17.6-3.47,5.26-8.62,9.61-14.72,11.21a26.97334,26.97334,0,0,1-11.42.25c-7.13-4.05-11.96,1.13-4.84,6.4a55.18743,55.18743,0,0,0,5.03,3.31l3.23,49.87-60-13,11.71-66.34a39.58958,39.58958,0,0,1-4.9-5.35c-6.71-8.91-9.02-20.52-8.58-31.66.45-11.15,3.42-22.02,6.37-32.77a84.27789,84.27789,0,0,1,2.72-8.61005c1.31.54,2.64,1.03,3.99,1.44,8.63,2.62,17.8,2.83,26.82,2.82q24.075-.015,48.09-1.88a46.14229,46.14229,0,0,1,6.53,19.94A92.56934,92.56934,0,0,1,915.11861,460.27047Z" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><path d="M658.5,595.645l92.37,8.19995.99.09V209.795q-.49494-.345-.99-.69a288.32258,288.32258,0,0,0-62.01-32.94l-4.72,65.1-.43,5.96-4.67,64.56L677.6,331.645l-18.93,261.7Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><path d="M430.07,202.455c-.66.42-1.32.84-1.98,1.28v400.2l1.98-.18,91.37-8.11-.17-2.30005L502.34,331.645l-1.44-19.86-4.67-64.56-.43-5.96-4.95-68.27A287.68677,287.68677,0,0,0,430.07,202.455Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><path d="M428.09,203.735c-1.33.86-2.66,1.74-3.97,2.63v403.03c0,10.06995,5.97,18.51,13.95,20.66a15.24855,15.24855,0,0,0,4,.53h296.8a15.11793,15.11793,0,0,0,3.99-.53,17.05993,17.05993,0,0,0,7.78-4.66,22.91866,22.91866,0,0,0,6.18-16V213.375c-1.64-1.21-3.29-2.41-4.96-3.58q-.49494-.345-.99-.69v400.29a16.10772,16.10772,0,0,1-.46,3.85c-1.41,5.95-6.06,10.31-11.54,10.31H442.07c-6.62,0-12-6.35-12-14.16V202.455C429.41,202.875,428.75,203.295,428.09,203.735Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><rect x="196.50257" y="79.40401" width="326.75223" height="5.95901" fill="#e6e6e6"/><path d="M653.77,165.255c-1.98-.49-3.96-.95-5.96-1.38v161.81h5.96Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><path d="M533.13,161.865c-1.99.37-3.98.75-5.96,1.16v162.66h5.96Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><path d="M363.03,620.155a26.71127,26.71127,0,0,0,1.93,9.98,25.54045,25.54045,0,0,0,1.75,3.56,27.096,27.096,0,0,0,3.02,4.18,26.76039,26.76039,0,0,0,20.12,9.11H781.16a26.82,26.82,0,0,0,0-53.64H389.85A26.84644,26.84644,0,0,0,363.03,620.155Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><rect x="427.0926" y="311.78391" width="324.76589" height="19.86336" transform="translate(948.36106 481.5662) rotate(-180)" fill="#e6e6e6"/><path d="M575.57119,305.82491h27.8087a0,0,0,0,1,0,0v0a10.92484,10.92484,0,0,1-10.92484,10.92484h-5.959a10.92484,10.92484,0,0,1-10.92484-10.92484v0A0,0,0,0,1,575.57119,305.82491Z" transform="translate(948.36106 460.70967) rotate(-180)" fill="#e6e6e6"/><path d="M230.59,635.475a289.004,289.004,0,0,0,28.12,28.95H941.29a289.004,289.004,0,0,0,28.12-28.95Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M415.75,538.665v102.56H487.6V538.665a3.448,3.448,0,0,0-2.43-3.3,3.17459,3.17459,0,0,0-1.03-.16H419.22A3.46327,3.46327,0,0,0,415.75,538.665Zm28.04,35.24a7.67033,7.67033,0,0,1,15.34,0v11.9a7.6701,7.6701,0,0,1-15.34,0Z" transform="translate(-230.59003 -161.86499)" fill="#2f2e41"/><path d="M415.53,637.945v9.89a1.94622,1.94622,0,0,0,1.93,1.94h68.43a1.93971,1.93971,0,0,0,1.93-1.94v-9.89Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M302.72,384.145v187.26a9.00714,9.00714,0,0,0,9,9h277.5a9.0071,9.0071,0,0,0,9-9V384.145a9.01147,9.01147,0,0,0-9-8.99H311.72A9.01151,9.01151,0,0,0,302.72,384.145Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M309.23,386.475v182.62a4.81833,4.81833,0,0,0,4.81,4.81H586.91a4.81829,4.81829,0,0,0,4.81-4.81V386.475a4.82046,4.82046,0,0,0-4.81-4.82H314.04A4.8205,4.8205,0,0,0,309.23,386.475Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><path d="M364.87,652.105a2.94839,2.94839,0,0,0,2.32,1.11H529.53a2.98724,2.98724,0,0,0,2.92-3.6l-2.52-11.97a2.99262,2.99262,0,0,0-1.86-2.17,2.89455,2.89455,0,0,0-1.06-.2H369.7a2.89431,2.89431,0,0,0-1.06.2,2.99238,2.99238,0,0,0-1.86,2.17l-2.52,11.97A2.98494,2.98494,0,0,0,364.87,652.105Z" transform="translate(-230.59003 -161.86499)" fill="#2f2e41"/><rect x="520.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(816.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="510.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(796.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="500.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(776.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="490.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(756.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="480.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(736.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="470.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(716.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="460.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(696.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="450.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(676.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="440.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(656.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="430.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(636.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="420.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(616.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="410.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(596.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="400.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(576.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="390.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(556.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="380.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(536.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="370.857" y="637.43078" width="5" height="3" rx="0.48819" transform="translate(516.12397 1115.99656) rotate(-180)" fill="#3f3d56"/><rect x="520.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(816.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="510.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(796.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="500.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(776.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="490.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(756.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="480.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(736.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="470.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(716.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="460.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(696.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="450.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(676.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="440.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(656.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="430.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(636.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="420.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(616.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="410.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(596.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="400.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(576.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="390.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(556.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="380.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(536.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="370.97516" y="642.43078" width="5" height="3" rx="0.48819" transform="translate(516.3603 1125.99656) rotate(-180)" fill="#3f3d56"/><rect x="437.97516" y="648.43078" width="40" height="3" rx="0.48819" transform="translate(685.3603 1137.99656) rotate(-180)" fill="#3f3d56"/><path d="M327.75187,406.8117H583.07523a1.01559,1.01559,0,0,0,0-2.03069H327.75187a1.01559,1.01559,0,0,0,0,2.03069Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><ellipse cx="335.10501" cy="231.64882" rx="5.95043" ry="6.08304" fill="#3f3d56"/><ellipse cx="314.54899" cy="231.64882" rx="5.95043" ry="6.08304" fill="#3f3d56"/><ellipse cx="293.99297" cy="231.64882" rx="5.95043" ry="6.08304" fill="#3f3d56"/><path d="M339.04,390.045a1.0948,1.0948,0,0,0,1.09,1.1h14.6a1.1053,1.1053,0,0,0,0-2.21h-14.6A1.1034,1.1034,0,0,0,339.04,390.045Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M339.04,394.195a1.09474,1.09474,0,0,0,1.09,1.1h14.6a1.10527,1.10527,0,0,0,0-2.21h-14.6A1.1034,1.1034,0,0,0,339.04,394.195Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M339.04,398.335a1.1034,1.1034,0,0,0,1.09,1.11h14.6a1.1053,1.1053,0,0,0,0-2.21h-14.6A1.09476,1.09476,0,0,0,339.04,398.335Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><rect x="104.83596" y="268.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="164.83596" y="268.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="181.83596" y="268.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="121.15615" y="268.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="201.15615" y="268.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="120.83596" y="281.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="180.83596" y="281.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="197.83596" y="281.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="137.15615" y="281.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="217.15615" y="281.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="136.83596" y="294.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="196.83596" y="294.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="213.83596" y="294.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="153.15615" y="294.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="233.15615" y="294.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="152.83596" y="307.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="212.83596" y="307.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="229.83596" y="307.5433" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="169.15615" y="307.06314" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="164.83596" y="359.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="181.83596" y="359.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="201.15615" y="359.71699" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="104.83596" y="359.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="121.15615" y="359.71699" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="120.83596" y="346.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="180.83596" y="346.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="197.83596" y="346.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="137.15615" y="346.71699" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="136.83596" y="333.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="196.83596" y="333.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="213.83596" y="333.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="153.15615" y="333.71699" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="152.83596" y="320.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="212.83596" y="320.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="229.83596" y="320.23682" width="11.00609" height="5.75992" rx="2.87996" fill="#e6e6e6"/><rect x="169.15615" y="320.71699" width="38.3657" height="5.75992" rx="2.87996" fill="#e6e6e6"/><path d="M324.69,708.905c.61.31,1.23.62,1.84.92,15.8,7.9,28.43994,12.39,45.73,17.31,1.46-16.3,2.87-44.95,4.24-62.71.36-4.61.72-8.48,1.07-11.21a15.1823,15.1823,0,0,1,.88-4.25l-.06,4.25-.15,11.21-.87,64.11a288.58782,288.58782,0,0,0,65.84,9.49c1.16.03,2.3.05,3.4.06995.39.01.77.02,1.15.02,1.25.01,2.49.02,3.74.02a289.27116,289.27116,0,0,0,69.54-8.43c-.49-16.13-.98-44.46-1.45-65.28-.1-4.07-.19-7.86-.29-11.21-.19-7.16-.39-12.31995-.58-14.05a4.36108,4.36108,0,0,1,.39.97,97.15388,97.15388,0,0,1,1.89,13.08c.35,3.35.7,7.14,1.05,11.21,1.86,21.63,3.8,51.04,5.8,63.51a285.47262,285.47262,0,0,0,34.97-12.03q9-3.75,17.68-8.09c-1.1-7.2-2.25-15.27-3.43-23.64-.92-6.49-1.87-13.16-2.84-19.75-1.5-10.18-23.79-81.32-25.19995-84.02-1.21-2.31-2.36005-4.49-3.45-6.5-2.64-4.88-4.88-8.77-6.54-11.23a55.25656,55.25656,0,0,0-29.28-22.21l-.3-.08-.21.09-20.45-6.28-2.99-.92-2.01-.62-7.08-5.39-3.85-2.93-3.61-2.75-7.06-5.37-43.71,2.69-8.51,20.49-19.06,6.97-.32995-.15-.29-.12-.3.08a55.306,55.306,0,0,0-29.28,22.21c-.93994,1.41-2.08,3.27-3.37,5.52-1.1,1.91-2.3,4.09-3.6,6.5-1.85,3.43-3.87,7.3-6.01,11.49-.47.92-.95,1.86-1.43,2.81q-1.335,2.63993-2.71,5.38995c-2.13,4.25-4.33,8.69-6.53,13.2-1.91,3.91-3.84,11.95-5.74,22.18-1.57,8.5-3.13,18.52-4.64,28.95-1.98,13.52.13,29.71-1.66,42.15C324.92,707.365,324.8,708.135,324.69,708.905Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><polygon points="303.59 473.566 295.093 440.774 287.59 469.07 303.59 473.566" opacity="0.2"/><path d="M308.07,614.065c3.04,41.88-.11,60.32,16.67,94.85a286.15918,286.15918,0,0,0,47.52,18.22q2.55.72,5.11,1.4a288.58782,288.58782,0,0,0,65.84,9.49c1.16.03,2.3.05,3.4.06995.39.01.77.02,1.15.02,1.25.01,2.49.02,3.74.02a289.27116,289.27116,0,0,0,69.54-8.43q3.42-.84,6.81-1.77a285.47262,285.47262,0,0,0,34.97-12.03q9-3.75,17.68-8.09c1.31-.66,2.62-1.32,3.91-2,6.63-11.66,10.4-25.84,10.48-42.88C590.3,633.575,318.21,588.745,308.07,614.065Z" transform="translate(-230.59003 -161.86499)" fill="#2f2e41"/><path d="M308.07788,621.23718c-.15527-2.59271-.32886-5.27093-.53131-8.05987,10.14-25.32,282.23,19.51,286.82,48.87-.01264,2.69184-.12775,5.30414-.32129,7.85456C582.92969,640.92358,324.44055,598.31555,308.07788,621.23718Z" transform="translate(-230.59003 -161.86499)" opacity="0.2"/><path d="M246.41933,635.05074a6.41621,6.41621,0,0,0,6.18311,4.331L279.09426,638.7a6.32847,6.32847,0,0,0,5.98085-4.657l3.74889-40.08722a9.794,9.794,0,0,0,4.23792.87079A9.66133,9.66133,0,0,0,292.577,575.51a8.184,8.184,0,0,0-1.73619.18056,6.54764,6.54764,0,0,0-4.87405-2.103l-40.75051,1.05229a5.85418,5.85418,0,0,0-1.00519.1248,6.36455,6.36455,0,0,0-4.87318,8.26464Zm43.17346-43.81684,2.66763-9.55274a6.50638,6.50638,0,0,0,.02037-3.37458c.12944-.00034.24362-.06168.37306-.062a6.91049,6.91049,0,0,1,.32357,13.81714A6.50522,6.50522,0,0,1,289.59279,591.2339Z" transform="translate(-230.59003 -161.86499)" fill="#2f2e41"/><path d="M244.21109,574.76459c.86818,4.96412,10.62909,8.45388,22.36585,7.8473,10.79271-.49726,19.61746-4.287,21.23421-8.77851a6.025,6.025,0,0,0-1.84436-.24588l-40.75051,1.05229A5.85418,5.85418,0,0,0,244.21109,574.76459Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M268.728,613.02251a.49659.49659,0,0,0,.15091-.06642l5.75315-3.76566a.49922.49922,0,0,0,.00032-.83621l-5.97978-3.91667a.49972.49972,0,1,0-.54792.83585l5.34091,3.49818-5.114,3.34794a.49991.49991,0,0,0,.39637.903Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><path d="M259.6412,613.44155a.5.5,0,0,0,.12608-.91842l-5.30305-3.04034,5.1256-3.80723a.49963.49963,0,1,0-.596-.80208l-5.73863,4.26265a.49951.49951,0,0,0,.04918.83476l5.96526,3.41968A.49962.49962,0,0,0,259.6412,613.44155Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><path d="M268.15573,616.32252a.48211.48211,0,0,0,.137-.05785.49976.49976,0,0,0,.16751-.68714l-8.15548-13.40836a.50026.50026,0,0,0-.85441.52058l8.15548,13.40835A.50033.50033,0,0,0,268.15573,616.32252Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><rect x="582.00856" y="398.18551" width="89" height="78" fill="#3f3d56"/><path d="M914.79019,451.10052a47.54278,47.54278,0,0,0,4.14441,28.74269c1.60845,3.27865,3.60034,7.22833,1.64181,10.31067a6.35146,6.35146,0,0,1-4.78427,2.65123,15.579,15.579,0,0,1-5.58345-.723" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><ellipse cx="606.00856" cy="256.68551" rx="3" ry="2.5" fill="#3f3d56"/><ellipse cx="617.00856" cy="257.68551" rx="3" ry="2.5" fill="#3f3d56"/><ellipse cx="628.00856" cy="262.68551" rx="3" ry="2.5" fill="#3f3d56"/><ellipse cx="641.00856" cy="259.68551" rx="3" ry="2.5" fill="#3f3d56"/><path d="M598.524,471.43367c14.57046-4.04481,30.799.29013,42.05845,10.21976A43.88754,43.88754,0,0,1,653.461,501.80168c2.8747,9.25872,3.35019,19.02542,3.65131,28.6497.33295,10.64162.62195,21.28479.932,31.9271.29563,10.14716.33033,20.34171,1.00732,30.47209.56808,8.50055,1.92876,17.32514,6.47812,24.698,4.21772,6.83533,10.88125,11.45055,18.41173,13.99454,7.63283,2.57857,15.86067,3.17883,23.86752,3.12609a184.22208,184.22208,0,0,0,27.82752-2.20319c17.48705-2.80135,34.75967-9.94681,45.44026-24.68866a40.90967,40.90967,0,0,0,7.92253-23.02829c.22517-9.67482-2.86589-19.0455-6.25147-27.98171-3.29459-8.69606-6.85892-17.26379-8.94441-26.35578a110.576,110.576,0,0,1-2.74946-25.94259,114.04736,114.04736,0,0,1,12.22941-50.22476,98.67948,98.67948,0,0,1,15.01373-22.075c6.16842-6.712,13.80654-12.25291,22.88968-14.06934a27.63786,27.63786,0,0,1,13.36778.53755c1.85346.555,2.64543-2.33953.79752-2.89284-8.99811-2.69425-18.77351-.64565-26.75136,4.03063-7.84426,4.598-14.04332,11.49575-19.30419,18.80938A116.16931,116.16931,0,0,0,772.86781,538.54c5.3387,17.489,16.95029,35.69377,11.96192,54.62083-4.36632,16.56686-19.49159,27.82514-35.11678,32.911-9.47941,3.08546-19.41782,4.39075-29.33129,5.06595-8.37748.57059-16.86908.93352-25.2225-.1431-7.67264-.98887-15.56465-3.33433-21.51352-8.48465-6.52072-5.64541-9.50111-13.75775-10.79827-22.08308-1.46766-9.41955-1.25195-19.13285-1.52886-28.63751l-.9452-32.44314c-.53384-18.32358-.07373-38.63119-11.99528-53.81409a49.95822,49.95822,0,0,0-39.69658-18.60967,44.882,44.882,0,0,0-10.95493,1.61827,1.50128,1.50128,0,0,0,.79752,2.89283Z" transform="translate(-230.59003 -161.86499)" fill="#3f3d56"/><path d="M385.55645,452.45491a57.57081,57.57081,0,0,0,114.03711-15.90964l-.114-.81682a57.57081,57.57081,0,0,0-113.90549,16.724Z" transform="translate(-230.59003 -161.86499)" fill="#ffb6b6"/><path d="M436.30821,500.05886c-2.97656-5.99564-6.03523-12.43313-5.22664-19.078s7.30115-13.01532,13.70389-11.06278c3.82874,1.16759,6.73216,4.93479,10.73093,5.11467,5.502.2475,8.63493-6.05895,10.32968-11.29926l6.90225-21.34241c13.3133,10.45893-3.54751-.50593,12.94413-4.33463,6.46988-1.502,13.0015-4.41026,16.78137-9.87177s3.72872-13.91344-1.49453-18.01627c-2.56109-2.01172-5.96348-2.76793-8.41174-4.91554a9.40722,9.40722,0,0,1,7.457-16.3953l-17.56635-2.13577,5.2-9.47967c-3.75968,2.98431-9.00488,3.40151-13.73187,2.56672s-9.18269-2.765-13.80855-4.04671c-22.2072-6.153-47.956,4.76087-58.97743,24.99811a22.4777,22.4777,0,0,0-24.484,7.15867c-4.68052,5.98169-5.93217,13.94744-6.08887,21.54108a93.36791,93.36791,0,0,0,9.66245,43.21851c2.06958,4.17151,4.51579,8.26359,8.03345,11.31494s43.27139,19.95473,47.85937,19.1578" transform="translate(-230.59003 -161.86499)" fill="#2f2e41"/><path d="M851.59859,460.5505a29.65677,29.65677,0,0,1-.99,7.69v.01c-.01.05-.03.1-.04.15-2.02,7.43-6.84,12.65-12.47,12.65-5.6,0-10.4-5.18-12.45-12.55-.14-.51-.26-1.02-.37-1.55-.14-.59-.25-1.2-.34-1.83-.08-.5-.14-1.01-.19-1.53-.07-.72-.12-1.44-.13-2.19v-.01c-.02-.28-.02-.56-.02-.84v-.25l.01-.01a29.29714,29.29714,0,0,1,.25-3.79c.07-.53.15-1.04.25-1.55.12-.62.25-1.23.41-1.83.13-.53.28-1.04.44-1.55.22-.68.46-1.34.73-1.97.17-.41.35-.81.53-1.2,2.46-5.06,6.42-8.35,10.88-8.35,6.17,0,11.37,6.29,12.98,14.87.02.13.05.26.06.39v.01A29.58013,29.58013,0,0,1,851.59859,460.5505Z" transform="translate(-230.59003 -161.86499)" fill="#e6e6e6"/><path d="M827.34859,448.84048a.79582.79582,0,0,1-.66.76c.17-.41.35-.81.53-1.2A.83923.83923,0,0,1,827.34859,448.84048Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><rect x="599.0043" y="286.06472" width="10.35447" height="1.55454" rx="0.77727" fill="#6c63ff"/><path d="M827.07857,452.34048a.781.781,0,0,1-.78.78h-.78c.13-.53.28-1.04.44-1.55h.34A.779.779,0,0,1,827.07857,452.34048Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><rect x="598.10822" y="289.70287" width="2.97042" height="1.55454" rx="0.77727" fill="#6c63ff"/><rect x="603.32252" y="289.57327" width="10.35447" height="1.55454" rx="0.77727" fill="#6c63ff"/><rect x="597.83833" y="293.21142" width="2.97042" height="1.55454" rx="0.77727" fill="#6c63ff"/><rect x="602.42644" y="293.21142" width="2.97042" height="1.55454" rx="0.77727" fill="#6c63ff"/><path d="M826.99862,455.72049a.78106.78106,0,0,1-.78.78h-1.36c.07-.53.15-1.04.25-1.55h1.11A.77256.77256,0,0,1,826.99862,455.72049Z" transform="translate(-230.59003 -161.86499)" fill="#6c63ff"/><rect x="607.64074" y="293.08183" width="10.35447" height="1.55454" rx="0.77727" fill="#6c63ff"/><path d="M827.34859,460.84048a.77253.77253,0,0,1-.78.77h-1.41a.79058.79058,0,0,1-.54-.21v-.01c-.02-.28-.02-.56-.02-.84v-.25l.01-.01a.76989.76989,0,0,1,.55-.23h1.41A.781.781,0,0,1,827.34859,460.84048Z" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><rect x="599.0043" y="298.06472" width="10.35447" height="1.55454" rx="0.77727" fill="#ccc"/><path d="M827.07857,464.34048a.781.781,0,0,1-.78.78h-1.36c-.08-.5-.14-1.01-.19-1.53a.33979.33979,0,0,1,.13995-.02h1.41A.779.779,0,0,1,827.07857,464.34048Z" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><rect x="598.10822" y="301.70287" width="2.97042" height="1.55454" rx="0.77727" fill="#ccc"/><rect x="603.32252" y="301.57327" width="10.35447" height="1.55454" rx="0.77727" fill="#ccc"/><rect x="597.83833" y="305.21142" width="2.97042" height="1.55454" rx="0.77727" fill="#ccc"/><rect x="602.42644" y="305.21142" width="2.97042" height="1.55454" rx="0.77727" fill="#ccc"/><path d="M826.99862,467.72049a.78106.78106,0,0,1-.78.78h-.57c-.14-.51-.26-1.02-.37-1.55h.94A.77256.77256,0,0,1,826.99862,467.72049Z" transform="translate(-230.59003 -161.86499)" fill="#ccc"/><rect x="607.64074" y="305.08183" width="10.35447" height="1.55454" rx="0.77727" fill="#ccc"/></svg>
\ No newline at end of file
diff --git a/src/frontend/src/assets/undraw_project_completed_re_jr7u.svg b/src/frontend/src/assets/undraw_project_completed_re_jr7u.svg
new file mode 100644
index 000000000..c3170cd04
--- /dev/null
+++ b/src/frontend/src/assets/undraw_project_completed_re_jr7u.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="801.92126" height="597.4574" viewBox="0 0 801.92126 597.4574" xmlns:xlink="http://www.w3.org/1999/xlink"><circle id="b" cx="436.31396" cy="42" r="18.93406" fill="#6c63ff"/><path id="c-205" d="M434.43768,49.22279c-.42596,.00072-.84058-.13708-1.1814-.39262l-.02112-.01585-4.44977-3.40392c-.8667-.66447-1.0307-1.90575-.36621-2.77248,.66443-.86673,1.90576-1.0307,2.77246-.36623h0l2.8822,2.21021,6.81079-8.88542c.66418-.86635,1.90491-1.03024,2.77124-.36607l.00006,.00003,.00055,.00043-.0423,.05869,.0434-.05869c.86536,.66507,1.02887,1.90515,.3656,2.77185l-8.01099,10.44653c-.37567,.48787-.95709,.77295-1.57281,.77116l-.00171,.00238Z" fill="#fff"/><circle id="d" cx="436.31396" cy="170" r="18.93405" fill="#6c63ff"/><path id="e-206" d="M434.43768,177.22278c-.42596,.0007-.84058-.13708-1.1814-.39264l-.02112-.01584-4.44977-3.40393c-.8667-.66446-1.0307-1.90573-.36621-2.77246s1.90576-1.03067,2.77246-.36621l2.8822,2.21021,6.81079-8.88541c.66418-.86633,1.90491-1.03021,2.77124-.36603l.00006,.00003,.00055,.00043-.0423,.05869,.0434-.05869c.86536,.66507,1.02887,1.90515,.3656,2.77185l-8.01099,10.44653c-.37567,.48785-.95709,.77295-1.57281,.77115l-.00171,.00232Z" fill="#fff"/><path d="M483.8642,368.95905c-.23236-5.93018,4.38666-10.9259,10.31683-11.15823,.63226-.02478,1.2655,.00635,1.89227,.09299l17.341-34.02234,9.79852,17.25595-17.96954,29.66269c-1.20624,5.84369-6.92139,9.60303-12.76508,8.39679-4.88965-1.00934-8.45087-5.23767-8.61407-10.22778l.00006-.00006Z" fill="#ffb7b7"/><polygon points="564.71002 583.19397 551.10101 583.19299 544.62701 530.70203 564.71198 530.703 564.71002 583.19397" fill="#ffb7b7"/><path d="M568.18018,596.3855l-43.88049-.00165v-.55499c.00067-9.43243,7.64709-17.07874,17.07953-17.07922h.0011l26.80072,.0011-.00085,17.63477Z" fill="#2f2e41"/><polygon points="638.48297 583.19397 624.87402 583.19299 618.40002 530.70203 638.48499 530.703 638.48297 583.19397" fill="#ffb7b7"/><path d="M641.95349,596.3855l-43.88049-.00165v-.55499c.00067-9.43243,7.64709-17.07874,17.07953-17.07922h.0011l26.80072,.0011-.00085,17.63477Z" fill="#2f2e41"/><path d="M504.76678,339.34869l-5.94092,9.90152s9.90149,0,11.88177,14.8522l7.9212-9.90149-13.86206-14.85223Z" fill="#e5e5e5"/><path d="M608.73242,318.55554s15.84241,41.58627,18.81281,67.33014c2.9704,25.7439,7.9212,94.06415,7.9212,94.06415l9.90155,88.12335-27.72418,3.96057-11.88184-89.11346-26.73401-88.12335-5.94092,88.12329-4.95074,80.20215-25.7439,.99011-1.98035-83.17261-10.89166-105.94598,5.94092-50.49762,73.27112-5.94073Z" fill="#2f2e41"/><polygon points="589.42401 192.312 599.32599 199.242 612.198 328.952 531.99597 330.93201 542.888 240.82899 552.789 215.08501 559.93597 205.636 589.42401 192.312" fill="#e5e5e5"/><path d="M591.40485,285.38553l3.02985-89.56699s5.88153,.45349,7.86182,3.42401,34.65521,8.91135,34.65521,8.91135l-5.94092,92.08389s24.75372,73.27106,15.84241,77.23169-24.75372,2.97046-24.75372,2.97046l-30.69464-95.05441Z" fill="#2f2e41"/><path d="M543.38263,273.99881l10.50378-60.36459-23.37579,15.80786,5.94092,43.56662-4.95074,29.7045s-18.81287,82.18243-12.87201,85.15289,12.87201,0,12.87201,0l11.88184-83.17264v-30.69464Z" fill="#2f2e41"/><path d="M537.44171,227.46179l-6.93109,1.98032-2.97046,39.60599-4.95074,34.65524-23.76355,42.57635s11.88177-7.92117,16.83252,14.85226l26.17065-45.56387-4.38733-88.10629Z" fill="#2f2e41"/><path d="M591.2995,360.83893c.92328-5.86249,6.42419-9.86649,12.28668-8.94324,.62506,.09845,1.24017,.25189,1.83826,.45859l23.61572-30.00879,6.26233,18.82983-23.38599,25.61002c-2.31775,5.49835-8.65393,8.07678-14.15228,5.75903-4.60071-1.93933-7.27332-6.77856-6.46472-11.70544Z" fill="#ffb7b7"/><polygon points="631.50598 350.23999 622.59497 361.13199 610.71301 340.33899 615.66302 331.42801 631.50598 350.23999" fill="#e5e5e5"/><path d="M629.52563,211.61938l7.9212-3.9606s5.94092,7.9212,6.93103,14.85226,5.94092,15.84238,5.94092,20.79312,13.86212,51.48776,13.86212,51.48776l-31.68488,64.35977s-6.93103-23.76358-21.78326-25.7439l24.75372-34.65527-13.86212-24.75372,7.92126-62.37943Z" fill="#2f2e41"/><path d="M800.92126,596.99609H419.92126c-.55231,0-1-.44769-1-1s.44769-1,1-1h381c.55231,0,1,.44769,1,1s-.44769,1-1,1Z" fill="#cbcbcb"/><path d="M365,212H0v-84H365v84Z" fill="#fff"/><path d="M52.67781,155.77438c-1.96416,0-3.55641,1.59225-3.55641,3.55643s1.59225,3.5564,3.55641,3.5564H312.33719c1.96414,0,3.55643-1.59225,3.55643-3.5564s-1.59229-3.55643-3.55643-3.55643H52.67781Z" fill="#6c63ff"/><path d="M52.67781,177.11282c-1.96416-.00415-3.55977,1.58475-3.5639,3.54892-.00415,1.96414,1.58475,3.55975,3.5489,3.5639H216.82214c1.96414,0,3.55643-1.59225,3.55643-3.5564s-1.59229-3.55643-3.55643-3.55643H52.67781Z" fill="#6c63ff"/><path d="M365,212H0v-84H365v84ZM6,206H359v-72H6v72Z" fill="#e5e5e5"/><path d="M365,340H0v-84H365v84Z" fill="#fff"/><path d="M52.67781,283.77438c-1.96416,0-3.55641,1.59225-3.55641,3.55643s1.59225,3.5564,3.55641,3.5564H312.33719c1.96414,0,3.55643-1.59225,3.55643-3.5564s-1.59229-3.55643-3.55643-3.55643H52.67781Z" fill="#e6e6e6"/><path d="M52.67781,305.11282c-1.96416-.00415-3.55977,1.58475-3.56392,3.54892-.00414,1.96414,1.58476,3.55975,3.54892,3.5639H216.82214c1.96414,0,3.55643-1.59225,3.55643-3.55643s-1.59229-3.5564-3.55643-3.5564H52.67781Z" fill="#e6e6e6"/><path d="M365,340H0v-84H365v84ZM6,334H359v-72H6v72Z" fill="#e5e5e5"/><path d="M368,84H3V0H368V84Z" fill="#fff"/><path d="M55.67781,27.77438c-1.96414,.00359-3.5535,1.59874-3.54993,3.56288,.00357,1.95909,1.59084,3.54636,3.54993,3.54993H315.33722c1.96417-.00359,3.55353-1.59874,3.54993-3.56288-.0036-1.95909-1.59082-3.54636-3.54993-3.54993H55.67781Z" fill="#6c63ff"/><path d="M55.67781,49.11281c-1.96414-.00414-3.55977,1.58476-3.5639,3.5489s1.58476,3.55977,3.5489,3.5639H219.82214c1.96414,.00359,3.5593-1.58577,3.5629-3.54993,.00357-1.96414-1.58578-3.5593-3.54993-3.56288-.00433-.00002-.00864-.00002-.01297,0H55.67781Z" fill="#6c63ff"/><path d="M368,84H3V0H368V84ZM9,78H362V6H9V78Z" fill="#e5e5e5"/><path d="M739.24805,597.4574v-72.34003s28.19165,51.28601,0,72.34003Z" fill="#f1f1f1"/><path d="M740.9895,597.4447l-53.28961-48.92126s56.84515,13.91553,53.28961,48.92126Z" fill="#f1f1f1"/><circle id="f" cx="484.31396" cy="347.84558" r="18.93405" fill="#6c63ff"/><path id="g-207" d="M482.43768,355.06836c-.42596,.00073-.84058-.13708-1.1814-.39261l-.02112-.01587-4.44977-3.40393c-.8667-.66446-1.03064-1.90573-.36621-2.77243,.66449-.86673,1.90576-1.03067,2.77246-.36621h0l2.8822,2.21021,6.81079-8.88541c.66418-.86633,1.90497-1.03021,2.7713-.366h0l.00055,.00043-.0423,.05869,.0434-.05869c.86536,.66507,1.02887,1.90515,.3656,2.77185l-8.01099,10.44653c-.37567,.48785-.95709,.77295-1.57281,.77115l-.00171,.00229Z" fill="#fff"/><circle cx="561.58681" cy="166.8501" r="27.103" fill="#ffb6b6"/><path d="M585.26218,187.67421s8.02722-16.25754,7.88428-22.46415c-.14294-6.20661-4.52893-22.17827-6.37963-23.23151s-21.80963-11.18694-27.21878-8.14007-14.92809,13.4682-25.19506,16.28763c-2.90394,.79745-.36864,15.71588-.36864,15.71588l12.01448-1.73784s12.52606-11.24712,13.06773-3.58854c.54166,7.65857,12.15742,4.46876,12.15742,4.46876l.14294,6.20661,4.75464,.25579,1.30903-6.60533s2.13657,13.46645-.62443,20.47051,8.45603,2.36228,8.45603,2.36228Z" fill="#2f2e41"/></svg>
\ No newline at end of file
diff --git a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
index 44920d83d..1c87af469 100644
--- a/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
+++ b/src/frontend/src/modals/newFlowModal/components/undrawCards/index.tsx
@@ -3,6 +3,9 @@ import { useLocation, useNavigate } from "react-router-dom";
 import BlogPost from "../../../../assets/undraw_blog_post_re_fy5x.svg?react";
 import ChatBot from "../../../../assets/undraw_chat_bot_re_e2gj.svg?react";
 import PromptChaining from "../../../../assets/undraw_cloud_docs_re_xjht.svg?react";
+import HierarchicalTasks from "../../../../assets/undraw_educator_re_ju47.svg?react";
+import ComplexAgent from "../../../../assets/undraw_firmware_re_fgdy.svg?react";
+import SequentialTasks from "../../../../assets/undraw_project_completed_re_jr7u.svg?react";
 import APIRequest from "../../../../assets/undraw_real_time_analytics_re_yliv.svg?react";
 import BasicPrompt from "../../../../assets/undraw_short_bio_re_fmx0.svg?react";
 import TransferFiles from "../../../../assets/undraw_transfer_files_re_a2a9.svg?react";
@@ -92,6 +95,36 @@ export default function UndrawCardComponent({
             preserveAspectRatio="xMidYMid meet"
           />
         );
+      case "Sequential Tasks Agent":
+        return (
+          <SequentialTasks
+            style={{
+              width: "80%",
+              height: "80%",
+            }}
+            preserveAspectRatio="xMidYMid meet"
+          />
+        );
+      case "Hierarchical Tasks Agent":
+        return (
+          <HierarchicalTasks
+            style={{
+              width: "80%",
+              height: "80%",
+            }}
+            preserveAspectRatio="xMidYMid meet"
+          />
+        );
+      case "Complex Agent":
+        return (
+          <ComplexAgent
+            style={{
+              width: "80%",
+              height: "80%",
+            }}
+            preserveAspectRatio="xMidYMid meet"
+          />
+        );
       default:
         return (
           <TransferFiles