🐛 Bug - Remove gap line below hero section on mobile landing page

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

Hi Team!

  🟥  Watch the video (38 sec)

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

Pain

On the ⭐ SSW Website (Dev - Next.js) landing page in mobile view, there is a visible line/gap at the bottom of the hero section that appears misaligned with the rest of the layout. The design team reported this during the design sprint and requested that the gap be removed to ensure the hero section aligns correctly on mobile devices.

Tag: Alex Isaac, SSW Designers

Acceptance Criteria

1. The visible line/gap below the hero section is removed on mobile view.
2. The hero section aligns cleanly with the following section without unintended spacing or borders.
3. The fix is verified on common mobile viewport sizes.
4. No visual regressions are introduced to the landing page layout on desktop or tablet views.

Reproduce Steps

1. Open the SSW landing page on a mobile viewport.
2. Navigate to the hero section at the top of the page.
3. Observe the visible line/gap at the bottom of the hero section.
4. Compare the alignment between the hero section and the next section to confirm the UI issue.

Screenshot

Figure: Misaligned gap below mobile hero section

Start at the SSW Website landing page and reproduce the gap below the hero section using a mobile viewport. Inspect the hero and following section's responsive layout and styling, then verify that the gap is removed on common mobile sizes without changing desktop or tablet alignment.