68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
"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 |