Page Request - Homepage

[farosFreed]

Page Description

This is the homepage for the FTVA website. It displays the data from this test-craft entry: https://test-craft.library.ucla.edu/admin/entries/ftvaHomepage/2805176-ftva-homepage

Route: \

Reference: YouTube video walk-through

Design

• Desktop & Mobile: figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=11-1442&t=uO1Ra7xf14iAt5Vp-0

Developer Tips

List any developer tips here

1. The page should implement useWindowSize() to determine whether to show mobile layout or not

const { width } = useWindowSize()

watch(width, (newWidth) => {
  isMobile.value = newWidth <= 750
})

2. The 'Visit and Learn' section should: pull from the 'quick links' section of the craft entry, and will only ever show 3 items. For desktop, use SectionTeaserCard with ScrollWrapper and the 'noBackground' color scheme. For mobile, use a list of PostSmall components with page-level style tweaks to change fonts and add icons.

3. The 'Archive Blogs' section should: pull from the 'Featured Article' section of the craft entry, and will only ever show 1 item. Use the BlockMediaWithText component

4. The 'Featured Collection' section can use the 'whiteBackground' theme for SectionTeaserCard

Child components

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

1. FlexibleMediaGalleryNewLightbox is used for the carousel at the top of the page (with new styles)
2. ScrollWrapper to wrap scrolling cards where needed
3. SectionWrapper to wrap sections on the page that need a title and a link
4. SectionTeaserCard with various color schemes for sections on the page
5. MediaWithText component for the "Archive Blogs" featured item
6. PostSmall for the mobile version of the "Visit and Learn" section
7. DividerWayFinder
8. NEW Slider component for the Before/After section at the bottom of the page

Screenshots