Manual changes saved

index.html

@@ -813,26 +813,50 @@
     
     </div>
   </div>
-<!-- ====== ALL FEATURES (Collapsible) ====== -->
-<section class="py-12 bg-white">
-  <style>[x-cloak]{display:none!important}</style>
-
-  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <h2 class="text-2xl md:text-3xl font-bold text-[#002060] mb-6">ALL FEATURES</h2>
-    <p class="text-gray-600 mb-10">Expand a section to view detailed capabilities.</p>
-
-    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-
-      <!-- Manage Orders -->
-      <div x-data="{ open:false }" data-aos="fade-up" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Manage Orders
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+</section>
+<!-- All Features (single column, grouped) -->
+<section id="all-features" class="py-16"
+  style="
+    background:
+      linear-gradient(180deg,#FFFFFF,#F5F7FF),
+      radial-gradient(ellipse at 20% 30%, rgba(0,160,233,.08) 0%, transparent 40%),
+      radial-gradient(ellipse at 80% 70%, rgba(141,198,63,.08) 0%, transparent 40%),
+      repeating-linear-gradient(45deg, rgba(0,32,96,.02) 0px, rgba(0,32,96,.02) 2px, transparent 2px, transparent 4px);
+">
+<div class="max-w-4xl mx-auto px-6 md:px-8">
+    <h3 class="text-2xl md:text-3xl font-bold text-[#002060] mb-6">All Features</h3>
+    <!-- Simple groups with subtle card styling -->
+    <div class="space-y-8 text-gray-800">
+      <style>
+        #all-features ul {
+          background: rgba(255,255,255,.7);
+          border-radius: 8px;
+          padding: 16px;
+          box-shadow: 0 2px 8px rgba(0,32,96,.05);
+          border: 1px solid rgba(0,32,96,.08);
+        }
+        #all-features li {
+          padding: 4px 0;
+          position: relative;
+          padding-left: 16px;
+        }
+        #all-features li:before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 12px;
+          width: 6px;
+          height: 6px;
+          background: var(--vlc-leaf);
+          border-radius: 50%;
+        }
+      </style>
+      <div data-aos="fade-up">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="shopping-cart" class="w-5 h-5"></i>
+          Manage Orders
+        </h4>
+<ul class="space-y-1">
           <li>Filter Orders</li>
           <li>View, Search, and Sort Orders</li>
           <li>Set a Ship By Date</li>
@@ -844,17 +868,12 @@
           <li>Order Alerts</li>
         </ul>
       </div>
-
-      <!-- Ship Orders -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="50" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Ship Orders
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="50">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="truck" class="w-5 h-5"></i>
+          Ship Orders
+        </h4>
+<ul class="space-y-1">
           <li>Connect a Postage Provider</li>
           <li>Add Funds and Auto-fund Postal Accounts</li>
           <li>Edit Services &amp; Package Types</li>
@@ -874,17 +893,12 @@
           <li>The Label Queue</li>
         </ul>
       </div>
-
-      <!-- Shipment Records & Details -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="100" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Shipment Records &amp; Details
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="100">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="file-text" class="w-5 h-5"></i>
+          Shipment Records &amp; Details
+        </h4>
+<ul class="space-y-1">
           <li>Drop-shipping with VLC</li>
           <li>Add Insurance to Shipments</li>
           <li>Manage Shipments</li>
@@ -900,17 +914,12 @@
           <li>Create Multi-Package Labels</li>
         </ul>
       </div>
-
-      <!-- Printer and Scale Integration -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="150" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Printer and Scale Integration
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="150">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="printer" class="w-5 h-5"></i>
+          Printer and Scale Integration
+        </h4>
+<ul class="space-y-1">
           <li>Printing Overview</li>
           <li>Set Up Printers in Windows</li>
           <li>Print a Document</li>
@@ -918,33 +927,23 @@
           <li>Use a USB Scale</li>
         </ul>
       </div>
-
-      <!-- Notification and Documents -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="200" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Notification and Documents
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="200">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="bell" class="w-5 h-5"></i>
+          Notification and Documents
+        </h4>
+<ul class="space-y-1">
           <li>Print Packing Slips</li>
         </ul>
       </div>
-
-      <!-- Advanced Analytics -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="250" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Advanced Analytics
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <div x-show="open" x-transition x-cloak class="mt-3 pl-7 text-gray-700 text-sm">
+      <div data-aos="fade-up" data-aos-delay="250">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="bar-chart-2" class="w-5 h-5"></i>
+          Advanced Analytics
+        </h4>
+<div class="mt-2">
           <p class="font-medium">a) Warehouse</p>
-          <ul class="mt-1 list-disc space-y-1">
+          <ul class="mt-1 space-y-1">
             <li>Orders to Pick</li>
             <li>Orders Picked</li>
             <li>Daily/Monthly Picked Orders</li>
@@ -958,39 +957,29 @@
             <li>Pack Performance</li>
           </ul>
           <p class="font-medium mt-4">b) Non-Warehouse</p>
-          <ul class="mt-1 list-disc space-y-1">
+          <ul class="mt-1 space-y-1">
             <li>Orders To Ship</li>
             <li>Orders To Ship v/s Shipped Orders</li>
             <li>Orders to Ship By Carrier</li>
           </ul>
         </div>
       </div>
-
-      <!-- Account Management -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="300" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Account Management
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="300">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="users" class="w-5 h-5"></i>
+          Account Management
+        </h4>
+<ul class="space-y-1">
           <li>Add &amp; Edit Users</li>
           <li>Set User Permissions and Restrictions</li>
         </ul>
       </div>
-
-      <!-- International Shipments -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="350" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            International Shipments
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="350">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="globe" class="w-5 h-5"></i>
+          International Shipments
+        </h4>
+<ul class="space-y-1">
           <li>International Shipping with VLC</li>
           <li>VLC’s International Settings</li>
           <li>Customs Declarations</li>
@@ -999,31 +988,21 @@
           <li>Global Advantage Program</li>
         </ul>
       </div>
-
-      <!-- Custom Packaging -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="400" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Custom Packaging
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="400">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="package" class="w-5 h-5"></i>
+          Custom Packaging
+        </h4>
+<ul class="space-y-1">
           <li>Custom Package Types</li>
         </ul>
       </div>
-
-      <!-- Barcode Actions -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="450" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Barcode Actions
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="450">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="maximize-2" class="w-5 h-5"></i>
+          Barcode Actions
+        </h4>
+<ul class="space-y-1">
           <li>Barcode Scanning Overview</li>
           <li>View Orders with a Barcode Scan</li>
           <li>Search Orders with a Barcode Scan</li>
@@ -1035,31 +1014,21 @@
           <li>Scan Barcodes with VLC Mobile</li>
         </ul>
       </div>
-
-      <!-- General Settings -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="500" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            General Settings
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="500">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="settings" class="w-5 h-5"></i>
+          General Settings
+        </h4>
+<ul class="space-y-1">
           <li>Third-Party Billing</li>
         </ul>
       </div>
-
-      <!-- Setup Carrier Accounts -->
-      <div x-data="{ open:false }" data-aos="fade-up" data-aos-delay="550" class="border border-gray-200 rounded-xl shadow-sm p-4 hover:shadow-md transition">
-        <button type="button" @click="open=!open" class="w-full flex items-center justify-between font-semibold text-[#002060] text-lg">
-          <span class="flex items-center gap-2">
-            <i data-feather="list" class="w-5 h-5 text-[#002060]"></i>
-            Setup Carrier Accounts
-          </span>
-          <i :class="open?'rotate-180':''" data-feather="chevron-down" class="w-5 h-5 text-[#002060] transition-transform"></i>
-        </button>
-        <ul x-show="open" x-transition x-cloak class="mt-3 pl-7 list-disc text-gray-700 space-y-1 text-sm">
+      <div data-aos="fade-up" data-aos-delay="550">
+        <h4 class="font-semibold text-[#002060] mb-3 flex items-center gap-2">
+          <i data-feather="credit-card" class="w-5 h-5"></i>
+          Setup Carrier Accounts
+        </h4>
+<ul class="space-y-1">
           <li>Dimensions based on setup</li>
           <li>Weights and dimensions on items</li>
           <li>Posting shipment and Invoice of a BC order from Shipping App</li>
@@ -1070,18 +1039,10 @@
           <li>Partial Shipments</li>
         </ul>
       </div>
-
     </div>
   </div>
 </section>
 
-<!-- Alpine.js + Feather Icons -->
-<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
-<script>
-  document.addEventListener("DOMContentLoaded",()=>{ feather.replace(); });
-</script>
-
-
 
 
 </main>