Merge pull request #7580 from Bharath314/slide-transitions

[Products] Resolve slider carousel image invisibility in production build

Author: saurabhraghuvanshii

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 {
@@ -108,14 +108,20 @@ const FeaturesSectionWrapper = styled.section`
 			}
 		}
 
-		.smp-section-caraousel {
+		.smp-section-carousel {
 			.slick-slider {
 			    max-height: 520px;
 				.slick-list {
 					max-width: 50rem;
 					max-height: 520px;
+					height: auto;
+
+					.slick-track {
+						height: auto;
+					}
 
 					.slick-slide {
+						height: auto;
 						img {
 							max-height: 20rem;
 							margin: auto;
@@ -160,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;
 			}
@@ -191,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;
@@ -207,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;
@@ -220,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;
@@ -241,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 {
@@ -297,4 +303,4 @@ const FeaturesSectionWrapper = styled.section`
 	}
 `;
 
-export default FeaturesSectionWrapper;
+export default FeaturesSectionWrapper;

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,6 +6,7 @@ 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";
@@ -15,12 +15,11 @@ 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 +29,7 @@ const FeaturesSection = () => {
     slidesToScroll: 1,
     dots: true,
     vertical: true,
-    verticalSwiping: true
+    verticalSwiping: true,
   };
 
   return (
@@ -47,7 +46,9 @@ 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> */}
@@ -64,7 +65,7 @@ const FeaturesSection = () => {
                 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">
+            <Col $xs={12} $xl={8} className="smp-section-carousel">
               <Slider {...settings}>
                 <div>
                   <img src={Slide1} alt="Slide 1" />
@@ -83,17 +84,34 @@ 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;