fix: revert previous changes and fix react-slick height miscalculation

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

Author: Bharath314

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

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>