114 lines
4.3 KiB
JavaScript
114 lines
4.3 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import SwiperCore, { Autoplay, Keyboard, Navigation } from 'swiper';
|
|
import projects from 'data/DataAnalysis/projects.json';
|
|
|
|
import "swiper/css";
|
|
import 'swiper/css/autoplay';
|
|
import 'swiper/css/keyboard';
|
|
import 'swiper/css/navigation';
|
|
|
|
SwiperCore.use([Autoplay, Keyboard, Navigation]);
|
|
|
|
const Projects = () => {
|
|
const [load, setLoad] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoad(true);
|
|
});
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<section className="projects style-8 section-padding bg-gray2">
|
|
<div className="container">
|
|
<div className="section-head style-8 mb-80 wow fadeInUp">
|
|
<h6> case study </h6>
|
|
<h3> Completed Projects </h3>
|
|
<div className="arrows">
|
|
<div className="swiper-button-next">
|
|
<i className="fal fa-long-arrow-right"></i>
|
|
</div>
|
|
<div className="swiper-button-prev">
|
|
<i className="fal fa-long-arrow-left"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="content wow fadeIn">
|
|
<div className="projects-slider8">
|
|
{
|
|
load && (
|
|
<Swiper
|
|
className="swiper-container"
|
|
slidesPerView={1}
|
|
spaceBetween={0}
|
|
speed={1200}
|
|
pagination={false}
|
|
navigation={{
|
|
nextEl: '.projects.style-8 .swiper-button-next',
|
|
prevEl: '.projects.style-8 .swiper-button-prev',
|
|
}}
|
|
mousewheel={false}
|
|
keyboard={true}
|
|
autoplay={{
|
|
delay: 4000
|
|
}}
|
|
loop={false}
|
|
>
|
|
{
|
|
projects.map((project, index) => (
|
|
<SwiperSlide key={index}>
|
|
<div className="project-card">
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="img">
|
|
<img src={project.image} alt="" className="main-img" />
|
|
<div className="tags">
|
|
<a href="#"> {project.tag} </a>
|
|
</div>
|
|
<img src="/assets/img/about/about7_chart.png" alt="" className="img-chart slide_up_down" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="info">
|
|
<div className="logo">
|
|
<img src={project.logo} alt="" />
|
|
</div>
|
|
<h4 className="title"> {project.title} </h4>
|
|
<p> {project.text} </p>
|
|
<div className="proj-det">
|
|
<div className="item">
|
|
<p> Client Name </p>
|
|
<h6> {project.client.name} </h6>
|
|
</div>
|
|
<div className="item">
|
|
<p> Budget </p>
|
|
<h6> {project.client.budget} </h6>
|
|
</div>
|
|
<div className="item">
|
|
<p> Estimate </p>
|
|
<h6> {project.client.estimate} </h6>
|
|
</div>
|
|
<a href="#" className="icon">
|
|
<i className="fal fa-long-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SwiperSlide>
|
|
))
|
|
}
|
|
</Swiper>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Projects |