feat: enhance public booking page with improved layout and date formatting

- Added new date formatting function for better user experience.
- Updated layout of the public booking page for improved responsiveness and aesthetics.
- Integrated sport selection with visual icons for better clarity.
- Enhanced error handling and loading states for availability queries.

feat: revamp select complex page for better user interaction

- Redesigned the select complex page layout for a more modern look.
- Added contextual information about complex selection.
- Improved button interactions with loading indicators and icons.

style: update CSS variables for a cohesive sports-club theme

- Adjusted color variables to reflect a sports-club identity.
- Enhanced background styles for both light and dark modes.
- Improved overall styling consistency across components.

apps/frontend/src/features/onboard/components/onboarding-check-email-step.tsx

@@ -1,7 +1,7 @@
 export function OnboardingCheckEmailStep() {
   return (
     <p className="text-sm text-muted-foreground">
-      Revisa tu correo y abre el link de verificacion para continuar.
+      Revisa tu correo y abrí el link de verificación para continuar.
     </p>
   );
 }

apps/frontend/src/features/onboard/components/onboarding-layout.tsx

@@ -7,12 +7,55 @@ type OnboardingLayoutProps = PropsWithChildren<{
 
 export function OnboardingLayout({ title, description, children }: OnboardingLayoutProps) {
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
-      <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
-        <h1 className="mb-2 text-2xl font-semibold">{title}</h1>
-        <p className="mb-4 text-sm text-muted-foreground">{description}</p>
-        {children}
-      </section>
+    <main className="min-h-screen px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
+      <div className="mx-auto grid min-h-[calc(100vh-2rem)] w-full max-w-6xl gap-6 lg:grid-cols-[0.95fr_1.05fr]">
+        <aside className="hidden overflow-hidden rounded-2xl border border-border/70 bg-card p-8 shadow-sm lg:flex lg:flex-col lg:justify-between">
+          <div className="space-y-6">
+            <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background/70 px-3 py-1 text-xs font-medium text-muted-foreground">
+              <span className="size-2 rounded-full bg-primary" />
+              Alta guiada
+            </div>
+            <div className="space-y-4">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
+                Onboarding
+              </p>
+              <h1 className="max-w-md text-4xl font-semibold tracking-tight">
+                Un alta que guía, no que interrumpe.
+              </h1>
+              <p className="max-w-md text-base leading-7 text-muted-foreground">
+                Verificá email, completá los datos y dejá el complejo listo para operar sin pasos
+                confusos ni pantallas iguales entre sí.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-3">
+            <div className="rounded-2xl border border-border/70 bg-background p-4">
+              <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 1</p>
+              <p className="mt-2 text-sm text-foreground">Ingresar nombre y correo</p>
+            </div>
+            <div className="rounded-2xl border border-border/70 bg-background p-4">
+              <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 2</p>
+              <p className="mt-2 text-sm text-foreground">Verificar email o código OTP</p>
+            </div>
+            <div className="rounded-2xl border border-border/70 bg-background p-4">
+              <p className="text-xs uppercase tracking-[0.24em] text-muted-foreground">Paso 3</p>
+              <p className="mt-2 text-sm text-foreground">Crear el complejo y empezar</p>
+            </div>
+          </div>
+        </aside>
+
+        <section className="w-full rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm sm:p-8">
+          <div className="mb-6 space-y-2">
+            <p className="text-[11px] font-semibold uppercase tracking-[0.32em] text-muted-foreground">
+              Inicio
+            </p>
+            <h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
+            <p className="max-w-lg text-sm text-muted-foreground">{description}</p>
+          </div>
+          {children}
+        </section>
+      </div>
     </main>
   );
 }

apps/frontend/src/features/onboard/components/onboarding-start-step.tsx

@@ -18,7 +18,7 @@ export function OnboardingStartStep({
   onSubmit,
 }: OnboardingStartStepProps) {
   return (
-    <form className="space-y-3" onSubmit={form.handleSubmit(onSubmit)}>
+    <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
       <Field data-invalid={Boolean(form.formState.errors.fullName)}>
         <FieldLabel htmlFor="onboard-fullname">Nombre</FieldLabel>
         <Input
@@ -51,7 +51,7 @@ export function OnboardingStartStep({
         className="w-full"
         disabled={form.formState.isSubmitting || !form.formState.isValid}
       >
-        {form.formState.isSubmitting ? 'Enviando...' : 'Enviar codigo OTP'}
+        {form.formState.isSubmitting ? 'Enviando...' : 'Enviar código OTP'}
       </Button>
     </form>
   );

apps/frontend/src/features/onboard/components/onboarding-verify-otp-step.tsx

@@ -38,13 +38,13 @@ export function OnboardingVerifyOtpStep({
   return (
     <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
       <p className="text-sm text-muted-foreground">
-        Ingresa el codigo de 6 digitos que enviamos a{' '}
+        Ingresa el código de 6 dígitos que enviamos a{' '}
         <span className="font-medium text-foreground">{email ?? 'tu email'}</span>.
       </p>
 
       <Field data-invalid={Boolean(form.formState.errors.otp)}>
         <div className="mb-2 flex items-center justify-between gap-3">
-          <FieldLabel htmlFor="onboard-otp">Codigo de verificacion</FieldLabel>
+          <FieldLabel htmlFor="onboard-otp">Código de verificación</FieldLabel>
           <Button
             type="button"
             variant="outline"
@@ -59,7 +59,7 @@ export function OnboardingVerifyOtpStep({
               ? 'Reenviando...'
               : resendCooldownSeconds > 0
                 ? `Reenviar en ${resendCooldownSeconds}s`
-                : 'Reenviar codigo'}
+                : 'Reenviar código'}
           </Button>
         </div>
 
@@ -101,7 +101,7 @@ export function OnboardingVerifyOtpStep({
         className="w-full"
         disabled={form.formState.isSubmitting || !form.formState.isValid}
       >
-        {form.formState.isSubmitting ? 'Verificando...' : 'Verificar codigo'}
+        {form.formState.isSubmitting ? 'Verificando...' : 'Verificar código'}
       </Button>
     </form>
   );