created secondary button component

src/commons/about-section/about.jsx

@@ -1,15 +1,36 @@
+import ButtonSecondary from "../../components/button/button-secondary";
+
 function About() {
   return (
     <main>
       <section className="section-about">
-        <div className="u-center-text u-margin-bottom-8">
+        <div className="u-center-text u-margin-bottom-big">
           <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">
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              You are going to fall in love with nature
+            </h3>
+            <p className="paragraph">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+              perferendis esse minima provident neque, non necessitatibus
+              architecto tempora, molestias omnis nesciunt numquam reprehenderit
+              distinctio id! Fuga quibusdam harum dolores minus?
+            </p>
+            <h3 className="heading-tertiary u-margin-bottom-small">
+              Live adventures like you never have before
+            </h3>
+            <p className="paragraph">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+              perferendis esse minima provident neque
+            </p>
+
+            <ButtonSecondary text={"Learn More ➯"} />
+          </div>
           <div className="col-1-of-2">Image</div>
         </div>
       </section>

src/commons/header/header.js

@@ -1,5 +1,5 @@
 import logoWhite from "../../commons/images/logo-white.png";
-import Button from "../../components/button/button";
+import ButtonMain from "../../components/button/button-main";
 
 function Header() {
   return (
@@ -12,7 +12,10 @@ function Header() {
           <span className="heading-primary--main">Outdoors</span>
           <span className="heading-primary--sub">is where life happens</span>
         </h1>
-        <Button animationName={"move-in--bottom"} text={"Discover our tours"} />
+        <ButtonMain
+          animationName={"move-in--bottom"}
+          text={"Discover our tours"}
+        />
       </div>
     </header>
   );

src/components/button/button-main.jsx

@@ -1,4 +1,4 @@
-function Button(props) {
+function ButtonMain(props) {
   const { text, animationName, link } = props;
   return (
     <a
@@ -14,4 +14,4 @@ function Button(props) {
   );
 }
 
-export default Button;
+export default ButtonMain;

src/components/button/button-secondary.jsx

@@ -0,0 +1,5 @@
+function ButtonSecondary(props) {
+  return <button className="btn-text">{props.text}</button>;
+}
+
+export default ButtonSecondary;

src/sass/abstracts/_variables.scss

@@ -9,6 +9,9 @@ $color-grey-dark: #777;
 $color-white: #fff;
 $color-black: #000;
 
+// FONT CONTROL
+$default-font-size: 1.6rem;
+
 // GRID background
 $grid-width: 114rem;
 $gutter-vertical: 8rem;

src/sass/base/_typography.scss

@@ -52,3 +52,16 @@ body {
     text-shadow: 0.5rem 1rem 2rem rgba($color-black, 0.2);
   }
 }
+
+.heading-tertiary {
+  font-size: $default-font-size;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.paragraph {
+  font-size: $default-font-size;
+  &:not(:last-child) {
+    margin-bottom: 3rem;
+  }
+}

src/sass/base/_utilities.scss

@@ -2,6 +2,12 @@
   text-align: center;
 }
 
-.u-margin-bottom-8 {
+.u-margin-bottom-big {
   margin-bottom: 8rem;
 }
+.u-margin-bottom-medium {
+  margin-bottom: 4rem;
+}
+.u-margin-bottom-small {
+  margin-bottom: 1.5rem;
+}

src/sass/components/button.scss

@@ -8,7 +8,7 @@
     border-radius: 10rem;
     transition: all 0.2s;
     position: relative;
-    font-size: 1.6rem;
+    font-size: $default-font-size;
   }
 
   &:hover {
@@ -52,3 +52,27 @@
   animation: moveInBottom 0.5s ease-out 0.75s;
   animation-fill-mode: backwards;
 }
+
+.btn-text {
+  font-size: $default-font-size;
+  color: $color-primary;
+  display: inline-block;
+  border: none;
+  cursor: pointer;
+  border-bottom: 1px solid $color-primary;
+  padding: 0.3rem;
+  background-color: $color-grey-light-1;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: $color-primary;
+    color: $color-white;
+    box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
+    transform: translateY(-0.2rem);
+  }
+
+  &:active {
+    box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
+    transform: translateY(0);
+  }
+}