Merge branch 'main' of github.com:hlxsites/aldevron into feature/footer

blocks/hero/hero.css

@@ -15,14 +15,16 @@ main .hero {
 }
 
 main .hero h1 {
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
+  line-height: 1.2;
+  padding: 0;
   color: white;
+  font-size: 44px;
+  text-shadow: 0 0 6px rgba(0,0,0,50%);
 }
 
 main .hero picture {
   position: absolute;
+  height : 310px;
   z-index: -1;
   top: 0;
   left: 0;
@@ -37,3 +39,7 @@ main .hero img {
   width: 100%;
   height: 100%;
 }
+
+main .hero a:hover {
+  color: white;
+}

blocks/hero/hero.js

@@ -0,0 +1,23 @@
+export default function decorate() {
+  const heroClass = document.getElementsByClassName('hero block');
+  heroClass[0].children[0].setAttribute('class', 'outer');
+  heroClass[0].children[0].children[0].setAttribute('class', 'vertical');
+  const heroDiv = heroClass[0].children[0].children[0];
+  const pTags = heroDiv.getElementsByTagName('p');
+  let innerElements = '';
+  for (let i = 0; i < pTags.length; i += 1) {
+    if (pTags[i].outerHTML.includes('class')) {
+      innerElements += pTags[i].innerHTML.replace('class="button"', 'style="background-color:#000;" class="hs-button" target="_blank"');
+    } else if (i === 1) {
+      const heroTitle = pTags[i].outerHTML.replace(/<p[ ]*>/g, '');
+      innerElements += heroTitle.replace(/<\/p>/g, '<br>');
+    } else if (i === 2) {
+      const heroDescription = pTags[i].outerHTML.replace(/<p[ ]*>/g, '<span style="font-size: 70%;">');
+      innerElements += heroDescription.replace(/<\/p>/g, '</span><br>');
+    } else {
+      const heroImage = pTags[i].outerHTML.replace(/<p[ ]*>/g, '');
+      innerElements += heroImage.replace(/<\/p>/g, '<br>');
+    }
+  }
+  heroDiv.innerHTML = `<h1>${innerElements}</h1>`;
+}

scripts/delayed.js

@@ -4,4 +4,33 @@ import { sampleRUM } from './aem.js';
 // Core Web Vitals RUM collection
 sampleRUM('cwv');
 
-// add more delayed functionality here
+// google tag manager -start
+function loadGTM() {
+  const scriptTag = document.createElement('script');
+  scriptTag.innerHTML = `
+        let gtmId = 'GTM-MLWV3QQ';
+        // googleTagManager
+        (function (w, d, s, l, i) {
+            w[l] = w[l] || [];
+            w[l].push({
+                'gtm.start':
+                    new Date().getTime(), event: 'gtm.js'
+            });
+            var f = d.getElementsByTagName(s)[0],
+                j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
+            j.async = true;
+            j.src =
+                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+            f.parentNode.insertBefore(j, f);
+        })(window, document, 'script', 'dataLayer', gtmId);
+        `;
+  document.head.prepend(scriptTag);
+}
+// google tag manager -end
+
+if (
+  !window.location.hostname.includes('localhost')
+    && !document.location.hostname.includes('.hlx.page')
+) {
+  loadGTM();
+}