✨ Mobile Layout - Resize and reposition homepage sections for mobile view

Requested by: Larry Carland via YakShaver.ai 🦬
cc: Larry Carland, @isaaclombardssw, @babakamyljanovssw

Hi Team!

  🟥  Watch the video (2 min 15 sec)

  Url from screen share: https://ssw.com.au

Pain

Improve the mobile responsiveness of the SSW Website homepage by reducing oversized content sections and optimizing the layout for easier scrolling and readability on smaller screens. Requested updates include resizing tiles, adjusting video proportions to a more landscape-oriented display, repositioning the rotating banner higher on the page, and improving the event section layout by enlarging and repositioning the countdown timer.

Acceptance Criteria

1. Homepage tiles are resized appropriately for mobile devices to reduce excessive vertical scrolling.
2. Video sections display in a more landscape-oriented ratio on mobile view.
3. Case study tiles and other content tiles are resized consistently for improved mobile readability.
4. The rotating banner is repositioned higher on the homepage, above the 'SSW Difference' section.
5. The event section is optimized for mobile layout.
6. The countdown timer in the event section is enlarged and displayed prominently at the top of the event tile.
7. Spacing and sizing across homepage sections are visually balanced and responsive on common mobile screen sizes.
8. Changes do not negatively impact desktop or tablet layouts.

Screenshot

Figure: Mobile homepage tiles oversized

Start at the homepage entry point in the Next.js site and inspect the mobile layout for the tiles, video sections, rotating banner, and event section described in the acceptance criteria. Use the linked screenshot and verify the resized, repositioned sections on common mobile sizes without changing desktop or tablet layouts.