From 6b31b128073685f82e2135657192833bc27725f4 Mon Sep 17 00:00:00 2001
From: Pedram Keshavarzi <pkpedram80@gmail.com>
Date: Sat, 15 Jan 2022 12:36:16 +0330
Subject: [PATCH] phone component second section made

---
 src/Components/mobileMockup/mobileMockup.css  |  26 ++++++++++++++++++
 src/Components/mobileMockup/mobileMockup.js   |  19 +++++++++++++
 src/assets/images/XMLID_468_.png              | Bin 0 -> 767 bytes
 src/assets/images/vuesax-bold-book.png        | Bin 0 -> 506 bytes
 .../images/vuesax-bold-message-text.png       | Bin 0 -> 508 bytes
 src/assets/images/vuesax-bold-sms.png         | Bin 0 -> 588 bytes
 6 files changed, 45 insertions(+)
 create mode 100644 src/assets/images/XMLID_468_.png
 create mode 100644 src/assets/images/vuesax-bold-book.png
 create mode 100644 src/assets/images/vuesax-bold-message-text.png
 create mode 100644 src/assets/images/vuesax-bold-sms.png

diff --git a/src/Components/mobileMockup/mobileMockup.css b/src/Components/mobileMockup/mobileMockup.css
index 2547a4e..2dce8f8 100644
--- a/src/Components/mobileMockup/mobileMockup.css
+++ b/src/Components/mobileMockup/mobileMockup.css
@@ -47,4 +47,30 @@
     vertical-align: middle;
     align-items : center;
     transform: rotate(90deg);
+}
+.mobileMockup .secondSection{
+    display: flex;
+    justify-content: space-between;
+    border:2px solid rgba(0,0,0,0.1);
+    border-radius: 12px;
+    width:90%;
+    margin: 20px 0px;
+    align-items: center;
+    vertical-align: middle;
+}
+.mobileMockup .secondSection div{
+    width:20%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    margin:0px 2.5%;
+    border-bottom: 3px solid #1577F8;
+
+
+}
+.mobileMockup .secondSection div img{
+    height: 25px;
+    width:25px;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/Components/mobileMockup/mobileMockup.js b/src/Components/mobileMockup/mobileMockup.js
index fcb7917..47db574 100644
--- a/src/Components/mobileMockup/mobileMockup.js
+++ b/src/Components/mobileMockup/mobileMockup.js
@@ -1,6 +1,11 @@
 import React from 'react';
 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';
+
 const MobileMockup = () => {
     return (
         <div className='mobileMockup'>
@@ -11,6 +16,20 @@ const MobileMockup = () => {
                 </div>
                 <div className='mobileGoDown'>
                 </div>
+            </div>
+            <div className='secondSection'>
+                <div>
+                    <img src={whatsAppLogo} />
+                </div>
+                <div>
+                    <img src={bookIcon} />
+                </div>    
+                <div>
+                    <img src={smsIcon} />
+                </div>    
+                <div>
+                    <img src={chatIcon} />
+                </div>        
             </div>    
         </div>
     );
diff --git a/src/assets/images/XMLID_468_.png b/src/assets/images/XMLID_468_.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab4e44d064867e95450853030c3312f821ba1770
GIT binary patch
literal 767
zcmV<b0s#GqP)<h;3K|Lk000e1NJLTq000;O000>X1^@s6D=Y3@00004b3#c}2nYxW
zd<bNS0008ENkl<ZNK2Jg+mYHp5IphvJsbfd0^?7L0;C9zi@;n2<{~gea3TV85m*<2
z5ER9y?;-#qF#hG~?)9!}SymEO6(!i6>7MDCoyED!c$UkhyW8y^9LMRM&u15JSDH`p
zUgHyXI-R#H49B(^MNzd>Dt!a!Fw2>Huvvrn8APGY_KIM!STqiYLj<R)=CHx{cYwX)
zUBzAl@2&wj0m+j|azS7LkBi0Ppw(&-_~K!f*rRj-2=A42An|p>gn$l(LSdyv{siMm
zo<x#}@`#K;IPP}41Lc<x%w{tdPNjVlxK0j#l00w?LHg}>n|ODEU_PIFV2)%2BSbLd
zcR2N7TtmTMo6Y7rD;t>!rL3`5!1$67XzUxv;wo^we@M_*toQTeVnCYDBRk8H%)g~G
z+bxg;iDZaqdpe!!zVB~uAYrC8d_+(VSbO;KlaA$bxvr#$<9Mre2e(B;c?9rdSMdz3
zAyeJK!VnAJ=?DO8(P8|jQmHiZ>L4>u0w$hL5M#kp5gK}OBs}It&wagNj>qGtR00_d
zyW+D1zNvL}0!p3`D9!XJd9o43FSQ1n0dyTpa@J#o{gGaLoj^#W7nv!UonlBuY<3sB
ziCXjIvKiQY6aH2;W!(@=)!|6q@As=L87w4bIo?1Z2w|&a{nw_(;?x{g3Q4BUDB0uY
zBkH5e0|T+92>Mu1r#7>gG8;}&57JPoz;ZZ~i697Wk;xME#gaN;rqn6}j@K7%+6w)j
z;1}mf5ljKXQ7tYQkbI>CxF15?ZsW8WB-@yQc`}F(_<Fj%Iqa^2m2DVu1VeLPn=Xi5
z48NYdI+f2AI5&6>^a3XY>|<ltr78v65eNfYrX)yiA|QO=Gr<uLIoMRkU`^aq#<Kx%
xh#?qc4M7r6|4@OZg-N{;CGYL6?N30O-(Nk7$?Hf$2I&9*002ovPDHLkV1jL1RQvz{

literal 0
HcmV?d00001

diff --git a/src/assets/images/vuesax-bold-book.png b/src/assets/images/vuesax-bold-book.png
new file mode 100644
index 0000000000000000000000000000000000000000..63d71601caddccad9daa5425671c9e1f31f1e55b
GIT binary patch
literal 506
zcmV<W0R{evP)<h;3K|Lk000e1NJLTq0015U001Be1^@s61whDu00004b3#c}2nYxW
zd<bNS00058Nkl<ZNK5UPPi}%h6vlxBw)F;ZgW4q<#2eTXXiw1g1nLdELGc9D6Ce=6
zmfoO8XtyRxzh{sPBVoqIi8jTAgv`u)zxQXD`P8*5{q!qwwc7#5aXc!D!q#;?-|coE
z!{PAjH&sc~v=4h5z8uT4)~@S*vVLkA1Da#<o&#-QyxQ;gOHmL>lK5CV#^WP!hx7C3
zdEV+cR)GPXVDL?lU0|B#oR6Mt0h>0!DtDOA2ZO=G2{?+P84RbAWqm^QK^TTT!!SbF
z^=0f}QzcrxoC%KL#4k%5%0OvN2R>AaEA<k63yvkkj;3A8_Fq}4Yg?bbZ3OYo^imm^
z7#jxUa~nu0xNWnl0pnwz<NIVY*3jn>`uto*qXrD;wH_0UJK2<hMQ1_>7FFml-yNAv
zN2aKBe`j;yZ1{!{=$#0GEX$njcAMjnxD%yIcgnf<F&#<(&rZNJPztmcypp2ewHF(Y
z6qvFk(Fns80$s2UTIFr2IO$5H+sS4O+rVoAL7Q!OZ6*z77nU+-g0V54SIU5C4@uw!
w<ZK{PqK&1N=<UUp+|ECVi=`xR^#3yc0fp#vFbR3SPXGV_07*qoM6N<$f}ZT-1^@s6

literal 0
HcmV?d00001

diff --git a/src/assets/images/vuesax-bold-message-text.png b/src/assets/images/vuesax-bold-message-text.png
new file mode 100644
index 0000000000000000000000000000000000000000..df20a1dd87006f9204d6f074102f87f30db04a03
GIT binary patch
literal 508
zcmV<Y0R#StP)<h;3K|Lk000e1NJLTq0012T0018d1^@s68(YQ%00004b3#c}2nYxW
zd<bNS0005ANkl<ZNK5UPO;*A%5XWcw<fAL`0ed-t+(0~m+(0;iun@Y_CDeu7Ks<qX
z0`LZK0@)Ye>#l&%G4LLtq?RT^!G+!RWir3{PcoAP;RqidfeC@oRE1I}vDpQnTTls%
z5c+d;2X;dr2F>$97qD1j`UF5F6_{vC06lcIs`VJ}i(?zmB``keGX42ofUCJgU?XW)
zB6tIutvPK#yx9lP<6~$wlR2+X4ow-(d5rL5&%mWS7peT&(Az8D9GW(ql1BI(1r&&0
zEK}!ughMkm=K&G#qkt08`^eOJ6|9xk$1M%uHX10{BQtsCOD|K}V@fZhfG&Kp&BO(I
z)9Z%{YatU*x;80lNUx%;JQT2PH4|kS*vckjI0Yo^?f_N6ZMRiW`VUplfJ%A?tgt(w
z2*e62gVSwx(ol9vR9R8C!k{uWt^&2$G3PrE#UPkU-r|A+l!k^WR2e@wG_c{ztc!{=
zuPwW}yp5X4;z1j}xFNSU{NG9w=6xaMytl*1p+A+~8d@KB*w6Kz#4X(f)j5Y|@1}Xe
yd1xaD4GPf)g5FG{PSAz>Z#^qQ742Yf6s6zSiNheSLi33L0000<MNUMnLSTXozuFi8

literal 0
HcmV?d00001

diff --git a/src/assets/images/vuesax-bold-sms.png b/src/assets/images/vuesax-bold-sms.png
new file mode 100644
index 0000000000000000000000000000000000000000..7119f6855c057109ad19cc73f395f21e32a4626a
GIT binary patch
literal 588
zcmV-S0<-;zP)<h;3K|Lk000e1NJLTq001EX001Ni1^@s62PsqB00004b3#c}2nYxW
zd<bNS00065Nkl<ZSV!%bU2cLv6otjV*Rq4+3d*Y?Dz2cqg3=whgLVhi6^JXaT>+vo
zK1x?mx`NtQe`3!~27-dZ0H*VR2|?waJKvnSa{;L&z(*2*p;SP4t01-$^ZDEW=_3yL
zcs#0-B+0z>1Dyli20A)_v|6oMRF04n%jHtt@AqSfRNg@o#GCDQ`}sWX1j4c`xm+%<
z0iYyEm?{MBj5?jpASgb8ux<Ml057SsbBJoSTBF%)x{-y6I-m>p9Qjg(p1a{Yv0AN^
z-EQ}lDl5OpMs4UJCl-r^4nm7RAHM?QxTuQ;4}^U<9D0>XWeCwzk|8n3FKWwx#)Wnr
zrGXRvD)?WnI5C01phT>9jIV(ZK($)cHBED9w*llQ4~P;H4`APjf%Nd(#7yrZl7C|6
zdbiu%Fn}py{Iw6p^E%;a{YJwY+UyKu0)PPlP?2x9+v&B2mllFxW*Dd+n5h9*WDMpa
zsYwA0(28sGSs-X>oO-?94>lXmDykV=e~Sa4_)HLib)}iV<Je$eg?7WG_0Od+lWa@g
zn7o|e9rq-@fbi@P!HI7`C?1elcTv`oU7Y{#d4eE>c(P(Q9p}bw_;=+{O?ZD$@5lXt
zy5U2nMi4Cy0Z`b*mml`*&_fJWaTXvOdKYcoO#I$)gW1QX6#F$W7C*;;!ikGpG)I>c
ar}_g9fhIIkXi?Yz0000<MNUMnLSTX|$Odl!

literal 0
HcmV?d00001