New UI for public booking

apps/frontend/src/index.css

@@ -244,4 +244,46 @@ body,
     border: 3px solid transparent;
     background-clip: padding-box;
   }
+
+  .public-booking-light {
+    background: #eaf2f4;
+    color: #0f172a;
+  }
+
+  .public-booking-light .public-booking-frame {
+    background: radial-gradient(circle at 18% 10%, rgba(16, 185, 129, 0.18), transparent 28%),
+      radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.14), transparent 30%),
+      linear-gradient(180deg, #f8fbfc 0%, #edf5f7 52%, #e5eef2 100%);
+  }
+
+  .public-booking-light .public-booking-panel {
+    background: rgba(255, 255, 255, 0.78);
+    border-color: rgba(15, 23, 42, 0.13);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 18px 48px rgba(15, 23, 42, 0.09);
+  }
+
+  .public-booking-light [class*="border-white"] {
+    border-color: rgba(15, 23, 42, 0.13);
+  }
+
+  .public-booking-light [class*="bg-white"] {
+    background-color: rgba(15, 23, 42, 0.045);
+  }
+
+  .public-booking-light [class*="text-white"] {
+    color: rgba(15, 23, 42, 0.72);
+  }
+
+  .public-booking-light .text-emerald-400,
+  .public-booking-light .text-cyan-300 {
+    color: #059669;
+  }
+
+  .public-booking-light .bg-emerald-500 {
+    background-color: #10b981;
+  }
+
+  .public-booking-light .text-red-300 {
+    color: #dc2626;
+  }
 }

apps/frontend/src/routes/__root.tsx

@@ -3,7 +3,7 @@ import { NotFoundPage } from '@/features/not-found/not-found-page';
 import { ServerErrorPage } from '@/features/server-error/server-error-page';
 import type { ApiClient } from '@/lib/api-client';
 import type { AuthContextValue } from '@/lib/auth';
-import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
+import { Outlet, createRootRouteWithContext, useLocation } from '@tanstack/react-router';
 
 type RouterContext = {
   auth: AuthContextValue;
@@ -17,6 +17,13 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function RootRoute() {
+  const location = useLocation();
+  const isPublicBookingRoute = /^\/[^/]+\/booking(?:\/|$)/.test(location.pathname);
+
+  if (isPublicBookingRoute) {
+    return <Outlet />;
+  }
+
   return (
     <Layout>
       <div className="flex flex-col">