add some FAQs

frontend/src/components/hosted/FAQs.tsx

@@ -0,0 +1,45 @@
+function FAQs() {
+  const faqs = [
+    {
+      question: "How do credits work?",
+      answer:
+        "Each creation, whether from a screenshot or text, consumes 1 credit. Every additional edit also consumes 1 credit. If you run out of credits, you can easily upgrade your plan to obtain more.",
+    },
+    {
+      question: "When do credits reset? Do unused credits roll over?",
+      answer:
+        "Your credits reset at the beginning of each month and do not roll over. Every 1st of the month, you will receive a fresh batch of credits.",
+    },
+    {
+      question: "Can I cancel my plan?",
+      answer:
+        "Yes, you can cancel your plan at any time. Your plan will remain active until the end of the billing cycle.",
+    },
+    {
+      question: "Can I upgrade or downgrade my plan?",
+      answer:
+        "Yes, you can change your plan at any time. The changes will take effect immediately.",
+    },
+    {
+      question: "What payment methods do you accept?",
+      answer:
+        "We accept all major credit cards, Alipay, Amazon Pay and Cash App Pay. Certain payment methods may not be available in your country.",
+    },
+  ];
+
+  return (
+    <div className="max-w-3xl mx-auto mb-16">
+      <h2 className="text-3xl font-bold mb-8">Frequently Asked Questions</h2>
+      <div className="space-y-6">
+        {faqs.map((faq, index) => (
+          <div key={index} className="border-b border-gray-200 pb-6">
+            <h3 className="text-lg font-semibold mb-2">{faq.question}</h3>
+            <p className="text-gray-600">{faq.answer}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default FAQs;

frontend/src/components/hosted/PricingPage.tsx

@@ -1,17 +1,16 @@
 import React from "react";
 import Footer from "./LandingPage/Footer";
 import PricingPlans from "./payments/PricingPlans";
+import FAQs from "./FAQs";
 
 const PricingPage: React.FC = () => {
   return (
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-3xl font-bold mb-6">Screenshot to Code Pricing</h1>
-
       <PricingPlans />
-
       {/* Spacer */}
       <div className="text-center mt-8"></div>
-
+      <FAQs />
       <Footer />
     </div>
   );