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

dev #3

Merged
JoeKung merged 34 commits from dev into int 2026-02-05 15:30:05 +01:00
Conversation 0 Commits 34 Files Changed 111 +673 -638
10 changed files with 673 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit af5b40021d - Show all commits

21
frontend/src/app/core/layout/footer.component.html Normal file
View File

@@ -0,0 +1,21 @@
<footer class="footer">
<div class="container footer-inner">
<div class="col">
<span class="brand">3D fab</span>
<p class="copyright">&copy; 2026 3D fab.</p>
</div>
<div class="col links">
<a routerLink="/privacy">{{ 'FOOTER.PRIVACY' | translate }}</a>
<a routerLink="/terms">{{ 'FOOTER.TERMS' | translate }}</a>
<a routerLink="/about">{{ 'FOOTER.CONTACT' | translate }}</a>
</div>
<div class="col social">
<!-- Social Placeholders -->
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
</div>
</div>
</footer>

43
frontend/src/app/core/layout/footer.component.scss Normal file
View File

@@ -0,0 +1,43 @@
@use '../../../styles/patterns';
.footer {
background: var(--color-neutral-900);
color: var(--color-neutral-50);
padding: var(--space-8) 0 var(--space-4);
font-size: 0.9rem;
position: relative;
margin-top: auto; /* Push to bottom if content is short */
// Cross Hatch Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-cross-hatch(var(--color-neutral-50), 20px, 1px);
opacity: 0.05;
pointer-events: none;
}
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.brand { font-weight: 700; color: white; display: block; margin-bottom: var(--space-2); }
.copyright { font-size: 0.875rem; color: var(--color-secondary-500); margin: 0; }
.links {
display: flex;
gap: var(--space-6);
a {
color: var(--color-neutral-300);
font-size: 0.875rem;
&:hover { color: white; text-decoration: underline; }
}
}
.social { display: flex; gap: var(--space-3); }
.social-icon {
width: 24px; height: 24px;
background-color: var(--color-neutral-800);
border-radius: 50%;
}

57
frontend/src/app/core/layout/footer.component.ts
View File

@@ -6,60 +6,7 @@ import { RouterLink } from '@angular/router';
selector: 'app-footer',
standalone: true,
imports: [TranslateModule, RouterLink],
template: `
<footer class="footer">
<div class="container footer-inner">
<div class="col">
<span class="brand">3D fab</span>
<p class="copyright">&copy; 2026 3D fab.</p>
</div>
<div class="col links">
<a routerLink="/privacy">{{ 'FOOTER.PRIVACY' | translate }}</a>
<a routerLink="/terms">{{ 'FOOTER.TERMS' | translate }}</a>
<a routerLink="/about">{{ 'FOOTER.CONTACT' | translate }}</a>
</div>
<div class="col social">
<!-- Social Placeholders -->
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
</div>
</div>
</footer>
`,
styles: [`
.footer {
background-color: var(--color-neutral-900);
color: var(--color-neutral-300);
padding: var(--space-8) 0;
margin-top: auto; /* Push to bottom if content is short */
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.brand { font-weight: 700; color: white; display: block; margin-bottom: var(--space-2); }
.copyright { font-size: 0.875rem; color: var(--color-secondary-500); margin: 0; }
.links {
display: flex;
gap: var(--space-6);
a {
color: var(--color-neutral-300);
font-size: 0.875rem;
&:hover { color: white; text-decoration: underline; }
}
}
.social { display: flex; gap: var(--space-3); }
.social-icon {
width: 24px; height: 24px;
background-color: var(--color-neutral-800);
border-radius: 50%;
}
`]
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent {}

21
frontend/src/app/core/layout/navbar.component.html Normal file
View File

@@ -0,0 +1,21 @@
<header class="navbar">
<div class="container navbar-inner">
<a routerLink="/" class="brand">3D <span class="highlight">fab</span></a>
<nav class="nav-links">
<a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">{{ 'NAV.CALCULATOR' | translate }}</a>
<a routerLink="/shop" routerLinkActive="active">{{ 'NAV.SHOP' | translate }}</a>
<a routerLink="/about" routerLinkActive="active">{{ 'NAV.ABOUT' | translate }}</a>
</nav>
<div class="actions">
<button class="lang-switch" (click)="toggleLang()">
{{ langService.currentLang() === 'it' ? 'EN' : 'IT' }}
</button>
<div class="icon-placeholder">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</div>
</div>
</div>
</header>

67
frontend/src/app/core/layout/navbar.component.scss Normal file
View File

@@ -0,0 +1,67 @@
.navbar {
height: 64px;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-card);
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.highlight { color: var(--color-brand); }
.nav-links {
display: flex;
gap: var(--space-6);
a {
color: var(--color-text-muted);
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
&:hover, &.active {
color: var(--color-brand);
}
}
}
.actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
.lang-switch {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-muted);
&:hover { color: var(--color-text); border-color: var(--color-text); }
}
.icon-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-neutral-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
}

94
frontend/src/app/core/layout/navbar.component.ts
View File

@@ -8,98 +8,8 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
selector: 'app-navbar',
standalone: true,
imports: [RouterLink, RouterLinkActive, TranslateModule],
template: `
<header class="navbar">
<div class="container navbar-inner">
<a routerLink="/" class="brand">3D <span class="highlight">fab</span></a>
<nav class="nav-links">
<a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">{{ 'NAV.CALCULATOR' | translate }}</a>
<a routerLink="/shop" routerLinkActive="active">{{ 'NAV.SHOP' | translate }}</a>
<a routerLink="/about" routerLinkActive="active">{{ 'NAV.ABOUT' | translate }}</a>
</nav>
<div class="actions">
<button class="lang-switch" (click)="toggleLang()">
{{ langService.currentLang() === 'it' ? 'EN' : 'IT' }}
</button>
<div class="icon-placeholder">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</div>
</div>
</div>
</header>
`,
styles: [`
.navbar {
height: 64px;
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-card);
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.brand {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
}
.highlight { color: var(--color-brand); }
.nav-links {
display: flex;
gap: var(--space-6);
a {
color: var(--color-text-muted);
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
&:hover, &.active {
color: var(--color-brand);
}
}
}
.actions {
display: flex;
align-items: center;
gap: var(--space-4);
}
.lang-switch {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-muted);
&:hover { color: var(--color-text); border-color: var(--color-text); }
}
.icon-placeholder {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--color-neutral-100);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
}
`]
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
constructor(public langService: LanguageService) {}

162
frontend/src/app/features/home/home.component.html Normal file
View File

@@ -0,0 +1,162 @@
<main class="home-page">
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<p class="eyebrow">Stampa 3D tecnica per aziende, freelance e maker</p>
<h1 class="hero-title">
Prezzo e tempi in pochi secondi.<br>
Dal file 3D al pezzo finito.
</h1>
<p class="hero-subtitle">
Lavoriamo con trasparenza su costi, qualità e tempi. Produciamo prototipi, pezzi personalizzati
e piccole serie con supporto tecnico reale.
</p>
<div class="hero-actions">
<app-button variant="primary" routerLink="/about">Parla con noi</app-button>
<app-button variant="outline" routerLink="/shop">Vai allo shop</app-button>
</div>
</div>
</div>
</section>
<section class="section calculator">
<div class="container calculator-grid">
<div class="calculator-copy">
<h2 class="section-title">Preventivo immediato</h2>
<p class="section-subtitle">
Carica il file 3D e ottieni subito costo e tempo di stampa. Nessuna registrazione.
</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>
<app-card class="quote-card">
<div class="quote-header">
<div>
<p class="quote-eyebrow">Calcolo automatico</p>
<h3 class="quote-title">Prezzo e tempi in un click</h3>
</div>
<span class="quote-tag">Senza registrazione</span>
</div>
<ul class="quote-steps">
<li>Carica il file 3D</li>
<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>
</div>
</app-card>
</div>
</section>
<section class="section capabilities">
<div class="capabilities-bg"></div>
<div class="container">
<div class="section-head">
<h2 class="section-title">Cosa puoi ottenere</h2>
<p class="section-subtitle">
Produzione su misura per prototipi, piccole serie e pezzi personalizzati.
</p>
</div>
<div class="cap-cards">
<app-card>
<h3>Prototipazione veloce</h3>
<p class="text-muted">Valida idee e funzioni in pochi giorni con preventivo immediato.</p>
</app-card>
<app-card>
<h3>Pezzi personalizzati</h3>
<p class="text-muted">Componenti unici o in mini serie per clienti, macchine e prodotti.</p>
</app-card>
<app-card>
<h3>Piccole serie</h3>
<p class="text-muted">Produzione controllata fino a 500 pezzi con qualità costante.</p>
</app-card>
<app-card>
<h3>Consulenza e CAD</h3>
<p class="text-muted">Supporto tecnico per progettazione, modifiche e ottimizzazione.</p>
</app-card>
</div>
</div>
</section>
<section class="section shop">
<div class="container split">
<div class="shop-copy">
<h2 class="section-title">Shop di soluzioni tecniche pronte</h2>
<p>
Prodotti selezionati, testati in laboratorio e pronti all'uso. Risolvono problemi reali con
funzionalità concrete.
</p>
<ul class="shop-list">
<li>Accessori funzionali per officine e laboratori</li>
<li>Ricambi e componenti difficili da reperire</li>
<li>Supporti e organizzatori per migliorare i flussi di lavoro</li>
</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>
</div>
</div>
<div class="shop-cards">
<app-card>
<h3>Best seller tecnici</h3>
<p class="text-muted">Soluzioni provate sul campo e già pronte alla spedizione.</p>
</app-card>
<app-card>
<h3>Kit pronti all'uso</h3>
<p class="text-muted">Componenti compatibili e facili da montare senza sorprese.</p>
</app-card>
<app-card>
<h3>Su richiesta</h3>
<p class="text-muted">Non trovi quello che serve? Lo progettiamo e lo produciamo per te.</p>
</app-card>
</div>
</div>
</section>
<section class="section about">
<div class="container about-grid">
<div class="about-copy">
<h2 class="section-title">Su di noi</h2>
<p>
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>
</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>
</div>
</div>
</section>
</main>

337
frontend/src/app/features/home/home.component.scss Normal file
View File

@@ -0,0 +1,337 @@
@use '../../../styles/patterns';
.home-page {
background: var(--color-bg);
}
.hero {
position: relative;
padding: 6rem 0 5rem;
overflow: hidden;
background: var(--color-bg);
// Enhanced Grid Pattern
&::after {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-grid(var(--color-neutral-900), 40px, 1px);
opacity: 0.12;
z-index: 0;
pointer-events: none;
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
}
// Keep the accent blob
.hero::before {
content: '';
position: absolute;
width: 420px;
height: 420px;
right: -120px;
top: -160px;
background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.03), transparent 70%);
opacity: 0.8;
z-index: 0;
animation: floatGlow 12s ease-in-out infinite;
}
.hero-grid {
display: grid;
gap: var(--space-12);
align-items: center;
position: relative;
z-index: 1;
}
.hero-copy { animation: fadeUp 0.8s ease both; }
.hero-panel { animation: fadeUp 0.8s ease 0.15s both; }
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: var(--color-secondary-600);
margin-bottom: var(--space-3);
font-weight: 600;
}
.hero-title {
font-size: clamp(2.5rem, 2.4vw + 1.8rem, 4rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--color-text-muted);
max-width: 560px;
}
.hero-actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin: var(--space-6) 0 var(--space-4);
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.hero-badges span {
display: inline-flex;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--color-neutral-100);
color: var(--color-neutral-900);
font-size: 0.85rem;
font-weight: 600;
border: 1px solid var(--color-border);
}
.quote-card {
display: block;
}
.focus-card {
display: grid;
gap: var(--space-4);
}
.focus-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-2);
color: var(--color-text-muted);
}
.focus-list li::before {
content: '•';
color: var(--color-brand);
margin-right: var(--space-2);
}
.focus-list li {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.quote-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.quote-eyebrow {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--color-secondary-600);
margin: 0 0 var(--space-2);
}
.quote-title { margin: 0; font-size: 1.35rem; }
.quote-tag {
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
}
.quote-steps {
list-style: none;
padding: 0;
margin: 0 0 var(--space-5);
display: grid;
gap: var(--space-2);
}
.quote-steps li {
position: relative;
padding-left: 1.5rem;
color: var(--color-text-muted);
}
.quote-steps li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand);
position: absolute;
left: 0.25rem;
top: 0.5rem;
}
.quote-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.meta-label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-secondary-600);
margin-bottom: var(--space-1);
}
.meta-value { font-weight: 600; }
.quote-actions { display: grid; gap: var(--space-3); }
.capabilities {
position: relative;
}
.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;
}
.section { padding: 5.5rem 0; position: relative; }
.section-head { margin-bottom: var(--space-8); }
.section-title { font-size: clamp(2rem, 1.8vw + 1.2rem, 2.8rem); margin-bottom: var(--space-3); }
.section-subtitle { color: var(--color-text-muted); max-width: 620px; }
.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;
}
}
.calculator-grid {
display: grid;
gap: var(--space-10);
align-items: center;
position: relative;
z-index: 1;
}
.calculator-list {
padding-left: var(--space-4);
color: var(--color-text-muted);
margin: var(--space-6) 0 0;
}
.cap-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.shop {
background: var(--color-neutral-50);
position: relative;
// Triangular/Isogrid Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-triangular(var(--color-neutral-900), 40px);
opacity: 0.03;
pointer-events: none;
}
}
.split {
display: grid;
gap: var(--space-10);
align-items: center;
position: relative;
z-index: 1;
}
.shop-list {
padding-left: var(--space-4);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.shop-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.shop-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.about {
background: var(--color-neutral-50);
border-top: 1px solid var(--color-border);
position: relative;
// Gyroid Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-gyroid(var(--color-neutral-900), 40px);
opacity: 0.03;
pointer-events: none;
}
}
.about-grid {
display: grid;
gap: var(--space-10);
align-items: center;
}
.about-media {
display: grid;
gap: var(--space-4);
}
.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 {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
}
.media-tile p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.about-note {
padding: var(--space-5);
}
@media (min-width: 960px) {
.hero-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; }
}
@media (max-width: 640px) {
.hero-actions { flex-direction: column; align-items: stretch; }
.quote-meta { grid-template-columns: 1fr; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatGlow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-copy, .hero-panel { animation: none; }
.hero::before { animation: none; }
}

493
frontend/src/app/features/home/home.component.ts
View File

@@ -9,496 +9,7 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
selector: 'app-home-page',
standalone: true,
imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent, AppCardComponent],
template: `
<main class="home-page">
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<p class="eyebrow">Stampa 3D tecnica per aziende, freelance e maker</p>
<h1 class="hero-title">
Prezzo e tempi in pochi secondi.<br>
Dal file 3D al pezzo finito.
</h1>
<p class="hero-subtitle">
Lavoriamo con trasparenza su costi, qualità e tempi. Produciamo prototipi, pezzi personalizzati
e piccole serie con supporto tecnico reale.
</p>
<div class="hero-actions">
<app-button variant="primary" routerLink="/about">Parla con noi</app-button>
<app-button variant="outline" routerLink="/shop">Vai allo shop</app-button>
</div>
<div class="hero-badges">
<span>Trasparenza su prezzo, qualità e tempi</span>
<span>Prototipi e piccole serie fino a 500 pz</span>
<span>Progettazione CAD e post-processing su richiesta</span>
</div>
</div>
</div>
</section>
<section class="section calculator">
<div class="container calculator-grid">
<div class="calculator-copy">
<h2 class="section-title">Preventivo immediato</h2>
<p class="section-subtitle">
Carica il file 3D e ottieni subito costo e tempo di stampa. Nessuna registrazione.
</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>
<app-card class="quote-card">
<div class="quote-header">
<div>
<p class="quote-eyebrow">Calcolo automatico</p>
<h3 class="quote-title">Prezzo e tempi in un click</h3>
</div>
<span class="quote-tag">Senza registrazione</span>
</div>
<ul class="quote-steps">
<li>Carica il file 3D</li>
<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>
</div>
</app-card>
</div>
</section>
<section class="section capabilities">
<div class="container">
<div class="section-head">
<h2 class="section-title">Cosa puoi ottenere</h2>
<p class="section-subtitle">
Produzione su misura per prototipi, piccole serie e pezzi personalizzati.
</p>
</div>
<div class="cap-cards">
<app-card>
<h3>Prototipazione veloce</h3>
<p class="text-muted">Valida idee e funzioni in pochi giorni con preventivo immediato.</p>
</app-card>
<app-card>
<h3>Pezzi personalizzati</h3>
<p class="text-muted">Componenti unici o in mini serie per clienti, macchine e prodotti.</p>
</app-card>
<app-card>
<h3>Piccole serie</h3>
<p class="text-muted">Produzione controllata fino a 500 pezzi con qualità costante.</p>
</app-card>
<app-card>
<h3>Consulenza e CAD</h3>
<p class="text-muted">Supporto tecnico per progettazione, modifiche e ottimizzazione.</p>
</app-card>
</div>
</div>
</section>
<section class="section shop">
<div class="container split">
<div class="shop-copy">
<h2 class="section-title">Shop di soluzioni tecniche pronte</h2>
<p>
Prodotti selezionati, testati in laboratorio e pronti all'uso. Risolvono problemi reali con
funzionalità concrete.
</p>
<ul class="shop-list">
<li>Accessori funzionali per officine e laboratori</li>
<li>Ricambi e componenti difficili da reperire</li>
<li>Supporti e organizzatori per migliorare i flussi di lavoro</li>
</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>
</div>
</div>
<div class="shop-cards">
<app-card>
<h3>Best seller tecnici</h3>
<p class="text-muted">Soluzioni provate sul campo e già pronte alla spedizione.</p>
</app-card>
<app-card>
<h3>Kit pronti all'uso</h3>
<p class="text-muted">Componenti compatibili e facili da montare senza sorprese.</p>
</app-card>
<app-card>
<h3>Su richiesta</h3>
<p class="text-muted">Non trovi quello che serve? Lo progettiamo e lo produciamo per te.</p>
</app-card>
</div>
</div>
</section>
<section class="section about">
<div class="container about-grid">
<div class="about-copy">
<h2 class="section-title">Su di noi</h2>
<p>
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>
</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>
<app-card class="about-note">
<h3>Spazio per descrizioni</h3>
<p class="text-muted">
Inserisci qui testi più lunghi, riferimenti a clienti o processi interni.
</p>
</app-card>
</div>
</div>
</section>
</main>
`,
styles: [`
@use '../../../styles/patterns';
.home-page {
background: var(--color-bg);
}
.hero {
position: relative;
padding: 6rem 0 5rem;
overflow: hidden;
background: var(--color-bg);
// Enhanced Grid Pattern
&::after {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-grid(var(--color-neutral-900), 40px, 1px);
opacity: 0.12;
z-index: 0;
pointer-events: none;
mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
}
// Keep the accent blob
.hero::before {
content: '';
position: absolute;
width: 420px;
height: 420px;
right: -120px;
top: -160px;
background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.03), transparent 70%);
opacity: 0.8;
z-index: 0;
animation: floatGlow 12s ease-in-out infinite;
}
.hero-grid {
display: grid;
gap: var(--space-12);
align-items: center;
position: relative;
z-index: 1;
}
.hero-copy { animation: fadeUp 0.8s ease both; }
.hero-panel { animation: fadeUp 0.8s ease 0.15s both; }
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.75rem;
color: var(--color-secondary-600);
margin-bottom: var(--space-3);
font-weight: 600;
}
.hero-title {
font-size: clamp(2.5rem, 2.4vw + 1.8rem, 4rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: var(--space-4);
}
.hero-subtitle {
font-size: 1.2rem;
color: var(--color-text-muted);
max-width: 560px;
}
.hero-actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin: var(--space-6) 0 var(--space-4);
}
.hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.hero-badges span {
display: inline-flex;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--color-neutral-100);
color: var(--color-neutral-900);
font-size: 0.85rem;
font-weight: 600;
border: 1px solid var(--color-border);
}
.quote-card {
display: block;
}
.focus-card {
display: grid;
gap: var(--space-4);
}
.focus-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-2);
color: var(--color-text-muted);
}
.focus-list li::before {
content: '•';
color: var(--color-brand);
margin-right: var(--space-2);
}
.focus-list li {
display: flex;
align-items: baseline;
gap: var(--space-2);
}
.quote-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.quote-eyebrow {
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.12em;
color: var(--color-secondary-600);
margin: 0 0 var(--space-2);
}
.quote-title { margin: 0; font-size: 1.35rem; }
.quote-tag {
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
}
.quote-steps {
list-style: none;
padding: 0;
margin: 0 0 var(--space-5);
display: grid;
gap: var(--space-2);
}
.quote-steps li {
position: relative;
padding-left: 1.5rem;
color: var(--color-text-muted);
}
.quote-steps li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand);
position: absolute;
left: 0.25rem;
top: 0.5rem;
}
.quote-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.meta-label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-secondary-600);
margin-bottom: var(--space-1);
}
.meta-value { font-weight: 600; }
.quote-actions { display: grid; gap: var(--space-3); }
.section { padding: 5.5rem 0; position: relative; }
.section-head { margin-bottom: var(--space-8); }
.section-title { font-size: clamp(2rem, 1.8vw + 1.2rem, 2.8rem); margin-bottom: var(--space-3); }
.section-subtitle { color: var(--color-text-muted); max-width: 620px; }
.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/Gyroid Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-gyroid(var(--color-neutral-900), 60px);
opacity: 0.03;
pointer-events: none;
}
}
.calculator-grid {
display: grid;
gap: var(--space-10);
align-items: center;
position: relative;
z-index: 1;
}
.calculator-list {
padding-left: var(--space-4);
color: var(--color-text-muted);
margin: var(--space-6) 0 0;
}
.cap-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.shop {
background: var(--color-neutral-50);
position: relative;
// Triangular/Isogrid Pattern
&::before {
content: '';
position: absolute;
inset: 0;
@include patterns.pattern-triangular(var(--color-neutral-900), 40px);
opacity: 0.03;
pointer-events: none;
}
}
.split {
display: grid;
gap: var(--space-10);
align-items: center;
position: relative;
z-index: 1;
}
.shop-list {
padding-left: var(--space-4);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.shop-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.shop-cards {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.about {
background: var(--color-neutral-50);
border-top: 1px solid var(--color-border);
}
.about-grid {
display: grid;
gap: var(--space-10);
align-items: center;
}
.about-media {
display: grid;
gap: var(--space-4);
}
.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 {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
}
.media-tile p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.about-note {
padding: var(--space-5);
}
@media (min-width: 960px) {
.hero-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; }
}
@media (max-width: 640px) {
.hero-actions { flex-direction: column; align-items: stretch; }
.quote-meta { grid-template-columns: 1fr; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes floatGlow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
.hero-copy, .hero-panel { animation: none; }
.hero::before { animation: none; }
}
`]
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent {}

16
frontend/src/styles/_patterns.scss
View File

@@ -51,3 +51,19 @@
radial-gradient(circle at 100% 100%, transparent 47%, $color 48%, $color 50%, transparent 51%);
background-size: $size $size;
}
// 6. Cross Hatch (45deg Grid)
// Intersecting diagonal lines
@mixin pattern-cross-hatch($color, $size: 24px, $weight: 1px) {
background-image:
repeating-linear-gradient(45deg, $color 0, $color $weight, transparent $weight, transparent 50%),
repeating-linear-gradient(-45deg, $color 0, $color $weight, transparent $weight, transparent 50%);
background-size: $size $size;
}
// 7. Rectilinear (Alternating Lines)
// Simulating a raster scan path or simple linear infill
@mixin pattern-rectilinear($color, $size: 20px, $weight: 1px) {
background-image: repeating-linear-gradient(90deg, $color 0, $color $weight, transparent $weight, transparent $size);
background-size: $size $size;
}