HowWeDoIt.js
3.64 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
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 HowWeDoIt = ({ data, heading }) => {
console.log(data, 'datadata');
// const data = [
// {
// subTitle: "Step 1",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes",
// image: "/images/client-service/cfo.webp",
// },
// {
// subTitle: "Step 2",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes",
// image: "/images/client-service/Client_Servicing-CFO.webp",
// },
// {
// subTitle: "Step 1",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes",
// image: "/images/client-service/cfo.webp",
// },
// {
// subTitle: "Step 1",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes",
// image: "/images/client-service/cfo.webp",
// },
// {
// subTitle: "Step 1",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes",
// image: "/images/client-service/cfo.webp",
// },
// {
// subTitle: "Step 1",
// title: "Step 1 Discovery",
// desc: "Assess the business model, industry context, and internal processes Assess the business model, industry context, and internal processes Assess the business model, industry context, and internal processes",
// image: "/images/client-service/cfo.webp",
// },
// ]
return (
<section className="HowWeDoIt-section ptb-100">
<Container>
<div className="section-title">
<span className="sub-title">{""}</span>
<Heading el="h2" heading={heading?.Title} />
</div>
<p className=" text-center text-black mb-4 mb-lg-5">{heading?.Description}</p>
<Row className='row-gap-4 h-auto justify-content-center'>
{
data?.carddetails && data?.carddetails.map((item, index) => (
<Col className='' lg={4} md={6} key={index}>
<div className='HowWeDoIt_card h-100'>
<h2>{item?.Title}</h2>
<Image
aria-hidden="true"
alt={"image"}
src={cleanImage(item?.Image?.url)}
width={1000}
height={1000}
className="img-fluid"
/>
<div className='HowWeDoIt_card_content'>
<h4>{item?.Title}</h4>
<div dangerouslySetInnerHTML={{ __html: item?.Description }}></div>
</div>
</div>
</Col>
))
}
</Row>
</Container>
</section>
)
}
export default HowWeDoIt