Update components/faq.tsx

components/faq.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { Container } from "@/components/container";
+import { Card } from "@/components/ui/card";
+import { HelpCircle } from "lucide-react";
+
+export function FAQ() {
+  const faqs = [
+    {
+      question: "هل الكورس مناسب للمبتدئين؟",
+      answer: "نعم، يبدأ من الصفر تماماً. كل شيء مشروح بطريقة بسيطة وسهلة."
+    },
+    {
+      question: "هل أحتاج لخبرة؟",
+      answer: "لا، كل شيء مشروح خطوة بخطوة. حتى لو لم تستخدمي إنستغرام من قبل."
+    },
+    {
+      question: "هل أحتاج لدفع شهري؟",
+      answer: "لا، دفعة واحدة فقط وتحصلين على الكورس مدى الحياة مع كل التحديثات."
+    },
+    {
+      question: "هل يمكنني البدء من الهاتف؟",
+      answer: "نعم، كل الأدوات تعمل على الهاتف. لا تحتاجين لجهاز كمبيوتر."
+    },
+    {
+      question: "متى أبدأ بعد الشراء؟",
+      answer: "فوراً! ستحصلين على الوصول الكامل للكورس بعد الدفع مباشرة."
+    },
+    {
+      question: "هل هناك ضمان؟",
+      answer: "نعم، ضمان استرجاع المال خلال 7 أيام إذا لم يعجبك الكورس."
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-amber-50 to-yellow-50">
+      <Container>
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-5xl font-bold mb-4">
+            <span className="golden-text">الأسئلة الشائعة</span>
+          </h2>
+          <p className="text-lg text-gray-600">
+            إجابات على أكثر الأسئلة شيوعاً
+          </p>
+        </div>
+
+        <div className="max-w-4xl mx-auto space-y-4">
+          {faqs.map((faq, index) => (
+            <Card 
+              key={index}
+              className="p-6 bg-white border-2 border-amber-200 hover:golden-shadow transition-all duration-300"
+            >
+              <div className="flex items-start gap-4">
+                <div className="p-2 bg-amber-100 rounded-lg flex-shrink-0">
+                  <HelpCircle className="w-6 h-6 text-amber-600" />
+                </div>
+                <div className="flex-1">
+                  <h3 className="font-bold text-xl text-gray-900 mb-2">
+                    {faq.question}
+                  </h3>
+                  <p className="text-gray-700 leading-relaxed">
+                    {faq.answer}
+                  </p>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <Card className="inline-block p-6 bg-white border-2 border-amber-300 golden-shadow">
+            <p className="text-lg text-gray-700">
+              لديك سؤال آخر؟{" "}
+              <span className="font-bold golden-text">تواصلي معنا مباشرة!</span>
+            </p>
+          </Card>
+        </div>
+      </Container>
+    </section>
+  );
+}