diff --git a/frontend/resources/images/form/Design.png b/frontend/resources/images/form/Design.png
deleted file mode 100644
index ae1e28ab72..0000000000
Binary files a/frontend/resources/images/form/Design.png and /dev/null differ
diff --git a/frontend/resources/images/form/Prototype.png b/frontend/resources/images/form/Prototype.png
deleted file mode 100644
index 508d43e1d3..0000000000
Binary files a/frontend/resources/images/form/Prototype.png and /dev/null differ
diff --git a/frontend/resources/images/form/components.png b/frontend/resources/images/form/components.png
deleted file mode 100644
index e1817a6a96..0000000000
Binary files a/frontend/resources/images/form/components.png and /dev/null differ
diff --git a/frontend/resources/images/form/design-and-dev.png b/frontend/resources/images/form/design-and-dev.png
deleted file mode 100644
index b66bddc793..0000000000
Binary files a/frontend/resources/images/form/design-and-dev.png and /dev/null differ
diff --git a/frontend/resources/images/form/never-used.png b/frontend/resources/images/form/never-used.png
deleted file mode 100644
index f45d6cf2db..0000000000
Binary files a/frontend/resources/images/form/never-used.png and /dev/null differ
diff --git a/frontend/resources/images/form/slide-1-help-us-know-you.svg b/frontend/resources/images/form/slide-1-help-us-know-you.svg
new file mode 100644
index 0000000000..0064fdbfe7
--- /dev/null
+++ b/frontend/resources/images/form/slide-1-help-us-know-you.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/adobe-xd.png b/frontend/resources/images/form/slide-2-adobe-xd.png
similarity index 100%
rename from frontend/resources/images/form/adobe-xd.png
rename to frontend/resources/images/form/slide-2-adobe-xd.png
diff --git a/frontend/resources/images/form/canva.png b/frontend/resources/images/form/slide-2-canva.png
similarity index 100%
rename from frontend/resources/images/form/canva.png
rename to frontend/resources/images/form/slide-2-canva.png
diff --git a/frontend/resources/images/form/figma.png b/frontend/resources/images/form/slide-2-figma.png
similarity index 100%
rename from frontend/resources/images/form/figma.png
rename to frontend/resources/images/form/slide-2-figma.png
diff --git a/frontend/resources/images/form/invision.png b/frontend/resources/images/form/slide-2-invision.png
similarity index 100%
rename from frontend/resources/images/form/invision.png
rename to frontend/resources/images/form/slide-2-invision.png
diff --git a/frontend/resources/images/form/sketch.png b/frontend/resources/images/form/slide-2-sketch.png
similarity index 100%
rename from frontend/resources/images/form/sketch.png
rename to frontend/resources/images/form/slide-2-sketch.png
diff --git a/frontend/resources/images/form/slide-3-code-from-design.svg b/frontend/resources/images/form/slide-3-code-from-design.svg
new file mode 100644
index 0000000000..92b4449f43
--- /dev/null
+++ b/frontend/resources/images/form/slide-3-code-from-design.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/slide-3-design-app-ui-ux.svg b/frontend/resources/images/form/slide-3-design-app-ui-ux.svg
new file mode 100644
index 0000000000..91b59ed564
--- /dev/null
+++ b/frontend/resources/images/form/slide-3-design-app-ui-ux.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/slide-3-design-systems.svg b/frontend/resources/images/form/slide-3-design-systems.svg
new file mode 100644
index 0000000000..8f2b8a2a91
--- /dev/null
+++ b/frontend/resources/images/form/slide-3-design-systems.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/slide-3-prototyping.svg b/frontend/resources/images/form/slide-3-prototyping.svg
new file mode 100644
index 0000000000..4b221bf145
--- /dev/null
+++ b/frontend/resources/images/form/slide-3-prototyping.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/slide-3-wireframing.svg b/frontend/resources/images/form/slide-3-wireframing.svg
new file mode 100644
index 0000000000..0e288e3ec2
--- /dev/null
+++ b/frontend/resources/images/form/slide-3-wireframing.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/resources/images/form/templates.png b/frontend/resources/images/form/templates.png
deleted file mode 100644
index 3c77a7a0ff..0000000000
Binary files a/frontend/resources/images/form/templates.png and /dev/null differ
diff --git a/frontend/resources/images/form/use-for-1.png b/frontend/resources/images/form/use-for-1.png
deleted file mode 100644
index 832043178c..0000000000
Binary files a/frontend/resources/images/form/use-for-1.png and /dev/null differ
diff --git a/frontend/resources/images/form/use-for-2.jpg b/frontend/resources/images/form/use-for-2.jpg
deleted file mode 100644
index 449ab4d9f1..0000000000
Binary files a/frontend/resources/images/form/use-for-2.jpg and /dev/null differ
diff --git a/frontend/resources/images/form/use-for-3.jpg b/frontend/resources/images/form/use-for-3.jpg
deleted file mode 100644
index 1d8c242d76..0000000000
Binary files a/frontend/resources/images/form/use-for-3.jpg and /dev/null differ
diff --git a/frontend/resources/images/form/use-for-4.jpg b/frontend/resources/images/form/use-for-4.jpg
deleted file mode 100644
index 140c6539dc..0000000000
Binary files a/frontend/resources/images/form/use-for-4.jpg and /dev/null differ
diff --git a/frontend/resources/images/form/uxpin.png b/frontend/resources/images/form/uxpin.png
deleted file mode 100644
index bbd155d6a4..0000000000
Binary files a/frontend/resources/images/form/uxpin.png and /dev/null differ
diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs
index 64fff7896e..dabc293e15 100644
--- a/frontend/src/app/main/ui/onboarding/questions.cljs
+++ b/frontend/src/app/main/ui/onboarding/questions.cljs
@@ -103,7 +103,7 @@
[:div {:class (stl/css :paginator)} (str/ffmt "1/%" (if @show-step-3 4 3))]
[:img {:class (stl/css :header-image)
- :src "images/form/use-for-1.png"
+ :src "images/form/slide-1-help-us-know-you.svg"
:alt (tr "onboarding.questions.lets-get-started")}]
[:h1 {:class (stl/css :modal-title)}
(tr "onboarding.questions.step1.title")]
@@ -153,15 +153,15 @@
(let [design-tool-options
(mf/with-memo []
(-> (shuffle [{:label (tr "labels.figma") :img-width "48px" :img-height "60px"
- :value "figma" :image "images/form/figma.png"}
+ :value "figma" :image "images/form/slide-2-figma.png"}
{:label (tr "labels.sketch") :img-width "48px" :img-height "60px"
- :value "sketch" :image "images/form/sketch.png"}
+ :value "sketch" :image "images/form/slide-2-sketch.png"}
{:label (tr "labels.adobe-xd") :img-width "48px" :img-height "60px"
- :value "adobe-xd" :image "images/form/adobe-xd.png"}
+ :value "adobe-xd" :image "images/form/slide-2-adobe-xd.png"}
{:label (tr "labels.canva") :img-width "48px" :img-height "60px"
- :value "canva" :image "images/form/canva.png"}
+ :value "canva" :image "images/form/slide-2-canva.png"}
{:label (tr "labels.invision") :img-width "48px" :img-height "60px"
- :value "invision" :image "images/form/invision.png"}])
+ :value "invision" :image "images/form/slide-2-invision.png"}])
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
current-experience
@@ -268,15 +268,15 @@
(let [start-options
(mf/with-memo []
(-> (shuffle [{:label (tr "onboarding.questions.start-with.ui")
- :value "ui" :image "images/form/Design.png"}
+ :value "ui" :image "images/form/slide-3-design-app-ui-ux.svg"}
{:label (tr "onboarding.questions.start-with.wireframing")
- :value "wireframing" :image "images/form/templates.png"}
+ :value "wireframing" :image "images/form/slide-3-wireframing.svg"}
{:label (tr "onboarding.questions.start-with.prototyping")
- :value "prototyping" :image "images/form/Prototype.png"}
+ :value "prototyping" :image "images/form/slide-3-prototyping.svg"}
{:label (tr "onboarding.questions.start-with.ds")
- :value "ds" :image "images/form/components.png"}
+ :value "ds" :image "images/form/slide-3-design-systems.svg"}
{:label (tr "onboarding.questions.start-with.code")
- :value "code" :image "images/form/design-and-dev.png"}])
+ :value "code" :image "images/form/slide-3-code-from-design.svg"}])
(conj {:label (tr "labels.other-short") :value "other" :icon deprecated-icon/curve})))
current-start (dm/get-in @form [:data :start-with])
@@ -301,8 +301,8 @@
[:h1 {:class (stl/css :modal-title)} (tr "onboarding.questions.step4.title")]
[:div {:class (stl/css :radio-wrapper)}
[:& fm/image-radio-buttons {:options start-options
- :img-width "159px"
- :img-height "120px"
+ :img-width "100px"
+ :img-height "110px"
:name :start-with
:on-change on-start-change}]
diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss
index 4438dcc1fb..c91a287df2 100644
--- a/frontend/src/app/main/ui/onboarding/questions.scss
+++ b/frontend/src/app/main/ui/onboarding/questions.scss
@@ -56,7 +56,7 @@
// STEP 1
.header-image {
- height: deprecated.$s-60;
+ height: deprecated.$s-100;
width: auto;
margin-inline-start: auto;
}