Card Accordion

import {  Accordion11,  Accordion11Content,  Accordion11Item,  Accordion11Trigger,} from '@/components/ui/shadcn-io/accordion-11';const items = [  {    id: "1",    title: "What makes shadcn.io different?",    content:      "shadcn.io focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.",  },  {    id: "2",    title: "How can I customize the components?",    content:      "Use our CSS variables for global styling, or className and style props for component-specific changes. We support CSS modules, Tailwind, and dark mode out of the box.",  },  {    id: "3",    title: "Is shadcn.io optimized for performance?",    content:      "Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.",  },  {    id: "4",    title: "How accessible are the components?",    content:      "All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support. Regular testing ensures compatibility with NVDA, VoiceOver, and JAWS.",  },];export default function Component() {  return (    <div className="flex justify-center">      <Accordion11 type="single" collapsible className="w-full max-w-2xl" defaultValue="3">        {items.map((item) => (          <Accordion11Item value={item.id} key={item.id}>            <Accordion11Trigger>              {item.title}            </Accordion11Trigger>            <Accordion11Content>              {item.content}            </Accordion11Content>          </Accordion11Item>        ))}      </Accordion11>    </div>  );}