82 lines
2.7 KiB
JavaScript
82 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import Image from "next/image";
|
|
import { useTranslation } from "next-i18next";
|
|
|
|
const OurApproachSection = ({ cmClass }) => {
|
|
|
|
const { t } = useTranslation("ourApproach");
|
|
|
|
const approaches = t("ourApproach", { returnObjects: true }) || [];
|
|
|
|
return (
|
|
<div className={`wpo-about-area section-padding ${cmClass || ""}`}>
|
|
<div className="container">
|
|
{t("page") && (
|
|
<div className="wpo-section-title text-center mb-5">
|
|
<span>{t("page.subtitle")}</span>
|
|
<h2>{t("page.title")}</h2>
|
|
</div>
|
|
)}
|
|
|
|
{approaches.map((item, index) => {
|
|
const isEven = index % 2 !== 0;
|
|
const sectionStyle = {
|
|
backgroundColor: index % 2 === 0 ? '#fbfbfbff' : '#e8ebf5',
|
|
color: index % 2 === 0 ? '#ffffffff' : '#fff',
|
|
};
|
|
return (
|
|
<section
|
|
key={item.id}
|
|
className="wpo-about-section section-padding"
|
|
style={sectionStyle}
|
|
>
|
|
<div className="container">
|
|
<div className="wpo-about-wrap">
|
|
<div className="row align-items-center">
|
|
<div
|
|
className={`col-lg-6 col-md-12 col-12 ${
|
|
isEven ? "order-1 order-lg-1" : "order-1 order-lg-2"
|
|
}`}
|
|
>
|
|
<div className="wpo-about-text">
|
|
<div className="wpo-section-title">
|
|
<span>{item.authorTitle}</span>
|
|
<h2>{item.title}</h2>
|
|
</div>
|
|
<p>{item.para}</p>
|
|
{item.description && (
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: item.description }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`col-lg-6 col-md-12 col-12 ${
|
|
isEven ? "order-2 order-lg-2" : "order-2 order-lg-1"
|
|
}`}
|
|
>
|
|
<div className="wpo-about-img">
|
|
<Image
|
|
src={item.screens}
|
|
alt={item.title}
|
|
width={600}
|
|
height={400}
|
|
style={{ objectFit: "cover", borderRadius: "10px" }}
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OurApproachSection;
|