refactor: enhance hero-aem styles and improve button functionality

bitdefender · Feb 4, 2025 · e941643 · e941643
1 parent 6355d14
commit e941643
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 54 deletions.
diff --git a/_src/blocks/hero-aem/hero-aem.css b/_src/blocks/hero-aem/hero-aem.css
@@ -19,14 +19,9 @@
   margin: 0 auto;
 }
 
-.hero-aem-container .hero-aem p:first-of-type a {
-  margin: 0;
-  margin-bottom: 20px;
-}
-
 .hero-aem-container .hero-aem h1 {
   color: #006DFF;
-  font-size: 38px;
+  font-size: 23px;
   font-weight: normal;
   margin-top: 10px;
   line-height: 1.1;
@@ -86,10 +81,6 @@
   text-decoration: underline;
 }
 
-.hero-aem-container .hero-aem p.button-container {
-  text-align: center;
-}
-
 .hero-aem-container .hero-aem p.button-container .button.primary {
   width: 100%;
 }
@@ -236,11 +227,6 @@
   transform: translateX(5px);
 }
 
-/* this would ideally be the sales tax included text */
-.hero-aem__card-text p:last-child {
-  font-size: 14px;
-}
-
 .hero-aem__card-text p:last-child a {
   color: inherit;
   margin-left: 8px;
@@ -491,61 +477,153 @@
   margin-top: 1.5rem;
 }
 
-.hero-aem-container .hero-aem .hero-aem__card-text p:last-child {
-  a {
-    color: #006DFF;
-    margin-left: 0;
-    font-weight: bold;
-    text-decoration: none;
+.hero-aem-container .hero-aem ul {
+
+  padding: 0;
+  margin-right: 5px;
+
+  li {
+    font-size: 14px;
+    line-height: 16px;
+    margin-bottom: 8px;
+    list-style-type: none;
+    padding: 0;
+    display: flex;
+  }
+
+  li::before {
+    content: '';
+    height: 17px;
+    width: 17px;
+    margin-right: 10px;
+    background-image: url("https://bitdefender.com/icons/circle-check-sharp-solid.svg");
+    background-repeat: no-repeat;
   }
 }
 
+.hero-aem-container.mobile-grey-background {
+  background-color: #F7F7F7;
+}
 
-@media (max-width: 767px) {
-  .hero-aem-container.hero-vsb {
-    padding-bottom: 0;
+.hero-aem-container.no-padding-card-mobile {
+  .hero-aem .hero-aem__card-text {
+    padding: 0;
   }
+}
+
+.hero-aem-container .benefit_list tbody tr {
+  display: flex;
+  flex-flow: column;
 
-  .hero-aem-container.hero-vsb .hero-aem {
-    padding: 0 15px;
+  ul {
+    margin: 0; 
   }
+}
+
+.hero-aem-container .ratings tbody tr {
 
-  .hero-aem-container.hero-vsb .hero-aem__card__desktop {
-    max-height: unset !important;
+  display: flex;
+  flex-wrap: wrap;
+
+  td {
+    text-align: center;
   }
 
-  .hero-aem-container.hero-vsb .hero-aem .hero-aem__card-text {
-    padding: 0;
-    background-color: transparent;
-    border-radius: 20px;
+  td:first-of-type {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
   }
 
-  .hero-aem-container.hero-vsb .hero-aem p.button-container {
-    text-align: left;
+  td:not(:first-of-type) {
+    margin-top: 12px;
   }
 
-  .hero-aem-container.hero-vsb .hero-aem p.button-container .button.primary {
-    margin: 0;
-    max-width: 290px;
+  td:nth-of-type(2) {
+    position: relative;
+    margin-right: 33px;
+    position: relative;
+
+    &::after {
+      content: '';
+      height: 25px;
+      width: 1px;
+      background-color: #ADADAD;
+      position: absolute;
+      top: 35%;
+      right: -17px;
+    }
   }
 
-  .hero-aem-container.hero-vsb .hero-aem p.button-container .button.primary span {
-    text-align: center;
-    display: block;
-    width: 100%;
+  p:has(strong) {
+    display: flex;
+    font-size: 17px;
+    justify-content: left;
+  }
+
+  .icon-star {
+    margin: 0;
+    height: 17px;
+    width: 16px;
   }
 
-  .hero-aem-container.hero-vsb .hero-aem h1 {
-    color: #006DFF;
-    font-size: 29px;
+  p {
+    font-size: 14px;
+    margin: 8px 0;
   }
 }
 
+.hero-aem-container .devices-years-text {
+  font-family: Arial;
+  font-size: 16px;
+  line-height: 24px;
+  color: #4F4F4F;
+  margin-top: 8px;
+}
+
+.hero-aem-container .hero-aem__prices+p {
+  margin: 8px 0;
+  font-family: Arial;
+  font-size: 14px;
+  line-height: 16px;
+}
+
 @media (min-width: 768px) {
   .hero-aem-container .hero-aem {
     display: flex;
     flex-wrap: wrap;
+
+    h1 {
+      font-size: 38px;
+    }
+  }
+
+  .hero-aem-container.mobile-grey-background {
+    background-color: initial;
+  }
+
+  .hero-aem-container .benefit_list tbody tr {
+    display: flex;
+    flex-flow: row;
+    gap: 10px;
+  }
+
+  .hero-aem-container .ratings tbody tr {
+    flex-wrap: nowrap;
+
+    td:not(:first-of-type) {
+      margin-top: 0px;
+    }
+
+    td:last-of-type {
+      padding-right: 10px;
+    }
+
+    p:has(strong) {
+      justify-content: center;
+    }
   }
+
 
   .hero-aem-container .hero-aem .hero-aem__mobile-image {
     display: none;
@@ -567,6 +645,16 @@
     background: linear-gradient(to left, rgba(247, 247, 247, 0), #F7F7F7);
   }
 
+  .hero-aem-container.hide-gradient .hero-aem .hero-aem__desktop-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: none;
+  }
+
   .hero-aem-container .hero-aem .hero-aem__desktop-image img {
     height: 100%;
     max-width: 800px;
@@ -602,6 +690,10 @@
     padding: 32px 0px 24px 56px;
   }
 
+  .hero-aem-container.smaller-card-padding .hero-aem .hero-aem__card__desktop>div {
+    padding: 32px 0px 24px 25px;
+  }
+
   .hero-aem-container .hero-aem p.button-container {
     text-align: left;
     display: inline-block;
@@ -629,14 +721,6 @@
   .hero-aem-container .aem-two-cards h2+p {
     font-size: 18px;
   }
-
-  .hero-aem-container .hero-aem p:has(a) {
-    display: inline-block;
-  }
-
-  .hero-aem-container .hero-aem p:has(em) {
-    margin-left: 10px;
-  }
 }
 
 @media (max-width: 992px) {

diff --git a/_src/blocks/hero-aem/hero-aem.js b/_src/blocks/hero-aem/hero-aem.js
@@ -1,7 +1,10 @@
 /* eslint-disable prefer-const */
 /* eslint-disable no-undef */
 /* eslint-disable max-len */
-import { openUrlForOs } from '../../scripts/utils/utils.js';
+import { decorateButtons } from '../../scripts/lib-franklin.js';
+import {
+  openUrlForOs, createNanoBlock, renderNanoBlocks, createTag,
+} from '../../scripts/utils/utils.js';
 
 function createCardElementContainer(elements, mobileImage) {
   const cardElementContainer = document.createElement('div');
@@ -118,13 +121,32 @@ async function createPricesWebsites(product, buyLink, bluePillText, saveText, un
   return pricesBox;
 }
 
+/**
+ * Nanoblock representing the price conditions below the Price
+ * @param text Conditions
+ * @returns Root node of the nanoblock
+ */
+function renderDevicesUsersText(text) {
+  return createTag(
+    'div',
+    {
+      class: 'devices-years-text',
+    },
+    `<span>${text}</span>`,
+  );
+}
+
+createNanoBlock('devices-users-text', renderDevicesUsersText);
+
 export default async function decorate(block, options) {
   const {
     product, conditionText, saveText, MacOS, Windows, Android, IOS,
     alignContent, height, type, dropdownProducts, bluePillText, underPriceText,
     dropdownTag,
   } = block.closest('.section').dataset;
 
+  renderNanoBlocks(block);
+
   if (options) {
     // eslint-disable-next-line no-param-reassign
     block = block.querySelector('.block');
@@ -185,7 +207,24 @@ export default async function decorate(block, options) {
 
   if (product && !options) {
     let priceBox = await createPricesWebsites(product, buyLink, bluePillText, saveText, underPriceText, conditionText);
-    buyLink.parentNode.parentNode.insertBefore(priceBox, buyLink.parentNode);
+    // Select all paragraph elements
+    const paragraphs = document.querySelectorAll('p');
+    let insertPricesParagraph = null;
+
+    // Iterate through the paragraphs
+    paragraphs.forEach((paragraph) => {
+      // Check if the paragraph contains the text <insert-prices>
+      if (paragraph.textContent.includes('<insert-prices>')) {
+        // Perform any additional actions here
+        insertPricesParagraph = paragraph;
+      }
+    });
+
+    if (insertPricesParagraph) {
+      insertPricesParagraph.replaceWith(priceBox);
+    } else {
+      buyLink.parentNode.parentNode.insertBefore(priceBox, buyLink.parentNode);
+    }
 
     pricesContainers.set(product, priceBox);
   }
@@ -205,6 +244,24 @@ export default async function decorate(block, options) {
     breadcrumbTable.deleteRow(0);
   }
 
+  let tables = block.querySelectorAll('table');
+  // eslint-disable-next-line no-restricted-syntax
+  for (const listTable of tables) {
+    if (listTable && listTable.textContent.includes('benefit_list')) {
+      listTable.classList.add('benefit_list');
+      // delete the first row
+      listTable.deleteRow(0);
+    }
+
+    if (listTable && listTable.textContent.includes('ratings')) {
+      listTable.classList.add('ratings');
+      // delete the first row
+      listTable.deleteRow(0);
+      decorateButtons(listTable);
+      // listTable.querySelector('a').classList.add('button');
+    }
+  }
+
   let freeDownloadButton = block.querySelector('a[href*="#free-download"]');
   if (freeDownloadButton) {
     freeDownloadButton.classList.add('button', 'free-download');

diff --git a/_src/scripts/lib-franklin.js b/_src/scripts/lib-franklin.js
@@ -745,6 +745,12 @@ export function decorateButtons(element) {
           up.classList.add('button-container');
           a.innerHTML = wrapButtonText(a);
         }
+
+        if (up.tagName === 'TD' && up.closest('table.ratings')) {
+          a.className = 'button';
+          up.classList.add('button-container');
+          a.innerHTML = wrapButtonText(a);
+        }
       }
     }
   });