Donation Impact Statement & Quote Carousel Component PT 1

[thaninbew]

Summary:

Design and implement a component that dynamically displays a rotating testimonial or “impact statement” above the donation form. The text can come from hardcoded values then eventually from a backend endpoint. This adds a layer of emotional resonance and donor motivation.

see figma

Component behavior and acceptance criteria:

• Displays one impact quote at a time (example: "The FCC provides so many great services. I'm glad I can contribute!")
• Optionally renders the quote author (e.g. "– Anonymous Donor")
• Auto-rotates every 5–6 seconds (can pause on hover)
• Accepts optional testimonials prop: { text: string, author?: string }[]
• If no testimonials provided via props, falls back to 3 rotating hardcoded default quotes
• Background color, padding, and layout should match FCC theme (in Figma)

Files to Create/Modify:

New Files:

• apps/frontend/src/components/testimonials/TestimonialCarousel.tsx
• apps/frontend/src/components/testimonials/TestimonialCarousel.spec.tsx
• apps/frontend/src/components/testimonials/testimonials.css (optional, for scoped styles)

Modified Files:

• apps/frontend/src/containers/donations/DonationForm.tsx (add carousel above form)

Testing steps:

• Unit test the quote rotation timing logic, cover edge cases.
• Render with empty props array (should fall back to 4 hardcoded defaults)
• Render with custom testimonials via props (should use provided data instead of defaults)
• Verify pause on hover functionality
• Test responsive design and matches Figma