ADD: home page added

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/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 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;