diff --git a/src/views/Home/layouts/Graphic/assets/message1.svg b/src/views/Home/layouts/Graphic/assets/message1.svg
index 94e8691..80265ed 100644
--- a/src/views/Home/layouts/Graphic/assets/message1.svg
+++ b/src/views/Home/layouts/Graphic/assets/message1.svg
@@ -3,6 +3,6 @@
سلام قصه از اینجا همینجا شروع میشه. برای پایانآماده هستی؟ مطمئنی ؟
+قصه از اینجا همینجا شروع میشه. برای پایان آماده هستی؟ مطمئنی ؟" transform="matrix(0.995, -0.105, 0.105, 0.995, 1390.183, 417.602)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX">سلام قصه از اینجا همینجا شروع میشه. برای پایانآماده هستی؟ مطمئنی ؟
-
+
\ No newline at end of file
diff --git a/src/views/Home/layouts/Graphic/assets/message2.svg b/src/views/Home/layouts/Graphic/assets/message2.svg
index 6a83711..e7b094d 100644
--- a/src/views/Home/layouts/Graphic/assets/message2.svg
+++ b/src/views/Home/layouts/Graphic/assets/message2.svg
@@ -2,6 +2,6 @@
- هیچ وقت برای یک ماجراجویی درست وحسابی دیر نیست
+ هیچ وقت برای یک ماجراجویی درست وحسابی دیر نیست
diff --git a/src/views/Home/layouts/Graphic/assets/message3.svg b/src/views/Home/layouts/Graphic/assets/message3.svg
new file mode 100644
index 0000000..46b4181
--- /dev/null
+++ b/src/views/Home/layouts/Graphic/assets/message3.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/views/Home/layouts/Graphic/assets/path2.svg b/src/views/Home/layouts/Graphic/assets/path2.svg
new file mode 100644
index 0000000..74e4f26
--- /dev/null
+++ b/src/views/Home/layouts/Graphic/assets/path2.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/views/Home/layouts/Graphic/assets/path3.svg b/src/views/Home/layouts/Graphic/assets/path3.svg
new file mode 100644
index 0000000..7ebf378
--- /dev/null
+++ b/src/views/Home/layouts/Graphic/assets/path3.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/views/Home/layouts/Graphic/index.js b/src/views/Home/layouts/Graphic/index.js
index 271889e..11fa13d 100644
--- a/src/views/Home/layouts/Graphic/index.js
+++ b/src/views/Home/layouts/Graphic/index.js
@@ -8,6 +8,7 @@ import galleryImage from "./assets/gallery.svg";
import voiceImage from "./assets/voice.svg";
import message1Image from "./assets/message1.svg";
import message2Image from "./assets/message2.svg";
+import message3Image from "./assets/message3.svg";
import robanImage from "./assets/roban.svg";
import user1Image from "./assets/user1.svg";
import user2Image from "./assets/user2.svg";
@@ -20,6 +21,8 @@ import icon1Image from "./assets/icon1.svg";
import icon2Image from "./assets/icon2.svg";
import icon3Image from "./assets/icon3.svg";
import path1Image from "./assets/path1.svg";
+import path2Image from "./assets/path2.svg";
+import path3Image from "./assets/path3.svg";
export const Graphic = ({ uselessProps }) => {
const [animationFlags, setAnimationFlags] = React.useState({
@@ -134,6 +137,21 @@ export const Graphic = ({ uselessProps }) => {
avatar: true,
});
}, 6500);
+ //path
+ setTimeout(() => {
+ setAnimationFlags({
+ ...animationFlags,
+ icon: true,
+ roban: true,
+ title: true,
+ messages: true,
+ gallery: true,
+ voice: true,
+ description: true,
+ avatar: true,
+ paths: true,
+ });
+ }, 7200);
}, []);
return (
@@ -188,7 +206,7 @@ export const Graphic = ({ uselessProps }) => {
{
{
top: "calc((100vh - 100vh / 12) / 6)",
}}
/>
- >
- )}
-
- {animationFlags.avatar && (
- <>
- {/* user2 */}
-
- {/* user3 */}
-
- {/* user4 */}
-
- {/* user5 */}
-
- {/* user6 */}
-
- {/* user7 */}
-
>
)}
+
+ {/* user2 */}
+
+ {/* user3 */}
+
+ {/* user4 */}
+
+ {/* user5 */}
+
+ {/* user6 */}
+
+ {/* user7 */}
+
+
{animationFlags.icon && (
<>
{/* icon1 */}
@@ -352,23 +389,36 @@ export const Graphic = ({ uselessProps }) => {
{animationFlags.paths && (
<>
-
-
-
+ />
+
+
>
)}
diff --git a/src/views/Home/layouts/Graphic/index.scss b/src/views/Home/layouts/Graphic/index.scss
index 3ca4ffb..95d89ad 100644
--- a/src/views/Home/layouts/Graphic/index.scss
+++ b/src/views/Home/layouts/Graphic/index.scss
@@ -45,6 +45,11 @@
transform: translateX(0px);
}
+.message3{
+ animation: message3 0.7s 1;
+ transform: translateX(-72%) translateY(20%);
+}
+
// keyframes
@@ -130,4 +135,13 @@
100% {
transform: translateX(0px);
}
+}
+
+@keyframes message3 {
+ 0% {
+ transform : translateX(calc(-72% + -50vw)) translateY(20%);
+ }
+ 100% {
+ transform: translateX(-72%) translateY(20%);
+ }
}
\ No newline at end of file