|
| 1 | +import React, { useState } from 'react'; |
| 2 | + |
| 3 | +const Faq = () => { |
| 4 | + const [openQuestion, setOpenQuestion] = useState(null); |
| 5 | + |
| 6 | + const toggleQuestion = (index:any) => { |
| 7 | + setOpenQuestion(openQuestion === index ? null : index); |
| 8 | + }; |
| 9 | + |
| 10 | + const faqs = [ |
| 11 | + { question: "How do I subscribe to JiffyScan API services?", answer: "You can sign up to our API services by filling the onboarding form" }, |
| 12 | + { question: "How do I cancel or upgrade my account?", answer: "Please contact us should you wish to upgrade or cancel your account. We will assist you accordingly." }, |
| 13 | + { question: "What are the payment options available?", answer: "We accept all the popular payment methods supported by stripe." }, |
| 14 | + { question: "What is the refund policy?", answer: "Since there’s a free tier to test out the services, payments made on paid tier are non-refundable and we do not provide refunds or credits for any services already paid for. You can cancel the subscription to prevent any future charges." }, |
| 15 | + ]; |
| 16 | + |
| 17 | + return ( |
| 18 | + <section className="py-10 sm:py-16 lg:py-24"> |
| 19 | + <div className="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl"> |
| 20 | + <div className="max-w-2xl mx-auto text-center"> |
| 21 | + <h2 className="text-xl md:text-[48px] font-medium font-poppins leading-tight text-black"> |
| 22 | + Frequently asked Questions |
| 23 | + </h2> |
| 24 | + </div> |
| 25 | + <div className="max-w-5xl mx-auto mt-8 space-y-5 md:mt-16 "> |
| 26 | + {faqs.map((faq, index) => ( |
| 27 | + <div |
| 28 | + key={index} |
| 29 | + className={`transition-all duration-200 bg-[#F5F5F5] rounded-lg border border-gray-200 shadow-lg cursor-pointer hover:bg-gray-50 ${openQuestion === index ? 'open' : ''}`} |
| 30 | + onClick={() => toggleQuestion(index)} |
| 31 | + > |
| 32 | + <button |
| 33 | + type="button" |
| 34 | + className="flex items-center justify-between w-full px-4 py-5 sm:p-6" |
| 35 | + > |
| 36 | + <span className="flex md:text-xl font-medium font-inter text-black">{faq.question}</span> |
| 37 | + <svg |
| 38 | + xmlns="http://www.w3.org/2000/svg" |
| 39 | + fill="none" |
| 40 | + viewBox="0 0 24 24" |
| 41 | + stroke="currentColor" |
| 42 | + className={`w-6 h-6 text-gray-400 transition-transform duration-200 transform ${openQuestion === index ? 'rotate-0' : 'rotate-180'}`} |
| 43 | + > |
| 44 | + <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" /> |
| 45 | + </svg> |
| 46 | + </button> |
| 47 | + <div |
| 48 | + className={`px-4 pb-5 sm:px-6 sm:pb-6 ${openQuestion === index ? 'block' : 'hidden'}`} |
| 49 | + > |
| 50 | + <p>{faq.answer}</p> |
| 51 | + </div> |
| 52 | + </div> |
| 53 | + ))} |
| 54 | + </div> |
| 55 | + <p className="text-center text-gray-600 text-base mt-9"> |
| 56 | + Still have questions?{' '} |
| 57 | + <span className="cursor-pointer font-medium text-tertiary transition-all duration-200 hover:text-tertiary focus:text-tertiary hover-underline"> |
| 58 | + Contact our support |
| 59 | + </span> |
| 60 | + </p> |
| 61 | + </div> |
| 62 | + </section> |
| 63 | + ); |
| 64 | +}; |
| 65 | + |
| 66 | +export default Faq; |
0 commit comments