Profile 2

src/app.css

@@ -0,0 +1,5 @@
+.app{
+    background: #fffbfb;
+    margin: 0;
+    padding-top: 5%;
+}

src/app.js

@@ -1,4 +1,5 @@
 import React from "react";
+
 import {BrowserRouter as Router, Route} from 'react-router-dom';
 import PageWrapper from './component/PageWrapper';
 import HomePage from './component/Pages/HomePage';
@@ -33,6 +34,7 @@ const App = () => {
             />
            </PageWrapper>
        </Router>
+
     )
 }
 

src/components/accountdetails.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Accountd = () => {
+    return (
+    <div className='tabDiv2'>
+        <h3 className='tabText'>Account Details</h3>   
+    </div>
+    )
+}
+
+export default Accountd;

src/components/buyproducts.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Buyp = () => {
+    return (
+    <div className='tabDiv3'>
+        <h3 className='tabText'>Buy Products</h3>
+    </div>
+    )
+}
+
+export default Buyp;

src/components/card.css

@@ -0,0 +1,49 @@
+.imgDiv {
+
+    width: 100%;
+    height: 130px;
+}
+
+.con{
+    display: flex;
+justify-content: space-between;
+}
+.card{
+width: 60%;
+margin: 5%;
+background: ghostwhite;
+padding: 0 0 2%;
+margin-right: 2%;
+}
+
+.returnDiv2{
+    margin-left: 0%;
+    padding-left: 1%;
+}
+
+.durationDiv{
+    margin-left: 0%;
+    padding-left: 1%;
+}
+
+.logoDiv1{
+    display: flex;
+}
+
+.logoText1{
+    color: green;
+    font-style: italic;
+}
+
+.buttonName2{
+    background-color: #6FCF97;;
+    border-radius: 9px;
+    width: 74%;
+    height: 46px;
+    color: white;
+    margin-left: 9%;
+    font-family: "Droid Serif", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 162%;
+}

src/components/card.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import './card.css';
+const Card = (props) => {
+  return (
+    <div className='card'>
+      <div>
+        <img className="imgDiv" src={props.image} />
+      </div>
+      <div>
+        <h3>{props.header}</h3>
+      </div>
+
+      <div className='con'>
+        <div className="returnDiv2">
+          <h5>Return</h5>
+          <h5>12%</h5>
+        </div>
+
+        <div className="durationDiv">
+          <h5>Duration</h5>
+          <h5>6months</h5>
+        </div>
+
+        <div className="logoDiv1">
+          <h5 className="logoText1">Empower</h5>
+          <h5>farmers</h5>
+        </div>
+      </div>
+
+      <button className="buttonName2">Sponsor</button>
+    </div>
+  );
+};
+
+export default Card;

src/components/container.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Card from './card';
+import A from '../images/a.jpg';
+import B from '../images/b.jpg';
+
+const Container = () => {
+    return (
+    <div>
+        <h2>Sponsorshop</h2>
+        <div style={{display:'flex'}}>
+            <Card image={A} header={'Poultry'} />
+        <Card image={B} header={'Fresh Produce Trading'}/>
+        </div>
+
+    </div>
+    )
+}
+
+export default Container;

src/components/dashboard.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import C from "../images/c.png";
+
+const DashB = () => {
+    return (
+    <div className='tabDiv4'>
+        <div className='dashDiv1'>
+        <img className= "rec22Div" src={C}/>
+        <h3 className='tabText'>Dashboard</h3>
+        </div>   
+    </div>
+    )
+}
+
+export default DashB;

src/components/editProfile.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const EditP = () => {
+    return (
+    <div className='tabDiv'>
+        <h3 className='tabText'>Edit Profile</h3>
+    </div>
+    )
+}
+
+export default EditP;

src/components/navbar.css

@@ -0,0 +1,35 @@
+.navbarDiv {
+    display: flex;
+    justify-content: space-between;
+    background: #F2F2F2;
+    margin-top: -2%;
+}
+
+.logoDiv {
+    display: flex;
+
+} 
+
+.logoText {
+    color: green;
+    font-style: italic;
+}
+
+.textName {
+    display: flex;
+    justify-content: space-between;
+}
+
+.tabName {
+    margin-right: 130%;
+}
+.buttonName {
+background-color: green;
+border-radius: 8px;
+width: 9%;
+height: 37px;
+border: none;
+margin-top: 1%;
+color: white;
+margin-left: 11%;
+}

src/components/navbar.js

@@ -0,0 +1,28 @@
+import React from "react";
+import './navbar.css'
+const Navbar = () => {
+    return (
+    <div className='navbarDiv'>
+
+      <div className='logoDiv'>
+          <h4 className='logoText'>Empower</h4>
+          <h4>farmer</h4>
+       </div>  
+
+        <div className= 'textName'>
+        <h4 className= 'tabName'>Home</h4>
+
+        <h4>AboutUs</h4>
+        </div>
+
+
+        <button className= 'buttonName'>Donates
+        </button>
+
+
+
+    </div>
+    )
+}
+
+export default Navbar;

src/components/navbar2.css

@@ -0,0 +1,16 @@
+.narBar2cutDiv {
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    margin-left: 19%;
+}
+
+.returnDiv {
+    background: #F2F2F2;
+    margin-left: -23%;
+}
+
+.cycleDiv {
+    background-color: #F2F2F2;
+    margin-left: 12%;
+}

src/components/navbar2.js

@@ -0,0 +1,24 @@
+import React from "react";
+import './navbar2.css'
+const NavB2 = () => {
+    return (
+    <div className='narBar2cutDiv'>
+        <div className='emailDiv'>
+            <h3>Hello</h3>
+            <h3>samuel@gmail.com</h3>
+        </div>
+
+        <div className='returnDiv'>
+            <h3>Expected Return</h3>
+        </div>
+
+        <div className='cycleDiv'>
+            <h3>Cycle</h3>
+        </div>
+
+    </div>
+
+    )
+}
+
+export default NavB2;

src/components/sidebar.js

@@ -0,0 +1,24 @@
+import React from "react";
+import DashB from './dashboard';
+import EditP from './editProfile';
+import Sponsorshop from './sponsorshop';
+import Accountd from './accountdetails';
+import Buyp from './buyproducts';
+import '../sidebar.css';
+
+const Sidebar = () => {
+    return (
+    <div className='sidebarDiv' >
+        <DashB />
+        <EditP />
+        <Sponsorshop />
+        <Accountd />
+        <Buyp />
+
+
+
+    </div>
+    )
+}
+
+export default Sidebar;

src/components/sponsorshop.js

@@ -0,0 +1,11 @@
+import React from "react";
+import '../sidebar.css';
+const Sponsorshop = () => {
+    return (
+    <div className='tabDiv1'>
+        <h3 className='tabText'>Sponsorshop</h3>
+    </div>
+    )
+}
+
+export default Sponsorshop;