feat: refresh frontend visual design

frontend/src/app/app.component.ts

@@ -1,8 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
   selector: 'app-root',
@@ -11,56 +9,108 @@ import { MatToolbarModule } from '@angular/material/toolbar';
     RouterOutlet,
     RouterLink,
     RouterLinkActive,
-    MatToolbarModule,
     MatButtonModule,
-    MatIconModule,
   ],
   template: `
     <div class="app-shell">
-      <mat-toolbar class="app-toolbar">
-        <a class="brand" routerLink="/">
-          <span class="brand-mark">A</span>
-          <span class="brand-text">
-            <strong>AzioneLab</strong>
-            <small>Theatre and reservations</small>
-          </span>
-        </a>
+      <div class="topline">
+        <div class="topline-inner">
+          <span>Rome-based theatre company</span>
+          <span>Reservations, confirmation, and entrance check-in</span>
+        </div>
+      </div>
 
-        <nav class="main-nav">
-          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
-          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
-          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
-        </nav>
-      </mat-toolbar>
+      <header class="site-header">
+        <div class="header-inner">
+          <a class="brand" routerLink="/">
+            <span class="brand-mark">A</span>
+            <span class="brand-text">
+              <strong>AzioneLab</strong>
+              <small>Independent theatre company</small>
+            </span>
+          </a>
+
+          <nav class="main-nav" aria-label="Primary navigation">
+            <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
+            <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
+            <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
+          </nav>
+
+          <div class="header-actions">
+            <a mat-stroked-button routerLink="/shows">Book a performance</a>
+          </div>
+        </div>
+      </header>
 
       <main class="page-shell">
         <router-outlet></router-outlet>
       </main>
+
+      <footer class="site-footer">
+        <div class="footer-inner">
+          <div>
+            <p class="footer-title">AzioneLab</p>
+            <p class="footer-copy">Contemporary theatre evenings, small venues, and a lightweight booking flow built for real audiences.</p>
+          </div>
+          <nav class="footer-nav" aria-label="Footer navigation">
+            <a routerLink="/">Home</a>
+            <a routerLink="/shows">Shows</a>
+            <a routerLink="/check-in">Check-in</a>
+          </nav>
+        </div>
+      </footer>
     </div>
   `,
   styles: [`
     .app-shell {
       min-height: 100vh;
+      display: flex;
+      flex-direction: column;
     }
 
-    .app-toolbar {
-      position: sticky;
-      top: 0;
-      z-index: 10;
+    .topline {
+      background: var(--azionelab-surface-dark);
+      color: rgba(255, 247, 239, 0.84);
+      font-size: 0.85rem;
+    }
+
+    .topline-inner,
+    .header-inner,
+    .footer-inner {
+      width: min(100%, var(--azionelab-shell-width));
+      margin: 0 auto;
+    }
+
+    .topline-inner {
       display: flex;
       justify-content: space-between;
       gap: 16px;
-      min-height: 72px;
-      padding: 0 24px;
-      background: rgba(251, 247, 242, 0.88);
-      backdrop-filter: blur(18px);
+      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);
       border-bottom: 1px solid var(--azionelab-border);
     }
 
+    .header-inner {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 18px;
+      min-height: 82px;
+      padding: 0 20px;
+    }
+
     .brand {
       display: inline-flex;
       align-items: center;
-      gap: 12px;
+      gap: 14px;
       color: inherit;
       text-decoration: none;
     }
@@ -68,49 +118,117 @@ import { MatToolbarModule } from '@angular/material/toolbar';
     .brand-mark {
       display: inline-grid;
       place-items: center;
-      width: 42px;
-      height: 42px;
-      border-radius: 10px;
-      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
-      color: white;
+      width: 48px;
+      height: 48px;
+      border-radius: 14px;
+      background: linear-gradient(145deg, var(--azionelab-accent), var(--azionelab-accent-soft));
+      color: #fff8f2;
       font-weight: 700;
+      box-shadow: 0 14px 30px rgba(111, 40, 33, 0.18);
     }
 
     .brand-text {
       display: flex;
       flex-direction: column;
-      line-height: 1.1;
+      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.74rem;
+      font-size: 0.78rem;
     }
 
     .main-nav {
       display: flex;
       align-items: center;
-      gap: 4px;
+      justify-content: center;
+      gap: 6px;
       flex-wrap: wrap;
     }
 
     .main-nav .active {
-      background: rgba(159, 47, 40, 0.08);
+      background: rgba(143, 51, 45, 0.1);
+    }
+
+    .header-actions {
+      display: flex;
+      justify-content: flex-end;
     }
 
     .page-shell {
-      padding: 32px 20px 56px;
+      flex: 1;
+      padding: 40px 20px 72px;
+    }
+
+    .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));
+    }
+
+    .footer-inner {
+      display: grid;
+      grid-template-columns: minmax(0, 1.5fr) auto;
+      gap: 24px;
+      align-items: start;
+      padding: 28px 20px 34px;
+    }
+
+    .footer-title {
+      margin: 0 0 8px;
+      font-family: var(--azionelab-serif);
+      font-size: 1.15rem;
+      font-weight: 700;
+      color: var(--azionelab-ink);
+    }
+
+    .footer-copy {
+      margin: 0;
+      max-width: 52ch;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .footer-nav {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 14px;
+    }
+
+    .footer-nav a {
+      color: var(--azionelab-ink-soft);
+      text-decoration: none;
     }
 
     @media (max-width: 800px) {
-      .app-toolbar {
+      .header-inner {
+        grid-template-columns: 1fr;
         align-items: flex-start;
-        flex-direction: column;
-        padding: 16px 16px 14px;
+        padding: 16px;
       }
 
       .main-nav {
         width: 100%;
+        justify-content: flex-start;
+      }
+
+      .header-actions {
+        width: 100%;
+      }
+
+      .footer-inner {
+        grid-template-columns: 1fr;
+        padding: 24px 16px 28px;
+      }
+
+      .page-shell {
+        padding: 28px 16px 52px;
       }
     }
   `],