feat: update public booking page layout for improved responsiveness

This commit is contained in:
Jose Selesan
2026-04-24 14:50:46 -03:00
parent f1a7e6c24a
commit c63f0f2109

View File

@@ -461,8 +461,8 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
</p> </p>
</div> </div>
<div className="grid gap-3 sm:grid-cols-2"> <div className="hidden gap-3 sm:grid sm:grid-cols-2">
<div className="rounded-2xl border border-border/70 bg-background p-4"> <div className="hidden sm:block rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground"> <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
Fecha elegida Fecha elegida
</p> </p>
@@ -470,13 +470,13 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
{selectedDateLabel} {selectedDateLabel}
</p> </p>
</div> </div>
<div className="rounded-2xl border border-border/70 bg-background p-4"> <div className="hidden sm:block rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Deporte</p> <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Deporte</p>
<p className="mt-2 text-sm font-medium text-foreground"> <p className="mt-2 text-sm font-medium text-foreground">
{selectedSportLabel ?? 'Sin selección'} {selectedSportLabel ?? 'Sin selección'}
</p> </p>
</div> </div>
<div className="rounded-2xl border border-border/70 bg-background p-4"> <div className="hidden sm:block rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground"> <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
Canchas visibles Canchas visibles
</p> </p>
@@ -484,7 +484,7 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
{visibleCourts.length} disponibles {visibleCourts.length} disponibles
</p> </p>
</div> </div>
<div className="rounded-2xl border border-border/70 bg-background p-4"> <div className="hidden sm:block rounded-2xl border border-border/70 bg-background p-4">
<p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Estado</p> <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Estado</p>
<p className="mt-2 text-sm font-medium text-foreground"> <p className="mt-2 text-sm font-medium text-foreground">
{selectedSlot ? 'Turno listo para confirmar' : 'Elegí un horario'} {selectedSlot ? 'Turno listo para confirmar' : 'Elegí un horario'}