TransactionHowdoit.js
2.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
import Heading from "@/components/reuseables/Heading";
import { cleanImage } from "@/layout/imageHandling";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
const TransactionHowdoit = ({ data, heading, classname }) => {
console.log(data, "datadata");
return (
<div className="functional-areas transaction_howdoit pt-100 pb-0">
<Container>
<div className="section-title">
{/* <span className="sub-title">SERVICES</span> */}
<Heading el="h2" heading={heading?.Title} className="h2" />
</div>
<div className="row row-gap-4 justify-content-center">
{data?.carddetails &&
data?.carddetails.map((service) => (
<div className="col-lg-4 col-sm-6 col-md-6 " key={service.id}>
<div className="single-services-item text-center mb-0 border align-items-left">
<Image
src={cleanImage(service?.Image?.url)}
alt={service.Title}
className="img-fluid"
width={100}
height={100}
/>
<div className="align-items-center">
<h3 className="mt-3">{service?.Title}</h3>
{
service?.Description &&
<p className="mt-2"> {service?.Description}</p>
}
</div>
</div>
</div>
))}
</div>
</Container>
</div>
);
};
export default TransactionHowdoit;