irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Team1.js
78 lines2.4 KBJavaScript
RawDownloadHistory
1import Link from "next/link";
2import teamData from "../data/teamData";
3
4function TeamMember(props) {
5 const lowerNameWithDash = props.name.toLowerCase().replace(/\s/g, "-");
6 const aboutLink = `/team/${lowerNameWithDash}`;
7 return (
8 <>
9 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
10 <div className="team-item">
11 <div className="team-thumb">
12 <Link href={aboutLink}>
13 <img src={props.img} alt="" />
14 </Link>
15 <div className="team-social">
16 <ul className="list-wrap">
17 <li>
18 <Link href={props.facebook}>
19 <i className="fab fa-facebook-f" />
20 </Link>
21 </li>
22 <li>
23 <Link href={props.linkedIn}>
24 <i className="fab fa-linkedin-in" />
25 </Link>
26 </li>
27 <li>
28 <Link href={props.twitter}>
29 <i className="fab fa-twitter" />
30 </Link>
31 </li>
32 <li>
33 <Link href={props.instagram}>
34 <i className="fab fa-instagram" />
35 </Link>
36 </li>
37 </ul>
38 </div>
39 </div>
40 <div className="team-content">
41 <h2 className="title">
42 <Link href={aboutLink}>{props.name}</Link>
43 </h2>
44 <span>{props.position}</span>
45 </div>
46 </div>
47 </div>
48 </>
49 );
50}
51
52export default function Team1() {
53 return (
54 <>
55 <section className="team-area pt-115 pb-90">
56 <div className="container">
57 <div className="row justify-content-center">
58 <div className="col-lg-8">
59 <div className="section-title text-center mb-60 tg-heading-subheading animation-style3">
60 <span className="sub-title tg-element-title">
61 Professional Team
62 </span>
63 <h2 className="title tg-element-title">
64 Professional Team Members
65 </h2>
66 </div>
67 </div>
68 </div>
69 <div className="row justify-content-center">
70 {teamData.map((team, index) => (
71 <TeamMember key={`team-member-${index}`} {...team} />
72 ))}
73 </div>
74 </div>
75 </section>
76 </>
77 );
78}