A way for an new user to understand how the app functions

[bbland1]

Description

This code adds 2 main pieces at this time, an UnauthenticatedNavBar and an About page, to give an opportunity for a new user to understand what the application does before signing up. Because we are in a process of framework and design choices, I did take an approach more similar to a "how-to" section of the application. As mentioned in issue #42 I think a carousel would be really nice to have instead of just the list of "how-tos" but I think getting the style choices figured out to see if they have any components to use beforehand will allow us to better now what we want to use for that.

Related Issue

Closes #39

Acceptance Criteria

• A new user should have something that introduces them to the application and what it does on the unauthenticated homepage.
  • A greeting to the application with an explanation of what the application is and does.
• With having an unauthenticated homepage, a unauthenticated NavBar component to get to maybe a sample list would be useful.
• A new page/route that leads to a how-to/sample that will allow an unauthenticated user, a visitor, to get a general understanding of how the app works and what they can do with it.

Type of Changes

	Type
✓	💯 Enhancement
✓	✨ New Feature

Updates

Before

Screen.Recording.2024-09-25.at.2.30.47.AM.mov

After

Screen.Recording.2024-09-25.at.2.31.24.AM.mov

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin bb/app-func-new-user and check that branch out with git checkout `bb/app-func-new-user
• Then npm ci to install the newly added dependencies locally and npm start to launch the app.
• Open a second terminal to run the typescript compiler using tsc --noEmit --watch to see any type issue.
• Navigate through the application making sure all functionality still works
• You should be logged out of the application but if you are not please sign out.
• Upon signing out or when loading the page a change to the unauthenticated home page is seen.
• Using either the learn more button or the about nav link in the nav bar to navigate to the new about page.

Next TODO

With the design convo that happened at office hours it seems like we have a direction for CSS framework and the bootstrap/react-bootstrap has a carousel component in it that would be awesome to use for this so didn't want to commit to a package before doing that.

• A carousel maybe of tidbits of the funcitonality of the application. #42
  - Maybe a stretch goal maybe not but it may be nice to give two touch points of understanding the functionality of the app

[github-actions]

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

https://tcl-77-smart-shopping-list--pr41-bb-app-func-new-user-dvajljf2.web.app

_{(expires Mon, 07 Oct 2024 01:01:07 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[alex-andria]

Awesome job Brianna! Love the shout outs haha. Added my comments and excited to see how this feature may expand in the final MVP!