From f411986b2836f29362418391576fc09d366450ee Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 00:20:49 -0500
Subject: [PATCH] Redesign SIBU offers with background images, unified exit
 buttons, and simplified UI

---
 frontend/src/views/MapView.vue | 135 ++++++++++++---------------------
 1 file changed, 49 insertions(+), 86 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 99d8a75..9c7935a 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -602,15 +602,12 @@ async function highlightOptimalStopForRoute() {
           <div class="map-floating-controls">
             <!-- Botón de Ofertas (FAB Simple) -->
             <button
-              v-if="isLoaded"
+              v-if="isLoaded && !showPromos"
               class="offers-fab pulse"
-              :class="{ 'active': showPromos }"
-              @click="showPromos = !showPromos"
+              @click="showPromos = true"
             >
-              <span class="material-icons">
-                {{ showPromos ? 'close' : 'local_offer' }}
-              </span>
-              <span v-if="couponStore.coupons.length > 0 && !showPromos" class="offers-badge">
+              <span class="material-icons">local_offer</span>
+              <span v-if="couponStore.coupons.length > 0" class="offers-badge">
                 {{ couponStore.coupons.length }}
               </span>
             </button>
@@ -738,7 +735,7 @@ async function highlightOptimalStopForRoute() {
           <div class="sheet-header">
             <div class="sheet-title-group">
               <span class="material-icons sheet-star">stars</span>
-              <span class="sheet-title">Ofertas SIBU</span>
+              <span class="sheet-title">Ofertas</span>
             </div>
             <button class="sheet-close" @click="showPromos = false">
               <span class="material-icons">close</span>
@@ -756,23 +753,20 @@ async function highlightOptimalStopForRoute() {
                 v-if="currentPromo"
                 :key="currentPromo.id"
                 class="sheet-card"
+                :style="{ backgroundImage: `url(${getImageUrl(currentPromo.image_url, 'coupon')})` }"
                 @mouseenter="stopCarousel"
                 @touchstart="stopCarousel"
                 @mouseleave="startCarousel"
               >
-                <div class="sheet-img-wrap">
-                  <img 
-                    :src="getImageUrl(currentPromo.image_url, 'coupon')" 
-                    class="sheet-img" 
-                    @error="handleImageError"
-                  />
-                  <span v-if="currentPromo.discount_percentage" class="sheet-discount">-{{ currentPromo.discount_percentage }}%</span>
-                </div>
-
-                <div class="sheet-info">
-                  <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
-                  <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
-                  <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
+                <div class="sheet-card-overlay">
+                  <div class="sheet-info">
+                    <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
+                    <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
+                    <div class="sheet-actions">
+                      <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
+                      <span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </Transition>
@@ -931,11 +925,6 @@ async function highlightOptimalStopForRoute() {
   z-index: 1001;
 }
 
-.offers-fab.active {
-  background: #f44336;
-  color: #fff;
-}
-
 .offers-badge {
   position: absolute;
   top: -5px;
@@ -1065,90 +1054,62 @@ async function highlightOptimalStopForRoute() {
 
 .sheet-card {
   flex: 1;
-  display: flex;
-  gap: 0.75rem;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.sheet-img-wrap {
+  height: 180px;
+  border-radius: 20px;
+  background-size: cover;
+  background-position: center;
   position: relative;
-  flex-shrink: 0;
-  width: 80px;
-  height: 80px;
-  border-radius: 16px;
   overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+  display: flex;
 }
 
-.sheet-img {
+.sheet-card-overlay {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-}
-
-.sheet-discount {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #f43f5e;
-  color: #ffffff;
-  font-size: 0.65rem;
-  font-weight: 900;
-  padding: 0.2rem 0.5rem;
-  border-bottom-right-radius: 12px;
-  line-height: 1;
+  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1.25rem;
 }
 
 .sheet-info {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  gap: 0.25rem;
 }
 
 .sheet-biz-name {
-  margin: 0;
-  font-size: 0.65rem;
+  font-size: 0.75rem;
   font-weight: 800;
-  color: var(--text-secondary);
+  color: #fee715;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  opacity: 0.8;
 }
 
 .sheet-promo-title {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: 1.1rem;
   font-weight: 900;
-  color: var(--text-primary);
-  line-height: 1.1;
+  color: #fff;
+  line-height: 1.2;
+  margin-bottom: 0.5rem;
 }
 
-.sheet-promo-desc {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-  line-height: 1.35;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
+.sheet-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .sheet-cta {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.4rem;
-  padding: 0.35rem 0.75rem;
-  background: #101820;
-  color: #fee715;
+  padding: 0.5rem 1rem;
+  background: #fee715;
+  color: #101820;
   border: none;
   border-radius: 12px;
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   font-weight: 800;
   cursor: pointer;
   transition: transform 0.2s;
@@ -1156,11 +1117,13 @@ async function highlightOptimalStopForRoute() {
 
 .sheet-cta:active { transform: scale(0.95); }
 
-@media (prefers-color-scheme: dark) {
-  .sheet-cta {
-    background: #fee715;
-    color: #101820;
-  }
+.sheet-discount-tag {
+  background: #f43f5e;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 900;
+  padding: 0.25rem 0.6rem;
+  border-radius: 8px;
 }
 
 /* Dots */