fixed image resolution, added a link to homepage and added some translations

package.json

@@ -13,6 +13,7 @@
     "express": "^4.17.1",
     "flag-icon-css": "^3.5.0",
     "formik": "^2.2.6",
+    "i18next": "^20.2.1",
     "i18next-browser-languagedetector": "^6.1.0",
     "i18next-http-backend": "^1.2.1",
     "joi-browser": "^13.4.0",

public/assets/locales/en/translations.json

@@ -22,6 +22,12 @@
     "Nav_Agents": "Agents",
     "Nav_Contact_Us": "Contact Us",
     "Nav_listing_page": "listing-page",
-    "Nav_Login": "Login"
+    "Nav_Login": "Login",
+    "View_Button": "View",
+    "MeetTeam": "Meet the Team",
+    "Sales_Ass":"sales assistant"
+
+
+    
 
 }

public/assets/locales/fr/translations.json

@@ -22,5 +22,8 @@
     "Nav_Agents": "Agents",
     "Nav_Contact_Us": "Nous contacter",
     "Nav_listing_page": "page de liste",
-    "Nav_Login": "Connexion"
+    "Nav_Login": "Connexion",
+    "View_Button": "vue",
+    "MeetTeam": "Rencontrer l'équipe",
+    "Sales_Ass":"assistant des ventes"
 }

src/agent-page/AgentPage.js

@@ -7,6 +7,8 @@ import Agent3 from "../images/Agent3.jpg";
 import Agent4 from "../images/Agent4.jpg";
 import Agent5 from "../images/Agent5.jpg";
 import Agent6 from "../images/Agent6.jpg";
+import { withTranslation } from "react-i18next";
+
 class AgentPage extends Component {
   state = {
     agents: [
@@ -16,16 +18,21 @@ class AgentPage extends Component {
       { 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: '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.', id: 6 },
 
 
     ]
   }
   render() {
+    const { t } = this.props;
+ 
     return (
+
       <div>
         <div className="center  blue-text text-darken-4">
-          <h1 style={{ fontFamily: "Georgia"  }} >Meet the Team</h1>
+
+          <h1 style={{ fontFamily: "Georgia"  }} >{t("MeetTeam")}</h1>
+      
         </div>
 
         <div className="container">
@@ -41,4 +48,5 @@ class AgentPage extends Component {
   }
 
 }
-export default AgentPage;
+/* export default AgentPage; */
+export default withTranslation()(AgentPage);

src/agent-page/Agents.js

@@ -1,9 +1,14 @@
 import React from "react";
 /* import {Link} from 'react-router-dom' */
 import Card from "react-bootstrap/Card";
-import Button from "react-bootstrap/Button";
+import {Link} from 'react-router-dom'
+/* import Button from "react-bootstrap/Button"; */
+import { useTranslation } from 'react-i18next';
+
+
 
 const Agents = ({ agents }) => {
+  const { t } = useTranslation();
   const agentlist = agents.map((agent) => {
     return (
       <div className="agent" key={agent.id}>
@@ -16,9 +21,14 @@ const Agents = ({ agents }) => {
             <Card.Text style={{ height: "7rem" }}>
               {agent.word}
             </Card.Text>
-            <div className="buttonfriend">
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
               <Button variant="primary">VIEW</Button>
-            </div>
+            </div> */}
           </Card.Body>
         </Card>
       </div>