fix: improve package manager selector UX

Is your feature request related to a problem? Please describe.

The current package manager selector opens as a dropdown over the hero section.

This can overlap the surrounding content and makes the selector feel disconnected from the command it controls. It also requires an additional interaction for users to see the available package managers.

Describe the solution you'd like to see

Replace the current dropdown with an inline package manager selector within the command component.

The selector should clearly show npm, pnpm, yarn, and bun, with the currently selected package manager highlighted. Selecting an option should update the command accordingly.

This would keep the selector visually connected to the command and prevent it from overlapping the hero content.

Describe alternate solutions

An alternative would be to keep the existing dropdown but improve its positioning and styling so that it does not overlap the hero content.

The dropdown could also be positioned dynamically based on the available space.

Additional information

No response