first commit

app/(public)/_homeComponents/FAQ.tsx

@@ -0,0 +1,68 @@
+"use client";
+import React, {  } from "react";
+import { motion } from "framer-motion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import AnimatedSection from "./Animated";
+import { home } from "@/services/Constants";
+
+
+
+// FAQ Section
+const FAQ = () => {
+  return (
+    <section
+      id="faq"
+      className="py-24 bg-gradient-to-b from-white to-purple-50"
+    >
+      <div className="max-w-4xl mx-auto px-4">
+        <AnimatedSection className="text-center mb-16">
+          <span className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-4">
+            FAQ
+          </span>
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            Frequently Asked{" "}
+            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+              Questions
+            </span>
+          </h2>
+          <p className="text-xl text-gray-600">
+            Everything you need to know about TalentFlow
+          </p>
+        </AnimatedSection>
+
+        <AnimatedSection>
+          <Accordion type="single" collapsible className="space-y-4">
+            {home.faq.map((item, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+                viewport={{ once: true }}
+              >
+                <AccordionItem
+                  value={`item-${index}`}
+                  className="bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow border-0 px-6"
+                >
+                  <AccordionTrigger className="text-left font-semibold text-lg hover:no-underline py-6">
+                    {item.question}
+                  </AccordionTrigger>
+                  <AccordionContent className="text-gray-600 pb-6 leading-relaxed">
+                    {item.answer}
+                  </AccordionContent>
+                </AccordionItem>
+              </motion.div>
+            ))}
+          </Accordion>
+        </AnimatedSection>
+      </div>
+    </section>
+  );
+};
+
+export default FAQ