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

master
Pedram Keshavarzi 3 years ago
parent dbb05c9268
commit 01082fd8b6
  1. 11
      src/Components/buttons/Button.css
  2. 15
      src/Components/buttons/startBtn.js
  3. 52
      src/Components/mobileMockup/mobileMockup.css
  4. 46
      src/Components/mobileMockup/mobileMockup.js
  5. BIN
      src/assets/images/Rectangle 239.png
  6. BIN
      src/assets/images/logo-riz.png
  7. 0
      src/assets/images/uesax-bold-message-text.png
  8. BIN
      src/assets/images/uesax-bold-sms.png
  9. BIN
      src/assets/images/vuesax-bold-sms.png
  10. BIN
      src/assets/images/vuesax-linear-send.png

@ -73,4 +73,15 @@ 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);
}

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

@ -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);
}
@ -135,4 +135,52 @@
margin-left: 5%;
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;
}

@ -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 = () => {
@ -71,15 +75,39 @@ const MobileMockup = () => {
<img src={tahmoores} />
<div>
<div className='messageBox'>
<p>
سلام به روباتیو خوش اومدی
من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمیخواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
</p>
<div className='messageBox'>
<p>
سلام به روباتیو خوش اومدی
من اینجا هستم تا به شما کمک کنم تا نهایت از امکانات ما لذت ببرید.ضمنا اگر کمیخواستید من در خدمت شما هستم تا شب هم اینجا می مونم آره فکر کردی من ولت میکنم نخیر
</p>
</div>
<p className='messageTime'>12:30</p>
</div>
<p className='messageTime'>12:30</p>
</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>
);

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 429 B

Before

Width:  |  Height:  |  Size: 508 B

After

Width:  |  Height:  |  Size: 508 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 588 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 588 B

After

Width:  |  Height:  |  Size: 721 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 604 B

Loading…
Cancel
Save