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