FaqSection1

A complete FAQ section with an accessible accordion interface. Features a responsive grid layout with title, description, and expandable question-answer pairs. Perfect for product pages, landing pages, or support sections.

✨ Features

• Ready-to-Use: No props needed, just drop it in your page
• Accessible Accordion: Built with proper ARIA attributes and keyboard navigation
• Responsive Design: Adapts beautifully to mobile and desktop screens
• Smooth Animations: Rotating icons and smooth expand/collapse transitions
• Dark Mode Support: Automatically adapts to light and dark themes
• Hover Effects: Interactive states for better user experience

📋 Prerequisites

This component requires:

• Next.js (with App Router)
• Tailwind CSS 4

🚀 Installation

npm install motion

📁 Files Included

The component bundle includes:

• index.tsx - Main FAQ section component
• accordion.tsx - Reusable accordion components
• README.md - This documentation

🎯 Basic Usage

1import { FaqSection1 } from './components/faq-section-1';
2
3export default function SupportPage() {
4    return (
5        <div>
6            <FaqSection1 />
7        </div>
8    );
9}

The component renders a complete FAQ section with 5 pre-written questions about returns, shipping, tracking, and order changes.

🔧 Props

The FaqSection1 component has no props - it's designed to work out of the box with sensible defaults.

📖 Examples

Basic Implementation

1import { FaqSection1 } from './components/faq-section-1';
2
3export default function HomePage() {
4    return (
5        <main>
6            <section className="hero">
7                <h1>Welcome to our store</h1>
8            </section>
9
10            {/* FAQ section */}
11            <FaqSection1 />
12
13            <section className="contact">
14                <h2>Still have questions?</h2>
15            </section>
16        </main>
17    );
18}

Multiple FAQ Sections

1export default function SupportPage() {
2    return (
3        <div className="space-y-16">
4            <FaqSection1 />
5
6            {/* You can add more sections as needed */}
7            <section className="py-16">
8                <h2 className="text-center text-3xl font-bold mb-8">
9                    Need more help?
10                </h2>
11                <div className="text-center">
12                    <button className="px-8 py-4 bg-blue-600 text-white rounded-lg">
13                        Contact Support
14                    </button>
15                </div>
16            </section>
17        </div>
18    );
19}

Within a Layout

1export default function ProductPage() {
2    return (
3        <div>
4            {/* Product info */}
5            <section className="py-16">
6                <h1>Amazing Product</h1>
7                <p>Product description...</p>
8            </section>
9
10            {/* Features */}
11            <section className="py-16 bg-gray-50 dark:bg-gray-900">
12                <h2>Features</h2>
13                {/* Feature content */}
14            </section>
15
16            {/* FAQ */}
17            <FaqSection1 />
18        </div>
19    );
20}

📝 Customizing Content

To modify the FAQ questions and answers, edit the QA array in the component file:

1// In index.tsx, modify this array:
2const QA: { question: string; answer: string }[] = [
3    {
4        question: 'Your custom question?',
5        answer: 'Your custom answer here.',
6    },
7    // Add more Q&A pairs...
8];

🎨 Built-in Accordion Components

The FAQ section uses these reusable accordion components that are included:

Accordion Structure

1<Accordion>
2    <AccordionItem value="unique-id">
3        <AccordionTrigger>Question text</AccordionTrigger>
4        <AccordionContent>Answer content</AccordionContent>
5    </AccordionItem>
6</Accordion>

Accordion Props

• Accordion: Container component (no props needed)
• AccordionItem: Requires value prop for unique identification
• AccordionTrigger: Question/trigger button (optional className)
• AccordionContent: Answer content area (optional className)

🎭 Animation Details

Icon Rotation

• Plus icon rotates 45° when accordion opens (becomes an X)
• Smooth 0.3s transition with Motion

Content Animation

• Height animates from 0 to auto
• Opacity fades in/out
• 0.3s easeInOut timing

Hover States

• Trigger buttons expand horizontally on hover
• Background color changes on hover and active states

💡 Usage Tips

Page Placement

The FAQ section works well:

• At the bottom of landing pages
• In dedicated support/help pages
• After product descriptions
• Before contact forms

Content Guidelines

• Keep questions concise and specific
• Write answers in plain language
• Address the most common customer concerns
• Order from most to least frequently asked

SEO Benefits

• Use structured FAQ content for rich snippets
• Include relevant keywords in questions
• Provide comprehensive answers

🔧 Default Questions Included

1. What is your return policy? - 30-day return policy details
2. How long does shipping take? - 5-7 business days standard shipping
3. Do you offer international shipping? - Worldwide shipping information
4. How can I track my order? - Order tracking process
5. Can I change or cancel my order? - 2-hour change window policy

📱 Responsive Behavior

• Mobile: Single column layout, full-width questions
• Desktop: Two-column grid with title on left, accordion on right
• Tablet: Adapts smoothly between mobile and desktop layouts

🌙 Dark Mode

Automatically adapts colors for dark mode:

• Text colors switch appropriately
• Border colors adjust for visibility
• Background overlays maintain contrast
• Hover states work in both themes