UPD: page layout change

src/App.js

@@ -2,18 +2,14 @@ import React from 'react';
 import './App.css';
 import { Nav } from './components/header';
 import { Footer } from './components/footer';
-import { PayPal, Purchase, ShowCase } from './components/mainPage';
+import { Landding } from './components/mainPage';
 
 function App() {
   return (
     <div className="page-container">
       <div className="content-wrap">
         <Nav />
-        
+        <Landding />
-        <ShowCase />
-        <Purchase />
-        <PayPal />
-        
       </div>
       <Footer />
     </div>

src/components/footer/Footer.js

@@ -3,6 +3,7 @@ import "./Footer.css";
 
 const Footer = () => {
   return (
+    <div className="container">
       <div className="main-footer">
         <div className="container">
           <div className="row">
@@ -32,14 +33,13 @@ const Footer = () => {
             </div>
           </div>
           <hr />
-                <div className="row" >
+          <div className="row">
-                    <p className="col-sm">
+            <p className="col-sm">&copy; OEM Automation</p>
-                        &copy; OEM Automation
+          </div>
-                    </p>
         </div>
       </div>
     </div>
   );
-}
+};
 
 export default Footer;

src/components/header/Nav.js

@@ -3,6 +3,7 @@ import { Navbar, Container } from 'react-bootstrap';
 
 const Nav = () => {
     return (
+        <div className="container">
         <Navbar bg="dark" variant="dark">
             <Container>
                 <Navbar.Brand>
@@ -10,6 +11,7 @@ const Nav = () => {
                 </Navbar.Brand>
             </Container>
         </Navbar>
+        </div>
     );
 }
 

src/components/mainPage/showCase.jsx

@@ -4,7 +4,7 @@ import { plc, w2c } from "../../assets";
 
 const ShowCase = () => {
   return (
-    <div className="container border">
+    <div className="container">
       <div className="row">
         <div className="col-2">
           <figure className="figure border">