163 lines
8.3 KiB
TypeScript
163 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { ServiceType } from "@/types";
|
|
import { ourServices } from "@/utils/data";
|
|
|
|
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="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
|
|
<img src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
|
|
<div className="sidebar__call__inner">
|
|
<span className="sidebar__call__icon">
|
|
<i className="fa-solid fa-phone"></i>
|
|
</span>
|
|
<div className="sidebar__call__content">
|
|
<h4 className="sidebar__call__title">Call if Emergency!</h4>
|
|
<a href="tel:+6476797651" className="sidebar__call__number">+1-647-679-7651</a>
|
|
</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 }}
|
|
/>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-md-12 col-lg-12 mt-20">
|
|
<div className="service-details__content">
|
|
{/* <div className="service-details__thumbnail">
|
|
<img src={service.bigImage} alt={service.title} />
|
|
</div> */}
|
|
|
|
{service.fullcontent && (
|
|
<div
|
|
className="service-details__dynamic-content"
|
|
dangerouslySetInnerHTML={{ __html: service.fullcontent }}
|
|
/>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Two-column FAQ section */}
|
|
{service.faq && service.faq.length > 0 && (
|
|
<div className="service-details__faq-wrapper mt-40">
|
|
|
|
<div className="row align-items-center">
|
|
<div className="col-lg-6">
|
|
<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 className="col-lg-6 mt-4 mt-lg-0">
|
|
{service.faqImage ? (
|
|
<div className="service-details__faq-image ms-lg-4">
|
|
<img
|
|
src={service.faqImage}
|
|
alt="FAQ Support"
|
|
className="img-fluid rounded-4"
|
|
style={{ width: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="service-details__faq-image ms-lg-4">
|
|
<img
|
|
src="/assets/images/services/details/service-1.webp"
|
|
alt="FAQ Placeholder"
|
|
className="img-fluid rounded-4"
|
|
style={{ width: '100%', objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ServiceDetails;
|