Manual changes saved

index.html

@@ -823,16 +823,19 @@
       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">
+  <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-4 text-gray-800">
       <style>
+        :root { --vlc-leaf: #8DC63F; }
         .feature-accordion {
           border-radius: 8px;
           overflow: hidden;
           box-shadow: 0 2px 8px rgba(0,32,96,.05);
           border: 1px solid rgba(0,32,96,.08);
+          background: rgba(255,255,255,.9);
         }
         .feature-accordion-header {
           background: rgba(255,255,255,.9);
@@ -843,24 +846,16 @@
           align-items: center;
           transition: background 0.2s ease;
         }
-        .feature-accordion-header:hover {
-          background: rgba(255,255,255,1);
-        }
-        .feature-accordion-header.active {
-          background: white;
-        }
+        .feature-accordion-header:hover { background: rgba(255,255,255,1); }
+        .feature-accordion-header.active { background: #fff; }
         .feature-accordion-content {
           background: rgba(255,255,255,.7);
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.3s ease;
         }
-        .feature-accordion-content-inner {
-          padding: 16px;
-        }
-        .feature-accordion-content ul {
-          padding-left: 16px;
-        }
+        .feature-accordion-content-inner { padding: 16px; }
+        .feature-accordion-content ul { padding-left: 16px; }
         .feature-accordion-content li {
           padding: 4px 0;
           position: relative;
@@ -876,22 +871,20 @@
           background: var(--vlc-leaf);
           border-radius: 50%;
         }
-        .accordion-icon {
-          transition: transform 0.3s ease;
-        }
-        .accordion-icon.active {
-          transform: rotate(180deg);
-        }
+        .accordion-icon { transition: transform 0.3s ease; }
+        .accordion-icon.active { transform: rotate(180deg); }
       </style>
+
+      <!-- Manage Orders -->
       <div class="feature-accordion" data-aos="fade-up">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="shopping-cart" class="w-5 h-5"></i>
             Manage Orders
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Filter Orders</li>
@@ -907,15 +900,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Ship Orders -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="50">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="truck" class="w-5 h-5"></i>
             Ship Orders
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Connect a Postage Provider</li>
@@ -939,15 +934,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Shipment Records & Details -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="100">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="file-text" class="w-5 h-5"></i>
             Shipment Records &amp; Details
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Drop-shipping with VLC</li>
@@ -967,15 +964,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Printer and Scale Integration -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="150">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="printer" class="w-5 h-5"></i>
             Printer and Scale Integration
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Printing Overview</li>
@@ -987,15 +986,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Notification and Documents -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="200">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="bell" class="w-5 h-5"></i>
             Notification and Documents
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Print Packing Slips</li>
@@ -1003,15 +1004,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Advanced Analytics -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="250">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="bar-chart-2" class="w-5 h-5"></i>
             Advanced Analytics
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <div class="mt-2">
               <p class="font-medium">a) Warehouse</p>
@@ -1038,15 +1041,17 @@
           </div>
         </div>
       </div>
+
+      <!-- Account Management -->
       <div class="feature-accordion" data-aos="fade-up" data-aos-delay="300">
-        <div class="feature-accordion-header">
+        <div class="feature-accordion-header" role="button" tabindex="0" aria-expanded="false">
           <h4 class="font-semibold text-[#002060] flex items-center gap-2">
             <i data-feather="users" class="w-5 h-5"></i>
             Account Management
           </h4>
-          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon"></i>
+          <i data-feather="chevron-down" class="w-5 h-5 accordion-icon" aria-hidden="true"></i>
         </div>
-        <div class="feature-accordion-content">
+        <div class="feature-accordion-content" aria-hidden="true">
           <div class="feature-accordion-content-inner">
             <ul class="space-y-1">
               <li>Add &amp; Edit Users</li>
@@ -1055,12 +1060,14 @@
           </div>
         </div>
       </div>
-<div data-aos="fade-up" data-aos-delay="350">
+
+      <!-- Non-accordion groups -->
+      <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">
+        <ul class="space-y-1">
           <li>International Shipping with VLC</li>
           <li>VLC’s International Settings</li>
           <li>Customs Declarations</li>
@@ -1069,21 +1076,23 @@
           <li>Global Advantage Program</li>
         </ul>
       </div>
+
       <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">
+        <ul class="space-y-1">
           <li>Custom Package Types</li>
         </ul>
       </div>
+
       <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">
+        <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>
@@ -1095,21 +1104,23 @@
           <li>Scan Barcodes with VLC Mobile</li>
         </ul>
       </div>
+
       <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">
+        <ul class="space-y-1">
           <li>Third-Party Billing</li>
         </ul>
       </div>
+
       <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">
+        <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>
@@ -1122,10 +1133,76 @@
       </div>
     </div>
   </div>
+
+  <!-- Optional: Accordion + Feather init (kept inside the section for portability) -->
+  <script>
+    (function () {
+      // Feather icons (if feather is loaded on the page)
+      if (window.feather && typeof feather.replace === 'function') {
+        feather.replace();
+      }
+
+      // Accordion behavior
+      const accordions = document.querySelectorAll('#all-features .feature-accordion');
+      accordions.forEach(acc => {
+        const header = acc.querySelector('.feature-accordion-header');
+        const content = acc.querySelector('.feature-accordion-content');
+        const icon = acc.querySelector('.accordion-icon');
+
+        function toggle() {
+          const isOpen = header.classList.contains('active');
+          if (isOpen) {
+            header.classList.remove('active');
+            icon && icon.classList.remove('active');
+            content.style.maxHeight = '0px';
+            header.setAttribute('aria-expanded', 'false');
+            content.setAttribute('aria-hidden', 'true');
+          } else {
+            // close others
+            accordions.forEach(other => {
+              if (other !== acc) {
+                const oh = other.querySelector('.feature-accordion-header');
+                const oc = other.querySelector('.feature-accordion-content');
+                const oi = other.querySelector('.accordion-icon');
+                oh && oh.classList.remove('active');
+                oi && oi.classList.remove('active');
+                if (oc) oc.style.maxHeight = '0px';
+                oh && oh.setAttribute('aria-expanded', 'false');
+                oc && oc.setAttribute('aria-hidden', 'true');
+              }
+            });
+            // open this
+            header.classList.add('active');
+            icon && icon.classList.add('active');
+            content.style.maxHeight = content.scrollHeight + 'px';
+            header.setAttribute('aria-expanded', 'true');
+            content.setAttribute('aria-hidden', 'false');
+          }
+        }
+
+        header.addEventListener('click', toggle);
+        header.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggle();
+          }
+        });
+
+        // Allow smooth resize when content inside expands (e.g., fonts load)
+        const ro = new ResizeObserver(() => {
+          if (header.classList.contains('active')) {
+            content.style.maxHeight = content.scrollHeight + 'px';
+          }
+        });
+        ro.observe(content);
+      });
+    })();
+  </script>
 </section>
 
 
 
+
 </main>
   <!-- FOOTER -->
   <footer class="bg-[var(--vlc-navy)] text-white pt-14 pb-8">