WhatWeDo.js
4.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay, Navigation } from "swiper/modules";
import Image from "next/image";
import { motion } from "framer-motion";
import { slideFromLeft } from "@/components/reuseables/variants";
import Heading from "@/components/reuseables/Heading";
import { Container } from "react-bootstrap";
import SwiperNav from "@/components/reuseables/SwiperNav";
import { cleanImage } from "@/layout/imageHandling";
const WhatWeDo = ({ service, serviceheading }) => {
console.log(serviceheading, "serviceData");
return (
<>
<div className="services-area pt-70 pt-md-50 pb-5">
<Container>
<div className="section-title">
<span className="sub-title">{serviceheading?.Subtitle}</span>
<Heading el="h2" heading={serviceheading?.Title} />
</div>
<p className="text-center">
{serviceheading?.Description || "At Advith Consulting, we harness our wealth of Knowledge and expertise, leveraging our People to deliver exceptional Client satisfaction."}
</p>
<div className="position-relative px-md-4 mt-md-5 mt-2">
<Swiper
spaceBetween={30}
centeredSlides={false}
navigation={
service?.length > 3
? {
nextEl: ".custom-swiper-button-next",
prevEl: ".custom-swiper-button-prev",
}
: false
}
pagination={{
clickable: true,
}}
breakpoints={{
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1200: {
slidesPerView: 3,
},
}}
autoplay={{
delay: 8000,
// disableOnInteraction: true,
// pauseOnMouseEnter: true,
}}
loop={true}
modules={[Autoplay, Navigation]}
className="services-slides position-relative"
>
{service &&
service.map((service, index) => (
<SwiperSlide className="single-services-box" key={index}>
{/* <motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
> */}
<div className="image">
<Link href={service?.CTA?.URL ? service?.CTA?.URL : "#"}>
<Image
src={cleanImage(service?.Image?.url)}
fill
alt={service?.Image?.alternativeText ? service?.Image?.alternativeText : "image"}
className="img-fluid image"
/>
</Link>
</div>
<div className="content">
<h3>
<Link href={service?.CTA?.URL ? service?.CTA?.URL : "#"}>{service?.Title}</Link>
</h3>
<p>{service?.Description}</p>
<Link href={service?.CTA?.URL ? service?.CTA?.URL : "#"} className="default-btn">
{service?.CTA?.text}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
{/* </motion.div> */}
</SwiperSlide>
))}
<Swiper pagination={{ clickable: true }} />
</Swiper>
{service?.length > 3 && (
<div className="cust_nav swiper-nav text-center mt-md-4 mt-2">
<SwiperNav />
</div>
)}
</div>
</Container>
</div>
</>
);
};
export default WhatWeDo;