From b8be89f23108cc91a5677fd37e0888012d24be48 Mon Sep 17 00:00:00 2001
From: Eva Marco <eva.marco@kaleidos.net>
Date: Wed, 8 Apr 2026 11:00:59 +0200
Subject: [PATCH] :bug: Update onboarding image (#8902)

---
 CHANGES.md                                            | 1 +
 frontend/resources/images/newsletter-notification.svg | 1 +
 frontend/src/app/main/ui/onboarding/newsletter.cljs   | 3 +--
 frontend/src/app/main/ui/onboarding/newsletter.scss   | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)
 create mode 100644 frontend/resources/images/newsletter-notification.svg

diff --git a/CHANGES.md b/CHANGES.md
index 7e52212519..ec15ccc3c0 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -34,6 +34,7 @@
 - Fix focus radio button [Taiga #13841](https://tree.taiga.io/project/penpot/issue/13841)
 - Token tree should be expanded by default [Taiga #13631](https://tree.taiga.io/project/penpot/issue/13631)
 - Fix opacity incorrectly disabled for visible shapes [Taiga #13906](https://tree.taiga.io/project/penpot/issue/13906)
+- Update onboarding image [Taiga #13864](https://tree.taiga.io/project/penpot/issue/13864)
 
 ## 2.15.0 (Unreleased)
 
diff --git a/frontend/resources/images/newsletter-notification.svg b/frontend/resources/images/newsletter-notification.svg
new file mode 100644
index 0000000000..395e291284
--- /dev/null
+++ b/frontend/resources/images/newsletter-notification.svg
@@ -0,0 +1 @@
+<svg width="271.942" xmlns="http://www.w3.org/2000/svg" height="280" id="screenshot-687fbfbc-4f91-80dc-8007-c6d99c6c7e7d" viewBox="0 0 271.942 280" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-687fbfbc-4f91-80dc-8007-c6d99c6c7e7d"><defs><clipPath id="frame-clip-687fbfbc-4f91-80dc-8007-c6d99c6c7e7d-render-1" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="0" y="0" width="271.94244604316543" height="280" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(#frame-clip-687fbfbc-4f91-80dc-8007-c6d99c6c7e7d-render-1)" fill="none"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d99c6c7e7d"><rect rx="0" ry="0" x="0" y="0" width="271.94244604316543" height="280" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"/></g><g class="frame-children"><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7365" rx="0" ry="0"><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7369"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be7369"><path d="M220.38519287109375,127.8154296875L146.18402099609375,32.74609375C140.31924438476562,27.75,132.8701171875,27.75,127.00546264648438,32.74609375L53.878631591796875,124.89306640625" fill="none" stroke-linejoin="round" stroke-linecap="round" style="fill: rgb(23, 25, 24); fill-opacity: 1;"/></g><g fill="none" stroke-linejoin="round" stroke-linecap="round" id="strokes-be861160-f474-8000-8007-c6f0105f1b05-687fbfbc-4f91-80dc-8007-c6d9b3be7369" class="strokes"><g class="stroke-shape"><path d="M220.38519287109375,127.8154296875L146.18402099609375,32.74609375C140.31924438476562,27.75,132.8701171875,27.75,127.00546264648438,32.74609375L53.878631591796875,124.89306640625" style="fill: none; stroke-width: 10.7458; stroke: rgb(20, 206, 202); stroke-opacity: 1;"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736a"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be736a"><rect width="185.99999999999932" height="149.4473417778363" x="42.971223021583" stroke-linejoin="round" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(23, 25, 24); fill-opacity: 1;" ry="18.60961705950918" fill="none" stroke-linecap="round" rx="18.60961705950918" y="121.55265822216279"/></g><g fill="none" stroke-linejoin="round" stroke-linecap="round" id="strokes-be861160-f474-8000-8007-c6f0106009ec-687fbfbc-4f91-80dc-8007-c6d9b3be736a" class="strokes"><g class="inner-stroke-shape" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><defs><clipPath id="inner-stroke-render-4-687fbfbc-4f91-80dc-8007-c6d9b3be736a-0"><use href="#stroke-shape-render-4-687fbfbc-4f91-80dc-8007-c6d9b3be736a-0"/></clipPath><rect rx="18.60961705950918" ry="18.60961705950918" x="42.971223021583" y="121.55265822216279" width="185.99999999999932" height="149.4473417778363" id="stroke-shape-render-4-687fbfbc-4f91-80dc-8007-c6d9b3be736a-0" style="fill: none; stroke-width: 21.4916; stroke: rgb(20, 206, 202); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-4-687fbfbc-4f91-80dc-8007-c6d9b3be736a-0" clip-path="url('#inner-stroke-render-4-687fbfbc-4f91-80dc-8007-c6d9b3be736a-0')"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736b"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be736b"><path d="M220.38519287109375,131.89794921875L146.18402099609375,208.8955078125C140.31924438476562,212.94091796875,132.8701171875,212.94091796875,127.00546264648438,208.8955078125L53.878631591796875,134.26513671875" fill="none" stroke-linejoin="round" stroke-linecap="round" style="fill: rgb(23, 25, 24); fill-opacity: 1;"/></g><g fill="none" stroke-linejoin="round" stroke-linecap="round" id="strokes-be861160-f474-8000-8007-c6f01060bed3-687fbfbc-4f91-80dc-8007-c6d9b3be736b" class="strokes"><g class="stroke-shape"><path d="M220.38519287109375,131.89794921875L146.18402099609375,208.8955078125C140.31924438476562,212.94091796875,132.8701171875,212.94091796875,127.00546264648438,208.8955078125L53.878631591796875,134.26513671875" style="fill: none; stroke-width: 10.7458; stroke: rgb(20, 206, 202); stroke-opacity: 1;"/></g></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7366" rx="0" ry="0"><g clip-path="url(#render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-clip)"><g mask="url(#render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-mask)"><defs><filter id="render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-filter"><feFlood flood-color="white" result="FloodResult"/><feComposite in="FloodResult" in2="SourceGraphic" operator="in" result="comp"/></filter><clipPath id="render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-clip" class="mask-clip-path"><polyline points="114,-29.72929788337933 244.95916351162413,-33 250.79219014360166,199.92697525257063 119.83302663197719,203.1976773691913"/></clipPath><mask width="136.79219014360166" maskUnits="userSpaceOnUse" height="236.1976773691913" class="mask-shape" x="114" id="render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-mask" data-old-y="-33" data-old-width="136.79219014360166" data-old-x="114" y="-33" data-old-height="236.1976773691913"><g filter="url(#render-6-687fbfbc-4f91-80dc-8007-c6d9b3be736c-filter)"><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736c"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be736c"><path d="M135.99984741210938,201.17822265625L201.635986328125,133.84375C201.635986328125,133.84375,248.95681762695312,11.1044921875,245.80886840820312,6.15869140625C242.66189575195312,1.2138671875,145.10964965820312,-30.50634765625,145.10964965820312,-30.50634765625C145.10964965820312,-30.50634765625,121.73794555664062,42.40966796875,117.860107421875,48.53466796875C114.78451538085938,53.390625,118.30303955078125,158.783203125,123.9039306640625,197.140625C125.3662109375,207.154296875,135.99984741210938,201.17822265625,135.99984741210938,201.17822265625" style="fill: rgb(177, 178, 181); fill-opacity: 1;"/></g></g></g></mask></defs><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736d" rx="0" ry="0"><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736e"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be736e"><path d="M214.4012451171875,60.94580078125L196.00955200195312,18.55126953125L162.96493530273438,51.0107421875L133.14620971679688,203.931640625L184.7589111328125,213.96435546875L214.4012451171875,60.94580078125" style="fill: rgb(23, 25, 24); fill-opacity: 1;"/></g><g id="strokes-be861160-f474-8000-8007-c6f01062e521-687fbfbc-4f91-80dc-8007-c6d9b3be736e" class="strokes"><g class="stroke-shape"><path d="M214.4012451171875,60.94580078125L196.00955200195312,18.55126953125L162.96493530273438,51.0107421875L133.14620971679688,203.931640625L184.7589111328125,213.96435546875L214.4012451171875,60.94580078125" style="fill: none; stroke-width: 7.1154; stroke: rgb(255, 255, 255); stroke-opacity: 1; stroke-linecap: round;"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be736f"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be736f"><path d="M214.00326538085938,62.978515625L162.49374389648438,52.9638671875"/></g><g id="strokes-be861160-f474-8000-8007-c6f010634661-687fbfbc-4f91-80dc-8007-c6d9b3be736f" class="strokes"><g class="stroke-shape"><path d="M214.00326538085938,62.978515625L162.49374389648438,52.9638671875" style="fill: none; stroke-width: 7.1154; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7370"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be7370"><path d="M187.71234130859375,60.9365234375L159.01895141601562,208.10400390625"/></g><g id="strokes-be861160-f474-8000-8007-c6f01063af96-687fbfbc-4f91-80dc-8007-c6d9b3be7370" class="strokes"><g class="stroke-shape"><path d="M187.71234130859375,60.9365234375L159.01895141601562,208.10400390625" style="fill: none; stroke-width: 7.1154; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7371"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be7371"><path d="M183.14566040039062,31.4150390625L203.02960205078125,35.2470703125L195.71719360351562,19.5166015625L183.14566040039062,31.4150390625" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></g></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7367"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be7367"><path d="M90.5,147C90.5,147,91.885498046875,122.49462890625,81.3031005859375,110.99560546875C70.720947265625,99.49462890625,55,101.0009765625,55,101.0009765625C55,101.0009765625,70.720947265625,102.50537109375,81.3031005859375,91.00537109375C91.885498046875,79.50537109375,90.5,55,90.5,55C90.5,55,89.114501953125,79.50537109375,99.69680786132812,91.00537109375C110.27694702148438,102.50537109375,126,101.0009765625,126,101.0009765625C126,101.0009765625,110.27694702148438,99.49462890625,99.69680786132812,110.99560546875C89.114501953125,122.49462890625,90.5,147,90.5,147L90.5,147" stroke-miterlimit="10" style="fill-rule: nonzero; clip-rule: evenodd; stroke-linejoin: round; fill: rgb(242, 58, 229); fill-opacity: 1;"/></g><g stroke-miterlimit="10" id="strokes-be861160-f474-8000-8007-c6f010643c19-687fbfbc-4f91-80dc-8007-c6d9b3be7367" class="strokes" style="fill-rule: nonzero; clip-rule: evenodd; stroke-linejoin: round;"><g class="stroke-shape"><path d="M90.5,147C90.5,147,91.885498046875,122.49462890625,81.3031005859375,110.99560546875C70.720947265625,99.49462890625,55,101.0009765625,55,101.0009765625C55,101.0009765625,70.720947265625,102.50537109375,81.3031005859375,91.00537109375C91.885498046875,79.50537109375,90.5,55,90.5,55C90.5,55,89.114501953125,79.50537109375,99.69680786132812,91.00537109375C110.27694702148438,102.50537109375,126,101.0009765625,126,101.0009765625C126,101.0009765625,110.27694702148438,99.49462890625,99.69680786132812,110.99560546875C89.114501953125,122.49462890625,90.5,147,90.5,147L90.5,147" style="fill: none; stroke-width: 4.15943; stroke: rgb(242, 58, 229); stroke-opacity: 1;"/></g></g></g><g id="shape-687fbfbc-4f91-80dc-8007-c6d9b3be7368"><g class="fills" id="fills-687fbfbc-4f91-80dc-8007-c6d9b3be7368"><path d="M48.5,95C48.5,95,49.300537109375,76.88720703125,43.17681884765625,68.38720703125C37.051513671875,59.88720703125,24,61.0009765625,24,61.0009765625C24,61.0009765625,37.051513671875,62.11279296875,43.17681884765625,53.61279296875C49.300537109375,45.11279296875,48.5,27,48.5,27C48.5,27,47.69769287109375,45.11279296875,53.82305908203125,53.61279296875C59.948486328125,62.11279296875,73,61.0009765625,73,61.0009765625C73,61.0009765625,59.948486328125,59.88720703125,53.82305908203125,68.38720703125C47.69769287109375,76.88720703125,48.5,95,48.5,95Z" stroke-miterlimit="10" style="fill-rule: nonzero; clip-rule: evenodd; stroke-linejoin: round; fill: rgb(242, 58, 229); fill-opacity: 1;"/></g><g stroke-miterlimit="10" id="strokes-be861160-f474-8000-8007-c6f01064c5e2-687fbfbc-4f91-80dc-8007-c6d9b3be7368" class="strokes" style="fill-rule: nonzero; clip-rule: evenodd; stroke-linejoin: round;"><g class="stroke-shape"><path d="M48.5,95C48.5,95,49.300537109375,76.88720703125,43.17681884765625,68.38720703125C37.051513671875,59.88720703125,24,61.0009765625,24,61.0009765625C24,61.0009765625,37.051513671875,62.11279296875,43.17681884765625,53.61279296875C49.300537109375,45.11279296875,48.5,27,48.5,27C48.5,27,47.69769287109375,45.11279296875,53.82305908203125,53.61279296875C59.948486328125,62.11279296875,73,61.0009765625,73,61.0009765625C73,61.0009765625,59.948486328125,59.88720703125,53.82305908203125,68.38720703125C47.69769287109375,76.88720703125,48.5,95,48.5,95Z" style="fill: none; stroke-width: 4.15943; stroke: rgb(242, 58, 229); stroke-opacity: 1;"/></g></g></g></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs
index 3f5ee18557..8b32e224a4 100644
--- a/frontend/src/app/main/ui/onboarding/newsletter.cljs
+++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs
@@ -56,8 +56,7 @@
 
      [:div.animated.fadeInDown {:class (stl/css :modal-container)}
       [:div {:class (stl/css :modal-left)}
-       [:img {:src "images/deco-newsletter.png"
-              :border "0"}]]
+       [:img {:src "images/newsletter-notification.svg"}]]
 
       [:div {:class (stl/css :modal-right)}
        [:h2 {:class (stl/css :modal-title)
diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss
index cb128fda7a..a496bec95b 100644
--- a/frontend/src/app/main/ui/onboarding/newsletter.scss
+++ b/frontend/src/app/main/ui/onboarding/newsletter.scss
@@ -33,6 +33,7 @@
   img {
     width: deprecated.$s-172;
     border-radius: deprecated.$br-8 0 0 deprecated.$br-8;
+    height: auto;
   }
 }