Manual changes saved

index.html

@@ -247,118 +247,40 @@
 <!-- Section 2 - Portfolio -->
   <section class="py-16 pattern-tint">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="text-center mb-16" data-aos="fade-up">
-        <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-4">Our E-Commerce Portfolio</h2>
-        <p class="text-lg text-gray-600 max-w-2xl mx-auto">Comprehensive solutions tailored to your business needs</p>
-      </div>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="100">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="layout" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Web Design & Development</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Custom online stores with responsive design and seamless user experience.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="150">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="users" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Consulting</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Strategic guidance to optimize your e-commerce operations and growth.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="200">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="link" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Integration</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Seamless connection between your e-commerce platform and business systems.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-integration.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="250">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="search" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Search Engine Marketing</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Drive qualified traffic and increase conversions through targeted campaigns.</p>
-            <a href="https://www.vlcsolutions.com/search-engine-marketing.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="300">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="film" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Multimedia</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Engaging product visuals and videos to showcase your offerings.</p>
-            <a href="https://www.vlcsolutions.com/multimedia-services.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="350">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="smartphone" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Mobile</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Optimized mobile shopping experiences with responsive design.</p>
-            <a href="https://www.vlcsolutions.com/ecommerce-development-services.html#" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
-            </a>
-          </div>
-        </div>
-
-        <div class="service-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl" data-aos="fade-up" data-aos-delay="400">
-          <div class="p-6">
-            <div class="flex items-center mb-4">
-              <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-lg">
-                <i data-feather="share-2" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
-              </div>
-              <h3 class="font-bold text-xl ml-4">Social Media</h3>
-            </div>
-            <p class="text-gray-600 mb-6">Boost engagement and sales through strategic social media campaigns.</p>
-            <a href="https://www.vlcsolutions.com/social-media-marketing.html" class="inline-flex items-center text-[var(--vlc-sky)] font-medium hover:text-[var(--vlc-navy)]">
-              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/ecommerce-development-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="350">
+          <i data-feather="smartphone" class="w-10 h-10 mx-auto mb-4 text-[var(--vlc-sky)]"></i>
+          <h3 class="font-bold text-lg mb-2">Mobile</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">