UPD: gitignore

.gitignore

@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.history/

src/App.js

@@ -1,6 +1,8 @@
+import React from 'react';
 import './App.css';
-import Nav from './components/Nav';
-import Footer from './components/Footer';
+import { Nav } from './components/header';
+import { Footer } from './components/footer';
+import { PayPal, Purchase, ShowCase } from './components/mainPage';
 
 function App() {
   return (
@@ -9,6 +11,9 @@ function App() {
         <Nav />
         
         {/* Not sure what to put for body content yet */}
+        <ShowCase />
+        <Purchase />
+        <PayPal />
         
       </div>
       <Footer />

src/assets/index.js

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

src/components/footer/index.js

@@ -0,0 +1,2 @@
+
+export {default as Footer} from './Footer';

src/components/header/Nav.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Navbar, Container } from 'react-bootstrap';
 
 const Nav = () => {

src/components/header/index.js

@@ -0,0 +1 @@
+export {default as Nav} from './Nav';

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

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;

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;

src/components/mainPage/showCase.css

@@ -0,0 +1,4 @@
+.photo {
+    height: auto;
+    width: 200px;
+  }

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;