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"
+      className="w-10/12 flex items-center justify-between my-28"
      style={{ height: "calc(100vh / 10)" }}
    >
      <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="w-10/12 flex flex-col justify-around items-center py-5">
-      <div className="flex flex-col">
+      <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"
+      className="w-10/12 flex flex-col items-center justify-around pb-10"
      style={{ height: "calc(100vh - 100vh / 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 / 12)",
      }}
    >
      {/* 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={{
-        height: "calc( 100vh - 100vh / 15)",
+              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)",
            }}
          >
-      Graphic
+            <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
+    <div className="w-10/12 flex items-center justify-between my-12">
      className="w-10/12 flex items-center justify-between"
      style={{ height: "calc(100vh / 2)" }}
    >
      <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"