reza added graphic layouts

master
Reza_ashrafi 2 years ago
parent 3038fae33d
commit 96a74df870
  1. 1
      package.json
  2. 10
      public/index.html
  3. 2
      src/App.scss
  4. 2
      src/components/Button/index.js
  5. 17
      src/components/Footer/index.js
  6. 14
      src/components/Navbar/index.js
  7. 2
      src/views/Home/index.js
  8. 3
      src/views/Home/layouts/CrossPlatform/index.js
  9. 6
      src/views/Home/layouts/Features/index.js
  10. 5
      src/views/Home/layouts/Form/index.js
  11. 2
      src/views/Home/layouts/Gradient/index.js
  12. 7
      src/views/Home/layouts/Graphic/assets/gallery.svg
  13. 16
      src/views/Home/layouts/Graphic/assets/icon1.svg
  14. 3
      src/views/Home/layouts/Graphic/assets/icon2.svg
  15. 3
      src/views/Home/layouts/Graphic/assets/icon3.svg
  16. 3
      src/views/Home/layouts/Graphic/assets/logo.svg
  17. 8
      src/views/Home/layouts/Graphic/assets/message1.svg
  18. 7
      src/views/Home/layouts/Graphic/assets/message2.svg
  19. 3
      src/views/Home/layouts/Graphic/assets/path1.svg
  20. 878
      src/views/Home/layouts/Graphic/assets/roban.svg
  21. 8
      src/views/Home/layouts/Graphic/assets/user1.svg
  22. 8
      src/views/Home/layouts/Graphic/assets/user2.svg
  23. 8
      src/views/Home/layouts/Graphic/assets/user3.svg
  24. 8
      src/views/Home/layouts/Graphic/assets/user4.svg
  25. 8
      src/views/Home/layouts/Graphic/assets/user5.svg
  26. 8
      src/views/Home/layouts/Graphic/assets/user6.svg
  27. 8
      src/views/Home/layouts/Graphic/assets/user7.svg
  28. 10
      src/views/Home/layouts/Graphic/assets/voice.svg
  29. 369
      src/views/Home/layouts/Graphic/index.js
  30. 133
      src/views/Home/layouts/Graphic/index.scss
  31. 5
      src/views/Home/layouts/Panel/index.js
  32. 4
      src/views/Home/layouts/Samples/index.js
  33. 12
      yarn.lock

@ -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",

@ -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>

@ -2,6 +2,8 @@
@tailwind components;
@tailwind utilities;
@import "./views/Home/layouts/Graphic/index.scss";
.rtl {
direction: rtl;
}

@ -12,7 +12,7 @@ const Button = ({
}) => {
return (
<button
className={`md:text-2x font-4 relative ${
className={`md:text-1x font-4 relative ${
backgroundColor +
" " +
round +

@ -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);

@ -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>

@ -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>
);
};

@ -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">

@ -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 }} />

@ -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">

@ -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%)",

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 79 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -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>

After

Width:  |  Height:  |  Size: 347 B

@ -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>

After

Width:  |  Height:  |  Size: 266 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 48 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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>

After

Width:  |  Height:  |  Size: 412 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 112 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 22 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 29 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 79 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 76 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 41 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 31 KiB

@ -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>
);
};

@ -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);
}
}

@ -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">
پنل مدیریتی

@ -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>

@ -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"

Loading…
Cancel
Save