Components

Sections

FAQ

FAQ

Dependencies

npmi framer-motion

npminstall @heroicons/react

Configuration and Re-usability

FAQData.tsx:

// Questions and answers of the FAQ
 
import BeautifulFAQ from "your-path";
 
export default function FAQData() {
  const faqData = [
    {
      question: "What is the return policy?",
      answer:
        "We offer a 30-day money-back guarantee for all our products. If you're not satisfied, you can return the item for a full refund, no questions asked.",
    },
    {
      question: "How long does shipping take?",
      answer:
        "Shipping times vary depending on your location. Typically, domestic orders are delivered within 3-5 business days, while international orders may take 7-14 business days.",
    },
    {
      question: "Do you offer international shipping?",
      answer:
        "Yes, we ship to over 100 countries worldwide. Shipping costs and delivery times may vary depending on the destination.",
    },
    {
      question: "How can I track my order?",
      answer:
        "Once your order is shipped, you'll receive a confirmation email with a tracking number. You can use this number to track your package on our website or the carrier's site.",
    },
  ];
  return (
    <div>
    {/**Component Calling*/}
      <BeautifulFAQ faqData={faqData} />
    </div>
  );
}

Usage Methods

  1. Data externalisation: As with the footer, you could outsource the faqData to a JSON file or from the API. This makes it easy to update the faqData without touching the component code.
  2. Customisable transitions: Allow to pass their own animation configurations via a prop such as animationSettings, which could control the duration and types of transitions used.
  3. Add props such as questionStyle, answerStyle, and containerStyle to allow the appearance of the component to be customised, so that it easily adapts to various themes or designs.