feat: add SEO configuration and pages for programmatic tools and collections

- Introduced seoPages.ts to manage SEO-related configurations and types for programmatic tools and collection pages.
- Created SeoCollectionPage and SeoProgrammaticPage components to render SEO content dynamically based on the new configuration.
- Enhanced API service to ensure CSRF token handling for secure requests.
- Added generateHowTo utility function for structured data generation.
- Updated sitemap generation script to include SEO tool and collection pages.
- Configured TypeScript to resolve JSON modules for easier integration of SEO data.   ستراتيجية التنفيذ

لم أغير أي core logic في أدوات التحويل أو الضغط أو التحرير
استخدمت architecture إضافية فوق النظام الحالي بدل استبداله
جعلت الـ SEO pages تعتمد على source of truth واحد حتى يسهل التوسع
ربطت التوليد مع build حتى لا تبقى sitemap وrobots ثابتة أو منسية
دعمت العربية والإنجليزية داخل نفس config الجديد
عززت internal linking من:
صفحات SEO إلى tool pages
صفحات SEO إلى collection pages
footer إلى collection pages
Suggested tools داخل صفحات الأدوات
التحقق

frontend/src/components/layout/Footer.tsx

@@ -31,6 +31,11 @@ const FOOTER_TOOLS = {
     { slug: 'video-to-gif', label: 'Video to GIF' },
     { slug: 'word-counter', label: 'Word Counter' },
   ],
+  Guides: [
+    { slug: 'best-pdf-tools', label: 'Best PDF Tools', isLanding: true },
+    { slug: 'free-pdf-tools-online', label: 'Free PDF Tools Online', isLanding: true },
+    { slug: 'convert-files-online', label: 'Convert Files Online', isLanding: true },
+  ],
 };
 
 export default function Footer() {
@@ -50,7 +55,7 @@ export default function Footer() {
                 {tools.map((tool) => (
                   <li key={tool.slug}>
                     <Link
-                      to={`/tools/${tool.slug}`}
+                      to={(tool as { slug: string; isLanding?: boolean }).isLanding ? `/${tool.slug}` : `/tools/${tool.slug}`}
                       className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
                     >
                       {tool.label}