77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
import React from 'react'
|
||
import { useTranslation } from 'react-i18next'
|
||
|
||
const HowItWork = () => {
|
||
|
||
const HowItWorks = [
|
||
{
|
||
"img": "1",
|
||
"title": "Friendly_Online_Support",
|
||
"description": "Providing_round_the_clock_technical_support_to_assist_you_with_any_inquiries"
|
||
},
|
||
{
|
||
"img": "2",
|
||
"title": "Unlimited_Features",
|
||
"description": "Enjoy_limitless_possibilities_to_customize_your_experience"
|
||
},
|
||
{
|
||
"img": "3",
|
||
"title": "Modular_and_Switchable_Component",
|
||
"description": "Easily_switch_between_layouts_and_even_demos"
|
||
},
|
||
{
|
||
"img": "4",
|
||
"title": "High_Resolution",
|
||
"description": "Get_high_quality_images_and_videos"
|
||
},
|
||
]
|
||
const [t] = useTranslation()
|
||
|
||
return (
|
||
<div className='HowItWork' id='how_it_work'>
|
||
<h1> كيف يعمل؟ </h1>
|
||
<p>
|
||
استضافة احترافية بسعر مناسب. تلخيص الكفاءات الأساسية التي تركز على المبدأ بشكل مميز من خلال الكفاءات الأساسية التي تركز على العميل.
|
||
</p>
|
||
<div>
|
||
<span>
|
||
{HowItWorks.slice(0,2).map((item, index) => {
|
||
return (
|
||
<article key={index}>
|
||
<img className='scale' src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
|
||
<div>
|
||
<h4>
|
||
{t(item.title)}
|
||
</h4>
|
||
<p>
|
||
{t(item.description)}
|
||
</p>
|
||
</div>
|
||
</article>
|
||
)
|
||
})}
|
||
</span>
|
||
<img className='scale' src="/HowItWorks/main.png" alt="" />
|
||
<span>
|
||
{HowItWorks.slice(2,4).map((item, index) => {
|
||
return (
|
||
<article key={index}>
|
||
<img src={`/HowItWorks/${item.img}.png`} alt={`${index}`} />
|
||
<div>
|
||
<h4>
|
||
{t(item.title)}
|
||
</h4>
|
||
<p>
|
||
{t(item.description)}
|
||
</p>
|
||
</div>
|
||
</article>
|
||
)
|
||
})}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default HowItWork |