subBridge created and styled

Author: Jay-Topher

debug.log

@@ -0,0 +1 @@
+[1025/142900.327:WARNING:minidump_to_upload_parameters.cc(36)] duplicate key guid, discarding value e580bed1-34e2-41e2-8c81-7de2090ee2ea

package-lock.json

@@ -7,6 +7,7 @@
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-icons": "^3.7.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0"
   },
   "scripts": {

package.json

@@ -4,6 +4,7 @@ import Carousel from './Carousel/Carousel'
 import BridgeComponent from './Bridge/BridgeComponent'
 import Products from '../../Commons/Products/Products'
 import MidBanner from './MidBanner/MidBanner'
+import SubBridge from './SubBridge'
 
 
 
@@ -15,6 +16,7 @@ function Homepage() {
       <BridgeComponent />
       <Products />
       <MidBanner />
+      <SubBridge />
 
 
     </div>

src/Views/Homepage/Homepage.js

@@ -0,0 +1,7 @@
+.sub {
+    display: flex;
+    justify-content: space-between;
+    width: 113rem;
+    margin-top: 3rem;
+    flex-wrap: wrap;
+}

src/Views/Homepage/SubBridge/SubBridge.scss

@@ -0,0 +1,14 @@
+import React from "react";
+import "./SubBridgePosts.scss";
+
+export default function SubBridgePosts({ image, title, body }) {
+  return (
+    <div className="SubBridgePosts">
+      <div className="img">
+      <img src={require(`../../../assets/img/${image}`)} alt="avatar" />
+      </div>
+      <h3>{title}</h3>
+      <p>{body}</p>
+    </div>
+  );
+}

src/Views/Homepage/SubBridge/SubBridgePosts.jsx

@@ -0,0 +1,29 @@
+.SubBridgePosts {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    text-align: center;
+    width: 33rem;
+    height: 25.6rem;
+    padding: 3rem;
+
+    .img {
+        height: 45px;
+        width: auto;
+
+        img {
+            height: inherit;
+        }
+    }
+
+    p {
+        line-height: 1.7;
+        font-size: 1.2rem;
+    }
+
+    h3 {
+        font-size: 2rem;
+        font-weight: normal;
+    }
+    
+}

src/Views/Homepage/SubBridge/SubBridgePosts.scss

@@ -0,0 +1,21 @@
+import React from "react";
+import SubBridgePosts from "./SubBridgePosts";
+import { subBridge } from "../../../data/metadata.json";
+import './SubBridge.scss'
+
+export default function index() {
+  return (
+    <div className="SubBridge">
+      <div className="sub container">
+        {subBridge.map((value, index) => (
+          <SubBridgePosts
+            key={index}
+            image={value.image}
+            title={value.title}
+            body={value.body}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/Views/Homepage/SubBridge/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Store() {
+    return (
+        <div>
+            
+        </div>
+    )
+}

src/Views/Store/index.js

@@ -122,5 +122,23 @@
           "oldPrice": 344
         }
       ]
-  }
+  },
+
+  "subBridge": [
+    {
+      "image": "shipping.png",
+      "title": "FREE SHIPPING",
+      "body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor minim veniam, quis nostrud  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+    },
+    {
+      "image": "refund.png",
+      "title": "100% REFUND",
+      "body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor minim veniam, quis nostrud  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+    },
+    {
+      "image": "support.png",
+      "title": "SUPPORT 24/7",
+      "body" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor minim veniam, quis nostrud  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+    }
+  ]
 }

src/assets/img/refund.png

@@ -0,0 +1,19 @@
+import React from 'react'
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import Homepage from './Views/Homepage/Homepage';
+import Store from './Views/Store';
+import Header from './Commons/Header/Header'
+
+
+export default function AppRoutes() {
+
+    return (
+        <Router>
+            <Header />
+            <Route exact path="/" component={Homepage} />
+            <Route exact path="/store" component={Store} />
+
+        </Router>
+    );
+    
+}