fix footer issue

src/css/edit-pdf-text.css

@@ -197,7 +197,7 @@
   color: var(--ecmuted);
   max-width: 460px;
 }
-#text-editor-app #empty h1 {
+#text-editor-app #empty h2 {
   color: var(--ectext);
   font-weight: 600;
 }

src/js/faqModal.ts

@@ -4,6 +4,12 @@ document.addEventListener('DOMContentLoaded', () => {
   const closeBtn = document.getElementById('faq-close-btn');
   if (!modal || !openBtn) return;
 
+  if (__SIMPLE_MODE__) {
+    openBtn.classList.add('hidden');
+    modal.remove();
+    return;
+  }
+
   const setOpen = (open: boolean) => {
     modal.classList.toggle('hidden', !open);
     modal.setAttribute('aria-hidden', open ? 'false' : 'true');

src/pages/bookmark.html

@@ -247,9 +247,9 @@
       >
         <div class="max-w-7xl mx-auto px-4 py-3">
           <div class="flex items-center justify-between flex-wrap gap-2">
-            <h1 class="text-xl font-bold text-white" id="filename-display">
+            <div class="text-xl font-bold text-white" id="filename-display">
               PDF Bookmark Editor
-            </h1>
+            </div>
             <div class="flex gap-2 flex-wrap">
               <button
                 id="undo-btn"

src/pages/edit-pdf-text.html

@@ -761,7 +761,7 @@
         </div>
         <div id="stage">
           <div id="empty">
-            <h1 data-i18n="tools:editPdfText.name">Edit PDF Text</h1>
+            <h2 data-i18n="tools:editPdfText.name">Edit PDF Text</h2>
             <p data-i18n="tools:editPdfText.emptyState">
               Open a PDF to edit its text, images and shapes.
             </p>

src/pages/form-creator.html

@@ -258,12 +258,12 @@
           >
         </button>
 
-        <h1
+        <h2
           class="text-2xl font-bold text-white mb-2"
           data-i18n="tools:createPdfForm.name"
         >
           Create PDF Form
-        </h1>
+        </h2>
         <p class="text-gray-400 mb-6" data-i18n="tools:createPdfForm.subtitle">
           Create fillable PDF forms with drag-and-drop text fields.
         </p>

src/pages/pdf-multi-tool.html

@@ -123,48 +123,7 @@
   <body
     class="antialiased bg-gray-900 h-[100dvh] overflow-hidden flex flex-col"
   >
-    <!-- Navigation -->
-    <nav class="bg-gray-800 border-b border-gray-700 flex-none z-30">
-      <div class="container mx-auto px-4">
-        <div class="flex justify-between items-center h-16">
-          <div class="flex-shrink-0 flex items-center">
-            <img
-              src="{{baseUrl}}{{#if brandLogo}}{{brandLogo}}{{else}}images/favicon-no-bg.svg{{/if}}"
-              alt="{{#if brandName}}{{brandName}}{{else}}Bento PDF{{/if}} Logo"
-              class="h-8 w-8"
-            />
-            <span class="text-white font-bold text-xl ml-2">
-              <a href="/"
-                >{{#if brandName}}{{brandName}}{{else}}BentoPDF{{/if}}</a
-              >
-            </span>
-            <span class="text-gray-400 ml-3 text-sm sm:text-base"
-              >PDF Multi Tool</span
-            >
-          </div>
-          <div class="flex items-center gap-2">
-            <button
-              id="faq-open-btn"
-              type="button"
-              class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
-              aria-haspopup="dialog"
-              aria-controls="faq-modal"
-              aria-expanded="false"
-            >
-              <i data-lucide="circle-help" class="w-4 h-4 sm:w-5 sm:h-5"></i>
-              <span>FAQ</span>
-            </button>
-            <button
-              id="close-tool-btn"
-              class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
-            >
-              <i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i>
-              <span data-i18n="common.close">Close</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </nav>
+    {{> navbar }}
 
     <!-- SEO H1 (visually hidden but present for search engines) -->
     <h1 class="sr-only">PDF Multi Tool Free Online - Edit & Organize PDFs</h1>
@@ -373,6 +332,30 @@
               >Export PDF</span
             >
           </button>
+
+          <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+          <button
+            id="faq-open-btn"
+            type="button"
+            class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
+            aria-label="FAQ"
+            aria-haspopup="dialog"
+            aria-controls="faq-modal"
+            aria-expanded="false"
+          >
+            <i data-lucide="circle-help" class="w-3 h-3 sm:w-4 sm:h-4"></i>
+            <span class="hidden sm:inline">FAQ</span>
+          </button>
+
+          <button
+            id="close-tool-btn"
+            class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base"
+            aria-label="Close"
+          >
+            <i data-lucide="x" class="w-3 h-3 sm:w-4 sm:h-4"></i>
+            <span class="hidden sm:inline" data-i18n="common.close">Close</span>
+          </button>
         </div>
       </div>
 
@@ -423,6 +406,8 @@
       </div>
     </div>
 
+    {{> footer-compact }}
+
     <!-- Loading Overlay -->
     <div
       id="loading-overlay"

src/pages/pdf-workflow.html

@@ -273,9 +273,15 @@
     </style>
   </head>
 
-  <body class="antialiased bg-gray-900 h-screen flex flex-col overflow-hidden">
+  <body
+    class="antialiased bg-gray-900 h-[100dvh] flex flex-col overflow-hidden"
+  >
     {{> navbar }}
 
+    <h1 class="sr-only">
+      PDF Workflow Builder Free Online - Chain PDF Tools Into One Run
+    </h1>
+
     <!-- Main Workflow Layout -->
     <div id="workflow-app" class="flex flex-1 min-h-0">
       <!-- LEFT SIDEBAR: Node Toolbox -->
@@ -405,6 +411,8 @@
       </aside>
     </div>
 
+    {{> footer-compact }}
+
     <!-- Loader Modal -->
     <div
       id="loader-modal"

src/partials/footer-compact.html

@@ -0,0 +1,39 @@
+{{#unless simpleMode}}
+<footer
+  class="flex-none border-t border-gray-700 bg-gray-800 px-3 sm:px-4 py-2 sm:py-2.5 text-[11px] sm:text-xs text-gray-500"
+>
+  <nav
+    class="flex flex-wrap items-center justify-center sm:justify-start gap-x-3 sm:gap-x-4 gap-y-0.5"
+    aria-label="Site links"
+  >
+    <a
+      href="/"
+      class="hidden sm:inline hover:text-gray-200"
+      data-i18n="nav.home"
+      >Home</a
+    >
+    <a href="/about" class="hover:text-gray-200" data-i18n="nav.about">About</a>
+    <a href="/faq" class="hover:text-gray-200" data-i18n="footer.faqLink"
+      >FAQ</a
+    >
+    <a href="/licensing" class="hover:text-gray-200" data-i18n="nav.licensing"
+      >Licensing</a
+    >
+    <a href="/privacy" class="hover:text-gray-200"
+      ><span class="sm:hidden" data-i18n="footer.privacyShort">Privacy</span
+      ><span class="hidden sm:inline" data-i18n="footer.privacyPolicy"
+        >Privacy Policy</span
+      ></a
+    >
+    <a href="/terms" class="hover:text-gray-200"
+      ><span class="sm:hidden" data-i18n="footer.termsShort">Terms</span
+      ><span class="hidden sm:inline" data-i18n="footer.termsAndConditions"
+        >Terms and Conditions</span
+      ></a
+    >
+    <a href="/contact" class="hover:text-gray-200" data-i18n="nav.contact"
+      >Contact</a
+    >
+  </nav>
+</footer>
+{{/unless}}