new web sayt

2025-11-25 21:06:55 +05:00
parent bef940d9d8
commit f9d27ec11d
29 changed files with 3978 additions and 55 deletions
--- a/components/FAQ.tsx
+++ b/components/FAQ.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+interface FaqItem {
+  questionKey: string;
+  answerKey: string;
+}
+
+interface FaqProps {
+  items?: FaqItem[];
+}
+
+export function FAQ({ items }: FaqProps) {
+  const t = useTranslations();
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  const defaultItems: FaqItem[] = [
+    {
+      questionKey: "faq.items.0.question",
+      answerKey: "faq.items.0.answer",
+    },
+    {
+      questionKey: "faq.items.1.question",
+      answerKey: "faq.items.1.answer",
+    },
+    {
+      questionKey: "faq.items.2.question",
+      answerKey: "faq.items.2.answer",
+    },
+  ];
+
+  const faqItems = items || defaultItems;
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1 },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0 },
+  };
+
+  return (
+    <section id="faq" className="py-20 bg-white">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl font-bold text-gray-900 mb-4">
+            {t("faq.title")}
+          </h2>
+          <div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
+        </motion.div>
+
+        {/* FAQ Items */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="space-y-4"
+        >
+          {faqItems.map((item, idx) => (
+            <motion.div key={idx} variants={itemVariants}>
+              <motion.button
+                onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
+                className="w-full bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg p-6 text-left"
+              >
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-gray-900 flex-1">
+                    {t(item.questionKey)}
+                  </h3>
+                  <motion.div
+                    animate={{ rotate: openIndex === idx ? 180 : 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="ml-4 shrink-0"
+                  >
+                    <ChevronDown className="text-blue-600" size={24} />
+                  </motion.div>
+                </div>
+              </motion.button>
+
+              <AnimatePresence>
+                {openIndex === idx && (
+                  <motion.div
+                    initial={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: "auto" }}
+                    exit={{ opacity: 0, height: 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="bg-blue-50 p-6 rounded-b-lg border-t border-gray-200">
+                      <p className="text-gray-700 leading-relaxed">
+                        {t(item.answerKey)}
+                      </p>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}