Merge pull request #41 from the-collab-lab/sd-dt-landingpage

Issue #14.5: Implement LandingPage Component & Enhance Navigation UI

src/App.jsx

@@ -1,9 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-
-import { Home, Layout, List, ManageList } from './views';
-
+import { Home, Layout, List, ManageList, LandingPage } from './views';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
-
 import { useStateWithStorage } from './utils';
 
 export function App() {
@@ -47,25 +44,37 @@ export function App() {
 					<Route
 						index
 						element={
-							<Home
-								data={data}
-								lists={lists}
-								listPath={listPath}
-								setListPath={setListPath}
-								user={user}
-							/>
+							user ? (
+								<Home
+									data={data}
+									lists={lists}
+									listPath={listPath}
+									setListPath={setListPath}
+									user={user}
+								/>
+							) : (
+								<LandingPage user={user} />
+							)
 						}
 					/>
 					<Route
-						path="/list"
+						path="list"
 						element={<List data={data} listPath={listPath} />}
 					/>
 					<Route
-						path="/manage-list"
-						element={<ManageList listPath={listPath} user={user} data={data} />}
+						path="manage-list"
+						element={
+							user ? (
+								<ManageList listPath={listPath} user={user} data={data} />
+							) : (
+								<LandingPage user={user} />
+							)
+						}
 					/>
 				</Route>
 			</Routes>
 		</Router>
 	);
 }
+
+export default App;

src/api/useAuth.jsx

@@ -2,30 +2,46 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
+import { useNavigate } from 'react-router-dom';
 
 /**
  * A button that signs the user in using Google OAuth. When clicked,
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = () => (
+export const SignInButton = ({ className }) => (
 	<button
+		className={className}
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
 	>
+		<i className="fa-solid fa-right-to-bracket"></i> <br />
 		Sign In
 	</button>
 );
 
 /**
  * A button that signs the user out of the app using Firebase Auth.
  */
-export const SignOutButton = ({ className }) => (
-	<button className={className} type="button" onClick={() => auth.signOut()}>
-		<i className="fa-solid fa-right-from-bracket"></i> <br />
-		Sign Out
-	</button>
-);
+export const SignOutButton = ({ className }) => {
+	const navigate = useNavigate();
+
+	const handleSignOut = async () => {
+		try {
+			await auth.signOut();
+			navigate('/');
+		} catch (error) {
+			console.error('Error signing out: ', error);
+		}
+	};
+
+	return (
+		<button className={className} type="button" onClick={handleSignOut}>
+			<i className="fa-solid fa-right-from-bracket"></i> <br />
+			Sign Out
+		</button>
+	);
+};
 
 /**
  * A custom hook that listens for changes to the user's auth state.

src/views/LandingPage.css

@@ -0,0 +1,92 @@
+.landing-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 80vh;
+	padding: 40px;
+	margin: 0;
+	overflow: auto;
+	box-sizing: border-box;
+	background-color: #f4f6f8f1;
+	text-align: center;
+	font-family: 'Arial', sans-serif;
+}
+
+.logo {
+	width: 650px;
+	height: auto;
+	max-width: 100%;
+	margin-bottom: 20px;
+}
+
+.main-heading {
+	font-size: 2.5rem;
+	line-height: 1.4;
+	color: #333;
+	max-width: 800px;
+	margin-bottom: 15px;
+	padding: 0 10px;
+	font-weight: 400;
+}
+
+.collab-lab-link {
+	color: #007bff;
+	text-decoration: none;
+}
+
+.collab-lab-link:hover {
+	text-decoration: underline;
+}
+
+.subheading {
+	font-size: 1.8 rem;
+	color: #555;
+	margin-bottom: 20px;
+	padding: 0 10px;
+}
+
+.sign-in-button {
+	margin-top: 20px;
+}
+
+.Nav {
+	width: 100%;
+	position: fixed;
+	bottom: 0;
+	z-index: 1000;
+	display: flex;
+	justify-content: center;
+	padding: 10 15px;
+	background-color: #fff;
+	clear: both;
+}
+
+.Nav-link {
+	margin: 10px 0;
+}
+
+@media (max-width: 768px) {
+	.main-heading {
+		font-size: 1.8rem;
+	}
+
+	.subheading {
+		font-size: 1.5rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.main-heading {
+		font-size: 1.5rem;
+	}
+
+	.subheading {
+		font-size: 1.2rem;
+	}
+
+	.logo {
+		width: 100%;
+		max-width: 200px;
+	}
+}

src/views/LandingPage.jsx

@@ -0,0 +1,33 @@
+import './LandingPage.css';
+
+export function LandingPage() {
+	return (
+		<div className="landing-container">
+			<img
+				src={`${import.meta.env.BASE_URL}logo.png`}
+				alt="Logo"
+				className="logo"
+			/>
+			<h1 className="main-heading">
+				<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
+				tool that embodies the spirit of teamwork and collaboration. Created by
+				early-career developers from{' '}
+				<a
+					href="https://the-collab-lab.codes/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="collab-lab-link"
+				>
+					<strong>The Collab Lab</strong>
+				</a>
+				, it allows you to effortlessly share and work together on lists,
+				bringing people closer, even when planning something as simple as a
+				grocery run.
+			</h1>
+			<p className="subheading">
+				Ready to start your journey? Click the sign-in button below to begin
+				planning your grocery runs with CollabShop today.
+			</p>
+		</div>
+	);
+}

src/views/Layout.jsx

@@ -1,8 +1,8 @@
 import { Outlet, NavLink } from 'react-router-dom';
 import { IconButton } from '../components/IconButton';
 import './Layout.css';
+import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
-import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
 
 /**
  * TODO: The links defined in this file don't work!
@@ -14,44 +14,65 @@ import { useAuth, SignInButton, SignOutButton } from '../api/useAuth.jsx';
 
 export function Layout() {
 	const { user } = useAuth();
+
 	return (
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
 					<h1>Smart shopping list</h1>
-					{!!user ? (
+					{user && auth.currentUser ? (
 						<div>
 							<span>Signed in as {auth.currentUser.displayName}</span>
 						</div>
 					) : (
-						<SignInButton />
+						<span>Not signed in</span>
 					)}
 				</header>
 				<main className="Layout-main">
 					<Outlet />
 				</main>
 				<nav className="Nav">
 					<div className="Nav-container">
-						<IconButton
-							as={NavLink}
-							className="Nav-link"
-							icon="fa-solid fa-list"
-							label="View Lists"
-							to="/"
-						/>
-						<IconButton
-							as={NavLink}
-							className="Nav-link"
-							icon="fa-solid fa-cart-plus"
-							label="Add Item"
-							to="/manage-list"
-						/>
-						<IconButton
-							as={SignOutButton}
-							className="Nav-link"
-							icon="fa-solid fa-right-from-bracket"
-							label="Sign Out"
-						/>
+						{user && auth.currentUser ? (
+							<>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-list"
+									label="View Lists"
+									to="/" //Home Page
+								/>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-cart-plus"
+									label="Add Item"
+									to="manage-list" // Relative path to manage-list
+								/>
+								<IconButton
+									as={SignOutButton}
+									className="Nav-link"
+									icon="fa-solid fa-right-from-bracket"
+									label="Sign Out"
+								/>
+							</>
+						) : (
+							<>
+								<IconButton
+									as={NavLink}
+									className="Nav-link"
+									icon="fa-solid fa-info-circle"
+									label="Meet The Team"
+									to="/meet-the-team"
+								/>
+								<IconButton
+									as={SignInButton}
+									className="Nav-link"
+									icon="fa-solid fa-right-to-bracket"
+									label="Sign In"
+								/>
+							</>
+						)}
 					</div>
 				</nav>
 			</div>

src/views/ManageList.jsx

@@ -23,7 +23,6 @@ export function ManageList({ listPath, user, data }) {
 		() => data.map((item) => normalizeString(item.name)),
 		[data],
 	);
-
 	const handleSubmit = async (event) => {
 		event.preventDefault();
 

src/views/index.js

@@ -1,5 +1,6 @@
 export * from './ManageList';
 export * from './Home';
 export * from './Layout';
+export * from './LandingPage';
 export * from './List';
-export * from './Disclosure'; // export src/view/disclosure
+export * from './Disclosure';