Mobile Mockup fifth part, start button, and نیرو گرفته done!

src/Components/buttons/Button.css

@@ -74,3 +74,14 @@ button.text:hover{
 button.text.disabled{
     color:#E8E8ED;
 }
+.StartButton{
+    background: white;
+    color:#1577F8;
+    direction: ltr;
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    margin:15px;
+    border-radius: 200em;
+    box-shadow: 0px 0px 19px rgba(0, 76, 255, 0.14);
+}

src/Components/buttons/startBtn.js

@@ -0,0 +1,15 @@
+import React from "react";
+import './Button.css';
+
+import sendIcon from '../../assets/images/vuesax-linear-send.png';
+
+const StartButton = () =>{
+    return(
+        <button className="StartButton">
+            <img src={sendIcon} />
+            شروع مکالمه
+        </button>
+    )
+}
+
+export default StartButton;

src/Components/mobileMockup/mobileMockup.css

@@ -2,7 +2,7 @@
     border-radius: 29px;
     background-color: white;
     box-shadow: 0px 0px 33px rgba(0,0,0,0.1);
-    width: 20em;
+    width: 18em;
     max-width: 90vw;
     min-height: 35em;
     padding: 0.25em 1em;
@@ -118,7 +118,7 @@
     font-size: 0.67em;
     background: white;
     margin:15px;
-    margin-bottom: 3px;
+    margin-bottom: 4px;
     border-radius:7px ;
     box-shadow: 0px 0px 9px rgba(0,0,0,0.1);
 }
@@ -136,3 +136,51 @@
     margin-top: 0px;
     color:rgba(0,0,0,0.3);
 }
+.fifthSection{
+    width:90%;
+}
+.fifthSection div{
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 5px;
+    border-radius: 15px;
+    align-items: center;
+    margin-top:5px;
+}
+.fifthSection div div{
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    align-items:flex-start;
+}
+.fifthSection div div h4{
+    margin-bottom:-10px;
+    margin-top:3px;
+    font-size: 0.8em;
+    float: right;
+}
+.fifthSection div div p{
+    font-size: 0.6em;
+}
+.fifthSection div img{
+    height: 100%;
+}
+.fifthSection .Smotedavel{
+    background:rgba(214,232,255, 0.2);
+    border:2px solid rgba(238, 245, 255, 1.0);
+    color:#1577F8;
+}
+.fifthSection .contactUs{
+    background:rgba(239,255,214, 0.2);
+    border:2px solid #EFFFEE;
+    color:#10A875;
+}
+.nirooGerefteh{
+    display: flex;
+    align-items: center;
+    font-size: 0.6em;
+    color: #C7C7C7;
+}
+.nirooGerefteh img{
+    padding: 2.5px;
+}

src/Components/mobileMockup/mobileMockup.js

@@ -3,8 +3,9 @@ import './mobileMockup.css';
 
 import whatsAppLogo from '../../assets/images/XMLID_468_.png';
 import bookIcon from '../../assets/images/vuesax-bold-book.png';
-import chatIcon from '../../assets/images/vuesax-bold-message-text.png';
-import smsIcon from '../../assets/images/vuesax-bold-sms.png';
+import chatIcon from '../../assets/images/uesax-bold-message-text.png';
+import smsIcon from '../../assets/images/uesax-bold-sms.png';
+import formTMSIcon from '../../assets/images/vuesax-bold-sms.png';
 
 import alireza from '../../assets/images/alireza.png';
 import mahmood from '../../assets/images/mahmood.png';
@@ -12,6 +13,9 @@ import tahmoores from '../../assets/images/tahmoores.png';
 import sohrab from '../../assets/images/sohrab.png';
 import gavazn from '../../assets/images/gavazn.png';
 import babanoel from '../../assets/images/babanoel.png';
+import StartButton from '../buttons/startBtn';
+
+import logoRiz from '../../assets/images/logo-riz.png';
 
 
 const MobileMockup = () => {
@@ -81,6 +85,30 @@ const MobileMockup = () => {
                     <p className='messageTime'>12:30</p>
                 </div>
             </div>
+
+            <div className='fifthSection'>
+                <div className='Smotedavel'>
+                    <div>
+                        <h4>سوالات متداول</h4>
+                        <p>اگر دنبال سوال خودت هستی اینجا دنبالش بگرد</p>
+                    </div>
+                    <img src={chatIcon} />
+                </div>
+                <div className='contactUs'>
+                    <div>
+                        <h4>فرم تماس با ما</h4>
+                        <p>اگر دنبال سوال خودت هستی اینجا دنبالش بگرد</p>
+                    </div>
+                    <img src={formTMSIcon} />
+                </div>
+            </div>
+
+            <StartButton />
+
+            <div className='nirooGerefteh'>
+                <img src={logoRiz} />
+                نیرو گرفته از بازو
+            </div>
         </div>
     );
 };