Update Agents.js

src/agent-page/Agents.js

@@ -4,22 +4,32 @@ import Card from "react-bootstrap/Card";
 import {Link} from 'react-router-dom'
 /* import Button from "react-bootstrap/Button"; */
 import { useTranslation } from 'react-i18next';
+import './agent-page.css';
+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";
+import { withTranslation } from "react-i18next";
+import { Container, Row, Col } from 'reactstrap';
 
 
 
 const Agents = ({ agents }) => {
   const { t } = useTranslation();
-  const agentlist = agents.map((agent) => {
+  /* const agentlist = agents.map((agent) => { */
     return (
-      <div className="agent" key={agent.id}>
+      <div >
         {}
+        <Row>
         <Card style={{ width: "22rem", height: "42rem" }}>
-          <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent1} />
           <Card.Body>
-            <Card.Title>{agent.title}</Card.Title>
+            <Card.Title>{t("Mike.Title")}</Card.Title>
-            <Card.Text>{agent.name}</Card.Text>
+            <Card.Text>Michael</Card.Text>
             <Card.Text style={{ height: "7rem" }}>
-              {agent.word}
+            {t("Mike.Word")}
             </Card.Text>
             <Link to={"/contact-us/"}>
                <button type="view" className="btn-small"> 
@@ -31,11 +41,109 @@ const Agents = ({ agents }) => {
             </div> */}
           </Card.Body>
         </Card>
+        <Card style={{ width: "22rem", height: "42rem" }}>
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent2} />
+          <Card.Body>
+            <Card.Title>{t("Regular")}</Card.Title>
+            <Card.Text>Jin</Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
+            {t("Agent2.W")}
+            </Card.Text>
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
+              <Button variant="primary">VIEW</Button>
+            </div> */}
+          </Card.Body>
+        </Card>
+        
+        
+        <Card style={{ width: "22rem", height: "42rem" }}>
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent3} />
+          <Card.Body>
+            <Card.Title>{t("Regular")}</Card.Title>
+            <Card.Text>Anita</Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
+            {t("Agent3.W")}
+            </Card.Text>
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
+              <Button variant="primary">VIEW</Button>
+            </div> */}
+          </Card.Body>
+        </Card>
+        </Row>
+        <Row>
+        <Card style={{ width: "22rem", height: "42rem" }}>
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent4} />
+          <Card.Body>
+            <Card.Title>{t("Regular")}</Card.Title>
+            <Card.Text>Alex</Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
+            {t("Agent4.W")}
+            </Card.Text>
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
+              <Button variant="primary">VIEW</Button>
+            </div> */}
+          </Card.Body>
+        </Card>
+        
+        <Card style={{ width: "22rem", height: "42rem" }}>
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent5} />
+          <Card.Body>
+            <Card.Title>{t("Regular")}</Card.Title>
+            <Card.Text>Xuan</Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
+            {t("Agent5.W")}
+            </Card.Text>
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
+              <Button variant="primary">VIEW</Button>
+            </div> */}
+          </Card.Body>
+        </Card>
+        <Card style={{ width: "22rem", height: "42rem" }}>
+          <Card.Img variant="top" style={{ height: "22rem" }} src={Agent6} />
+          <Card.Body>
+            <Card.Title>{t("Regular")}</Card.Title>
+            <Card.Text>Walter</Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
+            {t("Agent6.W")}
+            </Card.Text>
+            <Link to={"/contact-us/"}>
+               <button type="view" className="btn-small"> 
+                  {t("View_Button")}
+               </button>
+            </Link>
+            {/* <div className="buttonfriend">
+              <Button variant="primary">VIEW</Button>
+            </div> */}
+          </Card.Body>
+        </Card>
+        </Row>
+
+        
       </div>
     );
-  });
+  /* }); */
-  console.log(agentlist);
+  /* console.log(agentlist); */
-  return (
+ /*  return (
     <div className="agent-list">
       <div className="row">
         <div className="col m4">{agentlist[0]}</div>
@@ -46,6 +154,6 @@ const Agents = ({ agents }) => {
         <div className="col m4">{agentlist[5]}</div>
       </div>
     </div>
-  );
+  ); */
 };
 export default Agents;