generated from bisco/codex-bootstrap
114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
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);
|
|
}
|