irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/services.js
279 lines22 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout"
2import Link from "next/link"
3import { useState } from 'react'
4import Counter2 from "@/components/sections/Counter2"
5
6export default function Service() {
7 const [isActive, setIsActive] = useState({
8 status: false,
9 key: "",
10 })
11
12 const handleToggle = (key) => {
13 if (isActive.key === key) {
14 setIsActive({
15 status: false,
16 })
17 } else {
18 setIsActive({
19 status: true,
20 key,
21 })
22 }
23 }
24 return (
25 <>
26 <Layout breadcrumbTitle="Services">
27 <div>
28 <section className="inner-services-area pt-115 pb-90">
29 <div className="container">
30 <div className="row justify-content-center">
31 <div className="col-lg-6">
32 <div className="section-title text-center mb-50">
33 <span className="sub-title">What We Do</span>
34 <h2 className="title">Our Services Areas</h2>
35 </div>
36 </div>
37 </div>
38 <div className="row justify-content-center">
39 <div className="col-lg-4 col-md-6 col-sm-10">
40 <div className="services-item wow fadeInUp" data-wow-delay=".2s" data-background="/assets/img/services/services_item01.jpg" onMouseEnter={() => handleToggle(1)} onMouseLeave={() => handleToggle(1)}>
41 <div className="services-icon" style={{ display: `${isActive.key == 1 ? "none" : "flex"}` }}>
42 <img src="/assets/img/icon/services_icon01.svg" alt="" />
43 </div>
44 <div className="services-content">
45 <h2 className="title" style={{ display: `${isActive.key == 1 ? "none" : "block"}` }}><Link href="/services-details">Siding Corner</Link></h2>
46 <h2 className="number">01</h2>
47 </div>
48 <div className="services-overlay-content" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
49 <h2 className="title"><Link href="/services-details">Siding Corner</Link></h2>
50 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
51 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
52 </div>
53 </div>
54 </div>
55 <div className="col-lg-4 col-md-6 col-sm-10">
56 <div className="services-item wow fadeInUp" data-wow-delay=".4s" data-background="/assets/img/services/services_item02.jpg" onMouseEnter={() => handleToggle(2)} onMouseLeave={() => handleToggle(2)}>
57 <div className="services-icon" style={{ display: `${isActive.key == 2 ? "none" : "flex"}` }}>
58 <img src="/assets/img/icon/services_icon02.svg" alt="" />
59 </div>
60 <div className="services-content">
61 <h2 className="title" style={{ display: `${isActive.key == 2 ? "none" : "block"}` }}><Link href="/services-details">Roofing Layers</Link></h2>
62 <h2 className="number">02</h2>
63 </div>
64 <div className="services-overlay-content" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
65 <h2 className="title"><Link href="/services-details">Roofing Layers</Link></h2>
66 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
67 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
68 </div>
69 </div>
70 </div>
71 <div className="col-lg-4 col-md-6 col-sm-10">
72 <div className="services-item wow fadeInUp" data-wow-delay=".6s" data-background="/assets/img/services/services_item03.jpg" onMouseEnter={() => handleToggle(3)} onMouseLeave={() => handleToggle(3)}>
73 <div className="services-icon" style={{ display: `${isActive.key == 3 ? "none" : "flex"}` }}>
74 <img src="/assets/img/icon/services_icon03.svg" alt="" />
75 </div>
76 <div className="services-content">
77 <h2 className="title" style={{ display: `${isActive.key == 3 ? "none" : "block"}` }}><Link href="/services-details">Roof Repairings</Link></h2>
78 <h2 className="number">03</h2>
79 </div>
80 <div className="services-overlay-content" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
81 <h2 className="title"><Link href="/services-details">Roof Repairings</Link></h2>
82 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
83 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
84 </div>
85 </div>
86 </div>
87 <div className="col-lg-4 col-md-6 col-sm-10">
88 <div className="services-item wow fadeInUp" data-wow-delay=".3s" data-background="/assets/img/services/services_item04.jpg" onMouseEnter={() => handleToggle(4)} onMouseLeave={() => handleToggle(4)}>
89 <div className="services-icon" style={{ display: `${isActive.key == 4 ? "none" : "flex"}` }}>
90 <img src="/assets/img/icon/services_icon04.svg" alt="" />
91 </div>
92 <div className="services-content">
93 <h2 className="title" style={{ display: `${isActive.key == 4 ? "none" : "block"}` }}><Link href="/services-details">Roof Renovation</Link></h2>
94 <h2 className="number">04</h2>
95 </div>
96 <div className="services-overlay-content" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
97 <h2 className="title"><Link href="/services-details">Roof Renovation</Link></h2>
98 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
99 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
100 </div>
101 </div>
102 </div>
103 <div className="col-lg-4 col-md-6 col-sm-10">
104 <div className="services-item wow fadeInUp" data-wow-delay=".6s" data-background="/assets/img/services/services_item05.jpg" onMouseEnter={() => handleToggle(5)} onMouseLeave={() => handleToggle(5)}>
105 <div className="services-icon" style={{ display: `${isActive.key == 5 ? "none" : "flex"}` }}>
106 <img src="/assets/img/icon/services_icon05.svg" alt="" />
107 </div>
108 <div className="services-content">
109 <h2 className="title" style={{ display: `${isActive.key == 5 ? "none" : "block"}` }}><Link href="/services-details">Damage Roofing</Link></h2>
110 <h2 className="number">05</h2>
111 </div>
112 <div className="services-overlay-content" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
113 <h2 className="title"><Link href="/services-details">Damage Roofing</Link></h2>
114 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
115 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
116 </div>
117 </div>
118 </div>
119 <div className="col-lg-4 col-md-6 col-sm-10">
120 <div className="services-item wow fadeInUp" data-wow-delay=".9s" data-background="/assets/img/services/services_item06.jpg" onMouseEnter={() => handleToggle(6)} onMouseLeave={() => handleToggle(6)}>
121 <div className="services-icon" style={{ display: `${isActive.key == 6 ? "none" : "flex"}` }}>
122 <img src="/assets/img/icon/services_icon06.svg" alt="" />
123 </div>
124 <div className="services-content">
125 <h2 className="title" style={{ display: `${isActive.key == 6 ? "none" : "block"}` }}><Link href="/services-details">Roofing Animation</Link></h2>
126 <h2 className="number">06</h2>
127 </div>
128 <div className="services-overlay-content" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
129 <h2 className="title"><Link href="/services-details">Roofing Animation</Link></h2>
130 <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
131 <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
132 </div>
133 </div>
134 </div>
135 </div>
136 </div>
137 </section>
138 {/* services-area-end */}
139 {/* area-bg */}
140 <div className="area-bg">
141 <div className="area-background-img jarallax" data-background="/assets/img/bg/area_bg01.jpg" />
142 {/* counter-area */}
143 <Counter2 />
144 {/* counter-area-end */}
145 {/* appointment-area */}
146 <section className="appointment-area pt-115">
147 <div className="container">
148 <div className="row">
149 <div className="col-lg-12">
150 <div className="section-title white-title mb-60">
151 <span className="sub-title">Your roof require professional attention</span>
152 <h2 className="title">Book Your Appointment</h2>
153 </div>
154 </div>
155 </div>
156 <div className="appointment-inner" data-background="/assets/img/bg/appointment_bg.jpg">
157 <div className="row">
158 <div className="col-xl-7">
159 <div className="appointment-form">
160 <form action="#">
161 <div className="row">
162 <div className="col-md-6">
163 <div className="form-grp">
164 <input id="name" type="text" placeholder="Fast Name" />
165 <label htmlFor="name"><i className="fas fa-user" /></label>
166 </div>
167 </div>
168 <div className="col-md-6">
169 <div className="form-grp">
170 <input id="lastName" type="text" placeholder="Last Name" />
171 <label htmlFor="lastName"><i className="fas fa-user" /></label>
172 </div>
173 </div>
174 <div className="col-md-6">
175 <div className="form-grp">
176 <input id="phone" type="text" placeholder="Phone Number" />
177 <label htmlFor="phone"><i className="fas fa-phone-alt" /></label>
178 </div>
179 </div>
180 <div className="col-md-6">
181 <div className="form-grp">
182 <input id="email" type="text" placeholder="Email Address" />
183 <label htmlFor="email"><i className="fas fa-envelope" /></label>
184 </div>
185 </div>
186 <div className="col-md-12">
187 <div className="form-grp">
188 <input id="location" type="text" placeholder="Address" />
189 <label htmlFor="location"><i className="fas fa-map-marker-alt" /></label>
190 </div>
191 </div>
192 <div className="col-md-6">
193 <div className="form-grp select-grp">
194 <select name="city" className="orderby">
195 <option value="City / Town">City / Town</option>
196 <option value="Dhaka, Bangladesh">Dhaka, Bangladesh</option>
197 <option value="Baltimore, MD">Baltimore, MD</option>
198 <option value="New York, NY">New York, NY</option>
199 <option value="New Orleans, LA">New Orleans, LA</option>
200 </select>
201 </div>
202 </div>
203 <div className="col-md-6">
204 <div className="form-grp select-grp">
205 <select name="state" className="orderby">
206 <option value="State">State</option>
207 <option value="Dhaka, Bangladesh">Dhaka, Bangladesh</option>
208 <option value="Baltimore, MD">Baltimore, MD</option>
209 <option value="New York, NY">New York, NY</option>
210 <option value="New Orleans, LA">New Orleans, LA</option>
211 </select>
212 </div>
213 </div>
214 </div>
215 <div className="form-grp">
216 <textarea name="message" placeholder="Message" />
217 </div>
218 <button type="submit" className="btn">Request Submit Now</button>
219 </form>
220 </div>
221 </div>
222 <div className="col-xl-5">
223 <div className="appointment-img">
224 <img src="/assets/img/images/appointment_img.png" alt="" />
225 </div>
226 </div>
227 </div>
228 </div>
229 </div>
230 </section>
231 {/* appointment-area-end */}
232 </div>
233 {/* area-bg-end */}
234 {/* support-area */}
235 <section className="support-area pt-115 pb-70">
236 <div className="container">
237 <div className="row justify-content-center">
238 <div className="col-xl-4 col-md-6">
239 <div className="support-item">
240 <div className="support-icon">
241 <img src="/assets/img/icon/support_icon01.svg" alt="" />
242 </div>
243 <div className="support-content">
244 <h4 className="title">Quick Response</h4>
245 <p>There are many variations of passages Ipsum available but the</p>
246 </div>
247 </div>
248 </div>
249 <div className="col-xl-4 col-md-6">
250 <div className="support-item">
251 <div className="support-icon">
252 <img src="/assets/img/icon/support_icon02.svg" alt="" />
253 </div>
254 <div className="support-content">
255 <h4 className="title">Quick Response</h4>
256 <p>There are many variations of passages Ipsum available but the</p>
257 </div>
258 </div>
259 </div>
260 <div className="col-xl-4 col-md-6">
261 <div className="support-item">
262 <div className="support-icon">
263 <img src="/assets/img/icon/support_icon03.svg" alt="" />
264 </div>
265 <div className="support-content">
266 <h4 className="title">Quick Response</h4>
267 <p>There are many variations of passages Ipsum available but the</p>
268 </div>
269 </div>
270 </div>
271 </div>
272 </div>
273 </section>
274 </div>
275
276 </Layout>
277 </>
278 )
279}