← Components/Content

AccordionFAQ

accordionfaq-1779388705707.tsx
'use client';
import { useState } from 'react';

export default function AccordionFAQ() {
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: 'How does the AI model work?', a: 'Our AI uses a fine-tuned large language model trained on millions of code repositories. It understands context, style, and intent to provide accurate, production-ready suggestions.' },
    { q: 'Is my data private?', a: 'Yes, all data is encrypted in transit and at rest. We never train on your proprietary code. Your intellectual property remains 100% yours.' },
    { q: 'What languages are supported?', a: 'We support 40+ programming languages including TypeScript, Python, Rust, Go, Java, C++, and all major web frameworks.' },
    { q: 'Can I use it offline?', a: 'Our desktop client supports offline mode with a local model for basic completions. Full AI capabilities require an internet connection.' },
  ];

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '600px' }}>
      {faqs.map((faq, i) => (
        <div key={i} style={{
          borderBottom: '1px solid rgba(255,255,255,0.06)',
          marginBottom: '2px',
        }}>
          <button
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{
              width: '100%', background: 'none', border: 'none',
              padding: '18px 0', cursor: 'pointer',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              textAlign: 'left',
            }}
          >
            <span style={{ color: '#F5F5F0', fontSize: '15px', fontWeight: 600 }}>{faq.q}</span>
            <span style={{
              color: '#C9A84C', fontSize: '20px', fontWeight: 300,
              transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)',
              transition: 'transform 0.3s ease',
              flexShrink: 0, marginLeft: '16px',
            }}>+</span>
          </button>
          <div style={{
            maxHeight: open === i ? '200px' : '0',
            overflow: 'hidden',
            transition: 'max-height 0.4s cubic-bezier(0.4,0,0.2,1)',
          }}>
            <p style={{ color: 'rgba(245,245,240,0.6)', fontSize: '14px', lineHeight: 1.7, margin: '0 0 18px 0' }}>{faq.a}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Component info

CategoryContent
Frameworkreact
TierFREE
Views0
Copies0

About

Smooth animated FAQ accordion with icons

More from Content

'use client'
import { useState } from 'react'

const ARTICLES = [
  { id: 1, title: 'Building a 100-Component UI Library in 2 Weeks with AI', excerpt: 'How we used Claude Code and Groq to generate 100+ production-ready React components in record time
ArticleCard
Content
'use client';
import { useState } from 'react';

export default function MoodBoard() {
  const [tiles, setTiles] = useState([
    { id: 1, label: 'Bold', gradient: 'linear-gradient(135deg, #1a1a2e, #16213e)', emoji: '⚡', x: 0, y: 0 },
    { id: 2, la
MoodBoard
Content