From 3d4c169efa0c7bbd048348997342eed15526cb33 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 6 May 2022 22:41:12 +0430 Subject: [PATCH] reza fixed soemthing --- src/components/Avatar/index.js | 21 ++++ .../layouts/Comments/assets/danovin.svg | 3 + .../layouts/Comments/assets/dialog.svg | 30 +++++ .../layouts/Comments/assets/ravino.svg | 8 ++ .../layouts/Comments/assets/razgosha.svg | 8 ++ .../FeaturesPage/layouts/Comments/index.js | 114 ++++++++++++++++-- .../FeaturesPage/layouts/Graphic/index.js | 35 +++++- 7 files changed, 208 insertions(+), 11 deletions(-) create mode 100644 src/components/Avatar/index.js create mode 100644 src/views/FeaturesPage/layouts/Comments/assets/danovin.svg create mode 100644 src/views/FeaturesPage/layouts/Comments/assets/dialog.svg create mode 100644 src/views/FeaturesPage/layouts/Comments/assets/ravino.svg create mode 100644 src/views/FeaturesPage/layouts/Comments/assets/razgosha.svg diff --git a/src/components/Avatar/index.js b/src/components/Avatar/index.js new file mode 100644 index 0000000..1b16076 --- /dev/null +++ b/src/components/Avatar/index.js @@ -0,0 +1,21 @@ +import React from "react"; + +//assets +import userImage from "../../views/Home/layouts/Graphic/assets/user1.svg"; + +function Avatar({ source, size, rounded, status }) { + return ( +
+ avatar + {status && ( + + )} +
+ ); +} + +export default Avatar; \ No newline at end of file diff --git a/src/views/FeaturesPage/layouts/Comments/assets/danovin.svg b/src/views/FeaturesPage/layouts/Comments/assets/danovin.svg new file mode 100644 index 0000000..6b6fbc3 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Comments/assets/danovin.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/FeaturesPage/layouts/Comments/assets/dialog.svg b/src/views/FeaturesPage/layouts/Comments/assets/dialog.svg new file mode 100644 index 0000000..85419b0 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Comments/assets/dialog.svg @@ -0,0 +1,30 @@ + + + + + + + + + + من به همه داستان بازی رو پیشنهاد می‌دم + + + + + تولید کننده محتوا2داستان واقعی + + + 1 + + + + همین حالا هم داریم ازش استفاده می‌کنیم + + + 2 + + + + + diff --git a/src/views/FeaturesPage/layouts/Comments/assets/ravino.svg b/src/views/FeaturesPage/layouts/Comments/assets/ravino.svg new file mode 100644 index 0000000..c226d1d --- /dev/null +++ b/src/views/FeaturesPage/layouts/Comments/assets/ravino.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/views/FeaturesPage/layouts/Comments/assets/razgosha.svg b/src/views/FeaturesPage/layouts/Comments/assets/razgosha.svg new file mode 100644 index 0000000..f326bb4 --- /dev/null +++ b/src/views/FeaturesPage/layouts/Comments/assets/razgosha.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/views/FeaturesPage/layouts/Comments/index.js b/src/views/FeaturesPage/layouts/Comments/index.js index 8ee91e6..093fb9f 100644 --- a/src/views/FeaturesPage/layouts/Comments/index.js +++ b/src/views/FeaturesPage/layouts/Comments/index.js @@ -1,14 +1,110 @@ -import React from 'react' -import { connect } from 'react-redux' +import React from "react"; +import { connect } from "react-redux"; -export const Comments = (props) => { +//assets +import dialogImage from "./assets/dialog.svg"; +import ravinoImage from "./assets/ravino.svg"; +import danovinImage from "./assets/danovin.svg"; +import razgoshaImage from "./assets/razgosha.svg"; + +//components +import Button from "../../../../components/Button"; +import Avatar from "../../../../components/Avatar"; + +export const Comments = ({ + comments = [ + { + logo: ravinoImage, + message: + "داستان بازی یک پلتفرم بسیار قدرتمند و نوظهور در عرصه سرگرم آموزی های جدیداست و انقلابی در این زمینه به وقوع پیوسته", + user: { + name: "مسعود حسنلو", + avatar: null, + title: "مدیرعامل شرکت راوینو", + }, + }, + { + logo: danovinImage, + message: + "برای ما که در کار تولید محتوای خلافانه هستم و همیشه در رقاب هستیم این پلتفرم حکم یک معجزه را دارد", + user: { + name: "پدرام بیدگلی", + avatar: null, + title: "تولید‌کننده محتوا", + }, + }, + { + logo: razgoshaImage, + message: + "عبارت فوق العاده برای این پلتفرم کم است مشتریان ما در حوزه محتوای آموزشی با استفاده از این پلتفرم چند برابر شده اند", + user: { + name: "کامران هوشمند", + avatar: null, + title: "مدیر تولید محتوا جشنواره رازگشا", + }, + }, + ], +}) => { + const Comment = React.useCallback( + ({ comment }) => { + return ( +
+ {comment.user.title} +

{comment.message}

+
+ +
+ + {comment.user.name} + + + {comment.user.title} + +
+
+
+ ); + }, + [comments] + ); return ( -
- ) -} +
+
+
+ + دیگران در مورد داستان بازی +
چه می گویند؟ + +

+ تجربه همکاران و مشتریان عزیزی که در کنار ما +
بوده‌اند و از خدمات ما استفاده می‌کنند +

+
+ دیالوگ +
+
+ {comments.map((comment, index) => ( + + ))} +
+
+ ); +}; -const mapStateToProps = (state) => ({}) +const mapStateToProps = (state) => ({}); -const mapDispatchToProps = {} +const mapDispatchToProps = {}; -export default connect(mapStateToProps, mapDispatchToProps)(Comments) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(Comments); diff --git a/src/views/FeaturesPage/layouts/Graphic/index.js b/src/views/FeaturesPage/layouts/Graphic/index.js index f3f6621..d912331 100644 --- a/src/views/FeaturesPage/layouts/Graphic/index.js +++ b/src/views/FeaturesPage/layouts/Graphic/index.js @@ -4,6 +4,8 @@ import TypeAnimation from "react-type-animation"; // assets import avatarImage from "./assets/avatar.svg"; +import path1Image from "./assets/path1.svg"; +import path2Image from "./assets/path2.svg"; export const Graphic = ({ uselessProps }) => { const [animationFlags, setAnimationFlags] = React.useState({ @@ -71,6 +73,19 @@ export const Graphic = ({ uselessProps }) => { message3: true, }); }, 3500); + setTimeout(() => { + setAnimationFlags({ + ...animationFlags, + title1: true, + title2: true, + title3: true, + description: true, + message1: true, + message2: true, + message3: true, + paths: true, + }); + }, 4200); }, []); const typing = React.useMemo(() => { @@ -96,7 +111,7 @@ export const Graphic = ({ uselessProps }) => { height: "calc( 100vh - 100vh / 12)", }} > -
+
{animationFlags.title1 && (

یک ابزار حرفه‌ای @@ -114,7 +129,7 @@ export const Graphic = ({ uselessProps }) => { )} {animationFlags.description && typing}

-
+
{animationFlags.message1 && (

@@ -138,6 +153,22 @@ export const Graphic = ({ uselessProps }) => {

)}
+ {animationFlags.paths && ( + <> + + + + )} ); };