Features Accordion

What it does

FeaturesAccordion renders a list of feature rows. Clicking a row expands it to reveal a description and an optional product screenshot on the right. Good for showing several features without overwhelming the page at once.

Usage

import FeaturesAccordion from "@/components/FeaturesAccordion";

<FeaturesAccordion />

Customizing

Open src/components/FeaturesAccordion.tsx. The FEATURES array at the top controls every row:

{
  id: "onboarding",
  title: "Easy Onboarding",
  description:
    "One to two sentences shown when this row is expanded.",
  img: "/features/onboarding.png",
  icon: <svg>...</svg>,
},

• title — the label shown in the collapsed row.
• description — the text revealed on expand. One to two sentences is enough — keep it focused on the benefit.
• img — path to a product screenshot in /public. Set to null to show a placeholder until you have a real image.
• icon — a small inline SVG shown next to the title. Swap in any icon that fits the feature.
• visual — optional. Render a custom JSX element (a stats card, a demo mockup, etc.) instead of an image. Takes precedence over img when set.