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