75 lines
3.3 KiB
JavaScript
75 lines
3.3 KiB
JavaScript
import React from 'react';
|
|
import Image from 'next/image';
|
|
import { useTranslation } from 'next-i18next'
|
|
// import Ourapproach from '../../api/our-approach';
|
|
|
|
const OurApproachSection = () => {
|
|
const { t } = useTranslation('ourApproach')
|
|
return (
|
|
<>
|
|
{ourApproach.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">
|
|
{/* Content Column */}
|
|
<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>
|
|
<div
|
|
dangerouslySetInnerHTML={{ __html: item.description }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image Column */}
|
|
<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',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default OurApproachSection;
|
|
|