50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import { useState } from "react";
|
|
import { Accordion } from "react-bootstrap";
|
|
|
|
const faqsData = [
|
|
{
|
|
id: 1,
|
|
title: "Solutions Built Around You",
|
|
content: "Our focus is always on your success. We take time to understand your business needs and provide custom website development, mobile app solutions, and digital strategies tailored to your goals.",
|
|
},
|
|
{ id: 2,
|
|
title: "Driven by Innovation",
|
|
content: "We stay ahead of digital trends with ongoing training, research, and adoption of new tools. From SEO services to cross-platform app development, we ensure your business benefits from the latest innovations."
|
|
},
|
|
{ id: 3, title: "Working Together for Results",
|
|
content: "Transparency drives our process. From concept to launch, we involve clients at every stage, ensuring seamless delivery of websites, mobile apps, and marketing campaigns with measurable results.",
|
|
},
|
|
];
|
|
|
|
const WhyChoose = () => {
|
|
const [active, setActive] = useState(faqsData[0].id);
|
|
return (
|
|
<div id="tab1" className="tab_content">
|
|
<Accordion
|
|
defaultActiveKey={faqsData[0].id}
|
|
as={"ul"}
|
|
className="accordion"
|
|
>
|
|
{faqsData.map((faq) => (
|
|
<li key={faq.id}>
|
|
<Accordion.Toggle
|
|
as="a"
|
|
eventKey={faq.id}
|
|
onClick={() => setActive(faq.id == active ? null : faq.id)}
|
|
className={faq.id == active ? "active" : ""}
|
|
>
|
|
<span> {faq.title} </span>
|
|
</Accordion.Toggle>
|
|
<Accordion.Collapse eventKey={faq.id}>
|
|
<p>
|
|
{faq.content}
|
|
</p>
|
|
</Accordion.Collapse>
|
|
</li>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
);
|
|
};
|
|
export default WhyChoose;
|