created radio components and finished booking section

src/commons/about-section/about.jsx

@@ -1,4 +1,3 @@
-import ButtonSecondary from "../../components/button/button-secondary";
 import nat1Large from "../../commons/images/nat-1-large.jpg";
 import nat2Large from "../../commons/images/nat-2-large.jpg";
 import nat3Large from "../../commons/images/nat-3-large.jpg";
@@ -31,8 +30,9 @@ function About() {
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
               perferendis esse minima provident neque
             </p>
-
-            <ButtonSecondary text={"Learn More ➯"} />
+            <a href="#" className="btn-text">
+              Learn More ➯
+            </a>
           </div>
           <div className="col-1-of-2">
             <div className="composition">

src/commons/booking-section/booking.jsx

@@ -1,4 +1,4 @@
-import Form from "../../components/form/form";
+import Form from "../form/form";
 
 function Booking() {
   return (

src/commons/form/form.jsx

@@ -0,0 +1,65 @@
+function Form() {
+  return (
+    <form action="#" className="form">
+      <div className="form__group">
+        <input
+          type="text"
+          className="form__input"
+          placeholder="Full Name"
+          id="name"
+          required
+        />
+        <label htmlFor="name" className="form__label">
+          Full name
+        </label>
+      </div>
+
+      <div className="form__group">
+        <input
+          type="email"
+          className="form__input"
+          placeholder="Email adress"
+          id="email"
+          required
+        />
+        <label htmlFor="email" className="form__label">
+          Email adress
+        </label>
+      </div>
+
+      <div className="form__group u-margin-bottom-medium">
+        <div className="form__radio-group">
+          <input
+            type="radio"
+            className="form__radio-input"
+            id="small"
+            name="size"
+          />
+          <label htmlFor="small" className="form__radio-label">
+            <span className="form__radio-button"></span>
+            Small tour group
+          </label>
+        </div>
+
+        <div className="form__radio-group">
+          <input
+            type="radio"
+            className="form__radio-input"
+            id="large"
+            name="size"
+          />
+          <label htmlFor="large" className="form__radio-label">
+            <span className="form__radio-button"></span>
+            Large tour group
+          </label>
+        </div>
+      </div>
+
+      <div className="form__group">
+        <button className="btn btn--green">Next step ➯</button>
+      </div>
+    </form>
+  );
+}
+
+export default Form;

src/commons/header/header.jsx

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

src/commons/stories-section/stories.jsx

@@ -1,4 +1,3 @@
-import ButtonSecondary from "../../components/button/button-secondary";
 import nat8 from "../images/nat-8.jpg";
 import nat9 from "../images/nat-9.jpg";
 import bgmp4 from "../images/video.mp4";
@@ -58,7 +57,9 @@ function Stories() {
       </div>
 
       <div className="u-center-text u-margin-top-huge">
-        <ButtonSecondary text={"Read all stories ➯"} />
+        <a href="#" className="btn-text">
+          Read all stories ➯
+        </a>
       </div>
     </section>
   );

src/commons/tours-section/tours.jsx

@@ -1,5 +1,3 @@
-import ButtonMain from "../../components/button/button-main";
-
 function Tours() {
   return (
     <section className="section-tours">
@@ -33,7 +31,9 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$297</p>
                 </div>
-                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+                <a href="#" className="btn btn--white">
+                  Book now!
+                </a>
               </div>
             </div>
           </div>
@@ -63,7 +63,9 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$497</p>
                 </div>
-                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+                <a href="#" className="btn btn--white">
+                  Book now!
+                </a>
               </div>
             </div>
           </div>
@@ -93,7 +95,9 @@ function Tours() {
                   <p className="card__price-only">Only</p>
                   <p className="card__price-value">$897</p>
                 </div>
-                <ButtonMain feature={"btn btn--white"} text={"Book now!"} />
+                <a href="#" className="btn btn--white">
+                  Book now!
+                </a>
               </div>
             </div>
           </div>
@@ -101,7 +105,9 @@ function Tours() {
       </div>
 
       <div className="u-center-text u-margin-top-huge">
-        <ButtonMain feature={"btn btn--green"} text={"Discover all tours"} />
+        <a href="#" className="btn btn--white">
+          Discover all tours!
+        </a>
       </div>
     </section>
   );

src/components/button/button-main.jsx

@@ -1,10 +0,0 @@
-function ButtonMain(props) {
-  const { text, link, feature } = props;
-  return (
-    <a href="#" className={feature}>
-      {text}
-    </a>
-  );
-}
-
-export default ButtonMain;

src/components/button/button-secondary.jsx

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

src/components/form/form.jsx

@@ -1,33 +0,0 @@
-function Form() {
-  return (
-    <form action="#" className="form">
-      <div className="form__group">
-        <input
-          type="text"
-          className="form__input"
-          placeholder="Full Name"
-          id="name"
-          required
-        />
-        <label htmlFor="name" className="form__label">
-          Full name
-        </label>
-      </div>
-
-      <div className="form__group">
-        <input
-          type="email"
-          className="form__input"
-          placeholder="Email adress"
-          id="email"
-          required
-        />
-        <label htmlFor="email" className="form__label">
-          Email adress
-        </label>
-      </div>
-    </form>
-  );
-}
-
-export default Form;

src/sass/abstracts/_variables.scss

@@ -34,4 +34,5 @@ $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
 $border-radius-small: 0.2rem;
 $border-radius-default: 0.3rem;
 $bottom-border-green: 3px solid $color-primary;
+$bottom-border-green-thick: 5px solid $color-primary;
 $bottom-border-orange: 3px solid $color-secondary-dark;

src/sass/base/_utilities.scss

@@ -1,21 +1,21 @@
 .u-center-text {
-  text-align: center;
+  text-align: center !important;
 }
 
 .u-margin-bottom-big {
-  margin-bottom: 8rem;
+  margin-bottom: 8rem !important;
 }
 .u-margin-bottom-medium {
-  margin-bottom: 4rem;
+  margin-bottom: 4rem !important;
 }
 .u-margin-bottom-small {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.5rem !important;
 }
 
 .u-margin-top-big {
-  margin-top: 8rem;
+  margin-top: 8rem !important;
 }
 
 .u-margin-top-huge {
-  margin-top: 10rem;
+  margin-top: 10rem !important;
 }

src/sass/components/_button.scss

@@ -1,4 +1,5 @@
 .btn {
+  &,
   &:link,
   &:visited {
     text-transform: uppercase;
@@ -9,6 +10,9 @@
     transition: all 0.2s;
     position: relative;
     font-size: $default-font-size;
+
+    border: none;
+    cursor: pointer;
   }
 
   &:hover {
@@ -67,6 +71,7 @@
   display: inline-block;
   border: none;
   cursor: pointer;
+  text-decoration: none;
   border-bottom: 1px solid $color-primary;
   padding: 0.3rem;
   transition: all 0.2s;
@@ -79,7 +84,9 @@
     transform: translateY(-0.2rem);
   }
 
-  &:active {
+  &:active,
+  &:focus {
+    outline: none;
     box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
     transform: translateY(0);
   }

src/sass/components/_form.scss

@@ -14,6 +14,7 @@
     border-bottom: 3px solid transparent;
     width: 90%;
     display: block;
+    transition: all 0.3s;
 
     &:focus {
       outline: none;
@@ -44,4 +45,50 @@
     visibility: hidden;
     transform: translateY(-4rem);
   }
+
+  &__radio-group {
+    width: 50%;
+    display: inline-block;
+  }
+
+  &__radio-input {
+    display: none;
+  }
+
+  &__radio-label {
+    font-size: $default-font-size;
+    cursor: pointer;
+    position: relative;
+    padding-left: 3.4rem;
+  }
+
+  &__radio-button {
+    height: 3rem;
+    width: 3rem;
+    border: $bottom-border-green-thick;
+    border-radius: 50%;
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    top: -0.5rem;
+
+    &::after {
+      content: "";
+      display: block;
+      height: 1.4rem;
+      width: 1.4rem;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: $color-primary;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+  }
+
+  &__radio-input:checked ~ &__radio-label &__radio-button::after {
+    opacity: 1;
+  }
 }