Landing jumps around on mobile

[matthewaerose]

Viewing the landing page on mobile, it appears that the HeroLayout is causing the whole page to jump around as the {animatedText} changes the dimensions <h1> tag.

I'm not a frontend dev, I just know enough to be dangerous.

[jeromehardaway]

Hi @matthewaerose I will be looking into this this week.

[jeromehardaway]

@matthewaerose

✅ Update: HeroArea Component Refined

This change has been implemented! The HeroArea component in src/containers/hero/layout-04/index.tsx has been refined to improve structure, readability, and styling.

✨ What’s Improved:
• Layout & Structure: Content is now centered using a tw-flex tw-flex-col tw-items-center wrapper. The heading and animated text are more clearly organized with responsive spacing.
• Styling: Tailwind class order has been cleaned up (e.g., tw-h-full tw-w-full), and spacing/padding across the component has been fine-tuned for better visual balance.
• Code Cleanup: Closed wrapper divs properly and improved alignment within the motion container for easier maintenance.

Let us know if you have any feedback or catch something we missed. Thanks for the support! 👨‍💻🚀