Merge pull request #7235 from saurabhraghuvanshii/meshery

fix: runtime error andd images issues

Author: leecalcote

src/sections/Meshery/Features-Col/index.js

@@ -64,8 +64,21 @@ const Features = () => {
 
   useEffect(() => {
     fetch(performanceCountEndpoint)
-      .then((response) => response.json())
-      .then((resultcount) => setPerformanceCount(resultcount.total_runs));
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      return response.json();
+    })
+    .then((resultcount) => {
+      if (resultcount && typeof resultcount.total_runs === "number") {
+        setPerformanceCount(resultcount.total_runs);
+      }
+    })
+    .catch((error) => {
+      console.log("Failed to fetch performance count:", error.message);
+      // Keep default value of 0 if fetch fails
+    });
   }, []);
 
   const data = LifecycleFeature().features;

src/sections/Meshery/Features-section/features-section.style.js

@@ -5,7 +5,9 @@ const FeaturesSectionWrapper = styled.section`
 	background-color: black;
 	transform: skew(0deg, -6deg);
 	padding-bottom:5rem;
-	margin-bottom: 10%;
+	margin-bottom: 8rem;
+	overflow: hidden;
+	position: relative;
 	.skw{
 		display: grid;
 		position: relative;
@@ -164,6 +166,7 @@ const FeaturesSectionWrapper = styled.section`
 
 	@media screen and (max-width: 1200px) {
 		padding-bottom: 2rem;
+		margin-bottom: 6rem;
 
 		.smp-section {
 			.smp-section-row {
@@ -191,6 +194,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 {
 			.slick-slide {
 				img {

src/sections/Meshery/Meshery-features/feature-images/KanvasDesigner.webp

@@ -9,9 +9,9 @@ import img6 from "./feature-images/edge_mount_relationship_pod_persistent_volume
 import { StaticImage } from "gatsby-plugin-image";
 import img2 from "./feature-images/workspace.gif";
 import multiClusterGif from "./feature-images/multi-cluster-management.gif";
-const img1 = "../../../assets/images/kanvas/KanvasDesigner.webp";
-const img4 = "./feature-images/meshery-catalog.webp";
-const img7 = "./feature-images/extensions.webp";
+import img1 from "./feature-images/KanvasDesigner.webp";
+import img4 from "./feature-images/meshery-catalog.webp";
+import img7 from "./feature-images/extensions.webp";
 
 const MesheryFeaturesWrapper = styled.div`
     margin: auto;
@@ -50,7 +50,7 @@ const MesheryFeatures = () => {
               description:
                 "Visually and collaboratively design your cloud native infrastructure using Meshery's drag-and-drop designer. Leverage 300+ integrations and context-aware relationships between components.",
               learnMoreLink: "/kanvas",
-              content: <StaticImage src={img1} alt="Infrastructure as Design with Kanvas" loading="lazy" />,
+              content: <img src={img1} alt="Infrastructure as Design with Kanvas" loading="lazy" />,
             },
             {
               id: "second",
@@ -79,7 +79,7 @@ const MesheryFeatures = () => {
                 "Build your internal developer platform with Meshery's extensive extensibility. Includes REST/GraphQL APIs, gRPC adapters, hot-loadable ReactJS components, and Golang plugins.",
               content: (
                 <div className="feature-expose-full">
-                  <StaticImage src={img7} alt="Platform Engineering Extension Points" loading="lazy" />
+                  <img src={img7} alt="Platform Engineering Extension Points" loading="lazy" />
                   <p>
                     Meshery's numerous extension points make it ideal as the foundation of your internal developer platform.
                     Create custom models, import/export as OCI images, and extend functionality through multiple integration patterns.
@@ -114,7 +114,7 @@ const MesheryFeatures = () => {
               description:
                 "Access 400+ curated design patterns and templates. Share, clone, and customize designs with built -in best practices for common deployment scenarios.", content: (
                 <div className="feature-expose-full">
-                  <StaticImage
+                  <img
                     src={img4}
                     alt="Cloud Native Catalog and Patterns"
                     loading="lazy"

src/sections/Meshery/Meshery-features/index.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 const MesheryWrapper = styled.section`
     position: relative;
     z-index: 1;
+    overflow-x: hidden;
     .info {
         position: relative;
         overflow: hidden;