reza fixed soemthing

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 (
+    <div className={`${rounded} overflow-hidden relative`}>
+      <img
+        src={source ? source : userImage}
+        alt="avatar"
+        style={{ width: size, height: size, objectFit: "contain" }}
+      />
+      {status && (
+        <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+      )}
+    </div>
+  );
+}
+
+export default Avatar;

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 (
+        <div className="flex flex-col gap-6 w-1/4">
+          <img
+            src={comment.logo}
+            alt={comment.user.title}
+            style={{ width: "8.02vw", height: "6.63vh" }}
+          />
+          <p className="text-1x text-primary-1 font-2">{comment.message}</p>
+          <div className="flex">
+            <Avatar size="3.40vw" rounded="rounded-full" />
+            <div className="flex flex-col mr-2 gap-0.5">
+              <span className="text-1x font-2 text-primary-1">
+                {comment.user.name}
+              </span>
+              <span className="text-1x font-2 text-primary-1">
+                {comment.user.title}
+              </span>
+            </div>
+          </div>
+        </div>
+      );
+    },
+    [comments]
+  );
   return (
-    <div></div>
-  )
-}
+    <section className="w-10/12 flex flex-col relative gap-10 divide-y divide-solid divide-gray-200 mb-36">
+      <div className="w-full flex justify-between items-center">
+        <div className="flex flex-col">
+          <strong className="text-primary-1 font-6 text-5x">
+            دیگران در مورد داستان بازی
+            <br /> چه می گویند؟
+          </strong>
+          <p className="text-primary-1 text-6xl font-3 text-2x my-6">
+            تجربه همکاران و مشتریان عزیزی که در کنار ما
+            <br /> بوده‌اند و از خدمات ما استفاده می‌کنند
+          </p>
+          <Button
+            title="نظرات بیشتری بخوانید"
+            round="rounded-full"
+            backgroundColor="bg-primary-1"
+            color="text-white"
+            padding="px-10 py-5"
+            action={() => {}}
+          />
+        </div>
+        <img src={dialogImage} alt="دیالوگ" className="w-7/12" />
+      </div>
+      <div className="w-full flex justify-between pt-12">
+        {comments.map((comment, index) => (
+          <Comment comment={comment} key={index} />
+        ))}
+      </div>
+    </section>
+  );
+};
 
-const mapStateToProps = (state) => ({})
+const mapStateToProps = (state) => ({});
 
-const mapDispatchToProps = {}
+const mapDispatchToProps = {};
 
-export default connect(mapStateToProps, mapDispatchToProps)(Comments)
+export default connect(mapStateToProps, mapDispatchToProps)(Comments);

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)",
       }}
     >
-      <div className="flex-1 flex flex-col justify-center">
+      <div className="flex-1 flex flex-col justify-center z-20">
         {animationFlags.title1 && (
           <h1 className="font-7 text-10x text-primary-1 right-to-left transition-all">
             یک ابزار حرفه‌ای
@@ -114,7 +129,7 @@ export const Graphic = ({ uselessProps }) => {
         )}
         {animationFlags.description && typing}
       </div>
-      <div className="flex-1 flex flex-col justify-center gap-16">
+      <div className="flex-1 flex flex-col justify-center gap-16 z-20">
         {animationFlags.message1 && (
           <div className="flex self-end gap-6 left-to-right">
             <p className="text-1x leading-9 font-2 bg-secondary-7 py-5 px-4 rounded-b-3xl rounded-tr-3xl text-white">
@@ -138,6 +153,22 @@ export const Graphic = ({ uselessProps }) => {
           </div>
         )}
       </div>
+      {animationFlags.paths && (
+        <>
+          <img
+            src={path1Image}
+            alt=""
+            className="absolute"
+            style={{ top: "calc(100% / 3.3)", left: "calc(9vw)" }}
+          />
+          <img
+            src={path2Image}
+            alt=""
+            className="absolute"
+            style={{ top: "calc(100% / 6)", left: "calc(2.5vw)" }}
+          />
+        </>
+      )}
     </header>
   );
 };