الميزة: إضافة مكونات تحسين محركات البحث لصفحات هبوط الأدوات، بما في ذلك قسم الأسئلة الشائعة وقسم الأدوات ذات الصلة.

- تم تنفيذ مكون قسم الأسئلة الشائعة لعرض الأسئلة المتكررة مع إجابات قابلة للتوسيع.

- تم إنشاء مكون الأدوات ذات الصلة لعرض الأدوات المرتبطة بالأداة الحالية بناءً على بيانات تحسين محركات البحث.

- تم تطوير مكون صفحة هبوط الأدوات لتغليف مكونات الأدوات ببيانات تعريف تحسين محركات البحث، والبيانات المنظمة، والمحتوى الإضافي.

- تم إنشاء إعدادات مركزية لتحسين محركات البحث في ملف seoData.ts لإدارة بيانات تعريف الأدوات، والأسئلة الشائعة، والأدوات ذات الصلة. ----   feat: add SEO components for tool landing pages including FAQ and related tools sections

- Implemented FAQSection component to display frequently asked questions with expandable answers.
- Created RelatedTools component to show tools related to the current tool based on SEO data.
- Developed ToolLandingPage component to wrap tool components with SEO metadata, structured data, and additional content.
- Established central SEO configuration in seoData.ts for managing tool metadata, FAQs, and related tools.

frontend/src/components/layout/Footer.tsx

@@ -2,41 +2,98 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { FileText } from 'lucide-react';
 
+const FOOTER_TOOLS = {
+  PDF: [
+    { slug: 'pdf-to-word', label: 'PDF to Word' },
+    { slug: 'compress-pdf', label: 'Compress PDF' },
+    { slug: 'merge-pdf', label: 'Merge PDF' },
+    { slug: 'split-pdf', label: 'Split PDF' },
+    { slug: 'pdf-to-images', label: 'PDF to Images' },
+    { slug: 'protect-pdf', label: 'Protect PDF' },
+    { slug: 'watermark-pdf', label: 'Watermark PDF' },
+    { slug: 'pdf-editor', label: 'PDF Editor' },
+  ],
+  'Image & Convert': [
+    { slug: 'compress-image', label: 'Compress Image' },
+    { slug: 'image-converter', label: 'Image Converter' },
+    { slug: 'image-resize', label: 'Image Resize' },
+    { slug: 'remove-background', label: 'Remove Background' },
+    { slug: 'word-to-pdf', label: 'Word to PDF' },
+    { slug: 'html-to-pdf', label: 'HTML to PDF' },
+    { slug: 'pdf-to-excel', label: 'PDF to Excel' },
+  ],
+  'AI & Utility': [
+    { slug: 'chat-pdf', label: 'Chat with PDF' },
+    { slug: 'summarize-pdf', label: 'Summarize PDF' },
+    { slug: 'translate-pdf', label: 'Translate PDF' },
+    { slug: 'ocr', label: 'OCR' },
+    { slug: 'qr-code', label: 'QR Code Generator' },
+    { slug: 'video-to-gif', label: 'Video to GIF' },
+    { slug: 'word-counter', label: 'Word Counter' },
+  ],
+};
+
 export default function Footer() {
   const { t } = useTranslation();
 
   return (
     <footer className="border-t border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-900">
-      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-          {/* Brand */}
-          <div className="flex items-center gap-2 text-slate-600 dark:text-slate-400">
-            <FileText className="h-5 w-5" />
-            <span className="text-sm font-medium">
-              © {new Date().getFullYear()} {t('common.appName')}
-            </span>
-          </div>
+      <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+        {/* Tool link grid */}
+        <div className="mb-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {Object.entries(FOOTER_TOOLS).map(([category, tools]) => (
+            <div key={category}>
+              <h3 className="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-900 dark:text-white">
+                {category}
+              </h3>
+              <ul className="space-y-2">
+                {tools.map((tool) => (
+                  <li key={tool.slug}>
+                    <Link
+                      to={`/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}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
 
-          {/* Links */}
-          <div className="flex items-center gap-6">
-            <Link
-              to="/privacy"
-              className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
-            >
-              {t('common.privacy')}
-            </Link>
-            <Link
-              to="/terms"
-              className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
-            >
-              {t('common.terms')}
-            </Link>
-            <Link
-              to="/about"
-              className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
-            >
-              {t('common.about')}
-            </Link>
+        {/* Bottom bar */}
+        <div className="border-t border-slate-200 pt-6 dark:border-slate-700">
+          <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
+            {/* Brand */}
+            <div className="flex items-center gap-2 text-slate-600 dark:text-slate-400">
+              <FileText className="h-5 w-5" />
+              <span className="text-sm font-medium">
+                © {new Date().getFullYear()} {t('common.appName')}
+              </span>
+            </div>
+
+            {/* Links */}
+            <div className="flex items-center gap-6">
+              <Link
+                to="/privacy"
+                className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
+              >
+                {t('common.privacy')}
+              </Link>
+              <Link
+                to="/terms"
+                className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
+              >
+                {t('common.terms')}
+              </Link>
+              <Link
+                to="/about"
+                className="text-sm text-slate-500 transition-colors hover:text-primary-600 dark:text-slate-400 dark:hover:text-primary-400"
+              >
+                {t('common.about')}
+              </Link>
+            </div>
           </div>
         </div>
       </div>

frontend/src/components/seo/FAQSection.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import type { ToolFAQ } from '@/config/seoData';
+
+interface FAQSectionProps {
+  faqs: ToolFAQ[];
+}
+
+export default function FAQSection({ faqs }: FAQSectionProps) {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  if (!faqs || faqs.length === 0) return null;
+
+  return (
+    <section className="mt-12">
+      <h2 className="mb-6 text-xl font-bold text-slate-900 dark:text-white">
+        Frequently Asked Questions
+      </h2>
+      <div className="divide-y divide-slate-200 rounded-xl border border-slate-200 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800">
+        {faqs.map((faq, idx) => {
+          const isOpen = openIndex === idx;
+          return (
+            <div key={idx}>
+              <button
+                onClick={() => setOpenIndex(isOpen ? null : idx)}
+                className="flex w-full items-center justify-between px-5 py-4 text-left transition-colors hover:bg-slate-50 dark:hover:bg-slate-700/50"
+                aria-expanded={isOpen}
+              >
+                <span className="pr-4 font-medium text-slate-800 dark:text-slate-200">
+                  {faq.question}
+                </span>
+                {isOpen ? (
+                  <ChevronUp className="h-5 w-5 shrink-0 text-slate-400" />
+                ) : (
+                  <ChevronDown className="h-5 w-5 shrink-0 text-slate-400" />
+                )}
+              </button>
+              {isOpen && (
+                <div className="px-5 pb-4 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
+                  {faq.answer}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

frontend/src/components/seo/RelatedTools.tsx

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+import { getToolSEO } from '@/config/seoData';
+
+interface RelatedToolsProps {
+  currentSlug: string;
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  PDF: 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400',
+  Image: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400',
+  AI: 'bg-violet-50 text-violet-700 dark:bg-violet-900/20 dark:text-violet-400',
+  Convert: 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400',
+  Utility: 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400',
+};
+
+export default function RelatedTools({ currentSlug }: RelatedToolsProps) {
+  const currentTool = getToolSEO(currentSlug);
+  if (!currentTool) return null;
+
+  const relatedTools = currentTool.relatedSlugs
+    .map((slug) => getToolSEO(slug))
+    .filter(Boolean);
+
+  if (relatedTools.length === 0) return null;
+
+  return (
+    <section className="mt-12">
+      <h2 className="mb-6 text-xl font-bold text-slate-900 dark:text-white">
+        Related Tools
+      </h2>
+      <div className="grid gap-4 sm:grid-cols-2">
+        {relatedTools.map((tool) => (
+          <Link
+            key={tool!.slug}
+            to={`/tools/${tool!.slug}`}
+            className="group rounded-xl border border-slate-200 bg-white p-4 transition-all hover:border-primary-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-primary-600"
+          >
+            <div className="flex items-center justify-between">
+              <h3 className="font-semibold text-slate-800 group-hover:text-primary-600 dark:text-slate-200 dark:group-hover:text-primary-400">
+                {tool!.titleSuffix.replace(/^Free Online\s*/, '').replace(/\s*—.*$/, '')}
+              </h3>
+              <span
+                className={`rounded-full px-2 py-0.5 text-xs font-medium ${CATEGORY_COLORS[tool!.category] || ''}`}
+              >
+                {tool!.category}
+              </span>
+            </div>
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
+              {tool!.metaDescription}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/src/components/seo/ToolLandingPage.tsx

@@ -0,0 +1,107 @@
+import { Helmet } from 'react-helmet-async';
+import { useTranslation } from 'react-i18next';
+import { CheckCircle } from 'lucide-react';
+import { getToolSEO } from '@/config/seoData';
+import { generateToolSchema, generateBreadcrumbs, generateFAQ } from '@/utils/seo';
+import FAQSection from './FAQSection';
+import RelatedTools from './RelatedTools';
+
+interface ToolLandingPageProps {
+  /** The tool slug matching seoData.ts entries */
+  slug: string;
+  /** The actual tool component rendered inside the landing page */
+  children: React.ReactNode;
+}
+
+/**
+ * SEO wrapper that adds structured data, FAQ section, related tools,
+ * feature bullets, and proper meta tags around any tool component.
+ */
+export default function ToolLandingPage({ slug, children }: ToolLandingPageProps) {
+  const { t } = useTranslation();
+  const seo = getToolSEO(slug);
+
+  // Fallback: just render tool without SEO wrapper
+  if (!seo) return <>{children}</>;
+
+  const toolTitle = t(`tools.${seo.i18nKey}.title`);
+  const toolDesc = t(`tools.${seo.i18nKey}.description`);
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  const canonicalUrl = `${origin}/tools/${slug}`;
+
+  const toolSchema = generateToolSchema({
+    name: toolTitle,
+    description: seo.metaDescription,
+    url: canonicalUrl,
+    category: seo.category === 'PDF' ? 'UtilitiesApplication' : 'WebApplication',
+  });
+
+  const breadcrumbSchema = generateBreadcrumbs([
+    { name: t('common.appName'), url: origin },
+    { name: seo.category, url: `${origin}/#${seo.category.toLowerCase()}` },
+    { name: toolTitle, url: canonicalUrl },
+  ]);
+
+  const faqSchema = seo.faqs.length > 0 ? generateFAQ(seo.faqs) : null;
+
+  return (
+    <>
+      <Helmet>
+        <title>{toolTitle} — {seo.titleSuffix} | {t('common.appName')}</title>
+        <meta name="description" content={seo.metaDescription} />
+        <meta name="keywords" content={seo.keywords} />
+        <link rel="canonical" href={canonicalUrl} />
+
+        {/* Open Graph */}
+        <meta property="og:title" content={`${toolTitle} — ${seo.titleSuffix}`} />
+        <meta property="og:description" content={seo.metaDescription} />
+        <meta property="og:url" content={canonicalUrl} />
+        <meta property="og:type" content="website" />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:title" content={`${toolTitle} — ${seo.titleSuffix}`} />
+        <meta name="twitter:description" content={seo.metaDescription} />
+
+        {/* Structured Data */}
+        <script type="application/ld+json">{JSON.stringify(toolSchema)}</script>
+        <script type="application/ld+json">{JSON.stringify(breadcrumbSchema)}</script>
+        {faqSchema && (
+          <script type="application/ld+json">{JSON.stringify(faqSchema)}</script>
+        )}
+      </Helmet>
+
+      {/* Tool Interface */}
+      {children}
+
+      {/* SEO Content Below Tool */}
+      <div className="mx-auto mt-16 max-w-3xl">
+        {/* Feature bullets */}
+        {seo.features.length > 0 && (
+          <section className="mb-12">
+            <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
+              Why Use Our {toolTitle}?
+            </h2>
+            <p className="mb-6 text-slate-600 dark:text-slate-400">
+              {toolDesc}
+            </p>
+            <ul className="space-y-3">
+              {seo.features.map((feature, idx) => (
+                <li key={idx} className="flex items-start gap-3">
+                  <CheckCircle className="mt-0.5 h-5 w-5 shrink-0 text-green-500" />
+                  <span className="text-slate-700 dark:text-slate-300">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        {/* FAQ Section */}
+        <FAQSection faqs={seo.faqs} />
+
+        {/* Related Tools */}
+        <RelatedTools currentSlug={slug} />
+      </div>
+    </>
+  );
+}