feat: redesign public reservation flow pages

feat: add editorial homepage and show list layout
feat: add frontend layout foundation
2026-05-05 16:38:53 +02:00 · 2026-05-05 16:16:46 +02:00 · 2026-05-05 15:50:05 +02:00 · 2026-05-05 13:58:01 +02:00 · 2026-05-05 12:51:07 +02:00 · 2026-05-05 12:46:16 +02:00
18 changed files with 998 additions and 433 deletions
@@ -74,6 +74,17 @@ class CheckInServiceTests(TestCase):
        with self.assertRaises(InvalidToken):
            preview_check_in_token(raw_token, staff_user=self.staff_user)

+    def test_preview_rejects_expired_check_in_token(self):
+        reservation = self.create_reservation()
+        _, raw_token = ReservationToken.create_token(
+            reservation=reservation,
+            purpose=ReservationToken.Purpose.CHECK_IN,
+            expires_at=timezone.now() - timedelta(minutes=1),
+        )
+
+        with self.assertRaises(InvalidToken):
+            preview_check_in_token(raw_token, staff_user=self.staff_user)
+
    def test_check_in_succeeds_for_confirmed_reservation(self):
        reservation = self.create_reservation()
        _, raw_token = self.create_check_in_token(reservation)
@@ -158,6 +169,14 @@ class CheckInServiceTests(TestCase):
        with self.assertRaises(InvalidToken):
            confirm_check_in_from_token(raw_token, staff_user=self.staff_user)

+    def test_check_in_rejects_used_check_in_token(self):
+        reservation = self.create_reservation()
+        token, raw_token = self.create_check_in_token(reservation)
+        token.mark_used()
+
+        with self.assertRaises(InvalidToken):
+            confirm_check_in_from_token(raw_token, staff_user=self.staff_user)
+
    def create_reservation(self, **overrides):
        data = {
            "performance": self.performance,
@@ -21,6 +21,11 @@
              {
                "glob": "**/*",
                "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
              }
            ],
            "styles": [
@@ -1,8 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
  selector: 'app-root',
@@ -11,106 +9,198 @@ import { MatToolbarModule } from '@angular/material/toolbar';
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
-    MatToolbarModule,
    MatButtonModule,
-    MatIconModule,
  ],
  template: `
    <div class="app-shell">
-      <mat-toolbar class="app-toolbar">
-        <a class="brand" routerLink="/">
-          <span class="brand-mark">A</span>
-          <span class="brand-text">
-            <strong>AzioneLab</strong>
-            <small>Theatre and reservations</small>
-          </span>
-        </a>
+      <header class="site-header">
+        <div class="header-inner">
+          <a class="brand" routerLink="/" aria-label="AzioneLab">
+            <img class="brand-logo" src="assets/azionelab-logo.png" alt="AzioneLab" />
+          </a>

-        <nav class="main-nav">
-          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
-          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
-          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
-        </nav>
-      </mat-toolbar>
+          <nav class="main-nav" aria-label="Primary navigation">
+            <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Inizio</a>
+            <a mat-button routerLink="/shows" routerLinkActive="active">Spettacoli</a>
+            <a mat-button routerLink="/check-in" routerLinkActive="active">Accoglienza</a>
+          </nav>
+        </div>
+      </header>

      <main class="page-shell">
        <router-outlet></router-outlet>
      </main>
+
+      <footer class="site-footer">
+        <div class="footer-inner">
+          <div class="footer-copy-block">
+            <p class="footer-title">AzioneLab</p>
+            <p class="footer-copy">Laboratori teatrali & produzioni audio/visive</p>
+            <p class="footer-meta">Direzione artistica: Ernesto Estatico</p>
+          </div>
+          <nav class="footer-nav" aria-label="Footer navigation">
+            <a routerLink="/">Inizio</a>
+            <a routerLink="/shows">Spettacoli</a>
+            <a routerLink="/check-in">Accoglienza</a>
+          </nav>
+        </div>
+      </footer>
    </div>
  `,
  styles: [`
    .app-shell {
      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
    }

-    .app-toolbar {
+    .topline-inner,
+    .header-inner,
+    .footer-inner {
+      width: min(100%, var(--azionelab-shell-width));
+      margin: 0 auto;
+    }
+
+    .site-header {
      position: sticky;
      top: 0;
-      z-index: 10;
+      z-index: 20;
+      background: var(--azionelab-surface);
+      border-bottom: 1px solid var(--azionelab-border);
+    }
+
+    .header-inner {
      display: flex;
      justify-content: space-between;
-      gap: 16px;
+      align-items: center;
+      gap: 20px;
      min-height: 72px;
      padding: 0 24px;
-      background: rgba(251, 247, 242, 0.88);
-      backdrop-filter: blur(18px);
-      border-bottom: 1px solid var(--azionelab-border);
    }

    .brand {
      display: inline-flex;
      align-items: center;
-      gap: 12px;
+      justify-content: flex-start;
+      flex: 0 0 auto;
+      background: transparent;
+      box-shadow: none;
+      filter: none;
+      opacity: 1;
+      mix-blend-mode: normal;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
      color: inherit;
      text-decoration: none;
    }

-    .brand-mark {
-      display: inline-grid;
-      place-items: center;
-      width: 42px;
-      height: 42px;
-      border-radius: 10px;
-      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
-      color: white;
-      font-weight: 700;
-    }
-
-    .brand-text {
-      display: flex;
-      flex-direction: column;
-      line-height: 1.1;
-    }
-
-    .brand-text small {
-      color: var(--azionelab-muted);
-      font-size: 0.74rem;
+    .brand-logo {
+      width: 164px;
+      height: auto;
+      max-height: 44px;
+      display: block;
+      background: transparent;
+      box-shadow: none;
+      filter: none;
+      opacity: 1;
+      mix-blend-mode: normal;
+      mask: none;
+      -webkit-mask: none;
    }

    .main-nav {
      display: flex;
      align-items: center;
+      justify-content: flex-end;
      gap: 4px;
      flex-wrap: wrap;
    }

    .main-nav .active {
-      background: rgba(159, 47, 40, 0.08);
+      color: var(--azionelab-accent-strong);
    }

    .page-shell {
-      padding: 32px 20px 56px;
+      flex: 1;
+      padding: 40px 0 88px;
+    }
+
+    .site-footer {
+      border-top: 1px solid var(--azionelab-border);
+      background: var(--azionelab-bg-strong);
+    }
+
+    .footer-inner {
+      display: grid;
+      grid-template-columns: minmax(0, 1.5fr) auto;
+      gap: 20px;
+      align-items: start;
+      padding: 32px 24px 36px;
+    }
+
+    .footer-title {
+      margin: 0 0 8px;
+      font-family: var(--azionelab-serif);
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--azionelab-ink);
+    }
+
+    .footer-copy {
+      margin: 0 0 6px;
+      max-width: 52ch;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .footer-meta {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .footer-nav {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 14px;
+      justify-content: flex-end;
+    }
+
+    .footer-nav a {
+      color: var(--azionelab-ink-soft);
+      text-decoration: none;
    }

    @media (max-width: 800px) {
-      .app-toolbar {
-        align-items: flex-start;
+      .header-inner {
        flex-direction: column;
-        padding: 16px 16px 14px;
+        align-items: flex-start;
+        min-height: auto;
+        padding: 14px 16px;
+        gap: 14px;
      }

      .main-nav {
        width: 100%;
+        justify-content: flex-start;
+      }
+
+      .brand {
+        justify-content: flex-start;
+      }
+
+      .brand-logo {
+        width: 150px;
+        max-height: 40px;
+      }
+
+      .footer-inner {
+        grid-template-columns: 1fr;
+        padding: 28px 16px 32px;
+      }
+
+      .footer-nav {
+        justify-content: flex-start;
      }
    }
  `],
@@ -9,10 +9,10 @@ import { ShowListPageComponent } from './pages/show-list-page.component';

 export const appRoutes: Routes = [
  { path: '', component: HomePageComponent, title: 'AzioneLab' },
-  { path: 'shows', component: ShowListPageComponent, title: 'Shows | AzioneLab' },
-  { path: 'shows/:slug', component: ShowDetailPlaceholderPageComponent, title: 'Show detail | AzioneLab' },
-  { path: 'performances/:id/book', component: BookingPlaceholderPageComponent, title: 'Book | AzioneLab' },
-  { path: 'reservations/confirm', component: ReservationConfirmPageComponent, title: 'Confirm reservation | AzioneLab' },
+  { path: 'shows', component: ShowListPageComponent, title: 'Spettacoli | AzioneLab' },
+  { path: 'shows/:slug', component: ShowDetailPlaceholderPageComponent, title: 'Scheda spettacolo | AzioneLab' },
+  { path: 'performances/:id/book', component: BookingPlaceholderPageComponent, title: 'Prenotazione | AzioneLab' },
+  { path: 'reservations/confirm', component: ReservationConfirmPageComponent, title: 'Conferma prenotazione | AzioneLab' },
  { path: 'check-in', component: CheckInPlaceholderPageComponent, title: 'Check-in | AzioneLab' },
  { path: '**', redirectTo: '' },
 ];
@@ -28,27 +28,28 @@ type ApiValidationErrors = Record<string, string[]>;
  ],
  template: `
    <section class="page">
-      <header class="page-header">
-        <p class="eyebrow">Booking</p>
-        <h1>Reserve seats</h1>
-        <p class="supporting">
-          Performance {{ performanceId }}. Complete the form and we will email a confirmation link before any reservation becomes active.
-        </p>
-      </header>
+      <div class="booking-shell">
+        <header class="page-header">
+          <p class="eyebrow">Prenotazione</p>
+          <h1>Prenota il tuo posto</h1>
+          <p class="supporting">
+            Compila il modulo con i dati essenziali. Ti invieremo un'email per confermare la richiesta e completare la prenotazione con serenita'.
+          </p>
+        </header>

-      <mat-card class="content-card">
-        <mat-card-content>
+        <mat-card class="content-card">
+          <mat-card-content>
          @if (isSuccess()) {
            <div class="status-panel success" aria-live="polite">
              <div class="status-icon">
                <mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon>
              </div>
              <div>
-                <h2>Reservation created</h2>
-                <p>Check your email to confirm the booking and unlock the QR code for admission.</p>
+                <h2>Controlla la tua email</h2>
+                <p>Ti abbiamo appena inviato il link per confermare la prenotazione. Apri il messaggio, completa l'ultimo passaggio e tieni pronto il QR code che riceverai dopo la conferma.</p>
                <div class="status-steps">
-                  <span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Open the confirmation email</span>
-                  <span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Confirm your reservation</span>
+                  <span><mat-icon fontSet="material-symbols-outlined">mail</mat-icon> Apri l'email che ti abbiamo inviato</span>
+                  <span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Conferma i posti con un tocco</span>
                </div>
              </div>
            </div>
@@ -56,16 +57,16 @@ type ApiValidationErrors = Record<string, string[]>;
            <form [formGroup]="bookingForm" (ngSubmit)="submit()" novalidate>
              <div class="intro-note">
                <mat-icon fontSet="material-symbols-outlined">info</mat-icon>
-                <p>We only ask for the essentials. Your seats are held only after email confirmation.</p>
+                <p>Ti chiediamo solo il necessario. La conferma via email ci aiuta a tenere la disponibilita' chiara per tutti.</p>
              </div>

              <div class="form-grid">
                <mat-form-field appearance="outline">
                  <mat-icon matPrefix fontSet="material-symbols-outlined">person</mat-icon>
-                  <mat-label>Name</mat-label>
+                  <mat-label>Nome</mat-label>
                  <input matInput type="text" formControlName="name" autocomplete="name" />
                  @if (bookingForm.controls.name.touched && bookingForm.controls.name.hasError('required')) {
-                    <mat-error>Name is required.</mat-error>
+                    <mat-error>Il nome e' obbligatorio.</mat-error>
                  }
                </mat-form-field>

@@ -73,25 +74,25 @@ type ApiValidationErrors = Record<string, string[]>;
                  <mat-icon matPrefix fontSet="material-symbols-outlined">mail</mat-icon>
                  <mat-label>Email</mat-label>
                  <input matInput type="email" formControlName="email" autocomplete="email" />
-                  <mat-hint>We will send the confirmation link here.</mat-hint>
+                  <mat-hint>Qui arrivera' il link per confermare la tua richiesta.</mat-hint>
                  @if (bookingForm.controls.email.touched && bookingForm.controls.email.hasError('required')) {
-                    <mat-error>Email is required.</mat-error>
+                    <mat-error>L'email e' obbligatoria.</mat-error>
                  }
                  @if (bookingForm.controls.email.touched && bookingForm.controls.email.hasError('email')) {
-                    <mat-error>Enter a valid email address.</mat-error>
+                    <mat-error>Inserisci un indirizzo email valido.</mat-error>
                  }
                </mat-form-field>

                <mat-form-field appearance="outline">
                  <mat-icon matPrefix fontSet="material-symbols-outlined">group</mat-icon>
-                  <mat-label>Number of seats</mat-label>
+                  <mat-label>Numero di posti</mat-label>
                  <input matInput type="number" min="1" step="1" formControlName="partySize" />
-                  <mat-hint>Enter the total number of guests in your party.</mat-hint>
+                  <mat-hint>Indica quante persone desideri includere nella prenotazione.</mat-hint>
                  @if (bookingForm.controls.partySize.touched && bookingForm.controls.partySize.hasError('required')) {
-                    <mat-error>Number of seats is required.</mat-error>
+                    <mat-error>Il numero di posti e' obbligatorio.</mat-error>
                  }
                  @if (bookingForm.controls.partySize.touched && bookingForm.controls.partySize.hasError('min')) {
-                    <mat-error>At least 1 seat is required.</mat-error>
+                    <mat-error>Devi richiedere almeno 1 posto.</mat-error>
                  }
                </mat-form-field>
              </div>
@@ -107,7 +108,7 @@ type ApiValidationErrors = Record<string, string[]>;
                <div class="message-panel error field-errors" aria-live="assertive">
                  <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
                  <div>
-                    <p class="message-title">Please check the highlighted details:</p>
+                    <p class="message-title">Controlla i dati evidenziati:</p>
                  @for (message of fieldErrors(); track message) {
                    <p>{{ message }}</p>
                  }
@@ -119,62 +120,54 @@ type ApiValidationErrors = Record<string, string[]>;
                <button mat-flat-button type="submit" [disabled]="isSubmitting()">
                  @if (isSubmitting()) {
                    <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
-                    <span>Submitting...</span>
+                    <span>Invio in corso...</span>
                  } @else {
                    <ng-container>
                      <mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon>
-                      <span>Reserve</span>
+                      <span>Conferma prenotazione</span>
                    </ng-container>
                  }
                </button>
-                <a mat-button routerLink="/shows">Back to shows</a>
+                <a mat-button routerLink="/shows">Torna agli spettacoli</a>
              </div>
            </form>
          }
-        </mat-card-content>
-      </mat-card>
+          </mat-card-content>
+        </mat-card>
+      </div>
    </section>
  `,
  styles: [`
-    .page {
-      max-width: 760px;
+    .booking-shell {
+      width: min(100%, 480px);
      margin: 0 auto;
    }

    .page-header {
-      margin-bottom: 24px;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
+      margin: 0 0 28px;
+      text-align: center;
    }

    h1 {
      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      font-size: 3rem;
    }

    .supporting {
-      color: var(--azionelab-muted);
-      line-height: 1.6;
-      max-width: 56ch;
-      margin: 14px 0 0;
+      margin: 16px auto 0;
+      max-width: 42ch;
    }

    .content-card {
-      border-radius: 20px;
+      border-radius: var(--azionelab-radius-lg);
      border: 1px solid var(--azionelab-border);
-      background: var(--azionelab-surface-strong);
+      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
      overflow: hidden;
    }

    mat-card-content {
-      padding: 28px !important;
+      padding: 32px !important;
    }

    .intro-note {
@@ -241,14 +234,15 @@ type ApiValidationErrors = Record<string, string[]>;

    .actions {
      display: flex;
-      align-items: center;
+      align-items: stretch;
+      justify-content: center;
      gap: 12px;
-      margin-top: 18px;
+      margin-top: 22px;
      flex-wrap: wrap;
    }

    .actions button[mat-flat-button] {
-      min-width: 130px;
+      min-width: 220px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
@@ -257,9 +251,11 @@ type ApiValidationErrors = Record<string, string[]>;

    .status-panel {
      display: flex;
-      align-items: flex-start;
-      gap: 16px;
-      padding: 4px 0;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 18px;
+      padding: 6px 0;
    }

    .status-panel h2 {
@@ -273,7 +269,7 @@ type ApiValidationErrors = Record<string, string[]>;
    }

    .status-panel.success {
-      padding: 22px;
+      padding: 26px 22px;
      border-radius: 18px;
      background: var(--azionelab-success-bg);
      border: 1px solid var(--azionelab-success-border);
@@ -294,6 +290,7 @@ type ApiValidationErrors = Record<string, string[]>;

    .status-steps {
      display: flex;
+      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
@@ -317,6 +314,10 @@ type ApiValidationErrors = Record<string, string[]>;
    }

    @media (max-width: 640px) {
+      h1 {
+        font-size: 2.3rem;
+      }
+
      mat-card-content {
        padding: 22px !important;
      }
@@ -379,15 +380,30 @@ export class BookingPlaceholderPageComponent {
            this.fieldErrors.set(this.flattenValidationErrors(error.error as ApiValidationErrors));
            return;
          }
-          this.submitError.set('Could not create reservation. Please try again.');
+          this.submitError.set('Non siamo riusciti a inviare la richiesta in questo momento. Riprova tra poco.');
        },
      });
  }

  private flattenValidationErrors(errors: ApiValidationErrors): string[] {
    return Object.entries(errors).flatMap(([field, messages]) => {
-      const label = field === 'party_size' ? 'number of seats' : field;
-      return messages.map((message) => `${label}: ${message}`);
+      const labelMap: Record<string, string> = {
+        name: 'nome',
+        email: 'email',
+        party_size: 'numero di posti',
+      };
+      const label = labelMap[field] ?? field;
+      return messages.map((message) => `${label}: ${this.translateValidationMessage(message)}`);
    });
  }
+
+  private translateValidationMessage(message: string): string {
+    const translations: Record<string, string> = {
+      'This field is required.': 'questo campo e\' obbligatorio.',
+      'Enter a valid email address.': 'inserisci un indirizzo email valido.',
+      'Ensure this value is greater than or equal to 1.': 'inserisci un valore maggiore o uguale a 1.',
+    };
+
+    return translations[message] ?? message;
+  }
 }
@@ -63,22 +63,35 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
  template: `
    <section class="page">
      <header class="page-header">
-        <p class="eyebrow">Staff check-in</p>
-        <h1>Token validation</h1>
-        <p class="supporting">Enter a token manually or scan a QR code to preview admission data and confirm entrance.</p>
+        <p class="eyebrow">Accoglienza staff</p>
+        <h1>Controllo accessi</h1>
+        <p class="supporting">Usa questa pagina per verificare rapidamente il QR code o il token della prenotazione e registrare l'ingresso senza incertezze.</p>
      </header>

-      <mat-card class="content-card">
-        <mat-card-content>
+      <div class="checkin-grid">
+        <mat-card class="side-card">
+          <mat-card-content>
+            <p class="side-label">Ingresso sala</p>
+            <h2>Uno strumento pensato per accogliere bene, anche nei momenti piu' intensi.</h2>
+            <ul class="side-list">
+              <li>Inquadra il QR code se la fotocamera del dispositivo e' disponibile.</li>
+              <li>Inserisci il token a mano se la scansione non e' praticabile.</li>
+              <li>Conferma l'ingresso solo quando i dati a schermo corrispondono alla prenotazione del pubblico.</li>
+            </ul>
+          </mat-card-content>
+        </mat-card>
+
+        <mat-card class="content-card">
+          <mat-card-content>
          <section class="scanner-panel">
            <div class="scanner-copy">
-              <h2>Camera scan</h2>
-              <p>Optional on supported browsers. If the QR contains a full check-in URL, the token is extracted automatically.</p>
+              <h2>Scansione con fotocamera</h2>
+              <p>Nei browser compatibili il token viene letto automaticamente dal QR code, anche quando contiene l'intero link di check-in.</p>
            </div>

            <div class="actions scanner-actions">
              @if (cameraState() === 'active') {
-                <button mat-stroked-button type="button" (click)="stopScanner()">Stop camera</button>
+                <button mat-stroked-button type="button" (click)="stopScanner()">Ferma fotocamera</button>
              } @else {
                <button
                  mat-stroked-button
@@ -88,9 +101,9 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
                >
                  @if (cameraState() === 'starting') {
                    <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
-                    <span>Starting camera...</span>
+                    <span>Avvio fotocamera...</span>
                  } @else {
-                    <span>Use camera</span>
+                    <span>Usa fotocamera</span>
                  }
                </button>
              }
@@ -110,10 +123,10 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc

          <form [formGroup]="tokenForm" (ngSubmit)="preview()" novalidate>
            <mat-form-field appearance="outline" class="full-width">
-              <mat-label>Opaque token</mat-label>
+              <mat-label>Token opaco</mat-label>
              <input matInput formControlName="token" autocomplete="off" />
              @if (tokenForm.controls.token.touched && tokenForm.controls.token.hasError('required')) {
-                <mat-error>Token is required.</mat-error>
+                <mat-error>Il token e' obbligatorio.</mat-error>
              }
            </mat-form-field>

@@ -121,34 +134,34 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
              <button mat-flat-button type="submit" [disabled]="isBusy()">
                @if (state() === 'preview_loading') {
                  <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
-                  <span>Validating...</span>
+                  <span>Verifica in corso...</span>
                } @else {
-                  <span>Preview check-in</span>
+                  <span>Controlla prenotazione</span>
                }
              </button>
-              <a mat-button routerLink="/">Home</a>
-              <a mat-button routerLink="/shows">Shows</a>
+              <a mat-button routerLink="/">Inizio</a>
+              <a mat-button routerLink="/shows">Spettacoli</a>
            </div>
          </form>

          @if (previewData() && shouldShowPreview()) {
            <section class="preview-panel" aria-live="polite">
-              <h2>Admission preview</h2>
+              <h2>Dati per l'ingresso</h2>
              <dl>
-                <div><dt>Show</dt><dd>{{ previewData()!.show_title }}</dd></div>
-                <div><dt>Venue</dt><dd>{{ previewData()!.venue_name }}</dd></div>
-                <div><dt>Starts at</dt><dd>{{ previewData()!.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd></div>
-                <div><dt>Party size</dt><dd>{{ previewData()!.party_size }}</dd></div>
-                <div><dt>Reservation</dt><dd>#{{ previewData()!.reservation_id }}</dd></div>
+                <div><dt>Spettacolo</dt><dd>{{ previewData()!.show_title }}</dd></div>
+                <div><dt>Spazio</dt><dd>{{ previewData()!.venue_name }}</dd></div>
+                <div><dt>Inizio</dt><dd>{{ previewData()!.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd></div>
+                <div><dt>Posti</dt><dd>{{ previewData()!.party_size }}</dd></div>
+                <div><dt>Prenotazione</dt><dd>#{{ previewData()!.reservation_id }}</dd></div>
              </dl>
              <button mat-flat-button type="button" (click)="confirm()" [disabled]="isBusy() || state() === 'confirm_success'">
                @if (state() === 'confirm_loading') {
                  <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
-                  <span>Confirming...</span>
+                  <span>Registrazione in corso...</span>
                } @else if (state() === 'confirm_success') {
-                  <span>Checked in</span>
+                  <span>Ingresso registrato</span>
                } @else {
-                  <span>Confirm check-in</span>
+                  <span>Registra ingresso</span>
                }
              </button>
            </section>
@@ -156,65 +169,81 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc

          @if (state() === 'confirm_success' && confirmData()) {
            <p class="success-message" aria-live="polite">
-              Check-in confirmed at {{ confirmData()!.checked_in_at | date: 'HH:mm' }}.
+              Ingresso registrato alle {{ confirmData()!.checked_in_at | date: 'HH:mm' }}.
            </p>
          }

          @if (state() === 'invalid_token') {
-            <p class="error-message" aria-live="assertive">Invalid token.</p>
+            <p class="error-message" aria-live="assertive">Il token inserito non e' valido.</p>
          }
          @if (state() === 'pending_reservation') {
-            <p class="error-message" aria-live="assertive">Reservation is still pending confirmation.</p>
+            <p class="error-message" aria-live="assertive">La prenotazione non e' ancora stata confermata dal pubblico.</p>
          }
          @if (state() === 'already_checked_in') {
-            <p class="error-message" aria-live="assertive">This reservation is already checked in.</p>
+            <p class="error-message" aria-live="assertive">Questa prenotazione risulta gia' registrata in ingresso.</p>
          }
          @if (state() === 'unauthorized') {
-            <p class="error-message" aria-live="assertive">You are not authorized. Staff login is required.</p>
+            <p class="error-message" aria-live="assertive">Non sei autorizzato. Accedi a <code>/admin</code> con un account staff, lascia ricaricare la pagina con quella sessione e poi riprova.</p>
          }
          @if (state() === 'error') {
-            <p class="error-message" aria-live="assertive">Something went wrong. Please try again.</p>
+            <p class="error-message" aria-live="assertive">Non siamo riusciti a completare la verifica. Riprova tra poco.</p>
          }
-        </mat-card-content>
-      </mat-card>
+          </mat-card-content>
+        </mat-card>
+      </div>
    </section>
  `,
  styles: [`
-    .page {
-      max-width: 760px;
-      margin: 0 auto;
-    }
-
    .page-header {
-      margin-bottom: 22px;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      margin-bottom: 24px;
    }

    .supporting {
-      color: var(--azionelab-muted);
-      line-height: 1.6;
      max-width: 50ch;
    }

+    .checkin-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
+      gap: 20px;
+      align-items: start;
+    }
+
+    .side-card,
    .content-card {
-      border-radius: 8px;
+      border-radius: var(--azionelab-radius-lg);
      border: 1px solid var(--azionelab-border);
-      background: var(--azionelab-surface);
+      background: var(--azionelab-surface-strong);
      box-shadow: var(--azionelab-shadow);
    }

+    .side-card {
+      background:
+        linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
+    }
+
+    .side-label {
+      margin: 0 0 10px;
+      font-size: 0.78rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--azionelab-accent);
+    }
+
+    .side-card h2 {
+      margin: 0;
+    }
+
+    .side-list {
+      display: grid;
+      gap: 12px;
+      margin: 18px 0 0;
+      padding-left: 18px;
+      color: var(--azionelab-ink-soft);
+      line-height: 1.6;
+    }
+
    .scanner-panel {
      display: grid;
      gap: 14px;
@@ -320,6 +349,12 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
      color: #b3261e;
      font-weight: 500;
    }
+
+    @media (max-width: 760px) {
+      .checkin-grid {
+        grid-template-columns: 1fr;
+      }
+    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -353,8 +388,8 @@ export class CheckInPlaceholderPageComponent {
  protected readonly cameraState = signal<CameraState>(this.scannerSupported ? 'ready' : 'unsupported');
  protected readonly cameraMessage = signal(
    this.scannerSupported
-      ? 'Open the camera to scan a QR code, or keep using manual token entry.'
-      : 'Camera scanning is not available in this browser. Manual token entry still works.',
+      ? 'Apri la fotocamera per scansionare un QR code, oppure continua con l\'inserimento manuale del token.'
+      : 'La scansione con fotocamera non e\' disponibile in questo browser. Puoi comunque inserire il token manualmente.',
  );

  constructor() {
@@ -417,13 +452,13 @@ export class CheckInPlaceholderPageComponent {
  protected async startScanner(): Promise<void> {
    if (!this.scannerSupported || !this.barcodeDetectorCtor) {
      this.cameraState.set('unsupported');
-      this.cameraMessage.set('Camera scanning is not available in this browser. Manual token entry still works.');
+      this.cameraMessage.set('La scansione con fotocamera non e\' disponibile in questo browser. Puoi comunque inserire il token manualmente.');
      return;
    }

    this.stopScanner();
    this.cameraState.set('starting');
-    this.cameraMessage.set('Starting camera...');
+    this.cameraMessage.set('Avvio della fotocamera in corso...');

    try {
      this.scannerStream = await navigator.mediaDevices.getUserMedia({
@@ -433,19 +468,19 @@ export class CheckInPlaceholderPageComponent {

      this.detector = new this.barcodeDetectorCtor({ formats: ['qr_code'] });
      this.cameraState.set('active');
-      this.cameraMessage.set('Point the camera at the visitor QR code.');
+      this.cameraMessage.set('Inquadra il QR code del visitatore.');
      this.scheduleScan();
    } catch (error) {
      this.stopScanner();

      if (error instanceof DOMException && (error.name === 'NotAllowedError' || error.name === 'SecurityError')) {
        this.cameraState.set('denied');
-        this.cameraMessage.set('Camera access was denied. You can continue with manual token entry.');
+        this.cameraMessage.set('L\'accesso alla fotocamera e\' stato negato. Puoi continuare con l\'inserimento manuale del token.');
        return;
      }

      this.cameraState.set('error');
-      this.cameraMessage.set('Could not start the camera. You can continue with manual token entry.');
+      this.cameraMessage.set('Non siamo riusciti ad avviare la fotocamera. Puoi continuare con l\'inserimento manuale del token.');
    }
  }

@@ -472,7 +507,7 @@ export class CheckInPlaceholderPageComponent {

    if (this.scannerSupported && this.cameraState() === 'active') {
      this.cameraState.set('ready');
-      this.cameraMessage.set('Camera stopped. You can scan again or continue with manual token entry.');
+      this.cameraMessage.set('Fotocamera fermata. Puoi riavviare la scansione oppure continuare con l\'inserimento manuale del token.');
    }
  }

@@ -524,7 +559,7 @@ export class CheckInPlaceholderPageComponent {
    const context = canvas.getContext('2d');
    if (!context) {
      this.cameraState.set('error');
-      this.cameraMessage.set('Camera scan is not available right now. Please enter the token manually.');
+      this.cameraMessage.set('La scansione non e\' disponibile in questo momento. Inserisci il token manualmente.');
      this.stopScanner();
      return;
    }
@@ -543,14 +578,14 @@ export class CheckInPlaceholderPageComponent {
      if (token) {
        this.tokenForm.controls.token.setValue(token);
        this.tokenForm.controls.token.markAsTouched();
-        this.cameraMessage.set('QR captured. Validating token...');
+        this.cameraMessage.set('QR acquisito. Verifica del token in corso...');
        this.stopScanner();
        this.preview();
        return;
      }
    } catch {
      this.cameraState.set('error');
-      this.cameraMessage.set('Camera scan failed. Please enter the token manually.');
+      this.cameraMessage.set('La scansione non e\' andata a buon fine. Inserisci il token manualmente.');
      this.stopScanner();
      return;
    } finally {
@@ -1,113 +1,231 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';

-import { API_BASE_URL } from '../services/api-config.token';
-
@Component({
  standalone: true,
  imports: [RouterLink, MatButtonModule, MatCardModule],
  template: `
    <section class="hero">
-      <div class="hero-copy">
-        <p class="eyebrow">AzioneLab Theatre Company</p>
-        <h1>Public website and booking UI foundations.</h1>
-        <p class="supporting">
-          This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
-        </p>
-        <div class="hero-actions">
-          <a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
-          <a mat-stroked-button routerLink="/check-in">Check-in area</a>
+      <div class="hero-inner page">
+        <div class="hero-copy">
+          <p class="hero-kicker">AZIONELAB</p>
+          <h1>Laboratori teatrali & produzioni audio/visive</h1>
+          <p class="hero-direction">Direzione artistica a cura di Ernesto Estatico</p>
+          <p class="supporting">
+            Un luogo di ricerca, presenza e relazione, dove il teatro incontra la formazione e la scena si apre al pubblico con un ritmo piu' umano, piu' vicino, piu' vivo.
+          </p>
+          <div class="hero-actions">
+            <a mat-flat-button color="primary" routerLink="/shows">Scopri gli spettacoli</a>
+          </div>
+        </div>
+
+        <div class="hero-aside" aria-hidden="true">
+          <p>Programmazioni, laboratori e attraversamenti scenici pensati per spazi raccolti e sguardi attenti.</p>
+          <span>AzioneLab abita il tempo dell'incontro prima ancora di quello della prenotazione.</span>
        </div>
      </div>
+    </section>

-      <div class="hero-panel">
-        <mat-card>
-          <mat-card-title>Frontend wiring</mat-card-title>
+    <section class="overview page">
+      <div class="section-heading">
+        <div>
+          <p class="eyebrow">Uno spazio da attraversare</p>
+          <h2>Il sito accompagna il pubblico verso gli spettacoli senza perdere il tono di una compagnia teatrale</h2>
+        </div>
+        <p class="supporting">Ogni passaggio resta leggibile e misurato: si guarda, si sceglie, si prenota, si arriva in sala con la sensazione di essere attesi.</p>
+      </div>
+
+      <div class="feature-grid">
+        <mat-card class="feature-card">
+          <mat-card-title>Una programmazione da leggere con calma</mat-card-title>
          <mat-card-content>
-            <p><strong>API base URL</strong></p>
-            <code>{{ apiBaseUrl }}</code>
-            <p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
+            <p>Le schede mettono in evidenza i dettagli utili senza appesantire la scena: titolo, sintesi, immagini e accesso alla prenotazione.</p>
+          </mat-card-content>
+        </mat-card>
+        <mat-card class="feature-card">
+          <mat-card-title>Una prenotazione semplice e rassicurante</mat-card-title>
+          <mat-card-content>
+            <p>La conferma via email mantiene il percorso leggero per chi prenota e affidabile per chi organizza la capienza.</p>
+          </mat-card-content>
+        </mat-card>
+        <mat-card class="feature-card">
+          <mat-card-title>Un'accoglienza pensata per il lavoro in sala</mat-card-title>
+          <mat-card-content>
+            <p>Dall'ingresso alla verifica del QR code, tutto resta discreto, chiaro e adatto a un contesto teatrale.</p>
          </mat-card-content>
        </mat-card>
      </div>
    </section>
+
+    <section class="journey page">
+      <div class="journey-copy">
+        <p class="eyebrow">Il percorso del pubblico</p>
+        <h2>Dalla scoperta dello spettacolo all'ingresso, in pochi passaggi essenziali</h2>
+      </div>
+      <ol class="journey-steps">
+        <li>Esplora gli spettacoli in programma e apri la scheda che ti incuriosisce.</li>
+        <li>Invia la richiesta di prenotazione e confermala dall'email ricevuta.</li>
+        <li>Porta con te il QR code sul telefono o su carta e raggiungi la sala con semplicita'.</li>
+      </ol>
+    </section>
  `,
  styles: [`
    .hero {
+      width: 100%;
+      margin: 0 0 72px;
+      padding: 56px 0 72px;
+      background:
+        linear-gradient(180deg, rgba(47, 125, 87, 0.05), rgba(47, 125, 87, 0) 42%),
+        linear-gradient(180deg, #fcfbf8 0%, #f8f6f0 100%);
+      border-bottom: 1px solid var(--azionelab-border);
+    }
+
+    .hero-inner {
      display: grid;
-      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
-      gap: 28px;
-      align-items: stretch;
-      max-width: 1180px;
-      margin: 0 auto;
+      grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
+      gap: 36px;
+      align-items: end;
    }

    .hero-copy {
-      padding: 36px 0;
+      padding-top: 18px;
    }

-    .eyebrow {
-      margin: 0 0 12px;
+    .hero-kicker {
+      margin: 0 0 18px;
      color: var(--azionelab-accent);
+      font-size: 0.9rem;
+      font-weight: 800;
+      letter-spacing: 0.18em;
      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
    }

    h1 {
      margin: 0;
-      max-width: 10ch;
-      font-size: clamp(2.5rem, 5vw, 4.75rem);
-      line-height: 0.95;
+      max-width: 11ch;
+      font-size: 4.3rem;
+      line-height: 0.96;
    }

-    .supporting {
-      max-width: 52ch;
-      color: var(--azionelab-muted);
-      font-size: 1.08rem;
-      line-height: 1.65;
+    .hero-direction {
      margin: 20px 0 0;
+      color: var(--azionelab-ink-soft);
+      font-size: 1.05rem;
+      line-height: 1.5;
    }

    .hero-actions {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-      margin-top: 28px;
+      margin-top: 34px;
    }

-    .hero-panel mat-card {
-      height: 100%;
-      border-radius: 8px;
+    .hero-aside {
+      display: grid;
+      gap: 16px;
+      padding: 0 0 10px;
+      color: var(--azionelab-muted);
+    }
+
+    .hero-aside p,
+    .hero-aside span {
+      margin: 0;
+      line-height: 1.75;
+    }
+
+    .hero-aside span {
+      max-width: 24ch;
+    }
+
+    .overview,
+    .journey {
+      margin-top: 0;
+      margin-bottom: 72px;
+    }
+
+    .section-heading {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
+      gap: 28px;
+      align-items: end;
+      margin-bottom: 28px;
+    }
+
+    .section-heading h2,
+    .journey-copy h2 {
+      margin: 0;
+      max-width: 16ch;
+    }
+
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 20px;
+    }
+
+    .feature-card {
+      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

-    code {
-      display: inline-block;
-      margin-top: 8px;
-      padding: 10px 12px;
-      border-radius: 8px;
-      background: rgba(30, 27, 24, 0.06);
+    .feature-card {
+      min-height: 220px;
    }

-    .panel-note {
-      margin-top: 20px;
+    .feature-card mat-card-title {
+      margin-bottom: 12px;
+      font-family: var(--azionelab-serif);
+      font-size: 1.28rem;
+      font-weight: 600;
+    }
+
+    .feature-card p {
+      margin: 0;
      color: var(--azionelab-muted);
-      line-height: 1.5;
+      line-height: 1.72;
+    }
+
+    .journey-copy {
+      margin-bottom: 20px;
+    }
+
+    .journey-steps {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 20px;
+      margin: 0;
+      padding-left: 22px;
+      color: var(--azionelab-ink-soft);
+      line-height: 1.65;
    }

    @media (max-width: 900px) {
-      .hero {
+      .hero-inner,
+      .section-heading,
+      .journey-steps,
+      .feature-grid {
        grid-template-columns: 1fr;
      }
+
+      h1 {
+        font-size: 3.2rem;
+      }
+    }
+
+    @media (max-width: 640px) {
+      .hero {
+        margin-bottom: 56px;
+        padding: 40px 0 56px;
+      }
+
+      h1 {
+        font-size: 2.4rem;
+      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomePageComponent {
-  protected readonly apiBaseUrl = inject(API_BASE_URL);
 }
@@ -22,10 +22,11 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
  ],
  template: `
    <section class="page">
+      <div class="confirmation-shell">
      <header class="page-header">
-        <p class="eyebrow">Reservation confirmation</p>
-        <h1>Email confirmation</h1>
-        <p class="supporting">Use the link from your inbox to confirm your reservation and retrieve the QR code for venue check-in.</p>
+        <p class="eyebrow">Conferma prenotazione</p>
+        <h1>Prenotazione confermata</h1>
+        <p class="supporting">Quando la conferma va a buon fine, il tuo QR code e' pronto per accompagnarti all'ingresso in sala.</p>
      </header>

      <mat-card class="status-card">
@@ -34,8 +35,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
            <div class="status-panel loading" aria-live="polite">
              <mat-progress-spinner mode="indeterminate" diameter="36"></mat-progress-spinner>
              <div>
-                <h2>Confirming reservation...</h2>
-                <p>Please wait while we validate your link.</p>
+                <h2>Stiamo completando la tua conferma...</h2>
+                <p>Un attimo ancora, stiamo verificando il link ricevuto via email.</p>
              </div>
            </div>
          }
@@ -46,28 +47,39 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                <mat-icon fontSet="material-symbols-outlined">verified</mat-icon>
              </div>
              <div>
-                <h2>Reservation confirmed</h2>
-                <p>Your seats are confirmed. Present this QR code at check-in and keep the link handy if staff needs manual access.</p>
+                <h2>I tuoi posti sono confermati</h2>
+                <p>Perfetto: la prenotazione e' andata a buon fine. Tieni questo QR code a portata di mano e mostralo all'ingresso quando arrivi.</p>
                <div class="success-points">
-                  <span><mat-icon fontSet="material-symbols-outlined">qr_code_2</mat-icon> Ready for entry</span>
-                  <span><mat-icon fontSet="material-symbols-outlined">theater_comedy</mat-icon> See you at the performance</span>
+                  <span><mat-icon fontSet="material-symbols-outlined">qr_code_2</mat-icon> QR pronto da mostrare</span>
+                  <span><mat-icon fontSet="material-symbols-outlined">theater_comedy</mat-icon> Ti aspettiamo in sala</span>
                </div>
              </div>
            </div>

            @if (confirmation()!.qr_code_image) {
              <div class="qr-panel">
-                <p class="panel-label">Your check-in QR code</p>
-                <img [src]="confirmation()!.qr_code_image" alt="Reservation QR code" />
+                <p class="panel-label">Il tuo QR code di ingresso</p>
+                <img [src]="confirmation()!.qr_code_image" alt="QR code della prenotazione" />
              </div>
            }

            @if (confirmation()!.qr_code_url) {
              <div class="meta-card">
                <mat-icon fontSet="material-symbols-outlined">link</mat-icon>
-                <p>Check-in URL: <a [href]="confirmation()!.qr_code_url">{{ confirmation()!.qr_code_url }}</a></p>
+                <p>Link di accesso: <a [href]="confirmation()!.qr_code_url">{{ confirmation()!.qr_code_url }}</a></p>
              </div>
            }
+
+            <div class="next-steps">
+              <div>
+                <p class="step-label">Portalo con te</p>
+                <p>Conserva il QR code sul telefono oppure stampalo. All'ingresso bastera' mostrarlo allo staff.</p>
+              </div>
+              <div>
+                <p class="step-label">Tieni l'email a portata di mano</p>
+                <p>Se ne avrai bisogno, potrai riaprire questa pagina in qualsiasi momento dal messaggio di conferma.</p>
+              </div>
+            </div>
          }

          @if (state() === 'invalid') {
@@ -76,8 +88,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                <mat-icon fontSet="material-symbols-outlined">error</mat-icon>
              </div>
              <div>
-                <h2>Invalid confirmation link</h2>
-                <p>This token is not valid. Please use the latest email confirmation link.</p>
+                <h2>Link di conferma non valido</h2>
+                <p>Questo link non risulta valido. Ti consigliamo di usare l'ultimo messaggio ricevuto via email.</p>
              </div>
            </div>
          }
@@ -88,8 +100,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                <mat-icon fontSet="material-symbols-outlined">schedule</mat-icon>
              </div>
              <div>
-                <h2>Confirmation link expired</h2>
-                <p>This link has expired. Please create a new reservation.</p>
+                <h2>Link di conferma scaduto</h2>
+                <p>Il link che hai aperto non e' piu' attivo. Ti chiediamo di creare una nuova prenotazione.</p>
              </div>
            </div>
          }
@@ -100,52 +112,43 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
              </div>
              <div>
-                <h2>Could not confirm reservation</h2>
-                <p>Please try again in a moment.</p>
+                <h2>Non siamo riusciti a completare la conferma</h2>
+                <p>Riprova tra qualche istante: il tuo link potrebbe avere bisogno di un nuovo tentativo.</p>
              </div>
            </div>
          }
        </mat-card-content>

        <mat-card-actions>
-          <a mat-button routerLink="/">Home</a>
-          <a mat-button routerLink="/shows">Shows</a>
+          <a mat-button routerLink="/shows">Torna agli spettacoli</a>
        </mat-card-actions>
      </mat-card>
+      </div>
    </section>
  `,
  styles: [`
-    .page {
-      max-width: 760px;
+    .confirmation-shell {
+      width: min(100%, 700px);
      margin: 0 auto;
    }

    .page-header {
-      margin-bottom: 24px;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
+      margin-bottom: 28px;
+      text-align: center;
    }

    h1 {
      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      font-size: 3rem;
    }

    .supporting {
-      color: var(--azionelab-muted);
-      line-height: 1.6;
-      max-width: 58ch;
-      margin: 14px 0 0;
+      max-width: 40ch;
+      margin: 16px auto 0;
    }

    .status-card {
-      border-radius: 20px;
+      border-radius: var(--azionelab-radius-lg);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface-strong);
      box-shadow: var(--azionelab-shadow);
@@ -157,22 +160,23 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
    }

    mat-card-actions {
-      padding: 0 28px 24px !important;
-      gap: 8px;
+      padding: 0 28px 28px !important;
+      justify-content: center;
    }

    .status-panel {
      display: flex;
-      align-items: flex-start;
-      gap: 16px;
-      padding: 20px;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 18px;
+      padding: 24px;
      border-radius: 18px;
      border: 1px solid transparent;
    }

    .status-panel h2 {
      margin: 0 0 6px;
-      font-size: 1.2rem;
    }

    .status-panel p {
@@ -237,6 +241,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'

    .success-points {
      display: flex;
+      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
@@ -260,12 +265,14 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
    }

    .qr-panel {
-      margin-top: 18px;
-      padding: 16px;
-      border-radius: 18px;
+      display: grid;
+      justify-items: center;
+      margin: 22px auto 0;
+      padding: 22px;
+      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
-      display: inline-block;
-      background: white;
+      background: #ffffff;
+      width: min(100%, 360px);
    }

    .panel-label {
@@ -287,10 +294,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
      display: flex;
      align-items: flex-start;
      gap: 10px;
-      margin-top: 16px;
+      margin-top: 18px;
      padding: 14px 16px;
-      border-radius: 16px;
-      background: rgba(159, 47, 40, 0.05);
+      border-radius: var(--azionelab-radius-md);
+      background: var(--azionelab-bg-strong);
      color: var(--azionelab-muted);
    }

@@ -303,7 +310,40 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
      color: var(--azionelab-accent-strong);
    }

+    .next-steps {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 16px;
+      margin-top: 22px;
+    }
+
+    .next-steps > div {
+      padding: 16px;
+      border-radius: var(--azionelab-radius-md);
+      background: rgba(34, 28, 24, 0.035);
+      border: 1px solid var(--azionelab-border);
+    }
+
+    .step-label {
+      margin: 0 0 6px !important;
+      font-size: 0.8rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--azionelab-accent);
+    }
+
+    .next-steps p {
+      margin: 0;
+      line-height: 1.55;
+      color: var(--azionelab-muted);
+    }
+
    @media (max-width: 640px) {
+      h1 {
+        font-size: 2.3rem;
+      }
+
      mat-card-content {
        padding: 22px !important;
      }
@@ -325,6 +365,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
        width: min(100%, 280px);
        margin: 0 auto;
      }
+
+      .next-steps {
+        grid-template-columns: 1fr;
+      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +25,7 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
      @if (isLoading()) {
        <div class="status-panel" aria-live="polite">
          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
-          <p>Loading show details...</p>
+          <p>Caricamento dei dettagli dello spettacolo...</p>
        </div>
      } @else if (errorMessage()) {
        <mat-card class="status-card" aria-live="assertive">
@@ -33,47 +33,50 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
            <div class="status-copy">
              <mat-icon>error</mat-icon>
              <div>
-                <h1>Could not load this show</h1>
+                <h1>Non siamo riusciti a caricare questo spettacolo</h1>
                <p>{{ errorMessage() }}</p>
              </div>
            </div>
          </mat-card-content>
          <mat-card-actions>
-            <button mat-flat-button type="button" (click)="reload()">Try again</button>
-            <a mat-button routerLink="/shows">Back to shows</a>
+            <button mat-flat-button type="button" (click)="reload()">Riprova</button>
+            <a mat-button routerLink="/shows">Torna agli spettacoli</a>
          </mat-card-actions>
        </mat-card>
      } @else if (show()) {
-        <header class="page-header">
-          <div class="hero-copy">
-            <p class="eyebrow">Show detail</p>
-            <h1>{{ show()!.title }}</h1>
-            <p class="supporting">{{ show()!.description || show()!.summary }}</p>
-          </div>
-          @if (show()!.image_url) {
+        <section class="show-hero">
+          @if (show()!.image_url || show()!.poster_image; as heroImage) {
            <div class="hero-image-wrap">
-              <img class="hero-image" [src]="show()!.image_url" [alt]="show()!.title" />
+              <img class="hero-image" [src]="heroImage" [alt]="show()!.title" />
            </div>
          }
-        </header>
+
+          <header class="page-header">
+            <div class="hero-copy">
+              <p class="eyebrow">Scheda spettacolo</p>
+              <h1>{{ show()!.title }}</h1>
+              <p class="hero-description">{{ show()!.description || show()!.summary }}</p>
+            </div>
+          </header>
+        </section>

        <section class="section">
          <div class="section-heading">
            <div>
-              <h2>Upcoming performances</h2>
-              <p>Choose a performance to continue to the booking placeholder.</p>
+              <h2>Prossime repliche</h2>
+              <p>Scegli la replica che preferisci e prosegui verso la prenotazione.</p>
            </div>
-            <a mat-button routerLink="/shows">Back to show list</a>
+            <a mat-button routerLink="/shows">Torna all'elenco</a>
          </div>

          @if (performances().length === 0) {
            <mat-card class="status-card" aria-live="polite">
              <mat-card-content>
                <div class="status-copy">
-                  <mat-icon>theaters</mat-icon>
+                <mat-icon>theaters</mat-icon>
                  <div>
-                    <h2>No performances published yet</h2>
-                    <p>This show is online, but there are no upcoming performances available right now.</p>
+                    <h2>Nessuna replica pubblicata per ora</h2>
+                    <p>Lo spettacolo e' online, ma al momento non ci sono date disponibili.</p>
                  </div>
                </div>
              </mat-card-content>
@@ -82,29 +85,31 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
            <div class="performance-grid">
              @for (performance of performances(); track performance.id) {
                <mat-card class="performance-card">
-                  <mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</mat-card-title>
-                  <mat-card-subtitle>{{ performance.venue.name }}, {{ performance.venue.city }}</mat-card-subtitle>
+                  <div class="performance-kicker">Replica disponibile</div>
+                  <mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM' }}</mat-card-title>
                  <mat-card-content>
                    <dl class="performance-meta">
                      <div>
-                        <dt>Venue</dt>
+                        <dt>Luogo</dt>
                        <dd>{{ performance.venue.name }}</dd>
                      </div>
                      <div>
-                        <dt>City</dt>
-                        <dd>{{ performance.venue.city }}</dd>
+                        <dt>Data / orario</dt>
+                        <dd>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd>
                      </div>
+                      @if (performance.available_seats !== null && performance.available_seats !== undefined) {
                      <div>
-                        <dt>Available seats</dt>
+                        <dt>Posti disponibili</dt>
                        <dd>{{ performance.available_seats }}</dd>
                      </div>
+                      }
                    </dl>
                  </mat-card-content>
                  <mat-card-actions>
                    @if (performance.booking_enabled) {
-                      <a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Book this performance</a>
+                      <a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Prenota il tuo posto</a>
                    } @else {
-                      <button mat-stroked-button type="button" disabled>Booking unavailable</button>
+                      <button mat-stroked-button type="button" disabled>Prenotazione non disponibile</button>
                    }
                  </mat-card-actions>
                </mat-card>
@@ -116,52 +121,43 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
    </section>
  `,
  styles: [`
-    .page {
-      max-width: 1080px;
-      margin: 0 auto;
+    .show-hero {
+      display: grid;
+      gap: 28px;
+      margin-bottom: 48px;
    }

    .page-header {
-      display: grid;
-      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
-      gap: 24px;
      align-items: start;
-      margin-bottom: 28px;
    }

    .hero-copy {
      min-width: 0;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
+      max-width: 860px;
    }

    h1 {
      margin: 0;
-      font-size: clamp(2rem, 4vw, 3.2rem);
+      max-width: 12ch;
+      font-size: 4rem;
+      line-height: 0.98;
    }

-    .supporting {
-      margin: 14px 0 0;
+    .hero-description {
+      margin: 18px 0 0;
+      max-width: 62ch;
      color: var(--azionelab-muted);
-      line-height: 1.6;
-      max-width: 64ch;
+      font-size: 1.08rem;
+      line-height: 1.82;
    }

    .hero-image-wrap {
      overflow: hidden;
-      border-radius: 12px;
+      border-radius: var(--azionelab-radius-lg);
      border: 1px solid var(--azionelab-border);
-      background:
-        linear-gradient(135deg, rgba(207, 71, 51, 0.16), rgba(15, 22, 36, 0.08)),
-        #f8f1ea;
-      box-shadow: var(--azionelab-shadow);
-      aspect-ratio: 4 / 5;
+      background: var(--azionelab-bg-strong);
+      box-shadow: var(--azionelab-shadow-strong);
+      aspect-ratio: 16 / 8;
    }

    .hero-image {
@@ -173,7 +169,7 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-

    .section {
      display: grid;
-      gap: 20px;
+      gap: 24px;
    }

    .section-heading {
@@ -185,35 +181,53 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-

    .section-heading h2 {
      margin: 0 0 6px;
-      font-size: 1.4rem;
-    }
-
-    .section-heading p {
-      margin: 0;
-      color: var(--azionelab-muted);
    }

    .performance-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 20px;
+      gap: 24px;
    }

    .performance-card,
    .status-card {
-      border-radius: 8px;
+      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

    .performance-card {
-      min-height: 260px;
+      min-height: 320px;
+    }
+
+    .performance-card mat-card-title,
+    .performance-card mat-card-content,
+    .performance-card mat-card-actions {
+      padding-left: 22px;
+      padding-right: 22px;
+    }
+
+    .performance-kicker {
+      padding: 22px 22px 0;
+      color: var(--azionelab-accent);
+      font-size: 0.76rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    .performance-card mat-card-title {
+      margin-top: 10px;
+      font-family: var(--azionelab-serif);
+      font-size: 1.6rem;
+      font-weight: 600;
+      line-height: 1.06;
    }

    .performance-meta {
      display: grid;
-      gap: 14px;
+      gap: 16px;
      margin: 0;
    }

@@ -231,7 +245,8 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-

    .performance-meta dd {
      margin: 0;
-      font-size: 0.98rem;
+      font-size: 1rem;
+      line-height: 1.55;
    }

    .status-panel,
@@ -264,14 +279,18 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
    }

    @media (max-width: 860px) {
-      .page-header {
-        grid-template-columns: 1fr;
+      h1 {
+        font-size: 2.6rem;
      }

      .section-heading {
        align-items: flex-start;
        flex-direction: column;
      }
+
+      .hero-image-wrap {
+        aspect-ratio: 4 / 5;
+      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -298,7 +317,7 @@ export class ShowDetailPlaceholderPageComponent {
    const slug = this.route.snapshot.paramMap.get('slug');

    if (!slug) {
-      this.errorMessage.set('The requested show is missing a valid identifier.');
+      this.errorMessage.set('Lo spettacolo richiesto non ha un identificativo valido.');
      this.show.set(null);
      this.performances.set([]);
      this.isLoading.set(false);
@@ -330,7 +349,7 @@ export class ShowDetailPlaceholderPageComponent {
        error: () => {
          this.show.set(null);
          this.performances.set([]);
-          this.errorMessage.set('Please try again in a moment.');
+          this.errorMessage.set('Riprova tra qualche istante.');
          this.isLoading.set(false);
        },
      });
@@ -15,18 +15,18 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
    <section class="page">
      <header class="page-header">
        <div>
-          <p class="eyebrow">Public shows</p>
-          <h1>Shows</h1>
+          <p class="eyebrow">Programmazione</p>
+          <h1>Spettacoli in programma</h1>
        </div>
        <p class="supporting">
-          Browse current productions published from the AzioneLab backend.
+          Una selezione di lavori, attraversamenti scenici e appuntamenti da leggere con calma, immagine dopo immagine, scheda dopo scheda.
        </p>
      </header>

      @if (isLoading()) {
        <div class="status-panel" aria-live="polite">
          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
-          <p>Loading shows...</p>
+          <p>Caricamento degli spettacoli in corso...</p>
        </div>
      } @else if (errorMessage()) {
        <mat-card class="status-card" aria-live="assertive">
@@ -34,13 +34,13 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
            <div class="status-copy">
              <mat-icon>error</mat-icon>
              <div>
-                <h2>Could not load shows</h2>
+                <h2>Non siamo riusciti a caricare gli spettacoli</h2>
                <p>{{ errorMessage() }}</p>
              </div>
            </div>
          </mat-card-content>
          <mat-card-actions>
-            <button mat-flat-button type="button" (click)="reload()">Try again</button>
+            <button mat-flat-button type="button" (click)="reload()">Riprova</button>
          </mat-card-actions>
        </mat-card>
      } @else if (shows().length === 0) {
@@ -49,8 +49,8 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
            <div class="status-copy">
              <mat-icon>theaters</mat-icon>
              <div>
-                <h2>No shows published yet</h2>
-                <p>Published productions will appear here as soon as they are available.</p>
+                <h2>Nessuno spettacolo pubblicato per ora</h2>
+                <p>Le produzioni disponibili compariranno qui non appena saranno online.</p>
              </div>
            </div>
          </mat-card-content>
@@ -59,18 +59,24 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
        <div class="show-grid">
          @for (show of shows(); track show.slug) {
          <mat-card class="show-card">
-            @if (show.image_url) {
+            @if (getShowImage(show); as showImage) {
              <div class="show-image-wrap">
-                <img class="show-image" [src]="show.image_url" [alt]="show.title" />
+                <img class="show-image" [src]="showImage" [alt]="show.title" />
              </div>
            }
-            <mat-card-title>{{ show.title }}</mat-card-title>
-            <mat-card-content>
-              <p>{{ show.summary }}</p>
-            </mat-card-content>
-            <mat-card-actions>
-              <a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
-            </mat-card-actions>
+            <div class="card-body">
+              <div class="card-topline">
+                <span class="card-label">In programma</span>
+              </div>
+              <mat-card-title>{{ show.title }}</mat-card-title>
+              <mat-card-content>
+                <p>{{ show.summary }}</p>
+                <p class="show-note">Apri la scheda per vedere le prossime date e i dettagli di prenotazione.</p>
+              </mat-card-content>
+              <mat-card-actions>
+                <a mat-button [routerLink]="['/shows', show.slug]">{{ getShowCta(show) }}</a>
+              </mat-card-actions>
+            </div>
          </mat-card>
          }
        </div>
@@ -78,42 +84,23 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
    </section>
  `,
  styles: [`
-    .page {
-      max-width: 1180px;
-      margin: 0 auto;
-    }
-
    .page-header {
      display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
-      gap: 24px;
+      grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
+      gap: 28px;
      align-items: end;
-      margin-bottom: 24px;
-    }
-
-    .eyebrow {
-      margin: 0 0 10px;
-      color: var(--azionelab-accent);
-      text-transform: uppercase;
-      font-size: 0.78rem;
-      font-weight: 700;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      margin-bottom: 40px;
    }

    .supporting {
      margin: 0;
-      color: var(--azionelab-muted);
-      line-height: 1.6;
+      max-width: 36ch;
    }

    .show-grid {
      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-      gap: 20px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 28px;
    }

    .status-panel,
@@ -131,9 +118,9 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';

    .status-card {
      max-width: 680px;
-      border-radius: 8px;
+      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
-      background: var(--azionelab-surface);
+      background: var(--azionelab-surface-strong);
      box-shadow: var(--azionelab-shadow);
    }

@@ -155,20 +142,19 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
    .show-card {
      display: flex;
      flex-direction: column;
-      min-height: 220px;
-      border-radius: 8px;
+      min-height: 520px;
+      overflow: hidden;
+      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

    .show-image-wrap {
-      aspect-ratio: 16 / 10;
+      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-bottom: 1px solid var(--azionelab-border);
-      background:
-        linear-gradient(135deg, rgba(207, 71, 51, 0.14), rgba(15, 22, 36, 0.06)),
-        #f8f1ea;
+      background: var(--azionelab-bg-strong);
    }

    .show-image {
@@ -176,21 +162,79 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
      height: 100%;
      display: block;
      object-fit: cover;
+      transition: transform 180ms ease;
+    }
+
+    .show-card:hover .show-image {
+      transform: scale(1.015);
+    }
+
+    .card-body {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 22px 22px 20px;
+    }
+
+    .card-topline {
+      padding: 0 0 12px;
+    }
+
+    .card-label {
+      display: inline-flex;
+      align-items: center;
+      min-height: 24px;
+      color: var(--azionelab-accent);
+      font-size: 0.76rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
    }

    .show-card mat-card-content {
      flex: 1;
    }

+    .show-card mat-card-title,
+    .show-card mat-card-content,
+    .show-card mat-card-actions {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .show-card mat-card-title {
+      margin-top: 0;
+      font-family: var(--azionelab-serif);
+      font-size: 1.85rem;
+      font-weight: 600;
+      line-height: 1.04;
+    }
+
    .show-card p {
      color: var(--azionelab-muted);
-      line-height: 1.6;
+      line-height: 1.74;
+      margin: 0;
+    }
+
+    .show-note {
+      margin-top: 18px !important;
+      padding-top: 18px;
+      border-top: 1px solid var(--azionelab-border);
+      font-size: 0.95rem;
+    }
+
+    .show-card mat-card-actions {
+      padding-top: 22px;
    }

    @media (max-width: 860px) {
      .page-header {
        grid-template-columns: 1fr;
      }
+
+      .show-grid {
+        grid-template-columns: 1fr;
+      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -211,6 +255,14 @@ export class ShowListPageComponent {
    this.loadShows();
  }

+  protected getShowImage(show: ShowListItem): string {
+    return show.image_url || show.poster_image || '';
+  }
+
+  protected getShowCta(_show: ShowListItem): string {
+    return 'Scopri lo spettacolo';
+  }
+
  private loadShows(): void {
    this.isLoading.set(true);
    this.errorMessage.set('');
@@ -224,7 +276,7 @@ export class ShowListPageComponent {
        },
        error: () => {
          this.shows.set([]);
-          this.errorMessage.set('Please try again in a moment.');
+          this.errorMessage.set('Riprova tra qualche istante.');
          this.isLoading.set(false);
        },
      });
@@ -1,5 +1,5 @@
 import { inject, Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';

 import { API_BASE_URL } from './api-config.token';
@@ -115,10 +115,43 @@ export class ShowsApiService {
  }

  previewCheckIn(token: string): Observable<CheckInPreviewResponse> {
-    return this.http.post<CheckInPreviewResponse>(`${this.apiBaseUrl}/check-ins/preview/`, { token });
+    return this.http.post<CheckInPreviewResponse>(
+      `${this.apiBaseUrl}/check-ins/preview/`,
+      { token },
+      this.buildStaffRequestOptions(),
+    );
  }

  confirmCheckIn(token: string): Observable<CheckInConfirmResponse> {
-    return this.http.post<CheckInConfirmResponse>(`${this.apiBaseUrl}/check-ins/confirm/`, { token });
+    return this.http.post<CheckInConfirmResponse>(
+      `${this.apiBaseUrl}/check-ins/confirm/`,
+      { token },
+      this.buildStaffRequestOptions(),
+    );
+  }
+
+  private buildStaffRequestOptions(): { headers?: HttpHeaders; withCredentials: true } {
+    const csrfToken = this.readCookie('csrftoken');
+
+    return {
+      withCredentials: true,
+      headers: csrfToken ? new HttpHeaders({ 'X-CSRFToken': csrfToken }) : undefined,
+    };
+  }
+
+  private readCookie(name: string): string {
+    if (typeof document === 'undefined' || !document.cookie) {
+      return '';
+    }
+
+    const cookiePrefix = `${name}=`;
+    for (const cookie of document.cookie.split(';')) {
+      const trimmedCookie = cookie.trim();
+      if (trimmedCookie.startsWith(cookiePrefix)) {
+        return decodeURIComponent(trimmedCookie.slice(cookiePrefix.length));
+      }
+    }
+
+    return '';
  }
 }
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 220" role="img" aria-labelledby="title desc">
+  <title id="title">AzioneLab</title>
+  <desc id="desc">Logo AzioneLab con payoff e direzione artistica.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#c54f41"/>
+      <stop offset="100%" stop-color="#7f251f"/>
+    </linearGradient>
+  </defs>
+  <rect x="12" y="18" width="120" height="120" rx="28" fill="url(#bg)"/>
+  <path d="M46 109L74 48h17l28 61h-17l-5-12H67l-5 12H46zm27-26h18L82 60 73 83z" fill="#fff7f0"/>
+  <text x="160" y="78" fill="#221c18" font-size="52" font-weight="700" font-family="Georgia, 'Times New Roman', serif">AzioneLab</text>
+  <text x="160" y="122" fill="#5f5650" font-size="24" font-family="Arial, Helvetica, sans-serif">Laboratori teatrali &amp; produzioni audio/visive</text>
+  <text x="160" y="158" fill="#8f332d" font-size="20" font-family="Arial, Helvetica, sans-serif">Direzione artistica a cura di Ernesto Estatico</text>
+</svg>
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>AzioneLab</title>
@@ -1,19 +1,36 @@
 :root {
-  --azionelab-bg: #f3eee6;
-  --azionelab-surface: rgba(255, 255, 255, 0.78);
-  --azionelab-surface-strong: rgba(255, 255, 255, 0.92);
-  --azionelab-ink: #1e1b18;
-  --azionelab-muted: #645b53;
-  --azionelab-accent: #9f2f28;
-  --azionelab-accent-strong: #7f211c;
-  --azionelab-border: rgba(30, 27, 24, 0.12);
-  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.12);
+  --azionelab-bg: #fcfbf8;
+  --azionelab-bg-strong: #f5f3ee;
+  --azionelab-surface: #ffffff;
+  --azionelab-surface-strong: #ffffff;
+  --azionelab-surface-dark: #121212;
+  --azionelab-ink: #111111;
+  --azionelab-ink-soft: #1e1e1e;
+  --azionelab-muted: #666666;
+  --azionelab-accent: #2f7d57;
+  --azionelab-accent-strong: #225b40;
+  --azionelab-accent-soft: #dcefe5;
+  --azionelab-highlight: #2f7d57;
+  --azionelab-border: rgba(17, 17, 17, 0.10);
+  --azionelab-border-strong: rgba(17, 17, 17, 0.16);
+  --azionelab-shadow: none;
+  --azionelab-shadow-strong: none;
+  --azionelab-radius-sm: 8px;
+  --azionelab-radius-md: 12px;
+  --azionelab-radius-lg: 18px;
+  --azionelab-shell-width: 1200px;
+  --azionelab-copy-width: 66ch;
+  --azionelab-section-gap: 48px;
+  --azionelab-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
+  --azionelab-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --azionelab-success-bg: #edf7ef;
  --azionelab-success-ink: #1f5f2b;
  --azionelab-success-border: rgba(46, 125, 50, 0.18);
  --azionelab-error-bg: #fff3f1;
  --azionelab-error-ink: #8b2a20;
  --azionelab-error-border: rgba(179, 38, 30, 0.16);
+  --mdc-typography-brand-font-family: var(--azionelab-serif);
+  --mdc-typography-plain-font-family: var(--azionelab-sans);
 }

 * {
@@ -23,31 +40,128 @@
 html, body {
  margin: 0;
  min-height: 100%;
-  font-family: "Manrope", "Segoe UI", sans-serif;
+  font-family: var(--azionelab-sans);
+  font-weight: 500;
  color: var(--azionelab-ink);
-  background:
-    radial-gradient(circle at top right, rgba(159, 47, 40, 0.12), transparent 28%),
-    radial-gradient(circle at left center, rgba(140, 116, 86, 0.14), transparent 35%),
-    linear-gradient(180deg, #fbf7f2 0%, var(--azionelab-bg) 100%);
+  background: var(--azionelab-bg);
 }

 body {
  min-height: 100vh;
 }

-h1, h2, h3 {
-  font-family: "Fraunces", "Times New Roman", serif;
-  letter-spacing: -0.02em;
+body,
+p,
+li,
+dt,
+dd,
+label,
+button,
+input,
+textarea,
+select,
+option,
+a {
+  font-family: var(--azionelab-sans);
 }

-button, input, textarea {
+h1, h2, h3 {
+  font-family: var(--azionelab-serif);
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--azionelab-ink);
+}
+
+h1 {
+  font-size: 3.2rem;
+  line-height: 1;
+}
+
+h2 {
+  font-size: 2rem;
+  line-height: 1.08;
+}
+
+h3 {
+  font-size: 1.3rem;
+  line-height: 1.2;
+}
+
+button, input, textarea, select {
  font: inherit;
 }

-.material-symbols-outlined {
-  font-variation-settings:
-    'FILL' 0,
-    'wght' 500,
-    'GRAD' 0,
-    'opsz' 24;
+.mat-mdc-button-base,
+.mat-mdc-unelevated-button,
+.mat-mdc-outlined-button,
+.mat-mdc-button,
+.mat-mdc-card,
+.mat-mdc-form-field,
+.mdc-button,
+.mdc-text-field,
+.mdc-floating-label,
+.mdc-text-field__input {
+  font-family: var(--azionelab-sans) !important;
+}
+
+a {
+  color: var(--azionelab-accent-strong);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.16em;
+}
+
+img {
+  max-width: 100%;
+}
+
+code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+.page {
+  width: min(100%, var(--azionelab-shell-width));
+  margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  color: var(--azionelab-accent);
+  text-transform: uppercase;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+}
+
+.supporting {
+  color: var(--azionelab-muted);
+  font-size: 1.04rem;
+  line-height: 1.78;
+  max-width: var(--azionelab-copy-width);
+}
+
+@media (max-width: 900px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    font-size: 1.72rem;
+  }
+}
+
+@media (max-width: 640px) {
+  h1 {
+    font-size: 2.05rem;
+  }
+
+  h2 {
+    font-size: 1.42rem;
+  }
+
+  .page {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 }
@@ -11,6 +11,7 @@ services:
      DJANGO_DEBUG: ${DJANGO_DEBUG:-false}
      CORS_ALLOWED_ORIGINS: ${CORS_ALLOWED_ORIGINS}
      SITE_BASE_URL: ${SITE_BASE_URL}
+      EMAIL_BACKEND: ${EMAIL_BACKEND}
      TIME_ZONE: ${TIME_ZONE:-Europe/Rome}
      DATABASE_URL: ${DATABASE_URL}
      POSTGRES_DB: ${POSTGRES_DB}
@@ -5,6 +5,10 @@ server {
    root /usr/share/nginx/html;
    index index.html;

+    location /assets/ {
+        try_files $uri =404;
+    }
+
    location / {
        try_files $uri $uri/ /index.html;
    }
Author	SHA1	Message	Date
bisco	5e843d0810	feat: redesign public reservation flow pages	2026-05-05 16:38:53 +02:00
bisco	0c465b53cd	feat: add editorial homepage and show list layout	2026-05-05 16:16:46 +02:00
bisco	329935dcdd	feat: add frontend layout foundation	2026-05-05 15:50:05 +02:00
bisco	bb1f59c0b3	Merge branch 'fix/frontend-logo-background' into develop	2026-05-05 13:58:01 +02:00
bisco	fd1ce63f7a	fix: remove header logo visual effects	2026-05-05 12:51:07 +02:00
bisco	3f008b7096	fix: use azionelab png logo	2026-05-05 12:46:16 +02:00
bisco	fb7ced584b	Merge branch 'fix/frontend-font-logo-consistency' into develop	2026-05-05 12:43:22 +02:00
bisco	621d3af1f1	fix: align frontend fonts and logo layout	2026-05-05 12:40:56 +02:00
bisco	b68e0a7c5d	Merge branch 'feature/frontend-typography-header' into develop	2026-05-05 12:31:27 +02:00
bisco	00d09ceb8b	feat: refine frontend typography and branding	2026-05-05 12:28:19 +02:00
bisco	d55d2b14ba	changed logo	2026-05-05 12:21:22 +02:00
bisco	92e1bc1b7c	Merge branch 'fix/nginx-frontend-assets' into develop	2026-05-05 11:55:08 +02:00
bisco	185003e001	fix: serve frontend assets without spa fallback	2026-05-05 11:53:21 +02:00
bisco	6c163fd800	feat: refine frontend italian copy	2026-05-05 11:09:01 +02:00
bisco	5db0a38441	Merge branch 'feature/frontend-branding-it' into develop	2026-05-05 11:05:32 +02:00
bisco	5abf019b1a	fix: use provided azionelab logo asset	2026-05-05 11:02:59 +02:00
bisco	fbbb1ae5fe	feat: apply azionelab branding to frontend	2026-05-05 10:46:10 +02:00
bisco	cf4e9ec239	Merge branch 'feature/frontend-visual-design' into develop	2026-05-05 10:27:54 +02:00
bisco	3957987b07	feat: refresh frontend visual design	2026-05-05 10:26:03 +02:00
bisco	c3a345d60b	Merge branch 'fix/qr-checkin-email-config' into develop	2026-05-04 10:11:38 +02:00
bisco	978fe1a7ff	fix: tighten check-in token handling	2026-05-04 09:43:03 +02:00
bisco	c7c0657f6d	Merge branch 'fix/frontend-checkin-csrf' into develop	2026-04-30 13:51:16 +02:00
bisco	b8d2dade40	fix: send csrf token for staff check-in	2026-04-30 13:40:09 +02:00
bisco	d6d83fbb07	Merge branch 'fix/frontend-staff-session-auth' into develop	2026-04-30 13:25:33 +02:00
bisco	f343512ec2	fix: send staff session credentials for check-in	2026-04-30 12:18:19 +02:00