From 851c0b90c2f7191472b7a48e8134bf174499bca6 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Mon, 3 May 2021 10:31:55 +0300
Subject: [PATCH] finished tours section

---
 src/commons/about-section/about.jsx     |  6 +-
 src/commons/header/header.jsx           |  2 +-
 src/commons/stories-section/stories.jsx |  0
 src/commons/tours-section/tours.jsx     | 76 ++++++++++++++++++++++++-
 src/components/button/button-main.jsx   | 11 +---
 src/sass/base/_utilities.scss           |  8 +++
 src/sass/components/_button.scss        |  8 +++
 src/sass/components/_card.scss          | 73 +++++++++++++++++++++++-
 src/sass/pages/_home.scss               |  2 +-
 9 files changed, 166 insertions(+), 20 deletions(-)
 create mode 100644 src/commons/stories-section/stories.jsx

diff --git a/src/commons/about-section/about.jsx b/src/commons/about-section/about.jsx
index 1aa2c9e..a02c6e2 100644
--- a/src/commons/about-section/about.jsx
+++ b/src/commons/about-section/about.jsx
@@ -38,17 +38,17 @@ function About() {
             <div className="composition">
               <img
                 src={nat1Large}
-                alt="Photo 1"
+                alt="Nature 1"
                 className="composition__photo composition__photo--p1"
               />
               <img
                 src={nat2Large}
-                alt="Photo 2"
+                alt="Nature 2"
                 className="composition__photo composition__photo--p2"
               />
               <img
                 src={nat3Large}
-                alt="Photo 3"
+                alt="Nature 3"
                 className="composition__photo composition__photo--p3"
               />
             </div>
diff --git a/src/commons/header/header.jsx b/src/commons/header/header.jsx
index 6e333bc..10aa12e 100644
--- a/src/commons/header/header.jsx
+++ b/src/commons/header/header.jsx
@@ -13,7 +13,7 @@ function Header() {
           <span className="heading-primary--sub">is where life happens</span>
         </h1>
         <ButtonMain
-          animationName={"move-in--bottom"}
+          feature={"btn btn--white move-in--bottom"}
           text={"Discover our tours"}
         />
       </div>
diff --git a/src/commons/stories-section/stories.jsx b/src/commons/stories-section/stories.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/commons/tours-section/tours.jsx b/src/commons/tours-section/tours.jsx
index 6695e78..dc0b140 100644
--- a/src/commons/tours-section/tours.jsx
+++ b/src/commons/tours-section/tours.jsx
@@ -1,3 +1,5 @@
+import ButtonMain from "../../components/button/button-main";
+
 function Tours() {
   return (
     <section className="section-tours">
@@ -26,12 +28,80 @@ function Tours() {
               </div>
             </div>
             <div className="card__side  card__side--back card__side--back-1">
-              Back
+              <div className="card__cta">
+                <div className="card__price-box">
+                  <p className="card__price-only">Only</p>
+                  <p className="card__price-value">$297</p>
+                </div>
+                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+              </div>
             </div>
           </div>
         </div>
-        <div className="col-1-of-3"></div>
-        <div className="col-1-of-3"></div>
+        <div className="col-1-of-3">
+          <div className="card">
+            <div className="card__side card__side--front">
+              <div className="card__picture card__picture--2">&nbsp;</div>
+              <h4 className="card__heading">
+                <span className="card__heading-span card__heading-span--2">
+                  The Forest Hiker
+                </span>
+              </h4>
+              <div className="card__details">
+                <ul>
+                  <li>7 day tours</li>
+                  <li>Up to 40 people</li>
+                  <li>6 tour guides</li>
+                  <li>Sleep in provided tents</li>
+                  <li>Difficulty: medium</li>
+                </ul>
+              </div>
+            </div>
+            <div className="card__side  card__side--back card__side--back-2">
+              <div className="card__cta">
+                <div className="card__price-box">
+                  <p className="card__price-only">Only</p>
+                  <p className="card__price-value">$497</p>
+                </div>
+                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="col-1-of-3">
+          <div className="card">
+            <div className="card__side card__side--front">
+              <div className="card__picture card__picture--3">&nbsp;</div>
+              <h4 className="card__heading">
+                <span className="card__heading-span card__heading-span--3">
+                  The Snow Adventurer
+                </span>
+              </h4>
+              <div className="card__details">
+                <ul>
+                  <li>5 day tours</li>
+                  <li>Up to 15 people</li>
+                  <li>3 tour guides</li>
+                  <li>Sleep in provided tents</li>
+                  <li>Difficulty: hard</li>
+                </ul>
+              </div>
+            </div>
+            <div className="card__side  card__side--back card__side--back-3">
+              <div className="card__cta">
+                <div className="card__price-box">
+                  <p className="card__price-only">Only</p>
+                  <p className="card__price-value">$897</p>
+                </div>
+                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="u-center-text u-margin-top-huge">
+        <ButtonMain feature={"btn btn--green"} text={"Discover all tours"} />
       </div>
     </section>
   );
diff --git a/src/components/button/button-main.jsx b/src/components/button/button-main.jsx
index c7e9214..5f66e4f 100644
--- a/src/components/button/button-main.jsx
+++ b/src/components/button/button-main.jsx
@@ -1,14 +1,7 @@
 function ButtonMain(props) {
-  const { text, animationName, link } = props;
+  const { text, link, feature } = props;
   return (
-    <a
-      href="#"
-      className={
-        animationName === "move-in--bottom"
-          ? "btn btn--white move-in--bottom"
-          : "btn btn--white"
-      }
-    >
+    <a href="#" className={feature}>
       {text}
     </a>
   );
diff --git a/src/sass/base/_utilities.scss b/src/sass/base/_utilities.scss
index eea696f..d6720d7 100644
--- a/src/sass/base/_utilities.scss
+++ b/src/sass/base/_utilities.scss
@@ -11,3 +11,11 @@
 .u-margin-bottom-small {
   margin-bottom: 1.5rem;
 }
+
+.u-margin-top-big {
+  margin-top: 8rem;
+}
+
+.u-margin-top-huge {
+  margin-top: 10rem;
+}
diff --git a/src/sass/components/_button.scss b/src/sass/components/_button.scss
index 0dcae48..d5ba7ba 100644
--- a/src/sass/components/_button.scss
+++ b/src/sass/components/_button.scss
@@ -34,6 +34,14 @@
     }
   }
 
+  &--green {
+    background-color: $color-primary;
+    color: $color-white;
+    &::after {
+      background-color: $color-primary;
+    }
+  }
+
   &:after {
     content: " ";
     display: inline-block;
diff --git a/src/sass/components/_card.scss b/src/sass/components/_card.scss
index 7954ec8..87ca392 100644
--- a/src/sass/components/_card.scss
+++ b/src/sass/components/_card.scss
@@ -30,6 +30,22 @@
           $color-secondary-dark
         );
       }
+
+      &-2 {
+        background-image: linear-gradient(
+          to right bottom,
+          $color-primary-light,
+          $color-primary-dark
+        );
+      }
+
+      &-3 {
+        background-image: linear-gradient(
+          to right bottom,
+          $color-tertiary-light,
+          $color-tertiary-dark
+        );
+      }
     }
   }
 
@@ -59,11 +75,21 @@
     }
 
     &--2 {
-      background-image: url(../../commons/images/nat-5.jpg);
+      background-image: linear-gradient(
+          to right bottom,
+          $color-primary-light,
+          $color-primary-dark
+        ),
+        url(../../commons/images/nat-6.jpg);
     }
 
     &--3 {
-      background-image: url(../../commons/images/nat-5.jpg);
+      background-image: linear-gradient(
+          to right bottom,
+          $color-tertiary-light,
+          $color-tertiary-dark
+        ),
+        url(../../commons/images/nat-7.jpg);
     }
   }
 
@@ -89,13 +115,28 @@
         rgba($color-secondary-dark, 0.85)
       );
     }
+
+    &--2 {
+      background-image: linear-gradient(
+        to right bottom,
+        rgba($color-primary-light, 0.85),
+        rgba($color-primary-dark, 0.85)
+      );
+    }
+
+    &--3 {
+      background-image: linear-gradient(
+        to right bottom,
+        rgba($color-tertiary-light, 0.85),
+        rgba($color-tertiary-dark, 0.85)
+      );
+    }
   }
 
   &__details {
     padding: 3rem;
     ul {
       list-style: none;
-      width: 80%;
       margin: 0 auto;
 
       li {
@@ -109,4 +150,30 @@
       }
     }
   }
+
+  // Back side
+  &__cta {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    text-align: center;
+  }
+
+  &__price-box {
+    text-align: center;
+    margin-bottom: 8rem;
+    color: $color-white;
+  }
+
+  &__price-only {
+    font-size: 1.4rem;
+    text-transform: uppercase;
+  }
+
+  &__price-value {
+    font-size: 6rem;
+    font-weight: 100;
+  }
 }
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index bcbbddd..2205bc1 100644
--- a/src/sass/pages/_home.scss
+++ b/src/sass/pages/_home.scss
@@ -24,6 +24,6 @@
 
 .section-tours {
   background-color: $color-grey-light-1;
-  padding: 25rem 0 50rem 0;
+  padding: 25rem 0 15rem 0;
   margin-top: -12rem;
 }