From 5b8f1751b769460e1a074b27955c4e40632d587d Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Mon, 10 May 2021 12:29:45 +0300
Subject: [PATCH] created and styled call to action

---
 src/SASS/components/buttons.scss      | 57 +++++++++++++++++++++++++++
 src/SASS/components/components.scss   |  4 +-
 src/SASS/pages/_home.scss             | 12 ++++++
 src/commons/hotel-view/hotel-view.jsx | 10 +++++
 4 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/SASS/components/buttons.scss b/src/SASS/components/buttons.scss
index 69c7310..1b320cf 100644
--- a/src/SASS/components/buttons.scss
+++ b/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;
diff --git a/src/SASS/components/components.scss b/src/SASS/components/components.scss
index e575525..cab46b6 100644
--- a/src/SASS/components/components.scss
+++ b/src/SASS/components/components.scss
@@ -45,9 +45,7 @@
 
   &__count {
     margin-right: auto;
-  }
-
-  &__friends {
+    color: $color-grey-dark-3;
   }
 }
 
diff --git a/src/SASS/pages/_home.scss b/src/SASS/pages/_home.scss
index 61a60b1..59c7f65 100644
--- a/src/SASS/pages/_home.scss
+++ b/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;
+  }
+}
diff --git a/src/commons/hotel-view/hotel-view.jsx b/src/commons/hotel-view/hotel-view.jsx
index 781dc01..842087f 100644
--- a/src/commons/hotel-view/hotel-view.jsx
+++ b/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>
   );
 }