<!-- Section 3 - Ecosystem --> no image pattern

index.html

@@ -288,10 +288,28 @@
             <a href="https://www.vlcsolutions.com/contactus.html" class="btn-primary px-8 py-3 rounded-md text-lg font-medium">Connect and Scale Now</a>
           </div>
         </div>
-        <div data-aos="fade-left">
-          <img src="http://static.photos/office/1024x576/5" alt="E-Commerce Dashboard" class="rounded-lg shadow-xl">
+        <div data-aos="fade-left" class="relative">
+          <div class="absolute inset-0 bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-sky)] opacity-20 rounded-lg"></div>
+          <div class="relative grid grid-cols-2 gap-4 p-8">
+            <div class="bg-white p-4 rounded-lg shadow-md">
+              <i data-feather="shopping-cart" class="w-8 h-8 text-[var(--vlc-navy)] mb-2"></i>
+              <h3 class="font-bold text-[var(--vlc-navy)]">Shopify</h3>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-md">
+              <i data-feather="box" class="w-8 h-8 text-[var(--vlc-navy)] mb-2"></i>
+              <h3 class="font-bold text-[var(--vlc-navy)]">Magento</h3>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-md">
+              <i data-feather="credit-card" class="w-8 h-8 text-[var(--vlc-navy)] mb-2"></i>
+              <h3 class="font-bold text-[var(--vlc-navy)]">WooCommerce</h3>
+            </div>
+            <div class="bg-white p-4 rounded-lg shadow-md">
+              <i data-feather="database" class="w-8 h-8 text-[var(--vlc-navy)] mb-2"></i>
+              <h3 class="font-bold text-[var(--vlc-navy)]">Dynamics 365</h3>
+            </div>
+          </div>
+        </div>
 </div>
-      </div>
     </div>
   </section>
 <!-- FOOTER -->