Changes wrt to agent profile block

blocks/agent-profile/agent-profile.css

@@ -0,0 +1,114 @@
+.agent-profile {
+  display: flex;
+  padding: 0 1rem;
+}
+
+.agent-profile .profile-image img {
+  width: 9.375rem;
+  height: 11.875rem;
+}
+
+.agent-profile .profile-content .contact-me {
+    margin-top: 1.5rem;
+}
+
+.agent-profile .profile-content {
+  padding-left: 1.5rem;
+  font-size: var(--body-font-size-s);
+}
+
+.agent-profile .profile-content .name {
+  font-size: var(--body-font-size-xl);
+  line-height: var(--line-height-m);
+  margin-bottom: 0.5rem;
+}
+
+.agent-profile .profile-content .designation,
+.agent-profile .profile-content .license-number {
+  font-size: var(--body-font-size-xs);
+  text-transform: uppercase;
+  margin-bottom: 0.25rem;
+}
+
+.agent-profile .profile-content .social>a {
+  margin-right: 1rem;
+}
+
+.agent-profile .profile-content .email a,
+.agent-profile .profile-content .website a {
+  font-size: var(--body-font-size-xs);
+  color: var(--black);
+  text-transform: lowercase;
+}
+
+.agent-profile .profile-content .contact-me a {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 1.6px;
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+}
+
+.agent-profile .profile-content .contact-me a:hover {
+  color: var(--primary-light);
+  background-color: var(--primary-color);
+}
+
+.agent-profile .profile-content .website,
+.agent-profile .profile-content .email {
+  margin-bottom: 0.25rem;
+}
+
+.agent-profile .profile-content .phone {
+  font-size: var(--body-font-size-xs);
+}
+
+.agent-profile .profile-content .phone li {
+  margin-bottom: 0.25rem;
+}
+
+@media (min-width: 1200px) {
+  .agent-profile-container {
+    position: relative;
+  }
+
+  .agent-profile-wrapper {
+    position: absolute;
+    display: flex;
+    left: auto;
+    width: 34rem;
+    right: 0;
+    bottom: 4.625rem;
+    padding: 1.875rem 1.875rem 0;
+    z-index: 1;
+    word-break: break-word;
+    background-color: var(--white);
+  }
+
+  .agent-profile {
+    position: relative;
+    line-height: var(--line-height-m);
+  }
+
+  .agent-profile .profile-image img {
+    width: 13.125rem;
+    height: 15.625rem;
+  }
+
+  .agent-profile .profile-content .phone {
+    font-size: var(--body-font-size-s);
+    margin-top: 2px;
+    line-height: var(--line-height-m);
+  }
+
+  .agent-profile .profile-content .email a,
+  .agent-profile .profile-content .website a {
+    font-size: var(--body-font-size-xs);
+  }
+
+  .agent-profile .profile-content {
+    padding-left: 1.875rem;
+  }
+}

blocks/agent-profile/agent-profile.js

@@ -0,0 +1,83 @@
+import { getMetadata } from '../../scripts/aem.js';
+import {
+  a, div, h1, ul, li, img,
+} from '../../scripts/dom-helpers.js';
+
+const getPhoneDiv = () => {
+  let phoneDiv;
+  let phoneUl;
+
+  if (getMetadata('agent-direct-phone')) {
+    phoneUl = ul({});
+    phoneUl.append(li({}, 'Direct: ', getMetadata('agent-direct-phone')));
+  }
+
+  if (getMetadata('agent-office-phone')) {
+    phoneUl = phoneUl || ul({});
+    phoneUl.append(li({}, 'Office: ', getMetadata('agent-office-phone')));
+  }
+
+  if (phoneUl) {
+    phoneDiv = div({ class: 'phone' });
+    phoneDiv.append(phoneUl);
+    return phoneDiv;
+  }
+
+  return phoneDiv;
+};
+
+const getWebsiteDiv = () => {
+  let websiteDiv;
+  const websiteUrl = getMetadata('agent-website');
+
+  if (websiteUrl) {
+    const anchor = a({ href: websiteUrl, class: 'button', title: 'my website' }, 'my website');
+    websiteDiv = div({ class: 'website' }, anchor);
+  }
+
+  return websiteDiv;
+};
+
+const getEmailDiv = () => {
+  let emailDiv;
+  const agentEmail = getMetadata('agent-email');
+
+  if (agentEmail) {
+    const anchor = a({ href: `mailto:${agentEmail}`, class: 'button', title: agentEmail }, agentEmail);
+    emailDiv = div({ class: 'email' }, anchor);
+  }
+
+  return emailDiv;
+};
+
+const getImageDiv = () => {
+  const agentPhoto = getMetadata('agent-photo');
+  return div({ class: 'profile-image' }, img({ src: agentPhoto }));
+};
+
+export default async function decorate(block) {
+  const profileImage = getImageDiv();
+  const profileContent = div({ class: 'profile-content' },
+    div({ class: 'name' }, h1({}, getMetadata('agent-name'))),
+    div({ class: 'designation' }, getMetadata('agent-designation')),
+    div({ class: 'license-number' }, getMetadata('agent-license-number')),
+  );
+
+  const emailDiv = getEmailDiv();
+  if (emailDiv) {
+    profileContent.append(emailDiv);
+  }
+
+  const websiteDiv = getWebsiteDiv();
+  if (websiteDiv) {
+    profileContent.append(websiteDiv);
+  }
+
+  const phoneDiv = getPhoneDiv();
+  if (phoneDiv) {
+    profileContent.append(phoneDiv);
+  }
+
+  profileContent.append(div({ class: 'contact-me' }, a({ href: '#', class: 'button' }, 'Contact Me')));
+  block.replaceChildren(profileImage, profileContent);
+}