Adjust headline size based on screen size

[ductbuix]

Fix #757 by adjusting headline font size for mobile view and its responsive container.

🤖[deprecated] Generated by Copilot at 6384d6a

Summary

📱🛠️🎨

Enhanced the design and functionality of the Hero component on the home page. Made it adapt to different screen sizes and resolutions using src/redesign/components/HomeLanding.jsx.

The Hero component was too plain
It needed some tweaks to look sane
On different devices
It had some vices
But now it adapts to the screen

Walkthrough

• Adjust the height and width of the Hero and HeroText components to be responsive to the screen size (link, link)
• Reduce the font size of the HeroTitle component on mobile to avoid text wrapping or clipping (link)

[nikhilwoodruff]

Thanks for this @ductbuix- just testing it out locally I get this though- any ideas?

[nikhilwoodruff]

.

[ductbuix]

Thanks for this @ductbuix- just testing it out locally I get this though- any ideas?

@nikhilwoodruff Can you give me more information (screen size, or any condition)? I've tried several responsive sizes but it works still well for the mobile screens.

[anth-volk]

Could this at all be a Safari thing? I know you test in Safari, @nikhilwoodruff, and I've found in the past that I have to use more workarounds, vendor prefixes, etc., when working with it.

[anth-volk]

Interestingly, post-changes, I don't get what Nikhil had mentioned, but I do get this at around 960px:

[ductbuix]

Could this at all be a Safari thing? I know you test in Safari, @nikhilwoodruff, and I've found in the past that I have to use more workarounds, vendor prefixes, etc., when working with it.

Oh, yes! I see, the Safari, let me take a look on it.

Interestingly, post-changes, I don't get what Nikhil had mentioned, but I do get this at around 960px:

Yea, I initially focused on the issue title so I've only fixed for mobile.

So I will try to figure out what happened with Safari and fix the responsive for all screen. Btw, tell me if you know anything about why it broke in the Safari. @nikhilwoodruff @anth-volk

[nikhilwoodruff]

Thanks so much @ductbuix. Not sure I have any useful details to add on the root cause but let me know if you can't reproduce it.

[ductbuix]

Thanks so much @ductbuix. Not sure I have any useful details to add on the root cause but let me know if you can't reproduce it.

Yea, I found the issue, but the fix might need some more changes. I'm on it.

[ductbuix]

Hi @anth-volk @nikhilwoodruff , I've fixed the responsive header, please check it out.

[nikhilwoodruff]

Looks great on my machine, thanks @ductbuix! @anth-volk I think the merge conflict is from your PR, would you mind taking a look at it?

[nikhilwoodruff]

Good to merge upon the merge conflict being resolved

[ductbuix]

Good to merge upon the merge conflict being resolved

@nikhilwoodruff It looks good now.