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