FaqSection2

A centered FAQ section with a modern card-style accordion interface. Features rounded cards with smooth animations and a clean, centered layout. Perfect for landing pages, product pages, or support sections that need a polished look.

✨ Features

Ready-to-Use: No props needed, just drop it in your page
Card-Style Design: Modern rounded cards with subtle backgrounds
Centered Layout: Clean, focused design with centered content
Smooth Animations: Rotating icons and smooth expand/collapse transitions
Accessible: Built with proper ARIA attributes and keyboard navigation
Dark Mode Support: Automatically adapts to light and dark themes
Hover Effects: Interactive card 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

tsx.tsxTypeScript

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

The component renders a complete FAQ section with 5 pre-written questions in a centered, card-style layout.

🔧 Props

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

📖 Examples

Basic Implementation

tsx.tsxTypeScript

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

Landing Page Integration

tsx.tsxTypeScript

1export default function LandingPage() {
2    return (
3        <div>
4            {/* Hero section */}
5            <section className="min-h-screen bg-gradient-to-br from-blue-600 to-purple-700">
6                <h1>Transform Your Business</h1>
7            </section>
8
9            {/* Features */}
10            <section className="py-20 bg-gray-50 dark:bg-gray-900">
11                <h2>Why Choose Us</h2>
12                {/* Features content */}
13            </section>
14
15            {/* FAQ - matches the centered theme */}
16            <FaqSection2 />
17
18            {/* Call to action */}
19            <section className="py-20 bg-blue-600 text-white text-center">
20                <h2>Ready to Start?</h2>
21                <button>Get Started Today</button>
22            </section>
23        </div>
24    );
25}

Product Page Usage

tsx.tsxTypeScript

1export default function ProductPage() {
2    return (
3        <div>
4            {/* Product details */}
5            <section className="py-16">
6                <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">
7                    <div>Product images</div>
8                    <div>Product info</div>
9                </div>
10            </section>
11
12            {/* FAQ specific to the product */}
13            <FaqSection2 />
14        </div>
15    );
16}

📝 Customizing Content

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

tsx.tsxTypeScript

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];

🎨 Design Differences from FaqSection1

Layout

Centered: Single column, centered layout (max-width 4xl)
Card Style: Each accordion item is a rounded card
Spacing: Uses space-y-4 between cards

Visual Style

Background Cards: bg-neutral-400/10 with hover states
Rounded Corners: rounded-xl for modern look
Subtle Shadows: Enhanced with background overlays

Content Layout

Centered Title: Text center alignment
Balanced Text: Uses text-balance for better typography
Compact: More focused, less grid complexity

🎭 Animation Details

Card Interactions

Cards have subtle background color changes on hover
Smooth transitions with 300ms duration
Background overlays darken slightly on interaction

Icon Animation

Plus icon rotates 45° to become an X when opened
Smooth 0.3s rotation transition

Content Animation

Height animates from 0 to auto
Opacity fades in/out simultaneously
0.3s easeInOut timing for smooth reveals

💡 Usage Tips

Best Use Cases

Landing pages with centered design themes
Product pages where FAQ needs to match clean aesthetics
Support sections that need a modern, card-based look
Marketing sites with minimal, focused layouts

Content Strategy

Keep questions concise and specific
Order by importance/frequency
Use clear, actionable language
Consider your audience's main concerns

Visual Harmony

Works well with other centered, card-based sections
Complements gradient backgrounds
Fits modern, clean design systems

🔧 Default Questions Included

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

📱 Responsive Behavior

Mobile: Single column, full-width cards with proper padding
Desktop: Centered container with max-width of 4xl (896px)
Tablet: Smooth scaling between mobile and desktop layouts

🌙 Dark Mode Support

Automatically adapts styling for dark mode:

Card backgrounds become dark:bg-white/10
Text colors switch to proper contrast ratios
Hover states maintain visibility in both themes
Content text uses dark:text-neutral-300 for readability

🎨 Built-in Accordion Components

Uses the same accordion system as FaqSection1 but with updated styling:

Structure

tsx.tsxTypeScript

1<Accordion>  {/* Container with space-y-4 */}
2  <AccordionItem>  {/* Rounded card with bg */}
3    <AccordionTrigger>  {/* Button with padding */}
4    <AccordionContent>  {/* Animated content area */}
5  </AccordionItem>
6</Accordion>

Key Style Differences

AccordionItem: Added rounded corners and background colors
AccordionTrigger: Simplified padding and removed horizontal expansion
AccordionContent: Updated text colors for better contrast