Integrated AuthGuard in Discover and Shuttles, updated Business types and translations

frontend/src/components/common/AuthGuard.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { useAuthStore } from '@/stores/auth'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+interface Props {
+  title?: string
+  message?: string
+  actionLabel?: string
+  showOnGuest?: boolean // If false, the guard won't trigger (standard behavior)
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '¡Desbloquea contenido exclusivo!',
+  message: 'Regístrate para ver todos los detalles, ofertas y rutas recomendadas.',
+  actionLabel: 'Unirme ahora',
+  showOnGuest: true
+})
+
+const authStore = useAuthStore()
+const router = useRouter()
+const { t } = useI18n()
+
+function goToRegister() {
+  router.push('/register')
+}
+
+function goToLogin() {
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="auth-guard-container">
+    <!-- Slot for the actual content -->
+    <div 
+      class="content-wrapper" 
+      :class="{ 'content-blurred': !authStore.isAuthenticated && props.showOnGuest }"
+    >
+      <slot />
+    </div>
+
+    <!-- Overlay (only visible if not authenticated) -->
+    <Transition name="fade-scale">
+      <div 
+        v-if="!authStore.isAuthenticated && props.showOnGuest" 
+        class="auth-overlay"
+      >
+        <div class="auth-card glass-effect">
+          <div class="auth-icon-circle">
+            <span class="material-icons">lock</span>
+          </div>
+          
+          <h3 class="auth-title">{{ props.title }}</h3>
+          <p class="auth-message">{{ props.message }}</p>
+          
+          <div class="auth-actions">
+            <button class="primary-btn" @click="goToRegister">
+              <span class="material-icons">person_add</span>
+              {{ props.actionLabel }}
+            </button>
+            <button class="secondary-btn" @click="goToLogin">
+              {{ t('auth.loginLink') || 'Ya tengo cuenta' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.auth-guard-container {
+  position: relative;
+  width: 100%;
+}
+
+.content-wrapper {
+  transition: filter 0.5s ease, opacity 0.5s ease;
+}
+
+.content-blurred {
+  filter: blur(14px);
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.7;
+}
+
+/* ── OVERLAY ── */
+.auth-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+  padding: 1.5rem;
+  background: rgba(var(--bg-primary-rgb), 0.2);
+}
+
+.auth-card {
+  max-width: 360px;
+  width: 100%;
+  padding: 2.25rem 1.75rem;
+  border-radius: 2rem;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  animation: float 6s ease-in-out infinite;
+}
+
+.auth-icon-circle {
+  width: 64px;
+  height: 64px;
+  background: var(--active-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.5rem;
+}
+
+.auth-icon-circle .material-icons {
+  font-size: 2rem;
+  color: #101820;
+}
+
+.auth-title {
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.auth-message {
+  font-size: 0.9375rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0;
+}
+
+/* ── ACTIONS ── */
+.auth-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.primary-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 1rem;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.primary-btn:hover {
+  transform: scale(1.03);
+  box-shadow: 0 10px 20px rgba(254, 231, 21, 0.3);
+}
+
+.secondary-btn {
+  padding: 0.75rem;
+  background: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  font-weight: 700;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.secondary-btn:hover {
+  background: var(--bg-secondary);
+  border-color: var(--active-color);
+}
+
+/* ── ANIMATIONS ── */
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+  transition: all 0.4s ease;
+}
+
+.fade-scale-enter-from,
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  50%  { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+/* Dark mode utility */
+:root {
+  --bg-primary-rgb: 16, 24, 32; /* SIBU Dark primary */
+}
+</style>

frontend/src/i18n/locales/es.json

@@ -242,6 +242,7 @@
     }
   },
   "business": {
+    "aboutUs": "Sobre Nosotros",
     "detailsTitle": "Explora Nuestra Historia Para Una Cocina Refinada Y Un Ambiente Atemporal",
     "detailsDescription": "Nuestra historia es una de crecimiento, exploración y recuerdos culinarios inflamables, donde cada capítulo se sirve con elegancia.",
     "timelessHeritage": "Herencia Atemporal",
@@ -257,6 +258,7 @@
     "socialMedia": "Redes Sociales",
     "availableOffers": "Ofertas Disponibles",
     "viewBusiness": "Ver Negocio",
+    "getDirections": "Cómo llegar",
     "loadingPremium": "Cargando experiencia premium..."
   },
   "profile": {

frontend/src/services/businessService.ts

@@ -18,14 +18,14 @@ export const businessService = {
 
     /** Get all businesses */
     async getAllBusinesses(): Promise<Business[]> {
-        const { data, error } = await supabase.from('businesses').select('id, name, address, phone, image_url, social_media, category, latitude, longitude, area, updated_at')
+        const { data, error } = await supabase.from('businesses').select('id, name, address, phone, image_url, social_media, category, latitude, longitude, area, description, website, updated_at')
         if (error) throw new Error(error.message)
         return data as Business[]
     },
 
     /** Get a single business by ID */
     async getBusiness(id: string): Promise<Business> {
-        const { data, error } = await supabase.from('businesses').select('id, name, address, phone, image_url, social_media, category, latitude, longitude, area, updated_at').eq('id', id).single()
+        const { data, error } = await supabase.from('businesses').select('id, name, address, phone, image_url, social_media, category, latitude, longitude, area, description, website, updated_at').eq('id', id).single()
         if (error) throw new Error(error.message)
         return data as Business
     },

frontend/src/types/index.ts

@@ -95,6 +95,8 @@ export interface Business {
     latitude?: number | null
     longitude?: number | null
     area?: string | null
+    description?: string | null
+    website?: string | null
     updated_at?: string
 }
 

frontend/src/views/BusinessDetailsView.vue

@@ -47,6 +47,14 @@ function getImageUrl(path: string | null | undefined) {
 
 const goBack = () => router.back()
 
+function openDirections() {
+  if (business.value?.latitude && business.value?.longitude) {
+    window.open(`https://www.google.com/maps/dir/?api=1&destination=${business.value.latitude},${business.value.longitude}`, '_blank')
+  } else if (business.value?.address) {
+    window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(business.value.address + ' ' + (business.value.area || ''))}`, '_blank')
+  }
+}
+
 </script>
 
 <template>
@@ -82,8 +90,8 @@ const goBack = () => router.back()
     <!-- Details Content -->
     <div class="details-container">
       <div class="premium-story">
-        <h2 class="premium-font">{{ t('business.detailsTitle') }}</h2>
-        <p>"{{ t('business.detailsDescription') }}"</p>
+        <h2 class="premium-font">{{ business.description ? t('business.aboutUs') : t('business.detailsTitle') }}</h2>
+        <p>"{{ business.description || t('business.detailsDescription') }}"</p>
       </div>
 
       <!-- Highlights Grid (Inspired by the frame) -->
@@ -128,6 +136,10 @@ const goBack = () => router.back()
           <div class="info-text">
             <h4>{{ t('business.address') }}</h4>
             <p>{{ business.address }}</p>
+            <button v-if="business.latitude || business.address" class="track-directions-btn" @click="openDirections">
+              <span class="material-icons">directions</span>
+              {{ t('business.getDirections') || 'Cómo llegar' }}
+            </button>
           </div>
         </div>
         
@@ -139,6 +151,14 @@ const goBack = () => router.back()
           </div>
         </div>
 
+        <div v-if="business.website" class="info-card">
+          <span class="material-icons">public</span>
+          <div class="info-text">
+            <h4>Página Web</h4>
+            <a :href="business.website" target="_blank" class="website-link">{{ business.website }}</a>
+          </div>
+        </div>
+
         <div v-if="business.social_media" class="info-card">
           <span class="material-icons">language</span>
           <div class="info-text">
@@ -386,13 +406,36 @@ const goBack = () => router.back()
 
 .track-directions-btn {
   background: var(--active-color);
-  color: white;
+  color: #101820;
   border: none;
-  padding: 8px 16px;
-  border-radius: 8px;
+  padding: 10px 18px;
+  border-radius: 12px;
   font-weight: 700;
   cursor: pointer;
-  margin-top: 4px;
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.track-directions-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.3);
+  filter: brightness(1.1);
+}
+
+.website-link {
+  color: var(--active-color);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  transition: opacity 0.2s;
+}
+
+.website-link:hover {
+  opacity: 0.8;
+  text-decoration: underline;
 }
 
 /* Offers Section */

frontend/src/views/CouponsView.vue

@@ -5,6 +5,8 @@ import { useCouponStore } from '@/stores/coupon'
 import type { Coupon } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'
+import { analyticsService } from '@/services/analyticsService'
 
 const { t } = useI18n()
 const couponStore = useCouponStore()
@@ -42,7 +44,6 @@ function getImageUrl(path: string | null | undefined) {
 }
 
 
-import { analyticsService } from '@/services/analyticsService'
 
 function openCoupon(coupon: Coupon) {
   selectedCoupon.value = coupon
@@ -125,36 +126,42 @@ function getCategoryIcon(category?: string | null) {
       <p>{{ t('coupons.noResults') }}</p>
     </div>
     
-    <div v-else class="coupons-grid-new">
-      <div 
-        v-for="coupon in filteredCoupons" 
-        :key="coupon.id" 
-        v-memo="[coupon.id]"
-        class="offer-card-new"
-        @click="openCoupon(coupon)"
-      >
-        <div class="offer-image-wrapper">
-          <img :src="getImageUrl(coupon.image_url)" :alt="coupon.title" loading="lazy" decoding="async" class="offer-img">
-          <div class="status-badge" :class="{ 'tmr': coupon.title.toLowerCase().includes('mañana') || (coupon.description?.toLowerCase().includes('mañana') ?? false) }">
-            <span class="material-icons">schedule</span>
-            {{ coupon.title.toLowerCase().includes('mañana') ? t('coupons.tomorrow') : t('coupons.active') }}
+    <AuthGuard
+      v-else
+      :title="t('coupons.auth.title') || '¡Cupones exclusivos!'"
+      :message="t('coupons.auth.message') || 'Regístrate para ver todos los descuentos y promociones en restaurantes y comercios locales.'"
+    >
+      <div class="coupons-grid-new">
+        <div 
+          v-for="coupon in filteredCoupons" 
+          :key="coupon.id" 
+          v-memo="[coupon.id]"
+          class="offer-card-new"
+          @click="openCoupon(coupon)"
+        >
+          <div class="offer-image-wrapper">
+            <img :src="getImageUrl(coupon.image_url)" :alt="coupon.title" loading="lazy" decoding="async" class="offer-img">
+            <div class="status-badge" :class="{ 'tmr': coupon.title.toLowerCase().includes('mañana') || (coupon.description?.toLowerCase().includes('mañana') ?? false) }">
+              <span class="material-icons">schedule</span>
+              {{ coupon.title.toLowerCase().includes('mañana') ? t('coupons.tomorrow') : t('coupons.active') }}
+            </div>
+            <div class="favorite-button-wrapper">
+              <FavoriteButton 
+                item-type="coupon" 
+                :item-id="coupon.id" 
+                :item-name="coupon.title"
+                :item-image="coupon.image_url || undefined"
+              />
+            </div>
           </div>
-          <div class="favorite-button-wrapper">
-            <FavoriteButton 
-              item-type="coupon" 
-              :item-id="coupon.id" 
-              :item-name="coupon.title"
-              :item-image="coupon.image_url || undefined"
-            />
+          
+          <div class="offer-content">
+            <h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
+            <p class="offer-benefit">{{ coupon.title }}</p>
           </div>
         </div>
-        
-        <div class="offer-content">
-          <h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
-          <p class="offer-benefit">{{ coupon.title }}</p>
-        </div>
       </div>
-    </div>
+    </AuthGuard>
 
     <!-- Category Filter Sheet -->
     <div v-if="showFilterSheet" class="bottom-sheet-overlay" @click.self="showFilterSheet = false">

frontend/src/views/DiscoverView.vue

@@ -7,6 +7,7 @@ import { useI18n } from 'vue-i18n'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -279,82 +280,87 @@ function resetFilters() {
           </div>
         </div>
 
-        <!-- DESTACADOS -->
-        <div v-if="featuredBusinesses.length > 0" class="featured-section">
-          <p class="section-label">{{ t('discover.sections.featured') }}</p>
-          <div class="featured-grid">
-            <div
-              v-for="biz in featuredBusinesses"
-              :key="biz.id"
-              v-memo="[biz.id]"
-              class="featured-card"
-              @click="handleExplore(biz)"
-            >
-              <img 
-                :src="getImageUrl(biz.image_url, 'business')" 
-                :alt="biz.name" 
-                loading="lazy"
-                decoding="async"
-                class="featured-img" 
-                @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
-              />
-              <div class="featured-gradient"></div>
-              <div class="featured-fav">
-                <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
-              </div>
-              <div class="featured-info">
-                <span class="featured-cat">
-                  <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ catName(biz.category || '') }}
-                </span>
-                <p class="featured-name">{{ biz.name }}</p>
-                <p class="featured-area">
-                  <span class="material-icons" style="font-size:0.875rem">near_me</span>
-                  {{ biz.area }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- TODOS LOS LUGARES -->
-        <div v-if="gridBusinesses.length > 0" class="all-section">
-          <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
-          <TransitionGroup name="fade" tag="div" class="biz-grid">
-            <div
-              v-for="biz in gridBusinesses"
-              :key="biz.id"
-              v-memo="[biz.id]"
-              class="biz-card"
-              @click="handleExplore(biz)"
-            >
-              <div class="biz-img-wrap">
+        <!-- DESTACADOS USANDO AUTHGUARD -->
+        <AuthGuard 
+          :title="t('discover.auth.title') || '¡Locales exclusivos!'"
+          :message="t('discover.auth.message') || 'Regístrate para descubrir los mejores rincones de la ciudad y ofertas directas.'"
+        >
+          <div v-if="featuredBusinesses.length > 0" class="featured-section">
+            <p class="section-label">{{ t('discover.sections.featured') }}</p>
+            <div class="featured-grid">
+              <div
+                v-for="biz in featuredBusinesses"
+                :key="biz.id"
+                v-memo="[biz.id]"
+                class="featured-card"
+                @click="handleExplore(biz)"
+              >
                 <img 
                   :src="getImageUrl(biz.image_url, 'business')" 
                   :alt="biz.name" 
                   loading="lazy"
                   decoding="async"
-                  class="biz-img" 
+                  class="featured-img" 
                   @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
                 />
-                <div class="biz-fav">
+                <div class="featured-gradient"></div>
+                <div class="featured-fav">
                   <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
                 </div>
-                <span class="biz-cat-badge">
-                  <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ catName(biz.category || '') }}
-                </span>
-              </div>
-              <div class="biz-body">
-                <p class="biz-name">{{ biz.name }}</p>
-                <p class="biz-area">
-                  <span class="material-icons biz-area-icon">near_me</span>
-                  {{ biz.area }}
-                </p>
+                <div class="featured-info">
+                  <span class="featured-cat">
+                    <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
+                    {{ catName(biz.category || '') }}
+                  </span>
+                  <p class="featured-name">{{ biz.name }}</p>
+                  <p class="featured-area">
+                    <span class="material-icons" style="font-size:0.875rem">near_me</span>
+                    {{ biz.area }}
+                  </p>
+                </div>
               </div>
             </div>
-          </TransitionGroup>
-        </div>
+          </div>
+
+          <!-- TODOS LOS LUGARES -->
+          <div v-if="gridBusinesses.length > 0" class="all-section">
+            <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
+            <TransitionGroup name="fade" tag="div" class="biz-grid">
+              <div
+                v-for="biz in gridBusinesses"
+                :key="biz.id"
+                v-memo="[biz.id]"
+                class="biz-card"
+                @click="handleExplore(biz)"
+              >
+                <div class="biz-img-wrap">
+                  <img 
+                    :src="getImageUrl(biz.image_url, 'business')" 
+                    :alt="biz.name" 
+                    loading="lazy"
+                    decoding="async"
+                    class="biz-img" 
+                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
+                  />
+                  <div class="biz-fav">
+                    <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
+                  </div>
+                  <span class="biz-cat-badge">
+                    <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
+                    {{ catName(biz.category || '') }}
+                  </span>
+                </div>
+                <div class="biz-body">
+                  <p class="biz-name">{{ biz.name }}</p>
+                  <p class="biz-area">
+                    <span class="material-icons biz-area-icon">near_me</span>
+                    {{ biz.area }}
+                  </p>
+                </div>
+              </div>
+            </TransitionGroup>
+          </div>
+        </AuthGuard>
 
         <div v-if="businesses.length === 0" class="empty-state">
           <span class="material-icons empty-icon">storefront</span>

frontend/src/views/PromoterDashboard.vue

@@ -54,7 +54,9 @@ const currentBusiness = ref<Partial<Business>>({
   image_url: '',
   social_media: '',
   category: 'Restaurante',
-  area: 'Boquete'
+  area: 'Boquete',
+  description: '',
+  website: ''
 })
 
 const userName = localStorage.getItem('user_name') || 'Promotor'
@@ -175,7 +177,9 @@ function openCreateBusinessModal() {
     image_url: '',
     social_media: '',
     category: 'Restaurante',
-    area: 'Boquete'
+    area: 'Boquete',
+    description: '',
+    website: ''
   }
   showBusinessModal.value = true
   businessImageFile.value = null
@@ -208,6 +212,8 @@ async function saveBusiness() {
     formData.append('phone', currentBusiness.value.phone || '')
     formData.append('social_media', currentBusiness.value.social_media || '')
     formData.append('area', currentBusiness.value.area || 'Boquete')
+    formData.append('description', currentBusiness.value.description || '')
+    formData.append('website', currentBusiness.value.website || '')
     
     if (businessImageFile.value) {
       formData.append('image', businessImageFile.value)
@@ -726,6 +732,14 @@ async function toggleCouponStatus(coupon: Coupon) {
               </div>
             </div>
           </div>
+          <div class="form-group">
+            <label>Descripción / Historia del Negocio</label>
+            <textarea v-model="currentBusiness.description" placeholder="Cuéntanos un poco sobre el negocio para darle un toque premium..." rows="3"></textarea>
+          </div>
+          <div class="form-group">
+            <label>Página Web (Opcional)</label>
+            <input v-model="currentBusiness.website" type="url" placeholder="https://www.ejemplo.com">
+          </div>
           <div class="form-group">
             <label>Redes Sociales</label>
             <input v-model="currentBusiness.social_media" type="text" placeholder="Ej: @pizzeria_centro">

frontend/src/views/transporte/ViajesTuristicos.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useShuttleStore } from '@/stores/shuttle'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
+import AuthGuard from '@/components/common/AuthGuard.vue'
 
 const { t } = useI18n()
 const shuttleStore = useShuttleStore()
@@ -91,68 +92,74 @@ onMounted(async () => {
       </button>
     </div>
 
-    <!-- GRID PREMIUM -->
-    <div v-else class="shuttles-grid">
-      <div 
-        v-for="shuttle in filteredShuttles" 
-        :key="shuttle.id" 
-        v-memo="[shuttle.id]"
-        class="shuttle-card-premium glass-effect"
-        @click="verDetalle(shuttle.id)"
-      >
-        <div class="card-image-wrap">
-          <img 
-            :src="getImageUrl(shuttle.image_url, 'shuttle')" 
-            loading="lazy" 
-            decoding="async"
-            class="shuttle-img"
-            alt="Shuttle"
-            @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
-          />
-          <div class="company-tag" v-if="shuttle.company_name">
-            <span class="material-icons">business</span>
-            {{ shuttle.company_name }}
+    <!-- GRID PREMIUM CON AUTHGUARD -->
+    <AuthGuard
+      v-else
+      :title="t('shuttle.auth.title') || 'Viajes Exclusivos'"
+      :message="t('shuttle.auth.message') || 'Regístrate para reservar tus viajes, ver horarios detallados y tarifas de grupo.'"
+    >
+      <div class="shuttles-grid">
+        <div 
+          v-for="shuttle in filteredShuttles" 
+          :key="shuttle.id" 
+          v-memo="[shuttle.id]"
+          class="shuttle-card-premium glass-effect"
+          @click="verDetalle(shuttle.id)"
+        >
+          <div class="card-image-wrap">
+            <img 
+              :src="getImageUrl(shuttle.image_url, 'shuttle')" 
+              loading="lazy" 
+              decoding="async"
+              class="shuttle-img"
+              alt="Shuttle"
+              @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
+            />
+            <div class="company-tag" v-if="shuttle.company_name">
+              <span class="material-icons">business</span>
+              {{ shuttle.company_name }}
+            </div>
+          </div>
+
+          <div class="card-body-premium">
+            <div class="route-header">
+              <div class="route-main">
+                <span class="location-name">{{ shuttle.origin }}</span>
+                <span class="material-icons separator-icon">east</span>
+                <span class="location-name">{{ shuttle.destination }}</span>
+              </div>
+            </div>
+
+            <div class="card-meta">
+              <div class="meta-tag">
+                <span class="material-icons">directions_bus</span>
+                <span>{{ shuttle.vehicle_type }}</span>
+              </div>
+              <div class="meta-tag" v-if="shuttle.estimated_duration">
+                <span class="material-icons">schedule</span>
+                <span>{{ shuttle.estimated_duration }}</span>
+              </div>
+            </div>
+
+            <div class="card-footer-premium">
+              <div class="price-container">
+                <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
+                <span class="price-val">${{ shuttle.price_per_person }}</span>
+              </div>
+              <button class="view-details-btn">
+                <span class="material-icons">chevron_right</span>
+              </button>
+            </div>
           </div>
         </div>
 
-        <div class="card-body-premium">
-          <div class="route-header">
-            <div class="route-main">
-              <span class="location-name">{{ shuttle.origin }}</span>
-              <span class="material-icons separator-icon">east</span>
-              <span class="location-name">{{ shuttle.destination }}</span>
-            </div>
-          </div>
-
-          <div class="card-meta">
-            <div class="meta-tag">
-              <span class="material-icons">directions_bus</span>
-              <span>{{ shuttle.vehicle_type }}</span>
-            </div>
-            <div class="meta-tag" v-if="shuttle.estimated_duration">
-              <span class="material-icons">schedule</span>
-              <span>{{ shuttle.estimated_duration }}</span>
-            </div>
-          </div>
-
-          <div class="card-footer-premium">
-            <div class="price-container">
-              <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
-              <span class="price-val">${{ shuttle.price_per_person }}</span>
-            </div>
-            <button class="view-details-btn">
-              <span class="material-icons">chevron_right</span>
-            </button>
-          </div>
+        <!-- EMPTY STATE -->
+        <div v-if="filteredShuttles.length === 0" class="empty-state">
+          <span class="material-icons">directions_bus_filled</span>
+          <p>{{ t('shuttle.noShuttles') }}</p>
         </div>
       </div>
-
-      <!-- EMPTY STATE -->
-      <div v-if="filteredShuttles.length === 0" class="empty-state">
-        <span class="material-icons">directions_bus_filled</span>
-        <p>{{ t('shuttle.noShuttles') }}</p>
-      </div>
-    </div>
+    </AuthGuard>
   </div>
 </template>