irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/about.js
370 lines14 KBJavaScript
RawDownloadHistory
1import testimonialData from "@/components/data/testimonialData";
2import VideoPopup from "@/components/elements/VideoPopup";
3import Layout from "@/components/layout/Layout";
4import Brand3 from "@/components/sections/Brand3";
5import Team1 from "@/components/sections/Team1";
6import Link from "next/link";
7import Slider from "react-slick";
8const settings = {
9 dots: true,
10 autoplay: true,
11 arrows: false,
12 infinite: true,
13 speed: 500,
14 slidesToShow: 1,
15 slidesToScroll: 1,
16};
17
18function TestimonialItem(props) {
19 return (
20 <div className="testimonial-item-two">
21 <div className="testimonial-avatar-two">
22 <img src="/assets/img/images/h2_testi_avatar01.png" alt="" />
23 </div>
24 <div className="testimonial-content-two">
25 <div className="content-top">
26 <div className="icon">
27 <i className="fas fa-quote-left" />
28 </div>
29 <div className="rating">
30 <i className="fas fa-star" />
31 <i className="fas fa-star" />
32 <i className="fas fa-star" />
33 <i className="fas fa-star" />
34 <i className="fas fa-star" />
35 </div>
36 </div>
37 <p>{props.quote}</p>
38 <div className="content-bottom">
39 <h4 className="title">{props.name}</h4>
40 <span>{props.profession}</span>
41 </div>
42 </div>
43 </div>
44 );
45}
46
47export default function About() {
48 return (
49 <>
50 <Layout breadcrumbTitle="About Us">
51 <section className="about-area inner-about-area pt-120 pb-120">
52 <div className="container">
53 <div className="row align-items-center">
54 <div className="col-xl-7 col-lg-6 order-0 order-lg-2">
55 <div className="about-img-wrap">
56 <img
57 src="/assets/img/images/about_img01.jpg"
58 alt=""
59 className="wow fadeInRight"
60 data-wow-delay=".4s"
61 />
62 <img
63 src="/assets/img/images/about_img02.jpg"
64 alt=""
65 className="wow fadeInRight"
66 data-wow-delay=".2s"
67 />
68 <div className="about-experiences-wrap">
69 <div className="experiences-item">
70 <div className="icon">
71 <img src="/assets/img/icon/about_icon01.svg" alt="" />
72 </div>
73 <div className="content">
74 <h6 className="title">
75 We have more than 10 years of experiences
76 </h6>
77 </div>
78 </div>
79 <div className="experiences-item">
80 <div className="icon">
81 <img src="/assets/img/icon/about_icon02.svg" alt="" />
82 </div>
83 <div className="content">
84 <h6 className="title">
85 We use professional and experienced person
86 </h6>
87 </div>
88 </div>
89 </div>
90 </div>
91 </div>
92 <div className="col-xl-5 col-lg-6">
93 <div className="about-content">
94 <div className="section-title mb-25">
95 <span className="sub-title">About Our Company</span>
96 <h2 className="title">
97 We’re Committed to Roofing Excellence
98 </h2>
99 </div>
100 <p>
101 At Shaun Lake Roofing, our commitment to excellence drives
102 everything we do. We strive to deliver the highest quality
103 roofing solutions, using top-grade materials and advanced
104 techniques to ensure your roof is both durable and
105 beautiful. Our experienced team works diligently to meet and
106 exceed your expectations, providing unparalleled service and
107 results. Trust us to bring excellence to every project,
108 every time.
109 </p>
110 <div className="about-list">
111 <ul className="list-wrap">
112 <li>
113 <i className="fas fa-check" />
114 32k Partners have worked us.
115 </li>
116 <li>
117 <i className="fas fa-check" />
118 Professional and experienced human resources.
119 </li>
120 <li>
121 <i className="fas fa-check" />
122 Provide the best roof services
123 </li>
124 </ul>
125 </div>
126 </div>
127 </div>
128 </div>
129 </div>
130 </section>
131 {/* about-area-end */}
132 {/* work-area */}
133 <section className="work-area">
134 <div className="container">
135 <div className="row justify-content-center">
136 <div className="col-lg-8">
137 <div className="section-title text-center mb-50">
138 <span className="sub-title">Working Plan</span>
139 <h2 className="title">Roof Plan Working Process</h2>
140 </div>
141 </div>
142 </div>
143 <div className="row">
144 <div className="col-xl-3 col-md-6">
145 <div className="work-item">
146 <div className="work-thumb">
147 <img src="/assets/img/images/work_img01.png" alt="" />
148 <h4 className="number">01</h4>
149 </div>
150 <div className="work-content">
151 <h2 className="title">Plan for Roofing</h2>
152 <p>
153 Suffered alteration in some a form, by injected humour, or
154 randomised word
155 </p>
156 </div>
157 </div>
158 </div>
159 <div className="col-xl-3 col-md-6">
160 <div className="work-item">
161 <div className="work-thumb">
162 <img src="/assets/img/images/work_img02.png" alt="" />
163 <h4 className="number">02</h4>
164 </div>
165 <div className="work-content">
166 <h2 className="title">Schedule Estimate</h2>
167 <p>
168 Suffered alteration in some a form, by injected humour, or
169 randomised word
170 </p>
171 </div>
172 </div>
173 </div>
174 <div className="col-xl-3 col-md-6">
175 <div className="work-item">
176 <div className="work-thumb">
177 <img src="/assets/img/images/work_img03.png" alt="" />
178 <h4 className="number">03</h4>
179 </div>
180 <div className="work-content">
181 <h2 className="title">Install New Roof</h2>
182 <p>
183 Suffered alteration in some a form, by injected humour, or
184 randomised word
185 </p>
186 </div>
187 </div>
188 </div>
189 <div className="col-xl-3 col-md-6">
190 <div className="work-item">
191 <div className="work-thumb">
192 <img src="/assets/img/images/work_img04.png" alt="" />
193 <h4 className="number">04</h4>
194 </div>
195 <div className="work-content">
196 <h2 className="title">Enjoy Roofing</h2>
197 <p>
198 Suffered alteration in some a form, by injected humour, or
199 randomised word
200 </p>
201 </div>
202 </div>
203 </div>
204 </div>
205 </div>
206 </section>
207 {/* work-area-end */}
208 {/* history-area */}
209 <section className="history-area pt-120 pb-120">
210 <div className="container">
211 <div className="row align-items-center">
212 <div className="col-lg-6">
213 <div className="history-img-wrap">
214 <ul className="list-wrap">
215 <li>
216 <img src="/assets/img/images/history_img01.jpg" alt="" />
217 </li>
218 <li>
219 <img src="/assets/img/images/history_img02.jpg" alt="" />
220 <VideoPopup />
221 </li>
222 <li>
223 <img src="/assets/img/images/history_img03.jpg" alt="" />
224 </li>
225 </ul>
226 </div>
227 </div>
228 <div className="col-lg-6">
229 <div className="history-content">
230 <div className="section-title mb-20">
231 <span className="sub-title">Our Roofing History</span>
232 <h2 className="title">
233 Our Roofing Legacy: Over 30 Years of Excellence
234 </h2>
235 </div>
236 <p>
237 For more than three decades, Shaun Lake has been at the
238 forefront of the roofing industry, building a reputation for
239 exceptional quality and reliability. Starting as a small,
240 local business in Kansas City, MO, Shaun's dedication to
241 craftsmanship and customer satisfaction has driven the
242 company’s growth and success. Today, Shaun Lake Roofing is
243 known for its expertise, innovative solutions, and
244 unwavering commitment to excellence, serving clients both
245 locally and beyond. Our rich history is a testament to our
246 enduring values and the trust we've earned from countless
247 satisfied customers.
248 </p>
249 <div className="history-list">
250 <ul className="list-wrap">
251 <li>
252 <i className="fas fa-check-circle" />
253 Technology management
254 </li>
255 <li>
256 <i className="fas fa-check-circle" />
257 Roofing Solutions
258 </li>
259 <li>
260 <i className="fas fa-check-circle" />
261 Modern Worker Working here
262 </li>
263 <li>
264 <i className="fas fa-check-circle" />
265 Quick Response
266 </li>
267 </ul>
268 </div>
269 </div>
270 </div>
271 </div>
272 </div>
273 </section>
274 {/* history-area-end */}
275 {/* area-bg */}
276 <div
277 className="area-bg-five"
278 data-background="/assets/img/bg/area_bg05.jpg"
279 >
280 {/* team-area */}
281 <Team1 />
282 {/* team-area-end */}
283 {/* testimonial-area */}
284 <section className="inner-testimonial-area parallax pb-120 position-relative">
285 <div className="container">
286 <div className="row justify-content-center">
287 <div className="col-xl-6">
288 <div className="section-title text-center mb-50">
289 <span className="sub-title">Our Testimonial</span>
290 <h2 className="title">What Our Client Feedback</h2>
291 </div>
292 </div>
293 </div>
294 <div className="row justify-content-center">
295 <div className="col-lg-10">
296 <div className="testimonial-inner">
297 <Slider {...settings} className="testimonial-active-two">
298 {testimonialData.map((item, index) => (
299 <TestimonialItem
300 key={`testimonial-${index}`}
301 {...item}
302 />
303 ))}
304 </Slider>
305 </div>
306 </div>
307 </div>
308 <div className="testimonial-avatar-wrap">
309 <ul className="list-wrap">
310 <li>
311 <img
312 src="/assets/img/images/h4_testi_avatar01.png"
313 className="layer"
314 data-depth="0.1"
315 alt=""
316 />
317 </li>
318 <li>
319 <img
320 src="/assets/img/images/h4_testi_avatar02.png"
321 className="layer"
322 data-depth="0.2"
323 alt=""
324 />
325 </li>
326 <li>
327 <img
328 src="/assets/img/images/h4_testi_avatar03.png"
329 className="layer"
330 data-depth="0.05"
331 alt=""
332 />
333 </li>
334 <li>
335 <img
336 src="/assets/img/images/h4_testi_avatar03.png"
337 className="layer"
338 data-depth="0.2"
339 alt=""
340 />
341 </li>
342 <li>
343 <img
344 src="/assets/img/images/h4_testi_avatar02.png"
345 className="layer"
346 data-depth="0.05"
347 alt=""
348 />
349 </li>
350 <li>
351 <img
352 src="/assets/img/images/h4_testi_avatar01.png"
353 className="layer"
354 data-depth="0.1"
355 alt=""
356 />
357 </li>
358 </ul>
359 </div>
360 </div>
361 </section>
362 {/* testimonial-area-end */}
363 </div>
364 {/* area-bg-end */}
365 {/* brand-area */}
366 <Brand3 />
367 </Layout>
368 </>
369 );
370}