127 lines
3.7 KiB
JavaScript
127 lines
3.7 KiB
JavaScript
import React, { Fragment } from "react";
|
|
import Navbar2 from "../../components/Navbar2/Navbar2";
|
|
import PageTitle from "../../components/pagetitle/PageTitle";
|
|
import Scrollbar from "../../components/scrollbar/scrollbar";
|
|
import Footer from "../../components/footer/Footer";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import servicesBanner from "/public/images/service/service-details-banner.webp";
|
|
import { useTranslation } from "next-i18next";
|
|
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
|
|
|
const ServiceDetailsPage = ({ service }) => {
|
|
const { t } = useTranslation("services");
|
|
|
|
if (!service) {
|
|
return (
|
|
<Fragment>
|
|
<Navbar2 />
|
|
<div className="container text-center py-5">
|
|
<h2>{t("page.serviceNotFound", "Service not found!")}</h2>
|
|
<Link href="/">{t("page.backHome", "Back to Home")}</Link>
|
|
</div>
|
|
<Footer />
|
|
<Scrollbar />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<Navbar2 />
|
|
<PageTitle
|
|
pageTitle={service.sTitle}
|
|
backgroundImage={servicesBanner}
|
|
pagesub={t("page.subtitle")}
|
|
/>
|
|
|
|
<section className="wpo-blog-single-section section-padding">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="wpo-blog-content">
|
|
<div className="post format-standard-image">
|
|
{/* Banner Image */}
|
|
<div className="entry-media">
|
|
<div style={{ width: "100%", height: "650px", position: "relative" }}>
|
|
<Image
|
|
src={service.sImgS}
|
|
alt={service.sTitle}
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>{service.sTitle}</h2>
|
|
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: service.descriptiondetail }}
|
|
/>
|
|
|
|
{service.blockquotes &&
|
|
service.blockquotes.map((quote, idx) => (
|
|
<blockquote key={idx}>{quote}</blockquote>
|
|
))}
|
|
|
|
{service.gallery && (
|
|
<div className="gallery">
|
|
{service.gallery.map((img, i) => (
|
|
<div key={i}>
|
|
<Image
|
|
src={img}
|
|
alt={`Gallery ${i}`}
|
|
width={400}
|
|
height={300}
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
<Scrollbar />
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default ServiceDetailsPage;
|
|
|
|
export async function getStaticPaths({ locales }) {
|
|
const services = (await import("../../public/locales/en/services.json")).campaigns;
|
|
|
|
const paths = services.flatMap((service) =>
|
|
locales.map((locale) => ({
|
|
params: { slug: service.slug },
|
|
locale,
|
|
}))
|
|
);
|
|
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
}
|
|
|
|
export async function getStaticProps({ params, locale }) {
|
|
const services = (await import(`../../public/locales/${locale}/services.json`))
|
|
.campaigns;
|
|
|
|
const service = services.find((item) => item.slug === params.slug) || null;
|
|
|
|
return {
|
|
props: {
|
|
service,
|
|
...(await serverSideTranslations(locale, ["common", "menu", "services", , 'footer'])),
|
|
},
|
|
};
|
|
}
|