Makes the hero wider so it does not look tiny on larger screens and other minor fixes

[bmartinez287]

It makes the hero wider so it does not look tiny on larger screens, like the footer, and provides more space to the hero.

The Issue

Before this PR

After this PR.

This is mostly to improve how the site looks on larger screens.

Review at https://20241011-bmartinez-header-fo.ddev-com-front-end.pages.dev/

[rfay]

What is a hero? You're a hero!

[bmartinez287]

A hero is usually what you call that first section where the title and the terminal animation play on the homepage

[rfay]

Thanks!

I don't really spot the difference. I am interested though that the animation seems to go right to the far right edge of the browser now, don't think it used to, there used to be a bit of gutter/margin?

Here's with this PR on a 14" with Chrome.

[rfay]

As I make the width less, it gets ugly,

[bmartinez287]

That's an interesting observation.
However, that seems like the same to me compared to ddev.com.
As far I remember that was the original design for it.
The terminal appears only about 2500px.

This PR mostly switches the brandbar align the items left and right and the footer.

[bmartinez287]

I'm thinking about changing the hero layout but that likely be a different PR.

[rfay]

I note that it's pretty terrible on phone.

Thanks for paying attention, sorry for the distraction!

[rfay]

OK to merge when you are ready, thanks.

[stasadev]

I have an ultra-wide display and I don't like this change (sorry).

Before:

After:

It's too much for me.

For comparison what is used for the news websites:

It's easier to see in the center, and I don't have to move the mouse too much.

[bmartinez287]

yeah, I was going for what Tailwindcss and a few others do but it can be refined for sure.
How many pixels is that 5000 plus?

https://tailwindcss.com/

[stasadev]

It's 2560x1080.

[stasadev]

I think Tailwind has a different layout, because the logo is not clickable (it's one page site).
And for DDEV we want to have a way to go to the main page from a blog post page.
And with this change, I need to move the mouse far to the left.

[rfay]

I guess we should close this if it doesn't have a future?

[bmartinez287]

Do we know what inspired the current design? Was there Figma or something like it involved or not?

I might close this issue and take another angle at it. Initially, I was going to make the changes incrementally. However, that is challenging as the current design makes some assumptions.

I could start with the interior pages that need work, but we could revamp the homepage and make that carry throughout. Plus with Astro 5 released 2 days ago and tailwind4 coming in it be nice for a refresh.

thoughts? interior pages or homepage redesign?

[rfay]

@mattstein knows :)

[mattstein]

Not sure how much help it is, but I cobbled things together roughly looking at Tailwind UI and trying to approximate the previous version of the site without any radical departures. Nothing ever touched Figma because I just started noodling with it wondering what an update might look like and not originally intending to run with it.

My aim was to keep a similar, consistent column that the previous site used and I only broke out of it slightly on the homepage for a bit more rhythm and breathing room. The hero graphic/animation was meant to peek out from the side and give a whiff of what DDEV looks like in action rather than be a prominent feature, but that admittedly gets awkward with a wide viewport.

No strong feelings about what this PR is doing, I only wonder what the implications are for the rest of the site since it does conform more strictly to a single, tall column. (And also what browser dimensions are most common, which could directly inform decisions here.)

[bmartinez287]

Thanks for the feedback Matt! I can relate, "just started noodling" been there done that haha.