Section 2 use the different design patterns

index.html

@@ -245,44 +245,92 @@
     </div>
   </section>
 <!-- Section 2 -->
-  <section class="py-16 pattern-tint">
+  <section class="py-16 bg-[var(--vlc-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>
+      <div class="text-center mb-16">
+        <h2 class="text-3xl font-bold text-[var(--vlc-navy)] mb-4" data-aos="fade-up">Our E-Commerce Portfolio</h2>
+        <div class="w-24 h-1 bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-sky)] mx-auto mb-6" data-aos="fade-up"></div>
+        <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up">Comprehensive solutions tailored for your business needs</p>
+      </div>
+
+      <div class="grid md:grid-cols-3 gap-8">
+        <!-- Card 1 - Gradient Border -->
+        <div class="relative p-1 rounded-lg bg-gradient-to-br from-[var(--vlc-leaf)] to-[var(--vlc-sky)]" data-aos="fade-up">
+          <div class="bg-white p-8 rounded-lg h-full">
+            <div class="w-12 h-12 rounded-full bg-[var(--vlc-leaf-tint)] flex items-center justify-center mb-6">
+              <i data-feather="layout" class="w-6 h-6 text-[var(--vlc-leaf)]"></i>
+            </div>
+            <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Web Design & Development</h3>
+            <p class="text-gray-600 mb-6">Custom, responsive websites that drive conversions and engagement</p>
+            <a href="https://www.vlcsolutions.com/ecommerce-web-design-development.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
+              Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+            </a>
+          </div>
+        </div>
+
+        <!-- Card 2 - Icon with Background -->
+        <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition-all" data-aos="fade-up" data-aos-delay="100">
+          <div class="w-12 h-12 rounded-full bg-[var(--vlc-tint)] flex items-center justify-center mb-6">
+            <i data-feather="users" class="w-6 h-6 text-[var(--vlc-sky)]"></i>
+          </div>
+          <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Consulting</h3>
+          <p class="text-gray-600 mb-6">Strategic guidance to optimize your e-commerce operations</p>
+          <a href="https://www.vlcsolutions.com/ecommerce-consulting.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
+            Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+          </a>
+        </div>
+
+        <!-- Card 3 - Minimalist -->
+        <div class="border border-gray-200 p-8 rounded-lg hover:border-[var(--vlc-sky)] transition-all" data-aos="fade-up" data-aos-delay="200">
+          <i data-feather="link" class="w-8 h-8 text-[var(--vlc-navy)] mb-6"></i>
+          <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Integration</h3>
+          <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="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
+            Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+          </a>
+        </div>
+
+        <!-- Card 4 - Highlight on Hover -->
+        <div class="bg-white p-8 rounded-lg hover:bg-[var(--vlc-tint)] hover:shadow-sm transition-all" data-aos="fade-up" data-aos-delay="300">
+          <i data-feather="search" class="w-8 h-8 text-[var(--vlc-navy)] mb-6"></i>
+          <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Search Engine Marketing</h3>
+          <p class="text-gray-600 mb-6">Increase visibility and drive qualified traffic to your store</p>
+          <a href="https://www.vlcsolutions.com/search-engine-marketing.html" class="text-[var(--vlc-sky)] font-medium flex items-center hover:text-[var(--vlc-navy)]">
+            Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+          </a>
+        </div>
+
+        <!-- Card 5 - Dark Theme -->
+        <div class="bg-[var(--vlc-navy)] text-white p-8 rounded-lg hover:shadow-lg transition-all" data-aos="fade-up" data-aos-delay="400">
+          <i data-feather="film" class="w-8 h-8 text-[var(--vlc-sky)] mb-6"></i>
+          <h3 class="text-xl font-bold mb-3">Multimedia</h3>
+          <p class="text-gray-300 mb-6">Engaging content that showcases your products effectively</p>
+          <a href="https://www.vlcsolutions.com/multimedia-services.html" class="text-[var(--vlc-leaf)] font-medium flex items-center hover:text-[var(--vlc-sky)]">
+            Learn more <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
+          </a>
+        </div>
+
+        <!-- Card 6 - With Image -->
+        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-all" data-aos="fade-up" data-aos-delay="500">
+          <img src="http://static.photos/technology/640x360/2" alt="Mobile Commerce" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-3">Mobile Commerce</h3>
+            <p class="text-gray-600 mb-6">Optimized shopping experiences for mobile users</p>
+            <a href="https://www.vlcsolutions.com/ecommerce-development-services.html#" class="text-[var(--vlc-sky)] font-medium flex items-center 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 class="text-center mt-16">
+        <p class="text-xl text-[var(--vlc-navy)] mb-6 mx-auto max-w-3xl">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
+        <a href="https://www.vlcsolutions.com/contactus.html" class="inline-flex items-center justify-center px-8 py-3 rounded-md bg-gradient-to-r from-[var(--vlc-leaf)] to-[var(--vlc-sky)] text-white font-medium hover:shadow-lg transition-all">
+          Connect and Scale Now
+          <i data-feather="arrow-right" class="w-5 h-5 ml-2"></i>
         </a>
+      </div>
 </div>
-      <div class="text-center" data-aos="fade-up">
-        <p class="text-xl text-[var(--vlc-navy)] mb-8">Integrate your systems for a fully connected e-commerce ecosystem. Scale quickly and effortlessly with seamless connections that power smarter, faster decisions.</p>
-        <div class="flex flex-wrap justify-center gap-4">
-          <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>
   </section>