Components
Loading preview...
A vertically stacked set of interactive headings that each reveal an associated section of content.
npx shadcn@latest add https://21st.dev/r/preetsuthar17/accordion-1import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion-1";
import { Star, Shield, Zap, Heart,Palette,TrendingUp,BarChart3,DollarSign,MessageCircle} from "lucide-react";
export default function DemoOne() {
return(
<>
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="features">
<AccordionTrigger icon={<Star className="h-4 w-4" />}>
Features
</AccordionTrigger>
<AccordionContent>
Our platform includes advanced features like real-time collaboration,
version control, and automated deployments.
</AccordionContent>
</AccordionItem>
<AccordionItem value="security">
<AccordionTrigger icon={<Shield className="h-4 w-4" />}>
Security
</AccordionTrigger>
<AccordionContent>
We implement enterprise-grade security with end-to-end encryption,
two-factor authentication, and regular security audits.
</AccordionContent>
</AccordionItem>
<AccordionItem value="pricing">
<AccordionTrigger icon={<DollarSign className="h-4 w-4" />}>
Pricing
</AccordionTrigger>
<AccordionContent>
Choose from our flexible pricing plans: Starter ($9/month), Pro ($29/month),
and Enterprise (custom pricing). All plans include a 14-day free trial.
</AccordionContent>
</AccordionItem>
<AccordionItem value="support">
<AccordionTrigger icon={<MessageCircle className="h-4 w-4" />}>
Support
</AccordionTrigger>
<AccordionContent>
Get help when you need it with 24/7 chat support, comprehensive documentation,
video tutorials, and dedicated account managers for enterprise customers.
</AccordionContent>
</AccordionItem>
<AccordionItem value="integrations">
<AccordionTrigger icon={<Zap className="h-4 w-4" />}>
Integrations
</AccordionTrigger>
<AccordionContent>
Connect with over 100+ popular tools including Slack, GitHub, Jira,
Google Workspace, Microsoft 365, and many more through our API.
</AccordionContent>
</AccordionItem>
<AccordionItem value="performance">
<AccordionTrigger icon={<TrendingUp className="h-4 w-4" />}>
Performance
</AccordionTrigger>
<AccordionContent>
Experience lightning-fast load times with our global CDN, 99.9% uptime SLA,
and automatic scaling to handle traffic spikes seamlessly.
</AccordionContent>
</AccordionItem>
<AccordionItem value="analytics">
<AccordionTrigger icon={<BarChart3 className="h-4 w-4" />}>
Analytics & Reporting
</AccordionTrigger>
<AccordionContent>
Gain insights with detailed analytics, custom dashboards, automated reports,
and real-time monitoring of your key performance metrics.
</AccordionContent>
</AccordionItem>
<AccordionItem value="customization">
<AccordionTrigger icon={<Palette className="h-4 w-4" />}>
Customization
</AccordionTrigger>
<AccordionContent>
Tailor the platform to your brand with custom themes, white-label options,
personalized workflows, and configurable user permissions.
</AccordionContent>
</AccordionItem>
</Accordion>
</>
)
}