98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
22 lines
908 B
TypeScript
22 lines
908 B
TypeScript
import { ChevronDown } from 'lucide-react'
|
|
import { FAQ } from '@/lib/types'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
|
|
interface FAQItemProps {
|
|
faq: FAQ
|
|
}
|
|
|
|
export function FAQItem({ faq }: FAQItemProps) {
|
|
return (
|
|
<details className="group bg-card rounded-xl border border-border overflow-hidden transition-all duration-300 open:border-primary/50 open:ring-1 open:ring-primary/20">
|
|
<summary className="flex items-center justify-between p-6 cursor-pointer select-none hover:bg-white/5 transition-colors">
|
|
<span className="text-foreground font-semibold text-lg">{faq.question}</span>
|
|
<ChevronDown className="w-6 h-6 text-primary transition-transform duration-300 group-open:rotate-180" />
|
|
</summary>
|
|
<div className="px-6 pb-6 text-muted-foreground leading-relaxed border-t border-border/50 pt-4">
|
|
{faq.answer}
|
|
</div>
|
|
</details>
|
|
)
|
|
}
|