phone component second section made

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

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