New Events Page - DESIGN ONLY

[nabramow]

This is the DESIGN ONLY for the EventsList and the EventItem card. This will merge into the "web/feature/new-events-page" feature branch, not prod, so no need to worry. I am breaking them up as it will be a big feature and it's easier to review in pieces.

Please only review the design, the loading and functionality will come in the next PR.

Right now I'm just using mock data from app/web/test/fixtures/events.json. If you want to test different UI like a very long title, online event, etc. you can add or adjust the data there.

Design mocks in these tickets: #4823, #4784

Web frontend checklist

• [ x ] Formatted my code with yarn format
• [ x ] There are no warnings from yarn lint --fix
• [ x ] There are no console warnings when running the app
• [ WILL DO ONCE DESIGN CONFIRMED ] Added any new components to storybook
• [ WILL DO IN FUTURE PR ] Added tests where relevant
• [ ] All tests pass
• [ DESIGN ONLY ] Clicked around my changes running locally and it works
• [ X ] Checked Desktop, Mobile and Tablet screen sizes
• 

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
couchers	✅ Ready (Inspect)	Visit Preview	Sep 23, 2024 6:27am

[bakeiro]

overall good, didn't spot nothing improveable in the code, tomorrow I will finish the review ;)

[bakeiro]

petition about the tabs, can we use the original tabs? to maintain consistency (as the picture attached)

I think was a misunderstading with the mockups, my mockups are just to understand the abstract idea what I wanted to achieve, but we should keep using the original UI style/guidelines as we have in other pages, see comments in the attached pictures (maybe it's my fault because wasn't totally clear, but yeah for these mockups I'm using an AI to generate them, that's why they don't follow the Couchers UI guidelines 😅)

[bakeiro]

new issue created https://github.com/Couchers-org/couchers/issues/4877 PR approved