DigitalFaq.js
4.04 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
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 }) => {
console.log(data?.WeOfferList, "data");
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
target={item?.Button?.target}
href={item?.Button?.URL || "#"}
className="default-btn-three"
>
{item?.Button?.text || ""}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
)}
<Row className="align-items-stretch">
{item?.ProductList &&
item?.ProductList.map((productItem, idx) => (
<Col
lg={6}
md={6}
sm={12}
key={idx}
className="d-flex"
>
<motion.div
variants={slideFromLeft(0.5)}
initial="hidden"
whileInView="show"
viewport={{ once: false, amount: 0.4 }}
className="flex-fill"
>
<div className="weoffer-box-budget h-100 d-flex flex-column">
<div className="d-flex align-items-center">
<h3>{productItem?.Title}</h3>
</div>
<p>{productItem?.Description}</p>
{productItem?.Button?.text && (
<div className="btn-1 mt-auto mb-4">
<Link target={productItem?.Button?.target}
href={productItem?.Button?.URL || "#"}
className="default-btn-three"
>
{productItem?.Button?.text || ""}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
)}
</div>
</motion.div>
</Col>
))}
</Row>
</AccordionItemPanel>
</AccordionItem>
))}
</Accordion>
</div>
</div>
</div>
</>
);
};
export default DigitalFaq;