Auto commit: 2026-04-06T15:51:33.668Z
This commit is contained in:
Flatlogic Bot
parent
6d57abd008
commit
3d472642cf
@ -6,10 +6,10 @@
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-primary-600">Executive snapshot</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<div>
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-950">Producto limpio. KPI claro.</h2>
|
||||
<p class="mt-2 text-sm text-gray-600">Solo decisión arriba. Lectura profunda bajo demanda.</p>
|
||||
<h2 class="text-3xl font-semibold tracking-tight text-gray-950">Comisión atribuible</h2>
|
||||
<p class="mt-2 text-sm text-gray-600">KPI principal del funnel.</p>
|
||||
</div>
|
||||
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-sm text-gray-500" title="La comisión atribuible es el KPI principal del dashboard.">ℹ️</span>
|
||||
<span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 bg-white text-sm text-gray-500" title="La comisión atribuible resume el valor económico capturado por la demo.">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
<p class="text-[11px] font-bold uppercase tracking-[0.22em] text-white/60">KPI principal</p>
|
||||
<p class="mt-3 text-4xl font-semibold tracking-tight">€{{ number_format($commission, 0) }}</p>
|
||||
<div class="mt-3 flex items-center gap-2 text-sm text-white/70">
|
||||
<span>Comisión atribuible</span>
|
||||
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-white/5 text-[11px]" title="Suma de commission_amount en bookings generados por el funnel.">ℹ️</span>
|
||||
<span>Booking atribuido</span>
|
||||
<span class="inline-flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-white/5 text-[11px]" title="Suma de commission_amount en las reservas generadas por el funnel.">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -9,26 +9,27 @@
|
||||
$secondaryOffer = $featuredOffers->skip(1)->first();
|
||||
@endphp
|
||||
<section class="hero">
|
||||
<article class="card hero-copy">
|
||||
<article class="card hero-copy hero-copy--compact">
|
||||
<div>
|
||||
<span class="eyebrow">Laravel-first demo · TAXILANZ</span>
|
||||
<h1>El taxi se convierte en el inicio de una reserva útil.</h1>
|
||||
<p>
|
||||
Esta demo cuenta una historia muy concreta: un turista pide taxi, el trayecto se confirma,
|
||||
aparecen 2–3 propuestas relevantes y una de ellas se convierte en reserva con tracking real.
|
||||
Sin marketplace. Sin catálogo infinito. Solo activación en el momento exacto.
|
||||
</p>
|
||||
<span class="eyebrow">Taxi-first product · TAXILANZ</span>
|
||||
<h1>Pide taxi. Decide una propuesta. Cierra la reserva.</h1>
|
||||
<p class="compact-lead">Solo 4 pantallas. Solo lo necesario para decidir.</p>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat"><strong>{{ $metrics['rides'] }}</strong><span>Solicitudes de taxi</span></div>
|
||||
<div class="stat"><strong>{{ $metrics['views'] }}</strong><span>Vistas de recomendación</span></div>
|
||||
<div class="stat"><strong>{{ $metrics['bookings'] }}</strong><span>Reservas cerradas</span></div>
|
||||
<div class="stat"><strong>{{ $metrics['rides'] }}</strong><span>Taxi</span></div>
|
||||
<div class="stat"><strong>{{ $metrics['views'] }}</strong><span>Espera útil</span></div>
|
||||
<div class="stat"><strong>{{ $metrics['bookings'] }}</strong><span>Reservas</span></div>
|
||||
</div>
|
||||
|
||||
<div class="inline-actions inline-actions--stack-mobile">
|
||||
<a class="btn" href="#request">Pedir taxi</a>
|
||||
<button type="button" class="btn btn-secondary" data-modal-open="home-story">ℹ️ Más info</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside class="phone-shell" aria-label="Vista previa móvil de TAXILANZ">
|
||||
<div class="phone-screen">
|
||||
<div class="phone-screen phone-screen--focused">
|
||||
<div class="phone-topbar">
|
||||
<span>{{ now()->format('H:i') }} · Lanzarote</span>
|
||||
<span class="phone-dot-group" aria-hidden="true">
|
||||
@ -38,165 +39,159 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="screen-badge">Storyboard activo</span>
|
||||
<h2 class="screen-title">4 pantallas, 1 historia</h2>
|
||||
<p class="screen-copy">La demo ahora se entiende como producto móvil real: pedir taxi, esperar, decidir una propuesta y cerrar la reserva.</p>
|
||||
<span class="screen-badge">Taxi confirmado</span>
|
||||
<h2 class="screen-title">Tu taxi llega en 8 min</h2>
|
||||
|
||||
<div class="route-card">
|
||||
<small>Punto de entrada</small>
|
||||
<small>Trayecto activo</small>
|
||||
<strong>Aeropuerto César Manrique → Puerto del Carmen</strong>
|
||||
<span>Primero movilidad. Después contexto. Y solo al final, conversión atribuible.</span>
|
||||
<span>Disponible ahora · 3 propuestas máximo</span>
|
||||
</div>
|
||||
|
||||
<div class="screen-kpis">
|
||||
<div class="screen-kpi"><strong>01</strong><span>taxi</span></div>
|
||||
<div class="screen-kpi"><strong>02</strong><span>contexto</span></div>
|
||||
<div class="screen-kpi"><strong>04</strong><span>booking</span></div>
|
||||
<div class="recommendation-focus">
|
||||
<div class="phone-action-top">
|
||||
<strong class="phone-action-title">{{ $primaryOffer?->title ?: 'Sunset Marina Table' }}</strong>
|
||||
<span>Top 1</span>
|
||||
</div>
|
||||
<div class="phone-action-meta">
|
||||
@if($primaryOffer?->price_from)
|
||||
<span>€{{ number_format((float) $primaryOffer->price_from, 0) }}</span>
|
||||
@endif
|
||||
@if($primaryOffer?->duration_minutes)
|
||||
<span>{{ $primaryOffer->duration_minutes }} min</span>
|
||||
@endif
|
||||
<span>{{ $primaryOffer?->location_label ?: 'Marina' }}</span>
|
||||
</div>
|
||||
<a class="btn" href="#request">Ver y reservar</a>
|
||||
</div>
|
||||
|
||||
<div class="phone-list">
|
||||
<div class="phone-list-item">
|
||||
<div class="phone-list-row">
|
||||
<strong>Pedir taxi</strong>
|
||||
<span>start</span>
|
||||
<strong>{{ $secondaryOffer?->title ?: 'Hotel Spa Recovery' }}</strong>
|
||||
<span>@if($secondaryOffer?->price_from)€{{ number_format((float) $secondaryOffer->price_from, 0) }}@else Ahora @endif</span>
|
||||
</div>
|
||||
<small>Necesidad inmediata</small>
|
||||
<small>{{ $secondaryOffer?->location_label ?: 'Disponible ahora' }}</small>
|
||||
</div>
|
||||
<div class="phone-list-item">
|
||||
<div class="phone-list-row">
|
||||
<strong>{{ $primaryOffer?->title ?: 'Oferta contextual' }}</strong>
|
||||
<span>next</span>
|
||||
<strong>Reserva confirmada</strong>
|
||||
<span>OK</span>
|
||||
</div>
|
||||
<small>{{ $primaryOffer?->location_label ?: 'Zona activa' }}</small>
|
||||
<small>Estado, importe y cierre</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a class="btn" href="#request">Activar demo</a>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<span class="eyebrow">4-screen mobile storyboard</span>
|
||||
<h2>La demo se lee en 20 segundos</h2>
|
||||
<dialog class="app-modal" id="home-story" aria-labelledby="home-story-title">
|
||||
<div class="app-modal-card">
|
||||
<div class="app-modal-head">
|
||||
<div>
|
||||
<p class="eyebrow">Más info</p>
|
||||
<h2 id="home-story-title">Cómo se lee la demo</h2>
|
||||
</div>
|
||||
<button type="button" class="app-modal-close" data-modal-close aria-label="Cerrar modal">Cerrar</button>
|
||||
</div>
|
||||
<p>Este bloque baja la abstracción: enseña exactamente qué ve el turista y por qué eso termina en ingreso atribuible.</p>
|
||||
|
||||
<div class="metric-strip metric-strip--2">
|
||||
<div class="metric-cell">
|
||||
<strong>1 · Taxi</strong>
|
||||
<span>Entrada simple</span>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<strong>2 · Confirmado</strong>
|
||||
<span>ETA + atención</span>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<strong>3 · Oferta</strong>
|
||||
<span>Precio y disponibilidad</span>
|
||||
</div>
|
||||
<div class="metric-cell">
|
||||
<strong>4 · Reserva</strong>
|
||||
<span>Cierre atribuible</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="accordion-list">
|
||||
<li>El turista ve primero movilidad: origen, destino y confirmación.</li>
|
||||
<li>La recomendación aparece cuando el taxi ya está confirmado.</li>
|
||||
<li>El detalle de la oferta muestra solo contexto, precio, duración y CTA.</li>
|
||||
<li>La reserva enseña estado e importe; el negocio queda bajo demanda.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-head section-head--compact">
|
||||
<div>
|
||||
<span class="eyebrow">4 pantallas</span>
|
||||
<h2>Recorrido rápido</h2>
|
||||
</div>
|
||||
<button type="button" class="icon-button" data-modal-open="home-story" data-tooltip="Ver lectura completa">ℹ️ Más info</button>
|
||||
</div>
|
||||
|
||||
<div class="storyboard-grid">
|
||||
<article class="card storyboard-card">
|
||||
<span class="eyebrow">Pantalla 1</span>
|
||||
<span class="eyebrow">1 · Taxi</span>
|
||||
<div class="storyboard-phone">
|
||||
<span class="storyboard-step">Taxi first</span>
|
||||
<span class="storyboard-step">Start</span>
|
||||
<h3 style="margin:0;">Pedir taxi</h3>
|
||||
<p class="storyboard-caption">Acción principal clarísima, pocos campos y cero fricción para entrar en el funnel.</p>
|
||||
<div class="storyboard-mini-list">
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>Aeropuerto → hotel</strong>
|
||||
<span>Origen y destino bastan para empezar.</span>
|
||||
</div>
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>Canal hotel / app</strong>
|
||||
<span>También deja señal de origen para ventas.</span>
|
||||
</div>
|
||||
<div class="offer-meta">
|
||||
<span class="pill">Origen</span>
|
||||
<span class="pill">Destino</span>
|
||||
<span class="pill">Canal</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card storyboard-card">
|
||||
<span class="eyebrow">Pantalla 2</span>
|
||||
<span class="eyebrow">2 · Confirmado</span>
|
||||
<div class="storyboard-phone">
|
||||
<span class="storyboard-step is-warm">Momento exacto</span>
|
||||
<span class="storyboard-step is-warm">ETA</span>
|
||||
<h3 style="margin:0;">Taxi confirmado</h3>
|
||||
<p class="storyboard-caption">Con ETA visible aparece la ventana de atención correcta: no catálogo, solo 2–3 decisiones útiles.</p>
|
||||
<div class="storyboard-mini-list">
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>{{ $metrics['views'] }} vistas</strong>
|
||||
<span>La pantalla ya activa interés medible.</span>
|
||||
</div>
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>{{ $metrics['clicks'] }} clics</strong>
|
||||
<span>Intención real mientras el taxi llega.</span>
|
||||
</div>
|
||||
<div class="offer-meta">
|
||||
<span class="pill">{{ $metrics['views'] }} vistas</span>
|
||||
<span class="pill">Top 3</span>
|
||||
<span class="pill">CTA</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card storyboard-card">
|
||||
<span class="eyebrow">Pantalla 3</span>
|
||||
<span class="eyebrow">3 · Oferta</span>
|
||||
<div class="storyboard-phone">
|
||||
<span class="storyboard-step">Oferta contextual</span>
|
||||
<h3 style="margin:0;">Propuesta relevante</h3>
|
||||
<p class="storyboard-caption">La mejor oferta se presenta como continuidad natural del trayecto, no como un escaparate infinito.</p>
|
||||
<div class="storyboard-mini-list">
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>{{ $primaryOffer?->title ?: 'Oferta destacada' }}</strong>
|
||||
<span>{{ $primaryOffer?->location_label ?: 'Zona activa' }} · {{ $primaryOffer?->price_from ? 'Desde €'.number_format((float) $primaryOffer->price_from, 0) : 'Ticket consultable' }}</span>
|
||||
</div>
|
||||
@if($secondaryOffer)
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>{{ $secondaryOffer->title }}</strong>
|
||||
<span>{{ $secondaryOffer->duration_minutes ? $secondaryOffer->duration_minutes.' min' : 'Plan rápido' }} · alternativa secundaria</span>
|
||||
</div>
|
||||
@endif
|
||||
<span class="storyboard-step">Decision</span>
|
||||
<h3 style="margin:0;">Detalle oferta</h3>
|
||||
<div class="offer-meta">
|
||||
<span class="pill">Precio</span>
|
||||
<span class="pill">Duración</span>
|
||||
<span class="pill">Disponibilidad</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card storyboard-card">
|
||||
<span class="eyebrow">Pantalla 4</span>
|
||||
<span class="eyebrow">4 · Reserva</span>
|
||||
<div class="storyboard-phone">
|
||||
<span class="storyboard-step is-success">Conversión</span>
|
||||
<h3 style="margin:0;">Reserva y atribución</h3>
|
||||
<p class="storyboard-caption">La historia termina con dinero visible: booking, GMV demo y comisión estimada en el panel.</p>
|
||||
<div class="storyboard-mini-list">
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>{{ $metrics['bookings'] }} reservas</strong>
|
||||
<span>{{ $metrics['ride_to_booking_rate'] }}% ride → booking</span>
|
||||
</div>
|
||||
<div class="storyboard-mini-item">
|
||||
<strong>€{{ number_format($metrics['commission'], 0) }}</strong>
|
||||
<span>Comisión estimada ya presentable en admin.</span>
|
||||
</div>
|
||||
<span class="storyboard-step is-success">Close</span>
|
||||
<h3 style="margin:0;">Reserva confirmada</h3>
|
||||
<div class="offer-meta">
|
||||
<span class="pill">Estado</span>
|
||||
<span class="pill">Importe</span>
|
||||
<span class="pill">Booking</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="proof-grid">
|
||||
<article class="card proof-card">
|
||||
<span class="eyebrow">Impacto partner</span>
|
||||
<strong class="proof-stat">{{ $metrics['ride_to_booking_rate'] }}%</strong>
|
||||
<h2>Conversión ride → booking</h2>
|
||||
<p>La demo enseña que un trayecto confirmado puede convertirse en ingreso atribuible, no solo en transporte resuelto.</p>
|
||||
</article>
|
||||
|
||||
<article class="card proof-card">
|
||||
<span class="eyebrow">Señal comercial</span>
|
||||
<strong class="proof-stat">€{{ number_format($metrics['commission'], 0) }}</strong>
|
||||
<h2>Comisión estimada trazable</h2>
|
||||
<p>Desde el panel puedes enseñar GMV demo, comisión y etapas del funnel sin depender de discurso abstracto.</p>
|
||||
</article>
|
||||
|
||||
<article class="card proof-card">
|
||||
<span class="eyebrow">Ángulo ventas</span>
|
||||
<strong class="proof-stat">{{ $metrics['clicks'] }}</strong>
|
||||
<h2>Clics con intención real</h2>
|
||||
<p>Menos catálogo, más contexto. Ese es el argumento que entienden hotel, recepción y operador local.</p>
|
||||
<a class="inline-link" href="/admin/login">Abrir panel demo</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="request" class="split">
|
||||
<article class="card form-card">
|
||||
<span class="eyebrow">1 · Solicitar taxi</span>
|
||||
<h2>Activa un trayecto demo</h2>
|
||||
<p class="muted">Usa un origen y destino realistas de Lanzarote para que el motor pueda puntuar mejor las propuestas.</p>
|
||||
<span class="eyebrow">Pedir taxi</span>
|
||||
<h2>Activa un trayecto</h2>
|
||||
<p class="compact-lead">Origen, destino y canal. Nada más.</p>
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="errors">
|
||||
@ -209,10 +204,6 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="form-note">
|
||||
Acción principal first. Cuatro campos, cero fricción y suficiente señal para contar la historia completa en móvil.
|
||||
</div>
|
||||
|
||||
<form method="post" action="{{ route('rides.store') }}" style="margin-top:18px;">
|
||||
@csrf
|
||||
<div class="grid-2">
|
||||
@ -240,46 +231,50 @@
|
||||
</label>
|
||||
</div>
|
||||
<input type="hidden" name="locale" value="es">
|
||||
<button class="btn" type="submit">Confirmar taxi y activar sugerencias</button>
|
||||
<button class="btn" type="submit">Pedir taxi</button>
|
||||
</form>
|
||||
</article>
|
||||
|
||||
<aside id="how" class="card">
|
||||
<span class="eyebrow">Qué demuestra esta demo</span>
|
||||
<h2>Flujo MVP real</h2>
|
||||
<div class="storyboard-progress">
|
||||
<div class="storyboard-progress-step is-done">
|
||||
<strong>1 · Taxi</strong>
|
||||
<span>Entrada simple que captura contexto y canal.</span>
|
||||
</div>
|
||||
<div class="storyboard-progress-step is-active">
|
||||
<strong>2 · Espera útil</strong>
|
||||
<span>La ETA abre un micro-momento de atención.</span>
|
||||
</div>
|
||||
<div class="storyboard-progress-step">
|
||||
<strong>3 · Oferta</strong>
|
||||
<span>Solo la propuesta con más probabilidad de cierre.</span>
|
||||
</div>
|
||||
<div class="storyboard-progress-step">
|
||||
<strong>4 · Booking</strong>
|
||||
<span>Conversión rastreable hasta comisión.</span>
|
||||
</div>
|
||||
<aside class="card">
|
||||
<span class="eyebrow">Vista rápida</span>
|
||||
<h2>Qué verás después</h2>
|
||||
|
||||
<div class="story-rail">
|
||||
<span class="story-chip is-done">1 · Taxi</span>
|
||||
<span class="story-chip is-active">2 · Confirmado</span>
|
||||
<span class="story-chip">3 · Oferta</span>
|
||||
<span class="story-chip">4 · Reserva</span>
|
||||
</div>
|
||||
|
||||
<details class="disclosure disclosure--soft" style="margin-top:16px;">
|
||||
<summary>
|
||||
<span>ℹ️ Más info</span>
|
||||
<span>Abrir</span>
|
||||
</summary>
|
||||
<div class="disclosure-body">
|
||||
<ul class="accordion-list">
|
||||
<li>Máximo 3 propuestas visibles en el momento de espera.</li>
|
||||
<li>Precio, duración y disponibilidad por delante.</li>
|
||||
<li>Atribución, comisión e impacto solo bajo demanda.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
@if ($featuredOffers->isNotEmpty())
|
||||
<section class="section">
|
||||
<div class="section-head">
|
||||
<div class="section-head section-head--compact">
|
||||
<div>
|
||||
<span class="eyebrow">Inventario demo</span>
|
||||
<h2>Ofertas listas para sugerir</h2>
|
||||
<span class="eyebrow">Propuestas activas</span>
|
||||
<h2>2–3 opciones máximo</h2>
|
||||
</div>
|
||||
<p>Contenido corto, accionable y relevante para un turista que ya ha pedido transporte.</p>
|
||||
<a class="inline-link" href="/admin/login">Ver dashboard</a>
|
||||
</div>
|
||||
|
||||
<div class="cards">
|
||||
<div class="cards cards--compact">
|
||||
@foreach ($featuredOffers as $offer)
|
||||
<article class="card offer-card">
|
||||
<article class="card offer-card offer-card--compact">
|
||||
<div class="offer-visual" aria-hidden="true"></div>
|
||||
<div>
|
||||
<div class="offer-meta">
|
||||
@ -290,23 +285,27 @@
|
||||
@if($offer->price_from)
|
||||
<span class="pill">Desde €{{ number_format((float) $offer->price_from, 0) }}</span>
|
||||
@endif
|
||||
@if($offer->duration_minutes)
|
||||
<span class="pill">{{ $offer->duration_minutes }} min</span>
|
||||
@endif
|
||||
</div>
|
||||
<h3 style="margin-top:14px;">{{ $offer->title }}</h3>
|
||||
<p>{{ $offer->excerpt }}</p>
|
||||
<p class="muted">Disponible ahora</p>
|
||||
</div>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<section class="section">
|
||||
<article class="card" style="display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;">
|
||||
<div>
|
||||
<span class="eyebrow">Cierre demo</span>
|
||||
<h2>Front simple para turista. Historia clara para negocio.</h2>
|
||||
<p class="muted">Cuando termines el recorrido, entra en el panel para enseñar funnel, canales y reservas sin salir de la narrativa TAXILANZ.</p>
|
||||
<span class="eyebrow">Dashboard</span>
|
||||
<h2>KPI arriba. Funnel limpio.</h2>
|
||||
<p class="muted">Rides, reservas y comisión atribuible.</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary" href="/admin/login">Ir al dashboard Filament</a>
|
||||
<a class="btn btn-secondary" href="/admin/login">Abrir dashboard</a>
|
||||
</article>
|
||||
</section>
|
||||
@endsection
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user