Step 1: Editing Accordion Items

Locate the accordionItems Array

The content for the accordion is defined in the accordionItems array:

const accordionItems = [
  {
    id: 1,
    question: "How does Lorem Ipsum benefit designers?",
    answer: "Lorem Ipsum allows designers to focus on design elements...",
    image: "/images/Image-D.webp",
  },
  ...
]

Edit Existing Items

• Question (question): Replace the question text.

• Answer (answer): Add your custom answer text.

• Image (image): Update the image path to use your own.

Example Update:

Add New Items

To add more items, include additional objects in the array. Each item should have a unique id.

Example Update:

Remove Items

Delete any unwanted items from the array.

Step 2: Customizing the Appearance

Outer Section

The overall section styling can be modified here:

<section className="flex items-center justify-center h-full w-full max-w-7xl mx-auto">

• Example Update: Add a background and padding.

<section className="flex items-center justify-center h-full w-full max-w-7xl mx-auto bg-gray-50 py-10 px-6">

Accordion Question

The question styling can be updated for font size, color, and hover effects:

• Example Update: Add hover effects and text color changes.

Answer Section

Update the answer styling for font size, spacing, or color:

<Paragraph className="text-gray-600 py-2">{item.answer}</Paragraph>

• Example Update: Increase font size and add more padding.

<Paragraph className="text-gray-700 py-4 text-lg">{item.answer}</Paragraph>

Dynamic Image

The displayed image changes dynamically based on the active accordion item:

<Image
  src={item.image}
  alt={item.question}
  layout="fill"
  objectFit="cover"
  className="rounded-xl w-full h-full"
/>

• Example Update: Change objectFit to contain for a different scaling style.

Step 3: Adjusting Animations

Icon Rotation

The icon rotates when the accordion expands or collapses:

<motion.span
  initial={{ rotate: 0 }}
  animate={{ rotate: index === activeIndex ? 90 : 0 }}
  transition={{ duration: 0.3 }}
  className="ml-4 text-primary-600"
>
  {index === activeIndex ? <Cross1Icon /> : <PlusIcon />}
</motion.span>

• Change Animation Speed: Adjust duration for slower or faster rotation.

Example Update:

Accordion Expansion

The height and opacity animations for the answer section are defined here:

<motion.div
  initial={{ height: 0 }}
  animate={{
    height: index === activeIndex ? "auto" : 0,
    opacity: index === activeIndex ? 1 : 0,
  }}
  transition={{ duration: 0.5, ease: "easeInOut" }}
>

• Adjust Speed: Modify duration for faster or slower transitions.

• Smooth Easing: Experiment with different easing functions (easeOut, easeIn, etc.).

Example Update:

Step 4: Accessibility Improvements

1. Keyboard Navigation

   • Add aria-expanded and aria-controls attributes to the button for better screen reader support.

Example Update:

<button
  onClick={() => toggleAccordion(index)}
  className="w-full flex justify-between items-center text-left py-4 focus:outline-none"
  aria-expanded={index === activeIndex}
  aria-controls={`accordion-panel-${index}`}
>

2. Screen Reader Support

   • Add a unique id to each answer section.

Example Update:

<motion.div
  id={`accordion-panel-${index}`}
  ...
>

Step 5: Testing Your Component

1. Run Locally: Use npm run dev to preview changes.

2. Responsive Testing: Resize your browser to verify the layout works on all screen sizes.

3. Keyboard Accessibility: Use Tab and Enter to navigate and interact with the accordion.

Best Practices

1. Content Clarity:

   • Keep questions short and concise.

   • Write clear and relevant answers.

2. Consistent Styling:

   • Ensure the accordion matches your design system.

   • Use consistent colors, fonts, and spacing.

3. Image Optimization:

   • Use compressed images (.webp) for faster loading.

   • Ensure images have meaningful alt text for accessibility.

Example Accordion Items

const accordionItems = [
  {
    id: 1,
    question: "What is UI Now?",
    answer: "UI Now provides pre-designed components to help startups build faster.",
    image: "/images/ui-now-example.jpg",
  },
  {
    id: 2,
    question: "Is UI Now beginner-friendly?",
    answer: "Yes, all components come with tutorials for easy integration.",
    image: "/images/beginner-friendly.jpg",
  },
  {
    id: 3,
    question: "How do I customize components?",
    answer: "You can edit the code directly or follow our step-by-step guides.",
    image: "/images/customization-example.jpg",
  },
]