Mobile booking view

apps/frontend/src/components/layout.tsx

@@ -1,3 +1,5 @@
+import { useIsMobile } from '@/hooks/use-mobile';
+import { useLocation } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
 import { Header } from './header';
 
@@ -6,11 +8,21 @@ interface LayoutProps {
 }
 
 export function Layout({ children }: LayoutProps) {
+  const isMobile = useIsMobile();
+  const location = useLocation();
+  const isMobileHome = isMobile && location.pathname === '/';
+
   return (
     <div className="relative min-h-dvh overflow-x-hidden bg-background text-foreground">
       <Background />
-      <Header />
-      <main className="relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+      {!isMobileHome && <Header />}
+      <main
+        className={
+          isMobileHome
+            ? 'relative z-10 mx-auto w-full max-w-7xl'
+            : 'relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8'
+        }
+      >
         {children}
       </main>
     </div>