[UI Enhancement] Add carousel to SCM Landing Page

src/pages/strata-cloud-manager/index.js

@@ -2,12 +2,13 @@ import React from "react";
 // components
 import Layout from "@theme/Layout";
 import SCMCard from "./SCMCard";
+import Slider from "../../components/Slider/Slider";
 import "./scm.scss";
 
 export default function SCMLandingPage() {
   const heroHeader = "Strata Cloud Manager";
   const heroDescription =
-    "Strata Cloud Manager™ enables you to easily manage your Palo Alto Networks Network Security infrastructure—including NGFWs and SASE environment—from the cloud, via one unified management interface.";
+    "Strata Cloud Manager™ makes it easy to manage Palo Alto Networks security infrastructure, including NGFW and SASE environments, from the cloud through a unified management interface. Its APIs further extend this vision by providing a consistent framework for developers to create automated and integrated solutions for the Strata network security platform.";
   const videoSrc =
     "https://www.paloaltonetworks.com/content/dam/pan/en_US/images/cosmos-hardware/optimized/COSMOS-PROMO-MIKE_DEMO_VIDEO_3-Comprehensive_Management_Deployments_V3.mp4";
   const scmCards = [
@@ -236,44 +237,69 @@ export default function SCMLandingPage() {
     },
   ];
 
+  const SCM_SLIDER_IMAGES = [
+    "/img/scm-landing/slider-1.png",
+    "/img/scm-landing/slider-2.png",
+    "/img/scm-landing/slider-3.png",
+  ];
+
   return (
     <Layout
       description="Strata Cloud Manager description"
       title="Strata Cloud Manager"
     >
-      <video
-        autoPlay
-        loop
-        muted
-        playsInline
-        className="scm-hero-video"
-        poster="https://via.placeholder.com/1920x1080"
-      >
-        <source src={videoSrc} type="video/mp4" />
-      </video>
-      <section className="scm-hero-container">
-        <h1 className="hero--header">{heroHeader}</h1>
-        <p className="hero--description text--light">{heroDescription}</p>
-      </section>
-      <section className="scm-bg">
-        <div className="scm-cards-container container">
-          {scmCards.map((card, i) => (
-            <SCMCard
-              key={i}
-              description={card.description}
-              label={card.label}
-              docs={card.docs}
-              type={card.type}
-              colorclass="scm"
-            />
-          ))}
-        </div>
-      </section>
-      {/* <UseCases
-        header={TERRAFORM_USE_CASES_CONTENT.header}
-        subheader={TERRAFORM_USE_CASES_CONTENT.subheader}
-        useCaseCards={TERRAFORM_USE_CASES_CONTENT.useCaseCards}
-      /> */}
+      <div className="scm-video-bg">
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className="scm-video"
+          poster="https://via.placeholder.com/1920x1080"
+        >
+          <source src={videoSrc} type="video/mp4" />
+        </video>
+        <section className="scm-main-body">
+          <div className="scm-hero-container container">
+            <div className="scm-hero-content-container">
+              <div className="scm-hero__left-section">
+                <h1 className="hero--header">{heroHeader}</h1>
+                <p className="hero--description text--light">
+                  {heroDescription}
+                </p>
+              </div>
+              <div className="scm-hero__right-section">
+                <Slider
+                  className="product-hero__slider-container"
+                  slidesToShow={1}
+                  slidesToScroll={1}
+                >
+                  {SCM_SLIDER_IMAGES.map((sliderImg, i) => (
+                    <img
+                      className="scm-slider-img"
+                      key={i}
+                      alt={sliderImg}
+                      src={sliderImg}
+                    />
+                  ))}
+                </Slider>
+              </div>
+            </div>
+          </div>
+          <div className="scm-cards-container container">
+            {scmCards.map((card, i) => (
+              <SCMCard
+                key={i}
+                description={card.description}
+                label={card.label}
+                docs={card.docs}
+                type={card.type}
+                colorclass="scm"
+              />
+            ))}
+          </div>
+        </section>
+      </div>
     </Layout>
   );
 }

src/pages/strata-cloud-manager/scm.scss

@@ -21,15 +21,25 @@ html[data-theme="dark"] {
   }
 }
 
+.scm-hero-content-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
 .scm-hero-container {
   display: flex;
-  flex-direction: column;
   width: 100vw;
-  margin-left: calc(50% - 50vw);
   padding: 1rem;
   min-height: 350px;
   align-items: center;
-  justify-content: center;
   z-index: 10;
 
   h1 {
@@ -42,6 +52,34 @@ html[data-theme="dark"] {
   }
 }
 
+.scm-hero__left-section,
+.scm-hero__right-section {
+  max-width: 500px;
+  width: 100%;
+  padding: 0.5rem;
+}
+
+.scm-hero__right-section {
+  .slick-arrow {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
+      brightness(103%) contrast(103%);
+  }
+
+  .slick-dots li button:before,
+  .slice-dots li.slick-active button:before {
+    color: white;
+  }
+}
+
+.scm-slider-img {
+  border-radius: 1rem;
+}
+
+.scm-main-body {
+  position: relative;
+  z-index: 1;
+}
+
 .scm-cards-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -104,16 +142,15 @@ html[data-theme="dark"] {
   padding-left: 0;
 }
 
-.scm-bg {
-  background-color: #ffcb03;
-  background-image: linear-gradient(to bottom, #ffcb05, #ffaa05);
-  // border-top-left-radius: var(--curve-radius) 50%;
-  // border-top-right-radius: var(--curve-radius) 50%;
-  padding: 10px 0;
+.scm-video-bg {
+  position: relative;
+  width: 100%;
+  padding-bottom: 3.5rem;
+  overflow: hidden;
 }
 
-.scm-hero-video {
-  position: fixed;
+.scm-video {
+  position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;