Productionize EventSphere platform

apps/web/src/components/public/PublicShell.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/Button";
+import { useEffect, useMemo, useState } from "react";
+import { apiFetch } from "@/lib/api";
+import Image from "next/image";
+
+export function PublicShell({ children }: { children: React.ReactNode }) {
+  const [branding, setBranding] = useState<{ appName: string; logoUrl: string | null } | null>(null);
+  const tenantSlug = useMemo(() => {
+    if (typeof window === "undefined") return null;
+    const u = new URL(window.location.href);
+    return u.searchParams.get("tenantSlug");
+  }, []);
+
+  useEffect(() => {
+    const run = async () => {
+      try {
+        const data = await apiFetch<{ branding: { appName: string; logoUrl: string | null } }>(
+          `/public/branding${tenantSlug ? `?tenantSlug=${encodeURIComponent(tenantSlug)}` : ""}`
+        );
+        setBranding(data.branding);
+      } catch {
+        setBranding(null);
+      }
+    };
+    void run();
+  }, [tenantSlug]);
+
+  const appName = branding?.appName ?? "EventSphere";
+  return <div className="min-h-screen bg-white">
+    <header className="mx-auto flex max-w-7xl items-center justify-between px-6 py-6">
+      <Link href="/" className="flex items-center gap-3 font-black text-ink">
+        {branding?.logoUrl ? (
+          <Image src={branding.logoUrl} alt={appName} width={40} height={40} className="h-10 w-10 rounded-xl object-cover" />
+        ) : (
+          <span className="grid h-10 w-10 place-items-center rounded-xl bg-accent text-white">E</span>
+        )}
+        {appName}
+      </Link>
+      <nav className="hidden gap-8 text-sm font-semibold text-slate-600 md:flex"><a>Platform</a><a>Events</a><a>Pricing</a><a>Contact</a></nav>
+      <Button>Start Registration</Button>
+    </header>
+    {children}
+  </div>;
+}