Diagram For How We Work Made

src/Components/HowWeWorkDiagram/index.css

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

src/Components/HowWeWorkDiagram/index.js

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

src/Containers/TrustUs/trustUs.css

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

src/Containers/howDoWeWork/howWeWork.js

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