From b396a9b6e9d4673b4305ce139d54355291bd5173 Mon Sep 17 00:00:00 2001
From: Yusuf Ipek <yusufipek@protonmail.com>
Date: Tue, 4 May 2021 11:25:02 +0300
Subject: [PATCH] created footer element and changed structure of components

---
 src/App.js                            | 15 ++---
 src/commons/about-section/about.jsx   | 96 +++++++++++++--------------
 src/commons/footer-section/footer.jsx |  5 ++
 src/commons/main/main.jsx             | 19 ++++++
 4 files changed, 76 insertions(+), 59 deletions(-)
 create mode 100644 src/commons/footer-section/footer.jsx
 create mode 100644 src/commons/main/main.jsx

diff --git a/src/App.js b/src/App.js
index 14ab71d..29c2054 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,20 +1,15 @@
 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";
-import Tours from "./commons/tours-section/tours";
+import Main from "./commons/main/main";
+import Footer from "./commons/footer-section/footer";
 
 function App() {
   return (
     <div>
       <Header />
-      <About />
-      <Feature />
-      <Tours />
-      <Stories />
-      <Booking />
+      <Main />
+      <Footer />
     </div>
   );
 }
diff --git a/src/commons/about-section/about.jsx b/src/commons/about-section/about.jsx
index 3dfdb12..fc07ea0 100644
--- a/src/commons/about-section/about.jsx
+++ b/src/commons/about-section/about.jsx
@@ -4,58 +4,56 @@ import nat3Large from "../../commons/images/nat-3-large.jpg";
 
 function About() {
   return (
-    <main>
-      <section className="section-about">
-        <div className="u-center-text u-margin-bottom-big">
-          <h2 className="heading-secondary">
-            Exciting tours for adventurous people
-          </h2>
-        </div>
+    <section className="section-about">
+      <div className="u-center-text u-margin-bottom-big">
+        <h2 className="heading-secondary">
+          Exciting tours for adventurous people
+        </h2>
+      </div>
 
-        <div className="row">
-          <div className="col-1-of-2">
-            <h3 className="heading-tertiary u-margin-bottom-small">
-              You are going to fall in love with nature
-            </h3>
-            <p className="paragraph">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
-              perferendis esse minima provident neque, non necessitatibus
-              architecto tempora, molestias omnis nesciunt numquam reprehenderit
-              distinctio id! Fuga quibusdam harum dolores minus?
-            </p>
-            <h3 className="heading-tertiary u-margin-bottom-small">
-              Live adventures like you never have before
-            </h3>
-            <p className="paragraph">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
-              perferendis esse minima provident neque
-            </p>
-            <a href="#" className="btn-text">
-              Learn More ➯
-            </a>
-          </div>
-          <div className="col-1-of-2">
-            <div className="composition">
-              <img
-                src={nat1Large}
-                alt="Nature 1"
-                className="composition__photo composition__photo--p1"
-              />
-              <img
-                src={nat2Large}
-                alt="Nature 2"
-                className="composition__photo composition__photo--p2"
-              />
-              <img
-                src={nat3Large}
-                alt="Nature 3"
-                className="composition__photo composition__photo--p3"
-              />
-            </div>
+      <div className="row">
+        <div className="col-1-of-2">
+          <h3 className="heading-tertiary u-margin-bottom-small">
+            You are going to fall in love with nature
+          </h3>
+          <p className="paragraph">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+            perferendis esse minima provident neque, non necessitatibus
+            architecto tempora, molestias omnis nesciunt numquam reprehenderit
+            distinctio id! Fuga quibusdam harum dolores minus?
+          </p>
+          <h3 className="heading-tertiary u-margin-bottom-small">
+            Live adventures like you never have before
+          </h3>
+          <p className="paragraph">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+            perferendis esse minima provident neque
+          </p>
+          <a href="#" className="btn-text">
+            Learn More ➯
+          </a>
+        </div>
+        <div className="col-1-of-2">
+          <div className="composition">
+            <img
+              src={nat1Large}
+              alt="Nature 1"
+              className="composition__photo composition__photo--p1"
+            />
+            <img
+              src={nat2Large}
+              alt="Nature 2"
+              className="composition__photo composition__photo--p2"
+            />
+            <img
+              src={nat3Large}
+              alt="Nature 3"
+              className="composition__photo composition__photo--p3"
+            />
           </div>
         </div>
-      </section>
-    </main>
+      </div>
+    </section>
   );
 }
 export default About;
diff --git a/src/commons/footer-section/footer.jsx b/src/commons/footer-section/footer.jsx
new file mode 100644
index 0000000..852ccc9
--- /dev/null
+++ b/src/commons/footer-section/footer.jsx
@@ -0,0 +1,5 @@
+function Footer() {
+  return <section className="section-footer"></section>;
+}
+
+export default Footer;
diff --git a/src/commons/main/main.jsx b/src/commons/main/main.jsx
new file mode 100644
index 0000000..0475be8
--- /dev/null
+++ b/src/commons/main/main.jsx
@@ -0,0 +1,19 @@
+import About from "../about-section/about";
+import Booking from "../booking-section/booking";
+import Feature from "../feature-section/feature";
+import Stories from "../stories-section/stories";
+import Tours from "../tours-section/tours";
+
+function Main() {
+  return (
+    <main>
+      <About />
+      <Feature />
+      <Tours />
+      <Stories />
+      <Booking />
+    </main>
+  );
+}
+
+export default Main;