agent profile block added

blocks/agent-profile/agent-profile.css

@@ -0,0 +1,98 @@
+.agent-profile {
+  display: flex;
+  padding: 0 16px 0 16px;
+}
+
+.agent-profile .profile-image img {
+  width: 150px;
+  height: 190px;
+  /* display: block; */
+}
+
+.agent-profile .profile-content {
+  padding-left: 15px;
+}
+
+.agent-profile .profile-content .name {
+  font-size: 22px;
+  line-height: 26px;
+  margin-bottom: 8px;
+}
+
+.agent-profile .profile-content .designation {
+  text-transform: uppercase;
+  font-family: "Manrope";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 130%;
+    color: #2a2223;
+    padding-bottom: 4px;
+
+  /* font-family: "Manrope";
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: normal;
+    line-height: 130%;
+    color: #2a2223; */
+}
+
+.agent-profile .profile-content .license-number {
+  font-size: 14px;
+  margin-bottom: 8px;;
+}
+
+.agent-profile .profile-content .email a {
+  margin-top: 4px;
+  line-height: 1;
+  font-size: 14px;
+  color: black;
+  text-transform: lowercase;
+  margin-bottom: 8px;
+}
+
+.agent-profile .profile-content .website a {
+  margin-top: 4px;
+  line-height: 1;
+  font-size: 14px;
+  color: black;
+  text-transform: lowercase;
+  margin-bottom: 8px;
+  /* word-break: break-word; */
+}
+
+.agent-profile .profile-content .website {
+  margin-bottom: 4px;
+}
+
+.agent-profile .profile-content .email {
+  margin-bottom: 4px;
+}
+
+.agent-profile .profile-content .phone {
+  font-size: 14px;
+}
+
+.agent-profile .profile-content .phone li {
+  margin-bottom: 4px;
+}
+
+.agent-profile .profile-content .social>a {
+  margin-right: 16px;
+}
+
+@media (min-width: 1200px) {
+  .agent-profile {
+    position: absolute;
+    display: flex;
+    left: auto;
+    width: 575px;
+    right: 0;
+    bottom: 0;
+    padding: 30px 30px 0 30px;
+    z-index: 1;
+    word-break: break-word;
+  }
+}

blocks/agent-profile/agent-profile.js

@@ -0,0 +1,31 @@
+import { div } from '../../scripts/dom-helpers.js';
+
+export default async function decorate(block) {
+
+  console.log(block);
+  const children = [...block.children];
+  const profileImage = div({ class: "profile-image" });
+  const profileContent = div({ class: "profile-content" })
+
+  children.forEach((x, index) => {
+    console.log(x);
+    const firstGrandChild = x.children[0];
+    const secondGrandChild = x.children[1];
+    const firstGrandChildTextContent = firstGrandChild.textContent.toLowerCase().replace(/\s+/g, '-');
+    secondGrandChild.classList.add(firstGrandChildTextContent);
+
+    if (firstGrandChildTextContent)
+
+    if (index === 0) {
+      profileImage.append(secondGrandChild.querySelector('picture'));
+    } else {
+      profileContent.append(secondGrandChild);
+    }
+  });
+
+  block.replaceChildren(profileImage, profileContent);
+  // block.innerHTML = '';
+  // block.append(profileImage, profileContent);
+
+  console.log(children);
+}

scripts/dom-helpers.js

@@ -0,0 +1,84 @@
+/* eslint-disable no-param-reassign */
+
+/**
+ * Example Usage:
+ *
+ * domEl('main',
+ *  div({ class: 'card' },
+ *  a({ href: item.path },
+ *    div({ class: 'card-thumb' },
+ *     createOptimizedPicture(item.image, item.title, 'lazy', [{ width: '800' }]),
+ *    ),
+ *   div({ class: 'card-caption' },
+ *      h3(item.title),
+ *      p({ class: 'card-description' }, item.description),
+ *      p({ class: 'button-container' },
+ *       a({ href: item.path, 'aria-label': 'Read More', class: 'button primary' }, 'Read More'),
+ *     ),
+ *   ),
+ *  ),
+ * )
+ */
+
+/**
+ * Helper for more concisely generating DOM Elements with attributes and children
+ * @param {string} tag HTML tag of the desired element
+ * @param  {[Object?, ...Element]} items: First item can optionally be an object of attributes,
+ *  everything else is a child element
+ * @returns {Element} The constructred DOM Element
+ */
+export function domEl(tag, ...items) {
+  const element = document.createElement(tag);
+
+  if (!items || items.length === 0) return element;
+
+  if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') {
+    const [attributes, ...rest] = items;
+    items = rest;
+
+    Object.entries(attributes).forEach(([key, value]) => {
+      if (!key.startsWith('on')) {
+        element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value);
+      } else {
+        element.addEventListener(key.substring(2).toLowerCase(), value);
+      }
+    });
+  }
+
+  items.forEach((item) => {
+    if (item === null || item === undefined) return;
+    item = item instanceof Element || item instanceof HTMLElement
+      ? item
+      : document.createTextNode(item);
+    element.appendChild(item);
+  });
+
+  return element;
+}
+
+/*
+    More short hand functions can be added for very common DOM elements below.
+    domEl function from above can be used for one off DOM element occurrences.
+  */
+export function div(...items) { return domEl('div', ...items); }
+export function p(...items) { return domEl('p', ...items); }
+export function a(...items) { return domEl('a', ...items); }
+export function h1(...items) { return domEl('h1', ...items); }
+export function h2(...items) { return domEl('h2', ...items); }
+export function h3(...items) { return domEl('h3', ...items); }
+export function h4(...items) { return domEl('h4', ...items); }
+export function h5(...items) { return domEl('h5', ...items); }
+export function h6(...items) { return domEl('h6', ...items); }
+export function ul(...items) { return domEl('ul', ...items); }
+export function li(...items) { return domEl('li', ...items); }
+export function i(...items) { return domEl('i', ...items); }
+export function img(...items) { return domEl('img', ...items); }
+export function span(...items) { return domEl('span', ...items); }
+export function input(...items) { return domEl('input', ...items); }
+export function label(...items) { return domEl('label', ...items); }
+export function form(...items) { return domEl('form', ...items); }
+export function button(...items) { return domEl('button', ...items); }
+export function nav(...items) { return domEl('nav', ...items); }
+export function aside(...items) { return domEl('aside', ...items); }
+
+export function meta(...items) { return domEl('meta', ...items); }