created footer element and changed structure of components

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

src/commons/about-section/about.jsx

@@ -4,7 +4,6 @@ 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">
@@ -55,7 +54,6 @@ function About() {
         </div>
       </div>
     </section>
-    </main>
   );
 }
 export default About;

src/commons/footer-section/footer.jsx

@@ -0,0 +1,5 @@
+function Footer() {
+  return <section className="section-footer"></section>;
+}
+
+export default Footer;

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;