{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "frequently-asked-questions-with-accordion",
  "type": "registry:block",
  "title": "Frequently asked questions with Accordion",
  "description": "Elegant and minimal FAQs with grid, accordions and micro-interactions",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/accordion"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/frequently-asked-questions/frequently-asked-questions-with-accordion.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '@/components/ui/accordion';\n\ninterface FAQItem {\n  question: string;\n  answer: string;\n}\n\ninterface FrequentlyAskedQuestionsProps {\n  title?: string;\n  description?: string;\n  data?: FAQItem[];\n  className?: string;\n  supportEmail?: string;\n}\n\nconst defaultFAQs: FAQItem[] = [\n  {\n    question: 'What is the purpose of this website?',\n    answer:\n      'This website is a place to help you find the best products and services in the world. We curate top-quality offerings so you can make informed decisions without spending hours on research.',\n  },\n  {\n    question: 'How do I contact support?',\n    answer:\n      'You can reach our support team by emailing support@example.com or by using the live chat widget in the bottom-right corner of the page. We typically respond within 24 hours on business days.',\n  },\n  {\n    question: 'How do I find the best products?',\n    answer:\n      'Use the search bar at the top of the page to browse by category, keyword, or brand. You can also filter results by rating, price range, and availability to quickly narrow down the best options for your needs.',\n  },\n  {\n    question: 'Can I return a product?',\n    answer:\n      'Yes, we offer a hassle-free 30-day return policy on most items. Simply visit your order history, select the item you wish to return, and follow the instructions. Refunds are processed within 5–7 business days.',\n  },\n  {\n    question: 'Do you offer international shipping?',\n    answer:\n      'We ship to over 50 countries worldwide. International shipping rates and estimated delivery times are calculated at checkout based on your location and the items in your cart.',\n  },\n  {\n    question: 'How can I track my order?',\n    answer:\n      \"Once your order has been dispatched, you will receive a confirmation email with a tracking number. You can use this number on our order tracking page or directly on the carrier's website to follow your package in real time.\",\n  },\n];\n\nexport default function FrequentlyAskedQuestions({\n  title = 'Frequently asked questions',\n  description = \"We are here to help you with any questions you may have. If you don't find what you need, please contact us.\",\n  data = defaultFAQs,\n  className,\n  supportEmail = 'support@example.com',\n}: FrequentlyAskedQuestionsProps) {\n  const words = title.split(' ');\n\n  return (\n    <section className={cn('relative w-full overflow-hidden py-24', className)}>\n      <div className='mx-auto max-w-3xl px-6'>\n        <h1 className='relative z-10 mx-auto max-w-4xl text-center text-3xl font-bold tracking-tight text-zinc-800 md:text-5xl lg:text-6xl dark:text-zinc-100'>\n          {words.map((word, index) => (\n            <motion.span\n              key={`${word}-${index}`}\n              initial={{ opacity: 0, filter: 'blur(6px)', y: 12 }}\n              whileInView={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n              viewport={{ once: true }}\n              transition={{\n                duration: 0.4,\n                delay: index * 0.08,\n                ease: 'easeInOut',\n              }}\n              className='mr-2 inline-block'\n            >\n              {word}\n            </motion.span>\n          ))}\n        </h1>\n\n        <motion.p\n          initial={{ opacity: 0 }}\n          whileInView={{ opacity: 1 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.4 }}\n          className='relative z-10 mx-auto mt-6 max-w-2xl text-center text-base text-zinc-500 dark:text-zinc-400 md:text-lg'\n        >\n          {description}{' '}\n          <a\n            href={`mailto:${supportEmail}`}\n            className='text-primary underline underline-offset-4 hover:opacity-80 transition-opacity'\n          >\n            {supportEmail}\n          </a>\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ duration: 0.5, delay: 0.5 }}\n          className='mt-14'\n        >\n          <Accordion type='single' collapsible className='w-full'>\n            {data.map((item, index) => (\n              <motion.div\n                key={`faq-${index}`}\n                initial={{ opacity: 0, y: 10 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{\n                  duration: 0.35,\n                  delay: 0.5 + index * 0.07,\n                  ease: 'easeOut',\n                }}\n              >\n                <AccordionItem value={`item-${index}`}>\n                  <AccordionTrigger>{item.question}</AccordionTrigger>\n                  <AccordionContent>{item.answer}</AccordionContent>\n                </AccordionItem>\n              </motion.div>\n            ))}\n          </Accordion>\n        </motion.div>\n      </div>\n    </section>\n  );\n}\n"
    }
  ]
}