feat: redesign public reservation flow pages

frontend/angular.json

@@ -21,6 +21,11 @@
               {
                 "glob": "**/*",
                 "input": "public"
+              },
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
               }
             ],
             "styles": [

frontend/src/app/app.component.ts

@@ -13,21 +13,10 @@ import { MatButtonModule } from '@angular/material/button';
   ],
   template: `
     <div class="app-shell">
-      <div class="topline">
-        <div class="topline-inner">
-          <span>Laboratori teatrali & produzioni audio/visive</span>
-          <span>Direzione artistica a cura di Ernesto Estatico</span>
-        </div>
-      </div>
-
       <header class="site-header">
         <div class="header-inner">
-          <a class="brand" routerLink="/">
-            <img class="brand-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
-            <span class="brand-text">
-              <strong>AzioneLab</strong>
-              <small>Laboratori teatrali & produzioni audio/visive</small>
-            </span>
+          <a class="brand" routerLink="/" aria-label="AzioneLab">
+            <img class="brand-logo" src="assets/azionelab-logo.png" alt="AzioneLab" />
           </a>
 
           <nav class="main-nav" aria-label="Primary navigation">
@@ -35,10 +24,6 @@ import { MatButtonModule } from '@angular/material/button';
             <a mat-button routerLink="/shows" routerLinkActive="active">Spettacoli</a>
             <a mat-button routerLink="/check-in" routerLinkActive="active">Accoglienza</a>
           </nav>
-
-          <div class="header-actions">
-            <a mat-stroked-button routerLink="/shows">Prenota uno spettacolo</a>
-          </div>
         </div>
       </header>
 
@@ -48,9 +33,10 @@ import { MatButtonModule } from '@angular/material/button';
 
       <footer class="site-footer">
         <div class="footer-inner">
-          <div>
+          <div class="footer-copy-block">
             <p class="footer-title">AzioneLab</p>
-            <p class="footer-copy">Un luogo per laboratori teatrali, produzioni audio/visive e serate di scena costruite con attenzione per il pubblico reale.</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>
@@ -68,12 +54,6 @@ import { MatButtonModule } from '@angular/material/button';
       flex-direction: column;
     }
 
-    .topline {
-      background: var(--azionelab-surface-dark);
-      color: rgba(255, 247, 239, 0.84);
-      font-size: 0.85rem;
-    }
-
     .topline-inner,
     .header-inner,
     .footer-inner {
@@ -81,120 +61,109 @@ import { MatButtonModule } from '@angular/material/button';
       margin: 0 auto;
     }
 
-    .topline-inner {
-      display: flex;
-      justify-content: space-between;
-      gap: 16px;
-      padding: 10px 20px;
-      flex-wrap: wrap;
-    }
-
     .site-header {
       position: sticky;
       top: 0;
       z-index: 20;
-      backdrop-filter: blur(16px);
-      background: rgba(250, 245, 238, 0.9);
+      background: var(--azionelab-surface);
       border-bottom: 1px solid var(--azionelab-border);
     }
 
     .header-inner {
-      display: grid;
-      grid-template-columns: auto 1fr auto;
+      display: flex;
+      justify-content: space-between;
       align-items: center;
-      gap: 18px;
-      min-height: 82px;
-      padding: 0 20px;
+      gap: 20px;
+      min-height: 72px;
+      padding: 0 24px;
     }
 
     .brand {
       display: inline-flex;
       align-items: center;
-      gap: 14px;
+      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-logo {
-      width: 58px;
-      height: 58px;
+      width: 164px;
+      height: auto;
+      max-height: 44px;
       display: block;
-      object-fit: contain;
-      filter: drop-shadow(0 14px 30px rgba(111, 40, 33, 0.16));
-    }
-
-    .brand-text {
-      display: flex;
-      flex-direction: column;
-      line-height: 1.05;
-    }
-
-    .brand-text strong {
-      font-family: var(--azionelab-serif);
-      font-size: 1.4rem;
-      font-weight: 700;
-    }
-
-    .brand-text small {
-      color: var(--azionelab-muted);
-      font-size: 0.78rem;
+      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: center;
-      gap: 6px;
+      justify-content: flex-end;
+      gap: 4px;
       flex-wrap: wrap;
     }
 
     .main-nav .active {
-      background: rgba(143, 51, 45, 0.1);
-    }
-
-    .header-actions {
-      display: flex;
-      justify-content: flex-end;
+      color: var(--azionelab-accent-strong);
     }
 
     .page-shell {
       flex: 1;
-      padding: 40px 20px 72px;
+      padding: 40px 0 88px;
     }
 
     .site-footer {
       border-top: 1px solid var(--azionelab-border);
-      background:
-        linear-gradient(180deg, rgba(255, 251, 246, 0.86), rgba(244, 235, 223, 0.92));
+      background: var(--azionelab-bg-strong);
     }
 
     .footer-inner {
       display: grid;
       grid-template-columns: minmax(0, 1.5fr) auto;
-      gap: 24px;
+      gap: 20px;
       align-items: start;
-      padding: 28px 20px 34px;
+      padding: 32px 24px 36px;
     }
 
     .footer-title {
       margin: 0 0 8px;
       font-family: var(--azionelab-serif);
-      font-size: 1.15rem;
-      font-weight: 700;
+      font-size: 1.25rem;
+      font-weight: 600;
       color: var(--azionelab-ink);
     }
 
     .footer-copy {
-      margin: 0;
+      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 {
@@ -204,9 +173,11 @@ import { MatButtonModule } from '@angular/material/button';
 
     @media (max-width: 800px) {
       .header-inner {
-        grid-template-columns: 1fr;
+        flex-direction: column;
         align-items: flex-start;
-        padding: 16px;
+        min-height: auto;
+        padding: 14px 16px;
+        gap: 14px;
       }
 
       .main-nav {
@@ -214,17 +185,22 @@ import { MatButtonModule } from '@angular/material/button';
         justify-content: flex-start;
       }
 
-      .header-actions {
-        width: 100%;
+      .brand {
+        justify-content: flex-start;
+      }
+
+      .brand-logo {
+        width: 150px;
+        max-height: 40px;
       }
 
       .footer-inner {
         grid-template-columns: 1fr;
-        padding: 24px 16px 28px;
+        padding: 28px 16px 32px;
       }
 
-      .page-shell {
-        padding: 28px 16px 52px;
+      .footer-nav {
+        justify-content: flex-start;
       }
     }
   `],

frontend/src/app/pages/booking-placeholder-page.component.ts

@@ -28,26 +28,14 @@ type ApiValidationErrors = Record<string, string[]>;
   ],
   template: `
     <section class="page">
-      <header class="page-header">
-        <p class="eyebrow">Prenotazione</p>
-        <h1>Richiedi i tuoi posti</h1>
-        <p class="supporting">
-          Replica {{ performanceId }}. Compila il modulo: ti invieremo un link email di conferma prima che la prenotazione diventi attiva.
-        </p>
-      </header>
-
-      <div class="booking-grid">
-        <mat-card class="summary-card">
-          <mat-card-content>
-            <p class="summary-label">Prima di inviare</p>
-            <h2>La prenotazione si attiva solo dopo la conferma via email.</h2>
-            <ul class="summary-list">
-              <li>Il link di conferma arriva all'indirizzo email che inserisci.</li>
-              <li>La disponibilita' viene verificata sul server prima della conferma.</li>
-              <li>Il QR code viene generato solo dopo la conferma della prenotazione.</li>
-            </ul>
-          </mat-card-content>
-        </mat-card>
+      <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>
@@ -57,11 +45,11 @@ type ApiValidationErrors = Record<string, string[]>;
                 <mat-icon fontSet="material-symbols-outlined">mark_email_read</mat-icon>
               </div>
               <div>
-                <h2>Richiesta inviata</h2>
-                <p>Controlla la tua email per confermare la prenotazione e ottenere il QR code per l'ingresso.</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> Apri l'email di conferma</span>
-                  <span><mat-icon fontSet="material-symbols-outlined">verified</mat-icon> Conferma la tua prenotazione</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>
@@ -69,7 +57,7 @@ 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>Ti chiediamo solo l'essenziale. I posti vengono confermati solo dopo la verifica via email.</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">
@@ -86,7 +74,7 @@ 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>Invieremo qui il link di conferma.</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>L'email e' obbligatoria.</mat-error>
                   }
@@ -99,7 +87,7 @@ type ApiValidationErrors = Record<string, string[]>;
                   <mat-icon matPrefix fontSet="material-symbols-outlined">group</mat-icon>
                   <mat-label>Numero di posti</mat-label>
                   <input matInput type="number" min="1" step="1" formControlName="partySize" />
-                  <mat-hint>Indica il numero totale di persone della prenotazione.</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>Il numero di posti e' obbligatorio.</mat-error>
                   }
@@ -136,7 +124,7 @@ type ApiValidationErrors = Record<string, string[]>;
                   } @else {
                     <ng-container>
                       <mat-icon fontSet="material-symbols-outlined">confirmation_number</mat-icon>
-                      <span>Prenota</span>
+                      <span>Conferma prenotazione</span>
                     </ng-container>
                   }
                 </button>
@@ -150,61 +138,36 @@ type ApiValidationErrors = Record<string, string[]>;
     </section>
   `,
   styles: [`
+    .booking-shell {
+      width: min(100%, 480px);
+      margin: 0 auto;
+    }
+
     .page-header {
-      margin-bottom: 26px;
+      margin: 0 0 28px;
+      text-align: center;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 3rem;
     }
 
     .supporting {
-      max-width: 56ch;
-      margin: 14px 0 0;
+      margin: 16px auto 0;
+      max-width: 42ch;
     }
 
-    .booking-grid {
-      display: grid;
-      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
-      gap: 20px;
-      align-items: start;
-    }
-
-    .summary-card,
     .content-card {
       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;
     }
 
-    .summary-card {
-      background:
-        linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
-    }
-
     mat-card-content {
-      padding: 28px !important;
-    }
-
-    .summary-label {
-      margin: 0 0 10px;
-      font-size: 0.78rem;
-      font-weight: 700;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--azionelab-accent);
-    }
-
-    .summary-card h2 {
-      margin: 0;
-      max-width: 14ch;
-    }
-
-    .summary-list {
-      display: grid;
-      gap: 12px;
-      margin: 18px 0 0;
-      padding-left: 18px;
-      color: var(--azionelab-ink-soft);
-      line-height: 1.6;
+      padding: 32px !important;
     }
 
     .intro-note {
@@ -271,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;
@@ -287,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 {
@@ -303,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);
@@ -324,6 +290,7 @@ type ApiValidationErrors = Record<string, string[]>;
 
     .status-steps {
       display: flex;
+      justify-content: center;
       flex-wrap: wrap;
       gap: 10px;
       margin-top: 14px;
@@ -347,8 +314,8 @@ type ApiValidationErrors = Record<string, string[]>;
     }
 
     @media (max-width: 640px) {
-      .booking-grid {
-        grid-template-columns: 1fr;
+      h1 {
+        font-size: 2.3rem;
       }
 
       mat-card-content {
@@ -413,7 +380,7 @@ export class BookingPlaceholderPageComponent {
             this.fieldErrors.set(this.flattenValidationErrors(error.error as ApiValidationErrors));
             return;
           }
-          this.submitError.set('Non siamo riusciti a creare la prenotazione. Riprova.');
+          this.submitError.set('Non siamo riusciti a inviare la richiesta in questo momento. Riprova tra poco.');
         },
       });
   }

frontend/src/app/pages/check-in-placeholder-page.component.ts

@@ -64,19 +64,19 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
     <section class="page">
       <header class="page-header">
         <p class="eyebrow">Accoglienza staff</p>
-        <h1>Verifica ingresso</h1>
-        <p class="supporting">Inserisci il token manualmente oppure inquadra il QR code per controllare i dati di accesso e confermare l'ingresso.</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>
 
       <div class="checkin-grid">
         <mat-card class="side-card">
           <mat-card-content>
             <p class="side-label">Ingresso sala</p>
-            <h2>Uno strumento pensato per un'accoglienza rapida e chiara.</h2>
+            <h2>Uno strumento pensato per accogliere bene, anche nei momenti piu' intensi.</h2>
             <ul class="side-list">
-              <li>Inquadra il QR code quando la fotocamera del dispositivo e' disponibile.</li>
-              <li>Inserisci il token manualmente se la scansione non e' possibile.</li>
-              <li>Conferma l'ingresso solo dopo aver verificato che i dati corrispondano alla prenotazione.</li>
+              <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>
@@ -86,7 +86,7 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
           <section class="scanner-panel">
             <div class="scanner-copy">
               <h2>Scansione con fotocamera</h2>
-              <p>Disponibile nei browser compatibili. Se il QR contiene l'intero link di check-in, il token viene estratto automaticamente.</p>
+              <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">
@@ -136,7 +136,7 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
                   <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
                   <span>Verifica in corso...</span>
                 } @else {
-                  <span>Anteprima check-in</span>
+                  <span>Controlla prenotazione</span>
                 }
               </button>
               <a mat-button routerLink="/">Inizio</a>
@@ -146,7 +146,7 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
 
           @if (previewData() && shouldShowPreview()) {
             <section class="preview-panel" aria-live="polite">
-              <h2>Anteprima accesso</h2>
+              <h2>Dati per l'ingresso</h2>
               <dl>
                 <div><dt>Spettacolo</dt><dd>{{ previewData()!.show_title }}</dd></div>
                 <div><dt>Spazio</dt><dd>{{ previewData()!.venue_name }}</dd></div>
@@ -157,11 +157,11 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
               <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>Conferma in corso...</span>
+                  <span>Registrazione in corso...</span>
                 } @else if (state() === 'confirm_success') {
                   <span>Ingresso registrato</span>
                 } @else {
-                  <span>Conferma ingresso</span>
+                  <span>Registra ingresso</span>
                 }
               </button>
             </section>
@@ -169,24 +169,24 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
 
           @if (state() === 'confirm_success' && confirmData()) {
             <p class="success-message" aria-live="polite">
-              Ingresso confermato alle {{ 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">Token non valido.</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">La prenotazione non e' ancora confermata.</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">Questa prenotazione risulta gia' registrata all'ingresso.</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">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">Qualcosa non ha funzionato. Riprova.</p>
+            <p class="error-message" aria-live="assertive">Non siamo riusciti a completare la verifica. Riprova tra poco.</p>
           }
           </mat-card-content>
         </mat-card>

frontend/src/app/pages/home-page.component.ts

@@ -1,34 +1,29 @@
-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 page">
-      <div class="hero-copy">
-        <img class="hero-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
-        <p class="eyebrow">AzioneLab</p>
-        <h1>Laboratori, scena e produzioni che mettono il pubblico al centro.</h1>
-        <p class="supporting">
-          AzioneLab intreccia laboratori teatrali, produzioni audio/visive e una presenza scenica pensata per spazi vivi e raccolti. Il sito accompagna il pubblico con chiarezza: scoperta degli spettacoli, prenotazione essenziale, conferma serena all'ingresso.
-        </p>
-        <div class="hero-actions">
-          <a mat-flat-button color="primary" routerLink="/shows">Scopri gli spettacoli</a>
-          <a mat-stroked-button routerLink="/check-in">Area accoglienza</a>
+    <section class="hero">
+      <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>
 
-      <div class="hero-stage" aria-hidden="true">
-        <div class="curtain"></div>
-        <div class="stage-glow"></div>
-        <div class="stage-copy">
-          <span>Questa sera da AzioneLab</span>
-          <strong>Le porte aprono 30 minuti prima dell'inizio</strong>
+        <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>
@@ -36,280 +31,201 @@ import { API_BASE_URL } from '../services/api-config.token';
     <section class="overview page">
       <div class="section-heading">
         <div>
-          <p class="eyebrow">In breve</p>
-          <h2>Un sito pensato per una compagnia viva, non per una macchina impersonale di biglietteria</h2>
+          <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">L'esperienza pubblica resta semplice: scegli uno spettacolo, richiedi i posti, conferma via email, arriva con il tuo QR code.</p>
+        <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>Scegli la replica giusta</mat-card-title>
+          <mat-card-title>Una programmazione da leggere con calma</mat-card-title>
           <mat-card-content>
-            <p>Le schede degli spettacoli tengono in primo piano luogo, orari e disponibilita', senza confusione.</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>Conferma via email</mat-card-title>
+          <mat-card-title>Una prenotazione semplice e rassicurante</mat-card-title>
           <mat-card-content>
-            <p>Le richieste restano in attesa finche' il pubblico non conferma, cosi' la capienza resta affidabile e semplice da gestire.</p>
+            <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>Accoglienza rapida</mat-card-title>
+          <mat-card-title>Un'accoglienza pensata per il lavoro in sala</mat-card-title>
           <mat-card-content>
-            <p>Lo staff puo' verificare il token, controllarlo lato server e registrare l'ingresso in un flusso compatto.</p>
+            <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-grid page">
+    <section class="journey page">
       <div class="journey-copy">
-        <p class="eyebrow">Percorso del pubblico</p>
-        <h2>Dall'interesse all'ingresso in pochi passaggi chiari</h2>
-        <ol>
-          <li>Esplora la programmazione pubblica e apri la scheda di uno spettacolo.</li>
-          <li>Richiedi i posti per una replica e conferma via email.</li>
-          <li>Tieni pronto il QR code sul telefono o su carta per l'ingresso.</li>
-        </ol>
+        <p class="eyebrow">Il percorso del pubblico</p>
+        <h2>Dalla scoperta dello spettacolo all'ingresso, in pochi passaggi essenziali</h2>
       </div>
-
-      <mat-card class="meta-card">
-        <mat-card-title>Base tecnica</mat-card-title>
-        <mat-card-content>
-          <p class="meta-label">URL base API</p>
-          <code>{{ apiBaseUrl }}</code>
-          <p class="meta-note">Il frontend resta allineato alle API Django gia' esistenti, senza cambiare i contratti del backend.</p>
-        </mat-card-content>
-      </mat-card>
+      <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.3fr) minmax(280px, 0.9fr);
-      gap: 28px;
-      align-items: stretch;
-      padding: 12px 0 24px;
+      grid-template-columns: minmax(0, 1.3fr) minmax(240px, 0.7fr);
+      gap: 36px;
+      align-items: end;
     }
 
     .hero-copy {
-      padding: 34px 0 20px;
+      padding-top: 18px;
     }
 
-    .hero-logo {
-      width: min(220px, 52vw);
-      height: auto;
-      display: block;
-      margin-bottom: 18px;
+    .hero-kicker {
+      margin: 0 0 18px;
+      color: var(--azionelab-accent);
+      font-size: 0.9rem;
+      font-weight: 800;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
     }
 
     h1 {
       margin: 0;
       max-width: 11ch;
-      font-size: 3.85rem;
+      font-size: 4.3rem;
+      line-height: 0.96;
     }
 
-    .supporting {
+    .hero-direction {
       margin: 20px 0 0;
-      font-size: 1.06rem;
+      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-stage {
-      position: relative;
-      overflow: hidden;
-      min-height: 420px;
-      border-radius: var(--azionelab-radius-lg);
-      border: 1px solid rgba(255, 250, 245, 0.16);
-      background:
-        linear-gradient(180deg, rgba(31, 18, 18, 0.1), rgba(27, 18, 14, 0.62)),
-        linear-gradient(135deg, #b04b40 0%, #7f251f 24%, #43261f 56%, #211b1a 100%);
-      box-shadow: var(--azionelab-shadow-strong);
-    }
-
-    .curtain {
-      position: absolute;
-      inset: 0;
-      background:
-        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.08) 100%),
-        repeating-linear-gradient(90deg, rgba(75, 18, 14, 0.2) 0 18px, rgba(160, 60, 52, 0.08) 18px 36px);
-      opacity: 0.9;
-    }
-
-    .stage-glow {
-      position: absolute;
-      left: 50%;
-      bottom: -80px;
-      width: 340px;
-      height: 340px;
-      transform: translateX(-50%);
-      border-radius: 50%;
-      background: radial-gradient(circle, rgba(245, 214, 150, 0.9) 0, rgba(245, 214, 150, 0.22) 44%, rgba(245, 214, 150, 0) 72%);
-    }
-
-    .stage-copy {
-      position: absolute;
-      left: 24px;
-      right: 24px;
-      bottom: 24px;
+    .hero-aside {
       display: grid;
-      gap: 8px;
-      padding: 18px 20px;
-      border-radius: 18px;
-      background: rgba(24, 17, 15, 0.52);
-      backdrop-filter: blur(8px);
-      color: rgba(255, 247, 239, 0.94);
-      border: 1px solid rgba(255, 247, 239, 0.12);
+      gap: 16px;
+      padding: 0 0 10px;
+      color: var(--azionelab-muted);
     }
 
-    .stage-copy span {
-      text-transform: uppercase;
-      font-size: 0.76rem;
-      letter-spacing: 0.08em;
-      color: rgba(255, 227, 192, 0.84);
+    .hero-aside p,
+    .hero-aside span {
+      margin: 0;
+      line-height: 1.75;
     }
 
-    .stage-copy strong {
-      font-family: var(--azionelab-serif);
-      font-size: 1.4rem;
-      font-weight: 700;
-      line-height: 1.15;
+    .hero-aside span {
+      max-width: 24ch;
     }
 
     .overview,
-    .journey-grid {
-      margin-top: 34px;
+    .journey {
+      margin-top: 0;
+      margin-bottom: 72px;
     }
 
     .section-heading {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
-      gap: 24px;
+      grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
+      gap: 28px;
       align-items: end;
-      margin-bottom: 20px;
+      margin-bottom: 28px;
     }
 
     .section-heading h2,
     .journey-copy h2 {
       margin: 0;
-      max-width: 18ch;
+      max-width: 16ch;
     }
 
     .feature-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 18px;
+      gap: 20px;
     }
 
-    .feature-card,
-    .meta-card {
+    .feature-card {
       border-radius: var(--azionelab-radius-md);
       border: 1px solid var(--azionelab-border);
-      background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(251, 245, 236, 0.94));
+      background: var(--azionelab-surface);
       box-shadow: var(--azionelab-shadow);
     }
 
     .feature-card {
-      min-height: 210px;
+      min-height: 220px;
     }
 
-    .feature-card mat-card-title,
-    .meta-card mat-card-title {
+    .feature-card mat-card-title {
       margin-bottom: 12px;
       font-family: var(--azionelab-serif);
-      font-size: 1.18rem;
-      font-weight: 700;
+      font-size: 1.28rem;
+      font-weight: 600;
     }
 
-    .feature-card p,
-    .meta-card p {
+    .feature-card p {
       margin: 0;
       color: var(--azionelab-muted);
-      line-height: 1.6;
-    }
-
-    .journey-grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
-      gap: 24px;
-      align-items: start;
+      line-height: 1.72;
     }
 
     .journey-copy {
-      padding: 10px 0;
+      margin-bottom: 20px;
     }
 
-    ol {
+    .journey-steps {
       display: grid;
-      gap: 12px;
-      margin: 20px 0 0;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 20px;
+      margin: 0;
       padding-left: 22px;
       color: var(--azionelab-ink-soft);
       line-height: 1.65;
     }
 
-    .meta-label {
-      margin: 0 0 10px;
-      font-size: 0.8rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      color: var(--azionelab-muted);
-      letter-spacing: 0.08em;
-    }
-
-    code {
-      display: inline-block;
-      padding: 10px 12px;
-      border-radius: 12px;
-      background: rgba(34, 28, 24, 0.06);
-      color: var(--azionelab-ink-soft);
-      word-break: break-word;
-    }
-
-    .meta-note {
-      margin: 18px 0 0;
-    }
-
     @media (max-width: 900px) {
-      .hero,
+      .hero-inner,
       .section-heading,
-      .journey-grid,
+      .journey-steps,
       .feature-grid {
         grid-template-columns: 1fr;
       }
 
       h1 {
-        font-size: 2.9rem;
+        font-size: 3.2rem;
       }
     }
 
     @media (max-width: 640px) {
+      .hero {
+        margin-bottom: 56px;
+        padding: 40px 0 56px;
+      }
+
       h1 {
-        font-size: 2.25rem;
-      }
-
-      .hero-stage {
-        min-height: 320px;
-      }
-
-      .stage-copy {
-        left: 16px;
-        right: 16px;
-        bottom: 16px;
-        padding: 16px;
+        font-size: 2.4rem;
       }
     }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomePageComponent {
-  protected readonly apiBaseUrl = inject(API_BASE_URL);
 }

frontend/src/app/pages/reservation-confirm-page.component.ts

@@ -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">Conferma prenotazione</p>
-        <h1>Conferma via email</h1>
-        <p class="supporting">Usa il link ricevuto nella tua casella email per confermare la prenotazione e ottenere il QR code per l'ingresso.</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>Stiamo confermando la prenotazione...</h2>
-                <p>Attendi qualche istante mentre verifichiamo il link.</p>
+                <h2>Stiamo completando la tua conferma...</h2>
+                <p>Un attimo ancora, stiamo verificando il link ricevuto via email.</p>
               </div>
             </div>
           }
@@ -46,11 +47,11 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                 <mat-icon fontSet="material-symbols-outlined">verified</mat-icon>
               </div>
               <div>
-                <h2>Prenotazione confermata</h2>
-                <p>I tuoi posti sono confermati. Mostra questo QR code all'ingresso e conserva il link nel caso lo staff debba aprirlo manualmente.</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> Pronto per l'ingresso</span>
-                  <span><mat-icon fontSet="material-symbols-outlined">theater_comedy</mat-icon> Ci vediamo a teatro</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>
@@ -71,12 +72,12 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
 
             <div class="next-steps">
               <div>
-                <p class="step-label">Cosa fare adesso</p>
-                <p>Conserva il QR code sul telefono oppure stampalo. Lo staff potra' leggerlo direttamente all'ingresso.</p>
+                <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">Ti serve di nuovo il link?</p>
-                <p>Tieni l'email di conferma: potrai riaprire la pagina di check-in in qualsiasi momento se dovrai mostrare ancora il QR.</p>
+                <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>
           }
@@ -88,7 +89,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
               </div>
               <div>
                 <h2>Link di conferma non valido</h2>
-                <p>Questo token non e' valido. Usa l'ultimo link di conferma ricevuto via email.</p>
+                <p>Questo link non risulta valido. Ti consigliamo di usare l'ultimo messaggio ricevuto via email.</p>
               </div>
             </div>
           }
@@ -100,7 +101,7 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
               </div>
               <div>
                 <h2>Link di conferma scaduto</h2>
-                <p>Questo link e' scaduto. Crea una nuova prenotazione.</p>
+                <p>Il link che hai aperto non e' piu' attivo. Ti chiediamo di creare una nuova prenotazione.</p>
               </div>
             </div>
           }
@@ -111,28 +112,39 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
                 <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
               </div>
               <div>
-                <h2>Non siamo riusciti a confermare la prenotazione</h2>
-                <p>Riprova tra qualche istante.</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="/">Inizio</a>
-          <a mat-button routerLink="/shows">Spettacoli</a>
+          <a mat-button routerLink="/shows">Torna agli spettacoli</a>
         </mat-card-actions>
       </mat-card>
+      </div>
     </section>
   `,
   styles: [`
+    .confirmation-shell {
+      width: min(100%, 700px);
+      margin: 0 auto;
+    }
+
     .page-header {
-      margin-bottom: 24px;
+      margin-bottom: 28px;
+      text-align: center;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 3rem;
     }
 
     .supporting {
-      max-width: 58ch;
-      margin: 14px 0 0;
+      max-width: 40ch;
+      margin: 16px auto 0;
     }
 
     .status-card {
@@ -148,15 +160,17 @@ 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;
     }
@@ -227,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;
@@ -250,12 +265,14 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
     }
 
     .qr-panel {
-      margin-top: 18px;
-      padding: 16px;
+      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 {
@@ -277,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: var(--azionelab-radius-md);
-      background: rgba(159, 47, 40, 0.05);
+      background: var(--azionelab-bg-strong);
       color: var(--azionelab-muted);
     }
 
@@ -296,8 +313,8 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
     .next-steps {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 14px;
-      margin-top: 18px;
+      gap: 16px;
+      margin-top: 22px;
     }
 
     .next-steps > div {
@@ -323,6 +340,10 @@ type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error'
     }
 
     @media (max-width: 640px) {
+      h1 {
+        font-size: 2.3rem;
+      }
+
       mat-card-content {
         padding: 22px !important;
       }

frontend/src/app/pages/show-detail-placeholder-page.component.ts

@@ -44,28 +44,27 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
           </mat-card-actions>
         </mat-card>
       } @else if (show()) {
-        <header class="page-header">
-          <div class="hero-copy">
-            <p class="eyebrow">Scheda spettacolo</p>
-            <h1>{{ show()!.title }}</h1>
-            <p class="supporting">{{ show()!.description || show()!.summary }}</p>
-            <div class="hero-note">
-              <span>Programmazione pubblica</span>
-              <span>Scegli una data per continuare</span>
-            </div>
-          </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>Prossime repliche</h2>
-              <p>Scegli una data per proseguire verso la prenotazione.</p>
+              <p>Scegli la replica che preferisci e prosegui verso la prenotazione.</p>
             </div>
             <a mat-button routerLink="/shows">Torna all'elenco</a>
           </div>
@@ -86,27 +85,29 @@ 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>Spazio</dt>
+                        <dt>Luogo</dt>
                         <dd>{{ performance.venue.name }}</dd>
                       </div>
                       <div>
-                        <dt>Citta'</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>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']">Prenota questa data</a>
+                      <a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Prenota il tuo posto</a>
                     } @else {
                       <button mat-stroked-button type="button" disabled>Prenotazione non disponibile</button>
                     }
@@ -120,51 +121,43 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
     </section>
   `,
   styles: [`
-    .page-header {
+    .show-hero {
       display: grid;
-      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 420px);
       gap: 28px;
+      margin-bottom: 48px;
+    }
+
+    .page-header {
       align-items: start;
-      margin-bottom: 32px;
     }
 
     .hero-copy {
       min-width: 0;
-      padding: 8px 0;
+      max-width: 860px;
     }
 
-    .supporting {
-      margin: 14px 0 0;
+    h1 {
+      margin: 0;
+      max-width: 12ch;
+      font-size: 4rem;
+      line-height: 0.98;
     }
 
-    .hero-note {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-      margin-top: 18px;
-    }
-
-    .hero-note span {
-      display: inline-flex;
-      align-items: center;
-      min-height: 32px;
-      padding: 0 14px;
-      border-radius: 999px;
-      background: rgba(143, 51, 45, 0.08);
-      color: var(--azionelab-accent-strong);
-      font-size: 0.85rem;
-      font-weight: 700;
+    .hero-description {
+      margin: 18px 0 0;
+      max-width: 62ch;
+      color: var(--azionelab-muted);
+      font-size: 1.08rem;
+      line-height: 1.82;
     }
 
     .hero-image-wrap {
       overflow: hidden;
       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;
+      background: var(--azionelab-bg-strong);
       box-shadow: var(--azionelab-shadow-strong);
-      aspect-ratio: 4 / 4.8;
+      aspect-ratio: 16 / 8;
     }
 
     .hero-image {
@@ -176,7 +169,7 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
 
     .section {
       display: grid;
-      gap: 20px;
+      gap: 24px;
     }
 
     .section-heading {
@@ -193,39 +186,48 @@ import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-
     .performance-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 22px;
+      gap: 24px;
     }
 
     .performance-card,
     .status-card {
       border-radius: var(--azionelab-radius-md);
       border: 1px solid var(--azionelab-border);
-      background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
+      background: var(--azionelab-surface);
       box-shadow: var(--azionelab-shadow);
     }
 
     .performance-card {
-      min-height: 280px;
+      min-height: 320px;
     }
 
     .performance-card mat-card-title,
-    .performance-card mat-card-subtitle,
     .performance-card mat-card-content,
     .performance-card mat-card-actions {
-      padding-left: 18px;
-      padding-right: 18px;
+      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: 14px;
+      margin-top: 10px;
       font-family: var(--azionelab-serif);
-      font-size: 1.28rem;
-      line-height: 1.15;
+      font-size: 1.6rem;
+      font-weight: 600;
+      line-height: 1.06;
     }
 
     .performance-meta {
       display: grid;
-      gap: 14px;
+      gap: 16px;
       margin: 0;
     }
 
@@ -243,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,
@@ -276,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,

frontend/src/app/pages/show-list-page.component.ts

@@ -16,10 +16,10 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
       <header class="page-header">
         <div>
           <p class="eyebrow">Programmazione</p>
-          <h1>Spettacoli</h1>
+          <h1>Spettacoli in programma</h1>
         </div>
         <p class="supporting">
-          Scopri le produzioni di AzioneLab, apri la scheda di ogni spettacolo e avvicinati alla prenotazione con semplicità.
+          Una selezione di lavori, attraversamenti scenici e appuntamenti da leggere con calma, immagine dopo immagine, scheda dopo scheda.
         </p>
       </header>
 
@@ -59,21 +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>
             }
-            <div class="card-topline">
-              <span class="card-label">Spettacolo in evidenza</span>
+            <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-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]">Apri scheda</a>
-            </mat-card-actions>
           </mat-card>
           }
         </div>
@@ -83,21 +86,21 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
   styles: [`
     .page-header {
       display: grid;
-      grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
-      gap: 24px;
+      grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
+      gap: 28px;
       align-items: end;
-      margin-bottom: 28px;
+      margin-bottom: 40px;
     }
 
     .supporting {
       margin: 0;
-      max-width: 34ch;
+      max-width: 36ch;
     }
 
     .show-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 22px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 28px;
     }
 
     .status-panel,
@@ -139,21 +142,19 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
     .show-card {
       display: flex;
       flex-direction: column;
-      min-height: 360px;
+      min-height: 520px;
       overflow: hidden;
       border-radius: var(--azionelab-radius-md);
       border: 1px solid var(--azionelab-border);
-      background: linear-gradient(180deg, rgba(255, 253, 249, 0.98), rgba(250, 243, 233, 0.94));
+      background: var(--azionelab-surface);
       box-shadow: var(--azionelab-shadow);
     }
 
     .show-image-wrap {
-      aspect-ratio: 15 / 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 {
@@ -165,23 +166,29 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
     }
 
     .show-card:hover .show-image {
-      transform: scale(1.03);
+      transform: scale(1.015);
+    }
+
+    .card-body {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      padding: 22px 22px 20px;
     }
 
     .card-topline {
-      padding: 18px 18px 0;
+      padding: 0 0 12px;
     }
 
     .card-label {
       display: inline-flex;
       align-items: center;
-      min-height: 28px;
-      padding: 0 12px;
-      border-radius: 999px;
-      background: rgba(143, 51, 45, 0.08);
-      color: var(--azionelab-accent-strong);
-      font-size: 0.78rem;
+      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 {
@@ -191,28 +198,43 @@ import { ShowListItem, ShowsApiService } from '../services/shows-api.service';
     .show-card mat-card-title,
     .show-card mat-card-content,
     .show-card mat-card-actions {
-      padding-left: 18px;
-      padding-right: 18px;
+      padding-left: 0;
+      padding-right: 0;
     }
 
     .show-card mat-card-title {
-      margin-top: 10px;
+      margin-top: 0;
       font-family: var(--azionelab-serif);
-      font-size: 1.45rem;
-      font-weight: 700;
-      line-height: 1.12;
+      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,
@@ -233,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('');

frontend/src/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="it">
   <head>
     <meta charset="utf-8">
     <title>AzioneLab</title>

frontend/src/styles.css

@@ -1,34 +1,36 @@
 :root {
-  --azionelab-bg: #f5efe6;
-  --azionelab-bg-strong: #efe4d4;
-  --azionelab-surface: rgba(255, 251, 246, 0.84);
-  --azionelab-surface-strong: rgba(255, 252, 248, 0.96);
-  --azionelab-surface-dark: #342924;
-  --azionelab-ink: #221c18;
-  --azionelab-ink-soft: #3a302a;
-  --azionelab-muted: #6f6258;
-  --azionelab-accent: #8f332d;
-  --azionelab-accent-strong: #6e251f;
-  --azionelab-accent-soft: #c88f64;
-  --azionelab-highlight: #c6a768;
-  --azionelab-border: rgba(34, 28, 24, 0.11);
-  --azionelab-border-strong: rgba(34, 28, 24, 0.18);
-  --azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.10);
-  --azionelab-shadow-strong: 0 26px 64px rgba(46, 28, 18, 0.16);
-  --azionelab-radius-sm: 10px;
-  --azionelab-radius-md: 16px;
-  --azionelab-radius-lg: 24px;
-  --azionelab-shell-width: 1180px;
-  --azionelab-copy-width: 64ch;
-  --azionelab-section-gap: 28px;
-  --azionelab-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  --azionelab-serif: Georgia, "Times New Roman", serif;
+  --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);
 }
 
 * {
@@ -39,44 +41,73 @@ html, body {
   margin: 0;
   min-height: 100%;
   font-family: var(--azionelab-sans);
+  font-weight: 500;
   color: var(--azionelab-ink);
-  background:
-    linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
-    linear-gradient(180deg, #faf5ee 0%, var(--azionelab-bg) 52%, #efe4d6 100%);
+  background: var(--azionelab-bg);
 }
 
 body {
   min-height: 100vh;
 }
 
+body,
+p,
+li,
+dt,
+dd,
+label,
+button,
+input,
+textarea,
+select,
+option,
+a {
+  font-family: var(--azionelab-sans);
+}
+
 h1, h2, h3 {
   font-family: var(--azionelab-serif);
-  font-weight: 700;
+  font-weight: 600;
   letter-spacing: 0;
   color: var(--azionelab-ink);
 }
 
 h1 {
-  font-size: 2.5rem;
-  line-height: 1.02;
+  font-size: 3.2rem;
+  line-height: 1;
 }
 
 h2 {
-  font-size: 1.65rem;
-  line-height: 1.12;
+  font-size: 2rem;
+  line-height: 1.08;
 }
 
 h3 {
-  font-size: 1.15rem;
+  font-size: 1.3rem;
   line-height: 1.2;
 }
 
-button, input, textarea {
+button, input, textarea, select {
   font: inherit;
 }
 
+.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 {
@@ -90,6 +121,8 @@ code {
 .page {
   width: min(100%, var(--azionelab-shell-width));
   margin: 0 auto;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .eyebrow {
@@ -98,31 +131,37 @@ code {
   text-transform: uppercase;
   font-size: 0.78rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.12em;
 }
 
 .supporting {
   color: var(--azionelab-muted);
-  line-height: 1.65;
+  font-size: 1.04rem;
+  line-height: 1.78;
   max-width: var(--azionelab-copy-width);
 }
 
 @media (max-width: 900px) {
   h1 {
-    font-size: 2.15rem;
+    font-size: 2.5rem;
   }
 
   h2 {
-    font-size: 1.45rem;
+    font-size: 1.72rem;
   }
 }
 
 @media (max-width: 640px) {
   h1 {
-    font-size: 1.9rem;
+    font-size: 2.05rem;
   }
 
   h2 {
-    font-size: 1.3rem;
+    font-size: 1.42rem;
+  }
+
+  .page {
+    padding-left: 16px;
+    padding-right: 16px;
   }
 }

infra/docker/frontend/nginx.conf

@@ -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;
     }