+ {/* Tool link grid */}
+
+ {Object.entries(FOOTER_TOOLS).map(([category, tools]) => (
+
+
+ {category}
+
+
+ {tools.map((tool) => (
+ -
+
+ {tool.label}
+
+
+ ))}
+
+
+ ))}
+
- {/* Links */}
-
-
- {t('common.privacy')}
-
-
- {t('common.terms')}
-
-
- {t('common.about')}
-
+ {/* Bottom bar */}
+
+
+ {/* Brand */}
+
+
+
+ © {new Date().getFullYear()} {t('common.appName')}
+
+
+
+ {/* Links */}
+
+
+ {t('common.privacy')}
+
+
+ {t('common.terms')}
+
+
+ {t('common.about')}
+
+
diff --git a/frontend/src/components/seo/FAQSection.tsx b/frontend/src/components/seo/FAQSection.tsx
new file mode 100644
index 0000000..12ceb50
--- /dev/null
+++ b/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
(0);
+
+ if (!faqs || faqs.length === 0) return null;
+
+ return (
+
+
+ Frequently Asked Questions
+
+
+ {faqs.map((faq, idx) => {
+ const isOpen = openIndex === idx;
+ return (
+
+
+ {isOpen && (
+
+ {faq.answer}
+
+ )}
+
+ );
+ })}
+
+ Related Tools
+
+
+ {relatedTools.map((tool) => (
+
+
+
+ {tool!.titleSuffix.replace(/^Free Online\s*/, '').replace(/\s*—.*$/, '')}
+
+
+ {tool!.category}
+
+
+
+ {tool!.metaDescription}
+
+
+ ))}
+
+ {/* Feature bullets */}
+ {seo.features.length > 0 && (
+
+
+ Why Use Our {toolTitle}?
+
+
+ {toolDesc}
+
+
+ {seo.features.map((feature, idx) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+ )}
+
+ {/* FAQ Section */}
+
+
+ {/* Related Tools */}
+
+