diff --git a/src/App.scss b/src/App.scss index b64d167..14d1702 100644 --- a/src/App.scss +++ b/src/App.scss @@ -3,6 +3,7 @@ @tailwind utilities; @import "./views/Home/layouts/Graphic/index.scss"; +@import "./views/FeaturesPage/layouts/Graphic/index.scss"; .rtl { direction: rtl; diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index dcd3d18..fdaf025 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -25,10 +25,22 @@ function Navbar({ isDark, offline }) { }} >
- +
+ window.scrollTo({ + top: document.body.scrollHeight, + behavior: "smooth", + }) + } + > تماس با ما - - +
+ مشاهده دمو
diff --git a/src/router.js b/src/router.js index 6b56702..f2be49f 100644 --- a/src/router.js +++ b/src/router.js @@ -5,6 +5,7 @@ import { developer } from "./redux/actions"; //components import Home from "./views/Home"; +import FeaturesPage from "./views/FeaturesPage"; import Dialog from "./components/Dialog"; import Navbar from "./components/Navbar"; @@ -80,17 +81,8 @@ export const Router = ({ {headerOptions?.shown && } - - } - /> + } /> + } /> hichi nist :} /> diff --git a/src/views/FeaturesPage/index.js b/src/views/FeaturesPage/index.js new file mode 100644 index 0000000..d8baef8 --- /dev/null +++ b/src/views/FeaturesPage/index.js @@ -0,0 +1,105 @@ +import React from "react"; +import { connect } from "react-redux"; +import { developer } from "../../redux/actions"; + +// components +import Graphic from "./layouts/Graphic"; +import Features from "../Home/layouts/Features"; +import Form from "../Home/layouts/Form"; +import Footer from "../../components/Footer"; +import Comments from "./layouts/Comments"; + +//assets +import conditionImage from "../Home/layouts/Features/assets/Condition.svg"; +import dataSavingImage from "../Home/layouts/Features/assets/DataSaving.svg"; +import interactiveImage from "../Home/layouts/Features/assets/interactive.svg"; +import responsiveImage from "../Home/layouts/Features/assets/responsive.svg"; +import moneyGainImage from "../Home/layouts/Features/assets/moneyGain.svg"; +import multipleStoryImage from "../Home/layouts/Features/assets/multipleStory.svg"; +import specialApplicationImage from "../Home/layouts/Features/assets/specialApplication.svg"; +import efficientlyContentImage from "../Home/layouts/Features/assets/efficientlyContent.svg"; + +export const FeaturesPage = ({ + device, + setHeaderOptions, + isDesktop, + uselessProps, +}) => { + React.useEffect(() => { + if (isDesktop) { + setHeaderOptions({ shown: true }); + } + }, []); + + const features = React.useMemo(() => { + return [ + { + title: "امکان مشاهده در تلفن همراه و دسکتاپ", + description: + "فرق نمی‌کند کاربران شما با تلفن‌های همراه یا کامپیوترهای شخصی خود وارد حسابشان شوند، دسترسی از هر مکان و زمانی امکان پذیر است", + image: responsiveImage, + }, + { + title: "امکان ساختن و تعریف چندیت شرط مختلف", + description: + "همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید", + image: conditionImage, + }, + { + title: "امکان تعامل پذیری بالا با کاربران", + description: + "رابط و تجربه کاربری بسیار زیبا و آسان این قابلیت را به کاربران شما می‌دهد تا در سریعترین زمان ممکن با پلتفرم شما ارتباط برقرار کنند", + image: interactiveImage, + }, + { + title: "جمع آوری کلان داده از شرکت کنندگان", + description: + "به وسیله ابزارهای مختلفی که در اختیار شما قرار می‌گیرد می توانید اطلاعات کاربران خود را مورد بررسی و ارزیابی قرار دهید", + image: dataSavingImage, + }, + { + title: "قابلیت انتشار چندین داستان بازی", + description: + "پلتفرم داستان بازی این قابلیت را دارد تا شما بعنوان ناشر چندین اثر از خودتان یا مجموعه منتشر کنید ", + image: multipleStoryImage, + }, + { + title: "قابلیت انتشار اپلیکیشن اختصاصی", + description: + "همیشه چند پایان متفاوت بهتر از یک پایان معمولی است. شما می توانید برای محتوای خود چندین شرط مختلف تعریف کنید ", + image: specialApplicationImage, + }, + { + title: "سیستم جالب درآمد زایی موثر و کارا", + description: + "برای هر یک از پروژه‌های خود در داستان بازی اقدام دریافت اشتراک و فروش به صورت هر اپیزود به کاربران یا جامعه هدف خود کنید", + image: moneyGainImage, + }, + { + title: "تولید محتوای خلاقانه و اختصای برای شما", + description: + "اگر یک ایده جالب و نوآورانه دارید می توانید از تیم قدرتمند تولید مختوای داستان بازی استفاده کنید و بقیه کارها رو به ما بسپارید", + image: efficientlyContentImage, + }, + ]; + }, [uselessProps]); + return ( +
+ + + +
+
+ ); +}; + +const mapStateToProps = (state) => ({ + isDesktop: state.developer.device === "desktop", +}); + +const mapDispatchToProps = { + setHeaderOptions: developer.setHeaderOptions, +}; + +export default connect(mapStateToProps, mapDispatchToProps)(FeaturesPage); diff --git a/src/views/FeaturesPage/layouts/Comments/index.js b/src/views/FeaturesPage/layouts/Comments/index.js new file mode 100644 index 0000000..8ee91e6 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Comments/index.js @@ -0,0 +1,14 @@ +import React from 'react' +import { connect } from 'react-redux' + +export const Comments = (props) => { + return ( +
+ ) +} + +const mapStateToProps = (state) => ({}) + +const mapDispatchToProps = {} + +export default connect(mapStateToProps, mapDispatchToProps)(Comments) \ No newline at end of file diff --git a/src/views/FeaturesPage/layouts/Graphic/assets/avatar.svg b/src/views/FeaturesPage/layouts/Graphic/assets/avatar.svg new file mode 100644 index 0000000..0fdbeac --- /dev/null +++ b/src/views/FeaturesPage/layouts/Graphic/assets/avatar.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/views/FeaturesPage/layouts/Graphic/assets/path1.svg b/src/views/FeaturesPage/layouts/Graphic/assets/path1.svg new file mode 100644 index 0000000..a61029d --- /dev/null +++ b/src/views/FeaturesPage/layouts/Graphic/assets/path1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/FeaturesPage/layouts/Graphic/assets/path2.svg b/src/views/FeaturesPage/layouts/Graphic/assets/path2.svg new file mode 100644 index 0000000..a8ec2c7 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Graphic/assets/path2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/FeaturesPage/layouts/Graphic/index.js b/src/views/FeaturesPage/layouts/Graphic/index.js new file mode 100644 index 0000000..f3f6621 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Graphic/index.js @@ -0,0 +1,149 @@ +import React from "react"; +import { connect } from "react-redux"; +import TypeAnimation from "react-type-animation"; + +// assets +import avatarImage from "./assets/avatar.svg"; + +export const Graphic = ({ uselessProps }) => { + const [animationFlags, setAnimationFlags] = React.useState({ + title1: false, + title2: false, + title3: false, + description: false, + message1: false, + message2: false, + message3: false, + paths: false, + }); + + React.useEffect(() => { + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + }); + }, 100); + + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + description: true, + }); + }, 1000); + + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + description: true, + message1: true, + }); + }, 1500); + + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + description: true, + message1: true, + message2: true, + }); + }, 2500); + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + description: true, + message1: true, + message2: true, + message3: true, + }); + }, 3500); + }, []); + + const typing = React.useMemo(() => { + return ( + + ); + }, [uselessProps]); + + return ( +
+
+ {animationFlags.title1 && ( +

+ یک ابزار حرفه‌ای +

+ )} + {animationFlags.title2 && ( +

+ برای تولید محتوای +

+ )} + {animationFlags.title3 && ( +

+ هوشمند +

+ )} + {animationFlags.description && typing} +
+
+ {animationFlags.message1 && ( +
+

+ من اینجام. چطور می تونم بهت کمک کنم ؟ +

+ آواتار +
+ )} + {animationFlags.message2 && ( +

+ چطور می تونیم یک محتوای +
خوب برای مخاطبانم تولید و تهیه کنم؟ +

+ )} + {animationFlags.message3 && ( +
+

+ اسکرول کن و بیا پایین و با ما آشنا شو ! +

+ آواتار +
+ )} +
+
+ ); +}; + +const mapStateToProps = (state) => ({}); + +const mapDispatchToProps = {}; + +export default connect(mapStateToProps, mapDispatchToProps)(Graphic); diff --git a/src/views/FeaturesPage/layouts/Graphic/index.scss b/src/views/FeaturesPage/layouts/Graphic/index.scss new file mode 100644 index 0000000..f17a773 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Graphic/index.scss @@ -0,0 +1,29 @@ +.left-to-right{ + animation: leftToRight 0.7s 1; +}; + +.right-to-left{ + animation: rightToLeft 0.7s 1; +} + +@keyframes leftToRight { + 0%{ + transform: translateX(-50vw); + opacity: 0; + } + 100%{ + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes rightToLeft { + 0%{ + transform: translateX(50vw); + opacity: 0; + } + 100%{ + transform: translateX(0px); + opacity: 1; + } +} \ No newline at end of file diff --git a/src/views/Home/layouts/Features/assets/efficientlyContent.svg b/src/views/Home/layouts/Features/assets/efficientlyContent.svg new file mode 100644 index 0000000..5142cca --- /dev/null +++ b/src/views/Home/layouts/Features/assets/efficientlyContent.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + محتوای خلاقانه + تیم قدرتمند و حرفه‌ای + پروموشن‌های موثر + + diff --git a/src/views/Home/layouts/Features/assets/moneyGain.svg b/src/views/Home/layouts/Features/assets/moneyGain.svg new file mode 100644 index 0000000..a9b7fd0 --- /dev/null +++ b/src/views/Home/layouts/Features/assets/moneyGain.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/assets/multipleStory.svg b/src/views/Home/layouts/Features/assets/multipleStory.svg new file mode 100644 index 0000000..90139e5 --- /dev/null +++ b/src/views/Home/layouts/Features/assets/multipleStory.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/assets/specialApplication.svg b/src/views/Home/layouts/Features/assets/specialApplication.svg new file mode 100644 index 0000000..ac65e9f --- /dev/null +++ b/src/views/Home/layouts/Features/assets/specialApplication.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/views/Home/layouts/Features/index.js b/src/views/Home/layouts/Features/index.js index 2555dfa..6fcc1bb 100644 --- a/src/views/Home/layouts/Features/index.js +++ b/src/views/Home/layouts/Features/index.js @@ -1,6 +1,6 @@ import React from "react"; import { connect } from "react-redux"; - +import { useNavigate } from "react-router-dom"; //components import Button from "../../../../components/Button"; @@ -10,7 +10,9 @@ import dataSavingImage from "./assets/DataSaving.svg"; import interactiveImage from "./assets/interactive.svg"; import responsiveImage from "./assets/responsive.svg"; -export const Features = ({ isDesktop }) => { +export const Features = ({ isDesktop, itemsProps = [] }) => { + const navigation = useNavigate(); + const items = React.useMemo(() => { return [ { @@ -51,9 +53,15 @@ export const Features = ({ isDesktop }) => {

-
- {items.map((item, index) => ( -
+
+ {(itemsProps?.length ? itemsProps : items).map((item, index) => ( +
{item.title} {item.title}

@@ -62,13 +70,22 @@ export const Features = ({ isDesktop }) => {

))}
-
); }; diff --git a/src/views/Home/layouts/Form/index.js b/src/views/Home/layouts/Form/index.js index 800e1a9..445f33f 100644 --- a/src/views/Home/layouts/Form/index.js +++ b/src/views/Home/layouts/Form/index.js @@ -11,7 +11,7 @@ import Textarea from "../../../../components/Textarea"; export const Form = ({ contact, setContact }) => { return (