diff options
Diffstat (limited to 'src/components/Faq.js')
| -rw-r--r-- | src/components/Faq.js | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/Faq.js b/src/components/Faq.js new file mode 100644 index 0000000..ab0a843 --- /dev/null +++ b/src/components/Faq.js @@ -0,0 +1,57 @@ +import React from "react"; +import Container from "./Container"; +import { Disclosure } from "@headlessui/react"; +import { ChevronUpIcon } from "@heroicons/react/24/solid"; + +const Faq = () => { + return ( + <Container className="!p-0"> + <div className="w-full max-w-2xl p-2 mx-auto rounded-2xl"> + {faqdata.map((item, index) => ( + <div key={item.question} className="mb-5"> + <Disclosure> + {({ open }) => ( + <> + <Disclosure.Button className="flex items-center justify-between w-full px-4 py-4 text-lg text-left text-gray-800 rounded-lg bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-indigo-100 focus-visible:ring-opacity-75 dark:bg-trueGray-800 dark:text-gray-200"> + <span>{item.question}</span> + <ChevronUpIcon + className={`${ + open ? "transform rotate-180" : "" + } w-5 h-5 text-indigo-500`} + /> + </Disclosure.Button> + <Disclosure.Panel className="px-4 pt-4 pb-2 text-gray-500 dark:text-gray-300"> + {item.answer} + </Disclosure.Panel> + </> + )} + </Disclosure> + </div> + ))} + </div> + </Container> + ); +} + +const faqdata = [ + { + question: "What is Helping Hands and how does it work?", + answer: " Helping Hands is a platform designed to connect volunteers with non-profit organizations. Through our user-friendly interface, volunteers can browse and sign up for various opportunities posted by organizations seeking assistance. Likewise, non-profit organizations can create accounts to post volunteer opportunities and connect with eager volunteers.", + }, + { + question: "What types of organizations can utilize Helping Hands?", + answer: "Helping Hands is open to all types of organizations, including non-profits, community groups, charities, schools, and other mission-driven entities. Whether you're a local organization serving your community or a larger non-profit with a global reach, you can benefit from our platform to connect with volunteers and expand your impact.", + }, + { + question: "As an individual, how can I get involved with Helping Hands?", + answer: + "There are several ways for individuals to get involved with Helping Hands. You can sign up as a volunteer on our platform, browse through the available opportunities posted by organizations, and apply to participate in projects that align with your interests and skills. Additionally, you can spread the word about Helping Hands to your friends, family, and social networks to help grow our community and make an even greater impact together.", + }, + { + question: "How does Helping Hands ensure safety and credibility for users?", + answer: + "Ensuring the safety and credibility of organizations is paramount at Helping Hands. We conduct rigorous vetting procedures to verify the legitimacy of non-profit organizations before they can post volunteer opportunities. Additionally, our platform fosters transparency and accountability through volunteer reviews and ratings. If you have any concerns about an organization's credibility, our support team is here to assist you promptly.", + }, +]; + +export default Faq;
\ No newline at end of file |