Rename the Hero component to Card and refactor component structure

### Context

We currently use the `Hero` component which renders a white box with a drop shadow.

This component is used on the following pages:

- Homepage
- About

e.g. ) `Hero` on the about page


The `Hero` component defines styles for the `div` container. It also manages the spacing for the header and body content within it, and accepts `header` and `children` props.

### Problem or idea

We want to make the following changes to `Hero`:
- Remove the `header` prop
- Allow parent components to manage the spacing of content for more flexibility
- Rename `Hero` to `Card` to better align with its intended use

### Solution or next step

- Rename `Hero` to `Card`
- Remove the `header` prop and any related styling from the component
- Update the parent components (i.e., homepage, about) to reflect these changes