Section 2 - Portfolio: Apply a good design pattern

index.html

@@ -247,40 +247,104 @@
 <!-- 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 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 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>
     </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">