UPD: add more npm packages

package.json

@@ -3,11 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@mrmlnc/readdir-enhanced": "^2.2.1",
     "@paypal/react-paypal-js": "^7.4.2",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "bootstrap": "^5.1.3",
+    "chokidar": "^2.1.8",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",

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 />
-        
-        <ShowCase />
-        <Purchase />
-        <PayPal />
-        
+        <Landding />
       </div>
       <Footer />
     </div>

src/assets/index.js

@@ -1,3 +1,4 @@
 import plc  from "./images/B1-14MR2-D24.jpg";
 import w2c from "./images/W2C.jpg";
-export { plc, w2c }; 
+import banner from "./images/banner-plc.png"
+export { plc, w2c, banner }; 

src/components/footer/Footer.js

@@ -2,44 +2,44 @@ import React from "react";
 import "./Footer.css";
 
 const Footer = () => {
-    return (
-        <div className="main-footer">
-            <div className="container">
-                <div className="row">
-                    <div className="col">
-                        <h4>OEM Automation</h4>
-                        <ul className="list-unstyled">
-                            <li>(123)-456-7890</li>
-                            <li>Address</li>
-                            <li>New Jersey, US</li>
-                        </ul>
-                    </div>
-                    <div className="col">
-                        <h4>Placeholder</h4>
-                        <ul className="list-unstyled">
-                            <li>blah blah</li>
-                            <li>blah</li>
-                            <li>blahh</li>
-                        </ul>
-                    </div>
-                    <div className="col">
-                        <h4>Placeholder</h4>
-                        <ul className="list-unstyled">
-                            <li>blah blah</li>
-                            <li>blah</li>
-                            <li>blahh</li>
-                        </ul>
-                    </div>
-                </div>
-                <hr />
-                <div className="row" >
-                    <p className="col-sm">
-                        &copy; OEM Automation
-                    </p>
-                </div>
+  return (
+    <div className="container">
+      <div className="main-footer">
+        <div className="container">
+          <div className="row">
+            <div className="col">
+              <h4>OEM Automation</h4>
+              <ul className="list-unstyled">
+                <li>(123)-456-7890</li>
+                <li>Address</li>
+                <li>New Jersey, US</li>
+              </ul>
             </div>
+            <div className="col">
+              <h4>Placeholder</h4>
+              <ul className="list-unstyled">
+                <li>blah blah</li>
+                <li>blah</li>
+                <li>blahh</li>
+              </ul>
+            </div>
+            <div className="col">
+              <h4>Placeholder</h4>
+              <ul className="list-unstyled">
+                <li>blah blah</li>
+                <li>blah</li>
+                <li>blahh</li>
+              </ul>
+            </div>
+          </div>
+          <hr />
+          <div className="row">
+            <p className="col-sm">&copy; OEM Automation</p>
+          </div>
         </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/home.css

@@ -0,0 +1,154 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.container {
+  padding: 0;
+}
+
+.row {
+  margin: 0;
+}
+
+.home {
+  max-width: 1200px;
+}
+
+.banner {
+  width: 100%;
+  background-color: #000;
+  height: 680px;
+}
+
+.banner-image,
+.banner-box {
+  height: 680px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.banner-image img {
+  vertical-align: middle;
+}
+
+.main-title {
+  font-size: 4.5rem;
+  color: #fff;
+  font-weight: 400;
+}
+
+.second-title {
+  font-size: 2.5rem;
+  color: #dadada;
+  font-weight: 400;
+}
+
+.banner-doc {
+  padding: 2rem;
+}
+
+.price {
+  font-size: 2.5rem;
+  color: #b3b3b3;
+  margin-top: 2rem;
+}
+
+.original-price {
+  color: #414141;
+  font-size: 1.6rem;
+  text-decoration: line-through;
+  text-decoration-color: #920610;
+}
+
+.btn-red {
+  background-color: #f60515;
+  border: none;
+  font-size: 2rem;
+  color: #fff !important;
+  padding: 1rem 4rem;
+}
+
+.btn-red:hover {
+  background-color: #cc010e;
+}
+
+.buy-btn {
+  margin-top: 1rem;
+}
+
+@media screen and (max-width: 1199px) {
+  .banner,
+  .banner-image,
+  .banner-box {
+      height: 600px;
+  }
+  .main-title {
+      font-size: 2.5rem;
+  }
+  .second-title {
+      font-size: 1.5rem;
+  }
+  .price {
+      font-size: 2rem;
+  }
+  .btn-red {
+      font-size: 1.5rem;
+      padding: .5rem 2rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .banner {
+      height: 900px;
+  }
+  .banner-doc {
+      padding: 1rem 2rem;
+  }
+  .banner-image,
+  .banner-box {
+      margin-top: 1rem;
+      height: auto;
+      justify-content: flex-start;
+  }
+  .banner-image {
+      margin-top: 0;
+  }
+  .price {
+      margin-top: 1rem;
+  }
+  .main-title {
+      font-size: 2rem;
+  }
+  .second-title {
+      font-size: 1rem;
+  }
+  .price {
+      font-size: 1.5rem;
+  }
+  .original-price {
+      font-size: 1rem;
+  }
+  .btn-red {
+      font-size: 1rem;
+      padding: .5rem 2rem;
+  }
+  .banner-image {
+      padding: 0 6rem;
+  }
+}
+
+@media (max-width: 575px) {
+  .banner-image {
+      margin-top: 3rem;
+      padding: 0 2rem;
+  }
+}
+
+@media (max-width: 420px) {
+  .banner-image {
+      padding: 0;
+  }
+}

src/components/mainPage/home.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./home.css";
+import { banner } from "../../assets";
+
+
+const Home = ({goNext}) => {
+  return (
+    <div className="container">
+      <div className="banner">
+        <div className="row">
+          <div className="col-lg-5 col-md-6 col-12 p-0 order-md-1 order-2">
+            <div className="banner-image">
+              <img src={banner} alt="b1 plc" width="100%" />
+            </div>
+          </div>
+          <div className="col-lg-7 col-md-6 col-12 p-0 order-md-2 order-1">
+            <div className="banner-box">
+              <div className="banner-doc">
+                <h2 className="main-title">Fatek B1-14M PLC Flash Sale</h2>
+                <p className="second-title mb-1">Limited Quantity</p>
+                <p className="second-title">800 units only</p>
+                <div className="price">
+                  <span className="current-price">$89.99</span>
+                  <span> </span>
+                  <span className="original-price ml-1">$129.99</span>
+                </div>
+                <div className="buy-btn">
+                  <button className="btn btn-danger" onClick={goNext} >Buy now</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

src/components/mainPage/index.js

@@ -1,3 +1,5 @@
 export {default as PayPal} from './paypal';
 export {default as Purchase} from './purchase';
 export {default as ShowCase} from './showCase';
+export {default as Home} from './home'; 
+export {default as Landding} from './landing';

src/components/mainPage/landing.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import "./home.css";
+import { PayPal, Purchase, ShowCase, Home } from '.';
+
+const details = () => {
+  return (
+    <>
+      <ShowCase />
+      <Purchase />
+      <PayPal />
+    </>
+  );
+};
+const Landing = () => {
+  const [showDetails, setShowDetails] = useState(false);
+
+  return (
+    <>
+      {showDetails ? details() : <Home goNext={() => setShowDetails(true)} />}
+    </>
+  );
+};
+
+export default Landing;

src/components/mainPage/paypal.jsx

@@ -1,21 +1,23 @@
-import React, { useState } from "react";
+import React from "react";
 import { PayPalScriptProvider, PayPalButtons, FUNDING } from "@paypal/react-paypal-js";
 
 const initialOptions = {
-  "client-id": "AfXKJOXmvSNSIIAxR_Vx6sTcmkrKRcVBug-cz2FV7KXEwVGzpISqfdwQHdmfR1pdvQ9Wml75fnoq1MYH",
+  "client-id": "AQBhJiIcG8lS4K5UoTo_-G5it85lbFpxEcA-WWBb1A-_Nq6YfKUdn05oyg-SgpxzXTyjfpdMceWskq7G",
   currency: "USD",
   intent: "capture"
 }
-
+// buyer account: dev01.oemautomation.com, pwd: 3Deerhead
+// merchant account: biz01.oemautomation.com, pwd 3Deerhead
 
 const PayPal = () => {
 
   const createOrder = (data, actions) => {
     return actions.order.create({
       purchase_units: [{
+        description: "Fatek B1-14MR2 PLC",
         amount: {
           currency_code: "USD",
-          value: 55,
+          value: 89.99,
         }
       }]
     });
@@ -23,6 +25,7 @@ const PayPal = () => {
   
   const onApprove = (data, actions) => {
     return actions.order.capture().then(function(details) {
+      console.dir(details);
       alert('Transaction completed by ' + details.payer.name.given_name);
     });
   }

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">