CSS naming: disambiguate .banner from admin Banners, and audit package-* → project-* terminology

[nlhkabu]

Re: review of the project page UI work.

1. .banner vs admin Banners

The CSS block .banner (_banner.scss) is a generic large colored header container used in two places:

• Homepage — wraps .homepage-banner (title, search, browse link)
• Project pages — wraps .project-header (project name, summary, pip instructions), with status modifiers like banner--quarantined, banner--yanked, etc.

This is unrelated to the "Banners" feature managed via the admin panel, which are database objects currently rendered as .notification-bar elements (see banner-messages.html).

Proposed rename:

• .notification-bar → .banner — aligning the CSS class with the admin feature name
• .banner → .page-hero — a more descriptive name for the generic large header container, and frees up .banner for the above

2. package-snippet → project-snippet

While looking at the above, I also noticed that "package-snippet" is now inconsistent with the rest of the project:

Renaming to .project-snippet` would be consistent with the other project-* blocks already in the codebase: project-description, project-header, project-tabs, etc.

Note: we should wait until #20223 is merged before making this change.

[Mennatullah122]

Hi @nlhkabu, I opened a PR for this: #20363

It's my first open-source contribution, so I'd really appreciate a review whenever you have time (and the workflow approval so CI can run). Thanks!