The Horizontal Card component will be used throughout the website to display different specific contents with a similar reusable structure.

• For Events page:

  • Frontend Requirements
    • The component should display of a collection of Card components
    • Each event is a Card component itself (from Create Card Component #7)
      • Could explore a grid display
  • Backend Requirements
    • Reference instances from the EventInstances model
      • id
      • event (foreign key of event it is part of)
      • name
      • starts_at
      • ends_at
      • location
      • ticket_url
    • Each instance's id (primary key) would be referenced on the day of the event in the calendar
    • Check the database schema in Notion for more details

• For Resources page:

  • Frontend Requirements
    • The component should display a headlining resource among all the other resources.
      • Does not need to be a collection of cards, would look more like a single horizontal card.
    • Refer to Create Card Component #7
  • Backend Requirements
    • Refer to Create Resources Page #5

• For WA Savings page:

  • Frontend Requirements
    • The component should display different metrics/data for different savings on energy based on categories (Household / Water Heating / etc.)
    • Could be in the form of bar charts / Explore other designs
  • Backend Requirements
    • Data should not be hardcoded and should be mapped using an API instead
    • Backend team will work on this

The components within a single page will deviate and change depending on pagination/different buttons clicked.

• e.g. User clicks on Current / Upcoming / Past Events buttons