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/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 Smart shopping list</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 Smart shopping list?</p>
+				<button
+					onClick={() => navigate("/about")}
+					aria-label="Navigate to the about application page."
+				>
+					Learn More
+				</button>
+			</article>
+
+			<article>
+				<p>Welcome Back:</p>
+				<SignInButton />
+			</article>
+		</>
+	);
+}