Floating agent bottom

blocks/floatingagent/floatingagent.css

@@ -0,0 +1,81 @@
+.floatingagent.block {
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100px;
+    background-color: var(--white);
+    padding: 10px;
+    border-top: 1px solid #ccc;
+    z-index: 999;
+}
+
+.floatingagent.block > .floating-agent-col {
+    margin-left: 100px;
+    display: flex;
+    margin-right: 10px;
+    flex: none;
+}
+
+.floatingagent.block > .agentinfo > p {
+    margin-block-end: 0;
+    font-family: var(--font-family-primary);
+    font-size: var(--body-font-size-xxs);
+    font-style: normal;
+    font-weight: var(--font-weight-normal);
+    letter-spacing: normal;
+    color: #2a2223;
+}
+
+.floatingagent.block > .agentinfo > h2 {
+    font-size: var(--heading-font-size-m);
+    line-height: 130%;
+    letter-spacing: .18px;
+    vertical-align: top;
+    color: #2a2223;
+    width: max-content;
+}
+
+.floatingagent.block > .floating-agent-col > picture {
+    height:40px;
+    width:30px;
+    margin-right: 40px;
+}
+
+.floatingagent.block > .floating-agent-col > picture > img{
+    display: inline;
+}
+
+.floatingagent.block > .agentinfo {
+    flex-grow: 1;
+    margin-top: 10px;
+}
+
+.floatingagent.block > .contactagent {
+    align-self: center;
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+    border: 0;
+    flex: none;
+    padding: 10px;
+    margin-right: 5%;
+}
+
+@media (max-width: 600px) {
+    .floatingagent.block {
+        justify-content: flex-start;
+    }
+
+    .floatingagent.block > .floating-agent-col > picture > img,
+    .floatingagent.block > .agentinfo {
+        display: none;
+    }
+
+    .floatingagent.block > .contactagent {
+        display: block;
+        margin-left: 10px;
+    }
+}

blocks/floatingagent/floatingagent.js

@@ -0,0 +1,68 @@
+import {
+  getMetadata,
+} from '../../scripts/aem.js';
+import {
+  button,
+  div,
+  h2,
+  img,
+  p,
+  strong,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  const agentName = getMetadata('name');
+  const agentDesc = getMetadata('desc');
+  const pic = getMetadata('pic');
+  const lic = getMetadata('lic');
+
+  const agentPicture = document.createElement('picture');
+  agentPicture.appendChild(img({
+    loading: 'lazy',
+    alt: 'Agent Image',
+    src: '',
+    width: '48',
+    height: '64',
+    style: 'width: 48px; height: 64px;',
+  }));
+
+  const agentInfo = div({ class: 'agentinfo' },
+    h2(strong('')),
+    p(''),
+    p(''),
+  );
+
+  const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT');
+
+  block.append(
+    div({ class: 'floating-agent-col' }, agentPicture),
+    agentInfo,
+    contactButton,
+  );
+
+  const agentImageElement = agentPicture.querySelector('img');
+  const agentInfoElements = agentInfo.children;
+
+  agentImageElement.src = pic;
+  agentInfoElements[0].innerHTML = `<strong>${agentName}</strong>`;
+  agentInfoElements[1].textContent = agentDesc;
+  agentInfoElements[2].textContent = lic;
+}
+
+const displayedElement = document.querySelector('.floatingagent');
+
+const heroElement = document.querySelector('.hero-wrapper');
+
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      displayedElement.style.display = 'none';
+    } else {
+      displayedElement.style.display = 'flex';
+    }
+  });
+}, {
+  threshold: [0],
+});
+
+observer.observe(heroElement);