From 7d1e4a65d7dfe3254aaa739fda255496d8279720 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 15 Jul 2026 21:19:33 +0000
Subject: [PATCH] Redesign customer display idle promo as a hero layout.

Make the promo image fill the kiosk instead of a small thumbnail, with
side-by-side copy on landscape screens and a calmer type hierarchy.
---
 .../views/pos/customer-display.blade.php      | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/resources/views/pos/customer-display.blade.php b/resources/views/pos/customer-display.blade.php
index 3f0a19e..1eaccf5 100644
--- a/resources/views/pos/customer-display.blade.php
+++ b/resources/views/pos/customer-display.blade.php
@@ -51,23 +51,43 @@
         </header>
 
         <main class="relative flex flex-1 flex-col overflow-hidden">
-            {{-- IDLE / PROMO --}}
+            {{-- IDLE / PROMO — hero image when set; otherwise centered welcome --}}
             <section x-show="isPhase('idle') || isPhase('promo')" x-cloak
-                     class="flex flex-1 flex-col items-center justify-center gap-6 px-8 text-center">
-                <template x-if="state.promo?.image_url">
-                    <div class="flex items-center justify-center overflow-hidden rounded-3xl bg-white px-6 py-5 shadow-sm ring-1 ring-slate-200/80 sm:px-8 sm:py-6">
-                        <img :src="state.promo.image_url"
-                             alt=""
-                             class="h-28 w-auto max-h-40 max-w-[min(90vw,360px)] object-contain sm:h-36 sm:max-h-44 sm:max-w-[420px]">
+                     class="flex min-h-0 flex-1 flex-col overflow-hidden">
+                {{-- Promo with image: large hero + copy (side-by-side on landscape kiosks) --}}
+                <div x-show="!!state.promo?.image_url"
+                     class="flex min-h-0 flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-6 lg:flex-row lg:items-stretch lg:gap-8 lg:p-8">
+                    <div class="relative flex min-h-0 max-h-[52vh] flex-[1.35] items-center justify-center overflow-hidden rounded-[1.75rem] bg-white shadow-[0_20px_50px_-24px_rgba(15,23,42,0.28)] ring-1 ring-slate-200/90 sm:max-h-[56vh] sm:rounded-[2rem] lg:max-h-none lg:flex-1">
+                        <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-indigo-50/30"></div>
+                        <img :src="state.promo?.image_url"
+                             :alt="state.promo?.headline || state.location_name || 'Promo'"
+                             class="relative z-[1] h-full w-full object-contain object-center p-3 sm:p-5 lg:p-6">
+                    </div>
+                    <div class="flex shrink-0 flex-col justify-center gap-3.5 px-1 pb-1 text-center sm:gap-4 sm:px-2 lg:w-[min(36%,24rem)] lg:px-1 lg:pb-0 lg:text-left xl:w-[min(34%,26rem)]">
+                        <div>
+                            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-600">Welcome</p>
+                            <h1 class="mt-2 text-balance text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl lg:text-[2.25rem] lg:leading-[1.15]"
+                                x-text="state.promo?.headline || state.location_name"></h1>
+                            <p class="mx-auto mt-3 max-w-md text-pretty text-base leading-relaxed text-slate-500 lg:mx-0 lg:text-lg"
+                               x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
+                        </div>
+                        <div class="mx-auto h-px w-12 bg-slate-200/90 lg:mx-0" aria-hidden="true"></div>
+                        <p class="text-sm text-slate-400">Your order will appear here</p>
                     </div>
-                </template>
-                <div class="max-w-xl">
-                    <p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Welcome</p>
-                    <h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl"
-                        x-text="state.promo?.headline || state.location_name"></h1>
-                    <p class="mx-auto mt-4 text-lg text-slate-500" x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
                 </div>
-                <p class="text-sm text-slate-400">Your order will appear here</p>
+
+                {{-- No promo image: centered welcome --}}
+                <div x-show="!state.promo?.image_url"
+                     class="flex flex-1 flex-col items-center justify-center gap-6 px-8 text-center">
+                    <div class="max-w-xl">
+                        <p class="text-sm font-semibold uppercase tracking-wider text-indigo-600">Welcome</p>
+                        <h1 class="mt-3 text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl"
+                            x-text="state.promo?.headline || state.location_name"></h1>
+                        <p class="mx-auto mt-4 text-lg text-slate-500"
+                           x-text="state.promo?.body || 'Thank you for shopping with us.'"></p>
+                    </div>
+                    <p class="text-sm text-slate-400">Your order will appear here</p>
+                </div>
             </section>
 
             {{-- CART + payment / tip / signature --}}