From 564984cd554781f690c1f7f448e4848ed44b932b Mon Sep 17 00:00:00 2001
From: Nick Grato <ngrato@gmail.com>
Date: Wed, 28 Feb 2024 16:07:51 -0800
Subject: [PATCH] banner stuff (#437)

Co-authored-by: Nick Grato <nickgrato@ngrato-27545.local>
---
 .../navigation/MainNav/MainNav.module.scss    | 36 ++++++++++++++++++
 .../components/navigation/MainNav/MainNav.tsx | 28 +++++++++++++-
 client/styles/ui/page.scss                    |  2 +-
 .../components/navigation/MainNav/MainNav.tsx | 37 ++++++++++++-------
 marketing/styles/globals.scss                 |  2 +-
 5 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/client/components/navigation/MainNav/MainNav.module.scss b/client/components/navigation/MainNav/MainNav.module.scss
index 3fdb5236..9f19915b 100644
--- a/client/components/navigation/MainNav/MainNav.module.scss
+++ b/client/components/navigation/MainNav/MainNav.module.scss
@@ -98,3 +98,39 @@ button.exit_button {
     line-height: 20px;
   }
 }
+
+.marquee {
+  &_container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 15px;
+    @include mobile-down {
+      padding: 20px;
+    }
+  }
+
+  & section {
+    @include mobile-down {
+      display: inline-block;
+      padding-left: 100%;
+      animation: marquee 20s linear infinite;
+    }
+  }
+
+  @include mobile-down {
+    white-space: nowrap;
+    overflow: hidden;
+    position: absolute;
+    width: 100vw;
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-100%, 0);
+  }
+}
diff --git a/client/components/navigation/MainNav/MainNav.tsx b/client/components/navigation/MainNav/MainNav.tsx
index 4787408b..24f82576 100644
--- a/client/components/navigation/MainNav/MainNav.tsx
+++ b/client/components/navigation/MainNav/MainNav.tsx
@@ -104,7 +104,33 @@ const MainNav = ({
    */
   return (
     <nav className={`${styles.main_nav} ${classProp}`}>
-      <div className={styles.banner_gradient} />
+      <div className={styles.banner_gradient}>
+        <div className={styles.marquee_container}>
+          <div className={styles.marquee}>
+            <section className={styles.banner_text}>
+              <div className="flex-align-center">
+                <div>
+                  <Icon name="info" classProp="mr-10 mt-3" />
+                </div>
+                <p className="body-sm-bold ">
+                  Important Notice: Mozilla Hubs will shut down on May 31, 2024.
+                  For more information about the shutdown and how you can
+                  support Hubs&apos; life beyond Mozilla, please read{' '}
+                  <a
+                    target="_blank"
+                    href="https://hubs.mozilla.com/labs/sunset/"
+                    className="primary-link"
+                    rel="noreferrer"
+                  >
+                    this article
+                  </a>
+                  .
+                </p>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
 
       <div className={styles.main_nav_wrapper}>
         <div className={styles.main_nav_container}>
diff --git a/client/styles/ui/page.scss b/client/styles/ui/page.scss
index a82c20af..942af10a 100644
--- a/client/styles/ui/page.scss
+++ b/client/styles/ui/page.scss
@@ -6,6 +6,6 @@
   flex-direction: column;
   min-height: 100vh;
   background: $gradient-rainbow;
-  padding-top: 88px;
+  padding-top: 160px;
   margin: 0;
 }
diff --git a/marketing/components/navigation/MainNav/MainNav.tsx b/marketing/components/navigation/MainNav/MainNav.tsx
index f66b477b..2abbcd95 100644
--- a/marketing/components/navigation/MainNav/MainNav.tsx
+++ b/marketing/components/navigation/MainNav/MainNav.tsx
@@ -32,22 +32,31 @@ const MainNav = ({
   return (
     <nav className={`${styles.main_nav} ${classProp}`}>
       <div className={styles.banner_gradient}>
-        {navData?.bannerText && (
-          <div className={styles.marquee_container}>
-            <div className={styles.marquee}>
-              <section className={styles.banner_text}>
-                <div className="flex-align-center">
-                  <div>
-                    <Icon name={navData.bannerIcon} classProp="mr-10 mt-3" />
-                  </div>
-                  <p className="body-sm-bold flex-align-center">
-                    {navData?.bannerText}
-                  </p>
+        <div className={styles.marquee_container}>
+          <div className={styles.marquee}>
+            <section className={styles.banner_text}>
+              <div className="flex-align-center">
+                <div>
+                  <Icon name="info" classProp="mr-10 mt-3" />
                 </div>
-              </section>
-            </div>
+                <p className="body-sm-bold ">
+                  Important Notice: Mozilla Hubs will shut down on May 31, 2024.
+                  For more information about the shutdown and how you can
+                  support Hubs&apos; life beyond Mozilla, please read{' '}
+                  <a
+                    target="_blank"
+                    href="https://hubs.mozilla.com/labs/sunset/"
+                    className="primary-link"
+                    rel="noreferrer"
+                  >
+                    this article
+                  </a>
+                  .
+                </p>
+              </div>
+            </section>
           </div>
-        )}
+        </div>
       </div>
 
       <div className={styles.main_nav_wrapper}>
diff --git a/marketing/styles/globals.scss b/marketing/styles/globals.scss
index 1479d00c..eeafc582 100644
--- a/marketing/styles/globals.scss
+++ b/marketing/styles/globals.scss
@@ -40,5 +40,5 @@ p {
   flex: 1;
   flex-direction: column;
   min-height: 100vh;
-  margin: 90px 0 0 0;
+  margin: 160px 0 0 0;
 }