created text component

src/App.js

@@ -1,10 +1,12 @@
 import "./App.scss";
+import About from "./commons/about-section/about";
 import Header from "./commons/header/header";
 
 function App() {
   return (
     <div>
       <Header />
+      <About />
     </div>
   );
 }

src/commons/about-section/about.jsx

@@ -0,0 +1,19 @@
+function About() {
+  return (
+    <main>
+      <section className="section-about">
+        <div className="u-center-text u-margin-bottom-8">
+          <h2 className="heading-secondary">
+            Exciting tours for adventurous people
+          </h2>
+        </div>
+
+        <div className="row">
+          <div className="col-1-of-2">Text content</div>
+          <div className="col-1-of-2">Image</div>
+        </div>
+      </section>
+    </main>
+  );
+}
+export default About;

src/sass/abstracts/_variables.scss

@@ -3,6 +3,8 @@ $color-primary: #55c57a;
 $color-primary-light: #55c57a;
 $color-primary-dark: #28b485;
 
+$color-grey-light-1: #f7f7f7;
+
 $color-grey-dark: #777;
 $color-white: #fff;
 $color-black: #000;

src/sass/base/_typography.scss

@@ -31,3 +31,24 @@ body {
   color: $color-grey-dark;
   padding: 3rem;
 }
+
+.heading-secondary {
+  font-size: 3.5rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  display: inline-block;
+  background-image: linear-gradient(
+    to right,
+    $color-primary-light,
+    $color-primary-dark
+  );
+  background-clip: text;
+  color: transparent;
+  letter-spacing: 0.2rem;
+  transition: all 0.2s;
+
+  &:hover {
+    transform: skewY(2deg) skewX(15deg) scale(1.1);
+    text-shadow: 0.5rem 1rem 2rem rgba($color-black, 0.2);
+  }
+}

src/sass/base/_utilities.scss

@@ -0,0 +1,7 @@
+.u-center-text {
+  text-align: center;
+}
+
+.u-margin-bottom-8 {
+  margin-bottom: 8rem;
+}

src/sass/layout/_grid.scss

@@ -1,6 +1,5 @@
 .row {
   max-width: $grid-width;
-  background-color: #eee;
   margin: 0 auto;
 
   &:not(:last-child) {
@@ -10,9 +9,7 @@
   @include clearfix;
 
   [class^="col-"] {
-    background-color: orangered;
     float: left;
-    color: $color-white;
 
     &:not(:last-child) {
       margin-right: $gutter-horizontal;

src/sass/pages/_home.scss

@@ -0,0 +1,5 @@
+.section-about {
+  background-color: $color-grey-light-1;
+  padding: 25rem 0;
+  margin-top: -20vh;
+}