Update

resources/js/pages/home/partials/FAQ.jsx

@@ -0,0 +1,66 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+
+const FAQ = () => {
+    const faqData = [
+        {
+            q: 'How does the platform work?',
+            a: 'Choose from 400+ free meme templates and backgrounds, customize with the video editor, and export as MP4. AI features coming soon!',
+        },
+        {
+            q: "What's available now?",
+            a: 'All 200+ meme templates and 200+ backgrounds are completely free! Create unlimited memes using our library.',
+        },
+        {
+            q: 'Why is video export slow?',
+            a: 'Video processing happens entirely in your browser using advanced web technology. Export speed depends on your video content complexity and device performance. High-end devices export quickly, while older/slower devices may take longer or even crash. If your phone is too slow, try using a faster device like a desktop computer for better performance.',
+        },
+        {
+            q: 'What AI features are coming?',
+            a: "Soon you'll be able to generate custom captions and backgrounds using AI. Enter any text prompt and get tailored content!",
+        },
+        {
+            q: 'What can I do with the video editor?',
+            a: 'Play/pause your meme, drag to position text, meme templates, and backgrounds anywhere on the canvas, then export as MP4.',
+        },
+        {
+            q: 'What video format do you export?',
+            a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format.',
+        },
+        {
+            q: 'How will credits work?',
+            a: 'Once launched, credits will unlock AI features for generating custom captions and backgrounds. All current features remain free!',
+        },
+        {
+            q: 'Is there a mobile app?',
+            a: 'Our web app is fully responsive and works perfectly on mobile devices. Create memes anywhere with the same features!',
+        },
+        {
+            q: 'How often do you add new content?',
+            a: 'We just started building this platform and will gradually add more meme templates and backgrounds over time, so everyone can continue using it for free with fresh content!',
+        },
+    ];
+
+    return (
+        <section className="bg-muted/30">
+            <div className="mx-auto max-w-4xl space-y-10 px-4 sm:px-6 lg:px-8">
+                <div className="text-center">
+                    <h2 className="text-foreground mb-4 text-3xl font-bold sm:text-4xl lg:text-5xl">Frequently Asked Questions</h2>
+                    <p className="text-muted-foreground text-lg">Everything you need to know about creating viral memes</p>
+                </div>
+
+                <div className="bg-background rounded-2xl border p-6 sm:p-8">
+                    <Accordion type="single" collapsible className="w-full" defaultValue="item-1">
+                        {faqData.map((faq, index) => (
+                            <AccordionItem key={index} value={`item-${index + 1}`} className="border-b last:border-b-0">
+                                <AccordionTrigger className="py-4 text-left font-medium hover:no-underline">{faq.q}</AccordionTrigger>
+                                <AccordionContent className="text-muted-foreground pb-4 leading-relaxed">{faq.a}</AccordionContent>
+                            </AccordionItem>
+                        ))}
+                    </Accordion>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FAQ;