Merge pull request 'Update before Production April Release' (#5) from develop into master

Reviewed-on: #5

src/app/home/home.component.html

@@ -265,21 +265,18 @@
       </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 #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="uk-text-center uk-width-expand">
-        <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>
-    </div>
   </div>
 </div>
 <div *ngIf="isMobile || isServer" class="uk-hidden@m">
@@ -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,39 @@
 
 .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);
+    }
+
+    &.two {
+      bottom: 0;
+      left: @global-medium-gutter;
+      transform: rotate(-10deg);
+      object-position: top;
+    }
+
+    &.three {
+      top: 0;
+      right: @global-medium-gutter;
+      transform: rotate(-10deg);
+      object-position: -60px;
+    }
+
+    &.four {
+      bottom: 0;
+      right: @global-medium-gutter + (@home-curator-image-size/2);
+      transform: rotate(-10deg);
+      object-position: 0;
+    }
   }
-
-  .right img {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 160px;
-    height: 190px;
-    object-fit: cover;
-    border-radius: 18px;
-    transform: matrix(1, 0.07, -0.07, 1, 0, 0);
-  }
-
-	.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 {
-			top: 0;
-			right: 15%;
-		}
-		&.contact-image-right {
-			bottom: 50%;
-			right: 2%;
-		}
-	}
-
 }

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 259182b7c4e93079af045335d09d18c836402071
+Subproject commit 6dafcb391a63771cf620d5bff79759ec94bae778

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit f264617e5ab356c4279ee1ef1819db434fec4fba
+Subproject commit aa1e6c9df390a4ba0919b5f8591374f7eec75089