Layout Changes

Small tweaks to the layout

src/app/page.tsx

@@ -33,41 +33,50 @@ export default async function WelcomePage() {
   const [branding, business] = await Promise.all([getBranding(), getPrimaryBusiness()]);
   const guestBookingEnabled = business.bookingRule?.allowGuestBooking ?? false;
 
-  const hasBackground = !!(branding.welcomeBackgroundDesktopUrl || branding.welcomeBackgroundMobileUrl);
+  // The hero card's photo — the welcome-specific background the owner
+  // uploaded for this exact screen takes priority (it was purpose-built for
+  // it, see BrandingInfo.welcomeBackgroundMobileUrl/DesktopUrl); the
+  // general-purpose cover shot is only a fallback for a business that
+  // configured a cover image but never set a dedicated welcome background.
+  // Desktop and mobile keep their own independent images, same as before.
+  const heroImageMobileUrl = branding.welcomeBackgroundMobileUrl ?? branding.welcomeBackgroundDesktopUrl ?? branding.coverImageUrl;
+  const heroImageDesktopUrl = branding.welcomeBackgroundDesktopUrl ?? branding.welcomeBackgroundMobileUrl ?? branding.coverImageUrl;
+
+  const hasHeroImage = !!(heroImageMobileUrl || heroImageDesktopUrl);
 
   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 && (
+      {/* Full-bleed background — desktop/mobile are independent images, not one crop stretched two ways. */}
+      {heroImageMobileUrl && (
         <div
           className="absolute inset-0 block bg-cover bg-center md:hidden"
-          style={{ backgroundImage: `url(${branding.welcomeBackgroundMobileUrl})` }}
+          style={{ backgroundImage: `url(${heroImageMobileUrl})` }}
           aria-hidden="true"
         />
       )}
-      {hasBackground && (
+      {heroImageDesktopUrl && (
+        <div
+          className="absolute inset-0 hidden bg-cover bg-center md:block"
+          style={{ backgroundImage: `url(${heroImageDesktopUrl})` }}
+          aria-hidden="true"
+        />
+      )}
+      {hasHeroImage && (
         <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">
+      <div className="relative z-10 mx-auto flex w-full max-w-sm flex-1 flex-col justify-end">
+        <div className="mx-auto mb-8 flex items-center justify-center overflow-hidden 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" />
+            <img src={branding.logoUrl} alt="" className="h-48 w-48 object-cover" />
           ) : (
-            <Scissors className="h-7 w-7" aria-hidden="true" />
+            <Scissors className="h-8 w-8" 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.
+        <h1 className="mb-4 text-3xl font-bold tracking-tight">{branding.name}</h1>
+        <p className="mb-8 max-w-xs text-lg text-white/85">
+              Find, book &amp; manage your appointments with ease.
         </p>
 
         <div className="space-y-4">