Hero Section UI Overlap and Text Alignment Issues on Homepage

[anwersameer47-boop]

The homepage hero section has multiple UI and layout issues affecting readability and visual consistency. Decorative circular elements are overlapping the main heading text (“Discover the World’s Best Kept Getaway”), causing parts of the text to appear partially hidden or unclear. Additionally, the heading text alignment appears inconsistent, with improper line breaks (e.g., “Kept G” split incorrectly).

The floating images on the left side look visually heavy and may affect responsiveness on smaller screens. The overall spacing between text, buttons, and background elements needs improvement to enhance clarity and user experience.

Expected Behavior:

Hero text should be fully visible without overlap.
Decorative elements should not interfere with readable content.
Proper line breaks and alignment for headings.
Improved spacing and responsiveness across screen sizes.

Actual Behavior:

Text overlaps with background shapes.
Inconsistent heading layout.
Visual clutter in the hero section.

[github-actions]

👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀

[Amangp]

hi @apu52 ,
I’d like to work on this issue and fix the hero section UI and responsiveness. Please assign it to me under swoc 26