Added some css and fixed some alignment.

src/agent-page/AgentPage.js

@@ -8,32 +8,36 @@ 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 {
+class AgentPage extends Component {
-   state={
+  state = {
-     agents: [
+    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},
 
-  
+      { 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 },
-    render(){
+      { 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 },
-      return(
+      { 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 },
-          <div className="container">
+      { 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 },
-              <div className="center  blue-text text-darken-4">
+
-                  <h1>Meet the team</h1>
+
-              </div>
+    ]
-            
-              <Agents agents={this.state.agents} />
-          </div>
-      )
   }
-  displayAgents= (agent) => {
+  render() {
+    return (
+      <div>
+        <div className="center  blue-text text-darken-4">
+          <h1 style={{ fontFamily: "Georgia"  }} >Meet the Team</h1>
+        </div>
+
+        <div className="container">
+          <Agents agents={this.state.agents} /> 
+        </div>
+
+
+      </div>
+    )
+  }
+  displayAgents = (agent) => {
     console.log(agent);
   }
 

src/agent-page/Agents.js

@@ -9,8 +9,8 @@ const Agents = ({ agents }) => {
     return (
       <div className="agent" key={agent.id}>
         {}
-            <Card style={{ width: "18rem" }}>
+            <Card style={{ width: "22rem", height: "40rem"  }}>
-              <Card.Img variant="top" src={agent.src} />
+              <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
               <Card.Body>
                 <Card.Title>{agent.title}</Card.Title>
                 <Card.Text>{agent.name}</Card.Text>

src/agent-page/agent-page.css

@@ -12,8 +12,12 @@
   }
   .center{
     height: 25vh; /* Magic here */
-    background-color: yellow;
+    background-color: #ffe609;
     display: flex;
     justify-content: center;
     align-items: center;
+  }
+
+  .agent{
+    padding-left: 16%;
   }

src/homePage/homePage.css

@@ -14,6 +14,13 @@
     font-family: "Georgia";
 }
 
+#features .container-fluid {
+    padding: 2% 48% 2%;
+    text-align: left;
+    font-family: "Georgia";
+}
+
+
 .housesIntro{
     padding: 4% 5%;
 }

src/listings-page/ListingsPage.js

@@ -1,16 +1,16 @@
 import React, { useState, useEffect, Component } from "react";
 import {
-  GoogleMap, 
+  GoogleMap,
-  withScriptjs, 
+  withScriptjs,
   withGoogleMap,
   Marker,
   InfoWindow
- } from "react-google-maps";
+} from "react-google-maps";
- import * as listingData from "./data/property-data.json";
+import * as listingData from "./data/property-data.json";
- import mapStyles from "./mapStyles";
+import mapStyles from "./mapStyles";
- import "./ListingsPage.css";
+import "./ListingsPage.css";
 
-function Map(){
+function Map() {
 
   const [selectedProperty, setSelectedProperty] = useState(null);
 
@@ -19,89 +19,89 @@ function Map(){
   return (
     <GoogleMap
       defaultZoom={10}
-      defaultCenter={{lat: 45.4231, lng:-75.6931}}
+      defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
       //https://snazzymaps.com/explore
-      defaultOptions={{styles: mapStyles}}
+      defaultOptions={{ styles: mapStyles }}
     >
 
-        {listingData.Properties.map(house => (
+      {listingData.Properties.map(house => (
 
-          <Marker
+        <Marker
-            key={house.LISTING_ID}
+          key={house.LISTING_ID}
-            position={{ 
+          position={{
-              lat: house.coordinates[1],
+            lat: house.coordinates[1],
-              lng: house.coordinates[0]
+            lng: house.coordinates[0]
-            
-            }}      
 
-            onClick={() => {
+          }}
-              setSelectedProperty(house)
-            }}      
 
-            icon={{
+          onClick={() => {
-              url:"homes-3.svg",
+            setSelectedProperty(house)
-              scaledSize: new window.google.maps.Size(50,50)
+          }}
-            }}
-            
 
-            
+          icon={{
-          />
+            url: "homes-3.svg",
-        
+            scaledSize: new window.google.maps.Size(50, 50)
-        
+          }}
-        
-        ))}
 
 
-        {selectedProperty && (
-          
-          <InfoWindow
-            position={{ 
-              lat: selectedProperty.coordinates[1],
-              lng: selectedProperty.coordinates[0]
-            
-            }} 
-            onCloseClick={() => {
-             setSelectedProperty(null);
-            }}
-          >
-            <div> 
-              <h2>{selectedProperty.ADDRESS}</h2>
-              <p> {selectedProperty.DESC}</p>
-              <div>
-                <div class="row">
 
-                  <div className="col-6">
+        />
+
+
+
+      ))}
+
+
+      {selectedProperty && (
+
+        <InfoWindow
+          position={{
+            lat: selectedProperty.coordinates[1],
+            lng: selectedProperty.coordinates[0]
+
+          }}
+          onCloseClick={() => {
+            setSelectedProperty(null);
+          }}
+        >
+          <div>
+            <h2>{selectedProperty.ADDRESS}</h2>
+            <p> {selectedProperty.DESC}</p>
+            <div>
+              <div class="row">
+
+                <div className="col-6">
                   <i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
                   <i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
-           
 
 
-                  </div>
 
-                  <div className="col-6 booking_button">
+                </div>
+
+                <div className="col-6 booking_button">
                   <button>Show Listing</button>
 
 
-                  </div>
-
                 </div>
-                
 
               </div>
-     
+
-              
+
             </div>
-          </InfoWindow>
 
-        )}
 
-      
+          </div>
+        </InfoWindow>
+
+      )}
+
+
 
 
 
     </GoogleMap>
-  
+
-   
+
   );
 
 }
@@ -113,12 +113,12 @@ class ListingsPage extends Component {
   render() {
     return (
 
-    <div className="listings">
+      <div className="listings">
 
-      <section class="colored-section2" id="cta">
+        <section class="colored-section2" id="cta">
 
 
-      {/*
+          {/*
       
     
     
@@ -153,41 +153,45 @@ class ListingsPage extends Component {
 
         </div>
   */}
-       
-        <div class="row"> 
 
-          <div class="col-12">
+          <div class="row">
 
-            <h2> Map </h2>
+            <div class="col-12">
-       
+
-            <div style={{ width: "100vm", height: "800px" }}>
+              <section className="colored-section" id="features">
-              <MapWrapped
+                <div className="container-fluid">
-                googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
+                  <h2> Map </h2>
+                </div>
+              </section>
+
+              <div style={{ width: "100vm", height: "800px" }}>
+                <MapWrapped
+                  googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
                 AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
-                loadingElement={<div style={{ height: `100%` }} />}
+                  loadingElement={<div style={{ height: `100%` }} />}
-                containerElement={<div style={{ height: `100%` }} />}
+                  containerElement={<div style={{ height: `100%` }} />}
-                mapElement={<div style={{ height: `100%` }} />}
+                  mapElement={<div style={{ height: `100%` }} />}
-              />
+                />
+              </div>
+
+
+
+
             </div>
 
-
-
-
           </div>
-        
-        </div>
-
-     
-          
-
-      </section>
-
-    
-    </div>
-    
 
 
-    ); 
+
+
+        </section>
+
+
+      </div>
+
+
+
+    );
   }
 }
 

src/shared-components/navbar-component/Navbar.css

@@ -1,3 +1,5 @@
 .Navbar{
-    background-color: pink;
+    background-color: rgb(56, 55, 55);
+    padding-top: 20px;
+    padding-bottom: 24px;
 }