fix: resolve slider carousel image invisibility in production build

Signed-off-by: Bharath Valaboju <69413757+Bharath314@users.noreply.github.com>

Author: Bharath314

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;
+export default FeaturesSection;