irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/about.js
603 lines25 KBJavaScript
RawDownloadHistory
1import VideoPopup from "@/components/elements/VideoPopup";
2import Layout from "@/components/layout/Layout";
3import Brand3 from "@/components/sections/Brand3";
4import Link from "next/link";
5import Slider from "react-slick";
6const settings = {
7 dots: true,
8 autoplay: true,
9 arrows: false,
10 infinite: true,
11 speed: 500,
12 slidesToShow: 1,
13 slidesToScroll: 1,
14};
15
16export default function About() {
17 return (
18 <>
19 <Layout breadcrumbTitle="About Us">
20 <section className="about-area inner-about-area pt-120 pb-120">
21 <div className="container">
22 <div className="row align-items-center">
23 <div className="col-xl-7 col-lg-6 order-0 order-lg-2">
24 <div className="about-img-wrap">
25 <img
26 src="/assets/img/images/about_img01.jpg"
27 alt=""
28 className="wow fadeInRight"
29 data-wow-delay=".4s"
30 />
31 <img
32 src="/assets/img/images/about_img02.jpg"
33 alt=""
34 className="wow fadeInRight"
35 data-wow-delay=".2s"
36 />
37 <div className="about-experiences-wrap">
38 <div className="experiences-item">
39 <div className="icon">
40 <img src="/assets/img/icon/about_icon01.svg" alt="" />
41 </div>
42 <div className="content">
43 <h6 className="title">
44 We have more than 10 years of experiences
45 </h6>
46 </div>
47 </div>
48 <div className="experiences-item">
49 <div className="icon">
50 <img src="/assets/img/icon/about_icon02.svg" alt="" />
51 </div>
52 <div className="content">
53 <h6 className="title">
54 We use professional and experienced person
55 </h6>
56 </div>
57 </div>
58 </div>
59 </div>
60 </div>
61 <div className="col-xl-5 col-lg-6">
62 <div className="about-content">
63 <div className="section-title mb-25">
64 <span className="sub-title">About Our Company</span>
65 <h2 className="title">
66 We’re Committed to Roofing Excellence
67 </h2>
68 </div>
69 <p>
70 There are many variations of passages of Lorem Ipsum
71 available, but the majori have suffered alteration in some
72 form, by injected humour, or randomised word which don't
73 look even slightly believable.
74 </p>
75 <div className="about-list">
76 <ul className="list-wrap">
77 <li>
78 <i className="fas fa-check" />
79 32k Partners have worked us.
80 </li>
81 <li>
82 <i className="fas fa-check" />
83 Professional and experienced human resources.
84 </li>
85 <li>
86 <i className="fas fa-check" />
87 Provide the best roof services
88 </li>
89 </ul>
90 </div>
91 <Link href="/about" className="btn">
92 Learn More
93 </Link>
94 </div>
95 </div>
96 </div>
97 </div>
98 </section>
99 {/* about-area-end */}
100 {/* work-area */}
101 <section className="work-area">
102 <div className="container">
103 <div className="row justify-content-center">
104 <div className="col-lg-8">
105 <div className="section-title text-center mb-50">
106 <span className="sub-title">Working Plan</span>
107 <h2 className="title">Roof Plan Working Process</h2>
108 </div>
109 </div>
110 </div>
111 <div className="row">
112 <div className="col-xl-3 col-md-6">
113 <div className="work-item">
114 <div className="work-thumb">
115 <img src="/assets/img/images/work_img01.png" alt="" />
116 <h4 className="number">01</h4>
117 </div>
118 <div className="work-content">
119 <h2 className="title">Plan for Roofing</h2>
120 <p>
121 Suffered alteration in some a form, by injected humour, or
122 randomised word
123 </p>
124 </div>
125 </div>
126 </div>
127 <div className="col-xl-3 col-md-6">
128 <div className="work-item">
129 <div className="work-thumb">
130 <img src="/assets/img/images/work_img02.png" alt="" />
131 <h4 className="number">02</h4>
132 </div>
133 <div className="work-content">
134 <h2 className="title">Schedule Estimate</h2>
135 <p>
136 Suffered alteration in some a form, by injected humour, or
137 randomised word
138 </p>
139 </div>
140 </div>
141 </div>
142 <div className="col-xl-3 col-md-6">
143 <div className="work-item">
144 <div className="work-thumb">
145 <img src="/assets/img/images/work_img03.png" alt="" />
146 <h4 className="number">03</h4>
147 </div>
148 <div className="work-content">
149 <h2 className="title">Install New Roof</h2>
150 <p>
151 Suffered alteration in some a form, by injected humour, or
152 randomised word
153 </p>
154 </div>
155 </div>
156 </div>
157 <div className="col-xl-3 col-md-6">
158 <div className="work-item">
159 <div className="work-thumb">
160 <img src="/assets/img/images/work_img04.png" alt="" />
161 <h4 className="number">04</h4>
162 </div>
163 <div className="work-content">
164 <h2 className="title">Enjoy Roofing</h2>
165 <p>
166 Suffered alteration in some a form, by injected humour, or
167 randomised word
168 </p>
169 </div>
170 </div>
171 </div>
172 </div>
173 </div>
174 </section>
175 {/* work-area-end */}
176 {/* history-area */}
177 <section className="history-area pt-120 pb-120">
178 <div className="container">
179 <div className="row align-items-center">
180 <div className="col-lg-6">
181 <div className="history-img-wrap">
182 <ul className="list-wrap">
183 <li>
184 <img src="/assets/img/images/history_img01.jpg" alt="" />
185 </li>
186 <li>
187 <img src="/assets/img/images/history_img02.jpg" alt="" />
188 <VideoPopup />
189 </li>
190 <li>
191 <img src="/assets/img/images/history_img03.jpg" alt="" />
192 </li>
193 </ul>
194 </div>
195 </div>
196 <div className="col-lg-6">
197 <div className="history-content">
198 <div className="section-title mb-20">
199 <span className="sub-title">Our Roofing History</span>
200 <h2 className="title">
201 Our Roofing Legacy: Over 30 Years of Excellence
202 </h2>
203 </div>
204 <p>
205 For more than three decades, Shaun Lake has been at the
206 forefront of the roofing industry, building a reputation for
207 exceptional quality and reliability. Starting as a small,
208 local business in Kansas City, MO, Shaun's dedication to
209 craftsmanship and customer satisfaction has driven the
210 company’s growth and success. Today, Shaun Lake Roofing is
211 known for its expertise, innovative solutions, and
212 unwavering commitment to excellence, serving clients both
213 locally and beyond. Our rich history is a testament to our
214 enduring values and the trust we've earned from countless
215 satisfied customers.
216 </p>
217 <div className="history-list">
218 <ul className="list-wrap">
219 <li>
220 <i className="fas fa-check-circle" />
221 Technology management
222 </li>
223 <li>
224 <i className="fas fa-check-circle" />
225 Roofing Solutions
226 </li>
227 <li>
228 <i className="fas fa-check-circle" />
229 Modern Worker Working here
230 </li>
231 <li>
232 <i className="fas fa-check-circle" />
233 Quick Response
234 </li>
235 </ul>
236 </div>
237 </div>
238 </div>
239 </div>
240 </div>
241 </section>
242 {/* history-area-end */}
243 {/* area-bg */}
244 <div
245 className="area-bg-five"
246 data-background="/assets/img/bg/area_bg05.jpg"
247 >
248 {/* team-area */}
249 <section className="inner-team-area pb-90">
250 <div className="container">
251 <div className="row justify-content-center">
252 <div className="col-lg-8">
253 <div className="section-title text-center mb-60">
254 <span className="sub-title">Professional Team</span>
255 <h2 className="title">Professional Team Member</h2>
256 </div>
257 </div>
258 </div>
259 <div className="row justify-content-center">
260 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
261 <div className="team-item">
262 <div className="team-thumb">
263 <Link href="/team-details">
264 <img src="/assets/img/team/team_img01.jpg" alt="" />
265 </Link>
266 <div className="team-social">
267 <ul className="list-wrap">
268 <li>
269 <Link href="#">
270 <i className="fab fa-facebook-f" />
271 </Link>
272 </li>
273 <li>
274 <Link href="#">
275 <i className="fab fa-linkedin-in" />
276 </Link>
277 </li>
278 <li>
279 <Link href="#">
280 <i className="fab fa-twitter" />
281 </Link>
282 </li>
283 <li>
284 <Link href="#">
285 <i className="fab fa-instagram" />
286 </Link>
287 </li>
288 </ul>
289 </div>
290 </div>
291 <div className="team-content">
292 <h2 className="title">
293 <Link href="/team-details">Robert C. Simmons</Link>
294 </h2>
295 <span>Roof Engineer</span>
296 </div>
297 </div>
298 </div>
299 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
300 <div className="team-item">
301 <div className="team-thumb">
302 <Link href="/team-details">
303 <img src="/assets/img/team/team_img02.jpg" alt="" />
304 </Link>
305 <div className="team-social">
306 <ul className="list-wrap">
307 <li>
308 <Link href="#">
309 <i className="fab fa-facebook-f" />
310 </Link>
311 </li>
312 <li>
313 <Link href="#">
314 <i className="fab fa-linkedin-in" />
315 </Link>
316 </li>
317 <li>
318 <Link href="#">
319 <i className="fab fa-twitter" />
320 </Link>
321 </li>
322 <li>
323 <Link href="#">
324 <i className="fab fa-instagram" />
325 </Link>
326 </li>
327 </ul>
328 </div>
329 </div>
330 <div className="team-content">
331 <h2 className="title">
332 <Link href="/team-details">Christopher Jhon</Link>
333 </h2>
334 <span>Roof Engineer</span>
335 </div>
336 </div>
337 </div>
338 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
339 <div className="team-item">
340 <div className="team-thumb">
341 <Link href="/team-details">
342 <img src="/assets/img/team/team_img03.jpg" alt="" />
343 </Link>
344 <div className="team-social">
345 <ul className="list-wrap">
346 <li>
347 <Link href="#">
348 <i className="fab fa-facebook-f" />
349 </Link>
350 </li>
351 <li>
352 <Link href="#">
353 <i className="fab fa-linkedin-in" />
354 </Link>
355 </li>
356 <li>
357 <Link href="#">
358 <i className="fab fa-twitter" />
359 </Link>
360 </li>
361 <li>
362 <Link href="#">
363 <i className="fab fa-instagram" />
364 </Link>
365 </li>
366 </ul>
367 </div>
368 </div>
369 <div className="team-content">
370 <h2 className="title">
371 <Link href="/team-details">Karikoka Ahli</Link>
372 </h2>
373 <span>Roof Engineer</span>
374 </div>
375 </div>
376 </div>
377 <div className="col-xl-3 col-lg-4 col-md-6 col-sm-10">
378 <div className="team-item">
379 <div className="team-thumb">
380 <Link href="/team-details">
381 <img src="/assets/img/team/team_img04.jpg" alt="" />
382 </Link>
383 <div className="team-social">
384 <ul className="list-wrap">
385 <li>
386 <Link href="#">
387 <i className="fab fa-facebook-f" />
388 </Link>
389 </li>
390 <li>
391 <Link href="#">
392 <i className="fab fa-linkedin-in" />
393 </Link>
394 </li>
395 <li>
396 <Link href="#">
397 <i className="fab fa-twitter" />
398 </Link>
399 </li>
400 <li>
401 <Link href="#">
402 <i className="fab fa-instagram" />
403 </Link>
404 </li>
405 </ul>
406 </div>
407 </div>
408 <div className="team-content">
409 <h2 className="title">
410 <Link href="/team-details">Dickerson MH</Link>
411 </h2>
412 <span>Roof Engineer</span>
413 </div>
414 </div>
415 </div>
416 </div>
417 </div>
418 </section>
419 {/* team-area-end */}
420 {/* testimonial-area */}
421 <section className="inner-testimonial-area parallax pb-120 position-relative">
422 <div className="container">
423 <div className="row justify-content-center">
424 <div className="col-xl-6">
425 <div className="section-title text-center mb-50">
426 <span className="sub-title">Our Testimonial</span>
427 <h2 className="title">What Our Client Feedback</h2>
428 </div>
429 </div>
430 </div>
431 <div className="row justify-content-center">
432 <div className="col-lg-10">
433 <div className="testimonial-inner">
434 <Slider {...settings} className="testimonial-active-two">
435 <div className="testimonial-item-two">
436 <div className="testimonial-avatar-two">
437 <img
438 src="/assets/img/images/h2_testi_avatar01.png"
439 alt=""
440 />
441 </div>
442 <div className="testimonial-content-two">
443 <div className="content-top">
444 <div className="icon">
445 <i className="fas fa-quote-left" />
446 </div>
447 <div className="rating">
448 <i className="fas fa-star" />
449 <i className="fas fa-star" />
450 <i className="fas fa-star" />
451 <i className="fas fa-star" />
452 <i className="fas fa-star" />
453 </div>
454 </div>
455 <p>
456 There are many varation of paissages of Lorem as the
457 Ipum available but our majority have sufferied
458 alterations in some form, by our by injected hsumour
459 randomised worids which don't looks even slightly
460 there as believable. If you going to use a passage
461 of Lorem Ipsum.
462 </p>
463 <div className="content-bottom">
464 <h4 className="title">Darrell Steward</h4>
465 <span>Roofing Expert</span>
466 </div>
467 </div>
468 </div>
469 <div className="testimonial-item-two">
470 <div className="testimonial-avatar-two">
471 <img
472 src="/assets/img/images/h2_testi_avatar02.png"
473 alt=""
474 />
475 </div>
476 <div className="testimonial-content-two">
477 <div className="content-top">
478 <div className="icon">
479 <i className="fas fa-quote-left" />
480 </div>
481 <div className="rating">
482 <i className="fas fa-star" />
483 <i className="fas fa-star" />
484 <i className="fas fa-star" />
485 <i className="fas fa-star" />
486 <i className="fas fa-star" />
487 </div>
488 </div>
489 <p>
490 Lorem Ipsum are many varation of paissages of Lorem
491 as the Ipum available but our majority have
492 sufferied alterations in some form, by our by
493 injected hsumour randomised worids which don't looks
494 even slightly there as believable. If you going to
495 use a passage of Lorem Ipsum.
496 </p>
497 <div className="content-bottom">
498 <h4 className="title">Robert C. Simmons</h4>
499 <span>Roofing Expert</span>
500 </div>
501 </div>
502 </div>
503 <div className="testimonial-item-two">
504 <div className="testimonial-avatar-two">
505 <img
506 src="/assets/img/images/h2_testi_avatar03.png"
507 alt=""
508 />
509 </div>
510 <div className="testimonial-content-two">
511 <div className="content-top">
512 <div className="icon">
513 <i className="fas fa-quote-left" />
514 </div>
515 <div className="rating">
516 <i className="fas fa-star" />
517 <i className="fas fa-star" />
518 <i className="fas fa-star" />
519 <i className="fas fa-star" />
520 <i className="fas fa-star" />
521 </div>
522 </div>
523 <p>
524 Lorem Ipsum are many varation of paissages of Lorem
525 as the Ipum available but our majority have
526 sufferied alterations in some form, by our by
527 injected hsumour randomised worids which don't looks
528 even slightly there as believable. If you going to
529 use a passage of Lorem Ipsum.
530 </p>
531 <div className="content-bottom">
532 <h4 className="title">Karikoka Ahli</h4>
533 <span>Executive Manager</span>
534 </div>
535 </div>
536 </div>
537 </Slider>
538 </div>
539 </div>
540 </div>
541 <div className="testimonial-avatar-wrap">
542 <ul className="list-wrap">
543 <li>
544 <img
545 src="/assets/img/images/h4_testi_avatar01.png"
546 className="layer"
547 data-depth="0.1"
548 alt=""
549 />
550 </li>
551 <li>
552 <img
553 src="/assets/img/images/h4_testi_avatar02.png"
554 className="layer"
555 data-depth="0.2"
556 alt=""
557 />
558 </li>
559 <li>
560 <img
561 src="/assets/img/images/h4_testi_avatar03.png"
562 className="layer"
563 data-depth="0.05"
564 alt=""
565 />
566 </li>
567 <li>
568 <img
569 src="/assets/img/images/h4_testi_avatar03.png"
570 className="layer"
571 data-depth="0.2"
572 alt=""
573 />
574 </li>
575 <li>
576 <img
577 src="/assets/img/images/h4_testi_avatar02.png"
578 className="layer"
579 data-depth="0.05"
580 alt=""
581 />
582 </li>
583 <li>
584 <img
585 src="/assets/img/images/h4_testi_avatar01.png"
586 className="layer"
587 data-depth="0.1"
588 alt=""
589 />
590 </li>
591 </ul>
592 </div>
593 </div>
594 </section>
595 {/* testimonial-area-end */}
596 </div>
597 {/* area-bg-end */}
598 {/* brand-area */}
599 <Brand3 />
600 </Layout>
601 </>
602 );
603}