feat: add Angular frontend skeleton

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

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+
+@Component({
+  standalone: true,
+  imports: [MatCardModule, MatDividerModule, MatListModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Booking</p>
+        <h1>Performance {{ performanceId }}</h1>
+        <p class="supporting">
+          This page will host the reservation form and confirmation states backed by the existing booking APIs.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Planned interactions</mat-card-title>
+        <mat-card-content>
+          <mat-list>
+            <mat-list-item>Load performance detail and availability</mat-list-item>
+            <mat-list-item>Submit pending reservation</mat-list-item>
+            <mat-list-item>Show email confirmation guidance</mat-list-item>
+          </mat-list>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 900px;
+      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);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 50ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BookingPlaceholderPageComponent {
+  protected readonly performanceId = this.route.snapshot.paramMap.get('performanceId') ?? '0';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}