implementing routes and UI design

src/app/App.js

@@ -1,11 +1,24 @@
-import UploadCertificate from "../containers/UploadCertificate";
 import "./App.css";
 import React from "react";
+import NavBar from "../components/NavBar";
+import { Routes, Route } from "react-router-dom";
+import TransferCertificate from "../containers/TransferCertificate";
+import CollectionCertificate from "../containers/CollectionCertificate";
+import ProfilePage from "../containers/ProfilePage";
 
 function App() {
   return (
     <>
-      <UploadCertificate />
+    <NavBar />
+    <Routes>
+      <Route path="/" element={<CollectionCertificate />}/>
+      <Route path="/transfer" element={<TransferCertificate />}/>
+      <Route path="/certificates" element={<CollectionCertificate />}/>
+      <Route path="/profile" element={<ProfilePage />}/>
+
+    </Routes>
+
+
     </>
   );
 }

src/components/NavBar/index.css

@@ -8,27 +8,33 @@ body {
   margin-top: 0px;
   margin-right: 10px;
   font-size: 20px;
+  color: white;
+
+}
+
+.divider{
+	margin-top: 13vh;
 }
 
 nav {
 	position: fixed;
-	z-index: 10;
+	z-index: 4;
 	left: 0;
 	right: 0;
 	top: 0;
-  padding: 10px;
+	color: #ffff;
 	background-color: #1C3843;
 }
 nav .logo {
 	float: left;
 	width: 40%;
-	height: 100%;
 	display: flex;
-  padding: 10px;
+  	padding: 10px;
+	margin-top: 10px;
 	align-items: center;
 	font-size: 24px;
 	color: #fff;
-  gap: 10px;
+  	gap: 10px;
 }
 
 nav .logo img{
@@ -41,11 +47,11 @@ nav .links {
 	width: 60%;
 	height: 100%;
 	display: flex;
-	justify-content: end;
 	align-items: center;
 }
 nav .links li {
 	list-style: none;
+	width: 100%;
 }
 nav .links a {
 	display: block;
@@ -54,8 +60,9 @@ nav .links a {
 	font-weight: bold;
 	color: #fff;
 	text-decoration: none;
-  border-radius: 50px;
-  margin-left: 20px;
+  	border-radius: 50px;
+  	margin-left: 20px;
+	text-align: center;;
 
 }
 nav .links li a:hover{
@@ -96,6 +103,7 @@ nav .icon-burger {
 	right: 5%;
 	top: 50%;
 	transform: translateY(-50%);
+	cursor: pointer;
 }
 nav .icon-burger .line {
 	width: 30px;

src/components/NavBar/index.js

@@ -1,5 +1,6 @@
 import React, { } from "react";
 import "./index.css";
+import { Link } from "react-router-dom";
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { BiTransfer } from "react-icons/bi";
 import { FaCertificate } from "react-icons/fa";
@@ -15,10 +16,10 @@ const NavBar = () => {
                     Certinize
                 </div>
                 <ul className="links">
-                    <li><a href="#home"><BiTransfer className="icon"/> Transfer</a></li>
-                    <li><a href="#about"><FaCertificate className="icon"/>Certificates</a></li>
-                    <li><a href="#work"><RiTeamFill className="icon"/>About Us</a></li>
-                    <img className="user-icon" src="./img/default_user.png" alt=""/>
+                    <li><Link to="/transfer"><BiTransfer className="icon"/> Transfer</Link></li>
+                    <li><Link to="/certificates"><FaCertificate className="icon"/>Certificates</Link></li>
+                    <li><Link to="/profile"><RiTeamFill className="icon"/>My Profile</Link></li>
+                    <Link><img className="user-icon" src="./img/default_user.png" alt=""/></Link>
                 </ul>
 
                 <label htmlFor="nav-toggle" className="icon-burger">
@@ -27,6 +28,7 @@ const NavBar = () => {
                     <div className="line"></div>
                 </label>
             </nav>
+            <section className="divider"/>
         </div>
 	);
 };