From 29cf4280dfcf1b320771cbd67660fae180772969 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Mon, 3 May 2021 14:08:22 +0300
Subject: [PATCH] created booking section and form component

---
 src/App.js                              |  2 ++
 src/commons/booking-section/booking.jsx | 20 +++++++++++++++
 src/components/form/form.jsx            | 33 +++++++++++++++++++++++++
 src/sass/abstracts/_variables.scss      |  2 ++
 src/sass/pages/_home.scss               | 30 +++++++++++++++++++++-
 5 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/commons/booking-section/booking.jsx
 create mode 100644 src/components/form/form.jsx

diff --git a/src/App.js b/src/App.js
index 06ef012..14ab71d 100644
--- a/src/App.js
+++ b/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>
   );
 }
diff --git a/src/commons/booking-section/booking.jsx b/src/commons/booking-section/booking.jsx
new file mode 100644
index 0000000..0d3b821
--- /dev/null
+++ b/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;
diff --git a/src/components/form/form.jsx b/src/components/form/form.jsx
new file mode 100644
index 0000000..2b68755
--- /dev/null
+++ b/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;
diff --git a/src/sass/abstracts/_variables.scss b/src/sass/abstracts/_variables.scss
index c5d3d1b..391f2f1 100644
--- a/src/sass/abstracts/_variables.scss
+++ b/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;
diff --git a/src/sass/pages/_home.scss b/src/sass/pages/_home.scss
index c513a63..d8328d5 100644
--- a/src/sass/pages/_home.scss
+++ b/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;
+  }
+}