irongit
Sign inRegister
huncholanehuncholane/slroofPublic

links go to name

huncholanehuncholaneauthored
parent e28246fcommit 6e1ee41a31102c062c449b91f2860129a72b64e8Browse files

7 files changed, +261 -127

+20-0components/data/teamData.js
@@ -7,6 +7,26 @@ const teamData = [
77 instagram: "#",
88 name: "Shaun Lake",
99 position: "Founder",
10+ exp: "30 Years",
11+ email: "shaun@gmail.com",
12+ location: "Kansas City, MO",
13+ paragraphs: [
14+ "At Shaun Lake Roofing, our commitment to excellence drives everything we do. We strive to deliver the highest quality roofing solutions, using top-grade materials and advanced techniques to ensure your roof is both durable and beautiful. Our experienced team works diligently to meet and exceed your expectations, providing exceptional customer service and top-notch craftsmanship on every project.",
15+ "We are proud to be a family-owned and operated business, and we treat every customer like a member of our family. We take the time to listen to your needs and concerns, and we work closely with you to develop a customized roofing solution that meets your specific requirements. Whether you need a minor repair or a complete roof replacement, you can count on Shaun Lake Roofing to deliver superior results at a competitive price.",
16+ ],
17+ sidenote: {
18+ img: "/assets/img/team/team_details02.jpg",
19+ title: "Committed to Excellence",
20+ content:
21+ "Shaun will be there to ensure your project is completed to the highest standards.",
22+ quotes: [
23+ "Every roof we build is a testament to our commitment to quality and craftsmanship.",
24+ "Your satisfaction is our top priority; we don't just build roofs, we build trust.",
25+ "With 30 years in the industry, we know what it takes to deliver excellence on every project.",
26+ "A strong roof means peace of mind, and that's what we aim to provide for every client.",
27+ "From minor repairs to major installations, we bring the same level of dedication and expertise to every job.",
28+ ],
29+ },
1030 },
1131 {
1232 img: "/assets/img/team/h2_team_img02.jpg",
+5-3components/sections/Team1.js
@@ -2,13 +2,15 @@ import Link from "next/link";
22 import teamData from "../data/teamData";
33
44 function TeamMember(props) {
5+ const lowerNameWithDash = props.name.toLowerCase().replace(/\s/g, "-");
6+ const aboutLink = `/team/${lowerNameWithDash}`;
57 return (
68 <>
79 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
810 <div className="team-item">
911 <div className="team-thumb">
10- <Link href="/team-details">
11- <img src="/assets/img/team/team_img01.jpg" alt="" />
12+ <Link href={aboutLink}>
13+ <img src={props.img} alt="" />
1214 </Link>
1315 <div className="team-social">
1416 <ul className="list-wrap">
@@ -37,7 +39,7 @@ function TeamMember(props) {
3739 </div>
3840 <div className="team-content">
3941 <h2 className="title">
40- <Link href="/team-details">{props.name}</Link>
42+ <Link href={aboutLink}>{props.name}</Link>
4143 </h2>
4244 <span>{props.position}</span>
4345 </div>
+4-2components/sections/Team2.js
@@ -10,11 +10,13 @@ function TeamMember({
1010 name,
1111 position,
1212 }) {
13+ const lowerNameWithDash = name.toLowerCase().replace(/\s/g, "-");
14+ const aboutLink = `/team/${lowerNameWithDash}`;
1315 return (
1416 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
1517 <div className="team-item-two">
1618 <div className="team-thumb-two">
17- <Link href="/team-details">
19+ <Link href={aboutLink}>
1820 <img src={img} alt="" />
1921 </Link>
2022 <div className="team-social-two">
@@ -44,7 +46,7 @@ function TeamMember({
4446 </div>
4547 <div className="team-content-two">
4648 <h2 className="title">
47- <Link href="/team-details">{name}</Link>
49+ <Link href={aboutLink}>{name}</Link>
4850 </h2>
4951 <span>{position}</span>
5052 </div>
+4-2components/sections/Team3.js
@@ -10,12 +10,14 @@ function TeamMember({
1010 name,
1111 position,
1212 }) {
13+ const lowerNameWithDash = name.toLowerCase().replace(/\s/g, "-");
14+ const aboutLink = `/team/${lowerNameWithDash}`;
1315 return (
1416 <>
1517 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-8">
1618 <div className="team-item-three">
1719 <div className="team-thumb-three">
18- <Link href="/team-details">
20+ <Link href={aboutLink}>
1921 <img src={img} alt="" />
2022 </Link>
2123 <div className="team-social-three">
@@ -45,7 +47,7 @@ function TeamMember({
4547 </div>
4648 <div className="team-content-three">
4749 <h2 className="title">
48- <Link href="/team-details">{name}</Link>
50+ <Link href={aboutLink}>{name}</Link>
4951 </h2>
5052 <span>{position}</span>
5153 </div>
+0-7components/siteData.js
@@ -1,7 +0,0 @@
1-export default siteData = {
2- team: [
3- {
4- img: "/",
5- },
6- ],
7-};
+218-113pages/team-details.js
@@ -1,115 +1,220 @@
1-import Layout from "@/components/layout/Layout"
2-import Brand3 from "@/components/sections/Brand3"
3-import Link from "next/link"
4-export default function TeamDetails() {
5-
6- return (
7- <>
8- <Layout breadcrumbTitle="Team Details">
9- <div>
10- <section className="team-details-area pt-120 pb-120">
11- <div className="container">
12- <div className="row align-items-center">
13- <div className="col-lg-6">
14- <div className="team-details-thumb">
15- <img src="/assets/img/team/team_details01.jpg" alt="" />
16- </div>
17- </div>
18- <div className="col-lg-6">
19- <div className="team-details-info">
20- <div className="info-content-top">
21- <h3 className="title">Christopher Jhon</h3>
22- <span>Senior Manager</span>
23- </div>
24- <ul className="list-wrap team-info">
25- <li><span><i className="fas fa-toolbox" />Experience:</span>15 Years</li>
26- <li><span><i className="fas fa-envelope" />E-mail:</span>icourtnyhenry@example.com</li>
27- <li><span><i className="fas fa-phone-alt" />Phone:</span>+1-800-456-478-00</li>
28- <li><span><i className="fas fa-map-marker-alt" />Location:</span>380 St Kilda Road, Melbourne <br /> VIC 3004, Australia</li>
29- </ul>
30- <div className="team-details-social">
31- <h6 className="title">Follow Me:</h6>
32- <ul className="list-wrap">
33- <li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
34- <li><Link href="#"><i className="fab fa-twitter" /></Link></li>
35- <li><Link href="#"><i className="fab fa-linkedin-in" /></Link></li>
36- <li><Link href="#"><i className="fab fa-instagram" /></Link></li>
37- </ul>
38- </div>
39- </div>
40- </div>
41- </div>
42- <div className="row">
43- <div className="col-lg-12">
44- <div className="team-details-content">
45- <h3 className="title">Personal Experience and Skills</h3>
46- <p className="info-one">Since joining Sotcox in 2009 .Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different area of web design ki je bolbo as include web graphic design; user interface design (UI design); authoring, including standardised code and proprietary amra kothai jabo assoftware; user experience design (UX design); and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, including writing markup.</p>
47- <p className="info-two">The term "web design" is normally used to describe the design process relating to the front-end (client side) design of a ki holo design ki valo hoy nai website including writing markup. Web design partially overlaps web engineering in the broader scope of web development.</p>
48- <div className="progress-wrap">
49- <div className="progress-item">
50- <h5 className="title">Software Development</h5>
51- <div className="progress">
52- <div className="progress-bar" role="progressbar" style={{ width: '88%' }} aria-valuenow={88} aria-valuemin={0} aria-valuemax={100} />
53- <span>88%</span>
54- </div>
55- </div>
56- <div className="progress-item">
57- <h5 className="title">UL / UX Design</h5>
58- <div className="progress">
59- <div className="progress-bar" role="progressbar" style={{ width: '80%' }} aria-valuenow={80} aria-valuemin={0} aria-valuemax={100} />
60- <span>80%</span>
61- </div>
62- </div>
63- <div className="progress-item">
64- <h5 className="title">Web Development</h5>
65- <div className="progress">
66- <div className="progress-bar" role="progressbar" style={{ width: '95%' }} aria-valuenow={95} aria-valuemin={0} aria-valuemax={100} />
67- <span>95%</span>
68- </div>
69- </div>
70- <div className="progress-item">
71- <h5 className="title">SEO Optimization</h5>
72- <div className="progress">
73- <div className="progress-bar" role="progressbar" style={{ width: '90%' }} aria-valuenow={90} aria-valuemin={0} aria-valuemax={100} />
74- <span>90%</span>
75- </div>
76- </div>
77- </div>
78- <div className="guidelines-wrap">
79- <div className="row">
80- <div className="col-lg-6">
81- <div className="guidelines-img">
82- <img src="/assets/img/team/team_details02.jpg" alt="" />
83- </div>
84- </div>
85- <div className="col-lg-6">
86- <div className="guidelines-content">
87- <h4 className="title">Career Guidelines</h4>
88- <p>As a web developer, you could work for a company or agency, hoyse aor as a freelancer taking
89- on projects for individual clients. Your tasks will vary depending on ki tumi your work situation, but day-to-day responsibilities might generally include.</p>
90- <ul className="list-wrap">
91- <li>Designing user interfaces and navigation menus</li>
92- <li>Writing and reviewing code for sites, typically HTML, XML, or JavaScript</li>
93- <li>Troubleshooting problems with performance or user experience</li>
94- <li>Integrating multimedia content onto a site</li>
95- <li>Collaborating with designers, developers, and stakeholders</li>
96- <li>Testing web applications</li>
97- </ul>
98- </div>
99- </div>
100- </div>
101- </div>
102- </div>
103- </div>
104- </div>
1+import Layout from "@/components/layout/Layout";
2+import Brand3 from "@/components/sections/Brand3";
3+import Link from "next/link";
4+export default function TeamDetails(props) {
5+ return (
6+ <>
7+ <Layout breadcrumbTitle={props.name}>
8+ <div>
9+ <section className="team-details-area pt-120 pb-120">
10+ <div className="container">
11+ <div className="row align-items-center">
12+ <div className="col-lg-6">
13+ <div className="team-details-thumb">
14+ <img src="/assets/img/team/team_details01.jpg" alt="" />
15+ </div>
16+ </div>
17+ <div className="col-lg-6">
18+ <div className="team-details-info">
19+ <div className="info-content-top">
20+ <h3 className="title">{props.name}</h3>
21+ <span>{props.position}</span>
22+ </div>
23+ <ul className="list-wrap team-info">
24+ <li>
25+ <span>
26+ <i className="fas fa-toolbox" />
27+ Experience:
28+ </span>
29+ {props.exp}
30+ </li>
31+ <li>
32+ <span>
33+ <i className="fas fa-envelope" />
34+ E-mail:
35+ </span>
36+ {props.email}
37+ </li>
38+ <li>
39+ <span>
40+ <i className="fas fa-phone-alt" />
41+ Phone:
42+ </span>
43+ {props.phone}
44+ </li>
45+ <li>
46+ <span>
47+ <i className="fas fa-map-marker-alt" />
48+ Location:
49+ </span>
50+ {props.location}
51+ </li>
52+ </ul>
53+ <div className="team-details-social">
54+ <h6 className="title">Follow Me:</h6>
55+ <ul className="list-wrap">
56+ <li>
57+ <Link href="#">
58+ <i className="fab fa-facebook-f" />
59+ </Link>
60+ </li>
61+ <li>
62+ <Link href="#">
63+ <i className="fab fa-twitter" />
64+ </Link>
65+ </li>
66+ <li>
67+ <Link href="#">
68+ <i className="fab fa-linkedin-in" />
69+ </Link>
70+ </li>
71+ <li>
72+ <Link href="#">
73+ <i className="fab fa-instagram" />
74+ </Link>
75+ </li>
76+ </ul>
77+ </div>
78+ </div>
79+ </div>
80+ </div>
81+ <div className="row">
82+ <div className="col-lg-12">
83+ <div className="team-details-content">
84+ <h3 className="title">Personal Experience and Skills</h3>
85+ <p className="info-one">
86+ Since joining Sotcox in 2009 .Web design encompasses many
87+ different skills and disciplines in the production and
88+ maintenance of websites. The different area of web design
89+ ki je bolbo as include web graphic design; user interface
90+ design (UI design); authoring, including standardised code
91+ and proprietary amra kothai jabo assoftware; user
92+ experience design (UX design); and search engine
93+ optimization. Often many individuals will work in teams
94+ covering different aspects of the design process,
95+ including writing markup.
96+ </p>
97+ <p className="info-two">
98+ The term "web design" is normally used to describe the
99+ design process relating to the front-end (client side)
100+ design of a ki holo design ki valo hoy nai website
101+ including writing markup. Web design partially overlaps
102+ web engineering in the broader scope of web development.
103+ </p>
104+ <div className="progress-wrap">
105+ <div className="progress-item">
106+ <h5 className="title">Software Development</h5>
107+ <div className="progress">
108+ <div
109+ className="progress-bar"
110+ role="progressbar"
111+ style={{ width: "88%" }}
112+ aria-valuenow={88}
113+ aria-valuemin={0}
114+ aria-valuemax={100}
115+ />
116+ <span>88%</span>
117+ </div>
118+ </div>
119+ <div className="progress-item">
120+ <h5 className="title">UL / UX Design</h5>
121+ <div className="progress">
122+ <div
123+ className="progress-bar"
124+ role="progressbar"
125+ style={{ width: "80%" }}
126+ aria-valuenow={80}
127+ aria-valuemin={0}
128+ aria-valuemax={100}
129+ />
130+ <span>80%</span>
131+ </div>
132+ </div>
133+ <div className="progress-item">
134+ <h5 className="title">Web Development</h5>
135+ <div className="progress">
136+ <div
137+ className="progress-bar"
138+ role="progressbar"
139+ style={{ width: "95%" }}
140+ aria-valuenow={95}
141+ aria-valuemin={0}
142+ aria-valuemax={100}
143+ />
144+ <span>95%</span>
145+ </div>
146+ </div>
147+ <div className="progress-item">
148+ <h5 className="title">SEO Optimization</h5>
149+ <div className="progress">
150+ <div
151+ className="progress-bar"
152+ role="progressbar"
153+ style={{ width: "90%" }}
154+ aria-valuenow={90}
155+ aria-valuemin={0}
156+ aria-valuemax={100}
157+ />
158+ <span>90%</span>
159+ </div>
160+ </div>
161+ </div>
162+ <div className="guidelines-wrap">
163+ <div className="row">
164+ <div className="col-lg-6">
165+ <div className="guidelines-img">
166+ <img
167+ src="/assets/img/team/team_details02.jpg"
168+ alt=""
169+ />
170+ </div>
171+ </div>
172+ <div className="col-lg-6">
173+ <div className="guidelines-content">
174+ <h4 className="title">Career Guidelines</h4>
175+ <p>
176+ As a web developer, you could work for a company
177+ or agency, hoyse aor as a freelancer taking on
178+ projects for individual clients. Your tasks will
179+ vary depending on ki tumi your work situation, but
180+ day-to-day responsibilities might generally
181+ include.
182+ </p>
183+ <ul className="list-wrap">
184+ <li>
185+ Designing user interfaces and navigation menus
186+ </li>
187+ <li>
188+ Writing and reviewing code for sites, typically
189+ HTML, XML, or JavaScript
190+ </li>
191+ <li>
192+ Troubleshooting problems with performance or
193+ user experience
194+ </li>
195+ <li>
196+ Integrating multimedia content onto a site
197+ </li>
198+ <li>
199+ Collaborating with designers, developers, and
200+ stakeholders
201+ </li>
202+ <li>Testing web applications</li>
203+ </ul>
204+ </div>
105205 </div>
106- </section>
107- {/* team-details-area-end */}
108- {/* brand-area */}
109- <Brand3 />
206+ </div>
207+ </div>
208+ </div>
110209 </div>
111-
112- </Layout>
113- </>
114- )
115-}
210+ </div>
211+ </div>
212+ </section>
213+ {/* team-details-area-end */}
214+ {/* brand-area */}
215+ <Brand3 />
216+ </div>
217+ </Layout>
218+ </>
219+ );
220+}
+10-0pages/team/[id].js
@@ -0,0 +1,10 @@
1+import { useRouter } from "next/router";
2+
3+const TeamMember = () => {
4+ const router = useRouter();
5+ const { id } = router.query;
6+
7+ return <p>Team Member: {id}</p>;
8+};
9+
10+export default TeamMember;