diff --git a/frontend/resources/images/community.svg b/frontend/resources/images/community.svg
new file mode 100644
index 000000000..555c4838f
--- /dev/null
+++ b/frontend/resources/images/community.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" viewBox="0 0 48 48" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-4c303e10-f7a4-11ec-a5eb-5b34f1b9a5f8" rx="0" ry="0"><g id="shape-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><g id="fills-4c303e11-f7a4-11ec-a5eb-5b34f1b9a5f8"><rect rx="24" ry="24" x="0" y="0" transform="" width="48" height="48" style="fill: rgb(49, 239, 184); fill-opacity: 1;"/></g></g><g id="shape-fd4cc483-02bb-11ed-9a39-e16fc89e0613" rx="0" ry="0"><g id="shape-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc484-02bb-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M46,23.509699812659164C46,13.839405665317372,36.37388034188007,6,24.5,6C12.626119658119023,6,3,13.839405665317372,3,23.509699812659164C3,28.169402480873487,5.8043350427342375,34.21014187922765,12.347538461537624,37.128363452956364C10.478324786324265,42.964954748528726,6.739162393161678,44.91050987173867,6.739162393161678,44.91050987173867C16.08670085470112,48.80154604410063,23.565025641025386,41.01947369937625,23.565025641025386,41.01947369937625C38.521675213674825,41.01947369937625,46,32.158142335227694,46,23.509699812659164ZZ" style="fill: rgb(255, 255, 255);"/></g></g><g id="shape-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc485-02bb-11ed-9a39-e16fc89e0613"><path fill-rule="evenodd" clip-rule="evenodd" rx="0" ry="0" d="M16.410854700854543,35.29523734014356L15.495726495726558,38.15234631352496C14.940034188033678,39.8859746460289,14.238068376067531,41.348788366345616,13.489059829060352,42.57108374810332C14.859179487179063,42.38700981175589,16.1183076923071,41.95115828601456,17.234837606836663,41.41501053901948C18.48367521367436,40.81501098794752,19.504649572649214,40.108122627962985,20.211025641025117,39.55056748957804C20.56090598290575,39.274049177954566,20.825521367521105,39.04086416724158,20.99384615384588,38.88590132022409C21.077641025640332,38.80864211877133,21.13717948717931,38.75153105039135,21.170256410256115,38.71893848218497C21.18422222222216,38.70501256667876,21.19377777777754,38.69560516631009,21.198188034187297,38.69116072519091C21.198923076923165,38.69041998500461,21.199658119658125,38.68982739285548,21.199658119658125,38.689382948743514L22.16403418803384,37.68612444013661L23.565025641025386,37.68612444013661C37.124358974358984,37.68612444013661,42.69230769230671,29.912426552824854,42.69230769230671,23.50969060270245C42.69230769230671,16.30843673152458,35.24044444444371,9.333330839287555,24.5,9.333330839287555C13.75955555555447,9.333330839287555,6.307692307691468,16.30843673152458,6.307692307691468,23.50969060270245C6.307692307691468,26.957688022861475,8.4346119658112,31.73798074247452,13.686786324786226,34.08020121221398L16.410854700854543,35.29523734014356ZZM10.806888888888352,45.93982196830575C9.50586324786309,45.81619243117757,8.143608547008625,45.49508156032607,6.739162393161678,44.91048940513383C6.739162393161678,44.91048940513383,8.100755555555224,44.20204549075697,9.591128205127461,42.35760242635115C10.570940170940048,41.14552925916769,11.606615384614997,39.4428638664599,12.347538461537624,37.128347079695686C5.8043350427342375,34.210127040927546,3,28.16931674593343,3,23.50969060270245C3,13.839401541855068,12.626119658119023,6,24.5,6C36.37388034188007,6,46,13.839401541855068,46,23.50969060270245C46,32.15812857626224,38.521675213674825,41.019455279424164,23.565025641025386,41.019455279424164C23.565025641025386,41.019455279424164,18.165401709400612,46.63871033427631,10.806888888888352,45.93982196830575ZZ" style="fill: rgb(0, 0, 0);"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/contributing.svg b/frontend/resources/images/contributing.svg
new file mode 100644
index 000000000..6e77c09ab
--- /dev/null
+++ b/frontend/resources/images/contributing.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-22974974-f7a4-11ec-a5eb-5b34f1b9a5f8" viewBox="0 0 48 48" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-22974974-f7a4-11ec-a5eb-5b34f1b9a5f8" rx="0" ry="0"><g id="shape-22974978-f7a4-11ec-a5eb-5b34f1b9a5f8"><g id="fills-22974978-f7a4-11ec-a5eb-5b34f1b9a5f8"><rect rx="24" ry="24" x="0" y="0" transform="" width="48" height="48" style="fill: rgb(49, 239, 184); fill-opacity: 1;"/></g></g><g id="shape-fd4cc480-02bb-11ed-9a39-e16fc89e0613" rx="0" ry="0"><g id="shape-fd4cc481-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc481-02bb-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M12.322918022224258,16.99483368241954C13.61232450629177,18.28497733749373,15.703848968210878,18.28497733749373,16.99325545227839,16.99483368241954C18.282661936344994,15.705423897456058,18.282661936344994,13.614627951320472,16.99325545227839,12.324484296246283L14.658820605483925,9.990043473270816L21.665060618795906,2.9836387498780823C22.309396926712907,2.3387870833739726,23.35515915767246,2.3387870833739726,24.000229333822062,2.9836387498780823L29.837417253156673,8.820988386505633C32.41696408952339,6.241434946467962,36.599279145128094,6.241434946467962,39.17809211326312,8.820988386505633C41.757638949629836,11.400541826542849,41.757638949629836,15.58213371881402,39.17809211326312,18.16168715885169L45.01674776906111,24.00035776167897C45.66108407697902,24.64469571910513,45.66108407697902,25.69046062722873,45.01674776906111,26.3355324547656L38.012709360446024,33.33885492369245L35.67900838188325,31.005147970827693C34.388868029584046,29.715004315753504,32.29807743589845,29.715004315753504,31.008670951830936,31.005147970827693C29.718530599531732,32.294557755791175,29.718530599531732,34.38535370192676,31.008670951830936,35.67549735700095L33.3423719303928,38.009204309865254L26.33539804884822,45.01619612934701C25.690327872698617,45.66126795688433,24.644565641739973,45.66126795688433,24.000229333822062,45.01619612934701L18.16157367802407,39.17825939663089C15.582026841657353,41.7570789665574,11.40044565428434,41.7570789665574,8.820898817917623,39.17825939663089C6.241939076136987,36.59870595659322,6.241939076136987,32.41711406432205,8.820898817917623,29.83756062428438L2.983637511759298,24.00035776167897C2.338787496079931,23.355285934142103,2.338787496079931,22.309521026018956,2.983637511759298,21.66518306859234L9.988483175430702,14.660392859444073L12.322918022224258,16.99483368241954ZZ" style="fill: rgb(255, 255, 255);"/></g></g><g id="shape-fd4cc482-02bb-11ed-9a39-e16fc89e0613"><g id="fills-fd4cc482-02bb-11ed-9a39-e16fc89e0613"><path fill-rule="evenodd" clip-rule="evenodd" rx="0" ry="0" d="M16.49325545227839,18.49483368241954C15.203848968210878,19.78497733749373,13.11232450629177,19.78497733749373,11.822918022224258,18.49483368241954L9.488483175430702,16.160392859444073L2.483637511759298,23.16518306859234C1.8387874960799309,23.809521026018956,1.8387874960799309,24.855285934142103,2.483637511759298,25.50035776167897L8.320898817917623,31.33756062428438C5.741939076136987,33.91711406432205,5.741939076136987,38.09870595659322,8.320898817917623,40.67825939663089C10.90044565428434,43.2570789665574,15.082026841657353,43.2570789665574,17.66157367802407,40.67825939663089L23.500229333822062,46.51619612934701C24.144565641739973,47.16126795688433,25.190327872698617,47.16126795688433,25.83539804884822,46.51619612934701L32.8423719303928,39.509204309865254L30.508670951830936,37.17549735700095C29.218530599531732,35.88535370192676,29.218530599531732,33.794557755791175,30.508670951830936,32.50514797082769C31.79807743589845,31.215004315753504,33.888868029584046,31.215004315753504,35.17900838188325,32.50514797082769L37.512709360446024,34.83885492369245L44.51674776906111,27.8355324547656C45.16108407697902,27.19046062722873,45.16108407697902,26.14469571910513,44.51674776906111,25.50035776167897L38.67809211326312,19.66168715885169C41.257638949629836,17.08213371881402,41.257638949629836,12.900541826542849,38.67809211326312,10.320988386505633C36.099279145128094,7.741434946467962,31.91696408952339,7.741434946467962,29.337417253156673,10.320988386505633L23.500229333822062,4.483638749878082C22.85515915767246,3.8387870833739726,21.809396926712907,3.8387870833739726,21.165060618795906,4.483638749878082L14.158820605483925,11.490043473270816L16.49325545227839,13.824484296246283C17.782661936344994,15.114627951320472,17.782661936344994,17.205423897456058,16.49325545227839,18.49483368241954ZZM18.82989190376884,11.491511213492686L22.333378844541585,7.987281433640874L29.338884989620965,14.992805512900304L31.67405370464803,12.65763081981413C32.963460188713725,11.367487164739487,35.05498465063283,11.367487164739487,36.344391134700345,12.65763081981413C37.63379761876786,13.947040604777158,37.63379761876786,16.037836550912743,36.344391134700345,17.327980205986933L34.00922241967419,19.662421028962854L41.01472856475357,26.668678978333446L37.514177096910316,30.169973277741065C34.93463026054451,27.591887577925718,30.753782941403188,27.591887577925718,28.17423610503647,30.170707147852227C25.595423136901445,32.749526717778735,25.595423136901445,36.93111861004991,28.17350223680387,39.51067205008758L24.66854755956774,43.01490182993939L17.66304141448836,36.009377750679505L15.327872699461295,38.34455244376613C14.038466215393782,39.63396222872916,11.946941753474675,39.63396222872916,10.657535269408982,38.34381857365497C9.368128785341469,37.054408788691944,9.368128785341469,34.96361284255636,10.657535269408982,33.67420305759288L12.992703984435138,31.339028364506703L5.987564773471604,24.333504285246818L9.489217043663302,20.831476115728037C12.06876388002911,23.410295685654546,16.250345067403032,23.410295685654546,18.829158035537148,20.831476115728037C21.408704871902955,18.251922675690366,21.408704871902955,14.070330783419195,18.82989190376884,11.491511213492686ZZ" style="fill: rgb(0, 0, 0);"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/deco-circle.svg b/frontend/resources/images/deco-circle.svg
new file mode 100644
index 000000000..c3141e438
--- /dev/null
+++ b/frontend/resources/images/deco-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><circle id="a" cx="12" cy="12" r="12" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/deco-line1.svg b/frontend/resources/images/deco-line1.svg
new file mode 100644
index 000000000..8009a6014
--- /dev/null
+++ b/frontend/resources/images/deco-line1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="2877 1278 16 49"><path d="m2893 1278-12 10 8 10-10 8 10 12-12 9"/><path stroke="#31efb8" stroke-width="2" d="m2893 1278-12 10 8 10-10 8 10 12-12 9" class="stroke-shape"/></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/deco-line2.svg b/frontend/resources/images/deco-line2.svg
new file mode 100644
index 000000000..fe70ee9bd
--- /dev/null
+++ b/frontend/resources/images/deco-line2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3622 1608 45 42"><path d="M3632 1608v15h12l-1 13h15l-1 14"/><path stroke="#31efb8" stroke-width="2" d="M3632 1608v15h12l-1 13h15l-1 14" class="stroke-shape"/></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/deco-square.svg b/frontend/resources/images/deco-square.svg
new file mode 100644
index 000000000..31e0d2cfc
--- /dev/null
+++ b/frontend/resources/images/deco-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="3492 1152 23 23"><path d="m3492 1159 16-7 7 16-15 7-8-16Z"/><g class="inner-stroke-shape"><defs><clipPath id="b"><use href="#a"/></clipPath><path id="a" fill="none" stroke="#31efb8" stroke-opacity="1" stroke-width="4" d="m3492 1159 16-7 7 16-15 7-8-16Z"/></defs><use clip-path="url('#b')" href="#a"/></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/onboarding-people.svg b/frontend/resources/images/onboarding-people.svg
new file mode 100644
index 000000000..e35d57f0f
--- /dev/null
+++ b/frontend/resources/images/onboarding-people.svg
@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="260.9015506822461" xmlns="http://www.w3.org/2000/svg" height="402.96093918234305" id="screenshot-a1bfc440-02bc-11ed-9a39-e16fc89e0613" viewBox="0 0 260.902 402.961" style="-webkit-print-color-adjust: exact;" fill="none" version="1.1"><g id="shape-a1bfc440-02bc-11ed-9a39-e16fc89e0613" rx="0" ry="0"><g id="shape-045e60a0-02ba-11ed-9a39-e16fc89e0613"><g id="fills-045e60a0-02ba-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M238.27451822770945,222.79883003154646C238.27451822770945,222.79883003154646,234.92931830453017,174.96024236818766,217.95271200575098,159.39663210776484C197.88990572390503,140.99467857580612,174.2400759838074,138.16414419244506,174.05921574794866,117.83876422045046C173.88661629228045,97.51417188739083,184.48392252105077,91.2211885029601,190.03865646461418,75.81185455941386C200.1764535193197,47.68269210715334,184.8417191594699,31.07341696536764,184.8417191594699,31.07341696536764C184.28712697855917,31.112197828507988,200.2322348026637,42.28844890197388,199.29546111344553,73.9159989701302C198.31415373068194,107.04710495453855,236.6413714225182,122.38562430896786,248.58691215973704,94.9707686886045C248.58691215973704,94.9707686886045,230.08933229815193,105.74521780380542,227.3805283842712,67.00751707653103C225.61747578887935,41.931595175379016,235.11015740243147,26.55621643540212,216.2499690554896,13.35376766538434C197.3802549217571,0.15199865615795716,178.25806172599368,20.072872988970857,178.25806172599368,20.072872988970857C178.25806172599368,20.072872988970857,162.01494936367635,-0.2955137678018218,132.7987838559029,9.203254274472329C97.19486795131525,20.78072279831713,112.36598543171749,45.6113994979512,106.01250380056808,58.467588387980186C99.65970740091325,71.32379762640198,94.26614341826098,71.29901129170776,97.86269998072476,86.23724264456291C104.88232858297033,115.42230317019721,137.44491717595247,120.0224808267435,139.25439667033243,145.89924317423424C140.87538475880683,169.08045283363163,93.75745577891303,177.16652580024424,88.62243693932942,203.58487162402366C85.11266866414371,224.58337332486622,90.68767190986637,233.11910767935024,90.68767190986637,233.11910767935024L238.27451822770945,222.79883003154646ZL238.27451822770945,222.79883003154646Z" style="fill: rgb(49, 239, 184);"/></g></g><g id="shape-045eaec0-02ba-11ed-9a39-e16fc89e0613"><g id="fills-045eaec0-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M147.94321471471812,64.52826520184726C143.53261165075946,64.75087559896997,139.77050366989988,61.35476810720479,139.54879482890738,56.941751161393086C139.32713249221615,52.52939925818055,142.72330595494986,48.77140707496369,147.13391366933593,48.54886318210174C151.5445213837238,48.32631928923843,155.30662471415144,51.72236027674421,155.5283382055777,56.1354437268169C155.74999589183426,60.54772912576732,152.35315737823476,64.30576781387163,147.94321471471812,64.52826520184726ZZ" style="fill: none;"/></g><g id="strokes-045eaec0-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M147.94321471471812,64.52826520184726C143.53261165075946,64.75087559896997,139.77050366989988,61.35476810720479,139.54879482890738,56.941751161393086C139.32713249221615,52.52939925818055,142.72330595494986,48.77140707496369,147.13391366933593,48.54886318210174C151.5445213837238,48.32631928923843,155.30662471415144,51.72236027674421,155.5283382055777,56.1354437268169C155.74999589183426,60.54772912576732,152.35315737823476,64.30576781387163,147.94321471471812,64.52826520184726ZZ" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g><g id="shape-045fe740-02ba-11ed-9a39-e16fc89e0613"><g id="fills-045fe740-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M111,76.8366060559265C112.04292962429008,85.76877488127002,120.86454534416589,100.8104140444409,140.6208299320515,99.81906192022893C160.37784747825208,98.82833587221921,165.1301860556996,83.10505856752548,165.9416100096514,74.08094796920886" style="fill: none;"/></g><g id="strokes-045fe740-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M111,76.8366060559265C112.04292962429008,85.76877488127002,120.86454534416589,100.8104140444409,140.6208299320515,99.81906192022893C160.37784747825208,98.82833587221921,165.1301860556996,83.10505856752548,165.9416100096514,74.08094796920886" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g><g id="shape-04611fc0-02ba-11ed-9a39-e16fc89e0613"><g id="fills-04611fc0-02ba-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M182.20616877062912,285.7870430372775C188.92557630098327,226.01681626080767,129.17762243375728,222.5238518649155,108.50285355163123,220.55266905277153C99.66850103125034,219.71004260944733,96.62555062457795,203.1840996245487,101.09269647725796,199.10698209379302C107.20249605597928,193.52773620882385,132.83524299959936,187.14368502687807,139.7063163262519,158.05006296818306C144.85691798627977,136.27684703753903,127.27614792722215,110.42520395685165,97.52111804392098,110.95733767523075C67.75927582783606,111.4899477583242,60.03464567839728,127.75059608451011,60.03464567839728,127.75059608451011C60.03464567839728,127.75059608451011,63.96462403444639,116.50069122444461,53.48713042154759,109.82071852365084C42.0575192645847,102.53146085743401,29.433982182983527,109.67258498914407,29.413641633287625,121.56893176045742C29.392185131022416,136.13464157139765,43.42515067848126,139.7511463616538,43.42515067848126,139.7511463616538C43.42515067848126,139.7511463616538,41.16213783618423,138.16745423705265,31.16683077513244,135.38251939812903C21.171455590749247,132.59758932285308,11.61127492597916,137.48119442081997,10.320194278678173,148.45362980220125C9.069007549810522,159.06655080492988,17.17521807918638,165.2009404658229,24.993885610241705,164.8482860898339C24.993885610241705,164.8482860898339,16.691663333992437,166.65208547426914,14.601818864048255,175.0261252339874C13.197858495868786,180.65148278839706,13.121749290519801,188.51773302638094,23.436687039122262,191.30081853125057C31.34006083485383,193.43316355878255,41.798332272429434,186.51247100102182,41.798332272429434,186.51247100102182C41.798332272429434,186.51247100102182,33.51656076628842,189.33512770974107,34.225166055308364,199.1788795593552C34.88977341444843,208.4120321775399,43.53795655642716,211.3902572985612,50.3262815019616,208.56269163502589C55.50317053444087,206.40613057743803,58.46584680914293,200.63829133478066,58.46584680914293,200.63829133478066C58.46584680914293,200.63829133478066,62.87306268145494,210.2712477865125,61.25172097892846,216.82616949792828C58.23940215672246,229.01100793215642,36.073927011218075,225.6173929782342,30.8833881145365,269.29306723876266C18.667836833072215,371.93017574047985,10.70393999301541,392.6081825155609,31.58740798391682,392.6081825155609C77.51906137587412,392.608182515562,103.08104267279941,392.6081825155609,156.00510111487347,392.6081825155609C176.5200417924725,392.6081825155609,180.50749434318277,300.898515048023,182.20616877062912,285.7870430372775ZL182.20616877062912,285.7870430372775Z" style="fill: rgb(255, 255, 255);"/></g></g><g id="shape-04616de0-02ba-11ed-9a39-e16fc89e0613"><g id="fills-04616de0-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M98.8341118225253,142.82702514062248C94.81380557314878,144.64524217780217,90.07207133178508,142.85563255977286,88.25415358325517,138.82993798965026C86.4288738390187,134.80408992048842,88.21214623296237,130.06745355285284,92.23986098274236,128.25005506271737C96.26686418319696,126.43203802902872,101.0019014734853,128.22144764356653,102.82646966840093,132.24667716917565C104.64509896625168,136.27299028285142,102.86178006762202,141.00896160248203,98.8341118225253,142.82702514062248ZZ" style="fill: none;"/></g><g id="strokes-04616de0-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M98.8341118225253,142.82702514062248C94.81380557314878,144.64524217780217,90.07207133178508,142.85563255977286,88.25415358325517,138.82993798965026C86.4288738390187,134.80408992048842,88.21214623296237,130.06745355285284,92.23986098274236,128.25005506271737C96.26686418319696,126.43203802902872,101.0019014734853,128.22144764356653,102.82646966840093,132.24667716917565C104.64509896625168,136.27299028285142,102.86178006762202,141.00896160248203,98.8341118225253,142.82702514062248ZZ" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g><g id="shape-0461bc00-02ba-11ed-9a39-e16fc89e0613"><g id="fills-0461bc00-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M64.84554643174215,164.9314900531524C68.91244102508153,172.53684648164563,82.16608916482801,182.82372135388846,99.7126462626793,174.89859869685483C117.2524199538475,166.97395038182458,116.05604851108455,151.23953189602707,113.63254564139152,142.89210382704277" style="fill: none;"/></g><g id="strokes-0461bc00-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M64.84554643174215,164.9314900531524C68.91244102508153,172.53684648164563,82.16608916482801,182.82372135388846,99.7126462626793,174.89859869685483C117.2524199538475,166.97395038182458,116.05604851108455,151.23953189602707,113.63254564139152,142.89210382704277" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g><g id="shape-04625840-02ba-11ed-9a39-e16fc89e0613"><g id="fills-04625840-02ba-11ed-9a39-e16fc89e0613"><path rx="0" ry="0" d="M139.88835487514643,191.4460190558691C117.39042084447829,193.01922785794977,91.43992745277774,194.80922057690123,88.34740392804724,206.24330830284407C85.06429753663815,218.38071434520225,95.21170950486157,221.37641971982998,110.80740579863505,223.85287184204594C136.75273580461635,227.96992306320612,127.60348383305154,238.47904327766923,129.23459032749906,252.492697331895C131.32970274452327,270.5508783046612,136.46851574090942,283.1589961222862,154.99214307066177,286.71212008067937C163.18787782516665,288.2829205270534,165.44559725034105,295.5650426511545,163.4064441161372,304.03270971109987C160.70081592206316,315.2720368213677,156.99553519091023,328.1419614250151,142.9902488131138,332.9799194312893C123.96364012600861,339.5535203408085,116.57924326545435,352.8273865342994,114.19289016643415,365.3796959661047C111.31280884002717,380.52903493552435,112.98150905203329,392.92685419171767,112.98150905203329,392.92685419171767C112.98150905203329,392.92685419171767,193.8172620264495,392.92685419171767,243.75778931222067,392.92685419171767C265.7247603502756,392.92685419171744,263.24682392833984,366.1587982796011,247.86730356494718,352.12356294624783C229.61961507157685,335.47005529042303,195.2623545325232,338.88600801354573,191.4397563687362,316.74501590014324C189.24431690028814,292.1868476428094,203.41457464214545,277.04498104157256,222.04268374997082,276.0237125644446C227.6516989382726,275.63080749884307,231.88259349996588,270.84248034481266,231.4968133360162,265.3255669717232C232.14158091072932,255.3372105814849,227.12977476888773,256.5850698196489,227.12977476888773,256.5850698196489C227.12977476888773,256.5850698196489,241.38165975023094,259.3745352920471,242.69870986326077,246.65860625022196C243.80912831520436,235.93606015371665,236.18282147505215,233.22542527501787,229.84373319646056,233.66869750896853C226.48647337004786,233.86512712637636,229.84373319646056,233.66869750896853,229.84373319646056,233.66869750896853C229.84373319646056,233.66869750896853,238.93395145035538,229.43591940750275,238.489046833065,218.0082433538355C237.88858446157064,209.42123137937483,229.0617412687934,202.09808642303597,220.33600523261975,202.70824932590767C214.09452481460266,203.1446961533461,208.6890070525269,207.1588322709124,206.54790899649288,212.9510123912562C205.19284948267432,210.1906538940384,201.89374830677843,187.11017956989258,139.88835487514643,191.4460190558691ZL139.88835487514643,191.4460190558691Z" style="fill: rgb(255, 140, 244);"/></g></g><g id="shape-0462a660-02ba-11ed-9a39-e16fc89e0613"><g id="fills-0462a660-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M178.38119633503538,228.39374844745976C173.59057747835868,229.74230317822116,168.62226203978753,226.95695011803173,167.2792187349778,222.17406978608892C165.9274636724076,217.39117644068233,168.71580767530304,212.42081978798842,173.49709559842722,211.07229534075168C178.28709527930823,209.72378390697872,183.25532412452685,212.50789862454394,184.5984540226873,217.29201729911074C185.95078496437782,222.07424817621472,183.16190837903923,227.0458864685254,178.38119633503538,228.39374844745976ZZ" style="fill: none;"/></g><g id="strokes-0462a660-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M178.38119633503538,228.39374844745976C173.59057747835868,229.74230317822116,168.62226203978753,226.95695011803173,167.2792187349778,222.17406978608892C165.9274636724076,217.39117644068233,168.71580767530304,212.42081978798842,173.49709559842722,211.07229534075168C178.28709527930823,209.72378390697872,183.25532412452685,212.50789862454394,184.5984540226873,217.29201729911074C185.95078496437782,222.07424817621472,183.16190837903923,227.0458864685254,178.38119633503538,228.39374844745976ZZ" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g><g id="shape-0462f480-02ba-11ed-9a39-e16fc89e0613"><g id="fills-0462f480-02ba-11ed-9a39-e16fc89e0613"><path fill="none" rx="0" ry="0" d="M142.9708787036452,250.013527181761C145.78869710438084,258.1671822331077,157.05047162245774,270.3748770627458,175.04372816813157,265.18470724013287C193.04183003687285,259.994198599524,194.1518217190178,244.22090865814903,193.01870690459236,235.58018866942757" style="fill: none;"/></g><g id="strokes-0462f480-02ba-11ed-9a39-e16fc89e0613"><g class="stroke-shape"><path rx="0" ry="0" d="M142.9708787036452,250.013527181761C145.78869710438084,258.1671822331077,157.05047162245774,270.3748770627458,175.04372816813157,265.18470724013287C193.04183003687285,259.994198599524,194.1518217190178,244.22090865814903,193.01870690459236,235.58018866942757" style="fill: none; stroke-width: 6; stroke: rgb(48, 50, 54); stroke-opacity: 1;"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/user-guide.svg b/frontend/resources/images/user-guide.svg
new file mode 100644
index 000000000..50a2d4740
--- /dev/null
+++ b/frontend/resources/images/user-guide.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g class="inner-stroke-shape"><defs><clipPath id="a"><use href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></clipPath></defs><use clip-path="url('#a')" href="#stroke-shape-3fe79320-0e5a-11ed-8ef6-85a75a2eae6b--0"/></g><path fill="#fff" d="m4 8 2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6L5 37l-1-1V8Z"/><path fill="#000" fill-rule="evenodd" d="M20 38V13L7 9v26l13 3Zm1 4L5 37l-1-1V8l2-2 15 4h6l15-4 2 2v28l-1 1-16 5h-6Zm2-3h2V13h-2v26Zm5-26v25l13-3V9l-13 4Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/resources/images/video-tutorials.svg b/frontend/resources/images/video-tutorials.svg
new file mode 100644
index 000000000..059fed72b
--- /dev/null
+++ b/frontend/resources/images/video-tutorials.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="-webkit-print-color-adjust:exact" viewBox="0 0 48 48"><rect width="48" height="48" fill="#31efb8" rx="24" ry="24"/><g fill="#000"><rect width="31" height="31" x="9" y="9" fill="none" rx="0" ry="0"/><path fill="#f5f7ff" d="M18 13v22l15-11-15-11Z"/><path d="M17 13v23l1 1 2-1 13-10 2-1-1-1-14-12h-2l-1 1Zm3 3 11 9h-1l-10 8Z"/></g><path fill="#fff" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Z"/><path fill="#000" d="M21 18c-1-1-2 0-2 1v10c0 1 1 2 2 1l9-5v-2l-9-5Z"/><path fill="#000" fill-rule="evenodd" d="m5 9 1-1h36l2 1v30l-2 2H6l-1-2V9Zm2 29V10h34v28H7Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/frontend/resources/styles/main/partials/modal.scss b/frontend/resources/styles/main/partials/modal.scss
index 956d755af..4f0161563 100644
--- a/frontend/resources/styles/main/partials/modal.scss
+++ b/frontend/resources/styles/main/partials/modal.scss
@@ -868,6 +868,92 @@
}
}
+ &.onboarding-v2 {
+ min-height: 464px;
+ min-width: 752px;
+ .modal-left {
+ background-color: $color-gray-50;
+ width: 297px;
+ }
+
+ .welcome img {
+ width: 260.9px;
+ height: 402.96px;
+ position: absolute;
+ bottom: -10px;
+ }
+
+ .modal-right {
+ padding: 0;
+ }
+
+ .release-container {
+ width: 100%;
+ text-align: right;
+ position: relative;
+ height: 2rem;
+ }
+
+ .release {
+ background-color: $color-primary;
+ border-radius: 4px;
+ color: #1f1f1f;
+ padding: 4px $size-1;
+ display: inline-block;
+ margin-top: 1rem;
+ margin-right: 1rem;
+ }
+
+ .right-content {
+ padding: $size-6;
+
+ .modal-content {
+ padding: $size-1 0;
+ p {
+ margin-top: 0.4rem;
+ }
+ }
+
+ .welcome-card {
+ display: flex;
+ color: $color-black;
+ margin-top: $size-5;
+ width: 90%;
+
+ .title a {
+ font-weight: bold;
+ color: $color-black;
+ text-decoration: none;
+ &:hover {
+ color: $color-primary-dark;
+ }
+ }
+
+ .description {
+ font-size: 12px;
+ text-decoration: none;
+ text-transform: none;
+ }
+
+ img {
+ width: 48px;
+ height: 48px;
+ margin-right: 6px;
+ }
+ }
+ }
+
+ .modal-navigation {
+ width: 100%;
+ padding: 0 2rem 2rem 0;
+
+ button {
+ margin-left: auto;
+ padding: 0 0.5rem;
+ }
+ }
+ }
+
&.black {
.modal-left {
background-color: $color-black;
@@ -1056,6 +1142,38 @@
top: -18px;
width: 60px;
+ &.square {
+ top: -18px;
+ left: 631px;
+ width: 24px;
+ height: 24px;
+ color: $color-primary;
+ }
+
+ &.circle {
+ top: -16px;
+ left: 21px;
+ width: 24px;
+ height: 24px;
+ color: $color-primary;
+ }
+
+ &.line1 {
+ top: 110px;
+ left: -12px;
+ width: 16px;
+ height: 49px;
+ color: $color-primary;
+ }
+
+ &.line2 {
+ top: 440px;
+ left: 733px;
+ width: 46px;
+ height: 43px;
+ color: $color-primary;
+ }
+
&.top {
width: 183px;
top: -106px;
diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs
index 1f904576a..6f1c972e1 100644
--- a/frontend/src/app/main/ui/onboarding.cljs
+++ b/frontend/src/app/main/ui/onboarding.cljs
@@ -7,147 +7,102 @@
(ns app.main.ui.onboarding
(:require
[app.config :as cf]
+ [app.main.data.events :as ev]
[app.main.data.modal :as modal]
- [app.main.data.users :as du]
+ [app.main.data.users :as du]
[app.main.store :as st]
[app.main.ui.onboarding.newsletter]
[app.main.ui.onboarding.questions]
[app.main.ui.onboarding.team-choice]
[app.main.ui.onboarding.templates]
- [app.main.ui.releases.common :as rc]
[app.util.i18n :as i18n :refer [tr]]
[app.util.timers :as tm]
+ [potok.core :as ptk]
[rumext.alpha :as mf]))
;; --- ONBOARDING LIGHTBOX
-(mf/defc onboarding-start
+(defn send-event
+ [event-name]
+ (st/emit! (ptk/event ::ev/event {::ev/name event-name
+ ::ev/origin "dashboard"})))
+
+
+(mf/defc onboarding-welcome
[{:keys [next] :as props}]
- [:div.modal-container.onboarding
- [:div.modal-left.welcome
- [:img {:src "images/login-on.jpg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 {:data-test "onboarding-welcome"} (tr "onboarding.welcome.title")]]
- [:span.release "Beta version " (:main @cf/version)]
- [:div.modal-content
- [:p (tr "onboarding.welcome.desc1")]
- [:p (tr "onboarding.welcome.desc2")]
- [:p (tr "onboarding.welcome.desc3")]]
- [:div.modal-navigation
- [:button.btn-secondary {:on-click next :data-test "onboarding-next-btn"} (tr "labels.continue")]]]
- [:img.deco {:src "images/deco-left.png" :border "0"}]
- [:img.deco.right {:src "images/deco-right.png" :border "0"}]])
+ (let [go-next
+ (fn []
+ (send-event "onboarding-step1-continue")
+ (next))]
+ [:div.modal-container.onboarding.onboarding-v2
+ [:div.modal-left.welcome
+ [:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
+ [:div.modal-right
+ [:div.release-container [:span.release "Beta " (:main @cf/version)]]
+ [:div.right-content
+ [:div.modal-title
+ [:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.welcome.title")]]
-(mf/defc onboarding-opensource
+ [:div.modal-content
+ [:p (tr "onboarding-v2.welcome.desc1")]
+ [:div.welcome-card
+ [:img {:src "images/community.svg" :border "0"}]
+ [:div
+ [:div.title [:a {:href "https://community.penpot.app/" :target "_blank" :on-click #(send-event "onboarding-community-link")} (tr "onboarding-v2.welcome.desc2.title")]]
+ [:div.description (tr "onboarding-v2.welcome.desc2")]]]
+
+ [:div.welcome-card
+ [:img {:src "images/contributing.svg" :border "0"}]
+ [:div
+ [:div.title [:a {:href "https://help.penpot.app/contributing-guide/" :target "_blank" :on-click #(send-event "onboarding-contributing-link")} (tr "onboarding-v2.welcome.desc3.title")]]
+ [:div.description (tr "onboarding-v2.welcome.desc3")]]]]]
+ [:div.modal-navigation
+ [:button.btn-secondary {:on-click go-next :data-test "onboarding-next-btn"} (tr "labels.continue")]]
+ [:img.deco.square {:src "images/deco-square.svg" :border "0"}]
+ [:img.deco.circle {:src "images/deco-circle.svg" :border "0"}]
+ [:img.deco.line1 {:src "images/deco-line1.svg" :border "0"}]
+ [:img.deco.line2 {:src "images/deco-line2.svg" :border "0"}]]]))
+
+(mf/defc onboarding-before-start
[{:keys [next] :as props}]
- [:div.modal-container.onboarding.black
- [:div.modal-left
- [:img {:src "images/open-source.svg" :border "0" :alt (tr "onboarding.contrib.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 (tr "onboarding.contrib.title")]]
- [:div.modal-content
- [:p (tr "onboarding.contrib.desc1")]
- [:p
- (tr "onboarding.contrib.desc2.1")
- "\u00A0"
- [:a {:href "https://github.com/penpot" :target "_blank"} (tr "onboarding.contrib.link")]
- "\u00A0"
- (tr "onboarding.contrib.desc2.2")]]
- [:div.modal-navigation
- [:button.btn-secondary {:on-click next :data-test "opsource-next-btn"} (tr "labels.continue")]]]])
+ (let [go-next
+ (fn []
+ (send-event "onboarding-step2-continue")
+ (next))]
+ [:div.modal-container.onboarding.onboarding-v2
+ [:div.modal-left.welcome
+ [:img {:src "images/onboarding-people.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]]
+ [:div.modal-right
+ [:div.release-container [:span.release "Beta " (:main @cf/version)]]
+ [:div.right-content
+ [:div.modal-title
+ [:h2 {:data-test "onboarding-welcome"} (tr "onboarding-v2.before-start.title")]]
-(defmulti render-slide :slide)
+ [:div.modal-content
+ [:p (tr "onboarding-v2.before-start.desc1")]
+ [:div.welcome-card
+ [:img {:src "images/user-guide.svg" :border "0"}]
+ [:div
+ [:div.title [:a {:href "https://help.penpot.app/user-guide/" :target "_blank" :on-click #(send-event "onboarding-user-guide-link")} (tr "onboarding-v2.before-start.desc2.title")]]
+ [:div.description (tr "onboarding-v2.before-start.desc2")]]]
-(defmethod render-slide 0
- [{:keys [navigate skip slide] :as props}]
- (mf/html
- [:div.modal-container.onboarding.feature
- [:div.modal-left
- [:img {:src "images/on-design.gif" :border "0" :alt (tr "onboarding.slide.0.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 {:data-test "slide-0-title"} (tr "onboarding.slide.0.title")]]
- [:div.modal-content
- [:p (tr "onboarding.slide.0.desc1")]
- [:p (tr "onboarding.slide.0.desc2")]]
- [:div.modal-navigation
- [:button.btn-secondary {:on-click #(navigate 1)
- :data-test "slide-0-btn"} (tr "labels.continue")]
- [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
- [:& rc/navigation-bullets
- {:slide slide
- :navigate navigate
- :total 4}]]]]))
+ [:div.welcome-card
+ [:img {:src "images/video-tutorials.svg" :border "0"}]
+ [:div
+ [:div.title [:a {:href "https://www.youtube.com/c/Penpot" :target "_blank" :on-click #(send-event "onboarding-video-tutorials-link")} (tr "onboarding-v2.before-start.desc3.title")]]
+ [:div.description (tr "onboarding-v2.before-start.desc3")]]]]]
+ [:div.modal-navigation
+ [:button.btn-secondary {:on-click go-next :data-test "onboarding-next-btn"} (tr "labels.continue")]]
+ [:img.deco.square {:src "images/deco-square.svg" :border "0"}]
+ [:img.deco.circle {:src "images/deco-circle.svg" :border "0"}]
+ [:img.deco.line1 {:src "images/deco-line1.svg" :border "0"}]
+ [:img.deco.line2 {:src "images/deco-line2.svg" :border "0"}]]]))
-(defmethod render-slide 1
- [{:keys [navigate slide skip] :as props}]
- (mf/html
- [:div.modal-container.onboarding.feature
- [:div.modal-left
- [:img {:src "images/on-proto.gif" :border "0" :alt (tr "onboarding.slide.1.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 {:data-test "slide-1-title"} (tr "onboarding.slide.1.title")]]
- [:div.modal-content
- [:p (tr "onboarding.slide.1.desc1")]
- [:p (tr "onboarding.slide.1.desc2")]]
- [:div.modal-navigation
- [:button.btn-secondary {:on-click #(navigate 2)
- :data-test "slide-1-btn"} (tr "labels.continue")]
- [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
- [:& rc/navigation-bullets
- {:slide slide
- :navigate navigate
- :total 4}]]]]))
-
-(defmethod render-slide 2
- [{:keys [navigate slide skip] :as props}]
- (mf/html
- [:div.modal-container.onboarding.feature
- [:div.modal-left
- [:img {:src "images/on-feed.gif" :border "0" :alt (tr "onboarding.slide.2.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 {:data-test "slide-2-title"} (tr "onboarding.slide.2.title")]]
- [:div.modal-content
- [:p (tr "onboarding.slide.2.desc1")]]
- [:div.modal-navigation
- [:button.btn-secondary {:on-click #(navigate 3)
- :data-test "slide-2-btn"} (tr "labels.continue")]
- [:span.skip {:on-click skip :data-test "skip-btn"} (tr "labels.skip")]
- [:& rc/navigation-bullets
- {:slide slide
- :navigate navigate
- :total 4}]]]]))
-
-(defmethod render-slide 3
- [{:keys [navigate slide skip] :as props}]
- (mf/html
- [:div.modal-container.onboarding.feature
- [:div.modal-left
- [:img {:src "images/on-handoff.gif" :border "0" :alt (tr "onboarding.slide.3.alt")}]]
- [:div.modal-right
- [:div.modal-title
- [:h2 {:data-test "slide-3-title"} (tr "onboarding.slide.3.title")]]
- [:div.modal-content
- [:p (tr "onboarding.slide.3.desc1")]
- [:p (tr "onboarding.slide.3.desc2")]]
- [:div.modal-navigation
- [:button.btn-secondary
- {:on-click skip
- :data-test "slide-3-btn"}
- (tr "labels.start")]
- [:& rc/navigation-bullets
- {:slide slide
- :navigate navigate
- :total 4}]]]]))
(mf/defc onboarding-modal
{::mf/register modal/components
::mf/register-as :onboarding}
- [props]
+ [_]
(let [slide (mf/use-state :start)
klass (mf/use-state "fadeInDown")
@@ -173,10 +128,5 @@
[:div.modal-overlay
[:div.animated {:class @klass}
(case @slide
- :start [:& onboarding-start {:next #(navigate :opensource)}]
- :opensource [:& onboarding-opensource {:next #(navigate 0)}]
- (render-slide
- (assoc props
- :slide @slide
- :navigate navigate
- :skip skip)))]]))
+ :start [:& onboarding-welcome {:next #(navigate :opensource)}]
+ :opensource [:& onboarding-before-start {:next skip}])]]))
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index e9bfc9dd3..172fe1f44 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -1966,19 +1966,41 @@ msgstr "Start designing"
msgid "onboarding.welcome.alt"
msgstr "Penpot"
-msgid "onboarding.welcome.desc1"
-msgstr "Hooray! You are already a Penpot user :)"
+msgid "onboarding-v2.welcome.title"
+msgstr "Welcome to Penpot!"
-msgid "onboarding.welcome.desc2"
-msgstr ""
-"Penpot is in its first beta version thanks to the combination of core "
-"features, maturity, stability and the amazing validation from the community "
-"as a whole, to which you are more than welcome."
+msgid "onboarding-v2.welcome.desc1"
+msgstr "Penpot is Open Source and it is made by Kaleidos as well as the community, where lots of people already help each other out. Everyone can collaborate by:"
-msgid "onboarding.welcome.desc3"
-msgstr ""
-"While you enjoy Penpot for what it is we will keep improving it, releasing "
-"iterations of our hopeful plans."
+msgid "onboarding-v2.welcome.desc2.title"
+msgstr "Participating in the Community"
+
+msgid "onboarding-v2.welcome.desc2"
+msgstr "A public space to learn, share and discuss about Penpot, its present and future with the entire Community and the Penpot core team."
+
+msgid "onboarding-v2.welcome.desc3.title"
+msgstr "Contributing guide"
+
+msgid "onboarding-v2.welcome.desc3"
+msgstr "Where you’ll find how to collaborate with translations, feature requests, core contributions, bug hunting…"
+
+msgid "onboarding-v2.before-start.title"
+msgstr "Before you start"
+
+msgid "onboarding-v2.before-start.desc1"
+msgstr "You should know that there are lots of resources available to help you get started with Penpot, like the User Guide and our Youtube channel."
+
+msgid "onboarding-v2.before-start.desc2.title"
+msgstr "User guide"
+
+msgid "onboarding-v2.before-start.desc2"
+msgstr "Detailed info about how to use Penpot. From prototyping to organizing or sharing designs."
+
+msgid "onboarding-v2.before-start.desc3.title"
+msgstr "Video tutorials"
+
+msgid "onboarding-v2.before-start.desc3"
+msgstr "You can watch our tutorials and the tutorials made by our community."
msgid "onboarding.welcome.title"
msgstr "Welcome to Penpot"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 736e0766a..e000b6145 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2095,6 +2095,42 @@ msgstr ""
"Mientras disfrutas de Penpot seguiremos haciendo mejoras, lanzando "
"iteraciones de nuestros esperanzadores planes."
+msgid "onboarding-v2.welcome.title"
+msgstr "¡Te damos la bienvenida a Penpot!"
+
+msgid "onboarding-v2.welcome.desc1"
+msgstr "Penpot es Código Abierto y está hecho por Kaleidos y la comunidad, donde ya hay mucha gente ayudándose unos a otros. Formas de colaborar:"
+
+msgid "onboarding-v2.welcome.desc2.title"
+msgstr "Participantdo en la Comunidad"
+
+msgid "onboarding-v2.welcome.desc2"
+msgstr "Un espacio público donde aprender, compatir y discutir sobre el presente y futuro de Penpot con toda la Comunidad y el el equipo de Penpot."
+
+msgid "onboarding-v2.welcome.desc3.title"
+msgstr "Guía de contribución"
+
+msgid "onboarding-v2.welcome.desc3"
+msgstr "Aquí encontrarás cómo colaborar con traducciones, solicitar funcionalidades, contribuir en el código, cazar errores…"
+
+msgid "onboarding-v2.before-start.title"
+msgstr "Antes de comenzar"
+
+msgid "onboarding-v2.before-start.desc1"
+msgstr "Hay multitud de recursos disponibles para ayudarte a comenzar con Penpot, como son la Guía de usuario y nuestro canal de Youtube."
+
+msgid "onboarding-v2.before-start.desc2.title"
+msgstr "Guía de usuario"
+
+msgid "onboarding-v2.before-start.desc2"
+msgstr "Información detallada sobre cómo usar Penpot. Desde prototipar a organizar y compartir diseños."
+
+msgid "onboarding-v2.before-start.desc3.title"
+msgstr "Tutoriales de video"
+
+msgid "onboarding-v2.before-start.desc3"
+msgstr "Puedes ver nuestros tutoriales y los hechos por la comunidad."
+
msgid "onboarding.welcome.title"
msgstr "Te damos la bienvenida a Penpot"