Style home page and make it responsive

[EmmaBin]

Description

Use Tailwind CSS to create a scrollable card that contains all shopping lists. Each shopping list should have the name aligned to the left, with the delete button and share button aligned to the right. At the bottom, the text input, voice icon, and submit button are properly aligned. On smaller phone screens, these elements should stack vertically.

Related Issue

closes #44

Acceptance Criteria

• Once user is logged in, they can see the list of their Shopping Lists
• User can create a New List
• changing "Enter List Name:" to something more intuitive, such as "Create a new list:" or "Create New List:".

Type of Changes

Use one or more labels to help your team understand the nature of the change(s) you’re proposing. E.g., bug fix or enhancement are common ones.
enhancement

Updates

Before

After

Testing Steps / QA Criteria

1. Go to the home page and create enough shopping lists to overflow the card.
2. Scroll through the card to view the hidden shopping lists.
3. The "Create a new list" option should remain visible on the homepage.
4. Go to Inspect, and click on the tab icon to check if the home page is responsive on different screen sizes.

[github-actions]

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

https://tcl-76-smart-shopping-list--pr56-eb-style-homepage-is-vcmct1jy.web.app

_{(expires Sun, 13 Oct 2024 05:23:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

[arandel1]

Looks great!!! Good job!

[sar-mko]

I really like it, its super organized. Nice job!