From 95c663bed147191e912476f63c9db9df8926f9aa Mon Sep 17 00:00:00 2001
From: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Date: Thu, 2 Apr 2026 16:29:09 +0530
Subject: [PATCH 1/8] fix: resolve slider carousel image invisibility in
 production build

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
---
 .../Meshery/Features-section/index.js         | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index dfa9693a784cf..40ff96d1377dd 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -1,4 +1,3 @@
-
 import React from "react";
 import { Row, Col } from "../../../reusecore/Layout";
 import Button from "../../../reusecore/Button";
@@ -7,20 +6,15 @@ import Slide1 from "../../../assets/images/kanvas/gifs/start-from-scratch.gif";
 import Slide2 from "../../../assets/images/kanvas/gifs/catalog.gif";
 import Slide3 from "../../../assets/images/kanvas/gifs/rendered-design.webp";
 import FeaturesSectionWrapper from "./features-section.style";
-import { StaticImage } from "gatsby-plugin-image";
-
-const slide2Path = "../../../assets/images/kanvas/gifs/catalog.gif";
-const slide3Path = "../../../assets/images/kanvas/gifs/rendered-design.webp";
 
 const slides_list = [Slide1, Slide2, Slide3];
 
 const FeaturesSection = () => {
-
   var settings = {
     customPaging: function (i) {
       return (
         <p>
-          <img src={slides_list[i]} loading="lazy" alt={"slide-img" + [i]}/>
+          <img src={slides_list[i]} loading="lazy" alt={"slide-img" + [i]} />
         </p>
       );
     },
@@ -30,7 +24,7 @@ const FeaturesSection = () => {
     slidesToScroll: 1,
     dots: true,
     vertical: true,
-    verticalSwiping: true
+    verticalSwiping: true,
   };
 
   return (
@@ -47,12 +41,16 @@ const FeaturesSection = () => {
         </div> */}
         <div className="section-header">
           <h2>Cloud native infrastructure is complex.</h2>
-          <h1>Design it <span>visually and collaboratively</span></h1>
+          <h1>
+            Design it <span>visually and collaboratively</span>
+          </h1>
           {/* <h1>
             <span>Meshery</span> supports the most service meshes.
           </h1> */}
           <p>
-            No matter where you run your workloads, Meshery's Kanvas makes Kubernetes and cloud infrastructure design intuitive and collaborative.
+            No matter where you run your workloads, Meshery's Kanvas makes
+            Kubernetes and cloud infrastructure design intuitive and
+            collaborative.
           </p>
         </div>
         <div className="smp-section">
@@ -61,7 +59,9 @@ const FeaturesSection = () => {
             <Col $xs={12} $xl={4} className="smp-section-data">
               <h2>The Visual Designer: Kanvas</h2>
               <p>
-                Drag, drop, and deploy your infrastructure with ease. Kanvas, built on Meshery, simplifies Kubernetes and cloud management through intuitive visual designer and operator.
+                Drag, drop, and deploy your infrastructure with ease. Kanvas,
+                built on Meshery, simplifies Kubernetes and cloud management
+                through intuitive visual designer and operator.
               </p>
             </Col>
             <Col $xs={12} $xl={8} className="smp-section-caraousel">
@@ -70,10 +70,10 @@ const FeaturesSection = () => {
                   <img src={Slide1} alt="Slide 1" />
                 </div>
                 <div>
-                  <StaticImage src={slide2Path} alt="Slide 2" loading="lazy" />
+                  <img src={Slide2} alt="Slide 2" />
                 </div>
                 <div>
-                  <StaticImage src={slide3Path} alt="Slide 3" loading="lazy" />
+                  <img src={Slide3} alt="Slide 3" />
                 </div>
               </Slider>
             </Col>
@@ -83,17 +83,35 @@ const FeaturesSection = () => {
           <div>
             <h3>One step to managing your microservices</h3>
             <h1>Cloud Native Application Management</h1>
-            <p>Confidently take full advantage of all that your infrastructure offers.</p>
+            <p>
+              Confidently take full advantage of all that your infrastructure
+              offers.
+            </p>
           </div>
           <div className="mesh-mngmnt-btn">
             <Col $xs={12} $sm={6} $md={4}>
-              <Button $secondary className="mgmt_button" title="Install" $url="/cloud-native-management/meshery/getting-started" />
+              <Button
+                $secondary
+                className="mgmt_button"
+                title="Install"
+                $url="/cloud-native-management/meshery/getting-started"
+              />
             </Col>
             <Col $xs={12} $sm={6} $md={4}>
-              <Button $secondary className="mgmt_button" title="Manage" $url="/cloud-native-management/meshery/operating-cloud-native-infra" />
+              <Button
+                $secondary
+                className="mgmt_button"
+                title="Manage"
+                $url="/cloud-native-management/meshery/operating-cloud-native-infra"
+              />
             </Col>
             <Col $xs={12} $sm={6} $md={4}>
-              <Button $secondary className="mgmt_button" title="Catalog" $url="/cloud-native-management/catalog" />
+              <Button
+                $secondary
+                className="mgmt_button"
+                title="Catalog"
+                $url="/cloud-native-management/catalog"
+              />
             </Col>
           </div>
         </div>
@@ -102,4 +120,4 @@ const FeaturesSection = () => {
   );
 };
 
-export default FeaturesSection;
\ No newline at end of file
+export default FeaturesSection;

From e19bf56c901dee1bcd1f334659a1d652375dba06 Mon Sep 17 00:00:00 2001
From: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Date: Mon, 6 Apr 2026 13:49:39 +0530
Subject: [PATCH 2/8] fix: revert previous changes and fix react-slick height
 miscalculation

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
---
 .../Features-section/features-section.style.js     | 14 ++++++++++----
 src/sections/Meshery/Features-section/index.js     |  9 +++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js
index 82213c814f82e..a53394ae0d7f0 100644
--- a/src/sections/Meshery/Features-section/features-section.style.js
+++ b/src/sections/Meshery/Features-section/features-section.style.js
@@ -30,14 +30,14 @@ const FeaturesSectionWrapper = styled.section`
 		top: 0.5px;
 	}
 	.rect-2-left {
-		background: ${props => props.theme.secondaryColor};
+		background: ${(props) => props.theme.secondaryColor};
 		border-radius: 0 0 3.5rem 0;
 		grid-column: 1/2;
 		height: 5rem;
 		grid-row: 2;
 	}
 	.rect-3-right {
-		background: ${props => props.theme.secondaryColor};
+		background: ${(props) => props.theme.secondaryColor};
 		border-radius: 3.5rem 0 0 0;
 		grid-column: 10/11;
 		grid-row: 1;
@@ -74,7 +74,7 @@ const FeaturesSectionWrapper = styled.section`
 		h1 {
 			line-height: 3.125rem;
 			span {
-				color: ${props => props.theme.secondaryColor};
+				color: ${(props) => props.theme.secondaryColor};
 			}
 		}
 		h2 {
@@ -114,8 +114,14 @@ const FeaturesSectionWrapper = styled.section`
 				.slick-list {
 					max-width: 50rem;
 					max-height: 520px;
+					height: auto;
+
+					.slick-track {
+						height: auto;
+					}
 
 					.slick-slide {
+						height: auto;
 						img {
 							max-height: 20rem;
 							margin: auto;
@@ -297,4 +303,4 @@ const FeaturesSectionWrapper = styled.section`
 	}
 `;
 
-export default FeaturesSectionWrapper;
\ No newline at end of file
+export default FeaturesSectionWrapper;
diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index 40ff96d1377dd..b111f7759406e 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -7,6 +7,11 @@ import Slide2 from "../../../assets/images/kanvas/gifs/catalog.gif";
 import Slide3 from "../../../assets/images/kanvas/gifs/rendered-design.webp";
 import FeaturesSectionWrapper from "./features-section.style";
 
+import { StaticImage } from "gatsby-plugin-image";
+
+const slide2Path = "../../../assets/images/kanvas/gifs/catalog.gif";
+const slide3Path = "../../../assets/images/kanvas/gifs/rendered-design.webp";
+
 const slides_list = [Slide1, Slide2, Slide3];
 
 const FeaturesSection = () => {
@@ -70,10 +75,10 @@ const FeaturesSection = () => {
                   <img src={Slide1} alt="Slide 1" />
                 </div>
                 <div>
-                  <img src={Slide2} alt="Slide 2" />
+                  <StaticImage src={slide2Path} alt="Slide 2" loading="lazy" />
                 </div>
                 <div>
-                  <img src={Slide3} alt="Slide 3" />
+                  <StaticImage src={slide3Path} alt="Slide 3" loading="lazy" />
                 </div>
               </Slider>
             </Col>

From 688222c4c6dafdc721218524ad8e34cb5e16915e Mon Sep 17 00:00:00 2001
From: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Date: Mon, 6 Apr 2026 13:53:44 +0530
Subject: [PATCH 3/8] chore: remove redundant comments

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
---
 src/sections/Meshery/index.js | 37 ++++++++++++++++++++++++-----------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/sections/Meshery/index.js b/src/sections/Meshery/index.js
index ef159481dc370..6425c9c4314b3 100644
--- a/src/sections/Meshery/index.js
+++ b/src/sections/Meshery/index.js
@@ -25,29 +25,42 @@ const MesheryPage = () => {
           <Row className="description">
             <Col className="desc-text" $lg={6} $md={6} $sm={10} $xs={8}>
               <h1 className="heading-1"> Wrangle your infrastructure</h1>
-              <h1 className="heading-2"> <span className="heading-2"> collaboratively</span></h1>
+              <h1 className="heading-2">
+                {" "}
+                <span className="heading-2"> collaboratively</span>
+              </h1>
               <p className="desc-p">
-                {/* Meshery is the cloud native manager. <br /> */}
-                Confidently design, deploy, and operate your infrastructure and workloads with Meshery.
+                Confidently design, deploy, and operate your infrastructure and
+                workloads with Meshery.
               </p>
-              <Button $primary className="banner-btn" title="Schedule a Demo" $external={true}
+              <Button
+                $primary
+                className="banner-btn"
+                title="Schedule a Demo"
+                $external={true}
                 $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
               >
                 <GiClockwork size={21} className="button-icon" />
               </Button>
-              <Button $secondary className="banner-btn" title="Run Meshery"
+              <Button
+                $secondary
+                className="banner-btn"
+                title="Run Meshery"
                 $url="/cloud-native-management/meshery/getting-started"
               >
                 <FiDownloadCloud size={21} className="button-icon" />
               </Button>
             </Col>
             <Col $lg={6} $md={6} className="meshery-hero-img desc-text">
-              <video autoPlay muted loop controls className="meshery-video" >
+              <video autoPlay muted loop controls className="meshery-video">
                 <source src={mesheryDemo} type="video/webm" />
               </video>
-              {/* <img className="meshery-sup-img" src={mesheryFullStack} alt="Meshery the multi-mesh manager" /> */}
-              <Button $primary className="banner-btn align-btn"
-                title="Star the Repository" $url="https://github.com/meshery/meshery" $external={ true }
+              <Button
+                $primary
+                className="banner-btn align-btn"
+                title="Star the Repository"
+                $url="https://github.com/meshery/meshery"
+                $external={true}
               >
                 <FaGithub size={21} className="button-icon" />
               </Button>
@@ -65,7 +78,10 @@ const MesheryPage = () => {
           image={Nic}
         />
         <div className="callout">
-          <h1> Manage your clusters with features you won't find anywhere else.</h1>
+          <h1>
+            {" "}
+            Manage your clusters with features you won't find anywhere else.
+          </h1>
         </div>
       </Container>
       <Features />
@@ -79,7 +95,6 @@ const MesheryPage = () => {
         />
       </Container>
     </MesheryWrapper>
-
   );
 };
 

From 22319b7e4e07be228969018280cd6c06cc1d1072 Mon Sep 17 00:00:00 2001
From: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Date: Mon, 6 Apr 2026 13:57:37 +0530
Subject: [PATCH 4/8] chore: change css class name to fix typo "caraousel"

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
---
 .../Features-section/features-section.style.js       | 12 ++++++------
 src/sections/Meshery/Features-section/index.js       |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js
index a53394ae0d7f0..298ebcf3d9a6e 100644
--- a/src/sections/Meshery/Features-section/features-section.style.js
+++ b/src/sections/Meshery/Features-section/features-section.style.js
@@ -108,7 +108,7 @@ const FeaturesSectionWrapper = styled.section`
 			}
 		}
 
-		.smp-section-caraousel {
+		.smp-section-carousel {
 			.slick-slider {
 			    max-height: 520px;
 				.slick-list {
@@ -166,7 +166,7 @@ const FeaturesSectionWrapper = styled.section`
 	}
 
 	@media screen and (max-width: 1600px) {
-		.smp-section .smp-section-caraousel .slick-slider {
+		.smp-section .smp-section-carousel .slick-slider {
 			.slick-list {
 				max-width: 38rem;
 			}
@@ -197,7 +197,7 @@ const FeaturesSectionWrapper = styled.section`
 				}
 			}
 
-			.smp-section-caraousel .slick-slider {
+			.smp-section-carousel .slick-slider {
 				.slick-list {
 					max-width: 80%;
 					margin: 2rem auto;
@@ -213,7 +213,7 @@ const FeaturesSectionWrapper = styled.section`
 	@media screen and (max-width: 960px) {
 		padding-bottom: 0rem;
 		margin-bottom: 4rem;
-		.smp-section .smp-section-caraousel .slick-slider .slick-list {
+		.smp-section .smp-section-carousel .slick-slider .slick-list {
 			.slick-slide {
 				img {
 					max-height: 16rem;
@@ -226,7 +226,7 @@ const FeaturesSectionWrapper = styled.section`
 		.smp-section {
 			max-width: 95%;
 
-			.smp-section-caraousel .slick-slider {
+			.smp-section-carousel .slick-slider {
 				.slick-list {
 					max-width: 85%;
 					margin: 2rem 0;
@@ -247,7 +247,7 @@ const FeaturesSectionWrapper = styled.section`
 		.smp-section {
 			max-width: 95%;
 
-			.smp-section-caraousel .slick-slider {
+			.smp-section-carousel .slick-slider {
 				.slick-list {
 					max-width: 80%;
 					.slick-slide {
diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index b111f7759406e..b00fe8d1239d3 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -69,7 +69,7 @@ const FeaturesSection = () => {
                 through intuitive visual designer and operator.
               </p>
             </Col>
-            <Col $xs={12} $xl={8} className="smp-section-caraousel">
+            <Col $xs={12} $xl={8} className="smp-section-carousel">
               <Slider {...settings}>
                 <div>
                   <img src={Slide1} alt="Slide 1" />

From 5153e38a723666696b716253c2d75896ba30a8d2 Mon Sep 17 00:00:00 2001
From: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
Date: Mon, 6 Apr 2026 14:32:49 +0530
Subject: [PATCH 5/8] Revert "chore: remove redundant comments"

This reverts commit 688222c4c6dafdc721218524ad8e34cb5e16915e.

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>
---
 src/sections/Meshery/index.js | 37 +++++++++++------------------------
 1 file changed, 11 insertions(+), 26 deletions(-)

diff --git a/src/sections/Meshery/index.js b/src/sections/Meshery/index.js
index 6425c9c4314b3..ef159481dc370 100644
--- a/src/sections/Meshery/index.js
+++ b/src/sections/Meshery/index.js
@@ -25,42 +25,29 @@ const MesheryPage = () => {
           <Row className="description">
             <Col className="desc-text" $lg={6} $md={6} $sm={10} $xs={8}>
               <h1 className="heading-1"> Wrangle your infrastructure</h1>
-              <h1 className="heading-2">
-                {" "}
-                <span className="heading-2"> collaboratively</span>
-              </h1>
+              <h1 className="heading-2"> <span className="heading-2"> collaboratively</span></h1>
               <p className="desc-p">
-                Confidently design, deploy, and operate your infrastructure and
-                workloads with Meshery.
+                {/* Meshery is the cloud native manager. <br /> */}
+                Confidently design, deploy, and operate your infrastructure and workloads with Meshery.
               </p>
-              <Button
-                $primary
-                className="banner-btn"
-                title="Schedule a Demo"
-                $external={true}
+              <Button $primary className="banner-btn" title="Schedule a Demo" $external={true}
                 $url="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true"
               >
                 <GiClockwork size={21} className="button-icon" />
               </Button>
-              <Button
-                $secondary
-                className="banner-btn"
-                title="Run Meshery"
+              <Button $secondary className="banner-btn" title="Run Meshery"
                 $url="/cloud-native-management/meshery/getting-started"
               >
                 <FiDownloadCloud size={21} className="button-icon" />
               </Button>
             </Col>
             <Col $lg={6} $md={6} className="meshery-hero-img desc-text">
-              <video autoPlay muted loop controls className="meshery-video">
+              <video autoPlay muted loop controls className="meshery-video" >
                 <source src={mesheryDemo} type="video/webm" />
               </video>
-              <Button
-                $primary
-                className="banner-btn align-btn"
-                title="Star the Repository"
-                $url="https://github.com/meshery/meshery"
-                $external={true}
+              {/* <img className="meshery-sup-img" src={mesheryFullStack} alt="Meshery the multi-mesh manager" /> */}
+              <Button $primary className="banner-btn align-btn"
+                title="Star the Repository" $url="https://github.com/meshery/meshery" $external={ true }
               >
                 <FaGithub size={21} className="button-icon" />
               </Button>
@@ -78,10 +65,7 @@ const MesheryPage = () => {
           image={Nic}
         />
         <div className="callout">
-          <h1>
-            {" "}
-            Manage your clusters with features you won't find anywhere else.
-          </h1>
+          <h1> Manage your clusters with features you won't find anywhere else.</h1>
         </div>
       </Container>
       <Features />
@@ -95,6 +79,7 @@ const MesheryPage = () => {
         />
       </Container>
     </MesheryWrapper>
+
   );
 };
 

From 11860d1d03a2861164ccdad06deccb2f99a0f853 Mon Sep 17 00:00:00 2001
From: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
Date: Wed, 8 Apr 2026 14:48:15 +0530
Subject: [PATCH 6/8] Update src/sections/Meshery/Features-section/index.js

Signed-off-by: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
---
 src/sections/Meshery/Features-section/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index b00fe8d1239d3..fdba24a20788f 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -64,9 +64,7 @@ const FeaturesSection = () => {
             <Col $xs={12} $xl={4} className="smp-section-data">
               <h2>The Visual Designer: Kanvas</h2>
               <p>
-                Drag, drop, and deploy your infrastructure with ease. Kanvas,
-                built on Meshery, simplifies Kubernetes and cloud management
-                through intuitive visual designer and operator.
+                Drag, drop, and deploy your infrastructure with ease. Kanvas, built on Meshery, simplifies Kubernetes and cloud management through intuitive visual designer and operator.
               </p>
             </Col>
             <Col $xs={12} $xl={8} className="smp-section-carousel">

From 8f12ac45e828c82923df9474012cd1fd78c9fb80 Mon Sep 17 00:00:00 2001
From: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
Date: Wed, 8 Apr 2026 14:48:26 +0530
Subject: [PATCH 7/8] Update src/sections/Meshery/Features-section/index.js

Signed-off-by: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
---
 src/sections/Meshery/Features-section/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index fdba24a20788f..8d64046eb1049 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -53,9 +53,7 @@ const FeaturesSection = () => {
             <span>Meshery</span> supports the most service meshes.
           </h1> */}
           <p>
-            No matter where you run your workloads, Meshery's Kanvas makes
-            Kubernetes and cloud infrastructure design intuitive and
-            collaborative.
+            No matter where you run your workloads, Meshery's Kanvas makes Kubernetes and cloud infrastructure design intuitive and collaborative.
           </p>
         </div>
         <div className="smp-section">

From 600fe9e55cac9c02e692abf64b921d2bf6a36099 Mon Sep 17 00:00:00 2001
From: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
Date: Wed, 8 Apr 2026 14:48:35 +0530
Subject: [PATCH 8/8] Update src/sections/Meshery/Features-section/index.js

Signed-off-by: Saurabh Singh <saurabhsraghuvanshi@gmail.com>
---
 src/sections/Meshery/Features-section/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
index 8d64046eb1049..db4c84c206bb4 100644
--- a/src/sections/Meshery/Features-section/index.js
+++ b/src/sections/Meshery/Features-section/index.js
@@ -85,8 +85,7 @@ const FeaturesSection = () => {
             <h3>One step to managing your microservices</h3>
             <h1>Cloud Native Application Management</h1>
             <p>
-              Confidently take full advantage of all that your infrastructure
-              offers.
+              Confidently take full advantage of all that your infrastructure offers.
             </p>
           </div>
           <div className="mesh-mngmnt-btn">