created and styled call to action

src/SASS/components/buttons.scss

@@ -1,3 +1,60 @@
+.btn {
+  border: none;
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 100px;
+  background-image: linear-gradient(
+    to right,
+    $color-primary-light,
+    $color-primary-dark
+  );
+  color: $color-white;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  & > * {
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    transition: all 0.2s;
+    height: 100%;
+    width: 100%;
+  }
+
+  &__visible {
+    padding: 2rem 7.5rem;
+  }
+
+  &__invisible {
+    position: absolute;
+    padding: 2rem 0;
+    left: 0;
+    top: -100%;
+  }
+
+  &:hover {
+    background-image: linear-gradient(
+      to left,
+      $color-primary-light,
+      $color-primary-dark
+    );
+  }
+
+  &:hover &__visible {
+    transform: translateY(100%);
+  }
+
+  &:hover &__invisible {
+    top: 0;
+  }
+
+  &:active {
+    transform: translateY(-0.2rem);
+  }
+}
+
 .btn-inline {
   border: none;
   color: $color-primary;

src/SASS/components/components.scss

@@ -45,9 +45,7 @@
 
   &__count {
     margin-right: auto;
-  }
-
-  &__friends {
+    color: $color-grey-dark-3;
   }
 }
 

src/SASS/pages/_home.scss

@@ -258,3 +258,15 @@
     text-transform: uppercase;
   }
 }
+
+.cta {
+  padding: 3.5rem 0;
+  text-align: center;
+
+  &__book-now {
+    font-size: 1.5rem;
+    font-weight: 300;
+    text-transform: uppercase;
+    margin-bottom: 2.5rem;
+  }
+}

src/commons/hotel-view/hotel-view.jsx

@@ -129,6 +129,16 @@ function HotelView() {
           </button>
         </div>
       </div>
+
+      <div className="cta">
+        <h2 className="cta__book-now">
+          Good news! We have 4 free roms for your selected dates!
+        </h2>
+        <button className="btn">
+          <span className="btn__visible">Book now</span>
+          <span className="btn__invisible">Only 4 rooms left</span>
+        </button>
+      </div>
     </main>
   );
 }