feat: Add CollectionOverview

[lux-v]

Component Created: CollectionOverview.vue

Stories: ~/stories/CollectionOverview.stories.js

Spec: ~/stories/CollectionOverview.spec.js

Notes:

Designs:
https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-25&m=dev

https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-26&p=f&m=dev

Read in Recording:
https://drive.google.com/file/d/17tiGmE4aax-faoo5Rjue2Idbx3OGCFGa/view?usp=sharing

Relevant Links
https://www.library.ucla.edu/
https://digital.library.ucla.edu/catalog/ark:/21198/z1x98m6j

Checklist:

• I checked that it is working locally in the dev server
• I checked that it is working locally in the storybook
• I checked that it is working locally in the
  library-website-nuxt dev server
• I added a screenshot of it working
• UX has reviewed and approved this
• I assigned this PR to someone on the dev team to review
• I used a conventional commit message
• I assigned myself to this PR

[github-actions]

🚀 Deployed on https://deploy-preview-852--ucla-library-storybook.netlify.app

[pghorpade]

@lux-v, everything looks good. One change is: On desktop, the image should scale to match the height of the text section (so both columns align vertically).

[lux-v]

@lux-v, everything looks good. One change is: On desktop, the image should scale to match the height of the text section (so both columns align vertically).

@pghorpade we’re concerned that, on some breakpoints, when there’s a lot of text, the image height might become too tall and look awkward

So, we came up with a solution to make the image sticky. Would you agree with this approach? The changes are already up so you can check it out.

Screen.Recording.2025-11-03.at.10.34.06.mov

[pghorpade]

👍

[pghorpade]

🎉 This PR is included in version @ucla-library-monorepo/ucla-library-website-components-v1.48.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀