add scm video to hero bg (#799)

PaloAltoNetworks · Dec 13, 2024 · 367b7b5 · 367b7b5
1 parent 86b2d46
commit 367b7b5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/src/pages/strata-cloud-manager/index.js b/src/pages/strata-cloud-manager/index.js
@@ -3,10 +3,13 @@ import React from "react";
 import Layout from "@theme/Layout";
 import SCMCard from "./SCMCard";
 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.";
+  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 = [
     {
       label: "Developer's Guide",
@@ -239,8 +242,18 @@ export default function SCMLandingPage() {
       title="Strata Cloud Manager"
     >
       <section className="scm-hero-container">
-        <h1>{heroHeader}</h1>
-        <p>{heroDescription}</p>
+        <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>
       <section className="scm-bg">
         <div className="scm-cards-container container">

diff --git a/src/pages/strata-cloud-manager/scm.scss b/src/pages/strata-cloud-manager/scm.scss
@@ -26,9 +26,11 @@ html[data-theme="dark"] {
   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 {
     font-size: 2rem;
@@ -107,5 +109,26 @@ 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: 100px 0;
+  padding: 50px 0;
+}
+
+.scm-hero-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -1;
+  filter: blur(10px) brightness(0.9) contrast(1) saturate(1.5);
+  // opacity: 0.8;
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.hero--header {
+  color: #ffffff;
+}
+
+.hero--description {
+  color: #ffffff;
 }