Convert homepage hero section styles to use BEM methodology #1102

Description

The homepage hero section currently does not follow the BEM (Block Element Modifier) methodology that has been partially adopted in newer pages, such as the thanks page. The upcoming navbar and search modal will also follow BEM conventions. The hero section was initially implemented in PR #459, but now needs to be updated to align with these conventions.

Task

Update the CSS and structure of the homepage hero section to match the BEM conventions used elsewhere. Only the relevant portions of index.php and styles/home.css should be updated. Additionally, the visual tests references to the hero classes will need to be updated.

Example Conversion

Here’s an example to guide you in converting a class:

Current class:

.hero-btn-primary { ... }

Converted to BEM:

.hero__btn--primary { ... }

In this example:

• .hero is the Block, representing the main component.
• __btn is an Element, indicating a part of the block.
• --primary is a Modifier, signifying a variation of the button.

Steps

1. Clone the repository and navigate to the homepage code.
2. Refactor the CSS classes in the hero section using the BEM naming convention. Focus only on the hero-related classes.
3. Ensure the CSS in styles/home.css follows BEM principles.
4. Update the relevant visual tests where hero classes are used.
5. Test the changes to ensure the styling and visual tests remain consistent.

Resources

• BEM methodology documentation
• Existing styles for the PHP 8 release pages
• Existing styles for the thanks page
• Upcoming navbar and search modal styles

Good first issue for

• Developers interested in learning and applying CSS methodologies like BEM.
• Hacktoberfest participants looking for beginner-friendly contributions.

Feel free to ask questions if you need any help!