irongit
Sign inRegister
huncholanehuncholane/slroofPublic

json services area

huncholanehuncholaneauthored
parent bd0a8dccommit e75d210792a5245c9a7c87e5ffbf23e7e4cec6a3Browse files

3 files changed, +104 -138

+6-6components/data/serviceData.js
@@ -29,7 +29,7 @@ export class ServiceData {
2929 highlight: "areas",
3030 title: "Siding Corner",
3131 description: "We specialize in siding corner installations.",
32- icon: "/assets/img/icon/service_icon04.svg",
32+ icon: "/assets/img/icon/services_icon01.svg",
3333 },
3434 {
3535 id: "roofing-layers",
@@ -37,21 +37,21 @@ export class ServiceData {
3737 title: "Roofing Layers",
3838 description:
3939 "We offer multiple layers of roofing for added protection.",
40- icon: "/assets/img/icon/service",
40+ icon: "/assets/img/icon/services_icon02.svg",
4141 },
4242 {
4343 id: "roof-repair",
4444 highlight: "areas",
4545 title: "Roof Repair",
4646 description: "We can repair any type of roof damage.",
47- icon: "/assets/img/icon/service_icon06.svg",
47+ icon: "/assets/img/icon/services_icon03.svg",
4848 },
4949 {
5050 id: "roof-renovation",
5151 highlight: "areas",
5252 title: "Roof Renovation",
5353 description: "We can renovate your roof to look brand new.",
54- icon: "/assets/img/icon/service_icon07.svg",
54+ icon: "/assets/img/icon/services_icon04.svg",
5555 },
5656 {
5757 id: "roof-maintenance",
@@ -59,14 +59,14 @@ export class ServiceData {
5959 title: "Roof Maintenance",
6060 description:
6161 "We offer maintenance services to keep your roof in top shape.",
62- icon: "/assets/img/icon/service_icon08.svg",
62+ icon: "/assets/img/icon/services_icon05.svg",
6363 },
6464 {
6565 id: "roof-animation",
6666 highlight: "areas",
6767 title: "Roof Animation",
6868 description: "We can create a 3D animation of your roof.",
69- icon: "/assets/img/icon/service_icon09.svg",
69+ icon: "/assets/img/icon/services_icon06.svg",
7070 },
7171 ];
7272 }
+98-132components/sections/Services1.js
@@ -1,137 +1,103 @@
1-import Link from "next/link"
2-import { useState } from 'react'
1+import Link from "next/link";
2+import { useState } from "react";
3+import { ServiceData } from "../data/serviceData";
4+
5+function ServiceItem(props) {
6+ const aboutLink = "/services/" + props.id;
7+ return (
8+ <div className="col-lg-4 col-md-6 col-sm-10">
9+ <div
10+ className="services-item wow fadeInUp"
11+ data-wow-delay=".2s"
12+ data-background="/assets/img/services/services_item01.jpg"
13+ onMouseEnter={() => props.handleToggle(props.number)}
14+ onMouseLeave={() => props.handleToggle(props.number)}
15+ >
16+ <div
17+ className="services-icon"
18+ style={{
19+ display: `${props.isActive.key == props.number ? "none" : "flex"}`,
20+ }}
21+ >
22+ <img src={props.icon} alt="" />
23+ </div>
24+ <div className="services-content">
25+ <h2
26+ className="title"
27+ style={{
28+ display: `${
29+ props.isActive.key == props.number ? "none" : "block"
30+ }`,
31+ }}
32+ >
33+ <Link href={aboutLink}>{props.title}</Link>
34+ </h2>
35+ <h2 className="number">{props.number}</h2>
36+ </div>
37+ <div
38+ className="services-overlay-content"
39+ style={{
40+ display: `${props.isActive.key == props.number ? "block" : "none"}`,
41+ }}
42+ >
43+ <h2 className="title">
44+ <Link href={aboutLink}>{props.title}</Link>
45+ </h2>
46+ <p>{props.description}</p>
47+ <Link href={aboutLink} className="read-more">
48+ Read More <i className="fas fa-arrow-right" />
49+ </Link>
50+ </div>
51+ </div>
52+ </div>
53+ );
54+}
355
456 export default function Services1() {
5- const [isActive, setIsActive] = useState({
6- status: false,
7- key: "",
8- })
57+ const [isActive, setIsActive] = useState({
58+ status: false,
59+ key: "",
60+ });
961
10- const handleToggle = (key) => {
11- if (isActive.key === key) {
12- setIsActive({
13- status: false,
14- })
15- } else {
16- setIsActive({
17- status: true,
18- key,
19- })
20- }
62+ const handleToggle = (key) => {
63+ if (isActive.key === key) {
64+ setIsActive({
65+ status: false,
66+ });
67+ } else {
68+ setIsActive({
69+ status: true,
70+ key,
71+ });
2172 }
22- return (
23- <>
24- <section className="services-area">
25- <div className="container">
26- <div className="row justify-content-center">
27- <div className="col-lg-6">
28- <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
29- <span className="sub-title tg-element-title">What We Do</span>
30- <h2 className="title tg-element-title">Our Services Areas</h2>
31- </div>
32- </div>
33- </div>
34- <div className="row justify-content-center">
35- <div className="col-lg-4 col-md-6 col-sm-10">
36- <div className="services-item wow fadeInUp" data-wow-delay=".2s" data-background="/assets/img/services/services_item01.jpg" onMouseEnter={() => handleToggle(1)} onMouseLeave={() => handleToggle(1)}>
37- <div className="services-icon" style={{ display: `${isActive.key == 1 ? "none" : "flex"}` }}>
38- <img src="/assets/img/icon/services_icon01.svg" alt="" />
39- </div>
40- <div className="services-content">
41- <h2 className="title" style={{ display: `${isActive.key == 1 ? "none" : "block"}` }}><Link href="/services-details">Siding Corner</Link></h2>
42- <h2 className="number">01</h2>
43- </div>
44- <div className="services-overlay-content" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
45- <h2 className="title"><Link href="/services-details">Siding Corner</Link></h2>
46- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
47- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
48- </div>
49- </div>
50- </div>
51- <div className="col-lg-4 col-md-6 col-sm-10">
52- <div className="services-item wow fadeInUp" data-wow-delay=".4s" data-background="/assets/img/services/services_item02.jpg" onMouseEnter={() => handleToggle(2)} onMouseLeave={() => handleToggle(2)}>
53- <div className="services-icon" style={{ display: `${isActive.key == 2 ? "none" : "flex"}` }}>
54- <img src="/assets/img/icon/services_icon02.svg" alt="" />
55- </div>
56- <div className="services-content">
57- <h2 className="title" style={{ display: `${isActive.key == 2 ? "none" : "block"}` }}><Link href="/services-details">Roofing Layers</Link></h2>
58- <h2 className="number">02</h2>
59- </div>
60- <div className="services-overlay-content" style={{ display: `${isActive.key == 2 ? "block" : "none"}` }}>
61- <h2 className="title"><Link href="/services-details">Roofing Layers</Link></h2>
62- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
63- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
64- </div>
65- </div>
66- </div>
67- <div className="col-lg-4 col-md-6 col-sm-10">
68- <div className="services-item wow fadeInUp" data-wow-delay=".6s" data-background="/assets/img/services/services_item03.jpg" onMouseEnter={() => handleToggle(3)} onMouseLeave={() => handleToggle(3)}>
69- <div className="services-icon" style={{ display: `${isActive.key == 3 ? "none" : "flex"}` }}>
70- <img src="/assets/img/icon/services_icon03.svg" alt="" />
71- </div>
72- <div className="services-content">
73- <h2 className="title" style={{ display: `${isActive.key == 3 ? "none" : "block"}` }}><Link href="/services-details">Roof Repairings</Link></h2>
74- <h2 className="number">03</h2>
75- </div>
76- <div className="services-overlay-content" style={{ display: `${isActive.key == 3 ? "block" : "none"}` }}>
77- <h2 className="title"><Link href="/services-details">Roof Repairings</Link></h2>
78- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
79- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
80- </div>
81- </div>
82- </div>
83- <div className="col-lg-4 col-md-6 col-sm-10">
84- <div className="services-item wow fadeInUp" data-wow-delay=".3s" data-background="/assets/img/services/services_item04.jpg" onMouseEnter={() => handleToggle(4)} onMouseLeave={() => handleToggle(4)}>
85- <div className="services-icon" style={{ display: `${isActive.key == 4 ? "none" : "flex"}` }}>
86- <img src="/assets/img/icon/services_icon04.svg" alt="" />
87- </div>
88- <div className="services-content">
89- <h2 className="title" style={{ display: `${isActive.key == 4 ? "none" : "block"}` }}><Link href="/services-details">Roof Renovation</Link></h2>
90- <h2 className="number">04</h2>
91- </div>
92- <div className="services-overlay-content" style={{ display: `${isActive.key == 4 ? "block" : "none"}` }}>
93- <h2 className="title"><Link href="/services-details">Roof Renovation</Link></h2>
94- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
95- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
96- </div>
97- </div>
98- </div>
99- <div className="col-lg-4 col-md-6 col-sm-10">
100- <div className="services-item wow fadeInUp" data-wow-delay=".6s" data-background="/assets/img/services/services_item05.jpg" onMouseEnter={() => handleToggle(5)} onMouseLeave={() => handleToggle(5)}>
101- <div className="services-icon" style={{ display: `${isActive.key == 5 ? "none" : "flex"}` }}>
102- <img src="/assets/img/icon/services_icon05.svg" alt="" />
103- </div>
104- <div className="services-content">
105- <h2 className="title" style={{ display: `${isActive.key == 5 ? "none" : "block"}` }}><Link href="/services-details">Damage Roofing</Link></h2>
106- <h2 className="number">05</h2>
107- </div>
108- <div className="services-overlay-content" style={{ display: `${isActive.key == 5 ? "block" : "none"}` }}>
109- <h2 className="title"><Link href="/services-details">Damage Roofing</Link></h2>
110- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
111- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
112- </div>
113- </div>
114- </div>
115- <div className="col-lg-4 col-md-6 col-sm-10">
116- <div className="services-item wow fadeInUp" data-wow-delay=".9s" data-background="/assets/img/services/services_item06.jpg" onMouseEnter={() => handleToggle(6)} onMouseLeave={() => handleToggle(6)}>
117- <div className="services-icon" style={{ display: `${isActive.key == 6 ? "none" : "flex"}` }}>
118- <img src="/assets/img/icon/services_icon06.svg" alt="" />
119- </div>
120- <div className="services-content">
121- <h2 className="title" style={{ display: `${isActive.key == 6 ? "none" : "block"}` }}><Link href="/services-details">Roofing Animation</Link></h2>
122- <h2 className="number">06</h2>
123- </div>
124- <div className="services-overlay-content" style={{ display: `${isActive.key == 6 ? "block" : "none"}` }}>
125- <h2 className="title"><Link href="/services-details">Roofing Animation</Link></h2>
126- <p>There are many variations of passages of Lorem a Ipsum available, but the majority have suffered ali teration in some form</p>
127- <Link href="/services-details" className="read-more">Read More <i className="fas fa-arrow-right" /></Link>
128- </div>
129- </div>
130- </div>
131- </div>
132- </div>
133- </section>
134-
135- </>
136- )
73+ };
74+ const serviceData = new ServiceData();
75+ const services = serviceData.findHighlights("areas");
76+ return (
77+ <>
78+ <section className="services-area">
79+ <div className="container">
80+ <div className="row justify-content-center">
81+ <div className="col-lg-6">
82+ <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
83+ <span className="sub-title tg-element-title">What We Do</span>
84+ <h2 className="title tg-element-title">Our Services Areas</h2>
85+ </div>
86+ </div>
87+ </div>
88+ <div className="row justify-content-center">
89+ {services.map((service, index) => (
90+ <ServiceItem
91+ key={`service-${index}`}
92+ {...service}
93+ number={index}
94+ handleToggle={handleToggle}
95+ isActive={isActive}
96+ />
97+ ))}
98+ </div>
99+ </div>
100+ </section>
101+ </>
102+ );
137103 }
+0-0public/assets/img/favicon.png → public/assets/img/favicon copy.png

No content changes (mode or rename only).