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>
   );