created card component and tours section

src/App.js

@@ -2,6 +2,7 @@ import "./App.scss";
 import About from "./commons/about-section/about";
 import Feature from "./commons/feature-section/feature";
 import Header from "./commons/header/header.jsx";
+import Tours from "./commons/tours-section/tours";
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
       <Header />
       <About />
       <Feature />
+      <Tours />
     </div>
   );
 }

src/App.scss

@@ -10,8 +10,9 @@
 @import "./sass/components/button";
 @import "./sass/components/composition";
 @import "./sass/components/feature-box";
-@import "./sass/layout/header";
+@import "./sass/components/card";
 
+@import "./sass/layout/header";
 @import "./sass/layout/grid";
 
 @import "./sass/pages/home";

src/commons/tours-section/tours.jsx

@@ -0,0 +1,24 @@
+function Tours() {
+  return (
+    <section className="section-tours">
+      <div className="u-center-text u-margin-bottom-big">
+        <h2 className="heading-secondary">Most popular tours</h2>
+      </div>
+
+      <div className="row">
+        <div className="col-1-of-3">
+          <div className="card">
+            <div className="card__side card__side--front">Front</div>
+            <div className="card__side  card__side--back card__side--back-1">
+              Back
+            </div>
+          </div>
+        </div>
+        <div className="col-1-of-3"></div>
+        <div className="col-1-of-3"></div>
+      </div>
+    </section>
+  );
+}
+
+export default Tours;

src/sass/abstracts/_variables.scss

@@ -3,6 +3,12 @@ $color-primary: #55c57a;
 $color-primary-light: #55c57a;
 $color-primary-dark: #28b485;
 
+$color-secondary-light: #ffb900;
+$color-secondary-dark: #ff7730;
+
+$color-tertiary-light: #2998ff;
+$color-tertiary-dark: #5643fa;
+
 $color-grey-light-1: #f7f7f7;
 
 $color-grey-dark: #777;
@@ -16,3 +22,8 @@ $default-font-size: 1.6rem;
 $grid-width: 114rem;
 $gutter-vertical: 8rem;
 $gutter-horizontal: 6rem;
+
+// OTHER
+
+$shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
+$shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);

src/sass/base/_typography.scss

@@ -49,7 +49,7 @@ body {
 
   &:hover {
     transform: skewY(2deg) skewX(15deg) scale(1.1);
-    text-shadow: 0.5rem 1rem 2rem rgba($color-black, 0.2);
+    text-shadow: $shadow-light;
   }
 }
 

src/sass/components/_card.scss

@@ -0,0 +1,43 @@
+.card {
+  perspective: 150rem;
+  position: relative;
+  height: 50rem;
+
+  &__side {
+    font-size: 2rem;
+
+    height: 50rem;
+    transition: all 0.58s ease;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    backface-visibility: hidden;
+    border-radius: 3px;
+    box-shadow: $shadow-default;
+
+    &--front {
+      background-color: $color-white;
+    }
+
+    &--back {
+      transform: rotateY(180deg);
+
+      &-1 {
+        background-image: linear-gradient(
+          to right bottom,
+          $color-secondary-light,
+          $color-secondary-dark
+        );
+      }
+    }
+  }
+
+  &:hover &__side--front {
+    transform: rotateY(180deg);
+  }
+
+  &:hover &__side--back {
+    transform: rotateY(0deg);
+  }
+}

src/sass/components/_feature-box.scss

@@ -4,7 +4,7 @@
   padding: 2.5rem;
   text-align: center;
   border-radius: 0.3rem;
-  box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15);
+  box-shadow: $shadow-default;
   transition: transform 0.3s;
 
   &__icon {

src/sass/pages/_home.scss

@@ -21,3 +21,9 @@
     transform: skewY(7deg);
   }
 }
+
+.section-tours {
+  background-color: $color-grey-light-1;
+  padding: 25rem 0 50rem 0;
+  margin-top: -12rem;
+}