engage hero section

Author: hmillersarah

ims-advocacy.html

@@ -289,7 +289,7 @@ <h5>IMS support</h5>
 	<div id="content" class="main-content">
 		<main id="main">
 			<!-- =========================== Hero =========================== -->
-			<section class="engage-bg">
+			<!-- <section class="engage-bg">
 				<div id="intro-section" class="pure-g hero">
 					<div class="pure-u-1 pure-u-md-1-24">
 						<img src="wp-content/icons/icon_engage.svg" alt="" class="icon">
@@ -316,7 +316,7 @@ <h1>Advocates and ideas</h1>
 						</div>
 					</div>
 				</div>
-			</section>
+			</section> -->
 
 			<hero-section
 				name="Advocates and ideas"

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

@@ -1,15 +1,16 @@
-/* section {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 2em;
-    padding: 4em;
-} */
+.engage-bg {
+    background-image: url(../../wp-content/backgrounds/Engage_HomepageBG.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: white;
+}
 
 section {
     display: grid;
     grid-template-columns: 4em 2fr;
     grid-template-rows: repeat(4, 1fr);
-    padding: 4em;
+    padding: 3em;
+    padding-top: 2em;
     align-items: center;
 
     /* Button Color */

web-components/hero-section/hero-section.html

@@ -6,8 +6,8 @@
     <span class="desc"></span>
     <div class="links">
         <a  onfocus="closeNavMenu()" 
-        rel="noopener noreferrer"
-        class="link-primary button button-primary"
+            rel="noopener noreferrer"
+            class="link-primary button button-primary"
         >
             <span class="link-primary-text"></span>
         </a>

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

@@ -61,8 +61,7 @@ function createComponent(html) {
             switch(this.section) {
                 case 'Engage':
                     const selector = shadow.querySelector('.hero');
-                    selector.style.backgroundColor = 'black';
-                    selector.style.color = 'white';
+                    selector.classList.add('engage-bg');
                     setImage('.image', 'wp-content/icons/icon_engage.svg', shadow);
                     break;
             }