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

src/App.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Routes, Route } from "react-router-dom";
 
-import { Home, Layout, List, ManageList, PageNotFound } from "./views";
+import { Home, Layout, List, ManageList, PageNotFound, About } from "./views";
 
 import { useFindUser, useShoppingListData, useShoppingLists } from "./api";
 
@@ -74,6 +74,8 @@ export function App() {
 						/>
 					</Route>
 
+					<Route path="/about" element={<About />}></Route>
+
 					{/* a catch all route for if someone tries to manually navigate to something not created yet */}
 					<Route path="*" element={<PageNotFound />} />
 				</Route>

src/components/AuthenticatedNavBar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 import { SignOutButton } from "../api";
 
-import "./AuthenticatedNavBar.css";
+import "./NavBar.css";
 
 export function AuthenticatedNavBar() {
 	return (

src/components/index.ts

@@ -4,3 +4,4 @@ export * from "./CreateList";
 export * from "./ProtectedRoute";
 export * from "./AuthenticatedNavBar";
 export * from "./forms/ShareListForm";
+export * from "./unauthenticated/UnauthenticatedNavBar";

src/components/unauthenticated/UnauthenticatedNavBar.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import "../NavBar.css";
+
+export function UnauthenticatedNavBar() {
+	return (
+		<nav className="Nav">
+			<div className="Nav-container">
+				<NavLink to="/" className="Nav-link" aria-label="Home">
+					Home
+				</NavLink>
+				<NavLink to="/about" className="Nav-link" aria-label="About">
+					About
+				</NavLink>
+			</div>
+		</nav>
+	);
+}

src/views/Home.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import "./Home.css";
 import { SingleList, CreateList } from "../components";
-import { List, User } from "../api/firebase";
+import { List, User } from "../api";
+import { NewUserHomeInfo } from "../views";
 
 interface Props {
 	data: List[];
@@ -10,26 +11,28 @@ interface Props {
 }
 
 export function Home({ data, setListPath, user }: Props) {
+	if (!user) {
+		return <NewUserHomeInfo />;
+	}
+
 	return (
-		<>
-			<div className="Home">
-				<p>
-					Hello from the home (<code>/</code>) page!
-				</p>
-				{user && (
-					<ul>
-						{data.map((list, index) => (
-							<SingleList
-								key={index}
-								name={list.name}
-								path={list.path}
-								setListPath={setListPath}
-							/>
-						))}
-						<CreateList user={user} setListPath={setListPath} />
-					</ul>
-				)}
-			</div>
-		</>
+		<div className="Home">
+			<p>
+				Hello from the home (<code>/</code>) page!
+			</p>
+			{user && (
+				<ul>
+					{data.map((list, index) => (
+						<SingleList
+							key={index}
+							name={list.name}
+							path={list.path}
+							setListPath={setListPath}
+						/>
+					))}
+					<CreateList user={user} setListPath={setListPath} />
+				</ul>
+			)}
+		</div>
 	);
 }

src/views/Layout.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
-import { SignInButton, User } from "../api";
-import { AuthenticatedNavBar } from "../components";
+import { Outlet, useNavigate } from "react-router-dom";
+import { User } from "../api";
+import { AuthenticatedNavBar, UnauthenticatedNavBar } from "../components";
 
 import "./Layout.css";
 
@@ -10,17 +10,25 @@ interface Props {
 }
 
 export function Layout({ user }: Props) {
+	const navigate = useNavigate();
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
 				</header>
 				<main className="Layout-main">
+					{user && (
+						<button
+							onClick={() => navigate("/about")}
+							aria-label="Navigate to the about application page."
+						>
+							about
+						</button>
+					)}
 					<Outlet />
-					{!user && <SignInButton />}
 				</main>
-				{user && <AuthenticatedNavBar />}
+				{user ? <AuthenticatedNavBar /> : <UnauthenticatedNavBar />}
 			</div>
 		</>
 	);

src/views/index.ts

@@ -3,3 +3,5 @@ export * from "./Home";
 export * from "./Layout";
 export * from "./authenticated/List";
 export * from "./unauthenticated/PageNotFound";
+export * from "./unauthenticated/About";
+export * from "./unauthenticated/NewUserHomeInfo";

src/views/unauthenticated/About.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+export function About() {
+	return (
+		<div>
+			<h1>ABOUT APPLICATION NAME</h1>
+			<section>
+				<h2>How works</h2>
+				<ul>
+					<li>
+						Create a list for different stores or different grouping of items.
+					</li>
+					<li>Select a list that you&apos;d like to add items on.</li>
+					<li>
+						Open the list manager, to start adding items and choosing when you
+						will need to restock next.
+					</li>
+					<li>
+						Now that your new list has items you can start checking off items as
+						you shop!
+						<ul>
+							<li>
+								Each time an item is marked purchase the application evaluates
+								your shopping habits! Supporting you by adjusting your next
+								purchase predictions base on when your previous shopping
+								history!
+							</li>
+						</ul>
+					</li>
+					<li>
+						If someone else needs to be let into to the shopping time you can
+						easily share specific lists with with in the list manager so they
+						can see and mark items as purchased too!
+					</li>
+				</ul>
+			</section>
+			<section>
+				<h2>Creators</h2>
+				<div>
+					<p>Maha Ahmed</p>
+				</div>
+				<div>
+					<p>Brianna Bland</p>
+				</div>
+				<div>
+					<p>Falak Zahra</p>
+				</div>
+				<div>
+					<p>Ross Clettenberg</p>
+				</div>
+			</section>
+			<section>
+				<h2>Thank you</h2>
+				<p>Mentors: Alex, Aditya, Tanner</p>
+				<p>The entire The Collab Lab.</p>
+			</section>
+		</div>
+	);
+}

src/views/unauthenticated/NewUserHomeInfo.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { SignInButton } from "../../api";
+
+export function NewUserHomeInfo() {
+	const navigate = useNavigate();
+
+	return (
+		<>
+			<h1>Welcome to APPLICATION NAME</h1>
+			<p>
+				The next best thing to having someone else do the shopping for you!
+				Create and manage smart lists learn your habits to let you know exactly
+				when you will need t
+			</p>
+
+			<article>
+				<p>New to APPLICATION NAME?</p>
+				<button
+					onClick={() => navigate("/about")}
+					aria-label="Navigate to the about application page."
+				>
+					Learn More
+				</button>
+			</article>
+
+			<article>
+				<p>Welcome Back:</p>
+				<SignInButton />
+			</article>
+		</>
+	);
+}