phone component third section made and completed

src/Components/mobileMockup/mobileMockup.css

@@ -54,23 +54,53 @@
     border:2px solid rgba(0,0,0,0.1);
     border-radius: 12px;
     width:90%;
-    margin: 20px 0px;
+    margin: 10px 0px;
     align-items: center;
     vertical-align: middle;
 }
 .mobileMockup .secondSection div{
-    width:20%;
+    width:15%;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 40px;
-    margin:0px 2.5%;
-    border-bottom: 3px solid #1577F8;
-
-
+    margin:0px 5%;
 }
 .mobileMockup .secondSection div img{
     height: 25px;
     width:25px;
     cursor: pointer;
 }
+.mobileMockup .secondSection div.choosen{
+    border-bottom: 3px solid #1577F8;
+}
+.mobileMockup .thirdsection{
+    display: flex;
+justify-content: center;
+align-items: center;
+width:90%;
+}
+.mobileMockup .thirdsection div{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width:16%;
+    min-height: 50px;
+    padding: 0px;
+    margin: 2px;
+
+}
+.mobileMockup .thirdsection div img{
+    padding: 0px;
+    margin: 0px;
+    width:100%;
+    height: 100%;
+    background: rgba(0,0,0,0.2);
+    border-radius: 12px;
+}
+.mobileMockup .thirdsection div p{
+    font-size: 0.7em;
+    padding: 0px;
+    margin:0px;
+    color:gray;
+}

src/Components/mobileMockup/mobileMockup.js

@@ -6,6 +6,14 @@ 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 alireza from '../../assets/images/alireza.png';
+import mahmood from '../../assets/images/mahmood.png';
+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';
+
+
 const MobileMockup = () => {
     return (
         <div className='mobileMockup'>
@@ -27,10 +35,37 @@ const MobileMockup = () => {
                 <div>
                     <img src={smsIcon} />
                 </div>
-                <div>
+                <div className='choosen'>
                     <img src={chatIcon} />
                 </div>
             </div>
+
+            <div className='thirdsection'>
+                <div>
+                    <img src={alireza} />
+                    <p>علیرضا</p>
+                </div>
+                <div>
+                    <img src={mahmood} />
+                    <p>محمود</p>
+                </div>
+                <div>
+                    <img src={tahmoores} />
+                    <p>طهمورث</p>
+                </div>
+                <div>
+                    <img src={sohrab} />
+                    <p>سهراب</p>
+                </div>
+                <div>
+                    <img src={gavazn} />
+                    <p>گوزن</p>
+                </div>
+                <div>
+                    <img src={babanoel} />
+                    <p>بابانوئل</p>
+                </div>
+            </div>
         </div>
     );
 };