Adds Chakra UI components to the Home page

[jeremiahfallin]

Description

This code adds styling using Chakra components to the home page. Some parts of the styling are based on the viewport size (larger elements on desktop). Functionality is retained from previous version of page.

Related Issue

Closes #39

Acceptance Criteria

• List Luxe should be our title, styled using Playfair (bold)
• Create New List and Join buttons are Chakra button components stylized using Ysabeau (bold) with a Chakra divider UI component separating them
  • Both buttons should function as expected per previous issues
• The list input should be implemented using the Chakra input component and allows clearing only if there is input in the field
• The gif on the bottom should load and animate correctly after page loads
• Error messages should be displayed using chakra toast component

Type of Changes

	Type
✓	✨ New feature
✓	🔨 Refactoring
✓	🔗 Update dependencies

Updates

Before

After

Testing Steps / QA Criteria

• In your terminal, use git checkout tf-jf-about drawer to create a new branch and switch over.
• Use git pull origin tf-jf-about drawer to bring the changes from remote to local.
  • npm install may need to be used to add the feather-icons-react package.
• Clear any list token in local storage to be directed to the Home page.
• npm start to start a local instance of our app.

[github-actions]

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

https://tcl-55-smart-shopping-list--pr45-tf-jf-home-page-styl-gz1a73jp.web.app

_{(expires Sun, 04 Jun 2023 20:27:17 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 607d14028385ebfcc7c9ec69a7bb14d95ed54078}

[Yaosaur]

Looks good on mobile view, we need to do some clean up for the desktop view. Main issues is missing create a new list button and gif being too large. Other than that, everything else looks fine. Minor suggestions on heading and open item for discussion on toast message. Thanks for working on this, Ticia and Jeremiah!