From 367b7b54c106d9187395051e0730a1d8415a6160 Mon Sep 17 00:00:00 2001
From: Steven Serrata <9343811+sserrata@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:48:55 -0500
Subject: [PATCH] add scm video to hero bg (#799)

---
 src/pages/strata-cloud-manager/index.js | 17 +++++++++++++++--
 src/pages/strata-cloud-manager/scm.scss | 25 ++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/pages/strata-cloud-manager/index.js b/src/pages/strata-cloud-manager/index.js
index 61f72ee6b..7d64d6da4 100644
--- 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
index 69302a4a7..cca74f29f 100644
--- 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;
 }