Section 3: Change the good design pattern

index.html

@@ -326,43 +326,62 @@ Start Building Today
       </div>
     </div>
   </section>
-
-  <!-- Section 3 -->
+  <!-- Section 3 - Modern Card Grid -->
   <section class="py-16 md:py-24 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-16">
         <h2 class="text-3xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-6" data-aos="fade-up">Low-Code + AI: Build Faster and Smarter</h2>
         <p class="text-lg text-gray-600 max-w-4xl mx-auto mb-12" data-aos="fade-up" data-aos-delay="100">
-          Accelerate app creation with natural language AI builders, generative pages & agents, Copilot in Power Apps, embedded intelligence, and AI agent components. This combination of low-code tools and AI capabilities empowers teams of all skill levels to innovate — from citizen developers to professional engineers.
+          Accelerate app creation with natural language AI builders, generative pages & agents, Copilot in Power Apps, embedded intelligence, and AI agent components.
         </p>
       </div>
+      
       <div class="grid md:grid-cols-3 gap-8">
-        <div class="bg-white p-8 rounded-lg shadow-md border border-gray-100" data-aos="fade-up">
-          <div class="text-[var(--vlc-sky)] mb-4">
-            <i data-feather="message-square" class="w-8 h-8"></i>
+        <!-- Card 1 -->
+        <div class="card-accent bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300" data-aos="fade-up">
+          <div class="text-[var(--vlc-sky)] mb-4 flex items-center">
+            <div class="bg-[var(--vlc-tint)] p-3 rounded-full">
+              <i data-feather="message-square" class="w-8 h-8"></i>
+            </div>
           </div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Natural Language AI Builders</h3>
-          <p class="text-gray-600">Create apps and underlying data structures simply by describing what you need — no code required.</p>
+          <p class="text-gray-600 mb-6">Create apps and underlying data structures simply by describing what you need — no code required.</p>
+          <a href="#" class="text-[var(--vlc-sky)] font-medium inline-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 class="bg-white p-8 rounded-lg shadow-md border border-gray-100" data-aos="fade-up" data-aos-delay="100">
-          <div class="text-[var(--vlc-sky)] mb-4">
-            <i data-feather="cpu" class="w-8 h-8"></i>
+
+        <!-- Card 2 -->
+        <div class="card-accent bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
+          <div class="text-[var(--vlc-leaf)] mb-4 flex items-center">
+            <div class="bg-[var(--vlc-leaf-tint)] p-3 rounded-full">
+              <i data-feather="cpu" class="w-8 h-8"></i>
+            </div>
           </div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Generative Pages & Agents</h3>
-          <p class="text-gray-600">AI agents collaborate with makers to generate and customize app pages and workflows in real time.</p>
+          <p class="text-gray-600 mb-6">AI agents collaborate with makers to generate and customize app pages and workflows in real time.</p>
+          <a href="#" class="text-[var(--vlc-leaf)] font-medium inline-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 class="bg-white p-8 rounded-lg shadow-md border border-gray-100" data-aos="fade-up" data-aos-delay="200">
-          <div class="text-[var(--vlc-sky)] mb-4">
-            <i data-feather="git-merge" class="w-8 h-8"></i>
+
+        <!-- Card 3 -->
+        <div class="card-accent bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
+          <div class="text-[var(--vlc-navy)] mb-4 flex items-center">
+            <div class="bg-[rgba(0,160,233,0.1)] p-3 rounded-full">
+              <i data-feather="git-merge" class="w-8 h-8"></i>
+            </div>
           </div>
           <h3 class="text-xl font-bold text-[var(--vlc-navy)] mb-4">Copilot in Power Apps</h3>
-          <p class="text-gray-600">Integrated AI assistance helps form fields, suggest logic, and proactively optimize app design as you build.</p>
+          <p class="text-gray-600 mb-6">Integrated AI assistance helps form fields, suggest logic, and proactively optimize app design.</p>
+          <a href="#" class="text-[var(--vlc-navy)] font-medium inline-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>
-</div>
+      </div>
     </div>
   </section>
-
-  <!-- Section 4 -->
+<!-- Section 4 -->
   <section class="py-16 md:py-24 bg-[var(--vlc-tint)]">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="text-center mb-16">