From 752397d1bd198629729e8e1ddccf42de83f6c116 Mon Sep 17 00:00:00 2001
From: Brian Torres-Gil <brian@ixi.us>
Date: Fri, 17 Nov 2023 11:14:05 -0800
Subject: [PATCH] chore(swfw): Add cert expire banner to Orchestration Hub

---
 src/components/CertExpireBanner/index.js    | 31 ++++++++++++++
 src/components/CertExpireBanner/styles.scss | 47 +++++++++++++++++++++
 src/pages/swfw.js                           |  2 +
 src/pages/swfw.scss                         |  6 +++
 4 files changed, 86 insertions(+)
 create mode 100644 src/components/CertExpireBanner/index.js
 create mode 100644 src/components/CertExpireBanner/styles.scss

diff --git a/src/components/CertExpireBanner/index.js b/src/components/CertExpireBanner/index.js
new file mode 100644
index 000000000..1f48c4117
--- /dev/null
+++ b/src/components/CertExpireBanner/index.js
@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+import "./styles.scss";
+
+export default function CertExpireBanner() {
+  return (
+    <div className="banner-cert-expire">
+      <h4>
+        <div className="banner-cert-expire__line1">
+          Emergency Update Required
+        </div>
+        <div className="banner-cert-expire__line2">
+          PAN-OS Root Certificate Expiration
+        </div>
+      </h4>
+      <div className="view-advisory-link">
+        <Link
+          to="https://live.paloaltonetworks.com/t5/customer-advisories/emergency-update-required-pan-os-root-and-default-certificate/ta-p/564672"
+          className="tab-item__link"
+        >
+          <span>View Advisory</span>
+          <img
+            src="/img/icons/arrow-forward.svg"
+            alt="Forward arrow icon"
+            height="15"
+          />
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CertExpireBanner/styles.scss b/src/components/CertExpireBanner/styles.scss
new file mode 100644
index 000000000..19436e4e9
--- /dev/null
+++ b/src/components/CertExpireBanner/styles.scss
@@ -0,0 +1,47 @@
+html[data-theme="dark"] {
+  .banner-cert-expire {
+    color: black;
+  }
+}
+
+.banner-cert-expire {
+  background-color: #ffffff;
+  padding: 13px;
+  width: 100%;
+  max-width: 30em;
+  position: relative;
+  top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+  border-radius: 4px;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
+  z-index: 100;
+
+  h4 {
+    margin-bottom: 0.4em;
+    font-family: "Montserrat", sans-serif;
+  }
+
+  &__line2 {
+    font-weight: 500;
+  }
+
+  // .view-advisory-link {
+  // margin: 0.5em 0;
+  // }
+
+  .tab-item__link {
+    display: flex;
+    align-items: center;
+    color: var(--ifm-color-main);
+
+    img {
+      max-width: 25px;
+      margin-left: 0.25em;
+    }
+
+    :hover {
+      color: var(--ifm-color-main);
+    }
+  }
+}
diff --git a/src/pages/swfw.js b/src/pages/swfw.js
index 46a85a051..c7823db37 100644
--- a/src/pages/swfw.js
+++ b/src/pages/swfw.js
@@ -14,6 +14,7 @@ import {
 import "./swfw.scss";
 import CloudCard from "../components/CloudCard";
 import LinkList from "../components/LinkList";
+import CertExpireBanner from "../components/CertExpireBanner";
 
 export default function SWFWLandingPage() {
   return (
@@ -22,6 +23,7 @@ export default function SWFWLandingPage() {
       title={SWFW_METADATA.title}
       wrapperClassName="swfw-landing-page"
     >
+      <CertExpireBanner />
       <div className="swfw-landing-page__container">
         <section className={`product-hero-container swfw swfw-hero-container`}>
           <div className={`product-hero__inner-content swfw`}>
diff --git a/src/pages/swfw.scss b/src/pages/swfw.scss
index df664f80e..d02ed1d3c 100644
--- a/src/pages/swfw.scss
+++ b/src/pages/swfw.scss
@@ -61,6 +61,12 @@ html[data-theme="dark"] {
     max-width: 1200px;
     align-self: center;
     overflow: visible;
+
+    // to accomodate the cert expiration banner
+    @media (min-width: 1068px) {
+      position: relative;
+      top: -40px;
+    }
   }
 
   html[data-theme="dark"] {