language text full complated

components/faq.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { useLanguage } from "@/contexts/language-context";
+
+export default function FAQ() {
+  const [openIndex, setOpenIndex] = useState<number | null>(null);
+  const {t} = useLanguage();
+
+  const faqs = [
+  {
+    question: t.faq.list[0].q,
+    answer:t.faq.list[0].a,
+  },
+  {
+    question: t.faq.list[1].q,
+    answer:t.faq.list[1].a,
+  },
+  {
+    question: t.faq.list[2].q,
+    answer:t.faq.list[2].a,
+  },
+  {
+    question: t.faq.list[3].q,
+    answer:t.faq.list[3].a,
+  },
+  {
+    question: t.faq.list[4].q,
+    answer:t.faq.list[4].a,
+  },
+  {
+    question: t.faq.list[5].q,
+    answer:t.faq.list[5].a,
+  },
+];
+
+  return (
+    <section id="faq" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8 bg-muted">
+      <div className="max-w-3xl mx-auto">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+            {t.faq.title}
+          </h2>
+          <p className="text-lg text-muted-foreground">
+            {t.faq.subtitle}
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          {faqs.map((faq, index) => (
+            <div
+              key={index}
+              className="bg-background border border-border rounded-lg overflow-hidden hover:border-primary/50 transition-colors"
+            >
+              <button
+                onClick={() => setOpenIndex(openIndex === index ? null : index)}
+                className="w-full px-6 py-4 flex items-center justify-between hover:bg-muted/50 transition-colors"
+              >
+                <span className="text-left font-semibold text-foreground">
+                  {faq.question}
+                </span>
+                <ChevronDown
+                  size={20}
+                  className={`flex-shrink-0 text-primary transition-transform duration-300 ${
+                    openIndex === index ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
+
+              {openIndex === index && (
+                <div className="px-6 py-4 border-t border-border bg-muted/30">
+                  <p className="text-muted-foreground">{faq.answer}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}