Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

🎉 Add new style and content for onboarding slides

Browse source
This commit is contained in:
Pablo Alba 2022-07-27 13:07:02 +02:00
parent e5ebe0a295
commit b93b8a8966
13 changed files with 272 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/images/community.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

1
frontend/resources/images/contributing.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5.8 KiB

1
frontend/resources/images/deco-circle.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 384 B

1
frontend/resources/images/deco-line1.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 278 B

1
frontend/resources/images/deco-line2.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 266 B

1
frontend/resources/images/deco-square.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 412 B

1
frontend/resources/images/onboarding-people.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

1
frontend/resources/images/user-guide.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 665 B

1
frontend/resources/images/video-tutorials.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 635 B

118
frontend/resources/styles/main/partials/modal.scss
View file

@ -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;

202
frontend/src/app/main/ui/onboarding.cljs
View file

@ -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}])]]))

44
frontend/translations/en.po
View file

@ -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"

36
frontend/translations/es.po
View file

@ -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"