Post Phase 8 - Fixes 1

Delivered:

Super Administrator — env-var provisioned, no StaffProfile at all (structural exclusion from Team/barber-picker/appointments/staff-totals, not a filter). hasPermission short-circuit + new getActingBusinessContext() helper retrofitted across 16 owner pages so it can actually manage the business.
Media Manager — one upload/library/external-URL modal + field picker, backing every image field app-wide. Local-disk storage + Docker volume, SVG rejected, size-capped.
Welcome backgrounds — desktop/mobile images with CSS breakpoint swap.
Business Branding settings — logo/cover/welcome/favicon/icon/colours all editable post-install; cover image finally rendered (was dead config).
Service descriptions — now surfaced on Home and in the booking flow.
Loyalty card — live preview, ColorPicker/MediaPicker/IconPicker, flip removed for a static premium-styled card, Loyalty added to bottom nav. Fixed a real pre-existing bug where the card's configured colour/image/icon were stored but never actually rendered.
Home Screen Redesign — hero gallery + sticky Services/Portfolio/Reviews/Details tabs, backed by a new unified gallery model/service (no hero/portfolio duplication). Details tab surfaces social links and a map that were never shown before.
Google Reviews — real sync pipeline (24h cron, CRON_SECRET-gated, mirrors the existing notification cron exactly), DB-only customer reads, owner hide/unhide + policy management page.
Architecture cleanup — SettingsPageShell extracted from 6 duplicated page wrappers; fixed a second pre-existing bug where branding image fields could never actually be cleared once set.
Verification: 418 tests passing (236 unit + 182 integration, all against a real MySQL database), full typecheck/lint clean across src, and a real Docker build+run cycle — which caught and fixed a genuine bug (scripts/ wasn't copied into the production image, so Super Admin sync would have crashed on every real deployment).

src/app/page.tsx

@@ -33,50 +33,73 @@ export default async function WelcomePage() {
   const [branding, business] = await Promise.all([getBranding(), getPrimaryBusiness()]);
   const guestBookingEnabled = business.bookingRule?.allowGuestBooking ?? false;
 
-  return (
-    <div id="main-content" className="flex min-h-screen flex-col justify-end bg-ink px-8 pb-16 text-white">
-      <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-ink">
-        {branding.logoUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL; not a build-time-known local asset for next/image.
-          <img src={branding.logoUrl} alt="" className="h-full w-full rounded-2xl object-cover" />
-        ) : (
-          <Scissors className="h-7 w-7" aria-hidden="true" />
-        )}
-      </div>
-      <h1 className="mb-4 text-5xl font-bold tracking-tight">{branding.name}</h1>
-      <p className="mb-12 max-w-xs text-lg text-white/70">
-        Book your next visit in seconds — services, staff and loyalty rewards in one place.
-      </p>
+  const hasBackground = !!(branding.welcomeBackgroundDesktopUrl || branding.welcomeBackgroundMobileUrl);
 
-      <div className="space-y-4">
-        <Button asChild variant="secondary" size="lg" className="w-full bg-white">
-          <Link href="/register">Create Account</Link>
-        </Button>
-        <Button
-          asChild
-          variant="secondary"
-          size="lg"
-          className="w-full border-2 border-white/20 bg-transparent text-white hover:bg-white/10"
-        >
-          <Link href="/sign-in">Sign In</Link>
-        </Button>
-        {guestBookingEnabled && (
+  return (
+    <div id="main-content" className="relative flex min-h-screen flex-col justify-end overflow-hidden bg-ink px-8 pb-16 text-white">
+      {/* Desktop/mobile are independent images (not one image cropped two ways) — see BrandingInfo.welcomeBackgroundDesktopUrl/MobileUrl. Falls back to the plain bg-ink above when neither is set. */}
+      {branding.welcomeBackgroundDesktopUrl && (
+        <div
+          className="absolute inset-0 hidden bg-cover bg-center md:block"
+          style={{ backgroundImage: `url(${branding.welcomeBackgroundDesktopUrl})` }}
+          aria-hidden="true"
+        />
+      )}
+      {branding.welcomeBackgroundMobileUrl && (
+        <div
+          className="absolute inset-0 block bg-cover bg-center md:hidden"
+          style={{ backgroundImage: `url(${branding.welcomeBackgroundMobileUrl})` }}
+          aria-hidden="true"
+        />
+      )}
+      {hasBackground && (
+        <div className="from-ink via-ink/60 absolute inset-0 bg-gradient-to-t to-transparent" aria-hidden="true" />
+      )}
+
+      <div className="relative z-10 flex flex-1 flex-col justify-end">
+        <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-ink">
+          {branding.logoUrl ? (
+            // eslint-disable-next-line @next/next/no-img-element -- external, business-supplied URL; not a build-time-known local asset for next/image.
+            <img src={branding.logoUrl} alt="" className="h-full w-full rounded-2xl object-cover" />
+          ) : (
+            <Scissors className="h-7 w-7" aria-hidden="true" />
+          )}
+        </div>
+        <h1 className="mb-4 text-5xl font-bold tracking-tight">{branding.name}</h1>
+        <p className="mb-12 max-w-xs text-lg text-white/70">
+          Book your next visit in seconds — services, staff and loyalty rewards in one place.
+        </p>
+
+        <div className="space-y-4">
+          <Button asChild variant="secondary" size="lg" className="w-full bg-white">
+            <Link href="/register">Create Account</Link>
+          </Button>
           <Button
             asChild
-            variant="ghost"
+            variant="secondary"
             size="lg"
-            className="w-full text-white/70 hover:bg-white/10 hover:text-white"
+            className="w-full border-2 border-white/20 bg-transparent text-white hover:bg-white/10"
           >
-            <Link href="/book">Continue as Guest</Link>
+            <Link href="/sign-in">Sign In</Link>
           </Button>
-        )}
-        <Button asChild variant="ghost" size="lg" className="w-full text-white/70 hover:bg-white/10 hover:text-white">
-          <Link href="/home">Browse Services</Link>
-        </Button>
-      </div>
+          {guestBookingEnabled && (
+            <Button
+              asChild
+              variant="ghost"
+              size="lg"
+              className="w-full text-white/70 hover:bg-white/10 hover:text-white"
+            >
+              <Link href="/book">Continue as Guest</Link>
+            </Button>
+          )}
+          <Button asChild variant="ghost" size="lg" className="w-full text-white/70 hover:bg-white/10 hover:text-white">
+            <Link href="/home">Browse Services</Link>
+          </Button>
+        </div>
 
-      <div className="mt-6">
-        <WelcomeInstallCard businessName={branding.name} />
+        <div className="mt-6">
+          <WelcomeInstallCard businessName={branding.name} />
+        </div>
       </div>
     </div>
   );