Refactored header, fixed mobile navigation and added background image for main section

[MiliMade]

Description

In the header, there should be an img as well an h1 instead of just an empty h1 and a background image. The text does not look exactly like the background image that was there before because the font in the background image was not a available. The word SHOP is also not curved but will be fixed in a future issue.

On the list page the list items no longer overlap the bottom navigation like it did before.

The main sections of all pages should have a background image.

Related Issue

closes #50

Acceptance Criteria

• The header should no longer be just a background image but the image and title (h1) should be responsive elements on the page.
• The mobile bottom navigation should be on top of all elements in mobile view
• The mobile bottom navigation background color and text color should match the navbar of larger screens
• The mobile navigation icons should match the name of the page.

Type of Changes

	Type
✓	✨ Enhancements

Updates

Before

After

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin km-refactor-header and check that branch out with git checkout km-refactor-header
• Sign in to view changes

[github-actions]

Visit the preview URL for this PR (updated for commit b283fb0):

https://tcl-70-smart-shopping-list--pr53-km-refactor-header-kvm07p71.web.app

_{(expires Sun, 07 Apr 2024 20:41:31 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7bb526f3a6607712c7f73ffd6c0dfff4c62b86d9}