JoeKung/print-calculator
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web): improvements in home and about us
Some checks failed
Build, Test and Deploy / test-backend (push) Failing after 1m55s
Details
Build, Test and Deploy / build-and-push (push) Has been skipped
Details
Build, Test and Deploy / deploy (push) Has been skipped
Details

Browse Source
This commit is contained in:
Joe Küng
2026-02-09 17:38:02 +01:00
parent 4f301b1652
commit b3c0413b7c
9 changed files with 288 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/features/about/about-page.component.html
View File

@@ -40,3 +40,5 @@
</div>
</section>
<app-locations></app-locations>

4
frontend/src/app/features/about/about-page.component.ts
View File

@@ -1,11 +1,11 @@
import { Component } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { AppLocationsComponent } from '../../shared/components/app-locations/app-locations.component';
@Component({
selector: 'app-about-page',
standalone: true,
imports: [TranslateModule],
imports: [TranslateModule, AppLocationsComponent],
templateUrl: './about-page.component.html',
styleUrl: './about-page.component.scss'
})

70
frontend/src/app/features/home/home.component.html
View File

@@ -7,13 +7,17 @@
Prezzo e tempi in pochi secondi.<br>
Dal file 3D al pezzo finito.
</h1>
<p class="hero-lead">
Il calcolatore più avanzato per le tue stampe 3D: precisione assoluta e zero sorprese.
</p>
<p class="hero-subtitle">
Lavoriamo con trasparenza su costi, qualità e tempi. Produciamo prototipi, pezzi personalizzati
e piccole serie con supporto tecnico reale.
Realizziamo pezzi unici e produzioni in serie. Se hai il file, il preventivo è istantaneo.
Se devi ancora crearlo, il nostro team di design lo progetterà per te.
</p>
<div class="hero-actions">
<app-button variant="primary" routerLink="/about">Parla con noi</app-button>
<app-button variant="primary" routerLink="/cal">Calcola Preventivo</app-button>
<app-button variant="outline" routerLink="/shop">Vai allo shop</app-button>
<app-button variant="text" routerLink="/contact">Parla con noi</app-button>
</div>
</div>
</div>
@@ -22,13 +26,12 @@
<section class="section calculator">
<div class="container calculator-grid">
<div class="calculator-copy">
<h2 class="section-title">Preventivo immediato</h2>
<h2 class="section-title">Preventivo immediato in pochi secondi</h2>
<p class="section-subtitle">
Carica il file 3D e ottieni subito costo e tempo di stampa. Nessuna registrazione.
Nessuna registrazione necessaria. Non salviamo il tuo file fino al momento dell'ordine e la stima è effettuata tramite vero slicing.
</p>
<ul class="calculator-list">
<li>Formati supportati: STL, 3MF, STEP, OBJ</li>
<li>Materiali disponibili: PLA, PETG, TPU</li>
<li>Qualità: bozza, standard, alta definizione</li>
</ul>
</div>
@@ -45,19 +48,9 @@
<li>Scegli materiale e qualità</li>
<li>Ricevi subito costo e tempo</li>
</ul>
<div class="quote-meta">
<div>
<span class="meta-label">Modalità</span>
<span class="meta-value">Rapida / Avanzata</span>
</div>
<div>
<span class="meta-label">Output</span>
<span class="meta-value">Ordina o richiedi consulenza</span>
</div>
</div>
<div class="quote-actions">
<app-button variant="primary" [fullWidth]="true" routerLink="/cal">Apri calcolatore</app-button>
<app-button variant="outline" [fullWidth]="true" routerLink="/about">Parla con noi</app-button>
<app-button variant="outline" [fullWidth]="true" routerLink="/contact">Parla con noi</app-button>
</div>
</app-card>
</div>
@@ -74,20 +67,32 @@
</div>
<div class="cap-cards">
<app-card>
<div class="card-image-placeholder">
<!-- <img src="..." alt="..."> -->
</div>
<h3>Prototipazione veloce</h3>
<p class="text-muted">Valida idee e funzioni in pochi giorni con preventivo immediato.</p>
<p class="text-muted">Dal file digitale al modello fisico in 24/48 ore. Verifica ergonomia, incastri e funzionamento prima dello stampo definitivo.</p>
</app-card>
<app-card>
<div class="card-image-placeholder">
<!-- <img src="..." alt="..."> -->
</div>
<h3>Pezzi personalizzati</h3>
<p class="text-muted">Componenti unici o in mini serie per clienti, macchine e prodotti.</p>
<p class="text-muted">Componenti unici impossibili da trovare in commercio. Riproduciamo parti rotte o creiamo adattamenti su misura.</p>
</app-card>
<app-card>
<div class="card-image-placeholder">
<!-- <img src="..." alt="..."> -->
</div>
<h3>Piccole serie</h3>
<p class="text-muted">Produzione controllata fino a 500 pezzi con qualità costante.</p>
<p class="text-muted">Produzione ponte o serie limitate (10-500 pezzi) con qualità ripetibile. Ideale per validazione di mercato.</p>
</app-card>
<app-card>
<div class="card-image-placeholder">
<!-- <img src="..." alt="..."> -->
</div>
<h3>Consulenza e CAD</h3>
<p class="text-muted">Supporto tecnico per progettazione, modifiche e ottimizzazione.</p>
<p class="text-muted">Non hai il file 3D? Ti aiutiamo a progettarlo, ottimizzarlo per la stampa e scegliere il materiale giusto.</p>
</app-card>
</div>
</div>
@@ -108,7 +113,7 @@
</ul>
<div class="shop-actions">
<app-button variant="primary" routerLink="/shop">Scopri i prodotti</app-button>
<app-button variant="outline" routerLink="/about">Richiedi una soluzione</app-button>
<app-button variant="outline" routerLink="/contact">Richiedi una soluzione</app-button>
</div>
</div>
<div class="shop-cards">
@@ -136,25 +141,12 @@
3D fab è un laboratorio tecnico di stampa 3D. Seguiamo progetti dalla consulenza iniziale
alla produzione, con tempi chiari e supporto diretto.
</p>
<p class="text-muted">
Qui puoi inserire descrizioni più dettagliate del team, del laboratorio e dei progetti in corso.
</p>
<app-button variant="outline" routerLink="/about">Contattaci</app-button>
<app-button variant="outline" routerLink="/contact">Contattaci</app-button>
</div>
<div class="about-media">
<div class="media-grid">
<div class="media-tile">
<div class="media-photo"></div>
<p>Foto laboratorio / stampanti</p>
</div>
<div class="media-tile">
<div class="media-photo"></div>
<p>Dettagli qualità e finiture</p>
</div>
<div class="media-tile">
<div class="media-photo"></div>
<p>Team, prototipi o casi studio</p>
</div>
<div class="about-feature-image">
<!-- Foto founders -->
<span class="text-sm">Foto Founders</span>
</div>
</div>
</div>

78
frontend/src/app/features/home/home.component.scss
View File

@@ -15,10 +15,10 @@
position: absolute;
inset: 0;
@include patterns.pattern-grid(var(--color-neutral-900), 40px, 1px);
opacity: 0.12;
opacity: 0.06;
z-index: 0;
pointer-events: none;
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}
}
@@ -43,6 +43,7 @@
position: relative;
z-index: 1;
}
.hero-copy { animation: fadeUp 0.8s ease both; }
.hero-panel { animation: fadeUp 0.8s ease 0.15s both; }
@@ -61,10 +62,18 @@
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
}
.hero-lead {
font-size: 1.35rem;
font-weight: 500;
color: var(--color-neutral-900);
margin-bottom: var(--space-3);
max-width: 600px;
}
.hero-subtitle {
font-size: 1.2rem;
font-size: 1.1rem;
color: var(--color-text-muted);
max-width: 560px;
line-height: 1.6;
}
.hero-actions {
display: flex;
@@ -135,6 +144,9 @@
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-brand-600);
background: var(--color-brand-50);
border-color: var(--color-brand-200);
}
.quote-steps {
list-style: none;
@@ -177,14 +189,10 @@
.capabilities {
position: relative;
border-bottom: 1px solid var(--color-border);
}
.capabilities-bg {
position: absolute;
inset: 0;
@include patterns.pattern-rectilinear(var(--color-neutral-900), 24px, 1px);
opacity: 0.05;
pointer-events: none;
z-index: 0;
display: none;
}
.section { padding: 5.5rem 0; position: relative; }
@@ -194,24 +202,13 @@
.text-muted { color: var(--color-text-muted); }
.calculator {
background: var(--color-neutral-50);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
position: relative;
// Honeycomb Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-honeycomb(var(--color-neutral-900), 24px);
opacity: 0.04;
pointer-events: none;
}
border-bottom: 1px solid var(--color-border);
}
.calculator-grid {
display: grid;
gap: var(--space-10);
align-items: center;
align-items: start;
position: relative;
z-index: 1;
}
@@ -225,6 +222,19 @@
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card-image-placeholder {
width: 100%;
height: 160px;
background: var(--color-neutral-100);
margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Negative margins to bleed to edge */
width: calc(100% + 3rem);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-neutral-400);
}
.shop {
background: var(--color-neutral-50);
@@ -282,24 +292,21 @@
align-items: center;
}
.about-media {
display: grid;
gap: var(--space-4);
position: relative;
}
.media-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.media-tile {
display: grid;
gap: var(--space-2);
}
.media-photo {
.about-feature-image {
width: 100%;
aspect-ratio: 4 / 3;
height: 100%;
min-height: 320px;
object-fit: cover;
border-radius: var(--radius-lg);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
}
.media-tile p {
margin: 0;
@@ -313,6 +320,7 @@
@media (min-width: 960px) {
.hero-grid { grid-template-columns: 1.1fr 0.9fr; }
.calculator-grid { grid-template-columns: 1.1fr 0.9fr; }
.calculator-grid { grid-template-columns: 1.1fr 0.9fr; }
.split { grid-template-columns: 1.1fr 0.9fr; }
.about-grid { grid-template-columns: 1.1fr 0.9fr; }
}