Updated a

src/agent-page/AgentPage.js

@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import Agents from './Agents'
+import './agent-page.css';
+import Carousel from 'react-bootstrap/Carousel'
+import Agent1 from "../images/Agent1.jpg";
+import Agent2 from "../images/Agent2.jpg";
+import Agent3 from "../images/Agent3.jpg";
+import Agent4 from "../images/Agent4.jpg";
+import Agent5 from "../images/Agent5.jpg";
+import Agent6 from "../images/Agent6.jpg";
+ class AgentPage extends Component {
+   state={
+     agents: [
+     
+      {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1},
+       {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2},
+       {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3},
+       {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4},
+       {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5},
+       {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6},
+
+  
+     ]
+    }  
+    render(){
+      return(
+          <div className="container">
+              <div className="center  blue-text text-darken-4">
+                  <h1>Meet the team</h1>
+              </div>
+            
+              <Agents agents={this.state.agents} />
+          </div>
+      )
+  }
+  displayAgents= (agent) => {
+    console.log(agent);
+  }
+
+}
+export default AgentPage

src/agent-page/Agents.js

@@ -0,0 +1,40 @@
+import React from "react";
+import AgentPage from "./AgentPage";
+/* import {Link} from 'react-router-dom' */
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+
+const Agents = ({ agents }) => {
+  const agentlist = agents.map((agent) => {
+    return (
+      <div className="agent" key={agent.id}>
+        {}
+            <Card style={{ width: "18rem" }}>
+              <Card.Img variant="top" src={agent.src} />
+              <Card.Body>
+                <Card.Title>{agent.title}</Card.Title>
+                <Card.Text>{agent.name}</Card.Text>
+                <Card.Text>
+                  {agent.word}
+                </Card.Text>
+                <Button variant="primary">VIEW</Button>
+              </Card.Body>
+            </Card>
+      </div>
+    );
+  });
+  console.log(agentlist);
+  return (
+    <div className="agent-list">
+      <div className="row">
+        <div className="col m4">{agentlist[0]}</div>
+        <div className="col m4">{agentlist[1]}</div>
+        <div className="col m4">{agentlist[2]}</div>
+        <div className="col m4">{agentlist[3]}</div>
+        <div className="col m4">{agentlist[4]}</div>
+        <div className="col m4">{agentlist[5]}</div>
+      </div>
+    </div>
+  );
+};
+export default Agents;

src/agent-page/agent-page.css

@@ -10,3 +10,10 @@
       background-position-y: -150px;
     }
   }
+  .center{
+    height: 25vh; /* Magic here */
+    background-color: yellow;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }