diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index d206854..bcca1e0 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -5,7 +5,10 @@ export const routes: Routes = [ path: '', loadComponent: () => import('./core/layout/layout.component').then(m => m.LayoutComponent), children: [ - { path: '', redirectTo: 'cal', pathMatch: 'full' }, + { + path: '', + loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent) + }, { path: 'cal', loadChildren: () => import('./features/calculator/calculator.routes').then(m => m.CALCULATOR_ROUTES) diff --git a/frontend/src/app/features/home/home.component.ts b/frontend/src/app/features/home/home.component.ts new file mode 100644 index 0000000..092dd73 --- /dev/null +++ b/frontend/src/app/features/home/home.component.ts @@ -0,0 +1,180 @@ +import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterLink } from '@angular/router'; +import { TranslateModule } from '@ngx-translate/core'; +import { AppButtonComponent } from '../../shared/components/app-button/app-button.component'; +import { AppCardComponent } from '../../shared/components/app-card/app-card.component'; + +@Component({ + selector: 'app-home-page', + standalone: true, + imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent, AppCardComponent], + template: ` + +
+
+

+ La Stampa 3D
+ Professionale e Veloce +

+

+ Carica il tuo file STL, ottieni un preventivo istantaneo e ricevi i tuoi pezzi in pochi giorni. + Qualità industriale per prototipi e produzione. +

+
+ + Inizia Preventivo + + + Come Funziona + +
+
+
+ + +
+
+

Dal File all'Oggetto in 3 Step

+ +
+ +
1
+

Carica STL

+

Trascina il tuo modello 3D nel nostro calcolatore intelligente.

+
+ + +
2
+

Configura

+

Scegli materiale (PLA, PETG, TPU) e qualità di stampa.

+
+ + +
3
+

Ricevi

+

Produciamo e spediamo in 24/48 ore con corriere espresso.

+
+
+
+
+ + +
+
+
+

Non solo Servizio Stampa

+

+ Hai già una stampante? Forniamo i migliori filamenti e accessori testati quotidianamente nella nostra farm. + Qualità garantita dai nostri esperti. +

+ + Visita lo Shop + +
+
+ +
🛒
+
+
+
+ + +
+
+

Perché Sceglierci?

+
+
+
5000+
+
Ore di Stampa
+
+
+
100%
+
Qualità Garantita
+
+
+
24h
+
Spedizione Rapida
+
+
+
+ Chi Siamo +
+
+
+ `, + styles: [` + .hero-section { + padding: 8rem 0 6rem; + background: linear-gradient(to bottom right, var(--color-neutral-50), var(--color-neutral-100)); + text-align: center; + } + .hero-content { max-width: 800px; margin: 0 auto; } + .hero-title { + font-size: 3rem; + font-weight: 800; + margin-bottom: var(--space-4); + line-height: 1.1; + letter-spacing: -0.02em; + } + .highlight { color: var(--color-brand); } + .hero-subtitle { + font-size: 1.25rem; + color: var(--color-text-muted); + margin-bottom: var(--space-8); + max-width: 600px; + margin-left: auto; + margin-right: auto; + } + .hero-actions { + display: flex; + gap: var(--space-4); + justify-content: center; + } + + .section { padding: 6rem 0; } + .bg-neutral { background-color: var(--color-neutral-50); } + .bg-dark { background-color: var(--color-neutral-900); } + .text-white { color: white !important; } + + .section-title { font-size: 2rem; margin-bottom: var(--space-8); font-weight: 700; } + .text-center { text-align: center; } + .text-muted { color: var(--color-text-muted); } + + .grid-3 { + display: grid; + gap: var(--space-8); + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + } + + .step-number { + font-size: 3rem; + font-weight: 900; + color: var(--color-neutral-200); + margin-bottom: var(--space-2); + line-height: 1; + } + + .split-layout { + display: grid; + gap: var(--space-12); + align-items: center; + @media(min-width: 768px) { grid-template-columns: 1fr 1fr; } + } + + .mock-img { + width: 100%; + height: 300px; + background-color: var(--color-neutral-100); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + font-size: 5rem; + } + + .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-brand); } + .stat-label { color: var(--color-neutral-300); } + `] +}) +export class HomeComponent {}