Merge pull request #58 from the-collab-lab/dtp-logo

Issue #20: Finalize Logo and Favicon Integration
the-collab-lab · Oct 11, 2024 · 10a3553 · 10a3553
2 parents df5ac85 + 7a231b3
commit 10a3553
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
 		/>
 		<meta name="color-scheme" content="dark light" />
 		<title>CollabShop</title>
+		<link rel="icon" href="public/favicon.ico" />
 		<script type="module" src="/src/index.jsx" async></script>
 	</head>
 	<body>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/assets/fulllogo_transparent.png b/src/assets/fulllogo_transparent.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -7,7 +7,7 @@ export function Loading() {
 				<img
 					src={logo}
 					alt="CollabShop Logo, a collaboration platform for grocery shopping."
-					className="w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 mb-4 animate-pulse"
+					className="w-64 sm:w-72 md:w-80 lg:w-96 h-auto mb-6 max-w-full rounded-lg shadow-sm transform hover:scale-105 transition-all duration-300 ease-in-out"
 				/>
 				<h2 className="text-txtPrimary text-sm sm:text-base md:text-lg font-semibold mb-2">
 					Please hold on while we prepare your experience.

diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/views/LandingPage.jsx b/src/views/LandingPage.jsx
@@ -2,16 +2,18 @@ import logo from '../assets/logo.png';
 
 export function LandingPage() {
 	return (
-		<div className="flex flex-col items-center justify-center min-h-screen bg-bgPrimary dark:bg-bgPrimaryDark p-6">
+		<div className="bg-bgPrimary dark:bg-bgPrimaryDark flex flex-col items-center justify-center min-h-screen p-6 sm:p-8 md:p-10">
 			<img
 				src={logo}
 				alt="CollabShop Logo, a collaboration platform for grocery shopping."
-				className="w-45 h-auto mb-6"
+				className="w-64 sm:w-72 md:w-80 lg:w-96 h-auto mb-6 max-w-full rounded-lg shadow-sm transform hover:scale-105 transition-all duration-300 ease-in-out"
 			/>
-			<h1 className="text-txtPrimary dark:text-txtPrimaryDark text-2xl md:text-4xl font-bold text-center mb-4">
+			<h1 className="bg-[#99D98C] text-txtPrimary dark:text-txtPrimaryDark text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-4 p-4 rounded-lg max-w-2xl">
 				<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{' '}
+				tool that embodies the spirit of teamwork and collaboration.
+			</h1>
+			<p className="bg-[#99D98C] text-txtPrimary text-base sm:text-lg md:text-xl text-center mb-4 p-4 rounded-lg max-w-2xl leading-relaxed">
+				Created by early-career developers from{' '}
 				<a
 					href="https://the-collab-lab.codes/"
 					target="_blank"
@@ -22,12 +24,15 @@ export function LandingPage() {
 				</a>
 				, our smart shopping list app learns your buying habits, reminds you of
 				what you might need for your next store run, and allows you to
-				effortlessly share and collaborate on lists. With CollabShop, planning
-				your grocery trips becomes a seamless and enjoyable experience!
-			</h1>
-			<p className="text-txtPrimary dark:text-txtPrimaryDark font-bold text-lg md:text-xl text-center mb-6">
-				Ready to start your journey? Click the sign-in button below to begin
-				planning your grocery runs with CollabShop today.
+				effortlessly share and collaborate on lists.
+			</p>
+
+			<p className="bg-[#99D98C] text-txtPrimary dark:text-txtPrimaryDark font-semibold text-base sm:text-lg md:text-xl text-center mb-6 p-4 rounded-lg max-w-xl">
+				With CollabShop, planning your grocery trips becomes a seamless and
+				enjoyable experience!
+			</p>
+			<p className="bg-[#99D98C] text-txtPrimary dark:text-txtPrimaryDark text-lg sm:text-xl md:text-2xl text-center font-bold mb-6 p-4 rounded-lg max-w-lg">
+				Ready to start your journey? Click the sign-in button below to begin.
 			</p>
 		</div>
 	);

diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
@@ -44,11 +44,16 @@ export function Layout() {
 	return (
 		<>
 			<div className="flex flex-col min-h-screen">
-				<header className="bg-bgPrimary dark:bg-bgPrimaryDark pb-2 pt-[max(env(safe-area-inset-top),1rem)] text-center">
+				<header className="bg-bgPrimary dark:bg-bgPrimaryDark pb-4 pt-[max(env(safe-area-inset-top),1rem)] text-center">
 					{!!user && (
-						<div>
-							<img src={logo} alt="Logo" className="mx-auto" />
+						<div className="flex flex-col items-center justify-center">
+							<img
+								src={logo}
+								alt="CollabShop Logo, a collaboration platform for grocery shopping."
+								className="w-64 sm:w-72 md:w-80 lg:w-96 h-auto mb-6 max-w-full rounded-lg shadow-sm transform hover:scale-105 transition-all duration-300 ease-in-out"
+							/>
 							<span className="text-txtPrimary dark:text-txtPrimaryDark">
+
 								Signed in as {auth.currentUser.displayName}
 							</span>
 						</div>