66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
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;
|