Logo Added to Page

src/app/(app)/layout.tsx

@@ -3,6 +3,8 @@
 import MobileNav from "@/lib/components/MobileNav";
 import { useDevice } from "@/lib/context/DeviceContext";
 
+import Image from "next/image";
+
 
 export default function RootLayout({
     children,
@@ -13,6 +15,14 @@ export default function RootLayout({
     const { isMobile, isSafari } = useDevice();
     return (
         <main>
+
+            <Image 
+                src="/drinkhappylogo.png"
+                alt="Hero Image"
+                width={200}
+                height={200}
+                className="mx-auto w-1/2"
+            />
             {children}
             { isMobile && isSafari ? (
                 <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">

src/app/(app)/page.tsx

@@ -3,26 +3,25 @@
 import { useDevice } from "@/lib/context/DeviceContext";
 
 function Mobile() {
-
 	const { session } = useDevice();
 
 	return (
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-			<img src="./drinkhappylogo.png" alt="Drink Happy Logo" className="row-start-1 h-10 sm:h-12 object-contain"/>
+			<img
+				src="./drinkhappylogo.png"
+				alt="Drink Happy Logo"
+				className="row-start-1 h-10 sm:h-12 object-contain"
+			/>
 			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
 				<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
 					Welcome, {session?.name || "NULL"} !!
 				</h1>
 
 				<button>
-					<a href="/auth/login?screen_hint=signup">
-						Sign up
-					</a>
+					<a href="/auth/login?screen_hint=signup">Sign up</a>
 				</button>
 				<button>
-					<a href="/auth/login?screen_hint=login">
-						Log in
-					</a>
+					<a href="/auth/login?screen_hint=login">Log in</a>
 				</button>
 			</main>
 		</div>
@@ -30,32 +29,24 @@ function Mobile() {
 }
 
 function Web() {
-
-	const {session } = useDevice();
+	const { session } = useDevice();
 	return (
-		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 		<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
 			<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
 				Welcome, {session?.name || "NULL"} !!
 			</h1>
 
 			<button>
-					<a href="/auth/login?screen_hint=signup">
-						Sign up
-					</a>
+				<a href="/auth/login?screen_hint=signup">Sign up</a>
 			</button>
 			<button>
-					<a href="/auth/login?screen_hint=login">
-						Log in
-					</a>
+				<a href="/auth/login?screen_hint=login">Log in</a>
 			</button>
 		</main>
-		</div>
 	);
 }
 
 export default function Home() {
-
 	const { isMobile, isSafari } = useDevice();
 	if (isMobile && isSafari) return Mobile();
 	else return Web();