created booking section and form component

src/App.js

@@ -1,5 +1,6 @@
 import "./App.scss";
 import About from "./commons/about-section/about";
+import Booking from "./commons/booking-section/booking";
 import Feature from "./commons/feature-section/feature";
 import Header from "./commons/header/header.jsx";
 import Stories from "./commons/stories-section/stories";
@@ -13,6 +14,7 @@ function App() {
       <Feature />
       <Tours />
       <Stories />
+      <Booking />
     </div>
   );
 }

src/commons/booking-section/booking.jsx

@@ -0,0 +1,20 @@
+import Form from "../../components/form/form";
+
+function Booking() {
+  return (
+    <section className="section-book">
+      <div className="row">
+        <div className="book">
+          <div className="book__form">
+            <div className="u-margin-bottom-medium">
+              <h2 className="heading-secondary">Start booking now</h2>
+            </div>
+            <Form />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Booking;

src/components/form/form.jsx

@@ -0,0 +1,33 @@
+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

@@ -28,3 +28,5 @@ $gutter-horizontal: 6rem;
 
 $shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
 $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
+
+$border-radius-default: 0.3rem;

src/sass/pages/_home.scss

@@ -29,6 +29,34 @@
 }
 
 .section-stories {
-  padding: 15rem;
+  padding: 15rem 0;
   position: relative;
 }
+
+.section-book {
+  padding: 15rem 0;
+  background-image: linear-gradient(
+    to right bottom,
+    $color-primary-light,
+    $color-primary-dark
+  );
+}
+
+.book {
+  background-image: linear-gradient(
+      105deg,
+      rgba($color-white, 0.9) 50%,
+      transparent 50%
+    ),
+    url(../../commons/images/nat-10.jpg);
+  background-size: cover;
+  border-radius: $border-radius-default;
+  box-shadow: $shadow-default;
+
+  height: 50rem;
+
+  &__form {
+    width: 50%;
+    padding: 6rem;
+  }
+}