SCM Hero revised (#800)

* add scm video to hero bg * layout variation --------- Signed-off-by: Steven Serrata <[email protected]>
PaloAltoNetworks · Dec 14, 2024 · 6fbca06 · 6fbca06
1 parent 367b7b5
commit 6fbca06
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/src/pages/strata-cloud-manager/index.js b/src/pages/strata-cloud-manager/index.js
@@ -241,17 +241,17 @@ export default function SCMLandingPage() {
       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">
-        <video
-          autoPlay
-          loop
-          muted
-          playsInline
-          className="scm-hero-video"
-          poster="https://via.placeholder.com/1920x1080"
-        >
-          <source src={videoSrc} type="video/mp4" />
-        </video>
         <h1 className="hero--header">{heroHeader}</h1>
         <p className="hero--description text--light">{heroDescription}</p>
       </section>

diff --git a/src/pages/strata-cloud-manager/scm.scss b/src/pages/strata-cloud-manager/scm.scss
@@ -4,7 +4,7 @@
 
 html[data-theme="dark"] {
   .scm-hero-container {
-    background-color: #1e1e1e;
+    background-color: transparent;
   }
   .scm-bg {
     background-color: #1e1e1e;
@@ -30,7 +30,7 @@ html[data-theme="dark"] {
   min-height: 350px;
   align-items: center;
   justify-content: center;
-  z-index: -10;
+  z-index: 10;
 
   h1 {
     font-size: 2rem;
@@ -109,17 +109,17 @@ html[data-theme="dark"] {
   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: 50px 0;
+  padding: 10px 0;
 }
 
 .scm-hero-video {
-  position: absolute;
+  position: fixed;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  z-index: -1;
+  z-index: 0;
   filter: blur(10px) brightness(0.9) contrast(1) saturate(1.5);
   // opacity: 0.8;
   transform: translate(-50%, -50%) scale(1.2);
@@ -132,3 +132,7 @@ html[data-theme="dark"] {
 .hero--description {
   color: #ffffff;
 }
+
+.scm-cards-container .featured-card-container.scm-landing {
+  z-index: 10;
+}