Section 2: Change to a good design pattern

index.html

@@ -247,37 +247,49 @@
 <!-- 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/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>
+      <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>
     </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">

style.css

@@ -1,3 +1,22 @@
+
+.service-card {
+  transform: translateY(0);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.service-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 25px -5px rgba(0, 32, 96, 0.1), 0 10px 10px -5px rgba(0, 32, 96, 0.04);
+}
+
+.service-card .group:hover h3 {
+  color: var(--vlc-leaf);
+}
+
+.service-card .group:hover a {
+  transform: translateX(4px);
+}
+
 body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;