Add easter egg

src/app/editorialisation/components/home/home.component.html

 <div class="home-component">
   <section class="section research" [defaultImage]="defaultImage" [lazyLoad]="finalImage"> 
-    <div class="columns is-multiline is-centered">
+    <div class="columns is-multiline is-centered" (click)="numberOfClickEgg = numberOfClickEgg + 1">
       <div class="logo column is-6-desktop">
         <img class="logo-data-beta" src="./assets/img/home_logo_data.svg" alt="Logo beta">
       </div>
@@ -22,6 +22,18 @@
     </div>
   </section>
 
+  <div class="clouds" *ngIf="numberOfClickEgg > 5">
+      <div class="cloud n1">
+          <img src="./assets/img/nuage.png" alt="">
+      </div>
+      <div class="cloud n2">
+          <img src="./assets/img/nuage.png" alt="">
+      </div>
+      <div class="cloud n3">
+          <img src="./assets/img/nuage.png" alt="">
+      </div>
+    </div>
+
   <section class="section posts">
     <div class="post-container">
       <div class="posts-header">

src/app/editorialisation/components/home/home.component.scss

@@ -28,6 +28,66 @@
   }
 }
 
+.clouds {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+
+  .cloud {
+    width: 100%;
+    min-width: 200px;
+  }
+}
+
+.cloud.n1 {
+  animation: animateCloud 20s linear infinite;
+  animation-fill-mode: forwards;
+  animation-delay: 1s;
+  opacity: 0;
+
+  img {
+    height: 100px;
+    opacity: 0.5;
+  }
+}
+
+.cloud.n2 {
+  animation: animateCloud 30s linear infinite;
+  animation-fill-mode: forwards;
+  animation-delay: 3s;
+  opacity: 0;
+
+  img {
+    height: 150px;
+    opacity: 0.7;
+  }
+}
+
+.cloud.n3 {
+  top: -20rem;
+  animation: animateCloud 40s linear infinite;
+  animation-delay: 0.5s;
+  opacity: 0;
+
+  img {
+    height: 300px;
+  }
+}
+
+@keyframes animateCloud {
+  0% {
+    margin-left: -400px;
+    opacity: 1;
+  }
+
+  100% {
+    margin-left: 120%;
+    opacity: 1;
+  }
+}
+
 .research {
   text-align: center;
   background-color: $brand-color;
@@ -44,6 +104,11 @@
     padding-top: 7rem;
   }
 
+  .title-subtitle {
+    z-index: 2;
+    position: relative;
+  }
+
   .logo {
     margin-top: 1rem;
 
@@ -73,6 +138,8 @@
   .search {
     margin-left: auto;
     margin-right: auto;
+    z-index: 5;
+    position: relative;
   }
 }
 

src/app/editorialisation/components/home/home.component.ts

@@ -21,6 +21,9 @@ export class HomeComponent implements OnInit {
   environment = environment;
   notificationMessages = notificationMessages;
 
+  triggerEasterEgg: boolean = false;
+  numberOfClickEgg: number = 0;
+
   latestPosts: CMSContent[];
 
   defaultImage: string = 'assets/img/home_image_garbage.jpg';