Home screen

[zippy1978]

Implement the HomeScreen, the primary landing screen of the AS Monaco Basket app. This screen serves as the main entry point, showcasing upcoming featured games and recent game results, while providing a visually engaging experience with the team brand identity.

Visual Requirements

• Collapsible header (28% of screen height) with parallax effect
• Background image with red gradient overlay
• Centered team logo (50% max width, 60% max height of header)
• "AS MONACO BASKET" text that fades when collapsed
• Featured games carousel with pagination indicators
• Page indicators: 8px circles with 4px horizontal spacing, Primary Red for active, gray (50% opacity) for inactive
• "LATEST RESULTS" section title with uppercase styling
• Proper spacing between sections (16-24px)
• Bottom navigation bar (implemented separately)

Header expanded

Header collapsed

Header background

Header logo

Structural Components

1. Header Section:

   • Collapsible on scroll with parallax effect
   • Team logo centered
   • Team name appears at bottom when expanded
   • Team name transitions to app bar when collapsed

2. Game Carousel:

   • FeaturedGameCard components in horizontal PageView
   • Pagination indicators (dots) for carousel position
   • ViewportFraction: 0.95 (to show hint of next card)
   • Page indicator row centered below carousel (8px top padding, 16px bottom padding)
   • Page indicators must update when page changes to highlight current position

3. Latest Results Section:

   • Section header with proper spacing
   • Vertical list of GameCard components (past games)
   • Adequate bottom padding

Data Requirements

• App title and branding
• Background image for header
• Team logo asset
• List of upcoming games (for featured carousel)
• List of past games (for results section)
• Current page index for carousel (to highlight correct indicator)

Functionality

• Header collapses when scrolling down, expands when scrolling up
• Game carousel allows horizontal swiping
• Pagination dots indicate current carousel position with real-time updates
• Active page indicator changes when carousel is swiped
• Scrollable content with proper physics
• Nested scrolling behavior with header

Performance Considerations

• Efficient handling of images
• Lazy loading of game cards not in view
• Smooth scrolling and animations
• Optimized re-rendering on scroll
• Efficient state management for page indicator updates

Accessibility Requirements

• Header elements should be properly labeled
• Carousel should be navigable via accessibility tools
• Page indicators should convey current position to screen readers
• Game information should be properly announced by screen readers
• Focus order should follow logical content flow

Acceptance Criteria

1. Collapsible header functions correctly with smooth animation
2. Background image with gradient displays properly
3. Logo is centered correctly in the header
4. Header title appears/disappears according to scroll position
5. Featured games carousel renders and allows swiping
6. Pagination dots indicate current position in carousel and update when swiping
7. Page indicators maintain proper styling (active dot in Primary Red)
8. "LATEST RESULTS" section displays properly
9. Past game cards render correctly in the results section
10. Scrolling performance is smooth without jank
11. All elements adhere to the design system
12. Screen adapts appropriately to different device sizes

Edge Cases

• Handle empty states (no upcoming games)
• Handle single game (only one indicator dot)
• Proper layout on various device sizes and orientations
• Handling of large team names in limited space
• Consistent header behavior with rapid scrolling

Dependencies

• Design Style Guide implementation
• FeaturedGameCard component
• GameCard component
• API implementation
• Navigation system implementation

[alexandrebottero]

API

/team/{id}/games

AS MONACO team id: 68936e0d720c5d0b142053f1

[zippy1978]

25-26 team id: 68fac370582b5bf3199dea5b