Section 5: Change the other pattern

index.html

@@ -365,48 +365,102 @@
       </div>
     </div>
   </section>
-
-  <!-- Section 5: Capabilities -->
-  <section class="py-16 px-4 sm:px-6 lg:px-8">
+  <!-- Section 5: Capabilities - New Pattern -->
+  <section class="pattern-tint py-16 px-4 sm:px-6 lg:px-8">
     <div class="max-w-7xl mx-auto">
+      <h2 class="text-3xl font-bold mb-12 text-center text-[var(--vlc-navy)]" data-aos="fade-up">Our Comprehensive Solution</h2>
+      
       <div class="grid md:grid-cols-3 gap-8">
-        <div data-aos="fade-up">
-          <h3 class="text-xl font-bold mb-6 text-center text-[var(--vlc-navy)]">Capabilities</h3>
-          <ul class="space-y-3 text-center">
-            <li class="chip inline-block px-4 py-2 rounded-full">Change Management</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Data Integration</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Cost Control</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Process Automation</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Version Control</li>
+        <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up">
+          <div class="text-[var(--vlc-sky)] mb-4">
+            <i data-feather="layers" class="w-10 h-10"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-4 text-[var(--vlc-navy)]">Capabilities</h3>
+          <ul class="space-y-2 text-gray-600">
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Change Management</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Data Integration</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Cost Control</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Process Automation</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Version Control</span>
+            </li>
           </ul>
         </div>
-        <div data-aos="fade-up" data-aos-delay="100">
-          <h3 class="text-xl font-bold mb-6 text-center text-[var(--vlc-navy)]">Features</h3>
-          <ul class="space-y-3 text-center">
-            <li class="chip inline-block px-4 py-2 rounded-full">Unified Platform</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Real-Time Analytics</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Automated Workflows</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Change Request (ECR)</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Change Notice (ECN)</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Cost Simulation</li>
+
+        <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
+          <div class="text-[var(--vlc-sky)] mb-4">
+            <i data-feather="zap" class="w-10 h-10"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-4 text-[var(--vlc-navy)]">Features</h3>
+          <ul class="space-y-2 text-gray-600">
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Unified Platform</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Real-Time Analytics</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Automated Workflows</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Change Request (ECR)</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Change Notice (ECN)</span>
+            </li>
           </ul>
         </div>
-        <div data-aos="fade-up" data-aos-delay="200">
-          <h3 class="text-xl font-bold mb-6 text-center text-[var(--vlc-navy)]">Benefits</h3>
-          <ul class="space-y-3 text-center">
-            <li class="chip inline-block px-4 py-2 rounded-full">Increased Productivity</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Reduced Rework</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Improved Traceability</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Enhanced Visibility</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Accelerated Time-to-Market</li>
-            <li class="chip inline-block px-4 py-2 rounded-full">Eliminated Errors</li>
+
+        <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
+          <div class="text-[var(--vlc-sky)] mb-4">
+            <i data-feather="award" class="w-10 h-10"></i>
+          </div>
+          <h3 class="text-xl font-bold mb-4 text-[var(--vlc-navy)]">Benefits</h3>
+          <ul class="space-y-2 text-gray-600">
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Increased Productivity</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Reduced Rework</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Improved Traceability</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Enhanced Visibility</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="check" class="w-4 h-4 mt-1 mr-2 text-[var(--vlc-leaf)]"></i>
+              <span>Accelerated Time-to-Market</span>
+            </li>
           </ul>
         </div>
       </div>
     </div>
   </section>
-
-  <!-- Section 6: CTA -->
+<!-- Section 6: CTA -->
   <section class="pattern-navy text-white py-20 px-4 sm:px-6 lg:px-8">
     <div class="max-w-4xl mx-auto text-center">
       <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">Stop operating in the dark.</h2>