Upload Next.js project

2026-04-27 15:32:30 +05:30
parent a09a9d120b
commit 5a68ef59f9
247 changed files with 6133 additions and 97 deletions
@@ -0,0 +1,117 @@
+"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>
+  )
+}