reza added graphic layouts

3 years ago · 96a74df870
parent 3038fae33d
commit 96a74df870
33 changed files with 1549 additions and 32 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "react-scripts": "5.0.1",
    "react-thunk": "^1.0.0",
    "react-toastify": "^8.2.0",
+    "react-type-animation": "^1.1.2",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-persist": "^6.0.0",
--- a/public/index.html
+++ b/public/index.html
@ -15,6 +15,7 @@
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@ -29,15 +30,6 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.

-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- a/src/App.scss
+++ b/src/App.scss
@ -2,6 +2,8 @@
@tailwind components;
@tailwind utilities;

+@import "./views/Home/layouts/Graphic/index.scss";
+
 .rtl {
  direction: rtl;
 }
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@ -12,7 +12,7 @@ const Button = ({
 }) => {
  return (
    <button
-      className={`md:text-2x font-4 relative ${
+      className={`md:text-1x font-4 relative ${
        backgroundColor +
        " " +
        round +
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@ -0,0 +1,17 @@
+import React from "react";
+import { connect } from "react-redux";
+
+export const Footer = ({}) => {
+  return (
+    <div className="w-full py-4 border-t border-solid border-gray-100 flex justify-center items-center text-x font-3">
+      ساخته شده با <span className="text-red-500 mx-1">&#9829;</span>&nbsp;توسط برنامه
+      نگار
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Footer);
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";

 //components
 // import NavigationDrawer from "../NavigationDrawer";
@ -18,12 +19,19 @@ function Navbar({ isDark, offline }) {

  return (
    <div
-      className="z-20 flex justify-center w-full border-b border-dark-2"
+      className="z-20 flex justify-center w-full border-b border-gray-100"
      style={{
-        height: "calc(100vh / 15)",
+        height: "calc(100vh / 12)",
      }}
    >
-      <div className="w-11/12 flex items-center justify-end">Navbar</div>
+      <div className="w-10/12 flex items-center justify-end gap-10">
+        <Link to="#" className="text-1x text-primary-4 font-4">
+          تماس با ما
+        </Link>
+        <Link to="#" className="px-6 py-2 rounded-full text-1x bg-primary-4 text-white">
+          مشاهده دمو
+        </Link>
+      </div>
      {/* <NavigationDrawer drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} /> */}
      {/* <SearchDrawer drawerOpen={searchOpen} setDrawerOpen={setSearchOpen} /> */}
    </div>
--- a/src/views/Home/index.js
+++ b/src/views/Home/index.js
@ -10,6 +10,7 @@ import Gradient from "./layouts/Gradient";
 import Samples from "./layouts/Samples";
 import CrossPlatform from "./layouts/CrossPlatform";
 import Form from "./layouts/Form";
+import Footer from "../../components/Footer";

 export const Home = ({ device, setHeaderOptions, isDesktop }) => {
  React.useEffect(() => {
@ -26,6 +27,7 @@ export const Home = ({ device, setHeaderOptions, isDesktop }) => {
      <Samples />
      <CrossPlatform />
      <Form />
+      <Footer />
    </main>
  );
 };
--- a/src/views/Home/layouts/CrossPlatform/index.js
+++ b/src/views/Home/layouts/CrossPlatform/index.js
@ -32,8 +32,7 @@ export const CrossPlatform = ({}) => {

  return (
    <div
-      className="w-10/12 flex items-center justify-between"
-      style={{ height: "calc(100vh / 10)" }}
+      className="w-10/12 flex items-center justify-between my-28"
    >
      <div className="flex flex-col">
        <strong className="text-primary-3 font-6 text-5x">
--- a/src/views/Home/layouts/Features/index.js
+++ b/src/views/Home/layouts/Features/index.js
@ -41,8 +41,8 @@ export const Features = ({ isDesktop }) => {
  }, [isDesktop]);

  return (
-    <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5">
-      <div className="flex flex-col">
+    <div className="w-10/12 flex flex-col justify-around items-center py-5">
+      <div className="flex flex-col mt-24">
        <strong className="text-primary-3 font-6 text-5x">
          بیشتر از یک پلتفرم محتوایی اعجاب انگیز
        </strong>
@ -51,7 +51,7 @@ export const Features = ({ isDesktop }) => {
        </p>
      </div>

-      <div className="flex justify-between w-full">
+      <div className="flex justify-between w-full mt-32 mb-24">
        {items.map((item, index) => (
          <div className="flex flex-col items-center gap-4 w-1/5" key={index}>
            <img src={item.image} alt={item.title} style={{ height: 161 }} />
--- a/src/views/Home/layouts/Form/index.js
+++ b/src/views/Home/layouts/Form/index.js
@ -11,8 +11,7 @@ import Textarea from "../../../../components/Textarea";
 export const Form = ({ contact, setContact }) => {
  return (
    <div
-      className="w-10/12 flex flex-col items-center justify-around"
-      style={{ height: "calc(100vh - 100vh / 10)" }}
+      className="w-10/12 flex flex-col items-center justify-around pb-10"
    >
      <div className="flex flex-col items-center">
        <strong className="text-primary-3 font-6 text-5x">
@ -22,7 +21,7 @@ export const Form = ({ contact, setContact }) => {
          در این قسمت یک متن بسیار عجیب و جالب باید قرار بگیرید{" "}
        </p>
      </div>
-      <div className="flex w-full justify-between">
+      <div className="flex w-full justify-between mt-32">
        <div className="flex flex-col justify-center w-5/12">
          <strong className="text-primary-7 font-4 text-4x">تماس با ما </strong>
          <strong className="text-black font-7 text-5x mt-2">
--- a/src/views/Home/layouts/Gradient/index.js
+++ b/src/views/Home/layouts/Gradient/index.js
@ -4,7 +4,7 @@ import { connect } from "react-redux";
 export const Gradient = ({}) => {
  return (
    <div
-      className="w-full flex relative justify-center pt-10"
+      className="w-full flex relative justify-center my-16"
      style={{
        background:
          "linear-gradient(315deg, rgba(255,238,225,1) 0%, rgba(248,250,255,1) 50%, rgba(211,245,255,1) 100%)",
--- a/src/views/Home/layouts/Graphic/assets/gallery.svg
+++ b/src/views/Home/layouts/Graphic/assets/gallery.svg
--- a/src/views/Home/layouts/Graphic/assets/icon1.svg
+++ b/src/views/Home/layouts/Graphic/assets/icon1.svg
@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="206.422" height="196.047" viewBox="0 0 206.422 196.047">
+  <defs>
+    <linearGradient id="linear-gradient" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ff99b6"/>
+      <stop offset="1" stop-color="#ff6691"/>
+    </linearGradient>
+    <linearGradient id="linear-gradient-2" x1="0.265" y1="0.008" x2="0.787" y2="1.105" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#ff6691"/>
+      <stop offset="1" stop-color="#ff0048"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_225" data-name="Group 225" transform="translate(-206.122 17.98)">
+    <path id="Path_213" data-name="Path 213" d="M270.248-14.52,256.239,4.848,408.745,93.275l3.354-9.863a8.358,8.358,0,0,0-3.072-9.5L281.859-16.435A8.357,8.357,0,0,0,270.248-14.52Z" fill="url(#linear-gradient)"/>
+    <path id="Path_214" data-name="Path 214" d="M252.954,146.556l-.946-27.117a8.84,8.84,0,0,0-3.788-6.95l-38.3-26.638a8.841,8.841,0,0,1-2.173-12.36L265.5-8.259a8.841,8.841,0,0,1,12.327-2.117L406.737,80.806a8.841,8.841,0,0,1,2.008,12.469l-59.945,81.2a8.841,8.841,0,0,1-12.289,1.916l-38.867-28.071a8.842,8.842,0,0,0-7.722-1.3l-25.587,7.692A8.841,8.841,0,0,1,252.954,146.556Z" fill="url(#linear-gradient-2)"/>
+  </g>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/icon2.svg
+++ b/src/views/Home/layouts/Graphic/assets/icon2.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="50.602" height="52.5" viewBox="0 0 50.602 52.5">
+  <path id="Rectangle_236" data-name="Rectangle 236" d="M25.3,0h1.9A25.3,25.3,0,0,1,52.5,25.3V48.343A2.259,2.259,0,0,1,50.241,50.6H25.3A25.3,25.3,0,0,1,0,25.3v0A25.3,25.3,0,0,1,25.3,0Z" transform="translate(50.602) rotate(90)" fill="#ffde0b"/>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/icon3.svg
+++ b/src/views/Home/layouts/Graphic/assets/icon3.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="83" height="80" viewBox="0 0 83 80">
+  <path id="Rectangle_235" data-name="Rectangle 235" d="M40,0h3A40,40,0,0,1,83,40V76.429A3.571,3.571,0,0,1,79.429,80H40A40,40,0,0,1,0,40v0A40,40,0,0,1,40,0Z" fill="#d84d4d"/>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/logo.svg
+++ b/src/views/Home/layouts/Graphic/assets/logo.svg
--- a/src/views/Home/layouts/Graphic/assets/message1.svg
+++ b/src/views/Home/layouts/Graphic/assets/message1.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="364.132" height="170.427" viewBox="0 0 364.132 170.427">
+  <g id="Group_271" data-name="Group 271" transform="translate(-1373.957 -354.652)">
+    <path id="Rectangle_248" data-name="Rectangle 248" d="M24,0H318a24,24,0,0,1,24,24v77a24,24,0,0,1-24,24H0a0,0,0,0,1,0,0V24A24,24,0,0,1,24,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1376.889, 390.401)" fill="#4dd8bc" opacity="0.42"/>
+    <path id="Rectangle_246" data-name="Rectangle 246" d="M24,0H329a24,24,0,0,1,24,24v77a24,24,0,0,1-24,24H0a0,0,0,0,1,0,0V24A24,24,0,0,1,24,0Z" transform="matrix(0.995, -0.105, 0.105, 0.995, 1373.957, 400.764)" fill="#4dd8bc"/>
+    <text id="سلام_قصه_از_اینجا_همینجا_شروع_میشه._برای_پایان_آماده_هستی_مطمئنی_" data-name="سلام
+قصه از اینجا همینجا شروع میشه. برای پایان آماده هستی؟ مطمئنی ؟" transform="matrix(0.995, -0.105, 0.105, 0.995, 1390.183, 417.602)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-32.572" y="17"></tspan><tspan y="17">سلام</tspan><tspan x="-306.136" y="43"> </tspan><tspan y="43">قصه از اینجا همینجا شروع میشه. برای پایان</tspan><tspan x="-164.441" y="69">آماده هستی؟ مطمئنی ؟</tspan></text>
+  </g>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/message2.svg
+++ b/src/views/Home/layouts/Graphic/assets/message2.svg
@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="369.544" height="104.056" viewBox="0 0 369.544 104.056">
+  <g id="Group_272" data-name="Group 272" transform="translate(-150.515 -280.224)">
+    <path id="Rectangle_252" data-name="Rectangle 252" d="M15,0H343a15,15,0,0,1,15,15V81.484a0,0,0,0,1,0,0H15a15,15,0,0,1-15-15V15A15,15,0,0,1,15,0Z" transform="translate(154.367 292.718) rotate(-2)" fill="#b0df2d" opacity="0.49"/>
+    <path id="Rectangle_251" data-name="Rectangle 251" d="M15,0H352a15,15,0,0,1,15,15V79.3a0,0,0,0,1,0,0H15a15,15,0,0,1-15-15V15A15,15,0,0,1,15,0Z" transform="translate(150.515 305.032) rotate(-2)" fill="#b0df2d"/>
+    <text id="هیچ_وقت_برای_یک_ماجراجویی_درست_و_حسابی_دیر_نیست" data-name="هیچ وقت برای یک ماجراجویی درست و حسابی دیر نیست" transform="matrix(0.999, -0.035, 0.035, 0.999, 171.078, 317.73)" fill="#fff" font-size="17" font-family="IRANSansX-Regular, IRANSansX"><tspan x="-268.243" y="17"> </tspan><tspan y="17">هیچ وقت برای یک ماجراجویی درست و</tspan><tspan x="-121.227" y="43">حسابی دیر نیست</tspan></text>
+  </g>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/path1.svg
+++ b/src/views/Home/layouts/Graphic/assets/path1.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="503.467" height="113.487" viewBox="0 0 503.467 113.487">
+  <path id="Path_217" data-name="Path 217" d="M113.984,317.179s-33.239,57.266,14.581,76.355S263.4,322.51,360.609,363.275c-34.493,119.158,218.914,23.206,237.218,11.445" transform="translate(-99.197 -312.395)" fill="none" stroke="#eee" stroke-linecap="round" stroke-width="7" stroke-dasharray="11 21"/>
+</svg>
--- a/src/views/Home/layouts/Graphic/assets/roban.svg
+++ b/src/views/Home/layouts/Graphic/assets/roban.svg
--- a/src/views/Home/layouts/Graphic/assets/user1.svg
+++ b/src/views/Home/layouts/Graphic/assets/user1.svg
--- a/src/views/Home/layouts/Graphic/assets/user2.svg
+++ b/src/views/Home/layouts/Graphic/assets/user2.svg
--- a/src/views/Home/layouts/Graphic/assets/user3.svg
+++ b/src/views/Home/layouts/Graphic/assets/user3.svg
--- a/src/views/Home/layouts/Graphic/assets/user4.svg
+++ b/src/views/Home/layouts/Graphic/assets/user4.svg
--- a/src/views/Home/layouts/Graphic/assets/user5.svg
+++ b/src/views/Home/layouts/Graphic/assets/user5.svg
--- a/src/views/Home/layouts/Graphic/assets/user6.svg
+++ b/src/views/Home/layouts/Graphic/assets/user6.svg
--- a/src/views/Home/layouts/Graphic/assets/user7.svg
+++ b/src/views/Home/layouts/Graphic/assets/user7.svg
--- a/src/views/Home/layouts/Graphic/assets/voice.svg
+++ b/src/views/Home/layouts/Graphic/assets/voice.svg
--- a/src/views/Home/layouts/Graphic/index.js
+++ b/src/views/Home/layouts/Graphic/index.js
@ -1,15 +1,376 @@
 import React from "react";
 import { connect } from "react-redux";
+import TypeAnimation from "react-type-animation";
+
+//assets
+import logoImage from "./assets/logo.svg";
+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 robanImage from "./assets/roban.svg";
+import user1Image from "./assets/user1.svg";
+import user2Image from "./assets/user2.svg";
+import user3Image from "./assets/user3.svg";
+import user4Image from "./assets/user4.svg";
+import user5Image from "./assets/user5.svg";
+import user6Image from "./assets/user6.svg";
+import user7Image from "./assets/user7.svg";
+import icon1Image from "./assets/icon1.svg";
+import icon2Image from "./assets/icon2.svg";
+import icon3Image from "./assets/icon3.svg";
+import path1Image from "./assets/path1.svg";
+
+export const Graphic = ({ uselessProps }) => {
+  const [animationFlags, setAnimationFlags] = React.useState({
+    roban: false,
+    voice: false,
+    gallery: false,
+    avatar: false,
+    icon: false,
+    title: false,
+    description: false,
+    messages: false,
+  });
+
+  const type = React.useMemo(() => {
+    return (
+      <TypeAnimation
+        cursor={true}
+        repeat={1}
+        sequence={[
+          "شاید برای شما هم اتفاق افتاده باشه که یک داستان درجه یک و هیجان انگیز خونده باشید. اما اینجا داستان فرق می‌کنه این بار شما در مرکز اتفاقات هیجان انگیز هستید ...!",
+          12000,
+          ,
+        ]}
+        wrapper="p"
+        className="text-2x text-primary-1 text-center font-4 w-full transform -translate-y-1/3"
+      />
+    );
+  }, [uselessProps]);
+
+  React.useEffect(() => {
+    //roban
+    setTimeout(() => {
+      setAnimationFlags({ ...animationFlags, roban: true });
+    }, 600);
+
+    //icons
+    setTimeout(() => {
+      setAnimationFlags({ ...animationFlags, icon: true, roban: true });
+    }, 1500);
+
+    //title
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+      });
+    }, 2500);
+
+    // description
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        description: true,
+      });
+    }, 3000);
+
+    //messages
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        messages: true,
+        description: true,
+      });
+    }, 3600);
+
+    //gallery
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        messages: true,
+        gallery: true,
+        description: true,
+      });
+    }, 4600);
+
+    // voice
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        messages: true,
+        gallery: true,
+        voice: true,
+        description: true,
+      });
+    }, 5600);
+
+    // image
+    setTimeout(() => {
+      setAnimationFlags({
+        ...animationFlags,
+        icon: true,
+        roban: true,
+        title: true,
+        messages: true,
+        gallery: true,
+        voice: true,
+        description: true,
+        avatar: true,
+      });
+    }, 6500);
+  }, []);

-export const Graphic = ({}) => {
  return (
    <header
-      className="w-10/12 flex items-center justify-center bg-green-100"
+      className="w-10/12 flex relative"
      style={{
-        height: "calc( 100vh - 100vh / 15)",
+        height: "calc( 100vh - 100vh / 12)",
      }}
    >
-      Graphic
+      {/* roban */}
+      {animationFlags.roban && (
+        <img
+          src={robanImage}
+          alt="روبان"
+          className="absolute top-0 left-1/2 roban origin-left"
+        />
+      )}
+
+      {/* logo */}
+      <img
+        src={logoImage}
+        alt="لوگو"
+        className="absolute origin-bottom-left left-1/2 logo"
+      />
+      {/* title */}
+      <div
+        className="flex flex-col absolute left-1/2 transform -translate-x-1/2 gap-10 items-center"
+        style={{ top: "calc((100vh - 100vh / 12) / 2.5)" }}
+      >
+        {animationFlags.title && (
+          <>
+            <h1 className="font-7 text-10x text-primary-1 text-center title-top-line">
+              داستان‌ها با شما
+            </h1>
+            <h1 className="font-7 text-10x text-primary-1 text-center title-bottom-line">
+              حرف می‌زنند
+            </h1>
+          </>
+        )}
+        {animationFlags.description && (
+          <div
+            style={{
+              width: "calc(10 / 12 * 100vw / 2.5)",
+            }}
+          >
+            {type}
+          </div>
+        )}
+      </div>
+      {/* galleryImage */}
+      {animationFlags.gallery && (
+        <img
+          src={galleryImage}
+          alt="گالری"
+          className="absolute left-0 gallery"
+          style={{
+            width: "19.11vw",
+            bottom: "calc((100vh - 100vh / 12) / 10)",
+          }}
+        />
+      )}
+
+      {/* voice */}
+      {animationFlags.voice && (
+        <img
+          src={voiceImage}
+          alt="وویس"
+          className="absolute voice"
+          style={{
+            width: "16.77vw",
+            bottom: "calc((100vh - 100vh / 12) / 10)",
+            right: "calc(19.11vw - 1.5vw)",
+          }}
+        />
+      )}
+
+      {animationFlags.messages && (
+        <>
+          <img
+            src={message1Image}
+            alt="پیام"
+            className="absolute message1"
+            style={{
+              width: "18.95vw",
+              top: "calc((100vh - 100vh / 12) / 3.5)",
+              right: "calc(19.11vw - 1.5vw)",
+            }}
+          />
+          <img
+            src={message2Image}
+            alt="پیام"
+            className="absolute left-0 message2"
+            style={{
+              width: "19.21vw",
+              top: "calc((100vh - 100vh / 12) / 6)",
+            }}
+          />
+        </>
+      )}
+
+      {animationFlags.avatar && (
+        <>
+          <img
+            src={user1Image}
+            alt="کاربر"
+            className="absolute right-0 animate-pulse"
+            style={{
+              width: "5.20vw",
+              top: "calc((100vh - 100vh / 12) / 20)",
+            }}
+          />
+          {/* user2 */}
+          <img
+            src={user2Image}
+            alt="کاربر"
+            className="absolute transform -translate-x-1/2 animate-pulse"
+            style={{
+              width: "5.20vw",
+              top: "calc((100vh - 100vh / 12) / 18)",
+              left: "calc(19.11vw / 2)",
+            }}
+          />
+          {/* user3 */}
+          <img
+            src={user3Image}
+            alt="کاربر"
+            className="absolute animate-pulse"
+            style={{
+              width: "8.07vw",
+              top: "calc((100vh - 100vh / 12) / 7)",
+              left: "22.11vw",
+            }}
+          />
+          {/* user4 */}
+          <img
+            src={user4Image}
+            alt="کاربر"
+            className="absolute transform -translate-x-full translate-y-1/4 animate-pulse"
+            style={{
+              width: "5.20vw",
+              top: "calc((100vh - 100vh / 12) / 2.5)",
+              left: "calc(19.11vw / 2.4)",
+            }}
+          />
+          {/* user5 */}
+          <img
+            src={user5Image}
+            alt="کاربر"
+            className="absolute transform -translate-y-full translate-x-full animate-pulse"
+            style={{
+              width: "6.71vw",
+              bottom: "calc((100vh - 100vh / 12) / 6)",
+              right: "calc(19.11vw)",
+            }}
+          />
+          {/* user6 */}
+          <img
+            src={user6Image}
+            alt="کاربر"
+            className="absolute bottom-0 transform  -translate-x-full translate-y-1/3 animate-pulse"
+            style={{
+              width: "4.32vw",
+              left: "calc(19.11vw)",
+            }}
+          />
+          {/* user7 */}
+          <img
+            src={user7Image}
+            alt="کاربر"
+            className="absolute bottom-0 transform translate-x-full translate-y-1/2 animate-pulse"
+            style={{
+              width: "7.18vw",
+              right: "calc(19.11vw / 1.5)",
+            }}
+          />
+        </>
+      )}
+
+      {animationFlags.icon && (
+        <>
+          {/* icon1 */}
+          <img
+            src={icon1Image}
+            alt="آیکن"
+            className="absolute right-0 icons"
+            style={{
+              width: "10.72vw",
+              top: "calc((100vh - 100vh / 12) / 40)",
+              right: "16.95vw",
+            }}
+          />
+          {/* icon2 */}
+          <img
+            src={icon2Image}
+            alt="آیکن"
+            className="absolute right-0 icons"
+            style={{
+              width: "2.70vw",
+              top: "calc((100vh - 100vh / 12) / 2.9)",
+              right: "24vw",
+            }}
+          />
+          {/* icon3 */}
+          <img
+            src={icon3Image}
+            alt="آیکن"
+            className="absolute left-0 icons"
+            style={{
+              width: "4.32vw",
+              left: "15.80vw",
+              top: "calc((100vh - 100vh / 12) / 1.75)",
+            }}
+          />
+        </>
+      )}
+
+      {animationFlags.paths && (
+        <>
+          <div
+            className="absolute"
+            style={{
+              left: "-1vw",
+              top: "calc((100vh - 100vh / 12) / 4)",
+            }}
+          >
+            <img
+              src={path1Image}
+              alt="مسیر"
+              style={{
+                width: "25.78vw",
+                left: "-1vw",
+                top: "calc((100vh - 100vh / 12) / 4)",
+              }}
+            />
+          </div>
+        </>
+      )}
    </header>
  );
 };
--- a/src/views/Home/layouts/Graphic/index.scss
+++ b/src/views/Home/layouts/Graphic/index.scss
@ -0,0 +1,133 @@
+.logo{
+  animation : logoZoomIn 0.4s 1;
+  transform : scale(100%) translateX(-50%);
+  width: "11.14vw";
+  top: calc((100vh - 100vh / 12) / 10);
+}
+
+.roban{
+  animation : robanZoomIn 1.0s 1;
+  transform: scale(100%) translateX(-50%) translateY(-90%);
+  width: "40.46vw",
+}
+
+.icons {
+  animation: icons 1s 1;
+  transform: translateY(0px);
+}
+
+.title-top-line{
+  animation: titleTopLine 0.7s 1;
+}
+
+.title-bottom-line{
+  animation: titleBottomLine 0.7s 1;
+  transform: translateY(-30%);
+}
+
+.voice{
+  animation: voice 0.7s 1;
+  transform: translateX(100%);
+}
+
+.gallery{
+  animation: gallery 0.7s 1;
+  transform: translateX(0px);
+}
+
+.message1{
+  animation: message1 0.7s 1;
+  transform: translateX(100%);
+}
+
+.message2{
+  animation: message2 0.7s 1;
+  transform: translateX(0px);
+}
+
+
+
+// keyframes
+
+@keyframes logoZoomIn{
+  0% {
+    transform : scale(0%) translateX(-50%);
+  }
+  100% {
+    transform : scale(100%) translateX(-50%);
+  }
+}
+
+@keyframes robanZoomIn{
+  0% {
+    transform : scale(0%) translateX(-50%) translateY(-90%);
+  }
+  100% {
+    transform: scale(100%) translateX(-50%) translateY(-90%),
+  }
+}
+
+@keyframes titleTopLine {
+  0% {
+    transform : translateX(calc(100vw / 2 - 50%));
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes titleBottomLine {
+  0% {
+    transform : translateY(-30%) translateX(calc(-100vw / 2 - 50%));
+  }
+  100% {
+    transform: translateY(-30%) translateX(0px);
+  }
+}
+
+@keyframes icons {
+  0% {
+    transform : translateY(-100vw);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes voice {
+  0% {
+    transform : translateX(calc(50vw));
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes gallery {
+  0% {
+    transform : translateX(calc(-50vw));
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+
+@keyframes message1 {
+  0% {
+    transform : translateX(calc(50vw));
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes message2 {
+  0% {
+    transform : translateX(-50vw);
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
--- a/src/views/Home/layouts/Panel/index.js
+++ b/src/views/Home/layouts/Panel/index.js
@ -24,10 +24,7 @@ export const Panel = ({ isDesktop }) => {
  }, [isDesktop]);

  return (
-    <div
-      className="w-10/12 flex items-center justify-between"
-      style={{ height: "calc(100vh / 2)" }}
-    >
+    <div className="w-10/12 flex items-center justify-between my-12">
      <div className="flex flex-col">
        <strong className="text-primary-3 font-6 text-5x">
          پنل مدیریتی
--- a/src/views/Home/layouts/Samples/index.js
+++ b/src/views/Home/layouts/Samples/index.js
@ -10,7 +10,7 @@ export const Samples = ({}) => {

  const Info = () => {
    return (
-      <div className="flex justify-between border-2 border-solid border-primary-5 rounded-lg px-7 py-16 w-11/12">
+      <div className="flex justify-between border border-solid border-primary-5 rounded-lg px-7 py-16 w-11/12 mt-10">
        <div className="flex flex-col flex-1">
          <strong className="text-primary-4 font-4 text-2x">
            آقا بزرگ
@ -37,7 +37,7 @@ export const Samples = ({}) => {

  return (
    <div className="w-10/12 h-screen flex flex-col justify-around items-center py-5 relative">
-      <div className="flex flex-col">
+      <div className="flex flex-col mb-32">
        <strong className="text-primary-3 font-6 text-5x">
          با افتخار قدرت گرفته از داستان بازی{" "}
        </strong>
--- a/yarn.lock
+++ b/yarn.lock
@ -1062,6 +1062,11 @@
  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

+"@camwiegert/typical@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@camwiegert/typical/-/typical-0.1.1.tgz#c75d3b658e2f542d113c3e266389794c7dc45d6d"
+  integrity sha512-4xAtH3F3uJ8boe9IPahdYFCBELmyOBwHGAn0rDO6C1rx0TuZb5f4UqfuiOQF7YiMJGCOsUIW7LyucMNnVQYsRg==
+
 "@csstools/normalize.css@*":
  version "12.0.0"
  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
@ -7410,6 +7415,13 @@ react-toastify@^8.2.0:
  dependencies:
    clsx "^1.1.1"

+react-type-animation@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/react-type-animation/-/react-type-animation-1.1.2.tgz#ed0fe6da51eb49c49a1f2e5565e3df058cf1b240"
+  integrity sha512-/ymDXDR6vksmb9nkWbasmu8qEArUCWFxn1k+D9RndXdfYhO7II7XPSOxsvSLC0rYU1QB3IRoRPME7qLkAp1TRA==
+  dependencies:
+    "@camwiegert/typical" "^0.1.1"
+
 react@^18.0.0:
  version "18.0.0"
  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"