feat: refresh frontend visual design

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

@@ -68,8 +68,21 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
         <p class="supporting">Enter a token manually or scan a QR code to preview admission data and confirm entrance.</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">Front of house</p>
+            <h2>Designed for quick, low-friction arrivals.</h2>
+            <ul class="side-list">
+              <li>Scan a QR code when a device camera is available.</li>
+              <li>Enter the token manually if scanning is not possible.</li>
+              <li>Confirm admission only after the preview data matches the guest.</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>
@@ -175,46 +188,62 @@ type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => Barc
           @if (state() === 'error') {
             <p class="error-message" aria-live="assertive">Something went wrong. Please try again.</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,
 })