phone component second section made

src/Components/mobileMockup/mobileMockup.css

@@ -48,3 +48,29 @@
     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'>
@@ -12,6 +17,20 @@ const MobileMockup = () => {
                 <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>
     );
 };