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

dev #5

Merged
JoeKung merged 17 commits from dev into int 2026-02-09 18:43:44 +01:00
Conversation 0 Commits 17 Files Changed 78 +288 -76
9 changed files with 288 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b3c0413b7c - Show all commits

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; }
}

57
frontend/src/app/shared/components/app-locations/app-locations.component.html Normal file
View File

@@ -0,0 +1,57 @@
<section class="locations-section">
<div class="container">
<div class="section-header">
<h2>{{ 'LOCATIONS.TITLE' | translate }}</h2>
<p class="subtitle">{{ 'LOCATIONS.SUBTITLE' | translate }}</p>
</div>
<div class="locations-grid">
<div class="locations-controls">
<div class="location-tabs">
<button
class="tab-btn"
[class.active]="selectedLocation === 'ticino'"
(click)="selectLocation('ticino')">
{{ 'LOCATIONS.TICINO' | translate }}
</button>
<button
class="tab-btn"
[class.active]="selectedLocation === 'bienne'"
(click)="selectLocation('bienne')">
{{ 'LOCATIONS.BIENNE' | translate }}
</button>
</div>
<div class="location-details">
<div *ngIf="selectedLocation === 'ticino'" class="details-card">
<h3>{{ 'LOCATIONS.TICINO' | translate }}</h3>
<p>{{ 'LOCATIONS.ADDRESS_TICINO' | translate }}</p>
</div>
<div *ngIf="selectedLocation === 'bienne'" class="details-card">
<h3>{{ 'LOCATIONS.BIENNE' | translate }}</h3>
<p>{{ 'LOCATIONS.ADDRESS_BIENNE' | translate }}</p>
</div>
<div class="actions">
<a routerLink="/contact" class="contact-btn">
{{ 'LOCATIONS.CONTACT_US' | translate }}
</a>
</div>
</div>
</div>
<div class="map-container">
<iframe
*ngIf="selectedLocation === 'ticino'"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d177305.41680509657!2d8.826330925208468!3d46.00511195679905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4784407817452d5b%3A0x6a0c0e86b976660!2sTicino%2C%20Svizzera!5e0!3m2!1sit!2sit!4v1700000000000!5m2!1sit!2sit"
width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<iframe
*ngIf="selectedLocation === 'bienne'"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d43521.94247549427!2d7.211756262451172!3d47.13677764958641!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e192760f384f9%3A0xcb281f622956f4e6!2sBiel%2C%20Svizzera!5e0!3m2!1sit!2sit!4v1700000000000!5m2!1sit!2sit"
width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</div>
</div>
</section>

116
frontend/src/app/shared/components/app-locations/app-locations.component.scss Normal file
View File

@@ -0,0 +1,116 @@
.locations-section {
padding: 6rem 0;
background: var(--color-surface-card);
border-top: 1px solid var(--color-border);
}
.section-header {
text-align: center;
margin-bottom: 4rem;
h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--color-text-main);
}
.subtitle {
font-size: 1.1rem;
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
}
}
.locations-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
@media(min-width: 992px) {
grid-template-columns: 1fr 2fr;
}
}
.location-tabs {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
background: var(--color-bg);
padding: 0.5rem;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.tab-btn {
flex: 1;
padding: 0.75rem;
border: none;
background: transparent;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
color: var(--color-text-main);
}
&.active {
background: var(--color-primary-500);
color: var(--color-neutral-900);
box-shadow: var(--shadow-sm);
}
}
.location-details {
padding: 2rem;
background: var(--color-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
p {
color: var(--color-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
}
.contact-btn {
display: inline-block;
padding: 0.75rem 2rem;
background: var(--color-primary-500);
color: var(--color-neutral-900);
text-decoration: none;
border-radius: var(--radius-md);
font-weight: 600;
transition: all 0.2s ease;
&:hover {
background: var(--color-primary-600);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
}
.map-container {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
background: var(--color-bg);
height: 450px;
iframe {
width: 100%;
height: 100%;
}
}

19
frontend/src/app/shared/components/app-locations/app-locations.component.ts Normal file
View File

@@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-locations',
standalone: true,
imports: [CommonModule, TranslateModule, RouterLink],
templateUrl: './app-locations.component.html',
styleUrl: './app-locations.component.scss'
})
export class AppLocationsComponent {
selectedLocation: 'ticino' | 'bienne' = 'ticino';
selectLocation(location: 'ticino' | 'bienne') {
this.selectedLocation = location;
}
}

9
frontend/src/assets/i18n/en.json
View File

@@ -68,6 +68,15 @@
"TARGET_TEXT": "Small businesses, freelancers, makers and customers looking for a ready-made product from the shop.",
"TEAM_TITLE": "Our Team"
},
"LOCATIONS": {
"TITLE": "Our Locations",
"SUBTITLE": "We have two locations to serve you better. Select a location to see details.",
"TICINO": "Ticino",
"BIENNE": "Bienne",
"ADDRESS_TICINO": "Ticino Office, Switzerland",
"ADDRESS_BIENNE": "Bienne Office, Switzerland",
"CONTACT_US": "Contact Us"
},
"CONTACT": {
"TITLE": "Contact Us",
"SEND": "Send Message",

9
frontend/src/assets/i18n/it.json
View File

@@ -70,6 +70,15 @@
"TARGET_TEXT": "Piccole aziende, freelance, smanettoni e clienti che cercano un prodotto già pronto dallo shop.",
"TEAM_TITLE": "Il Nostro Team"
},
"LOCATIONS": {
"TITLE": "Le Nostre Sedi",
"SUBTITLE": "Siamo presenti in due sedi per coprire meglio il territorio. Seleziona la sede per vedere i dettagli.",
"TICINO": "Ticino",
"BIENNE": "Bienne",
"ADDRESS_TICINO": "Sede Ticino, Svizzera",
"ADDRESS_BIENNE": "Sede Bienne, Svizzera",
"CONTACT_US": "Contattaci"
},
"CONTACT": {
"TITLE": "Contattaci",
"SEND": "Invia Messaggio",