Added mobile images for features

pages/features/calendering.vue

@@ -9,7 +9,10 @@
         Stay on top of all case events and tasks across your entire firm. Never miss a deadline or appointment again.
       </p>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/calendar.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/calender.png" alt="Calenders">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/calender-mobile.jpg" alt="Calenders">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <!-- 1 -->

pages/features/contact-management.vue

@@ -3,7 +3,10 @@
     <section id="main-section" class="container mt20 xl:mt56 mb20 text_center">
       <h1 class="text_primary f_extrabold f11">Contact Management</h1>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/contact.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/contact.png" alt="Contacts">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/contact-mobile.jpg" alt="Contacts">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <!-- 1 -->

pages/features/document-management.vue

@@ -9,7 +9,10 @@
         Go completely paperless with IRALEX. Increase the efficiency of your team by having all the right case-related files on hand exactly when they need them.
       </p>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/document.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/document.png" alt="Documents">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/document-mobile.jpg" alt="Documents">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <!-- 1 -->
@@ -58,7 +61,10 @@
         </p>
       </section>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/document2.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/document2.png" alt="Add Document">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/document-mobile.jpg" alt="Add Document">
+      </picture>
     </section>
 
 

pages/features/matters-management.vue

@@ -11,7 +11,10 @@
         .and get results
       </p>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/matter1.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/matter1.png" alt="Matters">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/matter-mobile-1.jpg" alt="Matters">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <h2 class="cl_iralexblack f_bold f4">Keep relevant people in the loop</h2>
@@ -46,7 +49,10 @@
         </p>
       </section>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/matter2.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/matter2.png" alt="Add Matter">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/matter-mobile-2.jpg" alt="Add Matter">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <h2 class="cl_iralexblack f_bold f4">Quick access to any matter</h2>

pages/features/task-management.vue

@@ -9,7 +9,10 @@
         Increase corporate productivity by leaps and bounds. IRALEX's task management software helps you manage to-do lists, task progress, and team workload.
       </p>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/tasks.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/tasks.png" alt="Tasks">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/tasks-mobile.jpg" alt="Tasks">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <!-- 1 -->
@@ -60,7 +63,10 @@
         <hr class="w70% m_auto">
       </section>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/tasks2.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/tasks2.png" alt="Add Task">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt4 xl:mt10" src="~/assets/png/tasks-mobile.jpg" alt="Add Task">
+      </picture>
     </section>
 
 

pages/features/time-tracking.vue

@@ -9,7 +9,10 @@
         With IRALEX, you'll never lose another second of billable time.
       </p>
 
-      <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/time entry.png" alt="matters">
+      <picture>
+        <source media="(min-width: 768px)" srcset="~/assets/png/time-entry.png" alt="Time Entries">
+        <img class="w90% xl:w70% xl:brl6 xl:brr8 mt10" src="~/assets/png/time-entry-mobile.jpg" alt="Time Entries">
+      </picture>
 
       <section class="my10 py6 px4" style="background: #f1f9ff;">
         <!-- 1 -->