From df75701048978f93b402db092134983b61301dee Mon Sep 17 00:00:00 2001
From: Reza_ashrafi 
Date: Sun, 1 May 2022 23:28:09 +0430
Subject: [PATCH] reza fixed features
---
 src/App.scss                                  |   1 +
 src/components/Navbar/index.js                |  18 ++-
 src/router.js                                 |  14 +-
 src/views/FeaturesPage/index.js               | 105 ++++++++++++
 .../FeaturesPage/layouts/Comments/index.js    |  14 ++
 .../layouts/Graphic/assets/avatar.svg         |  13 ++
 .../layouts/Graphic/assets/path1.svg          |   3 +
 .../layouts/Graphic/assets/path2.svg          |   3 +
 .../FeaturesPage/layouts/Graphic/index.js     | 149 ++++++++++++++++++
 .../FeaturesPage/layouts/Graphic/index.scss   |  29 ++++
 .../Features/assets/efficientlyContent.svg    |  15 ++
 .../layouts/Features/assets/moneyGain.svg     |  53 +++++++
 .../layouts/Features/assets/multipleStory.svg |  13 ++
 .../Features/assets/specialApplication.svg    |  15 ++
 src/views/Home/layouts/Features/index.js      |  41 +++--
 src/views/Home/layouts/Form/index.js          |   2 +-
 16 files changed, 461 insertions(+), 27 deletions(-)
 create mode 100644 src/views/FeaturesPage/index.js
 create mode 100644 src/views/FeaturesPage/layouts/Comments/index.js
 create mode 100644 src/views/FeaturesPage/layouts/Graphic/assets/avatar.svg
 create mode 100644 src/views/FeaturesPage/layouts/Graphic/assets/path1.svg
 create mode 100644 src/views/FeaturesPage/layouts/Graphic/assets/path2.svg
 create mode 100644 src/views/FeaturesPage/layouts/Graphic/index.js
 create mode 100644 src/views/FeaturesPage/layouts/Graphic/index.scss
 create mode 100644 src/views/Home/layouts/Features/assets/efficientlyContent.svg
 create mode 100644 src/views/Home/layouts/Features/assets/moneyGain.svg
 create mode 100644 src/views/Home/layouts/Features/assets/multipleStory.svg
 create mode 100644 src/views/Home/layouts/Features/assets/specialApplication.svg
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",
+            })
+          }
+        >
           تماس با ما
-        
-        
+        
+        
           مشاهده دمو
         
       
![]() +      
+      
+      
+      
+    
+  );
+};
+
+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 (
+    
+
+      
+      
+      
+      
+    
+  );
+};
+
+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 && (
+          
+            
+              اسکرول کن و بیا پایین و با ما آشنا شو !
+            
+            

+          
+        )}
+      
-        {items.map((item, index) => (
-          
+      
+        {(itemsProps?.length ? itemsProps : items).map((item, index) => (
+          
              {item.title}
             {item.title}
             
@@ -62,13 +70,22 @@ export const Features = ({ isDesktop }) => {
           
 
         ))}
       
-      
+      {!itemsProps.length ? (
+        
   );
 };
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 (