apply attached image in the background in the banner section

index.html

@@ -280,17 +280,17 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </header>
-
   <!-- Banner Section -->
-  <section class="pattern-navy text-white py-16 md:py-24">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+  <section class="text-white py-16 md:py-24 relative overflow-hidden">
+    <div class="absolute inset-0 bg-[var(--vlc-navy)] opacity-90"></div>
+    <div class="absolute inset-0 bg-[url('https://huggingface.co/spaces/vlcsolutions/dynamics-warehouse-wizardry/resolve/main/images/distribution-fact-sheets-main-banner.png')] bg-cover bg-center mix-blend-overlay"></div>
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
       <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">Transform Your Warehouse Into a Smart, Efficient Supply Chain Hub</h1>
       <p class="text-xl md:text-2xl mb-8" data-aos="fade-up" data-aos-delay="100">Optimize operations, reduce costs, and deliver accuracy at every step</p>
       <a href="./contact-us.html" class="btn-accent px-8 py-3 rounded-full text-lg font-bold inline-block" data-aos="fade-up" data-aos-delay="200">Request a Demo</a>
     </div>
   </section>
-
-  <!-- Section 1 -->
+<!-- Section 1 -->
   <section class="py-16 bg-white">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="md:flex items-center gap-12">
@@ -363,205 +363,140 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
       </div>
     </div>
   </section>
-<!-- Section 3 - Features -->
-<section id="features" class="py-16 bg-white">
-  <style>
-    /* --- Force card styling (works even if Google/Tailwind overrides) --- */
-    #features .feature-card{
-      background:#ffffff !important;
-      border:1px solid #e5e7eb !important;
-      border-radius:16px !important;
-      padding:24px !important;
-      position:relative !important;
-      overflow:hidden !important;   /* prevents margin collapse + keeps top tight */
-      display:flex !important;
-      flex-direction:column !important;
-      gap:14px !important;
-      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
-    }
-
-    /* Optional top bar (remove if you don't want) */
-    #features .feature-card::before{
-      content:"";
-      position:absolute;
-      top:0; left:0;
-      width:100%;
-      height:4px;
-      background:#00B255; /* change to your brand color */
-    }
-
-    /* Remove default margins that create white space */
-    #features .feature-card h3{
-      margin:0 !important;
-      padding-top:6px !important; /* small space below green bar */
-      line-height:1.25 !important;
-      color:#0b1f3a !important; /* your navy */
-      font-weight:800 !important;
-    }
-
-    #features .feature-card ul{
-      margin:0 !important;
-      padding-left:18px !important;
-      list-style:disc !important; /* ensures bullets appear */
-    }
-
-    #features .feature-card li{
-      margin:0 0 10px 0 !important;
-      color:#374151 !important;
-      line-height:1.55 !important;
-    }
-  </style>
-
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <h2 class="text-3xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">
-      Warehouse Management System Features
-    </h2>
-
-    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="truck"></i>
+  <!-- Section 3 - Features -->
+  <section id="features" class="py-16 bg-white">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <h2 class="text-3xl md:text-4xl font-bold text-[var(--vlc-navy)] mb-12 text-center" data-aos="fade-up">Warehouse Management System Features</h2>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- Feature Group 1 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Vendor & Freight Integration</h3>
+          <ul class="space-y-3">
+            <li>Send purchase orders electronically to vendors and freight partners</li>
+            <li>Receive and process advanced shipping notices (ASN) automatically</li>
+            <li>Track all outbound shipments in real time via carrier systems</li>
+            <li>Ensure notifications and alerts are sent to supply chain stakeholders for exceptions or delays</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Vendor & Freight Integration</h3>
-<ul>
-          <li>Send purchase orders electronically to vendors and freight partners</li>
-          <li>Receive and process advanced shipping notices (ASN) automatically</li>
-          <li>Track all outbound shipments in real time via carrier systems</li>
-          <li>Ensure notifications and alerts are sent to supply chain stakeholders for exceptions or delays</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-icon">
-          <i data-feather="map-pin"></i>
+
+        <!-- Feature Group 2 -->
+        <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+          <h3 class="text-xl font-bold">External Logistics & Yard Management</h3>
+          <ul class="space-y-3">
+            <li>Route inbound goods efficiently to appropriate storage locations</li>
+            <li>Track trucks, containers, and yard movements in real time</li>
+            <li>Manage external storage areas and docking operations seamlessly</li>
+          </ul>
         </div>
-        <h3 class="text-xl">External Logistics & Yard Management</h3>
-<ul>
-          <li>Route inbound goods efficiently to appropriate storage locations</li>
-          <li>Track trucks, containers, and yard movements in real time</li>
-          <li>Manage external storage areas and docking operations seamlessly</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="package"></i>
+
+        <!-- Feature Group 3 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Receiving Execution</h3>
+          <ul class="space-y-3">
+            <li>Capture complete ASN, container, and purchase order details</li>
+            <li>Automate barcode-based receiving workflows</li>
+            <li>Generate unique license plates for all incoming packages</li>
+            <li>Plan and execute put-away directly from receiving stations</li>
+            <li>Enable internal and external cross-docking operations</li>
+            <li>Accelerate intake using Express Receive functionality</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Receiving Execution</h3>
-<ul>
-          <li>Capture complete ASN, container, and purchase order details</li>
-          <li>Automate barcode-based receiving workflows</li>
-          <li>Generate unique license plates for all incoming packages</li>
-          <li>Plan and execute put-away directly from receiving stations</li>
-          <li>Enable internal and external cross-docking operations</li>
-          <li>Accelerate intake using Express Receive functionality</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-icon">
-          <i data-feather="shopping-cart"></i>
+
+        <!-- Feature Group 4 -->
+        <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+          <h3 class="text-xl font-bold">Delivery Execution</h3>
+          <ul class="space-y-3">
+            <li>Keep order management updated automatically</li>
+            <li>Provide graphical ATP (Available-to-Promise) views</li>
+            <li>Execute store or transfer orders efficiently</li>
+            <li>Automate reservations using conveyor-assisted systems</li>
+            <li>Monitor packing accuracy and efficiency</li>
+            <li>Simplify shipping procedures with barcode and RF technology</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Delivery Execution</h3>
-<ul>
-          <li>Keep order management updated automatically</li>
-          <li>Provide graphical ATP (Available-to-Promise) views</li>
-          <li>Execute store or transfer orders efficiently</li>
-          <li>Automate reservations using conveyor-assisted systems</li>
-          <li>Monitor packing accuracy and efficiency</li>
-          <li>Simplify shipping procedures with barcode and RF technology</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="move"></i>
+
+        <!-- Feature Group 5 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Movement Execution</h3>
+          <ul class="space-y-3">
+            <li>Separate buffer areas from picking zones</li>
+            <li>Use wave-based planning for replenishment of picking locations</li>
+            <li>Release fulfillment orders according to operational priorities</li>
+            <li>Access real-time picking lists via PDA or forklift displays</li>
+            <li>Implement seasonal or campaign-based location planning for picking optimization</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Movement Execution</h3>
-<ul>
-          <li>Separate buffer areas from picking zones</li>
-          <li>Use wave-based planning for replenishment of picking locations</li>
-          <li>Release fulfillment orders according to operational priorities</li>
-          <li>Access real-time picking lists via PDA or forklift displays</li>
-          <li>Implement seasonal or campaign-based location planning for picking optimization</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-icon">
-          <i data-feather="tag"></i>
+
+        <!-- Feature Group 6 -->
+        <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+          <h3 class="text-xl font-bold">License Plate Tracking</h3>
+          <ul class="space-y-3">
+            <li>Focus on handling units such as pallets, cartons, and packages rather than individual items</li>
+            <li>Assign unique identifiers for every handling unit for complete traceability</li>
+          </ul>
         </div>
-        <h3 class="text-xl">License Plate Tracking</h3>
-<ul>
-          <li>Focus on handling units such as pallets, cartons, and packages rather than individual items</li>
-          <li>Assign unique identifiers for every handling unit for complete traceability</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="tablet"></i>
+
+        <!-- Feature Group 7 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Telnet & WinPDA Handheld Operations</h3>
+          <ul class="space-y-3">
+            <li>Support more than 50 warehouse processes on handheld devices</li>
+            <li>Build additional PDA workflows with a simple design tool</li>
+            <li>Automate employee task allocation and workflow distribution</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Telnet & WinPDA Handheld Operations</h3>
-<ul>
-          <li>Support more than 50 warehouse processes on handheld devices</li>
-          <li>Build additional PDA workflows with a simple design tool</li>
-          <li>Automate employee task allocation and workflow distribution</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-icon">
-          <i data-feather="list"></i>
+
+        <!-- Feature Group 8 -->
+        <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+          <h3 class="text-xl font-bold">Delivery Rules Management</h3>
+          <ul class="space-y-3">
+            <li>Configure partial deliveries, minimum order values, and automatic cancellations</li>
+            <li>Automatically print and release picking lists</li>
+            <li>Assign warehouse tasks automatically based on delivery rules</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Delivery Rules Management</h3>
-<ul>
-          <li>Configure partial deliveries, minimum order values, and automatic cancellations</li>
-          <li>Automatically print and release picking lists</li>
-          <li>Assign warehouse tasks automatically based on delivery rules</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="repeat"></i>
+
+        <!-- Feature Group 9 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Conveyor & Material Handling Integration</h3>
+          <ul class="space-y-3">
+            <li>Move goods to correct destinations using conveyor systems</li>
+            <li>Support multiple conveyor systems through signal-based integration</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Conveyor & Material Handling Integration</h3>
-<ul>
-          <li>Move goods to correct destinations using conveyor systems</li>
-          <li>Support multiple conveyor systems through signal-based integration</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-icon">
-          <i data-feather="wifi"></i>
+
+        <!-- Feature Group 10 -->
+        <div class="feature-card" data-aos="fade-up" data-aos-delay="100">
+          <h3 class="text-xl font-bold">Wireless Warehouse Execution</h3>
+          <ul class="space-y-3">
+            <li>Receive, transfer, count, pick, and ship inventory using wireless devices</li>
+            <li>Cover all mobile workflows to ensure continuous operational coverage</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Wireless Warehouse Execution</h3>
-<ul>
-          <li>Receive, transfer, count, pick, and ship inventory using wireless devices</li>
-          <li>Cover all mobile workflows to ensure continuous operational coverage</li>
-        </ul>
-      </div>
-      <div class="feature-card" data-aos="fade-up">
-        <div class="feature-icon">
-          <i data-feather="monitor"></i>
+
+        <!-- Feature Group 11 -->
+        <div class="feature-card" data-aos="fade-up">
+          <h3 class="text-xl font-bold">Microsoft Dynamics Role Center Integration</h3>
+          <ul class="space-y-3">
+            <li>Monitor KPIs, performance statistics, and operational metrics directly within Microsoft Dynamics 2019 Role Center</li>
+          </ul>
         </div>
-        <h3 class="text-xl">Microsoft Dynamics Role Center Integration</h3>
-<ul>
-          <li>Monitor KPIs, performance statistics, and operational metrics directly within Microsoft Dynamics Role Center</li>
-        </ul>
+</div>
+      <div class="mt-12 text-center" data-aos="fade-up">
+        <h3 class="text-2xl font-bold text-[var(--vlc-navy)] mb-6">Complete Warehouse Control System</h3>
+        <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8">
+          Take full control of inventory, fulfillment, and logistics with VLC's intelligent warehouse platform. Deliver faster, smarter, and with zero compromise. Our solution provides end-to-end visibility from receiving to shipping, with advanced integration capabilities for vendors, carriers and material handling systems. Designed for distribution centers, 3PLs and manufacturing warehouses needing real-time accuracy and operational efficiency.
+        </p>
+      <div class="text-center mt-16" data-aos="fade-up">
+        <h3 class="text-2xl font-bold text-[var(--vlc-navy)] mb-6">Take full control of inventory, fulfillment, and logistics</h3>
+        <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8">
+          Deliver faster, smarter, and with zero compromise with VLC's intelligent warehouse platform.
+        </p>
+        <a href="./contact-us.html" class="btn-primary px-8 py-3 rounded-full text-lg font-bold inline-block">Get Started Today</a>
       </div>
-
-    </div>
-
-    <div class="text-center mt-16" data-aos="fade-up">
-      <h3 class="text-2xl font-bold text-[var(--vlc-navy)] mb-6">
-        Take full control of inventory, fulfillment, and logistics
-      </h3>
-      <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8">
-        Deliver faster, smarter, and with zero compromise with VLC's intelligent warehouse platform.
-      </p>
-      <a href="./contact-us.html" class="btn-primary px-8 py-3 rounded-full text-lg font-bold inline-block">
-        Get Started Today
-      </a>
-    </div>
-
-  </div>
-</section>
-
-
+</div>
+</div>
+  </section>
 
 <!-- FOOTER -->
 <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">
@@ -620,6 +555,7 @@ class="inline-flex items-center text-[#002060] hover:text-[#8DC63F] px-3 py-2 te
     </div>
   </footer>
 
+
   <script> 
   // Init animations and handle mobile menu functionality after scripts loaded
   document.addEventListener('DOMContentLoaded', () => {

style.css

@@ -5,32 +5,16 @@
     border-radius: 12px;
     padding: 28px;
     box-shadow: 0 4px 12px rgba(0, 32, 96, 0.08);
-    border: 1px solid rgba(0, 0, 0, 0.1);
     border-top: 4px solid var(--vlc-leaf);
     transition: all 0.3s ease;
     height: 100%;
 }
+
 .feature-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 24px rgba(0, 32, 96, 0.12);
     border-top-color: var(--vlc-sky);
 }
-.feature-icon {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: var(--vlc-leaf-tint);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 16px;
-}
-
-.feature-icon i {
-    width: 24px;
-    height: 24px;
-    color: var(--vlc-leaf);
-}
 
 .feature-card h3 {
     color: var(--vlc-navy);
@@ -40,13 +24,6 @@
     padding-bottom: 12px;
 }
 
-.feature-card:nth-child(even) .feature-icon {
-    background: rgba(0, 160, 233, 0.1);
-}
-
-.feature-card:nth-child(even) .feature-icon i {
-    color: var(--vlc-sky);
-}
 .feature-card h3:after {
     content: "";
     position: absolute;