Enhance featured products with a carousel #38
Description
Summary
Enhance the featured product part of the homepage with a dynamic carousel that promotes popular/featured items similar to retail websites like Marks & Spencer.
User Story
As a customer visiting the e-commerce site, I want to see an engaging landing page with featured products so that I can quickly discover popular items and seasonal promotions.
Requirements
Core Features
Hero Carousel Component
Rotating banner showcasing 3-5 featured products/collections
- Auto-advance every 5-7 seconds with manual navigation controls
- Responsive design for mobile/desktop
- Each slide should include a product image, title, brief description, and CTA button
Product Selection Logic
- Randomly select from top-selling or featured products
- Support for manually curated "featured" products
- Fallback to the newest products if no featured items exist
Technical Requirements
- Carousel component using React + TypeScript
- API endpoint to fetch featured/popular products
- Accessibility support (keyboard navigation, screen readers)
- Backend tests + frontend e2e tests must be added
Design Requirements
- Follow the existing Chakra UI design system and overall theming strategy of the site
- High-quality product images with consistent aspect ratios
- Smooth transitions between carousel slides
- Loading states for carousel content
- Mobile-first responsive design
Acceptance Criteria
- Landing page loads within 1 second
- Carousel displays properly on mobile and desktop
- Users can manually navigate carousel slides
- Clicking carousel items navigates to product detail pages
- Page is accessible
- No console errors or warnings
- All backend and e2e tests must pass
Technical Notes
- Consider using existing React carousel libraries (e.g., react-slick, swiper)
- Test with various screen sizes and browsers
- Existing product data structure in backend/app/models.py
- Current routing in frontend/src/App.tsx