Merge pull request #88 from the-collab-lab/am-update-landing-page

the-collab-lab · Apr 6, 2024 · 6a29da7 · 6a29da7
2 parents f0d3651 + 536ac54
commit 6a29da7
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -12,8 +12,8 @@
 		/>
 		<link rel="icon" type="image/svg+xml" href="/src/favicon.ico" />
 		<link
+			href="https://fonts.googleapis.com/css2?family=Righteous&display=swap"
 			rel="stylesheet"
-			href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
 		/>
 		<link
 			href="https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap"

diff --git a/public/img/checkbox.png b/public/img/checkbox.png
diff --git a/public/img/home-welcome-image.svg b/public/img/home-welcome-image.svg
diff --git a/src/api/useAuth.css b/src/api/useAuth.css
@@ -0,0 +1,7 @@
+.large-size {
+	margin: auto;
+	font-size: 35px;
+	height: 80px;
+	width: 270px;
+	margin-bottom: 70px;
+}
diff --git a/src/api/useAuth.jsx b/src/api/useAuth.jsx
@@ -2,16 +2,18 @@ import { useEffect, useState } from 'react';
 import { auth } from './config.js';
 import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';
 import { addUserToDatabase } from './firebase.js';
+import './useAuth.css';
 
 /**
  * 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 = ({ largeSize }) => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
+		className={largeSize ? 'large-size' : ''}
 	>
 		Sign In
 	</button>
@@ -31,8 +33,12 @@ async function handleSignOut() {
 	}
 }
 
-export const SignOutButton = () => (
-	<button type="button" onClick={() => handleSignOut()}>
+export const SignOutButton = ({ largeSize }) => (
+	<button
+		type="button"
+		onClick={() => handleSignOut()}
+		className={largeSize ? 'large-size' : ''}
+	>
 		Sign Out
 	</button>
 );

diff --git a/src/index.css b/src/index.css
@@ -126,6 +126,11 @@ h1 {
 	font-family: 'Righteous', sans-serif;
 }
 
+h2,
+h3 {
+	font-family: 'Reddit Mono', monospace;
+}
+
 h5,
 p {
 	margin: 0;

diff --git a/src/views/About.css b/src/views/About.css
@@ -29,6 +29,11 @@
 	font-size: 1.5rem;
 }
 
+.About-credits {
+	text-align: center;
+	margin-left: 250px;
+}
+
 @media only screen and (max-width: 900px) {
 	.About-main {
 		max-width: 600px;
@@ -38,4 +43,8 @@
 		flex-direction: column;
 		text-align: center;
 	}
+
+	.About-credits {
+		margin-left: 0;
+	}
 }
diff --git a/src/views/About.jsx b/src/views/About.jsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import { Emoji } from '../components';
 import './About.css';
 
@@ -61,6 +62,17 @@ export function About() {
 						</p>
 					</div>
 				</section>
+				<section className="About-section">
+					<div className="About-section-text">
+						<div className="About-credits">
+							<h2>Credits</h2>
+							<p>
+								Home page illustration by{' '}
+								<Link to="https://storyset.com/web">Storyset</Link>
+							</p>
+						</div>
+					</div>
+				</section>
 			</main>
 		</>
 	);

diff --git a/src/views/Home.css b/src/views/Home.css
@@ -28,12 +28,39 @@
 	margin: 0;
 }
 
-.intro-text {
+.Home-app-name {
+	color: #5a23b3;
+	font-size: 45px;
+	text-shadow: 1px 0.5px 0 white;
+}
+
+.Home-intro-text {
+	display: flex;
+	justify-content: center;
 	width: 400px;
 	margin: auto;
-	padding-bottom: 20px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.Home-welcome-to {
+	font-size: 30px;
+	margin: auto;
+	margin-top: 30px;
+	margin-bottom: 10px;
+}
+
+.Home-register-here {
+	margin-top: 40px;
+}
+
+.Home-button {
+	font-size: 35px;
+	margin: auto;
+	height: 80px;
+	width: 270px;
 }
 
-img.Landing-check {
-	height: 200px;
+img.Home-welcome {
+	height: 400px;
 }
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
@@ -9,32 +9,38 @@ export function Home() {
 		<>
 			<div className="Home">
 				<header className="Home-header">
-					<h2>Welcome to Aisle Be There!</h2>
-					<h3 className="intro-text">
+					<h2 className="Home-welcome-to">welcome to</h2>
+					<h1 className="Home-app-name">Aisle Be There!</h1>
+					<h3 className="Home-intro-text">
 						The app for making smart shopping lists. Create lists to manage any
-						type of shopping, and mark items by how soon you'll need them again.
+						type of shopping and mark items by how soon you'll need them again.
 					</h3>
 					<img
-						className="Landing-check"
-						src="img/checkbox.png"
-						alt="black checkbox with green check"
+						className="Home-welcome"
+						src="img/home-welcome-image.svg"
+						alt="two people standing in front of a large list with a floating hand checking an item off"
 					/>
-					<h3>
-						New to the app? Click <Link to="/about">here</Link> to learn more!
-					</h3>
 					{!!user ? (
 						<div>
-							<span>Welcome back {auth.currentUser.displayName}!</span> (
-							<SignOutButton />)
+							<h2>Welcome back</h2>
+							<h2>{auth.currentUser.displayName}!</h2>
+							<br />
+							<Link to="/list">
+								<button className="Home-button">View Lists</button>
+							</Link>
+							<br />
+							<br />
 							<br />
-							<span>
-								View your lists <Link to="/list">here</Link>
-							</span>
+							<SignOutButton largeSize />
 						</div>
 					) : (
 						<div>
-							<span>Click 'Sign In' to register and get started: </span>
-							<SignInButton />
+							<h3>New to the app?</h3>
+							<Link to="/about">
+								<button className="Home-button">Learn More</button>
+							</Link>
+							<h3 className="Home-register-here">Register here:</h3>
+							<SignInButton largeSize />
 						</div>
 					)}
 				</header>