feat: major update - Markdown Editor, CodeMirror upgrades, SEO improvements, tool cleanup

- Added new Markdown Editor with live preview, GFM support, PDF/HTML/DOCX export
- Upgraded all paste fields to CodeMirror with syntax highlighting and expand/collapse
- Enhanced Object Editor with advanced URL fetching and preview mode
- Improved export views with syntax highlighting in Table/Object editors
- Implemented SEO improvements (FAQ schema, breadcrumbs, internal linking)
- Added Related Tools recommendations component
- Created custom 404 page with tool suggestions
- Consolidated tools: removed JSON, Serialize, CSV-JSON (merged into main editors)
- Updated documentation and cleaned up redundant files
- Updated release notes with user-centric improvements

src/pages/InvoiceEditor.js

@@ -6,6 +6,8 @@ import {
 } from 'lucide-react';
 import ToolLayout from '../components/ToolLayout';
 import CodeMirrorEditor from '../components/CodeMirrorEditor';
+import SEO from '../components/SEO';
+import RelatedTools from '../components/RelatedTools';
 
 const InvoiceEditor = () => {
   const navigate = useNavigate();
@@ -745,39 +747,48 @@ const InvoiceEditor = () => {
   };
 
   return (
-    <ToolLayout
-      title="Invoice Editor"
-      description="Create, edit, and export professional invoices with PDF generation"
-    >
-      <div className="space-y-4 sm:space-y-6 w-full">
-        {/* Input Section */}
-        <div className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
-          <div className="border-b border-gray-200 dark:border-gray-700">
-            <nav className="flex space-x-2 sm:space-x-8 px-4 sm:px-6 overflow-x-auto" aria-label="Tabs">
-              {[
-                { id: 'create', name: 'Create New', icon: Plus },
-                { id: 'url', name: 'URL', icon: Globe },
-                { id: 'paste', name: 'Paste', icon: FileText },
-                { id: 'open', name: 'Open', icon: Upload }
-              ].map((tab) => {
-                const Icon = tab.icon;
-                return (
-                  <button
-                    key={tab.id}
-                    onClick={() => handleTabChange(tab.id)}
-                    className={`${
-                      activeTab === tab.id
-                        ? 'border-blue-500 text-blue-600 dark:text-blue-400'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-                    } whitespace-nowrap py-4 px-1 sm:px-2 border-b-2 font-medium text-sm flex items-center gap-1 sm:gap-2 transition-colors min-w-0 flex-shrink-0`}
-                  >
-                    <Icon className="h-4 w-4" />
-                    {tab.name}
-                  </button>
-                );
-              })}
-            </nav>
-          </div>
+    <>
+      <SEO 
+        title="Free Invoice Generator - Professional Invoice Templates"
+        description="✓ Free invoice generator ✓ Professional templates ✓ PDF export ✓ Auto-calculate totals ✓ No signup. Create invoices now!"
+        keywords="invoice generator, invoice maker, invoice template, free invoice, invoice editor, pdf invoice, professional invoice, online invoice, invoice creator"
+        path="/invoice-editor"
+        toolId="invoice-editor"
+      />
+      <ToolLayout
+        title="Invoice Editor"
+        description="Create, edit, and export professional invoices with PDF generation"
+        icon={FileText}
+      >
+        <div className="space-y-4 sm:space-y-6 w-full">
+          {/* Input Section */}
+          <div className="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div className="border-b border-gray-200 dark:border-gray-700">
+              <nav className="flex space-x-2 sm:space-x-8 px-4 sm:px-6 overflow-x-auto" aria-label="Tabs">
+                {[
+                  { id: 'create', name: 'Create New', icon: Plus },
+                  { id: 'url', name: 'URL', icon: Globe },
+                  { id: 'paste', name: 'Paste', icon: FileText },
+                  { id: 'open', name: 'Open', icon: Upload }
+                ].map((tab) => {
+                  const Icon = tab.icon;
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => handleTabChange(tab.id)}
+                      className={`${
+                        activeTab === tab.id
+                          ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
+                      } whitespace-nowrap py-4 px-1 sm:px-2 border-b-2 font-medium text-sm flex items-center gap-1 sm:gap-2 transition-colors min-w-0 flex-shrink-0`}
+                    >
+                      <Icon className="h-4 w-4" />
+                      {tab.name}
+                    </button>
+                  );
+                })}
+              </nav>
+            </div>
 
           {/* Tab Content */}
           {(activeTab !== 'create' || !createNewCompleted) && (
@@ -2122,7 +2133,11 @@ const InvoiceEditor = () => {
         />
 
       </div>
+
+      {/* Related Tools */}
+      <RelatedTools toolId="invoice-editor" />
     </ToolLayout>
+    </>
   );
 };