Featured game card component

[zippy1978]

Description

Implement the FeaturedGameCard component that appears on the Home screen. This card prominently displays upcoming games and serves as the visual focal point of the Home screen's carousel.

Visual Requirements

• Card height: 200px
• Gradient background from Primary Red (#DA2F16) to Secondary Red (#A62818) with 80% opacity
• Corner radius: 12px
• Elevation/shadow: 4px
• Team logos: 75px size, centered in their respective areas
• Team names: Below logos, Body Medium text style (14px), white color, semibold weight
• Date display in center section:
  • Day number: Headline Large style (24-32px), bold, white color
  • Month: Body Medium style, white with 80% opacity
  • Time: Inside gold pill with white text
• Location strip at bottom: Semi-transparent black background (40% opacity), white text with location icon

Data Requirements

The component should accept the following data:

• Home team name
• Home team logo
• Away team name
• Away team logo
• Game date and time
• Location

Functionality

• Card should be part of a swipeable carousel
• Cards should have proper margins for carousel effect (viewportFraction: 0.95)
• Game time should be properly formatted, and local aware (e.g., "7:30 PM")
• Text that's too long should truncate with ellipsis

Interactions

• No click interactions required for v1 (static display only)
• Animation: Subtle scale effect on the active card in the carousel (future enhancement)

Accessibility Requirements

• Team names should have sufficient contrast against the background
• Touch targets should be adequately sized
• Component should include appropriate semantic information for screen readers

Acceptance Criteria

1. Card renders with proper gradient background
2. Team logos and names display correctly on either side
3. Game date and time are prominently displayed in the center
4. Location information appears in the bottom strip
5. Long text properly truncates with ellipsis
6. Card maintains proper sizing across different device sizes
7. Card appears correctly in the Home screen carousel
8. Card adheres to the design system (colors, typography, spacing)

Dependencies

• Design Style Guide implementation
• Team logo component