Page Request - Explore Collections

[tinuola]

Page Description

This template is used to display the Explore Collections page.

Route: ~/collections/index.vue

Craft Data (single entry): https://test-craft.library.ucla.edu/admin/entries/ftvaListingExploreCollections/2869845-ftva-listing-explore-collections

Reference: YouTube video walk-through (From 15:45)

Implementation tickets: https://uclalibrary.atlassian.net/browse/APPS-2691

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=24-3933&t=EUNWJAFznGIKgp7Y-4

• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=9138-3338&t=EUNWJAFznGIKgp7Y-4

Slots

None

Props

None

Developer Tips

List any developer tips here

1. Listing page with all-blue background
2. Hearst Collection section is similar to main/primary article on Blog Listing page
3. Could use SectionWrapper slot for collections' View All links

Events

None

Child components

List out any components that are used by this new Page.

1. ResponsiveImage for header image
2. RichText for heading summary
3. FlexibleCardWithImage with horizontal scroll ScrollWrapper and SectionTeaserCards for collections (arrows are missing in the design, but should be visible)
4. BlockCardWithImage for Hearst Collection
5. SectionPostSmall for Resources and About Our Collections sections
6. SectionWrapper
7. DividerGeneral

Screenshots

[pghorpade]

@tinuola, Everything looks good. I have one question: I thought we should use this https://ucla-library-storybook.netlify.app/?path=/story/scrollwrapper--default, which wraps the SectionCardWithImage instead of FlexibleCardWithImage. This is because Flexible components are used in context, when Flexible-blocks are used in Craft.