diff --git a/src/components/Button/index.js b/src/components/Button/index.js index fb31bfb..8b6f6d1 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -7,20 +7,30 @@ const Button = ({ action, icon, borderColor, + round, + padding, }) => { return ( ); }; diff --git a/src/views/Home/layouts/Features/assets/Condition.svg b/src/views/Home/layouts/Features/assets/Condition.svg new file mode 100644 index 0000000..0fd481f --- /dev/null +++ b/src/views/Home/layouts/Features/assets/Condition.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/assets/DataSaving.svg b/src/views/Home/layouts/Features/assets/DataSaving.svg new file mode 100644 index 0000000..f7fbb33 --- /dev/null +++ b/src/views/Home/layouts/Features/assets/DataSaving.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/assets/interactive.svg b/src/views/Home/layouts/Features/assets/interactive.svg new file mode 100644 index 0000000..22ad99f --- /dev/null +++ b/src/views/Home/layouts/Features/assets/interactive.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/assets/responsive.svg b/src/views/Home/layouts/Features/assets/responsive.svg new file mode 100644 index 0000000..b6597a5 --- /dev/null +++ b/src/views/Home/layouts/Features/assets/responsive.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/index.js b/src/views/Home/layouts/Features/index.js index ee3b4aa..893f069 100644 --- a/src/views/Home/layouts/Features/index.js +++ b/src/views/Home/layouts/Features/index.js @@ -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 ( -
- Features +
+
+ + بیشتر از یک پلتفرم محتوایی اعجاب انگیز + +

+ در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید +

+
+ +
+ {items.map((item, index) => ( +
+ {item.title} + {item.title} +

+ {item.description} +

+
+ ))} +
+ +
); }; -const mapStateToProps = (state) => ({}); +const mapStateToProps = (state) => ({ + isDesktop: state.developer.device === "desktop", +}); const mapDispatchToProps = {};