Add examples of hero sections

[bartaz]

Done

Add examples of new brochure site hero sections

Fixes WD-5139

TODO

• surus are needed to complete hero exampels
• responsive 25-75 row needed
• bordered rows and columns needed (descoped for now due to spacing issues)

QA

• Open demo
• Review new hero section examples:
  • https://vanilla-framework-4843.demos.haus/docs/examples/brochure/hero-25-75
  • https://vanilla-framework-4843.demos.haus/docs/examples/brochure/hero-50-50
  • https://vanilla-framework-4843.demos.haus/docs/examples/brochure/hero-75-offset
• Review updated documentation:
  • https://vanilla-framework-4843.demos.haus/docs/layouts/brochure#section-examples

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-4843.demos.haus

[juanruitina]

One comment. The H2 in every hero should be a p element styled as an H2 instead, it is not a heading semantically but rather a subtitle. If we wanna go the extra mile, it seems the best way to convey a subtitle right now is having it as a paragraph next to a heading and wrap it all in an hgroup tag, but don't know how feasible that is given the layouts. There's some extra info on the HTML living standard, and in this article (sorry, went down the rabbit hole).

And a request: in the documentation itself, can you add an id for every specific example so I can link directly to them? That would be useful when handing off designs on Figma, where we can now add a documentation link not only per component, but also per component variant.

So great to see these patterns documented, nice work.

[ClementChaumel]

Fantastic 👍️