DigitalFaq.js
4.79 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
import Heading from "@/components/reuseables/Heading";
import Link from "next/link";
import React from "react";
import {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemButton,
AccordionItemPanel,
} from "react-accessible-accordion";
import { motion } from "framer-motion";
import { Col, Row } from "react-bootstrap";
import { slideFromLeft } from "@/components/reuseables/variants";
const DigitalFaq = ({ data, heading }) => {
return (
<>
<div className="faq-area digital_transformation_faq ptb-50">
<div className="container">
<div className="section-title">
{/* <span className="sub-title">{heading.Subtitle}</span> */}
<Heading el="h2" heading={heading} />
</div>
<div className="faq-accordion">
<Accordion allowZeroExpanded preExpanded={'0'}>
{data?.WeOfferList && data?.WeOfferList.map((item, index) => (
<AccordionItem uuid={item?.id} key={index}>
<AccordionItemHeading>
<AccordionItemButton>
{item?.Title}
</AccordionItemButton>
</AccordionItemHeading>
<AccordionItemPanel>
<p>
{item?.Description}
</p>
{item?.Button?.text &&
<div className="btn-1 mb-4">
<Link href={item?.Button?.URL || "#"} className="default-btn-three">
{item?.Button?.text || ""}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
}
<Row className="align-items-center">
{item?.ProductList && item?.ProductList.map((productItem, idx) => (
<Col lg={6} md={6} sm={12} >
<motion.div
variants={slideFromLeft(0.5)}
initial={"hidden"}
whileInView={"show"}
viewport={{ once: false, amount: 0.4 }}
>
<div className="services-box-budget">
<div className="d-flex align-items-center">
<h3>
{productItem?.Title}
</h3>
</div>
<p> {productItem?.Description}</p>
{
item?.Button?.text &&
<Link
href={item?.Button?.URL || "#"}
className="default-btn"
>
{item?.Button?.text || ""}
<i className="ri-arrow-right-line"></i>
</Link>
}
</div>
</motion.div>
</Col>
))}
</Row>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</div>
</div>
</div>
</>
);
};
export default DigitalFaq;