feat: refresh frontend visual design

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

@@ -36,8 +36,21 @@ type ApiValidationErrors = Record<string, string[]>;
         </p>
       </header>
 
-      <mat-card class="content-card">
-        <mat-card-content>
+      <div class="booking-grid">
+        <mat-card class="summary-card">
+          <mat-card-content>
+            <p class="summary-label">Before you submit</p>
+            <h2>Reservations are activated only after email confirmation.</h2>
+            <ul class="summary-list">
+              <li>Your confirmation link arrives at the email address you provide.</li>
+              <li>Seat availability is checked on the server before confirmation.</li>
+              <li>The QR code is generated only after the reservation becomes confirmed.</li>
+            </ul>
+          </mat-card-content>
+        </mat-card>
+
+        <mat-card class="content-card">
+          <mat-card-content>
           @if (isSuccess()) {
             <div class="status-panel success" aria-live="polite">
               <div class="status-icon">
@@ -131,52 +144,69 @@ type ApiValidationErrors = Record<string, string[]>;
               </div>
             </form>
           }
-        </mat-card-content>
-      </mat-card>
+          </mat-card-content>
+        </mat-card>
+      </div>
     </section>
   `,
   styles: [`
-    .page {
-      max-width: 760px;
-      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;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: clamp(2rem, 4vw, 3rem);
+      margin-bottom: 26px;
     }
 
     .supporting {
-      color: var(--azionelab-muted);
-      line-height: 1.6;
       max-width: 56ch;
       margin: 14px 0 0;
     }
 
+    .booking-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
+      gap: 20px;
+      align-items: start;
+    }
+
+    .summary-card,
     .content-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);
       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;
+    }
+
     .intro-note {
       display: flex;
       align-items: flex-start;
@@ -317,6 +347,10 @@ type ApiValidationErrors = Record<string, string[]>;
     }
 
     @media (max-width: 640px) {
+      .booking-grid {
+        grid-template-columns: 1fr;
+      }
+
       mat-card-content {
         padding: 22px !important;
       }