create hero section type for 404

Author: hmillersarah

404.html

@@ -110,11 +110,11 @@
       <hero-section
         name="We're sorry!"
         image="wp-content/404_Error.svg"
-        section="Engage"
+        section="404"
         desc="The page you're looking for might have been moved or deleted.">
       </hero-section>
 
-      <div class="bg-404 main-sec">
+      <!-- <div class="bg-404 main-sec">
         <section id="intro-section" class="pure-g zs-section">
           <div class="pure-u-3-25">
             <img
@@ -132,7 +132,7 @@ <h1>We<span>&#8217;</span>re sorry!</h1>
             <h2 class="text-404">404</h2>
           </div>
         </section>
-      </div>
+      </div> -->
 
       <!-- =========================== White Space =========================== -->
       <!-- <div class="bg-404">

web-components/hero-section/hero-section.css

@@ -32,6 +32,11 @@
     backdrop-filter: blur(6px);
   }
 
+.black-bg {
+    background-color: #161616;
+    color: white;
+}
+
 section {
     /* Button Color */
     --btn-prim: #0f62fe;
@@ -93,6 +98,10 @@ h6, p {
     font-weight: bold;
 }
 
+.hidden {
+    visibility: hidden;
+}
+
 .name {
     grid-column: 2;
     grid-row: 2;

web-components/hero-section/hero-section.js

@@ -100,6 +100,7 @@ function createComponent(html) {
 
             const heroSection = shadow.querySelector('.hero-section');
             const hero = shadow.querySelector('.hero');
+            const subheader = shadow.querySelector('.section');
 
             // Set content
             setImage('.image', this.image, shadow);
@@ -164,6 +165,9 @@ function createComponent(html) {
                 case 'Support':
                     heroSection.classList.add('learn-bg');
                     break;
+                case '404':
+                    heroSection.classList.add('black-bg');
+                    subheader.classList.add('hidden');
             }
         }
     }