Nectar FAQ Cards
A sweet, approachable FAQ section designed for ecommerce storefronts.
Features
- 8 FAQ cards — Shipping, returns, payment, sizing, tracking, international, gift wrapping, loyalty
- 2-column grid — Responsive layout that stacks on mobile
- Search bar — Filter questions by keyword in real time
- Collapsible cards — Expand/collapse individual answers
- Category badges — Color-coded category labels on each card
- Honeycomb pattern — CSS SVG honeycomb background decoration
- Honey/amber palette — Warm tones (#d97706, #fbbf24) with cream (#fffbeb) and dark brown (#451a03)
- Dark mode — Full dark variant with golden accents
- Playful rounded design — Rounded corners, soft shadows
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Questions: Edit the
faqs array to change questions, answers, categories, and icons
- Search: Search filters by question text, answer text, and category
- Colors: Adjust amber/honey hex values for your brand
- Font: Uses Nunito from Google Fonts; swap for any rounded typeface
- Honeycomb: Modify the SVG pattern scale and opacity
