56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {HowItWork as HowItWorkData} from '../../data.json'
|
|
|
|
const HowItWork = () => {
|
|
|
|
const [t] = useTranslation()
|
|
|
|
return (
|
|
<div className='HowItWork' id='how_it_work'>
|
|
<h1> {HowItWorkData.title}</h1>
|
|
<p>
|
|
{HowItWorkData.description}
|
|
</p>
|
|
<div>
|
|
<span>
|
|
{Object.entries(HowItWorkData.Data).slice(0,2).map((item, index) => {
|
|
return (
|
|
<article key={index}>
|
|
<img className='scale' src={item[1].img} alt={`${index}`} />
|
|
<div>
|
|
<h4>
|
|
{t(item[1].title)}
|
|
</h4>
|
|
<p>
|
|
{t(item[1].description)}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
)
|
|
})}
|
|
</span>
|
|
<img className='scale' src="/HowItWorks/main.png" alt="" />
|
|
<span>
|
|
{Object.entries(HowItWorkData.Data).slice(2,4).map((item, index) => {
|
|
return (
|
|
<article key={index}>
|
|
<img src={item[1].img} alt={`${item[1].img}`} />
|
|
<div>
|
|
<h4>
|
|
{t(item[1].title)}
|
|
</h4>
|
|
<p>
|
|
{t(item[1].description)}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
)
|
|
})}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HowItWork |