generated from bisco/codex-bootstrap
316 lines
8.7 KiB
TypeScript
316 lines
8.7 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 page">
|
|
<div class="hero-copy">
|
|
<img class="hero-logo" src="assets/azione-lab.jpg" alt="AzioneLab" />
|
|
<p class="eyebrow">AzioneLab</p>
|
|
<h1>Laboratori, scena e produzioni che mettono il pubblico al centro.</h1>
|
|
<p class="supporting">
|
|
AzioneLab intreccia laboratori teatrali, produzioni audio/visive e una presenza scenica pensata per spazi vivi e raccolti. Il sito accompagna il pubblico con chiarezza: scoperta degli spettacoli, prenotazione essenziale, conferma serena all'ingresso.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a mat-flat-button color="primary" routerLink="/shows">Scopri gli spettacoli</a>
|
|
<a mat-stroked-button routerLink="/check-in">Area accoglienza</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-stage" aria-hidden="true">
|
|
<div class="curtain"></div>
|
|
<div class="stage-glow"></div>
|
|
<div class="stage-copy">
|
|
<span>Questa sera da AzioneLab</span>
|
|
<strong>Le porte aprono 30 minuti prima dell'inizio</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="overview page">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">In breve</p>
|
|
<h2>Un sito pensato per una compagnia viva, non per una macchina impersonale di biglietteria</h2>
|
|
</div>
|
|
<p class="supporting">L'esperienza pubblica resta semplice: scegli uno spettacolo, richiedi i posti, conferma via email, arriva con il tuo QR code.</p>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<mat-card class="feature-card">
|
|
<mat-card-title>Scegli la replica giusta</mat-card-title>
|
|
<mat-card-content>
|
|
<p>Le schede degli spettacoli tengono in primo piano luogo, orari e disponibilita', senza confusione.</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<mat-card class="feature-card">
|
|
<mat-card-title>Conferma via email</mat-card-title>
|
|
<mat-card-content>
|
|
<p>Le richieste restano in attesa finche' il pubblico non conferma, cosi' la capienza resta affidabile e semplice da gestire.</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<mat-card class="feature-card">
|
|
<mat-card-title>Accoglienza rapida</mat-card-title>
|
|
<mat-card-content>
|
|
<p>Lo staff puo' verificare il token, controllarlo lato server e registrare l'ingresso in un flusso compatto.</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="journey-grid page">
|
|
<div class="journey-copy">
|
|
<p class="eyebrow">Percorso del pubblico</p>
|
|
<h2>Dall'interesse all'ingresso in pochi passaggi chiari</h2>
|
|
<ol>
|
|
<li>Esplora la programmazione pubblica e apri la scheda di uno spettacolo.</li>
|
|
<li>Richiedi i posti per una replica e conferma via email.</li>
|
|
<li>Tieni pronto il QR code sul telefono o su carta per l'ingresso.</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<mat-card class="meta-card">
|
|
<mat-card-title>Base tecnica</mat-card-title>
|
|
<mat-card-content>
|
|
<p class="meta-label">URL base API</p>
|
|
<code>{{ apiBaseUrl }}</code>
|
|
<p class="meta-note">Il frontend resta allineato alle API Django gia' esistenti, senza cambiare i contratti del backend.</p>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</section>
|
|
`,
|
|
styles: [`
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
|
|
gap: 28px;
|
|
align-items: stretch;
|
|
padding: 12px 0 24px;
|
|
}
|
|
|
|
.hero-copy {
|
|
padding: 34px 0 20px;
|
|
}
|
|
|
|
.hero-logo {
|
|
width: min(220px, 52vw);
|
|
height: auto;
|
|
display: block;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
max-width: 11ch;
|
|
font-size: 3.85rem;
|
|
}
|
|
|
|
.supporting {
|
|
margin: 20px 0 0;
|
|
font-size: 1.06rem;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.hero-stage {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 420px;
|
|
border-radius: var(--azionelab-radius-lg);
|
|
border: 1px solid rgba(255, 250, 245, 0.16);
|
|
background:
|
|
linear-gradient(180deg, rgba(31, 18, 18, 0.1), rgba(27, 18, 14, 0.62)),
|
|
linear-gradient(135deg, #b04b40 0%, #7f251f 24%, #43261f 56%, #211b1a 100%);
|
|
box-shadow: var(--azionelab-shadow-strong);
|
|
}
|
|
|
|
.curtain {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.08) 100%),
|
|
repeating-linear-gradient(90deg, rgba(75, 18, 14, 0.2) 0 18px, rgba(160, 60, 52, 0.08) 18px 36px);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.stage-glow {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -80px;
|
|
width: 340px;
|
|
height: 340px;
|
|
transform: translateX(-50%);
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(245, 214, 150, 0.9) 0, rgba(245, 214, 150, 0.22) 44%, rgba(245, 214, 150, 0) 72%);
|
|
}
|
|
|
|
.stage-copy {
|
|
position: absolute;
|
|
left: 24px;
|
|
right: 24px;
|
|
bottom: 24px;
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 18px 20px;
|
|
border-radius: 18px;
|
|
background: rgba(24, 17, 15, 0.52);
|
|
backdrop-filter: blur(8px);
|
|
color: rgba(255, 247, 239, 0.94);
|
|
border: 1px solid rgba(255, 247, 239, 0.12);
|
|
}
|
|
|
|
.stage-copy span {
|
|
text-transform: uppercase;
|
|
font-size: 0.76rem;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(255, 227, 192, 0.84);
|
|
}
|
|
|
|
.stage-copy strong {
|
|
font-family: var(--azionelab-serif);
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.overview,
|
|
.journey-grid {
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.section-heading {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
|
|
gap: 24px;
|
|
align-items: end;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-heading h2,
|
|
.journey-copy h2 {
|
|
margin: 0;
|
|
max-width: 18ch;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
|
|
.feature-card,
|
|
.meta-card {
|
|
border-radius: var(--azionelab-radius-md);
|
|
border: 1px solid var(--azionelab-border);
|
|
background: linear-gradient(180deg, rgba(255, 253, 250, 0.98), rgba(251, 245, 236, 0.94));
|
|
box-shadow: var(--azionelab-shadow);
|
|
}
|
|
|
|
.feature-card {
|
|
min-height: 210px;
|
|
}
|
|
|
|
.feature-card mat-card-title,
|
|
.meta-card mat-card-title {
|
|
margin-bottom: 12px;
|
|
font-family: var(--azionelab-serif);
|
|
font-size: 1.18rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.feature-card p,
|
|
.meta-card p {
|
|
margin: 0;
|
|
color: var(--azionelab-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.journey-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.9fr);
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
.journey-copy {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
ol {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 20px 0 0;
|
|
padding-left: 22px;
|
|
color: var(--azionelab-ink-soft);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.meta-label {
|
|
margin: 0 0 10px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--azionelab-muted);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
code {
|
|
display: inline-block;
|
|
padding: 10px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(34, 28, 24, 0.06);
|
|
color: var(--azionelab-ink-soft);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.meta-note {
|
|
margin: 18px 0 0;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hero,
|
|
.section-heading,
|
|
.journey-grid,
|
|
.feature-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.9rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
h1 {
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.hero-stage {
|
|
min-height: 320px;
|
|
}
|
|
|
|
.stage-copy {
|
|
left: 16px;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
padding: 16px;
|
|
}
|
|
}
|
|
`],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class HomePageComponent {
|
|
protected readonly apiBaseUrl = inject(API_BASE_URL);
|
|
}
|