fix: buttons and image

package.json

@@ -24,6 +24,7 @@
     "prepublish": "npm run snyk-protect"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@material/button": "^3.0.0",
     "@mdi/font": "^3.9.96",
     "@mdi/svg": "^3.7.95",

src/components/homepage-navV2.js

@@ -15,13 +15,14 @@ class homeNavV2 extends LitElement {
       <nav class="navbar home-nav">
         <div class="navbar-brand">
           <a class="navbar-item logo" href="http://0.0.0.0:8080/oae">
-            <img src="/images/logo-oae2.svg" />
+            <img src="/images/logo-oae9.svg" />
           </a>
         </div>
         <div class="navbar-end navEnd">
           <div class="navbar-item">
             <div class="buttons">
-              <a class="button is-round signIn-button">Sign In</a>
+              <a class="button is-round signIn-button">Website</a>
+              <a class="button is-round website-button">Sign Up</a>
             </div>
           </div>
         </div>

src/components/homepage-searchV2.js

@@ -14,7 +14,7 @@ class homeSearchV2 extends LitElement {
     return html`
       <div class="field home-search">
         <div class="control has-icons-left home-searchIcon">
-          <input class="input is-rounded" type="search" placeholder="Hint: press ENTER to search" />
+          <input class="input is-rounded" type="search" placeholder="Search for keywords like 'open apereo' " />
           <span class="icon is-left ">
             <iron-icon icon="search"></iron-icon>
           </span>

src/components/oae.js

@@ -35,23 +35,23 @@ class OAE extends PageViewElement {
       <div class="container">
           <div class="columns is-vcentered">
               <div class="column is-5 landing-caption left-landing">
-                  <h1 class="title is-2 is-bold is-spaced bold-title">
-                    Explore and work together with the OAE</h1>
+                  <h1 class="title is-2 is-bold is-spaced bold-title ">
+                    A new way to share, explore and connect</h1>
                   </h1>
-                  <h2 class="subtitle is-5 is-muted">Try searching for tags like "meeting" or "document"</h2>
+                  <h2 class="subtitle is-5"><strong>The Open Academic Environment</strong> is the easiest way to communicate and share files with your classmates. Whether you're a student, investigator or professor, <strong>join us for free!</strong></h2>
                   <home-search-v2></home-search-v2>
                   <div class="button-wrap buttons-landing">
-                      <a class="button cta is-rounded primary-btn raised">
+                      <a class="button cta is-rounded primary-btn button-start">
                           Get Started
                       </a>
-                      <a class="button cta is-rounded">
+                      <a class="button cta is-rounded button-filter">
                           Filter Results
                       </a>
                   </div>
               </div>
               <div class="column is-5 landing-image">
                   <figure class="image is-4by5 cover">
-                      <img src="images/landing-img.jpg" alt="Description">
+                      <img src="images/illustration.svg" alt="Description">
                   </figure>
               </div>
 

style/homepage-navv2.scss

@@ -1,3 +1,4 @@
+
 .navbar-brand {
   padding-left: 3em;
 }
@@ -12,13 +13,10 @@
 
 .home-nav {
   background: white;
-  border-bottom: solid;
-  border-bottom-width: thin;
-  border-color: #eeeeee;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 30px rgba(0, 0, 0, 0.24);
 }
 
 .signIn-button {
-  text-transform: uppercase;
   font-size: 1em;
   border-radius: 25px;
   color: #00253d;
@@ -30,3 +28,18 @@
     border: none;
   }
 }
+
+.website-button {
+  font-size: 1em;
+  border-radius: 25px;
+  width: 80px;
+  height: 30px;
+  color: white;
+  background-color: #2274ff;
+  border: none;
+  &:hover {
+    color: #2e98d5;
+    background-color: transparent;
+    border: none;
+  }
+}

style/homepage-searchV2.scss

@@ -6,12 +6,12 @@
 	height: 2.5em;
 	border-style: solid;
 	border-color: white;
-	background-color: white;
+	background-color: #E9EFF5;
 	border-width: 1px;
-	&:hover, :active {
+	&:hover, :active :focus {
 		border-style: solid;
 		border-color: white;
-		background-color: white;
+		background-color: #E9EFF5;
 		border-width: 1px;
 	}
 }

style/homepage-v2.scss

@@ -7,6 +7,9 @@ $secondaryFontColor: #424242;
 @import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap');
 
+.hero-body {
+  background-color: white;
+}
 .is-5 {
   height: 100%;
   margin: 0;
@@ -16,7 +19,9 @@ $secondaryFontColor: #424242;
 
 .bold-title {
   font-family: 'Roboto Slab', serif;
-  }
+  text-transform: uppercase;
+  color: $fontColour;
+}
 
 .left-landing {
   margin-left: 3em;
@@ -26,18 +31,39 @@ $secondaryFontColor: #424242;
   margin-top: 3%;
 }
 
+.button.button-start {
+  background-color: #e9eff5;
+  color: #2274ff;
+  border: none;
+  &:hover {
+    background-color: #2274ff;
+    color: #e9eff5;
+  }
+}
+
+.button.button-filter {
+  background-color: transparent;
+  color: $fontColour;
+  border: none;
+  &:hover {
+    color: #2274ff;
+  }
+}
+
 .landing-image {
   padding-left: 10%;
 }
 
-.cover {
+/*.cover {
   box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 15px rgba(0, 0, 0, 0.22);
   transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1);
+  transform: rotate(5deg);
   &:hover {
-    transform: rotate(5deg);
+    transform: rotate(-5deg);
   }
 }
 
 .cover img {
   object-fit: cover;
 }
+*/

yarn.lock

@@ -646,6 +646,11 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
+  integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
+
 "@material/animation@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@material/animation/-/animation-3.0.0.tgz#bbea365f961204a499dcaf04c5c60548af45d03f"