Manual changes saved

index.html

@@ -247,49 +247,36 @@
 <!-- Section 2 - Portfolio -->
   <section class="py-16 pattern-tint">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">Our E-Commerce Services</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-        <div class="service-card group relative bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl" data-aos="fade-up">
-          <div class="h-48 bg-gradient-to-r from-[var(--vlc-navy)] to-[var(--vlc-sky)] flex items-center justify-center">
-            <i data-feather="layout" class="w-16 h-16 text-white"></i>
-          </div>
-          <div class="p-6">
-            <h3 class="font-bold text-xl mb-3 text-[var(--vlc-navy)]">Web Design & Development</h3>
-            <p class="text-gray-600 mb-6">Custom online stores with Shopify, Magento, WooCommerce integration with Dynamics 365.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="inline-flex items-center text-[var(--vlc-leaf)] font-medium hover:text-[var(--vlc-leaf-700)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card group relative bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl" data-aos="fade-up" data-aos-delay="100">
-          <div class="h-48 bg-gradient-to-r from-[var(--vlc-sky)] to-[var(--vlc-leaf)] flex items-center justify-center">
-            <i data-feather="users" class="w-16 h-16 text-white"></i>
-          </div>
-          <div class="p-6">
-            <h3 class="font-bold text-xl mb-3 text-[var(--vlc-navy)]">E-Commerce Consulting</h3>
-            <p class="text-gray-600 mb-6">Strategic guidance to optimize your online sales funnel and customer experience.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="inline-flex items-center text-[var(--vlc-leaf)] font-medium hover:text-[var(--vlc-leaf-700)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card group relative bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl" data-aos="fade-up" data-aos-delay="200">
-          <div class="h-48 bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-navy)] flex items-center justify-center">
-            <i data-feather="link" class="w-16 h-16 text-white"></i>
-          </div>
-          <div class="p-6">
-            <h3 class="font-bold text-xl mb-3 text-[var(--vlc-navy)]">ERP Integration</h3>
-            <p class="text-gray-600 mb-6">Seamless connection between e-commerce platforms and Dynamics 365 Business Central.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-integration.html" class="inline-flex items-center text-[var(--vlc-leaf)] font-medium hover:text-[var(--vlc-leaf-700)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-      </div>
+      <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">Our E-Commerce Portfolio</h2>
+      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-12">
+<a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="100">
+          <i data-feather="layout" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Web Design & Development</h3>
+        </a>
+        <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="150">
+          <i data-feather="users" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Consulting</h3>
+        </a>
+        <a href="https://www.vlcsolutions.com/ecommerce-integration.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="200">
+          <i data-feather="link" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Integration</h3>
+        </a>
+        <a href="https://www.vlcsolutions.com/search-engine-marketing.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="250">
+          <i data-feather="search" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Search Engine Marketing</h3>
+        </a>
+        <a href="https://www.vlcsolutions.com/multimedia-services.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="300">
+          <i data-feather="film" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Multimedia</h3>
+        </a>
+        <a href="https://www.vlcsolutions.com/social-media-optimization.html" class="card-accent bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="400">
+          <i data-feather="share-2" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Social Media</h3>
+        </a>
+</div>
     </div>
   </section>
+
 <!-- Section 3 - Ecosystem -->
   <section class="py-16 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">