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 (
+
+
+ {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 @@
+
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.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 && (
+ <>
+
+
+ >
+ )}
);
};