changed classnames according to BEM structure

src/commons/header/header.css

@@ -12,7 +12,7 @@
   position: relative;
 }
 
-.text-box {
+.header__text-box {
   position: absolute;
   top: 40%;
   left: 50%;
@@ -20,13 +20,13 @@
   text-align: center;
 }
 
-.logo-box {
+.header__logo-box {
   position: absolute;
   top: 4rem;
   left: 4rem;
 }
 
-.logo {
+.header__logo {
   height: 3.5rem;
 }
 
@@ -38,7 +38,7 @@
   margin-bottom: 6rem;
 }
 
-.heading-primary-main {
+.heading-primary--main {
   display: block;
   font-size: 6rem;
   font-weight: 400;
@@ -47,7 +47,7 @@
   animation: moveInLeft 1s ease-out;
 }
 
-.heading-primary-sub {
+.heading-primary--sub {
   display: block;
   font-size: 2rem;
   font-weight: 700;

src/commons/header/header.js

@@ -5,15 +5,15 @@ import Button from "../../components/button/button";
 function Header() {
   return (
     <header className="header">
-      <div className="logo-box">
-        <img src={logoWhite} alt="Logo" className="logo"></img>
+      <div className="header__logo-box">
+        <img src={logoWhite} alt="Logo" className="header__logo"></img>
       </div>
-      <div className="text-box">
+      <div className="header__text-box">
         <h1 className="heading-primary">
-          <span className="heading-primary-main">Outdoors</span>
-          <span className="heading-primary-sub">is where life happens</span>
+          <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"} />
+        <Button animationName={"move-in--bottom"} text={"Discover our tours"} />
       </div>
     </header>
   );