125 lines
6.4 KiB
TypeScript
125 lines
6.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { ServiceType } from "@/types";
|
|
import { ourServices } from "@/utils/data";
|
|
import "@/components/web-development-service/style.css";
|
|
|
|
interface ServiceDetailsProps {
|
|
service: ServiceType;
|
|
}
|
|
|
|
const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
|
|
const [activeIndex, setActiveIndex] = useState<number | null>(0);
|
|
|
|
const toggleAccordion = (index: number) => {
|
|
setActiveIndex(activeIndex === index ? null : index);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const init = () => {
|
|
if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
|
|
(window as any).initMetatron();
|
|
} else {
|
|
setTimeout(init, 100);
|
|
}
|
|
};
|
|
init();
|
|
}, []);
|
|
|
|
return (
|
|
<section className="service-details section-space">
|
|
<div className="container">
|
|
<div className="row gutter-y-30">
|
|
<div className="col-md-12 col-lg-4">
|
|
<div className="service-sidebar">
|
|
<div className="service-sidebar__single">
|
|
<h3 className="service-sidebar__title">All Services</h3>
|
|
<ul className="list-unstyled service-sidebar__nav">
|
|
{ourServices.slice(0, 6).map((item) => (
|
|
<li key={item.id} className={item.slug === service.slug ? "active" : ""}>
|
|
<Link href={`/services-digital-solutions/${item.slug}`}>
|
|
{item.title}
|
|
<i className="fa-solid fa-chevron-right"></i>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="service-sidebar__single">
|
|
<div className="service-sidebar__contact">
|
|
<div className="service-sidebar__contact-bg" style={{ backgroundImage: "url(/assets/imgs/resources/service-sidebar-contact-bg.jpg)" }}></div>
|
|
<div className="service-sidebar__contact-icon">
|
|
<i className="fa-solid fa-phone-volume"></i>
|
|
</div>
|
|
<h3 className="service-sidebar__contact-title">Free for This <br /> First Contact Now</h3>
|
|
<p className="service-sidebar__contact-phone">
|
|
<a href="tel:+11234751328">+11234 751 328</a>
|
|
</p>
|
|
<div className="service-sidebar__contact-btn">
|
|
<Link href="/contact" className="theme-btn">
|
|
CALL NOW
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-md-12 col-lg-8">
|
|
<div className="service-details__content">
|
|
<div className="service-details__thumbnail">
|
|
<img src={service.bigImage} alt={service.title} />
|
|
</div>
|
|
|
|
{service.content && (
|
|
<div
|
|
className="service-details__dynamic-content"
|
|
dangerouslySetInnerHTML={{ __html: service.content }}
|
|
/>
|
|
)}
|
|
|
|
{service.faq && service.faq.length > 0 && (
|
|
<div className="service-details__faq-wrapper mt-40">
|
|
<div className="sec-title mb-40">
|
|
<div className="sec-title__shape"></div>
|
|
<h6 className="sec-title__tagline">Service FAQ</h6>
|
|
<h3 className="sec-title__title" style={{ fontSize: '34px' }}>Frequently Asked Questions</h3>
|
|
</div>
|
|
<div className="faq-one__accordion pelocis-accrodion">
|
|
{service.faq.map((item, index) => (
|
|
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
|
|
<div className="accrodion-title" onClick={() => toggleAccordion(index)}>
|
|
<div className="accrodion-title__shape"></div>
|
|
<div className="accrodion-title__icon">
|
|
<i className="fa fa-check"></i>
|
|
</div>
|
|
<h4 style={{ fontSize: '24px' }}>
|
|
{item.question}
|
|
<i className="icon-right-arrow-white"></i>
|
|
</h4>
|
|
</div>
|
|
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
|
|
<div className="inner">
|
|
<p style={{ fontSize: '18px', color: '#444', lineHeight: '1.8' }} dangerouslySetInnerHTML={{ __html: item.answer }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ServiceDetails;
|