diff --git a/frontend/resources/images/features/advanced-proto.gif b/frontend/resources/images/features/advanced-proto.gif new file mode 100644 index 000000000..e8db03218 Binary files /dev/null and b/frontend/resources/images/features/advanced-proto.gif differ diff --git a/frontend/resources/images/features/booleans.gif b/frontend/resources/images/features/booleans.gif new file mode 100644 index 000000000..7b8f488be Binary files /dev/null and b/frontend/resources/images/features/booleans.gif differ diff --git a/frontend/resources/images/features/flows-proto.gif b/frontend/resources/images/features/flows-proto.gif new file mode 100644 index 000000000..eb3dfa6dc Binary files /dev/null and b/frontend/resources/images/features/flows-proto.gif differ diff --git a/frontend/resources/images/features/libraries-feature.gif b/frontend/resources/images/features/libraries-feature.gif new file mode 100644 index 000000000..3e996a6c2 Binary files /dev/null and b/frontend/resources/images/features/libraries-feature.gif differ diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index d25c4b0bf..c980f45c0 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -20,6 +20,7 @@ [app.main.ui.releases.v1-6] [app.main.ui.releases.v1-7] [app.main.ui.releases.v1-8] + [app.main.ui.releases.v1-9] [app.util.i18n :as i18n :refer [tr]] [app.util.object :as obj] [app.util.router :as rt] @@ -298,5 +299,5 @@ (defmethod rc/render-release-notes "0.0" [params] - (rc/render-release-notes (assoc params :version "1.8"))) + (rc/render-release-notes (assoc params :version "1.9"))) diff --git a/frontend/src/app/main/ui/releases/v1_9.cljs b/frontend/src/app/main/ui/releases/v1_9.cljs new file mode 100644 index 000000000..7bf95fadb --- /dev/null +++ b/frontend/src/app/main/ui/releases/v1_9.cljs @@ -0,0 +1,108 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.releases.v1-9 + (:require + [app.main.ui.releases.common :as c] + [rumext.alpha :as mf])) + +(defmethod c/render-release-notes "1.9" + [{:keys [slide klass next finish navigate version]}] + (mf/html + (case @slide + :start + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/login-on.jpg" :border "0" :alt "What's new Alpha release 1.9"}]] + [:div.modal-right + [:div.modal-title + [:h2 "What's new?"]] + [:span.release "Alpha version " version] + [:div.modal-content + [:p "Penpot continues growing with new features that improve performance, user experience and visual design."] + [:p "We are happy to show you a sneak peak of the most important stuff that the Alpha 1.9 version brings."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"]]] + [:img.deco {:src "images/deco-left.png" :border "0"}] + [:img.deco.right {:src "images/deco-right.png" :border "0"}]]]] + + 0 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/advanced-proto.gif" :border "0" :alt "Advanced interactions"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Prototyping triggers and actions"]] + [:div.modal-content + [:p "Prototyping options at last! Different triggers (like mouse events or time delays) and actions allow you to add complexity to the interactions of your prototypes."] + [:p "Create overlays, back buttons or links to URLs to mimic the behavior of the product you’re designing."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 1 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/flows-proto.gif" :border "0" :alt "Multiple flows"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Multiple flows"]] + [:div.modal-content + [:p "Design projects usually need to define multiple casuistics for different devices and user journeys."] + [:p "Flows allow you to define multiple starting points within the same page so you can better organize and present your prototypes."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 2 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/booleans.gif" :border "0" :alt "Boolean shapes"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Boolean operations"]] + [:div.modal-content + [:p "Now in Penpot you can combine shapes in different ways. There are five options: Union, difference, intersection, exclusion and flatten."] + [:p "Using boolean operations will lead to countless graphic possibilities for your designs."]] + [:div.modal-navigation + [:button.btn-secondary {:on-click next} "Continue"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]] + + 3 + [:div.modal-overlay + [:div.animated {:class @klass} + [:div.modal-container.onboarding.feature + [:div.modal-left + [:img {:src "images/features/libraries-feature.gif" :border "0" :alt "Libraries & templates"}]] + [:div.modal-right + [:div.modal-title + [:h2 "Libraries & templates"]] + [:div.modal-content + [:p "We’ve created a new space on Penpot where you can share your libraries and templates and download the ones you like. Material Design, Cocomaterial or Penpot’s Design System are among them (and a lot more to come!)."] + [:p [:a {:alt "Explore libraries & templates" :target "_blank" :href "https://penpot.app/libraries-templates.html"} "Explore libraries & templates"]]] + [:div.modal-navigation + [:button.btn-secondary {:on-click finish} "Start!"] + [:& c/navigation-bullets + {:slide @slide + :navigate navigate + :total 4}]]]]]])))