Music

src/app/(app)/layout.tsx

@@ -10,6 +10,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	const { isMobile, isSafari } = useDevice();
+
 	return (
 		<main className="max-h-screen max-w-screen bg-img overflow-hidden" suppressHydrationWarning={true}>
 			{!isMobile && !isSafari ? <NavBar /> : null}
@@ -17,9 +18,18 @@ export default function RootLayout({
 				{children}
 			</section>
 			{isMobile && isSafari ? (
-				<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
+				<>
-					<MobileNav />
+					{/* Background Music */}
-				</div>
+					<audio autoPlay loop>
+						<source src="/background_music.mp3" type="audio/mpeg" />
+						Your browser does not support the audio element.
+					</audio>
+
+					{/* Mobile Navigation */}
+					<div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-300">
+						<MobileNav />
+					</div>
+				</>
 			) : null}
 		</main>
 	);