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) 

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: `
+    <!-- Hero Section -->
+    <section class="hero-section">
+      <div class="container hero-content">
+        <h1 class="hero-title">
+          La Stampa 3D <br>
+          <span class="highlight">Professionale e Veloce</span>
+        </h1>
+        <p class="hero-subtitle">
+          Carica il tuo file STL, ottieni un preventivo istantaneo e ricevi i tuoi pezzi in pochi giorni.
+          Qualità industriale per prototipi e produzione.
+        </p>
+        <div class="hero-actions">
+          <app-button variant="primary" routerLink="/cal">
+            Inizia Preventivo
+          </app-button>
+          <app-button variant="outline" routerLink="/about">
+            Come Funziona
+          </app-button>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features / Steps -->
+    <section class="section bg-neutral">
+      <div class="container">
+        <h2 class="section-title text-center">Dal File all'Oggetto in 3 Step</h2>
+        
+        <div class="grid-3">
+          <app-card class="feature-card">
+            <div class="step-number">1</div>
+            <h3>Carica STL</h3>
+            <p class="text-muted">Trascina il tuo modello 3D nel nostro calcolatore intelligente.</p>
+          </app-card>
+
+          <app-card class="feature-card">
+            <div class="step-number">2</div>
+            <h3>Configura</h3>
+            <p class="text-muted">Scegli materiale (PLA, PETG, TPU) e qualità di stampa.</p>
+          </app-card>
+
+          <app-card class="feature-card">
+            <div class="step-number">3</div>
+            <h3>Ricevi</h3>
+            <p class="text-muted">Produciamo e spediamo in 24/48 ore con corriere espresso.</p>
+          </app-card>
+        </div>
+      </div>
+    </section>
+
+    <!-- Shop Teaser -->
+    <section class="section">
+      <div class="container split-layout">
+        <div class="text-content">
+          <h2 class="section-title">Non solo Servizio Stampa</h2>
+          <p>
+            Hai già una stampante? Forniamo i migliori filamenti e accessori testati quotidianamente nella nostra farm.
+            Qualità garantita dai nostri esperti.
+          </p>
+          <app-button variant="secondary" routerLink="/shop">
+            Visita lo Shop
+          </app-button>
+        </div>
+        <div class="image-placeholder shop-img">
+          <!-- Placeholder visuale per lo shop -->
+          <div class="mock-img">🛒</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Trust / About Teaser -->
+    <section class="section bg-dark text-white">
+      <div class="container text-center">
+        <h2 class="section-title text-white">Perché Sceglierci?</h2>
+        <div class="grid-3 stats">
+          <div>
+            <div class="stat-value">5000+</div>
+            <div class="stat-label">Ore di Stampa</div>
+          </div>
+          <div>
+            <div class="stat-value">100%</div>
+            <div class="stat-label">Qualità Garantita</div>
+          </div>
+          <div>
+            <div class="stat-value">24h</div>
+            <div class="stat-label">Spedizione Rapida</div>
+          </div>
+        </div>
+        <div style="margin-top: 2rem;">
+            <app-button variant="outline" routerLink="/about">Chi Siamo</app-button>
+        </div>
+      </div>
+    </section>
+  `,
+  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 {}