From 5959aa12817a8ccfde677b32a46ffc9897c234d7 Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Sun, 28 Sep 2025 17:30:49 +0200
Subject: [PATCH 1/6] feat: popup also in kanvas page

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/components/Corner-popup/index.js | 14 ++++++++------
 src/pages/index.js                   |  2 +-
 src/sections/Kanvas/index.js         |  4 +++-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/Corner-popup/index.js b/src/components/Corner-popup/index.js
index 0a77b25560b5c..1eb2db95a32eb 100644
--- a/src/components/Corner-popup/index.js
+++ b/src/components/Corner-popup/index.js
@@ -4,17 +4,19 @@ import { ReactComponent as CloseIcon } from "./closeIcon.svg";
 import popupImageSmall from "./power-of-meshery-small.webp";
 import CornerPopupWrapper from "./popup.style";
 
-const CornerPopup = () => {
+const CornerPopup = ({ storageKey = "showPopup" }) => {
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
-    if (!localStorage.getItem("showPopup")) {
+    if (!localStorage.getItem(storageKey)) {
       setTimeout(() => {
         setShowPopup(true);
+        localStorage.setItem(storageKey, true);
       }, 8000);
-      localStorage.setItem("showPopup", true);
-    } else setShowPopup(false);
-  },[]);
+    } else {
+      setShowPopup(false);
+    }
+  }, [storageKey]);
 
   return (
     showPopup &&
@@ -26,7 +28,7 @@ const CornerPopup = () => {
               <CloseIcon />
             </div>
             <a href="https://play.meshery.io/">
-              <img className="popup-image" src={popupImageSmall} />
+              <img alt="popup image" className="popup-image" src={popupImageSmall} />
             </a>
             <Button $primary className="explore-playground-button" title="Access Playground" $url="https://play.meshery.io/" $external={true}/>
           </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 350580a0650d5..f6b84adaf2d9f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -24,7 +24,7 @@ const IndexPage = () => {
       <Banner />
       <FeaturesContainer />
       <Partners />
-      <CornerPopup/>
+      <CornerPopup storageKey="homepageShowPopup"/>
       {/* <ServiceMeshManagement /> */}
       <CloudNativeManagement />
       <MesheryIntegration  />
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index 0f6c707e80197..b371cecb348e7 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -38,6 +38,7 @@ import Alex from "../../sections/Pricing/reviews/alex-hokanson.jpeg";
 import TeaserModal from "../../components/TeaserModal";
 import GuyM from "./images/guym.jpg";
 import Abdechakour from "../../sections/Pricing/reviews/abdechakour-h.jpeg";
+import CornerPopup from "../../components/Corner-popup";
 
 
 const Kanvas = (props) => {
@@ -45,7 +46,8 @@ const Kanvas = (props) => {
   return (
     <KanvasWrapper>
       <div >
-        <Container>
+          <CornerPopup storageKey="kanvasShowPopup"/>
+          <Container>
           <KanvasBanner />
           <div className="mobile-modes">
             <Features

From d94b0ab8f670405e8f78757e81811b825d7ecf99 Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Sun, 28 Sep 2025 17:49:12 +0200
Subject: [PATCH 2/6] refactor: kanvas page indentation

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/sections/Kanvas/index.js | 46 ++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index b371cecb348e7..24f425b802e83 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -45,10 +45,10 @@ const Kanvas = (props) => {
 
   return (
     <KanvasWrapper>
-      <div >
-          <CornerPopup storageKey="kanvasShowPopup"/>
-          <Container>
-          <KanvasBanner />
+      <div>
+        <CornerPopup storageKey="kanvasShowPopup"/>
+        <Container>
+          <KanvasBanner/>
           <div className="mobile-modes">
             <Features
               heading="Kanvas Modes"
@@ -86,7 +86,7 @@ const Kanvas = (props) => {
               ]}
             />
           </div>
-          <KanvasModes />
+          <KanvasModes/>
           <InlineQuotes
             person="Guy Menahem"
             title="Software Engineer at AWS"
@@ -99,28 +99,28 @@ const Kanvas = (props) => {
                   title: "Design your deployments the way you want",
                   description: "Drag-and-drop your cloud native infrastructure using a palette of thousands of versioned Kubernetes components and Cloud services. Say goodbye to YAML configurations.",
                   imgContent: (
-                    <RoleBind1 id="design-image1" style={{ transform: "translateX(-2rem)" }} alt="design-image1" />
+                    <RoleBind1 id="design-image1" style={{ transform: "translateX(-2rem)" }} alt="design-image1"/>
                   )
                 },
                 {
                   title: "Manage your applications visually and intuitively",
                   description: "Play with powerful features including context-aware designs and namespace configurations to easily manage all services.",
                   imgContent: (
-                    <RoleBind2 id="design-image2" alt="design-image2" />
+                    <RoleBind2 id="design-image2" alt="design-image2"/>
                   )
                 },
                 {
                   title: "Build the bridge",
                   description: "Go from developer handoffs to ongoing conversations with a shared language between design and development.",
                   imgContent: (
-                    <RoleBind3 id="design-image3" style={{ transform: "translateX(-2rem)" }} alt="design-image3" />
+                    <RoleBind3 id="design-image3" style={{ transform: "translateX(-2rem)" }} alt="design-image3"/>
                   )
                 },
                 {
                   title: "Stop finger-pointing",
                   description: "Make infrastructure and application management less about finger-pointing and more about collaborating.",
                   imgContent: (
-                    <RoleBind4 id="design-image4" style={{ transform: "translateX(-2rem)" }} alt="design-image4" />
+                    <RoleBind4 id="design-image4" style={{ transform: "translateX(-2rem)" }} alt="design-image4"/>
                   )
                 },
               ]}/>
@@ -137,22 +137,22 @@ const Kanvas = (props) => {
                   title: "All your Kubernetes and Cloud infrastructure under a common management",
                   description: "Deploy designs, apply patterns, manage and operate your deployments and services in real-time.",
                   imgContent: (
-                    <Visualize1 id="visualize-image1" alt="visualize-image1" />
+                    <Visualize1 id="visualize-image1" alt="visualize-image1"/>
                   )
                 },
                 {
                   title: "Continuous visibility across all of your clusters and workloads.",
                   description: "Import your existing Kubernetes, Kustomize, Helm, or Docker Compose applications. Interactively connect to terminal sessions or initiate and search log streams from your containers.",
                   imgContent: (
-                    <Visualize2 id="visualize-image2" alt="visualize-image2" />
+                    <Visualize2 id="visualize-image2" alt="visualize-image2"/>
                   )
                 },
-              ]} />
+              ]}/>
           <InlineQuotes
             quote="Wow, just tried Kanvas and it's exactly what I needed! Dragging that Helm chart was so smooth, and the smart features really caught my attention. Definitely sharing this with my dev team before everyone else discovers it!"
             person="Abdechakour Hrouchan"
             title="Software Engineer at Atlas Cloud Services"
-            image={Abdechakour} />
+            image={Abdechakour}/>
 
           <CollaboratorFeatures
             features={
@@ -170,7 +170,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab1 id="collaborate-image1" alt="collaborate-image1" />
+                      <Collab1 id="collaborate-image1" alt="collaborate-image1"/>
                     </>
                   )
                   // Invite any Layer5 Cloud user, or all Meshery users, to work with you on a public design, including making changes and releasing new versions."
@@ -192,7 +192,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab2 id="collaborate-image2" alt="collaborate-image2" />
+                      <Collab2 id="collaborate-image2" alt="collaborate-image2"/>
                     </>
                   )
                 },
@@ -209,7 +209,7 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab3 id="collaborate-image3" alt="collaborate-image3" />
+                      <Collab3 id="collaborate-image3" alt="collaborate-image3"/>
                     </>
                   )
                 },
@@ -230,11 +230,11 @@ const Kanvas = (props) => {
                         height="48"
                         style={{ objectFit: "cover" }}
                       />
-                      <Collab4 id="collaborate-image4" alt="collaborate-image4" />
+                      <Collab4 id="collaborate-image4" alt="collaborate-image4"/>
                     </>
                   )
                 }
-              ]} />
+              ]}/>
           {/* <CollaboratorFeatures
             features={
               [
@@ -286,10 +286,10 @@ const Kanvas = (props) => {
             quote="Do we like Kanvas? ABSOLUTELY!"
             person="Alex"
             title="Infrastructure Engineering at Docker, Inc."
-            image={Alex} />
+            image={Alex}/>
           {/* <MesheryAction /> */}
-          <KanvasBtn style={{ marginBottom: "2rem" }} />
-          <Platform />
+          <KanvasBtn style={{ marginBottom: "2rem" }}/>
+          <Platform/>
           <InlineQuotes
             quote="Guys, I love Kanvas! This tool is crazy!"
             person="Ala Eddine BENHASSIR"
@@ -298,8 +298,8 @@ const Kanvas = (props) => {
         </Container>
       </div>
       <>
-        <Reviews />
-        <TeaserModal title="Kanvas Teaser" open={props?.teaser} />
+        <Reviews/>
+        <TeaserModal title="Kanvas Teaser" open={props?.teaser}/>
       </>
     </KanvasWrapper>
   );

From e4ed4814abe6f699cd9ef96edda7efa42399ad28 Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Sun, 28 Sep 2025 21:03:36 +0200
Subject: [PATCH 3/6] feat: extended CornerPopup to be implemented in different
 pages

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/components/Corner-popup/index.js                |   9 ++++-----
 src/pages/index.js                                  |   3 ++-
 .../Home/CornerPopup}/power-of-meshery-small.png    | Bin
 .../Home/CornerPopup}/power-of-meshery-small.svg    |   0
 .../Home/CornerPopup}/power-of-meshery.svg          |   0
 src/sections/Kanvas/index.js                        |   3 ++-
 6 files changed, 8 insertions(+), 7 deletions(-)
 rename src/{components/Corner-popup => sections/Home/CornerPopup}/power-of-meshery-small.png (100%)
 rename src/{components/Corner-popup => sections/Home/CornerPopup}/power-of-meshery-small.svg (100%)
 rename src/{components/Corner-popup => sections/Home/CornerPopup}/power-of-meshery.svg (100%)

diff --git a/src/components/Corner-popup/index.js b/src/components/Corner-popup/index.js
index 1eb2db95a32eb..fb321453a3263 100644
--- a/src/components/Corner-popup/index.js
+++ b/src/components/Corner-popup/index.js
@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from "react";
 import Button from "../../reusecore/Button";
 import { ReactComponent as CloseIcon } from "./closeIcon.svg";
-import popupImageSmall from "./power-of-meshery-small.webp";
 import CornerPopupWrapper from "./popup.style";
 
-const CornerPopup = ({ storageKey = "showPopup" }) => {
+const CornerPopup = ({ storageKey = "showPopup", image, link, text }) => {
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
@@ -27,10 +26,10 @@ const CornerPopup = ({ storageKey = "showPopup" }) => {
             <div className="close-btn" onClick={() => setShowPopup(false)}>
               <CloseIcon />
             </div>
-            <a href="https://play.meshery.io/">
-              <img alt="popup image" className="popup-image" src={popupImageSmall} />
+            <a href={link}>
+              <img alt="popup image" className="popup-image" src={image} />
             </a>
-            <Button $primary className="explore-playground-button" title="Access Playground" $url="https://play.meshery.io/" $external={true}/>
+            <Button $primary className="explore-playground-button" title={text} $url={link} $external={true}/>
           </div>
         </div>
       </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index f6b84adaf2d9f..2c58b8bca5f9f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -14,6 +14,7 @@ import CaseStudyBanner from "../components/Case-study-banner";
 // const SoSpecial = loadable(() => import("../sections/Home/So-Special-Section"));
 const MesheryIntegration = loadable(() => import("../sections/Meshery/Meshery-integrations"));
 const FeaturesContainer = loadable(() => import("../sections/Home/FeaturesContainer"));
+import popupImageSmall from "../sections/Home/CornerPopup/power-of-meshery-small.png";
 
 // import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
 
@@ -24,7 +25,7 @@ const IndexPage = () => {
       <Banner />
       <FeaturesContainer />
       <Partners />
-      <CornerPopup storageKey="homepageShowPopup"/>
+      <CornerPopup storageKey="homepageShowPopup" image={popupImageSmall} link="https://play.meshery.io/" text="Access Playground"/>
       {/* <ServiceMeshManagement /> */}
       <CloudNativeManagement />
       <MesheryIntegration  />
diff --git a/src/components/Corner-popup/power-of-meshery-small.png b/src/sections/Home/CornerPopup/power-of-meshery-small.png
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery-small.png
rename to src/sections/Home/CornerPopup/power-of-meshery-small.png
diff --git a/src/components/Corner-popup/power-of-meshery-small.svg b/src/sections/Home/CornerPopup/power-of-meshery-small.svg
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery-small.svg
rename to src/sections/Home/CornerPopup/power-of-meshery-small.svg
diff --git a/src/components/Corner-popup/power-of-meshery.svg b/src/sections/Home/CornerPopup/power-of-meshery.svg
similarity index 100%
rename from src/components/Corner-popup/power-of-meshery.svg
rename to src/sections/Home/CornerPopup/power-of-meshery.svg
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index 24f425b802e83..ad9e329327ec1 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -39,6 +39,7 @@ import TeaserModal from "../../components/TeaserModal";
 import GuyM from "./images/guym.jpg";
 import Abdechakour from "../../sections/Pricing/reviews/abdechakour-h.jpeg";
 import CornerPopup from "../../components/Corner-popup";
+import CornerPopupImage from "../../assets/images/AWS-Diagram/aws.svg";
 
 
 const Kanvas = (props) => {
@@ -46,7 +47,7 @@ const Kanvas = (props) => {
   return (
     <KanvasWrapper>
       <div>
-        <CornerPopup storageKey="kanvasShowPopup"/>
+        <CornerPopup storageKey="kanvasShowPopup" image={CornerPopupImage} link="https://kanvas.new/" text="Access Kanvas"/>
         <Container>
           <KanvasBanner/>
           <div className="mobile-modes">

From a8b57045778b497616dbc0bc99e6e595531f605b Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Thu, 2 Oct 2025 16:57:50 +0200
Subject: [PATCH 4/6] feat: kanvas animation in corner popup

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/components/Corner-popup/index.js          |   4 +-
 src/components/Corner-popup/popup.style.js    |  12 +-
 src/pages/index.js                            |  24 ++-
 .../kanvas-collaborate-banner.js              | 177 ++----------------
 src/sections/Kanvas/index.js                  |   5 +-
 .../Kanvas/kanvas-architectural-transition.js | 151 +++++++++++++++
 src/sections/Kanvas/kanvas-corner-popup.js    |  61 ++++++
 7 files changed, 252 insertions(+), 182 deletions(-)
 create mode 100644 src/sections/Kanvas/kanvas-architectural-transition.js
 create mode 100644 src/sections/Kanvas/kanvas-corner-popup.js

diff --git a/src/components/Corner-popup/index.js b/src/components/Corner-popup/index.js
index fb321453a3263..35fb59d17206c 100644
--- a/src/components/Corner-popup/index.js
+++ b/src/components/Corner-popup/index.js
@@ -3,7 +3,7 @@ import Button from "../../reusecore/Button";
 import { ReactComponent as CloseIcon } from "./closeIcon.svg";
 import CornerPopupWrapper from "./popup.style";
 
-const CornerPopup = ({ storageKey = "showPopup", image, link, text }) => {
+const CornerPopup = ({ storageKey = "showPopup", link, text, content }) => {
   const [showPopup, setShowPopup] = useState(false);
 
   useEffect(() => {
@@ -27,7 +27,7 @@ const CornerPopup = ({ storageKey = "showPopup", image, link, text }) => {
               <CloseIcon />
             </div>
             <a href={link}>
-              <img alt="popup image" className="popup-image" src={image} />
+              {content}
             </a>
             <Button $primary className="explore-playground-button" title={text} $url={link} $external={true}/>
           </div>
diff --git a/src/components/Corner-popup/popup.style.js b/src/components/Corner-popup/popup.style.js
index d4d1ba94766da..35df0171a329b 100644
--- a/src/components/Corner-popup/popup.style.js
+++ b/src/components/Corner-popup/popup.style.js
@@ -34,7 +34,7 @@ const CornerPopupWrapper = styled.div`
     align-items: center;
     padding: 1rem;
     border: 1px solid #00d3a9;
-    border-radius: 5%;
+    border-radius: 12px;
     box-shadow: 0 0 30px rgba(0,211,169, 0.6);
     @media only screen and (max-width: 640px) {
         padding: 0.5rem;
@@ -47,16 +47,6 @@ const CornerPopupWrapper = styled.div`
     right: 0rem;
     cursor: pointer;
 }
-.popup-image{
-    border: 1px solid ${props => props.theme.whiteToBlack};
-    border-radius: 3%;
-}
-/* .popup-image-small{
-    box-shadow: 0 0 30px rgba(0,211,169, 0.6);
-    @media only screen and (min-width: 767px) {
-        display: none;
-    }
-} */
 
 .explore-playground-button {
     min-width: 140px;
diff --git a/src/pages/index.js b/src/pages/index.js
index 2c58b8bca5f9f..29417633fa850 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import Partners from "../sections/Home/Partners-home";
 import Banner from "../sections/Home/Banner";
 import loadable from "@loadable/component";
 import CornerPopup from "../components/Corner-popup";
+
 const CloudNativeManagement = loadable(() => import("../sections/Home/CloudNativeManagement"));
 const SubscribeSection = loadable(() => import("../sections/subscribe/subscribe"));
 // const ServiceMeshFocussed = loadable(() => import("../sections/Home/Service-mesh-focussed"));
@@ -22,13 +23,17 @@ import popupImageSmall from "../sections/Home/CornerPopup/power-of-meshery-small
 const IndexPage = () => {
   return (
     <>
-      <Banner />
-      <FeaturesContainer />
-      <Partners />
-      <CornerPopup storageKey="homepageShowPopup" image={popupImageSmall} link="https://play.meshery.io/" text="Access Playground"/>
+      <Banner/>
+      <FeaturesContainer/>
+      <Partners/>
+      <CornerPopup storageKey="homepageShowPopup" image={popupImageSmall} link="https://play.meshery.io/"
+        content={
+          <img alt="popup image" className="popup-image" src={popupImageSmall}/>
+        }
+        text="Access Playground"/>
       {/* <ServiceMeshManagement /> */}
-      <CloudNativeManagement />
-      <MesheryIntegration  />
+      <CloudNativeManagement/>
+      <MesheryIntegration/>
       {/* <Statement /> */}
       {/* <AppScreens /> */}
       {/* <Pricing /> */}
@@ -42,7 +47,7 @@ const IndexPage = () => {
       <CaseStudyBanner/>
       {/* <ServiceMeshFocussed bookName={"enterprise-path"} /> */}
       {/* <EngineerEnabler /> */}
-      <SubscribeSection />
+      <SubscribeSection/>
 
     </>
   );
@@ -62,8 +67,9 @@ export const Head = () => {
     ]
   };
   return (
-    <SEO title="Layer5" description="An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and maintainer of cloud native standards. Maker of Meshery, the cloud native manager."
-      schemaMarkup={schema} />
+    <SEO title="Layer5"
+      description="An empowerer of engineers, Layer5 helps you extract more value from your infrastructure. Creator and maintainer of cloud native standards. Maker of Meshery, the cloud native manager."
+      schemaMarkup={schema}/>
   );
 };
 export default IndexPage;
diff --git a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
index 89fe4d68cd519..36c8262b703dd 100644
--- a/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
+++ b/src/sections/Kanvas/Kanvas-collaborate/kanvas-collaborate-banner.js
@@ -1,49 +1,22 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import Button from "../../../reusecore/Button";
-import { ReactComponent as IngressGatewayImage } from "./images/banner-transitions/ingress-gateway-partial-colorMode.svg";
-import { ReactComponent as KubernetesImage } from "./images/banner-transitions/kubernetes-partial-colorMode.svg";
-import { ReactComponent as PodImage } from "./images/banner-transitions/pod-partial-colorMode.svg";
-import { ReactComponent as PrometheusImage } from "./images/banner-transitions/prometheus-partial-colorMode.svg";
-import { ReactComponent as ServiceIntefaceImage } from "./images/banner-transitions/service-interface-partial-colorMode.svg";
-import SupportingArrows from "./images/banner-transitions/supporting-arrows.svg";
-import EmptyLight from "./images/banner-transitions/empty-light.svg";
-import EmptyDark from "./images/banner-transitions/empty-dark.svg";
-import { useInView } from "react-intersection-observer";
-import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
+import KanvasArchitecturalTransition from "../kanvas-architectural-transition";
 
 const CollaborationBannerWrapper = styled.div`
-
     .banner {
         display: flex;
         flex-direction: column;
         background: ${props => props.theme.linearToLinear2};
-        /* background-color: ${props => props.theme.grey121212ToWhite}; */
         max-width: 1920px;
         width: 100%;
         height: fit-content;
         justify-content: space-evenly;
         align-items: center;
-        padding: 4% 5% 6%;
-        /* transform: rotateX(40deg); */
-
-        /* @media only screen and (max-width: 500px) {
-            max-height: 400px;
-        } */
+        position: relative;
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
-        svg {
-            .service-interface-partial-colorMode_svg__colorMode1,
-            .prometheus-partial-colorMode_svg__colorMode1,
-            .pod-partial-colorMode_svg__colorMode1,
-            .kubernetes-partial-colorMode_svg__colorMode1,
-            .ingress-gateway-partial-colorMode_svg__colorMode1 {
-              fill: ${props => props.theme.whiteToBlack};
-              transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-            }
     }
 
-
     .banner-text {
         display: flex;
         flex-direction: column;
@@ -54,42 +27,19 @@ const CollaborationBannerWrapper = styled.div`
     }
 
     h1 {
-        /* font-size: 4rem; */
         position: relative;
         display: inline-block;
-        /* color: ${props => props.theme.primaryColor}; */
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-/*
-        @media only screen and (min-width: 500px) {
-            font-size: 3.5rem;
-        }
-        @media only screen and (min-width: 767px) {
-            font-size: 4rem;
-        }
-        @media only screen and (min-width: 950px) {
-            font-size: 5rem;
-        } */
         @media only screen and (min-width: 1400px) {
             font-size: 3.75rem;
         }
     }
 
-    .heading {
-        opacity: 0;
-    }
-
-    .heading-transition {
-        opacity: 1;
-        transition: opacity 2.5s;
-    }
-
     h4 {
-        padding: 3% 0%;
+        padding: 3% 0;
         color: ${props => props.theme.greyA0AAAAToGrey666666};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-        /* font-size: 20px; */
         max-width: 40%;
-        /* font-weight: bold; */
         @media only screen and (max-width: 500px) {
             font-size: 1rem;
             max-width: 100%;
@@ -106,119 +56,32 @@ const CollaborationBannerWrapper = styled.div`
     p {
         padding-top: 2rem;
     }
-
-    .transition-container {
-        margin: 10% 0% 0%;
-        max-width: 70%;
-        position: relative;
-    }
-
-    .ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface {
-        /* max-width: 70%; */
-        position: absolute;
-        top: 0%;
-        left: 0%;
-        scale: 0.7;
-        opacity: 1;
-        transition: 1s;
-    }
-
-    .supporting-arrows {
-        opacity: 0;
-        scale: 1;
-    }
-
-    .supporting-arrows-transition {
-        opacity: 1;
-        transition: 0.5s ease-out 1s ;
-    }
-
-    .ingress-gateway {
-        translate: -40% 0;
-    }
-
-    .ingress-gateway-transition {
-        transform: translateX(40%);
-        scale: 1;
-        transition: 1s;
-    }
-
-    .kubernetes {
-        translate: 50% -30%;
-    }
-
-    .kubernetes-transition {
-        transform: translateX(-50%) translateY(30%);
-        scale: 1;
-        transition: 0.75s;
-    }
-
-    .pod {
-        translate: 40% 30%;
-    }
-
-    .pod-transition {
-        transform: translateX(-40%) translateY(-30%);
-        scale: 1;
-        transition: 1s;
-    }
-
-    .prometheus {
-        translate: -50% 30%;
-    }
-
-    .prometheus-transition {
-        transform: translateX(50%) translateY(-30%);
-        scale: 1;
-        transition: 1.25s;
-    }
-
-    .service-interface {
-        scale: 1;
-    }
-}
 `;
 
 const KanvasCollaborateBanner = () => {
-  const [transitionRef, inView] = useInView({ threshold: 0.7 });
-  const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
-
-  const { isDark } = useStyledDarkMode();
-
   return (
     <CollaborationBannerWrapper>
       <div className="banner">
         <div className="banner-text">
-          <h1>Collaborate with the team. <br /> Build solutions together </h1>
-          <h4>Designer and Operator live side-by-side, so all design work, from ideation to operation, can be found in one place.</h4>
-          <Button $primary className="join-community-button" title="Start Collaborating" $url="https://kanvas.new/" $external={true} />
-        </div>
-        <div className="transition-container" ref={transitionRef}>
-          <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
-          <div>
-            <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage" />
-          </div>
-          <div>
-            <IngressGatewayImage className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"} alt="IngressGatewayImage" />
-          </div>
-          <div>
-            <KubernetesImage className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"} alt="KubernetesImage" />
-          </div>
-          <div>
-            <PodImage className={imageInView ? "pod-transition pod" : "pod"} alt="PodImage" />
-          </div>
-          <div>
-            <PrometheusImage alt="PrometheusImage" className={imageInView ? "prometheus-transition prometheus" : "prometheus"} />
-          </div>
-          <img className={imageInView ? "supporting-arrows-transition supporting-arrows" : "supporting-arrows"} src={SupportingArrows} alt="" />
+          <h1>
+            Collaborate with the team. <br /> Build solutions together
+          </h1>
+          <h4>
+            Designer and Operator live side-by-side, so all design work, from
+            ideation to operation, can be found in one place.
+          </h4>
+          <Button
+            $primary
+            className="join-community-button"
+            title="Start Collaborating"
+            $url="https://kanvas.new/"
+            $external={true}
+          />
         </div>
+        <KanvasArchitecturalTransition />
       </div>
     </CollaborationBannerWrapper>
   );
 };
 
-export default KanvasCollaborateBanner;
\ No newline at end of file
+export default KanvasCollaborateBanner;
diff --git a/src/sections/Kanvas/index.js b/src/sections/Kanvas/index.js
index ad9e329327ec1..db6e82a1ddcd8 100644
--- a/src/sections/Kanvas/index.js
+++ b/src/sections/Kanvas/index.js
@@ -38,8 +38,7 @@ import Alex from "../../sections/Pricing/reviews/alex-hokanson.jpeg";
 import TeaserModal from "../../components/TeaserModal";
 import GuyM from "./images/guym.jpg";
 import Abdechakour from "../../sections/Pricing/reviews/abdechakour-h.jpeg";
-import CornerPopup from "../../components/Corner-popup";
-import CornerPopupImage from "../../assets/images/AWS-Diagram/aws.svg";
+import KanvasCornerPopup from "./kanvas-corner-popup";
 
 
 const Kanvas = (props) => {
@@ -47,7 +46,7 @@ const Kanvas = (props) => {
   return (
     <KanvasWrapper>
       <div>
-        <CornerPopup storageKey="kanvasShowPopup" image={CornerPopupImage} link="https://kanvas.new/" text="Access Kanvas"/>
+        <KanvasCornerPopup />
         <Container>
           <KanvasBanner/>
           <div className="mobile-modes">
diff --git a/src/sections/Kanvas/kanvas-architectural-transition.js b/src/sections/Kanvas/kanvas-architectural-transition.js
new file mode 100644
index 0000000000000..561bb450e283f
--- /dev/null
+++ b/src/sections/Kanvas/kanvas-architectural-transition.js
@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import EmptyDark from "./Kanvas-collaborate/images/banner-transitions/empty-dark.svg";
+import EmptyLight from "./Kanvas-collaborate/images/banner-transitions/empty-light.svg";
+import { ReactComponent as IngressGatewayImage } from "./Kanvas-collaborate/images/banner-transitions/ingress-gateway-partial-colorMode.svg";
+import { ReactComponent as KubernetesImage } from "./Kanvas-collaborate/images/banner-transitions/kubernetes-partial-colorMode.svg";
+import { ReactComponent as PodImage } from "./Kanvas-collaborate/images/banner-transitions/pod-partial-colorMode.svg";
+import { ReactComponent as PrometheusImage } from "./Kanvas-collaborate/images/banner-transitions/prometheus-partial-colorMode.svg";
+import {
+  ReactComponent as ServiceIntefaceImage
+} from "./Kanvas-collaborate/images/banner-transitions/service-interface-partial-colorMode.svg";
+import SupportingArrows from "./Kanvas-collaborate/images/banner-transitions/supporting-arrows.svg";
+import { useInView } from "react-intersection-observer";
+import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
+
+const TransitionWrapper = styled.div`
+
+    .transition-container {
+        margin: auto;
+        max-width: 70%;
+        position: relative;
+    }
+
+    svg {
+        .service-interface-partial-colorMode_svg__colorMode1,
+        .prometheus-partial-colorMode_svg__colorMode1,
+        .pod-partial-colorMode_svg__colorMode1,
+        .kubernetes-partial-colorMode_svg__colorMode1,
+        .ingress-gateway-partial-colorMode_svg__colorMode1 {
+            fill: ${props => props.theme.whiteToBlack};
+            transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        }
+    }
+
+    .ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface {
+        /* max-width: 70%; */
+        position: absolute;
+        top: 0%;
+        left: 0%;
+        scale: 0.7;
+        opacity: 1;
+        transition: 1s;
+    }
+
+    .supporting-arrows {
+        opacity: 0;
+        scale: 1;
+    }
+
+    .supporting-arrows-transition {
+        opacity: 1;
+        transition: 0.5s ease-out 1s;
+    }
+
+    .ingress-gateway {
+        translate: -40% 0;
+    }
+
+    .ingress-gateway-transition {
+        transform: translateX(40%);
+        scale: 1;
+        transition: 1s;
+    }
+
+    .kubernetes {
+        translate: 50% -30%;
+    }
+
+    .kubernetes-transition {
+        transform: translateX(-50%) translateY(30%);
+        scale: 1;
+        transition: 0.75s;
+    }
+
+    .pod {
+        translate: 40% 30%;
+    }
+
+    .pod-transition {
+        transform: translateX(-40%) translateY(-30%);
+        scale: 1;
+        transition: 1s;
+    }
+
+    .prometheus {
+        translate: -50% 30%;
+    }
+
+    .prometheus-transition {
+        transform: translateX(50%) translateY(-30%);
+        scale: 1;
+        transition: 1.25s;
+    }
+
+    .service-interface {
+        scale: 1;
+    }
+
+`;
+
+const KanvasArchitecturalTransition = () => {
+  const [transitionRef, inView] = useInView({ threshold: 0.7 });
+  const [imageInView, setImageInView] = useState(false);
+
+  if (inView && !imageInView) setImageInView(true);
+  else if (imageInView && !inView) setImageInView(false);
+
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <TransitionWrapper>
+      <div className="transition-container" ref={transitionRef}>
+        <img className="canvas" src={isDark ? EmptyDark : EmptyLight} alt="" />
+        <div>
+          <ServiceIntefaceImage className="service-interface" alt="ServiceIntefaceImage"/>
+        </div>
+        <div>
+          <IngressGatewayImage
+            className={imageInView ? "ingress-gateway-transition ingress-gateway" : "ingress-gateway"}
+            alt="IngressGatewayImage"
+          />
+        </div>
+        <div>
+          <KubernetesImage
+            className={imageInView ? "kubernetes-transition kubernetes" : "kubernetes"}
+            alt="KubernetesImage"
+          />
+        </div>
+        <div>
+          <PodImage
+            className={imageInView ? "pod-transition pod" : "pod"}
+            alt="PodImage"
+          />
+        </div>
+        <div>
+          <PrometheusImage
+            className={imageInView ? "prometheus-transition prometheus" : "prometheus"}
+            alt="PrometheusImage"
+          />
+        </div>
+        <img
+          className={imageInView ? "supporting-arrows-transition supporting-arrows" : "supporting-arrows"}
+          src={SupportingArrows}
+          alt=""
+        />
+      </div>
+    </TransitionWrapper>
+  );
+};
+
+export default KanvasArchitecturalTransition;
diff --git a/src/sections/Kanvas/kanvas-corner-popup.js b/src/sections/Kanvas/kanvas-corner-popup.js
new file mode 100644
index 0000000000000..bea38134f47b1
--- /dev/null
+++ b/src/sections/Kanvas/kanvas-corner-popup.js
@@ -0,0 +1,61 @@
+import React from "react";
+import CornerPopup from "../../components/Corner-popup";
+import KanvasArchitecturalTransition from "./kanvas-architectural-transition";
+import styled from "styled-components";
+
+const TransitionWrapper = styled.div`
+    .popup-container {
+        background: ${props => props.theme.linearToLinear2};
+        overflow: hidden;
+        border-radius: 12px;
+    }
+
+    .popup-text {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        z-index: 1;
+        padding-top: 2%;
+    }
+
+    h1 {
+        display: inline-block;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        font-size: 1.8rem;
+    }
+
+    h4 {
+        padding: 3% 0;
+        color: ${props => props.theme.greyA0AAAAToGrey666666};
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+        @media only screen and (max-width: 500px) {
+            font-size: 1rem;
+            max-width: 100%;
+        }
+        @media only screen and (max-width: 767px) {
+            max-width: 100%;
+        }
+    }
+`;
+
+const KanvasCornerPopup = () => {
+  return (
+    <CornerPopup storageKey="kanvasShowPopup" content={
+      <TransitionWrapper>
+        <div className="popup-container">
+          <div className="popup-text">
+            <h1>
+              Collaborate with the team
+            </h1>
+            <h4>
+              Build solutions together
+            </h4>
+          </div>
+          <KanvasArchitecturalTransition/>
+        </div>
+      </TransitionWrapper>
+    } link="https://kanvas.new/" text="Access Kanvas"/>
+  );
+};
+
+export default KanvasCornerPopup;
\ No newline at end of file

From f6fede2d85f028b2515ad9f0595e29686ae890b4 Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Sat, 4 Oct 2025 14:00:16 +0200
Subject: [PATCH 5/6] feat: kanvas popup vertical spacing

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/sections/Kanvas/kanvas-corner-popup.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/sections/Kanvas/kanvas-corner-popup.js b/src/sections/Kanvas/kanvas-corner-popup.js
index bea38134f47b1..62fd4efaf4511 100644
--- a/src/sections/Kanvas/kanvas-corner-popup.js
+++ b/src/sections/Kanvas/kanvas-corner-popup.js
@@ -7,11 +7,15 @@ const TransitionWrapper = styled.div`
     .popup-container {
         background: ${props => props.theme.linearToLinear2};
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
         border-radius: 12px;
     }
 
     .popup-text {
         display: flex;
+        gap: 2rem;
         flex-direction: column;
         text-align: center;
         z-index: 1;

From d9a772b5649cf02291ed493795dc7351a2fd87ab Mon Sep 17 00:00:00 2001
From: Lorenzo Croce <lorenzo.croce@arenastudios.it>
Date: Sat, 25 Oct 2025 21:53:53 +0200
Subject: [PATCH 6/6] fix: add 'Try it now at kanvas.new' text and styling to
 corner popup

Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
---
 src/sections/Kanvas/kanvas-corner-popup.js | 31 ++++++++++++++++++----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/sections/Kanvas/kanvas-corner-popup.js b/src/sections/Kanvas/kanvas-corner-popup.js
index 62fd4efaf4511..e42a27fdf6a3e 100644
--- a/src/sections/Kanvas/kanvas-corner-popup.js
+++ b/src/sections/Kanvas/kanvas-corner-popup.js
@@ -15,7 +15,7 @@ const TransitionWrapper = styled.div`
 
     .popup-text {
         display: flex;
-        gap: 2rem;
+        gap: 0;
         flex-direction: column;
         text-align: center;
         z-index: 1;
@@ -40,6 +40,23 @@ const TransitionWrapper = styled.div`
             max-width: 100%;
         }
     }
+
+    .try-it-text {
+        z-index: 1;
+        padding: 1rem 2rem 2rem;
+        text-align: center;
+        font-size: 1.1rem;
+
+        span {
+            color: ${props => props.theme.greyA0AAAAToGrey666666};
+        }
+
+        strong {
+            color: #FFFFFF;
+            font-weight: 600;
+            font-size: 1.5rem
+        }
+    }
 `;
 
 const KanvasCornerPopup = () => {
@@ -48,18 +65,22 @@ const KanvasCornerPopup = () => {
       <TransitionWrapper>
         <div className="popup-container">
           <div className="popup-text">
-            <h1>
-              Collaborate with the team
-            </h1>
             <h4>
               Build solutions together
             </h4>
+            <h1>
+              Collaborate with the team
+            </h1>
           </div>
           <KanvasArchitecturalTransition/>
+          <div className="try-it-text">
+            <span>Try it now at </span>
+            <strong>kanvas.new</strong>
+          </div>
         </div>
       </TransitionWrapper>
     } link="https://kanvas.new/" text="Access Kanvas"/>
   );
 };
 
-export default KanvasCornerPopup;
\ No newline at end of file
+export default KanvasCornerPopup;