117 lines
3.1 KiB
React
117 lines
3.1 KiB
React
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import Swiper from "swiper"
|
|
import { Pagination, Autoplay, FreeMode } from "swiper/modules"
|
|
|
|
import "swiper/css"
|
|
import "swiper/css/pagination"
|
|
|
|
export default function Trades() {
|
|
|
|
useEffect(() => {
|
|
const swiper = new Swiper(".tradesSwiper", {
|
|
modules: [Pagination, Autoplay, FreeMode],
|
|
|
|
loop: true,
|
|
slidesPerView: 3,
|
|
spaceBetween: 25,
|
|
speed: 1500,
|
|
|
|
autoplay: {
|
|
delay: 0,
|
|
disableOnInteraction: false,
|
|
},
|
|
|
|
freeMode: true,
|
|
freeModeMomentum: false,
|
|
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
},
|
|
|
|
breakpoints: {
|
|
0: { slidesPerView: 1 },
|
|
768: { slidesPerView: 2 },
|
|
1024: { slidesPerView: 3 }
|
|
}
|
|
})
|
|
|
|
return () => swiper.destroy() // cleanup
|
|
}, [])
|
|
|
|
return (
|
|
<section className="trades-section">
|
|
<div className="container">
|
|
|
|
<div className="trades-top">
|
|
<div>
|
|
<span className="tag">Meet Our Trades</span>
|
|
<h2>
|
|
HouseCoin's specialized capabilities are <br />
|
|
driven by <span>expert craftsmen.</span>
|
|
</h2>
|
|
</div>
|
|
<a href="#" className="btn-primary-custom">Explore All Trades</a>
|
|
</div>
|
|
|
|
<div className="swiper tradesSwiper">
|
|
<div className="swiper-wrapper">
|
|
|
|
{[
|
|
{
|
|
img: "/assets/images/trader1.png",
|
|
title: "Woodwork",
|
|
name: "Mark S",
|
|
role: "Lead Carpenter",
|
|
desc: "Specializes in building robust frameworks and custom woodwork."
|
|
},
|
|
{
|
|
img: "/assets/images/trader2.png",
|
|
title: "Electrical",
|
|
name: "John D",
|
|
role: "Senior Electrician",
|
|
desc: "Expert in wiring systems and smart installations."
|
|
},
|
|
{
|
|
img: "/assets/images/trader3.png",
|
|
title: "Plumbing",
|
|
name: "David R",
|
|
role: "Master Plumber",
|
|
desc: "Handles modern plumbing systems with precision."
|
|
},
|
|
{
|
|
img: "/assets/images/Masonry.png",
|
|
title: "Masonry",
|
|
name: "Alex K",
|
|
role: "Interior Specialist",
|
|
desc: "Delivers premium finishes and detailing."
|
|
}
|
|
].map((item, i) => (
|
|
<div key={i} className="swiper-slide trade-card">
|
|
<img src={item.img} alt="" />
|
|
<div className="overlay"></div>
|
|
|
|
<div className="content">
|
|
<h3>{item.title}</h3>
|
|
<div className="info">
|
|
<h4>{item.name}</h4>
|
|
<span>{item.role}</span>
|
|
<p>{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
</div>
|
|
|
|
{/* ✅ PAGINATION DOTS */}
|
|
<div className="swiper-pagination"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
)
|
|
} |