{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "help-center",
  "type": "registry:block",
  "title": "Help Center",
  "description": "Searchable help center with article categories, FAQ accordions, and support contact options. Designed to improve self-service resolution and reduce customer support tickets.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "accordion",
    "card",
    "input"
  ],
  "files": [
    {
      "path": "examples/help-center/components/faq.tsx",
      "content": "import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\ninterface FAQItem {\n  id: string;\n  question: string;\n  answer: string;\n}\n\ninterface FAQAccordionProps {\n  items: FAQItem[];\n}\n\nconst FAQ = ({ items }: FAQAccordionProps) => {\n  return (\n    <div className=\"w-full max-w-4xl mx-auto\">\n      <Accordion type=\"single\" collapsible className=\"space-y-4\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.id}\n            value={item.id}\n            className=\"border border-border rounded-lg px-4 bg-card shadow-sm hover:shadow-md transition-shadow duration-200\"\n          >\n            <AccordionTrigger className=\"text-left text-lg font-medium hover:no-underline py-4\">\n              {item.question}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground pb-6 text-base leading-relaxed\">\n              {item.answer}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </div>\n  );\n};\n\nexport default FAQ;",
      "type": "registry:component",
      "target": "app/help-center/components/faq.tsx"
    },
    {
      "path": "examples/help-center/components/list-item.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport Link from \"next/link\";\n\ninterface HelpCenterCardProps {\n  title: string;\n  description: string;\n  linkText: string;\n  href: string;\n}\n\nconst ListItem = ({ title, description, linkText, href }: HelpCenterCardProps) => {\n  return (\n    <Card className=\"h-full hover:shadow-lg transition-shadow duration-200 bg-card border-border pb-0\">\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        <CardDescription>{description}</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col h-full border-t py-3\">\n        <Link\n          href={href}\n          className=\"flex justify-between items-center text-link hover:underline font-medium group transition-colors duration-200\"\n        >\n          {linkText}\n          <ArrowRight className=\"ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200\" />\n        </Link>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default ListItem;",
      "type": "registry:component",
      "target": "app/help-center/components/list-item.tsx"
    },
    {
      "path": "examples/help-center/components/search.tsx",
      "content": "import { Input } from \"@/components/ui/input\";\nimport { SearchIcon } from \"lucide-react\";\n\nconst Search = () => {\n  return (\n    <div className=\"relative w-full max-w-2xl mx-auto\">\n      <div className=\"absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none\">\n        <SearchIcon className=\"size-5 text-muted-foreground\" />\n      </div>\n      <Input\n        type=\"text\"\n        placeholder=\"Enter a question, topic or keyword\"\n        className=\"pl-12 h-14 text-base bg-background border-search-border rounded-full text-hero-foreground placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-hero-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-hero\"\n      />\n    </div>\n  );\n};\n\nexport default Search;",
      "type": "registry:component",
      "target": "app/help-center/components/search.tsx"
    },
    {
      "path": "examples/help-center/page.tsx",
      "content": "import Search from \"./components/search\";\nimport ListItem from \"./components/list-item\";\nimport FAQ from \"./components/faq\";\n\nconst faqItems = [\n  {\n    id: \"trial\",\n    question: \"Is there a 14-days trial?\",\n    answer:\n      \"Yes, we offer a 14-day free trial for all new users. You can access all premium features during this period without any limitations. No credit card required to start your trial.\"\n  },\n  {\n    id: \"premium\",\n    question: \"What's the benefits of the Premium Membership?\",\n    answer:\n      \"Premium members get access to advanced features, priority support, unlimited usage, exclusive content, and early access to new features. You also get dedicated account management and custom integrations.\"\n  },\n  {\n    id: \"billing\",\n    question: \"How does billing work?\",\n    answer:\n      \"We offer flexible billing options including monthly and annual plans. Annual subscribers get a 20% discount. All plans include a 30-day money-back guarantee.\"\n  },\n  {\n    id: \"support\",\n    question: \"What kind of support do you offer?\",\n    answer:\n      \"We provide 24/7 email support for all users, live chat for premium members, and dedicated phone support for enterprise customers. Our average response time is under 2 hours.\"\n  }\n];\n\nexport default function Page() {\n  return (\n    <div>\n      <div className=\"bg-muted relative\">\n        <div className=\"relative container mx-auto px-4 py-16 md:py-24\">\n          <div className=\"mb-12 text-center\">\n            <h1 className=\"mb-6 text-4xl leading-tight font-bold md:text-5xl\">\n              How can we help you today?\n            </h1>\n            <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg leading-relaxed text-balance\">\n              Search for a topic or question, check out our FAQs and guides, contact us for detailed\n              support\n            </p>\n          </div>\n\n          <div className=\"mb-16\">\n            <Search />\n          </div>\n\n          <div className=\"mx-auto -mb-36 grid max-w-6xl gap-6 md:grid-cols-3\">\n            <ListItem\n              title=\"FAQs\"\n              description=\"Frequently asked questions and answers\"\n              linkText=\"Go to FAQs\"\n              href=\"#faqs\"\n            />\n            <ListItem\n              title=\"Guides\"\n              description=\"Articles and resources to guide you\"\n              linkText=\"Check guides\"\n              href=\"/guides\"\n            />\n            <ListItem\n              title=\"Support\"\n              description=\"Contact us for more detailed support\"\n              linkText=\"Contact us\"\n              href=\"/contact\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <div id=\"faqs\" className=\"bg-faq py-16 md:py-32\">\n        <div className=\"container mx-auto px-4\">\n          <div className=\"mb-12 text-center\">\n            <h2 className=\"text-foreground mb-4 text-2xl font-bold md:text-3xl\">\n              Most frequently asked questions\n            </h2>\n            <p className=\"text-muted-foreground mx-auto max-w-3xl\">\n              Here are the most frequently asked questions you may check before getting started\n            </p>\n          </div>\n\n          <FAQ items={faqItems} />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "app/help-center/page.tsx"
    }
  ]
}