From 6ee80a8d0d6ee0ec7ac75588ae0967f280b05970 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 27 Jun 2019 10:25:02 +0000
Subject: [PATCH] [Trunk|Connect]: Home Page, About almost ready. It is needed
 to specify gif images and their texts on create Gifs function.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56216 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../communities/communities.component.html    |  14 +-
 src/app/contact/contact.component.html        | 132 +++++++++---------
 src/app/learn-how/learn-how.component.ts      | 110 ++++++++++-----
 src/assets/connect-custom.css                 |   7 +-
 4 files changed, 151 insertions(+), 112 deletions(-)

diff --git a/src/app/communities/communities.component.html b/src/app/communities/communities.component.html
index 8fe387c..9aa75e4 100644
--- a/src/app/communities/communities.component.html
+++ b/src/app/communities/communities.component.html
@@ -56,8 +56,10 @@
             </div>
 
           </div>
-          <div class="uk-position-relative uk-align-center banner-img-box">
-            <img  src="../../assets/banner/login.png" class="uk-padding uk-position-center">
+          <div class="uk-position-relative">
+            <div class="uk-align-center uk-position-center">
+              <img width="296" height="285" src="../../assets/banner/login.png">
+            </div>
           </div>
         </div>
         <div *ngIf="managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0" uk-grid>
@@ -181,7 +183,7 @@
             </div>
           </div>
         </div>
-      <div class="uk-margin-large-top background uk-background-norepeat uk-background-cover">
+      <div class="uk-margin-large-top home-background uk-background-norepeat uk-background-cover">
         <div class="uk-container uk-container-large">
           <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about'">
           </gif-slider>
@@ -222,8 +224,10 @@
 <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
   <div class="uk-container uk-container-large uk-section">
     <div class="uk-flex uk-flex-middle uk-padding uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
-      <div class="uk-position-relative uk-align-center banner-img-box">
-        <img  src="../../assets/contact/2.png" class="uk-padding uk-position-center">
+      <div class="uk-position-relative">
+        <div class="uk-align-center uk-position-center">
+          <img width="237" height="250" src="../../assets/contact/2.png">
+        </div>
       </div>
       <div>
         <h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html
index 040566c..2087c15 100644
--- a/src/app/contact/contact.component.html
+++ b/src/app/contact/contact.component.html
@@ -1,78 +1,76 @@
 <div *ngIf="showLoading" class="uk-margin-large">
     <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
 </div>
-<div *ngIf="!showLoading" class="image-front-topbar background uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
+<div *ngIf="!showLoading" class="image-front-topbar home-background uk-section-large uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
     <div style=" min-height: 350px;"  class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
-        <div class="uk-margin-top uk-align-center">
-            <div class="uk-section uk-section-large">
-                <div class="uk-container uk-container-large">
-                    <div class="uk-grid-divider" uk-grid>
-                        <div class="uk-width-1-2@m uk-width-1-1@s">
-                            <h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us and create your community profile</h4>
-                            <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
-                            <div class="uk-margin-top" uk-grid>
-                                <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
-                                <div class="uk-width-1-2 uk-margin-small-top">
-                                    <label class="uk-h5 uk-text-bold">
-                                        Name <span class="uk-text-danger uk-text-bold">*</span>
-                                    </label>
-                                    <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
-                                    <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
-                                </div>
-                                <div class="uk-width-1-2 uk-margin-small-top">
-                                    <label class="uk-h5 uk-text-bold">
-                                        Surname <span class="uk-text-danger uk-text-bold">*</span>
-                                    </label>
-                                    <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
-                                    <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
-                                </div>
-                                <div class="uk-width-1-2 uk-margin-small-top">
-                                    <label class="uk-h5 uk-text-bold">
-                                        Email <span class="uk-text-danger uk-text-bold">*</span>
-                                    </label>
-                                    <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">Please add an email. </div>
-                                    <div *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')" class=" uk-text-danger uk-text-small style=display:none">Please add a valid email. </div>
-                                    <input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required #sender="ngModel">
-                                </div>
-                                <div class="uk-width-1-2 uk-margin-small-top">
-                                    <label class="uk-h5 uk-text-bold">
-                                        Affiliation <span class="uk-text-danger uk-text-bold">*</span>
-                                    </label>
-                                    <div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
-                                    <input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
-                                </div>
-                                <label class="uk-width-1-1 uk-h5 uk-text-bold">
-                                    Community Name <span class="uk-text-danger uk-text-bold">*</span>
+        <div class="uk-align-center">
+            <div class="uk-container uk-container-large">
+                <div class="uk-grid-divider" uk-grid>
+                    <div class="uk-width-1-2@m uk-width-1-1@s">
+                        <h4 class="uk-margin-auto uk-h4 uk-text-bold">Contact us and create your community profile</h4>
+                        <div *ngIf="errorMessage" class="uk-width-1-1 uk-alert uk-alert-danger uk-text-center" role="alert">{{errorMessage}}</div>
+                        <div class="uk-margin-top" uk-grid>
+                            <div class="uk-margin-small uk-width-1-1 uk-text-danger uk-text-bold uk-margin-remove-bottom">* Required fields</div>
+                            <div class="uk-width-1-2 uk-margin-small-top">
+                                <label class="uk-h5 uk-text-bold">
+                                    Name <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
-                                <div class="uk-width-1-2 uk-margin-remove-top">
-                                    <div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
-                                    <input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
-                                </div>
-                                <label class="uk-width-1-1 uk-h5 uk-text-bold">
-                                    Message <span class="uk-text-danger uk-text-bold">*</span>
+                                <div *ngIf="name.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a name. </div>
+                                <input class="uk-input" type="text" placeholder="Your Name" [(ngModel)]="contactForm.name" required #name="ngModel">
+                            </div>
+                            <div class="uk-width-1-2 uk-margin-small-top">
+                                <label class="uk-h5 uk-text-bold">
+                                    Surname <span class="uk-text-danger uk-text-bold">*</span>
                                 </label>
-                                <div class="uk-width-1-1 uk-margin-remove-top">
-                                    <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
-                                    <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
-                                </div>
-                                <div class="uk-width-1-1">
-                                    <div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
-                                    <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
-                                </div>
-                                <div class="uk-width-1-1 uk-text-right">
-                                    <button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
-                                    <button class="uk-button portal-button" (click)="send()">Send</button>
-                                </div>
+                                <div *ngIf="surname.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a surname. </div>
+                                <input class="uk-input" type="text" placeholder="Your Surname" [(ngModel)]="contactForm.surname" required #surname="ngModel">
+                            </div>
+                            <div class="uk-width-1-2 uk-margin-small-top">
+                                <label class="uk-h5 uk-text-bold">
+                                    Email <span class="uk-text-danger uk-text-bold">*</span>
+                                </label>
+                                <div *ngIf="sender.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none">Please add an email. </div>
+                                <div *ngIf="!sender.invalid && isSubmitted && !contactForm.email.match('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')" class=" uk-text-danger uk-text-small style=display:none">Please add a valid email. </div>
+                                <input class="uk-input" type="email" placeholder="Your Email" [(ngModel)]="contactForm.email" required #sender="ngModel">
+                            </div>
+                            <div class="uk-width-1-2 uk-margin-small-top">
+                                <label class="uk-h5 uk-text-bold">
+                                    Affiliation <span class="uk-text-danger uk-text-bold">*</span>
+                                </label>
+                                <div *ngIf="affiliation.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add an affiliation. </div>
+                                <input class="uk-input" type="text" placeholder="Your Affiliation" [(ngModel)]="contactForm.affiliation" required #affiliation="ngModel">
+                            </div>
+                            <label class="uk-width-1-1 uk-h5 uk-text-bold">
+                                Community Name <span class="uk-text-danger uk-text-bold">*</span>
+                            </label>
+                            <div class="uk-width-1-2 uk-margin-remove-top">
+                                <div *ngIf="community.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please add a community name. </div>
+                                <input class="uk-input" type="text" placeholder="Your Community Name" [(ngModel)]="contactForm.community" required #community="ngModel">
+                            </div>
+                            <label class="uk-width-1-1 uk-h5 uk-text-bold">
+                                Message <span class="uk-text-danger uk-text-bold">*</span>
+                            </label>
+                            <div class="uk-width-1-1 uk-margin-remove-top">
+                                <div *ngIf="message.invalid && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please write us a message. </div>
+                                <textarea rows="4" class="uk-textarea" type="text" placeholder="Your message" [(ngModel)]="contactForm.message" required #message="ngModel"></textarea>
+                            </div>
+                            <div class="uk-width-1-1">
+                                <div *ngIf="!contactForm.recaptcha && isSubmitted" class=" uk-text-danger uk-text-small style=display:none"> Please complete reCaptcha challenge. </div>
+                                <re-captcha #recaptcha (resolved)="handleRecaptcha($event)" [(siteKey)]="properties.reCaptchaSiteKey" required></re-captcha>
+                            </div>
+                            <div class="uk-width-1-1 uk-text-right">
+                                <button class="uk-button uk-button-default uk-margin-small-right" (click)="reset()">Reset</button>
+                                <button class="uk-button portal-button" (click)="send()">Send</button>
                             </div>
                         </div>
-                        <div class="uk-width-1-2@m uk-width-1-1@s">
-                            <h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>
-                            <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
-                                <li><h5 class="uk-h5"><span class="uk-text-bold">Create and Manage</span> your community</h5></li>
-                                <li><h5 class="uk-h5"><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
-                                <li><h5 class="uk-h5"><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
-                            </ul>
-                        </div>
+                    </div>
+                    <div class="uk-width-1-2@m uk-width-1-1@s">
+                        <h5 class="uk-margin-auto-top uk-margin-remove-bottom uk-h5 uk-text-bold">OpenAIRE gives you the virtual environment and services designed for your community to:</h5>
+                        <ul class="uk-list uk-list-divider uk-padding uk-padding-remove-left uk-margin-auto-top">
+                            <li><h5 class="uk-h5"><span class="uk-text-bold">Create and Manage</span> your community</h5></li>
+                            <li><h5 class="uk-h5"><span class="uk-text-bold">Access, share and link</span> together all your research</h5></li>
+                            <li><h5 class="uk-h5"><span class="uk-text-bold">Monitor and report</span> your community's progress</h5></li>
+                        </ul>
                     </div>
                 </div>
             </div>
diff --git a/src/app/learn-how/learn-how.component.ts b/src/app/learn-how/learn-how.component.ts
index e35352c..1e7d76a 100644
--- a/src/app/learn-how/learn-how.component.ts
+++ b/src/app/learn-how/learn-how.component.ts
@@ -8,25 +8,70 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
 @Component({
     selector: 'learn-how',
     template: `
-      <div class="image-front-topbar uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
+      <div class="image-front-topbar" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
         <div  style=" min-height: calc(7.89999px + 60vh);"
-              class="uk-section uk-padding-remove-bottom" >
-            <div class="uk-container uk-container-large uk-section">
-              <div class="uk-margin-large-top" uk-grid>
-                <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
-                <h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5>
-              </div>
-            </div>
-            <div class="uk-section-muted"> <!--background-->
+              class="uk-padding-remove-bottom cloud-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" >
+            <div class="uk-section uk-margin-large-top">
               <div class="uk-container uk-container-large">
-                <gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
+                  <div class="uk-margin-large-top" uk-grid>
+                    <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
+                    <div class="uk-width-1-2@l uk-width-1-1@s uk-text-large">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</div>
+                  </div>
+                  <div class="uk-margin-large-top uk-flex-middle uk-flex uk-child-width-1-3@m uk-child-width-1-1@s" uk-grid>
+                    <div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
+                      <div>
+                        <h5 class="uk-text-bold">1. Understanding your needs</h5>
+                        <div>
+                          First, we learn about your requirements and challenges. We help you understand Open Science practices within EOSC and together we’ll talk about how OpenAIRE RCD fits as a solution.
+                        </div>
+                      </div>
+                      <div class="uk-visible@m">
+                        <h5 class=" uk-text-bold">4. Roll out the service</h5>
+                        <div>
+                          We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.
+                        </div>
+                      </div>
+                      <div class="uk-hidden@m">
+                        <h5 class=" uk-text-bold">2. Develop a pilot</h5>
+                        <div>
+                          How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway.                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <img src="../../assets/about/cicle.png">
+                    </div>
+                    <div class="uk-flex uk-flex-middle uk-child-width-1-1@m uk-child-width-1-2@s uk-text-center" uk-grid>
+                      <div class="uk-visible@m">
+                        <h5 class=" uk-text-bold">2. Develop a pilot</h5>
+                        <div>
+                          How do you work today, and how would you like to work tomorrow? We tranlate your needs into rules and processes and we configure operational OpenAIRE services. By the end of this phase, we’ll have defined the basic configuration of your Community Gateway.                        </div>
+                      </div>
+                      <div class="uk-hidden@m">
+                        <h5 class=" uk-text-bold">4. Roll out the service</h5>
+                        <div>
+                          We jointly roll out your new Science Gateway. You take over the business operations and start engaging your researchers, we take care of the smooth operation of the e-service.                        </div>
+                      </div>
+                      <div>
+                        <h5 class="uk-text-bold">3. Test and Validate</h5>
+                        <div>
+                          You validate and test your new Science Gateway (portal) with your experts and community to ensure all workflows are in place and quality of data meets your standards. If needed, we work together in another iteration to further refine and adapt to your needs.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
               </div>
             </div>
-            <div class="uk-container uk-container-large">
-                <gif-slider [gifs]="second"></gif-slider>
-            </div>
-            <div class="uk-section-muted"> <!--background-->
-              <div class="uk-container uk-container-large uk-section">
+        </div>
+        <div class="uk-section">
+          <div class="uk-container uk-container-large">
+            <gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
+          </div>
+        </div>
+        <div class="uk-container uk-container-large">
+          <gif-slider [gifs]="second"></gif-slider>
+        </div>
+        <div class="contact-background uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+            <div class="uk-container uk-container-large uk-section">
                 <div class="uk-flex uk-flex-middle uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
                   <div>
                     <h1>We look forward to working together and helping you unlock the full potential of your research community through open science.</h1>
@@ -35,13 +80,15 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
                       <a class="uk-button portal-button" routerLinkActive="router-link-active" routerLink="/contact-us"> CONTACT US</a>
                     </div>
                   </div>
-                  <div>
-                    eikona
+                  <div class="uk-position-relative">
+                    <div class="uk-align-center uk-position-center">
+                      <img width="263" height="250" src="../../assets/contact/4.png">
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-            <div *ngIf="questions.length > 0" class="uk-container">
+            <div *ngIf="questions.length > 0 else comingSoon" class="uk-container">
               <h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
               <div class="uk-width-1-1 uk-section">
                 <ul uk-accordion>
@@ -55,32 +102,27 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
                 </ul>
               </div>
             </div>
-          </div>
+          <ng-template #comingSoon>
+              <div class="uk-container">
+                <h1 class="uk-margin-remove-bottom uk-margin-large-top uk-width-1-1">Frequently Asked Questions</h1>
+                <div class="uk-width-1-1 uk-section uk-text-center uk-text-large uk-text-bold uk-text-uppercase">
+                  Coming Soon
+                </div>
+              </div>
+          </ng-template>
       </div>
     `
   })
 export class LearnHowComponent {
   public piwiksub: any;
   questions: FAQ[] = [
-    {
+    /*{
       question: 'Coming soon?',
       answer: 'Yes'
     },
-    /*{
-      question: 'Why should my company do a design sprint?',
-      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
-    },
     {
-      question: 'Why should my company do a design sprint?',
-      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
-    },
-    {
-      question: 'Why should my company do a design sprint?',
-      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
-    },
-    {
-      question: 'Why should my company do a design sprint?',
-      answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
+      question: 'Could you be more specific?',
+      answer: 'No'
     }*/
   ];
   public first: {"gif": string, "header": string, "text"}[] = [];
diff --git a/src/assets/connect-custom.css b/src/assets/connect-custom.css
index 98d65a6..cabf069 100644
--- a/src/assets/connect-custom.css
+++ b/src/assets/connect-custom.css
@@ -50,11 +50,6 @@
   background-color: rgb(255, 255, 255);
 }
 
-.banner-img-box {
-  width: 300px;
-  height: 290px;
-}
-
 .contact-background {
   background-image: url("./contact/background.png") !important;
   background-color: rgb(255, 255, 255);
@@ -70,7 +65,7 @@
   background-color: rgb(255, 255, 255);
 }
 
-.background {
+.home-background {
   background-image: url("home/background.jpg") !important;
   background-color: rgb(255, 255, 255);
 }