|
|
|
|
@ -1,15 +1,82 @@ |
|
|
|
|
import React from "react"; |
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
|
|
|
|
export const Features = ({}) => { |
|
|
|
|
//components
|
|
|
|
|
import Button from "../../../../components/Button"; |
|
|
|
|
|
|
|
|
|
//assets
|
|
|
|
|
import conditionImage from "./assets/Condition.svg"; |
|
|
|
|
import dataSavingImage from "./assets/DataSaving.svg"; |
|
|
|
|
import interactiveImage from "./assets/interactive.svg"; |
|
|
|
|
import responsiveImage from "./assets/responsive.svg"; |
|
|
|
|
|
|
|
|
|
export const Features = ({ isDesktop }) => { |
|
|
|
|
const items = React.useMemo(() => { |
|
|
|
|
return [ |
|
|
|
|
{ |
|
|
|
|
title: "امکان مشاهده در تلفن همراه و دسکتاپ", |
|
|
|
|
description: |
|
|
|
|
"فرق نمیکند کاربران شما با تلفنهای همراه یا کامپیوترهای شخصی خود وارد حسابشان شوند، دسترسی از هر مکان و زمانی امکان پذیر است", |
|
|
|
|
image: responsiveImage, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "امکان ساختن و تعریف چندیت شرط مختلف", |
|
|
|
|
description: |
|
|
|
|
"همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید", |
|
|
|
|
image: conditionImage, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "امکان تعامل پذیری بالا با کاربران", |
|
|
|
|
description: |
|
|
|
|
"رابط و تجربه کاربری بسیار زیبا و آسان این قابلیت را به کاربران شما میدهد تا در سریعترین زمان ممکن با پلتفرم شما ارتباط برقرار کنند", |
|
|
|
|
image: interactiveImage, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
title: "جمع آوری کلان داده از شرکت کنندگان", |
|
|
|
|
description: |
|
|
|
|
"به وسیله ابزارهای مختلفی که در اختیار شما قرار میگیرد می توانید اطلاعات کاربران خود را مورد بررسی و ارزیابی قرار دهید", |
|
|
|
|
image: dataSavingImage, |
|
|
|
|
}, |
|
|
|
|
]; |
|
|
|
|
}, [isDesktop]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="w-full h-screen flex items-center justify-center"> |
|
|
|
|
Features |
|
|
|
|
<div className="w-full h-screen flex flex-col justify-around items-center py-5"> |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<strong className="text-primary-3 font-6 text-5x"> |
|
|
|
|
بیشتر از یک پلتفرم محتوایی اعجاب انگیز |
|
|
|
|
</strong> |
|
|
|
|
<p className="text-2x font-4 text-gray-400 mt-3"> |
|
|
|
|
در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div className="flex justify-between w-full"> |
|
|
|
|
{items.map((item, index) => ( |
|
|
|
|
<div className="flex flex-col items-center gap-4 w-1/5" key={index}> |
|
|
|
|
<img src={item.image} alt={item.title} style={{ height: 161 }} /> |
|
|
|
|
<strong className="text-1x text-gray-700">{item.title}</strong> |
|
|
|
|
<p className="text-center text-1x font-3 text-gray-500"> |
|
|
|
|
{item.description} |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
))} |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<Button |
|
|
|
|
title="امکانات بیشتری کشف کنید" |
|
|
|
|
round="rounded-full" |
|
|
|
|
borderColor="text-primary-3" |
|
|
|
|
color="text-primary-3" |
|
|
|
|
padding="px-10 py-5" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => ({}); |
|
|
|
|
const mapStateToProps = (state) => ({ |
|
|
|
|
isDesktop: state.developer.device === "desktop", |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = {}; |
|
|
|
|
|
|
|
|
|
|
Reza_ashrafi
3 years ago
