Logo Added to Page

This commit is contained in:
2025-04-12 15:58:37 -04:00
parent 1b270b4822
commit 3b43263af2
2 changed files with 29 additions and 28 deletions

View File

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

View File

@@ -3,26 +3,25 @@
import { useDevice } from "@/lib/context/DeviceContext"; import { useDevice } from "@/lib/context/DeviceContext";
function Mobile() { function Mobile() {
const { session } = useDevice(); const { session } = useDevice();
return ( 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)]"> <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"> <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"> <h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left">
Welcome, {session?.name || "NULL"} !! Welcome, {session?.name || "NULL"} !!
</h1> </h1>
<button> <button>
<a href="/auth/login?screen_hint=signup"> <a href="/auth/login?screen_hint=signup">Sign up</a>
Sign up
</a>
</button> </button>
<button> <button>
<a href="/auth/login?screen_hint=login"> <a href="/auth/login?screen_hint=login">Log in</a>
Log in
</a>
</button> </button>
</main> </main>
</div> </div>
@@ -30,32 +29,24 @@ function Mobile() {
} }
function Web() { function Web() {
const { session } = useDevice();
const {session } = useDevice();
return ( 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">
<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">
<h1 className="text-3xl sm:text-4xl font-bold tracking-[-.01em] text-center sm:text-left"> Welcome, {session?.name || "NULL"} !!
Welcome, {session?.name || "NULL"} !! </h1>
</h1>
<button> <button>
<a href="/auth/login?screen_hint=signup"> <a href="/auth/login?screen_hint=signup">Sign up</a>
Sign up </button>
</a> <button>
</button> <a href="/auth/login?screen_hint=login">Log in</a>
<button> </button>
<a href="/auth/login?screen_hint=login"> </main>
Log in
</a>
</button>
</main>
</div>
); );
} }
export default function Home() { export default function Home() {
const { isMobile, isSafari } = useDevice(); const { isMobile, isSafari } = useDevice();
if (isMobile && isSafari) return Mobile(); if (isMobile && isSafari) return Mobile();
else return Web(); else return Web();