119 lines
6.5 KiB
TypeScript
119 lines
6.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import styles from './FAQ.module.css';
|
|
|
|
export default function FAQ() {
|
|
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
|
|
|
const faqs = [
|
|
{
|
|
question: 'What social media platforms does SocialBuddy support?',
|
|
answer: 'SocialBuddy supports all major social media platforms including Facebook, Instagram, Twitter (X), LinkedIn, Pinterest, TikTok, YouTube, and more. You can manage unlimited accounts across all these platforms from a single dashboard.',
|
|
},
|
|
{
|
|
question: 'Can I try SocialBuddy before committing to a paid plan?',
|
|
answer: 'Absolutely! We offer a 14-day free trial for all our paid plans. No credit card is required to start your trial. You can explore all features and see how SocialBuddy fits your needs before making any commitment.',
|
|
},
|
|
{
|
|
question: 'How does the AI content assistant work?',
|
|
answer: 'Our AI content assistant uses advanced machine learning to analyze your brand voice, industry trends, and audience preferences. It can generate engaging captions, suggest relevant hashtags, recommend optimal posting times, and even help you create content ideas based on trending topics.',
|
|
},
|
|
{
|
|
question: 'Is my data secure with SocialBuddy?',
|
|
answer: 'Security is our top priority. We use bank-level encryption (256-bit SSL) to protect your data. All social media connections are made through official OAuth protocols, and we never store your social media passwords. We\'re also GDPR and SOC 2 compliant.',
|
|
},
|
|
{
|
|
question: 'Can I manage multiple team members and clients?',
|
|
answer: 'Yes! SocialBuddy offers robust team collaboration features including role-based access control, approval workflows, client management, and activity logs. You can invite unlimited team members on our Pro and Premium plans.',
|
|
},
|
|
{
|
|
question: 'What kind of analytics and reporting does SocialBuddy provide?',
|
|
answer: 'SocialBuddy provides comprehensive analytics including engagement rates, follower growth, reach, impressions, best performing content, audience demographics, and competitor analysis. You can generate custom white-labeled reports and export data in various formats.',
|
|
},
|
|
{
|
|
question: 'Can I schedule posts in advance?',
|
|
answer: 'Yes! You can schedule posts days, weeks, or even months in advance. Our smart scheduling feature uses AI to recommend the best times to post based on when your audience is most active. You can also use our bulk upload feature to schedule hundreds of posts at once.',
|
|
},
|
|
{
|
|
question: 'What happens if I exceed my plan limits?',
|
|
answer: 'If you approach your plan limits, we\'ll notify you in advance. You can easily upgrade to a higher plan at any time. If you temporarily exceed limits, we won\'t interrupt your service - we\'ll just let you know it\'s time to upgrade.',
|
|
},
|
|
];
|
|
|
|
const toggleFAQ = (index: number) => {
|
|
setOpenIndex(openIndex === index ? null : index);
|
|
};
|
|
|
|
return (
|
|
<section className="section" id="faq">
|
|
<div className="container">
|
|
<div className={styles.header}>
|
|
<div className={styles.badge}>
|
|
<span>❓</span>
|
|
<span>FAQ</span>
|
|
</div>
|
|
<h2 className={styles.title}>
|
|
Frequently Asked <span className="gradient-text">Questions</span>
|
|
</h2>
|
|
<p className={styles.subtitle}>
|
|
Everything you need to know about SocialBuddy. Can't find the answer you're looking for?
|
|
<a href="/contact" className={styles.contactLink}> Contact our support team</a>.
|
|
</p>
|
|
</div>
|
|
|
|
<div className={styles.faqContainer}>
|
|
{faqs.map((faq, index) => (
|
|
<div key={index} className={`${styles.faqItem} ${openIndex === index ? styles.open : ''}`}>
|
|
<button
|
|
className={styles.faqQuestion}
|
|
onClick={() => toggleFAQ(index)}
|
|
aria-expanded={openIndex === index}
|
|
>
|
|
<span className={styles.questionText}>{faq.question}</span>
|
|
<span className={styles.icon}>
|
|
<svg
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6 9L12 15L18 9"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<div className={styles.faqAnswer}>
|
|
<div className={styles.answerContent}>
|
|
<p>{faq.answer}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.ctaBox}>
|
|
<h3 className={styles.ctaTitle}>Still have questions?</h3>
|
|
<p className={styles.ctaText}>
|
|
Our friendly support team is here to help you 24/7
|
|
</p>
|
|
<div className={styles.ctaButtons}>
|
|
<a href="/contact" className="btn btn-primary">
|
|
Contact Support
|
|
</a>
|
|
<a href="/docs" className="btn btn-secondary">
|
|
View Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|