From 99b37dbd23dbb3490b76f2d0862e1d60e7c8de08 Mon Sep 17 00:00:00 2001
From: "John Huang@tthqws02" <jHuang.tthqws02@tekitech.com>
Date: Tue, 9 Nov 2021 08:11:57 -0500
Subject: [PATCH] ADD: main body page

---
 src/components/mainPage/index.js     |  3 +++
 src/components/mainPage/paypal.jsx   | 13 ++++++++++
 src/components/mainPage/purchase.jsx | 18 +++++++++++++
 src/components/mainPage/showCase.css |  4 +++
 src/components/mainPage/showCase.jsx | 39 ++++++++++++++++++++++++++++
 5 files changed, 77 insertions(+)
 create mode 100644 src/components/mainPage/index.js
 create mode 100644 src/components/mainPage/paypal.jsx
 create mode 100644 src/components/mainPage/purchase.jsx
 create mode 100644 src/components/mainPage/showCase.css
 create mode 100644 src/components/mainPage/showCase.jsx

diff --git a/src/components/mainPage/index.js b/src/components/mainPage/index.js
new file mode 100644
index 0000000..9bdcc61
--- /dev/null
+++ b/src/components/mainPage/index.js
@@ -0,0 +1,3 @@
+export {default as PayPal} from './paypal';
+export {default as Purchase} from './purchase';
+export {default as ShowCase} from './showCase';
\ No newline at end of file
diff --git a/src/components/mainPage/paypal.jsx b/src/components/mainPage/paypal.jsx
new file mode 100644
index 0000000..5ccbdc0
--- /dev/null
+++ b/src/components/mainPage/paypal.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+const PayPal = () => {
+  return (
+    <>
+      <div className="container">
+        <button className="bg-primary"> Pay with PayPal</button>
+      </div>
+    </>
+  );
+};
+
+export default PayPal;
diff --git a/src/components/mainPage/purchase.jsx b/src/components/mainPage/purchase.jsx
new file mode 100644
index 0000000..9c9294d
--- /dev/null
+++ b/src/components/mainPage/purchase.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+const Purchase = () => {
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="col-3">
+          <span className="text-danger">
+            30 days Risk free return with 100% refund if not satisfied. Free return shipping
+            included.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Purchase;
diff --git a/src/components/mainPage/showCase.css b/src/components/mainPage/showCase.css
new file mode 100644
index 0000000..5ee37ae
--- /dev/null
+++ b/src/components/mainPage/showCase.css
@@ -0,0 +1,4 @@
+.photo {
+    height: auto;
+    width: 200px;
+  }
\ No newline at end of file
diff --git a/src/components/mainPage/showCase.jsx b/src/components/mainPage/showCase.jsx
new file mode 100644
index 0000000..b4a0115
--- /dev/null
+++ b/src/components/mainPage/showCase.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import "./showCase.css";
+import { plc, w2c } from "../../assets";
+
+const ShowCase = () => {
+  return (
+    <div className="container border">
+      <div className="row">
+        <div className="col-2">
+          <figure className="figure border">
+            <img
+              className="photo figure-img img-fluid rounded"
+              src={plc}
+              alt="product plc"
+            />
+            <figcaption className="figure-caption">
+              B1-14MR2................................
+            </figcaption>
+          </figure>
+        </div>
+        <div className="col-2" >
+          <figure className="figure border">
+            <img
+              className="photo figure-img img-fluid rounded"
+              src={w2c}
+              alt="product w2c"
+            />
+            <figcaption className="figure-caption">
+              W2C ...................
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+
+export default ShowCase;