Improve homepage hero design

[lhsazevedo]

view this proposal live here: https://php.lhsazevedo.dev/

Intro

The PHP webpage has received some design proposals in the past [1,2]. I think they didn't get traction or support from the community because they were drastic changes and walked away from the current PHP branding style.

But we had a recent case of a successful design improvement: the PHP 8.0 (and 8.1) release page.
The new release page proposed [3] by JetBrains employees was accepted and very well received by the community [4-7].

Inspired by the new release page, and following the same design principles, I would like to propose small tweaks to the home page hero section. Note that this is not a complete redesign, the current style is respected and improved upon.

Proposal

If accepted, this PR will adjust the home page hero section design to accomplish the following objectives:

• Be friendlier to mobile devices.
• Highlight common actions with CTAs.
• Empower the PHP brand.

Some notable changes are:

• Added the PHP logo as the first element
• Added call-to-action buttons after the lead text
• Moved active versions links after the CTAs
• Centered the layout

Desktop overview

Mobile overview

At the moment. the actions are:

• Get Started: https://www.php.net/manual/en/getting-started.php
• Download: https://www.php.net/downloads.php

We can change those actions to better reflect user needs and the PHP team intentions.

Background

Back in Nov 2021, I created an issue proposing some adjustments to the design of the homepage hero section.

Preview

View this proposal live here: https://php.lhsazevedo.dev/

Desktop:

Mobile:

[1] #332
[2] https://externals.io/message/104088
[3] https://externals.io/message/112026
[4] https://externals.io/message/112026#112073
[5] #350 (comment)
[6] https://twitter.com/official_php/status/1331989622025580550
[7] https://twitter.com/official_php/status/1463949488016564230

[lhsazevedo]

I just set up a temporary mirror. Preview this proposal here: https://php.lhsazevedo.dev/

The forced push was just a rebase with master.

[kamil-tekiela]

I like this and I am in favour of it. I would even put the aside permanently at the bottom. I would also change the "upgrading" text to "migration guide"

[lhsazevedo]

I would also change the "upgrading" text to "migration guide"

Initially I intended to change this text as well, but later decided to left it out to reduce the number of changes in this patch. Should we create an issue for this?

Thanks for reviewing.

[cmb69]

Very nice improvement. Thank you!

The only concern I have is prominently linking to https://www.php.net/manual/en/getting-started.php. Especially the "simple tutorial" is in urgent need of some TLC. On the other hand, this may help to get that part improved.

So, if there are no objections, I'll merge this early next week.

[lhsazevedo]

I'm happy to hear you liked it @cmb69!

Another option for the primary action is the latest release page.
This seems to be a page visitors will be looking for, and what the team want to showcase as well.

Here's how it would look like:

We could create an issue for polishing the simple tutorial and link when it's done.

[cmb69]

Linking to the latest release page is also okayish for me, although that is not quite what I'd expect on "Get Started".

[lhsazevedo]

Oh sure, the text would also be updated to reflect the link.

The button is now "What's new in 8.1" and links to the release page. I updated the live preview (may need a force refresh), and there is a screenshot in my previous comment as well.

Looks great to me!

[lhsazevedo]

Awesome, thanks everyone!