From 2172ee9d6220e5f36eaa7dd8ca4a76ff8e493d5e Mon Sep 17 00:00:00 2001
From: megha1807 <meghakumarig5@gmail.com>
Date: Tue, 10 Mar 2026 20:40:24 +0530
Subject: [PATCH 1/3] SEO: Improve Kanvas section headings and image
 accessibility

Signed-off-by: megha1807 <meghakumarig5@gmail.com>
---
 .../Kanvas-design/kanvas-design-hero.js       | 140 ++++++++++--------
 .../kanvas-design-integrations.js             |   8 +-
 2 files changed, 80 insertions(+), 68 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
index 0fbdacf50a9cc..d041c5195cc65 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
@@ -9,95 +9,107 @@ import { useState } from "react";
 import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const HeroSectionWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  background-color: ${(props) => props.theme.grey121212ToWhite};
+  width: 100%;
+  justify-content: space-evenly;
+  align-items: center;
+  padding: 3% 5% 8%;
+  transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    display: flex;
-    flex-direction: row;
-    background-color: ${props => props.theme.grey121212ToWhite};;
-    width: 100%;
-    justify-content: space-evenly;
-    align-items: center;
-    padding: 3% 5% 8%;
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  @media only screen and (max-width: 767px) {
+    text-align: center;
+    flex-direction: column-reverse;
+  }
 
+  .hero-text {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 35%;
+    margin-top: 5%;
     @media only screen and (max-width: 767px) {
-      text-align: center;
-      flex-direction: column-reverse;
+      max-width: 100%;
+      margin-top: 15%;
     }
+  }
 
-    .hero-text {
-        display: flex;
-        flex-direction: column;
-        flex: 0 0 35%;
-        margin-top: 5%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-          margin-top: 15%;
-        }
-    }
+  h2 {
+    padding-bottom: 2%;
+  }
 
-    h2 {
-      padding-bottom: 2%;
+  .hero-image {
+    display: grid;
+    grid-template-rows: 5rem 5rem;
+    place-items: center;
+    margin: 5% 0;
+    flex: 0 0 50%;
+    max-width: 60%;
+    @media only screen and (max-width: 767px) {
+      max-width: 100%;
     }
 
-    .hero-image {
-        display: grid;
-        grid-template-rows: 5rem 5rem;
-        place-items: center;
-        margin: 5% 0;
-        flex: 0 0 50%;
-        max-width: 60%;
-        @media only screen and (max-width: 767px) {
-          max-width: 100%;
-        }
-
-        .locator {
-            /* transform: translateY(-5rem); */
-            transition: 1s;
-            z-index: 1;
-        }
-        .locator-moving {
-            transform: translateY(5rem);
-            transition: 1s;
-            z-index: 1;
-        }
-
-        .map {
-            opacity: 0;
-            transition: opacity ease 0.5s;
-            z-index: 0;
-        }
-        .map-visible {
-            opacity: 1;
-            transition: opacity 1s ease 0.5s;
-        }
+    .locator {
+      /* transform: translateY(-5rem); */
+      transition: 1s;
+      z-index: 1;
+    }
+    .locator-moving {
+      transform: translateY(5rem);
+      transition: 1s;
+      z-index: 1;
+    }
 
+    .map {
+      opacity: 0;
+      transition: opacity ease 0.5s;
+      z-index: 0;
+    }
+    .map-visible {
+      opacity: 1;
+      transition: opacity 1s ease 0.5s;
     }
+  }
 `;
 
-
 const KanvasHeroSection = () => {
   const [locatorRef, inView] = useInView({ threshold: 0.8 });
   const [imageInView, setimageInView] = useState(false);
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
+  if (inView && !imageInView) setimageInView(true);
+  else if (imageInView && !inView) setimageInView(false);
 
   const { isDark } = useStyledDarkMode();
 
   return (
     <HeroSectionWrapper>
       <div className="hero-text">
-        <h2><span>Design your infrastructure</span></h2>
-        <p>Kanvasis the world’s only visual designer for Kubernetes and cloud native applications. Design, deploy, and manage your Kubernetes-based, cloud native deployments allowing you to speed up infrastructure configuration.</p>
+        <h1>Kanvas Designer :Visual Cloud Native Infrastructure Tool</h1>
+
+        <h2>
+          <span>Design Your Kubernetes & Cloud Native Infrastructure</span>
+        </h2>
+        <p>
+          Kanvasis the world's only visual designer for Kubernetes and cloud
+          native applications. Design, deploy, and manage your
+          Kubernetes-baseddeployments, allowing you to speed up infrastructure
+          configuration.
+        </p>
       </div>
       <div className="hero-image">
-        <img className={imageInView ? "locator-moving" : "locator"} src={isDark ? KanvasLocatorDark : KanvasLocatorLight} alt="locator" />
-        <img className={imageInView ? "map map-visible" : "map"} src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight} alt="integrations" ref={locatorRef} />
+        <img
+          className={imageInView ? "locator-moving" : "locator"}
+          src={isDark ? KanvasLocatorDark : KanvasLocatorLight}
+          alt="Kanvas visual infrastructure design locator icon"
+        />
+        <img
+          className={imageInView ? "map map-visible" : "map"}
+          src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight}
+          alt="Kanvas infrastructure visualization diagram showing cloud native components"
+          ref={locatorRef}
+        />
       </div>
     </HeroSectionWrapper>
-
   );
 };
 
-export default KanvasHeroSection;
\ No newline at end of file
+export default KanvasHeroSection;
diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
index b9c2b9451e865..2f090dc6381e1 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
@@ -125,19 +125,19 @@ const KanvasIntegrationsSection = () => {
       </div>
       <div className="hero-text">
         <div>
-          <h1>
+          <h2>
             {Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in
             Integrations
-          </h1>
+          </h2>
         </div>
         <div>
           <img className="underline-img" src={UnderlineImg} alt="" />
         </div>
         <div>
-          <h4>
+          <h3>
             Support for all of your Cloud Native Infrastructure and
             Applications.
-          </h4>
+          </h3>
         </div>
         <div>
           <Button

From f16f780a2b7b56c5f903efbc1ed9fcc6dc55d13c Mon Sep 17 00:00:00 2001
From: megha1807 <meghakumarig5@gmail.com>
Date: Thu, 12 Mar 2026 17:01:03 +0530
Subject: [PATCH 2/3] Improve Kanvas section SEO and accessibility

Signed-off-by: megha1807 <meghakumarig5@gmail.com>
---
 .../Kanvas-design/kanvas-design-hero.js       | 19 +++++++++++++------
 .../kanvas-design-integrations.js             | 18 +++++++++++-------
 2 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
index d041c5195cc65..53bb1ff5dcd2f 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
@@ -81,18 +81,23 @@ const KanvasHeroSection = () => {
   const { isDark } = useStyledDarkMode();
 
   return (
-    <HeroSectionWrapper>
+    <HeroSectionWrapper aria-labelledby="kanvas-hero-title">
       <div className="hero-text">
-        <h1>Kanvas Designer :Visual Cloud Native Infrastructure Tool</h1>
+        <h1 id="kanvas-hero-title">
+          Kanvas Designer: Visual Cloud Native Infrastructure Tool
+        </h1>
 
         <h2>
           <span>Design Your Kubernetes & Cloud Native Infrastructure</span>
         </h2>
         <p>
-          Kanvasis the world's only visual designer for Kubernetes and cloud
-          native applications. Design, deploy, and manage your
-          Kubernetes-baseddeployments, allowing you to speed up infrastructure
-          configuration.
+          <p>
+            Kanvas is a visual designer for Kubernetes and cloud-native
+            applications. It allows developers and platform engineers to design,
+            deploy, and manage Kubernetes-based infrastructure through an
+            intuitive graphical interface, simplifying cloud-native architecture
+            and accelerating configuration.
+          </p>
         </p>
       </div>
       <div className="hero-image">
@@ -100,11 +105,13 @@ const KanvasHeroSection = () => {
           className={imageInView ? "locator-moving" : "locator"}
           src={isDark ? KanvasLocatorDark : KanvasLocatorLight}
           alt="Kanvas visual infrastructure design locator icon"
+          loading="lazy"
         />
         <img
           className={imageInView ? "map map-visible" : "map"}
           src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight}
           alt="Kanvas infrastructure visualization diagram showing cloud native components"
+          loading="lazy"
           ref={locatorRef}
         />
       </div>
diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
index 2f090dc6381e1..87266f674a0d1 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
@@ -112,31 +112,35 @@ const KanvasIntegrationsSection = () => {
   // const { isDark } = useStyledDarkMode();
 
   return (
-    <IntegrationsSectionWrapper>
+    <IntegrationsSectionWrapper aria-labelledby="kanvas-integrations">
       <div
         className="hero-image"
         ref={diagramRef}
         style={{ alignSelf: "center", width: "100%" }}
       >
         <IntegrationsImage
-          alt="integrations-img"
+          alt="Kanvas integrations diagram showing supported cloud native infrastructure tools and platforms"
           className={imageInView ? "diagram-visible" : "diagram-hidden"}
         />
       </div>
       <div className="hero-text">
         <div>
-          <h2>
+          <h2 id="kanvas-integrations">
             {Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in
-            Integrations
+            Cloud Native Integrations
           </h2>
         </div>
         <div>
-          <img className="underline-img" src={UnderlineImg} alt="" />
+          <img
+            className="underline-img"
+            src={UnderlineImg}
+            alt="decorative underline graphic highlighting integrations section"
+          />
         </div>
         <div>
           <h3>
-            Support for all of your Cloud Native Infrastructure and
-            Applications.
+            Integrate Kanvas with your cloud-native infrastructure, Kubernetes
+            tools, and modern application platforms.
           </h3>
         </div>
         <div>

From 73097f5cb02eafbd35b28bac4709dc526bb97b92 Mon Sep 17 00:00:00 2001
From: megha1807 <meghakumarig5@gmail.com>
Date: Tue, 17 Mar 2026 15:17:51 +0530
Subject: [PATCH 3/3] SEO: Update Kanvas sections with enhanced headings, alt
 text, and accessibility tweaks

Signed-off-by: megha1807 <meghakumarig5@gmail.com>
---
 .../Kanvas-design/kanvas-design-hero.js       | 26 +++++++++----------
 .../kanvas-design-integrations.js             | 20 ++++++++++----
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
index 53bb1ff5dcd2f..34c6c71f5aa62 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-hero.js
@@ -81,33 +81,33 @@ const KanvasHeroSection = () => {
   const { isDark } = useStyledDarkMode();
 
   return (
-    <HeroSectionWrapper aria-labelledby="kanvas-hero-title">
+    <HeroSectionWrapper id="kanvas-hero" aria-labelledby="kanvas-hero-heading">
       <div className="hero-text">
-        <h1 id="kanvas-hero-title">
+        <h1 id="kanvas-hero-heading">
           Kanvas Designer: Visual Cloud Native Infrastructure Tool
         </h1>
 
-        <h2>
-          <span>Design Your Kubernetes & Cloud Native Infrastructure</span>
-        </h2>
+        <h2>Design Your Kubernetes &amp; Cloud Native Infrastructure</h2>
+
         <p>
-          <p>
-            Kanvas is a visual designer for Kubernetes and cloud-native
-            applications. It allows developers and platform engineers to design,
-            deploy, and manage Kubernetes-based infrastructure through an
-            intuitive graphical interface, simplifying cloud-native architecture
-            and accelerating configuration.
-          </p>
+          Kanvas is a visual designer for Kubernetes and cloud-native
+          applications. It allows developers and platform engineers to design,
+          deploy, and manage Kubernetes-based infrastructure through an
+          intuitive graphical interface, simplifying cloud-native architecture
+          and accelerating configuration.
         </p>
       </div>
       <div className="hero-image">
         <img
+          title="Kanvas infrastructure locator - visual Kubernetes design tool"
           className={imageInView ? "locator-moving" : "locator"}
           src={isDark ? KanvasLocatorDark : KanvasLocatorLight}
           alt="Kanvas visual infrastructure design locator icon"
-          loading="lazy"
+          fetchPriority="high"
+          loading="eager"
         />
         <img
+          title="Kanvas cloud native Kubernetes infrastructure visualization"
           className={imageInView ? "map map-visible" : "map"}
           src={isDark ? KanvasImageBottomDark : KanvasImageBottomLight}
           alt="Kanvas infrastructure visualization diagram showing cloud native components"
diff --git a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
index 87266f674a0d1..a7da18ab2f58e 100644
--- a/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
+++ b/src/sections/Kanvas/Kanvas-design/kanvas-design-integrations.js
@@ -112,13 +112,18 @@ const KanvasIntegrationsSection = () => {
   // const { isDark } = useStyledDarkMode();
 
   return (
-    <IntegrationsSectionWrapper aria-labelledby="kanvas-integrations">
+    <IntegrationsSectionWrapper
+      id="kanvas-integrations-section"
+      aria-labelledby="kanvas-integrations"
+    >
       <div
         className="hero-image"
         ref={diagramRef}
         style={{ alignSelf: "center", width: "100%" }}
       >
         <IntegrationsImage
+          role="img"
+          title="Kanvas cloud native integrations - Kubernetes, service mesh, and infrastructure tools"
           alt="Kanvas integrations diagram showing supported cloud native infrastructure tools and platforms"
           className={imageInView ? "diagram-visible" : "diagram-hidden"}
         />
@@ -135,21 +140,26 @@ const KanvasIntegrationsSection = () => {
             className="underline-img"
             src={UnderlineImg}
             alt="decorative underline graphic highlighting integrations section"
+            aria-hidden="true"
           />
         </div>
         <div>
-          <h3>
-            Integrate Kanvas with your cloud-native infrastructure, Kubernetes
-            tools, and modern application platforms.
-          </h3>
+          <p>
+            Integrate Kanvas with your cloud-native infrastructure — including
+            Kubernetes clusters, service meshes, CI/CD pipelines, and modern
+            application platforms — to streamline deployment and configuration
+            management.
+          </p>
         </div>
         <div>
           <Button
+            aria-label="View all Kanvas cloud native integrations"
             id="integrations"
             $secondary
             style={{ margin: "1.5rem 0 1.5rem 0" }}
             $url="https://layer5.io/cloud-native-management/meshery/integrations"
             $external={true}
+            rel="noopener noreferrer"
           >
             All Integrations
           </Button>