irongit
Sign inRegister
huncholanehuncholane/slroofPublic

should be able to import team data

huncholanehuncholaneauthored
parent e0db473commit f47598752726f9f022b75ca1724abc91cd7b105dBrowse files

4 files changed, +222 -448

+40-40components/data/teamData.js
@@ -1,40 +1,40 @@
1-export default siteData = {
2- team: [
3- {
4- img: "/assets/img/team/h2_team_img01.jpg",
5- linkedIn: "#",
6- twitter: "#",
7- facebook: "#",
8- instagram: "#",
9- name: "Shaun Lake",
10- position: "Founder",
11- },
12- {
13- img: "/assets/img/team/h2_team_img02.jpg",
14- linkedIn: "#",
15- twitter: "#",
16- facebook: "#",
17- instagram: "#",
18- name: "Zack Stevens",
19- position: "Co-Founder",
20- },
21- {
22- img: "/assets/img/team/h2_team_img03.jpg",
23- linkedIn: "#",
24- twitter: "#",
25- facebook: "#",
26- instagram: "#",
27- name: "Software Developer",
28- position: "CEO",
29- },
30- {
31- img: "/assets/img/team/h2_team_img04.jpg",
32- linkedIn: "#",
33- twitter: "#",
34- facebook: "#",
35- instagram: "#",
36- name: "Xander Andre",
37- position: "Marketing Manager",
38- },
39- ],
40-};
1+const teamData = [
2+ {
3+ img: "/assets/img/team/h2_team_img01.jpg",
4+ linkedIn: "#",
5+ twitter: "#",
6+ facebook: "#",
7+ instagram: "#",
8+ name: "Shaun Lake",
9+ position: "Founder",
10+ },
11+ {
12+ img: "/assets/img/team/h2_team_img02.jpg",
13+ linkedIn: "#",
14+ twitter: "#",
15+ facebook: "#",
16+ instagram: "#",
17+ name: "Zack Stevens",
18+ position: "Co-Founder",
19+ },
20+ {
21+ img: "/assets/img/team/h2_team_img03.jpg",
22+ linkedIn: "#",
23+ twitter: "#",
24+ facebook: "#",
25+ instagram: "#",
26+ name: "Software Developer",
27+ position: "CEO",
28+ },
29+ {
30+ img: "/assets/img/team/h2_team_img04.jpg",
31+ linkedIn: "#",
32+ twitter: "#",
33+ facebook: "#",
34+ instagram: "#",
35+ name: "Xander Andre",
36+ position: "Marketing Manager",
37+ },
38+];
39+
40+export default teamData;
+50-156components/sections/Team1.js
@@ -1,4 +1,51 @@
11 import Link from "next/link";
2+import teamData from "../data/teamData";
3+
4+function TeamMember(props) {
5+ return (
6+ <>
7+ <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
8+ <div className="team-item">
9+ <div className="team-thumb">
10+ <Link href="/team-details">
11+ <img src="/assets/img/team/team_img01.jpg" alt="" />
12+ </Link>
13+ <div className="team-social">
14+ <ul className="list-wrap">
15+ <li>
16+ <Link href={props.facebook}>
17+ <i className="fab fa-facebook-f" />
18+ </Link>
19+ </li>
20+ <li>
21+ <Link href={props.linkedIn}>
22+ <i className="fab fa-linkedin-in" />
23+ </Link>
24+ </li>
25+ <li>
26+ <Link href={props.twitter}>
27+ <i className="fab fa-twitter" />
28+ </Link>
29+ </li>
30+ <li>
31+ <Link href={props.instagram}>
32+ <i className="fab fa-instagram" />
33+ </Link>
34+ </li>
35+ </ul>
36+ </div>
37+ </div>
38+ <div className="team-content">
39+ <h2 className="title">
40+ <Link href="/team-details">{props.name}</Link>
41+ </h2>
42+ <span>{props.position}</span>
43+ </div>
44+ </div>
45+ </div>
46+ </>
47+ );
48+}
249
350 export default function Team1() {
451 return (
@@ -18,162 +65,9 @@ export default function Team1() {
1865 </div>
1966 </div>
2067 <div className="row justify-content-center">
21- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
22- <div className="team-item">
23- <div className="team-thumb">
24- <Link href="/team-details">
25- <img src="/assets/img/team/team_img01.jpg" alt="" />
26- </Link>
27- <div className="team-social">
28- <ul className="list-wrap">
29- <li>
30- <Link href="#">
31- <i className="fab fa-facebook-f" />
32- </Link>
33- </li>
34- <li>
35- <Link href="#">
36- <i className="fab fa-linkedin-in" />
37- </Link>
38- </li>
39- <li>
40- <Link href="#">
41- <i className="fab fa-twitter" />
42- </Link>
43- </li>
44- <li>
45- <Link href="#">
46- <i className="fab fa-instagram" />
47- </Link>
48- </li>
49- </ul>
50- </div>
51- </div>
52- <div className="team-content">
53- <h2 className="title">
54- <Link href="/team-details">Shaun Lake</Link>
55- </h2>
56- <span>Founder</span>
57- </div>
58- </div>
59- </div>
60- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
61- <div className="team-item">
62- <div className="team-thumb">
63- <Link href="/team-details">
64- <img src="/assets/img/team/team_img02.jpg" alt="" />
65- </Link>
66- <div className="team-social">
67- <ul className="list-wrap">
68- <li>
69- <Link href="#">
70- <i className="fab fa-facebook-f" />
71- </Link>
72- </li>
73- <li>
74- <Link href="#">
75- <i className="fab fa-linkedin-in" />
76- </Link>
77- </li>
78- <li>
79- <Link href="#">
80- <i className="fab fa-twitter" />
81- </Link>
82- </li>
83- <li>
84- <Link href="#">
85- <i className="fab fa-instagram" />
86- </Link>
87- </li>
88- </ul>
89- </div>
90- </div>
91- <div className="team-content">
92- <h2 className="title">
93- <Link href="/team-details">Zack Stevens</Link>
94- </h2>
95- <span>Co-Founder</span>
96- </div>
97- </div>
98- </div>
99- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
100- <div className="team-item">
101- <div className="team-thumb">
102- <Link href="/team-details">
103- <img src="/assets/img/team/team_img03.jpg" alt="" />
104- </Link>
105- <div className="team-social">
106- <ul className="list-wrap">
107- <li>
108- <Link href="#">
109- <i className="fab fa-facebook-f" />
110- </Link>
111- </li>
112- <li>
113- <Link href="#">
114- <i className="fab fa-linkedin-in" />
115- </Link>
116- </li>
117- <li>
118- <Link href="#">
119- <i className="fab fa-twitter" />
120- </Link>
121- </li>
122- <li>
123- <Link href="#">
124- <i className="fab fa-instagram" />
125- </Link>
126- </li>
127- </ul>
128- </div>
129- </div>
130- <div className="team-content">
131- <h2 className="title">
132- <Link href="/team-details">Lane Henslee</Link>
133- </h2>
134- <span>Software Developer</span>
135- </div>
136- </div>
137- </div>
138- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
139- <div className="team-item">
140- <div className="team-thumb">
141- <Link href="/team-details">
142- <img src="/assets/img/team/team_img04.jpg" alt="" />
143- </Link>
144- <div className="team-social">
145- <ul className="list-wrap">
146- <li>
147- <Link href="#">
148- <i className="fab fa-facebook-f" />
149- </Link>
150- </li>
151- <li>
152- <Link href="#">
153- <i className="fab fa-linkedin-in" />
154- </Link>
155- </li>
156- <li>
157- <Link href="#">
158- <i className="fab fa-twitter" />
159- </Link>
160- </li>
161- <li>
162- <Link href="#">
163- <i className="fab fa-instagram" />
164- </Link>
165- </li>
166- </ul>
167- </div>
168- </div>
169- <div className="team-content">
170- <h2 className="title">
171- <Link href="/team-details">Xander Andre</Link>
172- </h2>
173- <span>Market Researcher</span>
174- </div>
175- </div>
176- </div>
68+ {teamData.map((team, index) => (
69+ <TeamMember key={`team-member-${index}`} {...team} />
70+ ))}
17771 </div>
17872 </div>
17973 </section>
+56-156components/sections/Team2.js
@@ -1,4 +1,57 @@
11 import Link from "next/link";
2+import teamData from "../data/teamData";
3+
4+function TeamMember({
5+ img,
6+ linkedIn,
7+ twitter,
8+ facebook,
9+ instagram,
10+ name,
11+ position,
12+}) {
13+ return (
14+ <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
15+ <div className="team-item-two">
16+ <div className="team-thumb-two">
17+ <Link href="/team-details">
18+ <img src={img} alt="" />
19+ </Link>
20+ <div className="team-social-two">
21+ <ul className="list-wrap">
22+ <li>
23+ <Link href={facebook}>
24+ <i className="fab fa-facebook-f" />
25+ </Link>
26+ </li>
27+ <li>
28+ <Link href={linkedIn}>
29+ <i className="fab fa-linkedin-in" />
30+ </Link>
31+ </li>
32+ <li>
33+ <Link href={twitter}>
34+ <i className="fab fa-twitter" />
35+ </Link>
36+ </li>
37+ <li>
38+ <Link href={instagram}>
39+ <i className="fab fa-instagram" />
40+ </Link>
41+ </li>
42+ </ul>
43+ </div>
44+ </div>
45+ <div className="team-content-two">
46+ <h2 className="title">
47+ <Link href="/team-details">{name}</Link>
48+ </h2>
49+ <span>{position}</span>
50+ </div>
51+ </div>
52+ </div>
53+ );
54+}
255
356 export default function Team2() {
457 return (
@@ -14,162 +67,9 @@ export default function Team2() {
1467 </div>
1568 </div>
1669 <div className="row justify-content-center">
17- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
18- <div className="team-item-two">
19- <div className="team-thumb-two">
20- <Link href="/team-details">
21- <img src="/assets/img/team/h2_team_img01.jpg" alt="" />
22- </Link>
23- <div className="team-social-two">
24- <ul className="list-wrap">
25- <li>
26- <Link href="#">
27- <i className="fab fa-facebook-f" />
28- </Link>
29- </li>
30- <li>
31- <Link href="#">
32- <i className="fab fa-linkedin-in" />
33- </Link>
34- </li>
35- <li>
36- <Link href="#">
37- <i className="fab fa-twitter" />
38- </Link>
39- </li>
40- <li>
41- <Link href="#">
42- <i className="fab fa-instagram" />
43- </Link>
44- </li>
45- </ul>
46- </div>
47- </div>
48- <div className="team-content-two">
49- <h2 className="title">
50- <Link href="/team-details">Shaun Lake</Link>
51- </h2>
52- <span>Founder</span>
53- </div>
54- </div>
55- </div>
56- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
57- <div className="team-item-two">
58- <div className="team-thumb-two">
59- <Link href="/team-details">
60- <img src="/assets/img/team/h2_team_img02.jpg" alt="" />
61- </Link>
62- <div className="team-social-two">
63- <ul className="list-wrap">
64- <li>
65- <Link href="#">
66- <i className="fab fa-facebook-f" />
67- </Link>
68- </li>
69- <li>
70- <Link href="#">
71- <i className="fab fa-linkedin-in" />
72- </Link>
73- </li>
74- <li>
75- <Link href="#">
76- <i className="fab fa-twitter" />
77- </Link>
78- </li>
79- <li>
80- <Link href="#">
81- <i className="fab fa-instagram" />
82- </Link>
83- </li>
84- </ul>
85- </div>
86- </div>
87- <div className="team-content-two">
88- <h2 className="title">
89- <Link href="/team-details">Zack Stevens</Link>
90- </h2>
91- <span>Co-Founder</span>
92- </div>
93- </div>
94- </div>
95- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
96- <div className="team-item-two">
97- <div className="team-thumb-two">
98- <Link href="/team-details">
99- <img src="/assets/img/team/h2_team_img03.jpg" alt="" />
100- </Link>
101- <div className="team-social-two">
102- <ul className="list-wrap">
103- <li>
104- <Link href="#">
105- <i className="fab fa-facebook-f" />
106- </Link>
107- </li>
108- <li>
109- <Link href="#">
110- <i className="fab fa-linkedin-in" />
111- </Link>
112- </li>
113- <li>
114- <Link href="#">
115- <i className="fab fa-twitter" />
116- </Link>
117- </li>
118- <li>
119- <Link href="#">
120- <i className="fab fa-instagram" />
121- </Link>
122- </li>
123- </ul>
124- </div>
125- </div>
126- <div className="team-content-two">
127- <h2 className="title">
128- <Link href="/team-details">Karikoka Ahli</Link>
129- </h2>
130- <span>Roof Engineer</span>
131- </div>
132- </div>
133- </div>
134- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
135- <div className="team-item-two">
136- <div className="team-thumb-two">
137- <Link href="/team-details">
138- <img src="/assets/img/team/h2_team_img04.jpg" alt="" />
139- </Link>
140- <div className="team-social-two">
141- <ul className="list-wrap">
142- <li>
143- <Link href="#">
144- <i className="fab fa-facebook-f" />
145- </Link>
146- </li>
147- <li>
148- <Link href="#">
149- <i className="fab fa-linkedin-in" />
150- </Link>
151- </li>
152- <li>
153- <Link href="#">
154- <i className="fab fa-twitter" />
155- </Link>
156- </li>
157- <li>
158- <Link href="#">
159- <i className="fab fa-instagram" />
160- </Link>
161- </li>
162- </ul>
163- </div>
164- </div>
165- <div className="team-content-two">
166- <h2 className="title">
167- <Link href="/team-details">Dickerson MH</Link>
168- </h2>
169- <span>Roof Engineer</span>
170- </div>
171- </div>
172- </div>
70+ {teamData.map((team, index) => (
71+ <TeamMember key={`team-member-${index}`} {...team} />
72+ ))}
17373 </div>
17474 </div>
17575 </section>
+76-96components/sections/Team3.js
@@ -1,100 +1,80 @@
1-import Link from "next/link"
1+import Link from "next/link";
2+import teamData from "../data/teamData";
23
4+function TeamMember({
5+ img,
6+ twitter,
7+ facebook,
8+ linkedIn,
9+ instagram,
10+ name,
11+ position,
12+}) {
13+ return (
14+ <>
15+ <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
16+ <div className="team-item-three">
17+ <div className="team-thumb-three">
18+ <Link href="/team-details">
19+ <img src={img} alt="" />
20+ </Link>
21+ <div className="team-social-three">
22+ <ul className="list-wrap">
23+ <li>
24+ <Link href={facebook}>
25+ <i className="fab fa-facebook-f" />
26+ </Link>
27+ </li>
28+ <li>
29+ <Link href={linkedIn}>
30+ <i className="fab fa-linkedin-in" />
31+ </Link>
32+ </li>
33+ <li>
34+ <Link href={twitter}>
35+ <i className="fab fa-twitter" />
36+ </Link>
37+ </li>
38+ <li>
39+ <Link href={instagram}>
40+ <i className="fab fa-instagram" />
41+ </Link>
42+ </li>
43+ </ul>
44+ </div>
45+ </div>
46+ <div className="team-content-three">
47+ <h2 className="title">
48+ <Link href="/team-details">{name}</Link>
49+ </h2>
50+ <span>{position}</span>
51+ </div>
52+ </div>
53+ </div>
54+ </>
55+ );
56+}
357
458 export default function Team3() {
5- return (
6- <>
7- <section className="team-area-three pt-115">
8- <div className="container">
9- <div className="row justify-content-center">
10- <div className="col-lg-8">
11- <div className="section-title text-center mb-50">
12- <span className="sub-title">Our Creative Team</span>
13- <h2 className="title">Our Professional Team</h2>
14- </div>
15- </div>
16- </div>
17- <div className="row justify-content-center">
18- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
19- <div className="team-item-three">
20- <div className="team-thumb-three">
21- <Link href="/team-details"><img src="/assets/img/team/h4_team_img01.jpg" alt="" /></Link>
22- <div className="team-social-three">
23- <ul className="list-wrap">
24- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
25- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
26- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
27- <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
28- </ul>
29- </div>
30- </div>
31- <div className="team-content-three">
32- <h2 className="title"><Link href="/team-details">Robert C. Simmons</Link></h2>
33- <span>Roof Engineer</span>
34- </div>
35- </div>
36- </div>
37- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
38- <div className="team-item-three">
39- <div className="team-thumb-three">
40- <Link href="/team-details"><img src="/assets/img/team/h4_team_img02.jpg" alt="" /></Link>
41- <div className="team-social-three">
42- <ul className="list-wrap">
43- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
44- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
45- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
46- <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
47- </ul>
48- </div>
49- </div>
50- <div className="team-content-three">
51- <h2 className="title"><Link href="/team-details">Christopher Jhon</Link></h2>
52- <span>Roof Engineer</span>
53- </div>
54- </div>
55- </div>
56- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
57- <div className="team-item-three">
58- <div className="team-thumb-three">
59- <Link href="/team-details"><img src="/assets/img/team/h4_team_img03.jpg" alt="" /></Link>
60- <div className="team-social-three">
61- <ul className="list-wrap">
62- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
63- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
64- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
65- <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
66- </ul>
67- </div>
68- </div>
69- <div className="team-content-three">
70- <h2 className="title"><Link href="/team-details">Karikoka Ahli</Link></h2>
71- <span>Roof Engineer</span>
72- </div>
73- </div>
74- </div>
75- <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
76- <div className="team-item-three">
77- <div className="team-thumb-three">
78- <Link href="/team-details"><img src="/assets/img/team/h4_team_img04.jpg" alt="" /></Link>
79- <div className="team-social-three">
80- <ul className="list-wrap">
81- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
82- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
83- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
84- <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
85- </ul>
86- </div>
87- </div>
88- <div className="team-content-three">
89- <h2 className="title"><Link href="/team-details">Dickerson MH</Link></h2>
90- <span>Roof Engineer</span>
91- </div>
92- </div>
93- </div>
94- </div>
95- </div>
96- </section>
97-
98- </>
99- )
59+ return (
60+ <>
61+ <section className="team-area-three pt-115">
62+ <div className="container">
63+ <div className="row justify-content-center">
64+ <div className="col-lg-8">
65+ <div className="section-title text-center mb-50">
66+ <span className="sub-title">Our Creative Team</span>
67+ <h2 className="title">Our Professional Team</h2>
68+ </div>
69+ </div>
70+ </div>
71+ <div className="row justify-content-center">
72+ {teamData.map((team, index) => (
73+ <TeamMember key={`team-member-${index}`} {...team} />
74+ ))}
75+ </div>
76+ </div>
77+ </section>
78+ </>
79+ );
10080 }