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: 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: Manrope, serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: normal;
+    color: #2a2223;
+}
+
+.floatingagent.block > .agentinfo > h2 {
+    font-size: 18px;
+    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 > .floating-agent-col > picture > img{
+    display: inline;
+}
+
+.floatingagent.block > .agentinfo {
+    flex-grow: 1;
+    margin-top: 10px;
+}
+
+.floatingagent.block > .contactagent {
+    align-self: center;
+    background: #670038;
+    color: #f5f1f2;
+    border: 0;
+    flex: none;
+    padding: 10px;
+    margin-right: 5%;
+}
+
+@media (max-width: 600px) {
+    .floatingagent.block {
+        justify-content: flex-start;
+    }
+
+    .floatingagent > .floating-agent-col > picture > img,
+    .floatingagent > .agentinfo {
+        display: none;
+    }
+
+    .floatingagent > .contactagent {
+        display: block;
+        margin-left: 10px;
+    }
+}

blocks/floatingagent/floatingagent.js

@@ -0,0 +1,66 @@
+import {
+  getMetadata,
+} from '../../scripts/aem.js';
+import {
+  button,
+  div,
+  h2,
+  img,
+  p,
+  strong,
+} from '../../scripts/dom-helpers.js';
+
+export default function decorate(block) {
+  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('')), // Placeholder, will be updated with metadata
+    p(''), // Placeholder, will be updated with metadata
+    p(''), // Placeholder, will be updated with metadata
+  );
+
+  const contactButton = button({ class: 'contactagent' }, 'CONTACT AGENT');
+
+  // Append elements directly to the block
+  block.append(
+    div({ class: 'floating-agent-col' }, agentPicture),
+    agentInfo,
+    contactButton,
+  );
+
+  // Fetch metadata
+  const agentName = getMetadata('name');
+  const agentDesc = getMetadata('desc');
+  const pic = getMetadata('pic');
+  const lic = getMetadata('lic');
+
+  // Populate the elements with metadata values
+  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');
+
+window.addEventListener('scroll', () => {
+  const heroElement = document.querySelector('.hero-wrapper');
+  const heroRect = heroElement.getBoundingClientRect();
+
+  if (heroRect.bottom < 0) {
+    displayedElement.style.display = 'flex';
+  } else {
+    displayedElement.style.display = 'none';
+  }
+});