feat(collection): add blog variant for collections

[seaerchin]

Problem

1. we want a blog variant with 2 col layout in lg/md and a singular column view on sm

Solution

1. add a separate BlogCard component together with styling changes for CollectionResult. the CollectionResult displays in a grid layout with 2 cols by default and transitions into a single column layout on small screens
2. for the BlogCard, the image is extracted to the top together w some spacing changes
3. NOTE: i implemented this as a separate component for dev speed. it might be possible to combine the BlogCard and CollectionCard into a single component and use the variant to distinguish but it seemed premature because we haven't settled on the design yet (for the blog layout), so i opted to keep it separate + flexible first

Notes

1. on medium to large views, i opted to remove the image totally rather than leave a placeholder image so that the text all aligns at the start. this was so that we could have correct spacing on small screens (as the gap-3 of the containing div still applies when display: none was set on a fake div) - trying to figure out how to conditionally render but tw itself won't be able to do thsi

Videos

Screen.Recording.2024-12-10.at.12.57.58.PM.mov

Demo

https://test-isomer-next-staging.isomer.gov.sg/cls

[datadog-opengovsg]

Datadog Report

Branch report: feat/layout-cls
Commit report: 4d95e8d
Test service: isomer-studio

✅ 0 Failed, 232 Passed, 36 Skipped, 38.7s Total Time
🔻 Test Sessions change in coverage: 1 decreased (-0.04%)

🔻 Code Coverage Decreases vs Default Branch (1)

• vitest run --coverage 3.82% (-0.04%) - Details