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/complex/complex-settings-page.tsx

@@ -43,19 +43,39 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
   ];
 
   return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
-      <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
-        <h2 className="text-2xl font-semibold">
-          <Settings className="mb-1 mr-2 inline size-6" />
-          Configuración del complejo
-        </h2>
-        <p className="mt-2 text-sm text-muted-foreground">
-          {complexQuery.data?.complexName ?? 'Configura los datos de tu complejo'}
-        </p>
+    <div className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
+      <section className="overflow-hidden rounded-2xl border border-border/70 bg-card p-6 text-card-foreground shadow-sm sm:p-8">
+        <div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+          <div className="space-y-3">
+            <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-background px-3 py-1 text-xs font-medium text-muted-foreground">
+              <span className="size-2 rounded-full bg-primary" />
+              Administración del complejo
+            </div>
+            <h2 className="text-3xl font-semibold tracking-tight">
+              <Settings className="mb-1 mr-2 inline size-6" />
+              Configuración del complejo
+            </h2>
+            <p className="max-w-2xl text-sm text-muted-foreground">
+              {complexQuery.data?.complexName ??
+                'Configurá los datos del complejo, las canchas y los usuarios.'}
+            </p>
+          </div>
+
+          {currentMembership?.role && (
+            <div className="inline-flex items-center gap-2 rounded-2xl border border-border/70 bg-background px-4 py-3 text-sm">
+              <span className="text-xs uppercase tracking-[0.24em] text-muted-foreground">
+                Tu rol
+              </span>
+              <span className="rounded-full border border-border/70 bg-card px-2.5 py-1 text-xs font-medium text-foreground">
+                {currentMembership.role}
+              </span>
+            </div>
+          )}
+        </div>
       </section>
 
-      <div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
-        <nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
+      <div className="mt-6 grid gap-6 lg:grid-cols-[220px_1fr]">
+        <nav className="flex flex-row gap-2 overflow-x-auto rounded-2xl border border-border/70 bg-card p-2 shadow-sm lg:flex-col lg:overflow-visible">
           {tabs.map((tab) => {
             const Icon = tab.icon;
             const isActive = activeTab === tab.id;
@@ -64,9 +84,9 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
                 key={tab.id}
                 type="button"
                 onClick={() => setActiveTab(tab.id)}
-                className={`inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors lg:w-full lg:justify-start ${
+                className={`inline-flex items-center gap-2 rounded-2xl px-3 py-3 text-sm font-medium transition-all lg:w-full lg:justify-start ${
                   isActive
-                    ? 'bg-muted text-foreground'
+                    ? 'bg-primary text-primary-foreground shadow-sm'
                     : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                 }`}
               >
@@ -77,7 +97,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
           })}
         </nav>
 
-        <div className="min-w-0">
+        <div className="min-w-0 rounded-2xl border border-border/70 bg-card p-4 shadow-sm sm:p-6">
           {activeTab === 'details' && (
             <ComplexDetailsSection
               complex={complexQuery.data ?? null}