Diagram For How We Work Made

master
Pedram Keshavarzi 3 years ago
parent 82083b134b
commit 9764e99ce6
  1. 114
      src/Components/HowWeWorkDiagram/index.css
  2. 47
      src/Components/HowWeWorkDiagram/index.js
  3. 2
      src/Containers/TrustUs/trustUs.css
  4. 4
      src/Containers/howDoWeWork/howWeWork.js

@ -0,0 +1,114 @@
.tree {
display: flex;
flex-direction: row;
padding: 5%;
justify-content: center;
direction: ltr;
float: left;
}
.tree span {
color: #ccc;
border-radius: 8px;
padding: 0px 10px;
display: flex;
margin: 70px 20px;
align-items: center;
position: relative;
justify-content: center;
line-height: 1.2;
}
.p .parent{
border:0;
background:none;
border-right:1px solid #1577F8;
border-radius: 0;
height: 205px;
align-items: center;
padding: 8px 20px;
padding-left: 0px;
margin-left:0px;
font-size: 10px;
}
.p .UserReaction{
transform: rotate(45deg);
background-color: #006FFF;
width:50px;
height:50px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius:5px;
}
.p .UserReaction p{
transform: rotate(-45deg);
text-align: center;
margin: 0px;
font-size: 10px;
color:white;
}
.p .cp{
background: rgba(0,0,0,0.1);
border:none;
box-shadow: 0px 0px 26px rgba(0,0,0,0.2);
color:#333333;
padding:20px 30px;
font-size: 12px;
border-radius: 7px;
}
.pCont{
background-color: rgba(32,100,155, 0.7);
padding: 20px;
border: 0px;
border-radius: 7px;
color:white;
font-weight: 200;
margin-left: -65px;
}
.p .parent::after{
content: "";
width: 20px;
height: 1px;
background-color: #1577F8;
position: absolute;
left: calc(100% - 20px);
top: 0;
bottom: 0;
margin: auto;
}
.p, .np {
display: flex;
align-content: center;
align-items: center;
}
.first, .second, .third {
display: flex;
flex-direction: column;
}
.p .soalatGozine{
background-color: #FFAA00;
border-radius: 7px;
padding:15px 30px;
color:#333;
font-size: 12px;
}
.tree span:before {
content: "";
width: 40px;
height: 1px;
background-color: #1577F8;
position: absolute;
left: -41px;
top: 0;
bottom: 0;
margin: auto;
}
.first > .p > span:before {
display: none;
}

@ -0,0 +1,47 @@
import React from "react";
import './index.css';
const HowWeWorkDiagram = () => {
return (
<div className="HowWeWorkDiagram">
<div className="tree">
<div className="first">
<div className="p">
<span className="parent">
<div className="pCont">ورود کاربر به صفحه مورد نظر</div>
</span>
<div className="second">
<div className="p">
<span className="cp">پیام از طرف بات</span>
<div className="third">
<span><p className="UserReaction"><p>واکنش کاربر</p></p></span>
</div>
<div className="third">
<span className="soalatGozine">سوالات گزینه ای</span>
</div>
<span><p className="UserReaction"><p>واکنش کاربر</p></p></span>
<span className="cp">پیام از طرف بات</span>
</div>
<div className="p"><span className="cp">Child</span>
<div className="third"><span><p className="UserReaction"><p>واکنش کاربر</p></p></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default HowWeWorkDiagram;

@ -25,7 +25,7 @@
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
cursor: pointer;
transition: all 0.2s;
transition: all 0.4s;
}
.TrustContainer .TrustCostumersContainer img:hover{
filter: none; /* IE6-9 */

@ -1,4 +1,5 @@
import React from "react";
import HowWeWorkDiagram from "../../Components/HowWeWorkDiagram";
import './howWeWork.css';
@ -16,6 +17,9 @@ const HowWeWork = () => {
مشتریانتان رو به حداقل رسانده و پول روی پول بگذارید و راحتتر مشتریان خود را چپاول کنید
</p>
</div>
<div>
<HowWeWorkDiagram />
</div>
</div>
);
};

Loading…
Cancel
Save