feat: add Angular frontend skeleton

2026-04-29 12:17:07 +02:00
parent 35ae0278b7
commit 5f30029f4b
20 changed files with 818 additions and 3 deletions
--- a/frontend/src/app/pages/home-page.component.ts
+++ b/frontend/src/app/pages/home-page.component.ts
@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, inject } 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>
+      </div>
+
+      <div class="hero-panel">
+        <mat-card>
+          <mat-card-title>Frontend wiring</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>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </section>
+  `,
+  styles: [`
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
+      gap: 28px;
+      align-items: stretch;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .hero-copy {
+      padding: 36px 0;
+    }
+
+    .eyebrow {
+      margin: 0 0 12px;
+      color: var(--azionelab-accent);
+      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;
+    }
+
+    .supporting {
+      max-width: 52ch;
+      color: var(--azionelab-muted);
+      font-size: 1.08rem;
+      line-height: 1.65;
+      margin: 20px 0 0;
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-top: 28px;
+    }
+
+    .hero-panel mat-card {
+      height: 100%;
+      border-radius: 8px;
+      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);
+    }
+
+    .panel-note {
+      margin-top: 20px;
+      color: var(--azionelab-muted);
+      line-height: 1.5;
+    }
+
+    @media (max-width: 900px) {
+      .hero {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePageComponent {
+  protected readonly apiBaseUrl = inject(API_BASE_URL);
+}