97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import SwiperCore, { Autoplay } from 'swiper';
|
|
import features from 'data/ITCreative/features.json';
|
|
|
|
import "swiper/css";
|
|
import 'swiper/css/autoplay';
|
|
|
|
SwiperCore.use([Autoplay]);
|
|
|
|
const Features = () => {
|
|
const [load, setLoad] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoad(true);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<section className="features style-7 section-padding">
|
|
<div className="container">
|
|
<div className="section-head text-center style-4 mb-40">
|
|
<div className="top-title mb-10">
|
|
<img src="/assets/img/line_l.png" alt="" />
|
|
<h5> Features </h5>
|
|
<img src="/assets/img/line_r.png" alt="" />
|
|
</div>
|
|
<h2 className="">
|
|
Built With Best <span> Features </span> <br /> & Good UX
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<div className="content">
|
|
<div className="features-slider7">
|
|
{
|
|
load && (
|
|
<Swiper
|
|
spaceBetween={50}
|
|
centeredSlides={true}
|
|
speed={10000}
|
|
autoplay={{
|
|
delay: 1
|
|
}}
|
|
loop={true}
|
|
breakpoints={{
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
480: {
|
|
slidesPerView: 1,
|
|
},
|
|
787: {
|
|
slidesPerView: 1,
|
|
},
|
|
991: {
|
|
slidesPerView: 2,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
}
|
|
}}
|
|
>
|
|
{
|
|
features.map((feature, index) => (
|
|
<SwiperSlide key={index}>
|
|
<a href="#" className="features-card style-7">
|
|
<div className="icon">
|
|
<img src={feature.image} alt="" />
|
|
</div>
|
|
<div className="info">
|
|
<p className="color-999"> Features {feature.id} </p>
|
|
<h5> {feature.title.part1} <br /> {feature.title.part2} </h5>
|
|
</div>
|
|
</a>
|
|
</SwiperSlide>
|
|
))
|
|
}
|
|
</Swiper>
|
|
)
|
|
}
|
|
</div>
|
|
<div className="btns text-center mt-10">
|
|
<a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white me-4 mb-4 mb-lg-0">
|
|
<small> Learn More <i className="fas fa-long-arrow-alt-right"></i> </small>
|
|
</a>
|
|
<a href="#0" className="btn btn-icon-circle rounded-pill bg-white fw-bold me-4">
|
|
<small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<img src="/assets/img/feat_circle.png" alt="" className="img-circle rotate-center" />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Features |