Complete SEO overhaul

components/FAQ.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FAQItem } from '../src/data/seoData';
+
+interface FAQProps {
+    items: FAQItem[];
+}
+
+const FAQ: React.FC<FAQProps> = ({ items }) => {
+    if (!items || items.length === 0) return null;
+
+    return (
+        <section className="py-24 px-6 bg-white dark:bg-black">
+            <div className="max-w-3xl mx-auto">
+                <motion.div
+                    initial={{ opacity: 0, y: 20 }}
+                    whileInView={{ opacity: 1, y: 0 }}
+                    viewport={{ once: true }}
+                    className="text-center mb-16"
+                >
+                    <h2 className="font-display text-3xl md:text-4xl font-bold mb-4 text-gray-900 dark:text-white">
+                        Frequently Asked Questions
+                    </h2>
+                    <p className="text-gray-600 dark:text-gray-400">
+                        Common questions about our IT services.
+                    </p>
+                </motion.div>
+
+                <div className="space-y-6">
+                    {items.map((faq, index) => (
+                        <motion.div
+                            key={index}
+                            initial={{ opacity: 0, y: 10 }}
+                            whileInView={{ opacity: 1, y: 0 }}
+                            viewport={{ once: true }}
+                            transition={{ delay: index * 0.1 }}
+                            className="p-6 rounded-2xl bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10"
+                        >
+                            <h3 className="font-bold text-lg mb-2 text-gray-900 dark:text-white">{faq.question}</h3>
+                            <p className="text-gray-600 dark:text-gray-300">{faq.answer}</p>
+                        </motion.div>
+                    ))}
+                </div>
+            </div>
+
+            {/* JSON-LD for FAQ Page */}
+            <script type="application/ld+json" dangerouslySetInnerHTML={{
+                __html: JSON.stringify({
+                    "@context": "https://schema.org",
+                    "@type": "FAQPage",
+                    "mainEntity": items.map(faq => ({
+                        "@type": "Question",
+                        "name": faq.question,
+                        "acceptedAnswer": {
+                            "@type": "Answer",
+                            "text": faq.answer
+                        }
+                    }))
+                })
+            }} />
+        </section>
+    );
+};
+
+export default FAQ;