Page Request - Complex Collection Landing Page

[farosFreed]

Page Description

This Page is used on the FTVA website to display Collection Landing pages for 'complex collections', which are generally collections that contain other collections items.

Route:
/collections/[slug].vue

Note: this route already exists and will need to be enhanced to add a new layout based on data from craftCMS entry

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=11-1444&p=f&t=7hqwNFczSmZgv8O0-0

For mobile, compress all items into 1 column.

Developer Tips

1. Before normal workflow begins, we will need to split the existing page into 2 distinct layout paths depending on craft CMS data fields. This work will be separated into its own ticket.
2. See the about / blog page for similar centered layout at top of page
3. There will need to be page level logic to determine how dropdown filters work based on the specific collections craft CMS data.

Events

The page will not emit events, but it will need to react to emitted events from multiple filters and pagination sources to display the correct search results.

Child components

1. NavBreadcrumb for breadcrumb at top of page
2. RichText for page summary
3. DividerGeneral for divider beneath page description
4. NEW BaseSingleSelectDropdown component
5. SectionTeaserCard with enhancements to allow for grid layout (already part of APPS-3291)
6. SectionPagination for pagination
7. BlockTag to display # of results (might need page specific style tweaks)
8. SectionWrapper as needed

Screenshots