Add curators' photos in contact-us section in home page

src/app/home/home.component.html

@@ -265,20 +265,17 @@
       </ng-template>
     </div>
   </div>
-  <div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
-    <div class="uk-grid" uk-grid>
-      <div class="left uk-position-relative uk-width-1-1 uk-width-1-5@m">
-        <img class="uk-box-shadow-large" src="assets/monitor-assets/avatar1.jpg">
-      </div>
-      <div class="uk-text-center uk-width-expand">
+  <div #contact class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-flex uk-flex-center uk-position-relative contact-us">
+    <img class="uk-box-shadow-large one" src="assets/monitor-assets/curators/1.jpg">
+    <img class="uk-box-shadow-large two" src="assets/monitor-assets/curators/2.jpg">
+    <img class="uk-box-shadow-large three" src="assets/monitor-assets/curators/3.jpg">
+    <img class="uk-box-shadow-large four" src="assets/monitor-assets/curators/4.jpg">
+    <div class="uk-text-center uk-width-2-3@l uk-width-1-2">
       <h3>
         Need more information or a demo? Get in touch and let us show you in practice how you can apply OpenAIRE Monitor to your needs<span class="uk-text-primary">.</span>
       </h3>
       <a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
-					routerLink="/contact-us">Contact us</a></div>
-      <div class="right uk-position-relative uk-width-1-1 uk-width-1-5@m">
-        <img class="uk-box-shadow-large" src="assets/monitor-assets/avatar2.jpg">
-      </div>
+        routerLink="/contact-us">Contact us</a>
       </div>
   </div>
 </div>
@@ -550,16 +547,14 @@
 	</div>
 	<div class="uk-section uk-container uk-container-large uk-margin-large-bottom contact-us">
 		<div class="uk-position-relative">
-			<h2 class="uk-width-1-2 uk-margin-medium-bottom">
+			<h2 class="uk-margin-medium-bottom">
 				Need more information or a demo?
 			</h2>
-			<div class="uk-width-3-4 uk-text-large">
+			<div class="uk-text-large">
 				Get in touch and let us show you in practice how you can apply OpenAIRE Monitor to your needs<span class="uk-text-primary">.</span>
 			</div>
 			<a class="uk-button uk-button-primary uk-text-uppercase uk-margin-medium-top uk-margin-medium-bottom"
 				routerLink="/contact-us">Contact us</a>
-			<img class="uk-box-shadow-large contact-image contact-image-left" src="assets/monitor-assets/avatar1.jpg">
-			<img class="uk-box-shadow-large contact-image contact-image-right" src="assets/monitor-assets/avatar2.jpg">
 		</div>
   </div>
 </div>

src/app/home/home.component.less

@@ -1,5 +1,7 @@
 @import (reference) "~src/assets/openaire-theme/less/_import-variables";
 
+@home-curator-image-size: 136px;
+
 .home-background {
   background-color: @global-inverse-color;
 }
@@ -28,43 +30,36 @@
 
 .contact-us {
 
-  .left img {
+  img {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 160px;
-    height: 190px;
+    width: @home-curator-image-size;
+    height: @home-curator-image-size;
     object-fit: cover;
     border-radius: 18px;
-    transform: matrix(1, -0.07, 0.07, 1, 0, 0);
+
+
+    &.one {
+      top: 0;
+      left: @global-medium-gutter + (@home-curator-image-size/2);
+      transform: rotate(10deg);
     }
 
-  .right img {
-    position: absolute;
+    &.two {
       bottom: 0;
-    right: 0;
-    width: 160px;
-    height: 190px;
-    object-fit: cover;
-    border-radius: 18px;
-    transform: matrix(1, 0.07, -0.07, 1, 0, 0);
+      left: @global-medium-gutter;
+      transform: rotate(-10deg);
     }
 
-	.contact-image {
-		position: absolute;
-		width: 66px;
-    height: 82px;
-    object-fit: cover;
-    border-radius: 18px;
-		transform: matrix(1, 0.07, -0.07, 1, 0, 0);
-		&.contact-image-left {
+    &.three {
       top: 0;
-			right: 15%;
-		}
-		&.contact-image-right {
-			bottom: 50%;
-			right: 2%;
-		}
+      right: @global-medium-gutter;
+      transform: rotate(-10deg);
     }
 
+    &.four {
+      bottom: 0;
+      right: @global-medium-gutter + (@home-curator-image-size/2);
+      transform: rotate(-10deg);
+    }
+  }
 }