-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
59a5f63
commit c9e3c9a
Showing
5 changed files
with
109 additions
and
256 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,29 @@ | ||
| import React, { useState, useRef, useEffect } from "react"; | ||
| import React from "react"; | ||
| import { services } from "./services-list"; | ||
| import "../../css/services.css"; | ||
|
|
||
| const ServiceItem = React.memo(({ service, isExpanded, onClick }) => ( | ||
| <div | ||
| className={`service-item ${isExpanded ? "expanded" : ""}`} | ||
| onClick={onClick} | ||
| tabIndex={0} | ||
| role="button" | ||
| aria-expanded={isExpanded} | ||
| onKeyDown={(e) => e.key === "Enter" && onClick()} | ||
| > | ||
| <div className="service-header"> | ||
| <h3>{service.title}</h3> | ||
| <span className="service-arrow">▸</span> | ||
| </div> | ||
| <div className="service-description" aria-hidden={!isExpanded}> | ||
| <p>{service.description}</p> | ||
| </div> | ||
| </div> | ||
| )); | ||
|
|
||
| const Services = ({ services }) => { | ||
| const [expandedServiceId, setExpandedServiceId] = useState(null); | ||
| const servicesSectionRef = useRef(null); | ||
|
|
||
| const toggleService = (id) => { | ||
| setExpandedServiceId(prevId => prevId === id ? null : id); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const handleClickOutside = (event) => { | ||
| if ( | ||
| servicesSectionRef.current && | ||
| !servicesSectionRef.current.contains(event.target) | ||
| ) { | ||
| setExpandedServiceId(null); | ||
| } | ||
| }; | ||
|
|
||
| document.addEventListener("mousedown", handleClickOutside); | ||
| return () => { | ||
| document.removeEventListener("mousedown", handleClickOutside); | ||
| }; | ||
| }, []); | ||
| const ServiceItem = () => { | ||
|
|
||
| return ( | ||
| <section className="services-section" ref={servicesSectionRef}> | ||
| <h2>Our Services</h2> | ||
| <div className="services-grid"> | ||
| {services.map((service) => ( | ||
| <ServiceItem | ||
| key={service.id} | ||
| service={service} | ||
| isExpanded={expandedServiceId === service.id} | ||
| onClick={() => toggleService(service.id)} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| <div className="services-page"> | ||
| <section className="our-services"> | ||
| <h2>Our Services</h2> | ||
| <p> | ||
| We offer a comprehensive range of services for both residential and | ||
| commercial clients: | ||
| </p> | ||
| <div className="services-grid"> | ||
| {services.map((service, index) => ( | ||
| <div key={index} className="service-item"> | ||
| <i className={`fas ${service.icon}`}></i> | ||
| <h3>{service.title}</h3> | ||
| <p>{service.description}</p> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| </div> | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| export default React.memo(Services); | ||
| export default React.memo(ServiceItem); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,69 +1,111 @@ | ||
| /* Services section styles */ | ||
| .services-section { | ||
| margin-bottom: 40px; | ||
| :root { | ||
| --primary-color: var(--main-red); | ||
| --secondary-color: var(--link-red); | ||
| --text-color: var(--main-black); | ||
| --background-color: #f9f9f9; | ||
| --card-background: #ffffff; | ||
| --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .services-section h2 { | ||
| font-size: xx-large; | ||
| margin-bottom: 40px; | ||
| text-align: center; | ||
| color: var(--services-gallery-text-color); | ||
| .services-page { | ||
| max-width: 1200px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| font-family: 'Arial', sans-serif; | ||
| color: var(--text-color); | ||
| background-color: var(--background-color); | ||
| } | ||
|
|
||
| .services-grid { | ||
| .our-services { | ||
| margin-bottom: 4rem; | ||
| } | ||
|
|
||
| .services-list { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | ||
| gap: 20px; | ||
| gap: 1.5rem; | ||
| list-style-type: none; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .service-item { | ||
| background-color: var(--services-gallery-background-color); | ||
| padding: 20px; | ||
| .services-list li { | ||
| background-color: var(--card-background); | ||
| padding: 1.5rem; | ||
| border-radius: 8px; | ||
| transition: all 0.3s ease; | ||
| cursor: pointer; | ||
| overflow: hidden; | ||
| box-shadow: var(--card-shadow); | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .service-header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| .services-list li:hover { | ||
| transform: translateY(-5px); | ||
| } | ||
|
|
||
| .service-item h3 { | ||
| margin: 0; | ||
| color: var(--services-gallery-text-color); | ||
| .our-services { | ||
| margin-bottom: 4rem; | ||
| } | ||
|
|
||
| .our-services h2 { | ||
| color: var(--primary-color); | ||
| font-size: 2rem; | ||
| margin-bottom: 1.5rem; | ||
| position: relative; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
|
|
||
| .our-services h2::after { | ||
| content: ''; | ||
| position: absolute; | ||
| bottom: 0; | ||
| left: 0; | ||
| width: 50px; | ||
| height: 3px; | ||
| background-color: var(--secondary-color); | ||
| } | ||
|
|
||
| .service-arrow { | ||
| font-size: 1.5em; | ||
| .services-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(3, 1fr); | ||
| gap: 2rem; | ||
| } | ||
|
|
||
| .service-item { | ||
| background-color: var(--card-background); | ||
| padding: 1.5rem; | ||
| border-radius: 8px; | ||
| box-shadow: var(--card-shadow); | ||
| transition: transform 0.3s ease; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .service-description { | ||
| max-height: 0; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease; | ||
| .service-item:hover { | ||
| transform: translateY(-5px); | ||
| } | ||
|
|
||
| .service-item.expanded { | ||
| background-color: var(--services-gallery-primary-color); | ||
| .service-item i { | ||
| font-size: 2rem; | ||
| color: var(--primary-color); | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| .service-item h3 { | ||
| font-size: 1.2rem; | ||
| margin-bottom: 0.5rem; | ||
| color: var(--primary-color); | ||
| } | ||
|
|
||
| .service-item.expanded h3, | ||
| .service-item.expanded .service-arrow { | ||
| color: var(--gallery-secondary-color); | ||
| .service-item p { | ||
| font-size: 0.9rem; | ||
| color: var(--text-color); | ||
| } | ||
|
|
||
| .service-item.expanded .service-arrow { | ||
| transform: rotate(90deg); | ||
| @media (max-width: 1024px) { | ||
| .services-grid { | ||
| grid-template-columns: repeat(2, 1fr); | ||
| } | ||
| } | ||
|
|
||
| .service-item.expanded .service-description { | ||
| max-height: 1000px; /* Adjust this value based on your content */ | ||
| opacity: 1; | ||
| margin-top: 10px; | ||
| color: var(--gallery-secondary-color); | ||
| @media (max-width: 768px) { | ||
| .services-grid { | ||
| grid-template-columns: 1fr; | ||
| } | ||
| } |
Oops, something went wrong.