Use Contextual Component pattern to yield multiple blocks in Hero

Right now the `docs-hero` component assumes that the only use-case for using it in block form is to pass in a custom logo. However, users may want to render additional content in the Hero template, such as a set of badges. It would be great to allow multiple yields similar to the following pattern:

```
{{#docs-hero as |hero|}}
{{#hero.top}}
{{/hero.top}}

{{#hero.bottom}}
{{/hero.bottom}}
{{/docs-hero}}
```

An example of how a developer might want to use this:

Xác định component docs-hero và template Hero của nó, sau đó kiểm tra cách nội dung block và trường hợp sử dụng custom-logo hiện có được xử lý. Công việc hoàn tất khi các caller có thể cung cấp nhiều block được đặt tên như hero.top và hero.bottom, đồng thời vẫn giữ nguyên hành vi block hiện tại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.