reza fixed soemthing

master
Reza_ashrafi 2 years ago
parent df75701048
commit 3d4c169efa
  1. 21
      src/components/Avatar/index.js
  2. 3
      src/views/FeaturesPage/layouts/Comments/assets/danovin.svg
  3. 30
      src/views/FeaturesPage/layouts/Comments/assets/dialog.svg
  4. 8
      src/views/FeaturesPage/layouts/Comments/assets/ravino.svg
  5. 8
      src/views/FeaturesPage/layouts/Comments/assets/razgosha.svg
  6. 114
      src/views/FeaturesPage/layouts/Comments/index.js
  7. 35
      src/views/FeaturesPage/layouts/Graphic/index.js

@ -0,0 +1,21 @@
import React from "react";
//assets
import userImage from "../../views/Home/layouts/Graphic/assets/user1.svg";
function Avatar({ source, size, rounded, status }) {
return (
<div className={`${rounded} overflow-hidden relative`}>
<img
src={source ? source : userImage}
alt="avatar"
style={{ width: size, height: size, objectFit: "contain" }}
/>
{status && (
<span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
)}
</div>
);
}
export default Avatar;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 167 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 130 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 70 KiB

@ -1,14 +1,110 @@
import React from 'react' import React from "react";
import { connect } from 'react-redux' import { connect } from "react-redux";
export const Comments = (props) => { //assets
import dialogImage from "./assets/dialog.svg";
import ravinoImage from "./assets/ravino.svg";
import danovinImage from "./assets/danovin.svg";
import razgoshaImage from "./assets/razgosha.svg";
//components
import Button from "../../../../components/Button";
import Avatar from "../../../../components/Avatar";
export const Comments = ({
comments = [
{
logo: ravinoImage,
message:
"داستان بازی یک پلتفرم بسیار قدرتمند و نوظهور در عرصه سرگرم آموزی های جدیداست و انقلابی در این زمینه به وقوع پیوسته",
user: {
name: "مسعود حسنلو",
avatar: null,
title: "مدیرعامل شرکت راوینو",
},
},
{
logo: danovinImage,
message:
"برای ما که در کار تولید محتوای خلافانه هستم و همیشه در رقاب هستیم این پلتفرم حکم یک معجزه را دارد",
user: {
name: "پدرام بیدگلی",
avatar: null,
title: "تولیدکننده محتوا",
},
},
{
logo: razgoshaImage,
message:
"عبارت فوق العاده برای این پلتفرم کم است مشتریان ما در حوزه محتوای آموزشی با استفاده از این پلتفرم چند برابر شده اند",
user: {
name: "کامران هوشمند",
avatar: null,
title: "مدیر تولید محتوا جشنواره رازگشا",
},
},
],
}) => {
const Comment = React.useCallback(
({ comment }) => {
return (
<div className="flex flex-col gap-6 w-1/4">
<img
src={comment.logo}
alt={comment.user.title}
style={{ width: "8.02vw", height: "6.63vh" }}
/>
<p className="text-1x text-primary-1 font-2">{comment.message}</p>
<div className="flex">
<Avatar size="3.40vw" rounded="rounded-full" />
<div className="flex flex-col mr-2 gap-0.5">
<span className="text-1x font-2 text-primary-1">
{comment.user.name}
</span>
<span className="text-1x font-2 text-primary-1">
{comment.user.title}
</span>
</div>
</div>
</div>
);
},
[comments]
);
return ( return (
<div></div> <section className="w-10/12 flex flex-col relative gap-10 divide-y divide-solid divide-gray-200 mb-36">
) <div className="w-full flex justify-between items-center">
} <div className="flex flex-col">
<strong className="text-primary-1 font-6 text-5x">
دیگران در مورد داستان بازی
<br /> چه می گویند؟
</strong>
<p className="text-primary-1 text-6xl font-3 text-2x my-6">
تجربه همکاران و مشتریان عزیزی که در کنار ما
<br /> بودهاند و از خدمات ما استفاده میکنند
</p>
<Button
title="نظرات بیشتری بخوانید"
round="rounded-full"
backgroundColor="bg-primary-1"
color="text-white"
padding="px-10 py-5"
action={() => {}}
/>
</div>
<img src={dialogImage} alt="دیالوگ" className="w-7/12" />
</div>
<div className="w-full flex justify-between pt-12">
{comments.map((comment, index) => (
<Comment comment={comment} key={index} />
))}
</div>
</section>
);
};
const mapStateToProps = (state) => ({}) const mapStateToProps = (state) => ({});
const mapDispatchToProps = {} const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Comments) export default connect(mapStateToProps, mapDispatchToProps)(Comments);

@ -4,6 +4,8 @@ import TypeAnimation from "react-type-animation";
// assets // assets
import avatarImage from "./assets/avatar.svg"; import avatarImage from "./assets/avatar.svg";
import path1Image from "./assets/path1.svg";
import path2Image from "./assets/path2.svg";
export const Graphic = ({ uselessProps }) => { export const Graphic = ({ uselessProps }) => {
const [animationFlags, setAnimationFlags] = React.useState({ const [animationFlags, setAnimationFlags] = React.useState({
@ -71,6 +73,19 @@ export const Graphic = ({ uselessProps }) => {
message3: true, message3: true,
}); });
}, 3500); }, 3500);
setTimeout(() => {
setAnimationFlags({
...animationFlags,
title1: true,
title2: true,
title3: true,
description: true,
message1: true,
message2: true,
message3: true,
paths: true,
});
}, 4200);
}, []); }, []);
const typing = React.useMemo(() => { const typing = React.useMemo(() => {
@ -96,7 +111,7 @@ export const Graphic = ({ uselessProps }) => {
height: "calc( 100vh - 100vh / 12)", height: "calc( 100vh - 100vh / 12)",
}} }}
> >
<div className="flex-1 flex flex-col justify-center"> <div className="flex-1 flex flex-col justify-center z-20">
{animationFlags.title1 && ( {animationFlags.title1 && (
<h1 className="font-7 text-10x text-primary-1 right-to-left transition-all"> <h1 className="font-7 text-10x text-primary-1 right-to-left transition-all">
یک ابزار حرفهای یک ابزار حرفهای
@ -114,7 +129,7 @@ export const Graphic = ({ uselessProps }) => {
)} )}
{animationFlags.description && typing} {animationFlags.description && typing}
</div> </div>
<div className="flex-1 flex flex-col justify-center gap-16"> <div className="flex-1 flex flex-col justify-center gap-16 z-20">
{animationFlags.message1 && ( {animationFlags.message1 && (
<div className="flex self-end gap-6 left-to-right"> <div className="flex self-end gap-6 left-to-right">
<p className="text-1x leading-9 font-2 bg-secondary-7 py-5 px-4 rounded-b-3xl rounded-tr-3xl text-white"> <p className="text-1x leading-9 font-2 bg-secondary-7 py-5 px-4 rounded-b-3xl rounded-tr-3xl text-white">
@ -138,6 +153,22 @@ export const Graphic = ({ uselessProps }) => {
</div> </div>
)} )}
</div> </div>
{animationFlags.paths && (
<>
<img
src={path1Image}
alt=""
className="absolute"
style={{ top: "calc(100% / 3.3)", left: "calc(9vw)" }}
/>
<img
src={path2Image}
alt=""
className="absolute"
style={{ top: "calc(100% / 6)", left: "calc(2.5vw)" }}
/>
</>
)}
</header> </header>
); );
}; };

Loading…
Cancel
Save