[UI v2 phase 2] Implement Hero Carousel for Project Display

[0xemc]

Hero Carousel

Designs:

https://www.figma.com/file/5GewbdVaM1Q06CwHmF7d3F/Projects?type=design&node-id=1855-24157&mode=design&t=aUQJG238u8W1eotm-0

Requirements:

• supports one or many projects in the carousel
• each project in carousel supports a large hero image, project name, price, and short description
• if > 1 project...
  • circle/dot indicators to show number of items and item being shown
  • very slow auto scroll, advance every 10 seconds
  • user can click a dot to scroll to different projects or can click and drag horizontally
  • if the user clicks and holds on any of these images, the auto scroll is paused
  • supports swipe on mobile
• for the MVP, the projects in the carousel will be identified in code
  • future enhancement to consider is support of project selection from a CMS-like interface (i.e. using Sanity)
• RETIRE NOW button directs the user to the /retire form for that project (example: https://www.carbonmark.com/projects/VCS-985-2013/retire/pools/nct)
• SHOP ALL PROJECTS button directs the user to the marketplace (https://www.carbonmark.com/projects)

Testing:

• [ ] Display multiple projects in the carousel and ensure navigation indicators match the number of projects.
• [ ] Test the auto-scroll feature, ensuring it pauses when a user interacts with the carousel.
• [ ] Verify the carousel supports touch gestures on mobile devices for swiping through projects.
• [ ] Click on the "RETIRE NOW" and "SHOP ALL PROJECTS" buttons, ensuring they redirect to the correct pages.

Labels: carbonmark-v2-p2