52 lines
2.5 KiB
TypeScript
52 lines
2.5 KiB
TypeScript
import React, { useEffect } from "react";
|
|
import { caseStudies } from "@/utils/data";
|
|
|
|
const ProjectsSection = () => {
|
|
return (
|
|
<section className="project-slider-section section-space fix">
|
|
<div className="small-container">
|
|
<div className="row">
|
|
<div className="col-xxl-6">
|
|
<div className="title-box mb-50 wow fadeInLeft" data-wow-delay=".5s">
|
|
<span className="section-sub-title no-border">PROJECTS</span>
|
|
<h3 className="section-title mt-10">Explore Our Recent Projects</h3>
|
|
</div>
|
|
</div>
|
|
<div className="col-xxl-6">
|
|
<div className="project_1_navigation__wrapprer position-relative z-1 text-end mt-30">
|
|
<div className="common-slider-navigation">
|
|
<button className="project-1-button-prev p-relative"><i className="fa-solid fa-chevron-left"></i></button>
|
|
<button className="project-1-button-next p-relative"><i className="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="swiper project-active-1">
|
|
<div className="swiper-wrapper">
|
|
{caseStudies.slice(3, 7).map((project, index) => (
|
|
<div key={project.id} className="swiper-slide">
|
|
<div className="project-slider-area p-relative">
|
|
<figure className="image m-img">
|
|
<img src={project.image} alt="" />
|
|
</figure>
|
|
<div className="content-area">
|
|
<div className="title-area">
|
|
<h6 className="mb-5">{project.tag}</h6>
|
|
<h5><a href="#">{project.title}</a></h5>
|
|
</div>
|
|
<div className="icon-area">
|
|
<a href="#"><i className="fa-solid fa-arrow-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ProjectsSection;
|