From 32b9b2ef8dd9639890409d5b3c5c86b074adc9cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20K=C3=BCng?= <joekueng05@gmail.com>
Date: Mon, 2 Feb 2026 18:38:25 +0100
Subject: [PATCH] feat(web): new style and calculator revisited

---
 frontend/angular.json                         |   3 +-
 .../src/app/core/layout/footer.component.ts   |   4 +-
 .../src/app/core/layout/navbar.component.ts   |   2 +-
 .../features/about/about-page.component.ts    |  76 ++-
 .../contact-form/contact-form.component.ts    |   8 +-
 .../calculator/calculator-page.component.ts   |  23 +-
 .../quote-result/quote-result.component.ts    |  43 +-
 .../upload-form/upload-form.component.ts      | 114 +++-
 .../services/quote-estimator.service.ts       | 108 +++-
 .../src/app/features/home/home.component.ts   | 585 ++++++++++++++----
 .../product-card/product-card.component.ts    |   2 +-
 .../features/shop/product-detail.component.ts |   4 +-
 .../app/features/shop/shop-page.component.ts  |   4 +-
 .../app-button/app-button.component.ts        |   7 +-
 .../app-dropzone/app-dropzone.component.ts    |  41 +-
 .../app-input/app-input.component.ts          |   2 +-
 .../components/app-tabs/app-tabs.component.ts |   5 +-
 .../stl-viewer/stl-viewer.component.ts        | 186 ++++++
 .../summary-card/summary-card.component.ts    |  52 ++
 frontend/src/assets/i18n/en.json              |  33 +-
 frontend/src/assets/i18n/it.json              |  35 +-
 frontend/src/index.html                       |   6 +-
 frontend/src/styles.scss                      |   3 +-
 frontend/src/styles/theme.scss                |  13 +-
 frontend/src/styles/tokens.scss               |  24 +-
 25 files changed, 1084 insertions(+), 299 deletions(-)
 create mode 100644 frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts
 create mode 100644 frontend/src/app/shared/components/summary-card/summary-card.component.ts

diff --git a/frontend/angular.json b/frontend/angular.json
index 4f1cbbd..03d92e6 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -29,7 +29,8 @@
               {
                 "glob": "**/*",
                 "input": "public"
-              }
+              },
+              "src/assets"
             ],
             "styles": [
               "@angular/material/prebuilt-themes/azure-blue.css",
diff --git a/frontend/src/app/core/layout/footer.component.ts b/frontend/src/app/core/layout/footer.component.ts
index 16bbb2e..d0cb4ae 100644
--- a/frontend/src/app/core/layout/footer.component.ts
+++ b/frontend/src/app/core/layout/footer.component.ts
@@ -10,8 +10,8 @@ import { RouterLink } from '@angular/router';
     <footer class="footer">
       <div class="container footer-inner">
         <div class="col">
-          <span class="brand">PrintCalc</span>
-          <p class="copyright">&copy; 2026 Print Calculator Inc.</p>
+          <span class="brand">3D fab</span>
+          <p class="copyright">&copy; 2026 3D fab.</p>
         </div>
         
         <div class="col links">
diff --git a/frontend/src/app/core/layout/navbar.component.ts b/frontend/src/app/core/layout/navbar.component.ts
index 6eec639..dafe005 100644
--- a/frontend/src/app/core/layout/navbar.component.ts
+++ b/frontend/src/app/core/layout/navbar.component.ts
@@ -11,7 +11,7 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
   template: `
     <header class="navbar">
       <div class="container navbar-inner">
-        <a routerLink="/" class="brand">Print<span class="highlight">Calc</span></a>
+        <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>
diff --git a/frontend/src/app/features/about/about-page.component.ts b/frontend/src/app/features/about/about-page.component.ts
index 085acb2..6c07431 100644
--- a/frontend/src/app/features/about/about-page.component.ts
+++ b/frontend/src/app/features/about/about-page.component.ts
@@ -8,26 +8,35 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
   standalone: true,
   imports: [TranslateModule, ContactFormComponent, AppCardComponent],
   template: `
-    <div class="container hero">
-      <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
-    </div>
+    <section class="about-hero">
+      <div class="container">
+        <p class="eyebrow">{{ 'ABOUT.EYEBROW' | translate }}</p>
+        <h1>{{ 'ABOUT.TITLE' | translate }}</h1>
+        <p class="subtitle">{{ 'ABOUT.SUBTITLE' | translate }}</p>
+      </div>
+    </section>
 
     <div class="container content">
       <div class="info">
-        <h2>Our Mission</h2>
-        <p>
-          We make high-quality 3D printing accessible to everyone. 
-          Whether you are a hobbyist or an industrial designer, 
-          PrintCalc provides instant quotes and professional production.
-        </p>
+        <h2>{{ 'ABOUT.HOW_TITLE' | translate }}</h2>
+        <p>{{ 'ABOUT.HOW_TEXT' | translate }}</p>
 
-        <h3>How it Works</h3>
-        <ol class="steps">
-          <li>Upload your STL file</li>
-          <li>Choose material & quality</li>
-          <li>Get instant quote</li>
-          <li>We print & ship</li>
-        </ol>
+        <div class="pill-list">
+          <span>{{ 'ABOUT.PILL_1' | translate }}</span>
+          <span>{{ 'ABOUT.PILL_2' | translate }}</span>
+          <span>{{ 'ABOUT.PILL_3' | translate }}</span>
+        </div>
+
+        <h3>{{ 'ABOUT.SERVICES_TITLE' | translate }}</h3>
+        <ul class="steps">
+          <li>{{ 'ABOUT.SERVICE_1' | translate }}</li>
+          <li>{{ 'ABOUT.SERVICE_2' | translate }}</li>
+          <li>{{ 'ABOUT.SERVICE_3' | translate }}</li>
+          <li>{{ 'ABOUT.SERVICE_4' | translate }}</li>
+        </ul>
+
+        <h3>{{ 'ABOUT.TARGET_TITLE' | translate }}</h3>
+        <p class="text-muted">{{ 'ABOUT.TARGET_TEXT' | translate }}</p>
       </div>
 
       <div class="contact">
@@ -39,16 +48,49 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
     </div>
   `,
   styles: [`
-    .hero { padding: var(--space-8) 0; text-align: center; }
+    .about-hero {
+      padding: 5rem 0 3.5rem;
+      background: var(--color-bg);
+      text-align: center;
+    }
+    .eyebrow {
+      text-transform: uppercase;
+      letter-spacing: 0.12em;
+      font-size: 0.75rem;
+      color: var(--color-secondary-600);
+      font-weight: 600;
+      margin-bottom: var(--space-3);
+    }
+    .subtitle {
+      color: var(--color-text-muted);
+      max-width: 640px;
+      margin: var(--space-3) auto 0;
+    }
     .content {
       display: grid;
       gap: var(--space-12);
+      padding: 3rem 0 5rem;
       @media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
     }
     .steps {
       padding-left: var(--space-4);
       li { margin-bottom: var(--space-2); color: var(--color-text-muted); }
     }
+    .pill-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-2);
+      margin: var(--space-4) 0 var(--space-6);
+    }
+    .pill-list span {
+      padding: 0.35rem 0.75rem;
+      border-radius: 999px;
+      background: var(--color-neutral-100);
+      border: 1px solid var(--color-border);
+      font-size: 0.85rem;
+      font-weight: 600;
+    }
+    .text-muted { color: var(--color-text-muted); }
   `]
 })
 export class AboutPageComponent {}
diff --git a/frontend/src/app/features/about/components/contact-form/contact-form.component.ts b/frontend/src/app/features/about/components/contact-form/contact-form.component.ts
index 942d393..eb6cc2e 100644
--- a/frontend/src/app/features/about/components/contact-form/contact-form.component.ts
+++ b/frontend/src/app/features/about/components/contact-form/contact-form.component.ts
@@ -11,17 +11,17 @@ import { AppButtonComponent } from '../../../../shared/components/app-button/app
   imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
   template: `
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
-      <app-input formControlName="name" label="Name" placeholder="Your Name"></app-input>
-      <app-input formControlName="email" type="email" label="Email" placeholder="your@email.com"></app-input>
+      <app-input formControlName="name" label="Nome" placeholder="Il tuo nome"></app-input>
+      <app-input formControlName="email" type="email" label="Email" placeholder="tuo@email.com"></app-input>
       
       <div class="form-group">
-        <label>Message</label>
+        <label>Messaggio</label>
         <textarea formControlName="message" class="form-control" rows="4"></textarea>
       </div>
 
       <div class="actions">
         <app-button type="submit" [disabled]="form.invalid || sent()">
-          {{ sent() ? 'Sent!' : ('ABOUT.SEND' | translate) }}
+          {{ sent() ? 'Inviato!' : ('ABOUT.SEND' | translate) }}
         </app-button>
       </div>
     </form>
diff --git a/frontend/src/app/features/calculator/calculator-page.component.ts b/frontend/src/app/features/calculator/calculator-page.component.ts
index 76629dd..ab5553d 100644
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -23,12 +23,6 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       <div class="col-input">
         <app-card>
           <div class="tabs-wrapper">
-             <app-tabs 
-               [tabs]="clientTabs" 
-               [activeTab]="clientType()" 
-               (tabChange)="clientType.set($event)">
-             </app-tabs>
-             
              <div class="sub-tabs">
                 <span 
                   class="mode-switch" 
@@ -47,7 +41,6 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
           </div>
 
           <app-upload-form
-            [clientType]="clientType()"
             [mode]="mode()"
             [loading]="loading()"
             (submitRequest)="onCalculate($event)"
@@ -58,18 +51,18 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
       <!-- Right Column: Result or Info -->
       <div class="col-result">
         @if (error()) {
-          <app-alert type="error">An error occurred while calculating quote.</app-alert>
+          <app-alert type="error">Si è verificato un errore durante il calcolo del preventivo.</app-alert>
         }
 
         @if (result()) {
           <app-quote-result [result]="result()!"></app-quote-result>
         } @else {
           <app-card>
-            <h3>Why choose PrintCalc?</h3>
+            <h3>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
             <ul class="benefits">
-               <li>Instant AI-powered quotes</li>
-               <li>Industrial grade materials</li>
-               <li>Fast shipping worldwide</li>
+               <li>{{ 'CALC.BENEFITS_1' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_2' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_3' | translate }}</li>
             </ul>
           </app-card>
         }
@@ -107,17 +100,11 @@ import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quo
   `]
 })
 export class CalculatorPageComponent {
-  clientType = signal<any>('private');
   mode = signal<any>('easy');
   loading = signal(false);
   result = signal<QuoteResult | null>(null);
   error = signal<boolean>(false);
 
-  clientTabs = [
-    { label: 'Private', value: 'private' },
-    { label: 'Business', value: 'business' }
-  ];
-
   constructor(private estimator: QuoteEstimatorService) {}
 
   onCalculate(req: QuoteRequest) {
diff --git a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
index ba620a1..42d5077 100644
--- a/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
+++ b/frontend/src/app/features/calculator/components/quote-result/quote-result.component.ts
@@ -3,29 +3,33 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppCardComponent } from '../../../../shared/components/app-card/app-card.component';
 import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { SummaryCardComponent } from '../../../../shared/components/summary-card/summary-card.component';
 import { QuoteResult } from '../../services/quote-estimator.service';
 
 @Component({
   selector: 'app-quote-result',
   standalone: true,
-  imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent],
+  imports: [CommonModule, TranslateModule, AppCardComponent, AppButtonComponent, SummaryCardComponent],
   template: `
     <app-card>
       <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
       
       <div class="result-grid">
-        <div class="item">
-          <span class="label">{{ 'CALC.COST' | translate }}</span>
-          <span class="value price">{{ result().price | currency:result().currency }}</span>
-        </div>
-        <div class="item">
-          <span class="label">{{ 'CALC.TIME' | translate }}</span>
-          <span class="value">{{ result().printTimeHours }}h</span>
-        </div>
-        <div class="item">
-          <span class="label">Material</span>
-          <span class="value">{{ result().materialUsageGrams }}g</span>
-        </div>
+        <app-summary-card 
+          class="item full-width" 
+          [label]="'CALC.COST' | translate" 
+          [large]="true" 
+          [highlight]="true">
+          {{ result().price | currency:result().currency }}
+        </app-summary-card>
+
+        <app-summary-card [label]="'CALC.TIME' | translate">
+          {{ result().printTimeHours }}h
+        </app-summary-card>
+
+        <app-summary-card [label]="'CALC.MATERIAL' | translate">
+          {{ result().materialUsageGrams }}g
+        </app-summary-card>
       </div>
 
       <div class="actions">
@@ -42,18 +46,7 @@ import { QuoteResult } from '../../services/quote-estimator.service';
       gap: var(--space-4);
       margin-bottom: var(--space-6);
     }
-    .item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: var(--space-3);
-      background: var(--color-neutral-50);
-      border-radius: var(--radius-md);
-    }
-    .item:first-child { grid-column: span 2; background: var(--color-neutral-100); }
-    .label { font-size: 0.875rem; color: var(--color-text-muted); }
-    .value { font-size: 1.25rem; font-weight: 700; }
-    .price { font-size: 2rem; color: var(--color-brand); }
+    .full-width { grid-column: span 2; }
     
     .actions { display: flex; flex-direction: column; gap: var(--space-3); }
   `]
diff --git a/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts b/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts
index a6a0ee7..bde6ff7 100644
--- a/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts
+++ b/frontend/src/app/features/calculator/components/upload-form/upload-form.component.ts
@@ -6,23 +6,43 @@ import { AppInputComponent } from '../../../../shared/components/app-input/app-i
 import { AppSelectComponent } from '../../../../shared/components/app-select/app-select.component';
 import { AppDropzoneComponent } from '../../../../shared/components/app-dropzone/app-dropzone.component';
 import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import { StlViewerComponent } from '../../../../shared/components/stl-viewer/stl-viewer.component';
 import { QuoteRequest } from '../../services/quote-estimator.service';
 
 @Component({
   selector: 'app-upload-form',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent],
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppSelectComponent, AppDropzoneComponent, AppButtonComponent, StlViewerComponent],
   template: `
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
       
       <div class="section">
-        <app-dropzone 
-          [label]="'CALC.UPLOAD_LABEL' | translate" 
-          [subtext]="'CALC.UPLOAD_SUB' | translate"
-          (fileDropped)="onFileDropped($event)">
-        </app-dropzone>
-        @if (form.get('file')?.invalid && form.get('file')?.touched) {
-          <div class="error-msg">File required</div>
+        @if (selectedFile()) {
+          <div class="viewer-wrapper">
+             <app-stl-viewer [file]="selectedFile()"></app-stl-viewer>
+             <button type="button" class="btn-clear" (click)="clearFiles()">
+                X
+             </button>
+          </div>
+          <div class="file-list">
+             @for (f of files(); track f.name) {
+                <div class="file-item" [class.active]="f === selectedFile()" (click)="selectFile(f)">
+                   {{ f.name }}
+                </div>
+             }
+          </div>
+        } @else {
+            <app-dropzone 
+            [label]="'CALC.UPLOAD_LABEL' | translate" 
+            [subtext]="'CALC.UPLOAD_SUB' | translate"
+            [accept]="acceptedFormats"
+            [multiple]="true"
+            (filesDropped)="onFilesDropped($event)">
+            </app-dropzone>
+        }
+        
+        @if (form.get('files')?.invalid && form.get('files')?.touched) {
+          <div class="error-msg">{{ 'CALC.ERR_FILE_REQUIRED' | translate }}</div>
         }
       </div>
 
@@ -50,7 +70,7 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
         <app-input
           formControlName="notes"
           [label]="'CALC.NOTES' | translate"
-          placeholder="Specific instructions..."
+          placeholder="Istruzioni specifiche..."
         ></app-input>
       }
 
@@ -69,31 +89,72 @@ import { QuoteRequest } from '../../services/quote-estimator.service';
     .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
     .actions { margin-top: var(--space-6); }
     .error-msg { color: var(--color-danger-500); font-size: 0.875rem; margin-top: var(--space-2); text-align: center; }
+    
+    .viewer-wrapper { position: relative; margin-bottom: var(--space-4); }
+    .btn-clear {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(0,0,0,0.5);
+        color: white;
+        border: none;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        cursor: pointer;
+        z-index: 10;
+        &:hover { background: rgba(0,0,0,0.7); }
+    }
+    
+    .file-list {
+        display: flex;
+        gap: var(--space-2);
+        overflow-x: auto;
+        padding-bottom: var(--space-2);
+    }
+    .file-item {
+        padding: 0.5rem 1rem;
+        background: var(--color-neutral-100);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-md);
+        font-size: 0.85rem;
+        cursor: pointer;
+        white-space: nowrap;
+        &:hover { background: var(--color-neutral-200); }
+        &.active { 
+            border-color: var(--color-brand); 
+            background: rgba(250, 207, 10, 0.1); 
+            font-weight: 600;
+        }
+    }
   `]
 })
 export class UploadFormComponent {
-  clientType = input<'business' | 'private'>('private');
   mode = input<'easy' | 'advanced'>('easy');
   loading = input<boolean>(false);
   submitRequest = output<QuoteRequest>();
 
   form: FormGroup;
   
+  files = signal<File[]>([]);
+  selectedFile = signal<File | null>(null);
+
   materials = [
     { label: 'PLA (Standard)', value: 'PLA' },
-    { label: 'PETG (Durable)', value: 'PETG' },
-    { label: 'TPU (Flexible)', value: 'TPU' }
+    { label: 'PETG (Resistente)', value: 'PETG' },
+    { label: 'TPU (Flessibile)', value: 'TPU' }
   ];
 
   qualities = [
-    { label: 'Draft (Fast)', value: 'Draft' },
+    { label: 'Bozza (Veloce)', value: 'Draft' },
     { label: 'Standard', value: 'Standard' },
-    { label: 'High Detail', value: 'High' }
+    { label: 'Alta definizione', value: 'High' }
   ];
+  acceptedFormats = '.stl,.3mf,.step,.stp,.obj,.amf,.ply,.igs,.iges';
 
   constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
-      file: [null, Validators.required],
+      files: [[], Validators.required],
       material: ['PLA', Validators.required],
       quality: ['Standard', Validators.required],
       quantity: [1, [Validators.required, Validators.min(1)]],
@@ -101,16 +162,31 @@ export class UploadFormComponent {
     });
   }
 
-  onFileDropped(file: File) {
-    this.form.patchValue({ file });
-    this.form.get('file')?.markAsTouched();
+  onFilesDropped(newFiles: File[]) {
+    this.files.update(current => [...current, ...newFiles]);
+    this.form.patchValue({ files: this.files() });
+    this.form.get('files')?.markAsTouched();
+    
+    // Select the last added file by default if none selected
+    if (newFiles.length > 0) {
+        this.selectedFile.set(newFiles[newFiles.length - 1]);
+    }
+  }
+
+  selectFile(file: File) {
+      this.selectedFile.set(file);
+  }
+
+  clearFiles() {
+      this.files.set([]);
+      this.selectedFile.set(null);
+      this.form.patchValue({ files: [] });
   }
 
   onSubmit() {
     if (this.form.valid) {
       this.submitRequest.emit({
         ...this.form.value,
-        clientType: this.clientType(),
         mode: this.mode()
       });
     } else {
diff --git a/frontend/src/app/features/calculator/services/quote-estimator.service.ts b/frontend/src/app/features/calculator/services/quote-estimator.service.ts
index 410d554..2965a8f 100644
--- a/frontend/src/app/features/calculator/services/quote-estimator.service.ts
+++ b/frontend/src/app/features/calculator/services/quote-estimator.service.ts
@@ -1,14 +1,15 @@
-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
-import { delay } from 'rxjs/operators';
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, forkJoin, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { environment } from '../../../../environments/environment';
 
 export interface QuoteRequest {
-  file: File;
+  files: File[];
   material: string;
   quality: string;
   quantity: number;
   notes?: string;
-  clientType: 'business' | 'private';
   mode: 'easy' | 'advanced';
 }
 
@@ -20,25 +21,94 @@ export interface QuoteResult {
   setupCost: number;
 }
 
+interface BackendResponse {
+  success: boolean;
+  data: {
+    print_time_seconds: number;
+    material_grams: number;
+    cost: {
+      total: number;
+    };
+  };
+  error?: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
 export class QuoteEstimatorService {
+  private http = inject(HttpClient);
   
   calculate(request: QuoteRequest): Observable<QuoteResult> {
-    // Mock logic
-    const basePrice = request.clientType === 'business' ? 50 : 20;
-    const materialCost = request.material === 'PETG' ? 1.5 : (request.material === 'TPU' ? 2 : 1);
-    const qualityMult = request.quality === 'High' ? 1.5 : (request.quality === 'Draft' ? 0.8 : 1);
-    
-    const estimatedPrice = (basePrice * materialCost * qualityMult * request.quantity) + 10; // +10 setup
-    
-    return of({
-      price: Math.round(estimatedPrice * 100) / 100,
-      currency: 'EUR',
-      printTimeHours: Math.floor(Math.random() * 24) + 2,
-      materialUsageGrams: Math.floor(Math.random() * 500) + 50,
-      setupCost: 10
-    }).pipe(delay(1500)); // Simulate network latency
+    const requests: Observable<BackendResponse>[] = request.files.map(file => {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('machine', 'bambu_a1'); // Hardcoded for now
+      formData.append('filament', this.mapMaterial(request.material));
+      formData.append('quality', this.mapQuality(request.quality));
+      
+      console.log(`Sending file: ${file.name} to ${environment.apiUrl}/api/quote`);
+      return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData).pipe(
+        map(res => {
+             console.log('Response for', file.name, res);
+             return res;
+        }),
+        catchError(err => {
+            console.error('Error calculating quote for', file.name, err);
+            return of({ success: false, data: { print_time_seconds: 0, material_grams: 0, cost: { total: 0 } }, error: err.message });
+        })
+      );
+    });
+
+    return forkJoin(requests).pipe(
+      map(responses => {
+        console.log('All responses:', responses);
+        
+        const validResponses = responses.filter(r => r.success);
+        if (validResponses.length === 0 && responses.length > 0) {
+            throw new Error('All calculations failed. Check backend connection.');
+        }
+
+        let totalPrice = 0;
+        let totalTime = 0;
+        let totalWeight = 0;
+        let setupCost = 10; // Base setup
+
+        validResponses.forEach(res => {
+            totalPrice += res.data.cost.total;
+            totalTime += res.data.print_time_seconds;
+            totalWeight += res.data.material_grams;
+        });
+
+        // Apply quantity multiplier
+        totalPrice = (totalPrice * request.quantity) + setupCost;
+        totalWeight = totalWeight * request.quantity;
+        // Total time usually parallel if we have multiple printers, but let's sum for now
+        totalTime = totalTime * request.quantity;
+
+        return {
+          price: Math.round(totalPrice * 100) / 100,
+          currency: 'EUR',
+          printTimeHours: Math.ceil(totalTime / 3600), // Ceil hours
+          materialUsageGrams: Math.ceil(totalWeight),
+          setupCost
+        };
+      })
+    );
+  }
+
+  private mapMaterial(mat: string): string {
+    const m = mat.toUpperCase();
+    if (m.includes('PLA')) return 'pla_basic';
+    if (m.includes('PETG')) return 'petg_basic';
+    if (m.includes('TPU')) return 'tpu_95a';
+    return 'pla_basic';
+  }
+
+  private mapQuality(qual: string): string {
+    const q = qual.toLowerCase();
+    if (q.includes('draft')) return 'draft';
+    if (q.includes('high')) return 'extra_fine';
+    return 'standard';
   }
 }
diff --git a/frontend/src/app/features/home/home.component.ts b/frontend/src/app/features/home/home.component.ts
index 092dd73..042118f 100644
--- a/frontend/src/app/features/home/home.component.ts
+++ b/frontend/src/app/features/home/home.component.ts
@@ -10,171 +10,484 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
   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>
+    <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>
-            <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 class="hero-panel">
+            <app-card class="focus-card">
+              <p class="quote-eyebrow">Approccio consulenziale</p>
+              <h3 class="quote-title">Dall'idea al file 3D</h3>
+              <p class="text-muted">
+                Se non hai il modello, ti supportiamo nella progettazione e nella scelta delle soluzioni
+                più adatte al tuo prodotto.
+              </p>
+              <ul class="focus-list">
+                <li>Consulenza tecnica rapida</li>
+                <li>Ottimizzazione file per stampa</li>
+                <li>Verifica fattibilità e costi</li>
+              </ul>
+              <app-button variant="outline" [fullWidth]="true" routerLink="/about">Richiedi consulenza</app-button>
+            </app-card>
           </div>
         </div>
-        <div style="margin-top: 2rem;">
-            <app-button variant="outline" routerLink="/about">Chi Siamo</app-button>
+      </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>
-      </div>
-    </section>
+      </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: [`
-    .hero-section {
-      padding: 8rem 0 6rem;
-      background: linear-gradient(to bottom right, var(--color-neutral-50), var(--color-neutral-100));
-      text-align: center;
+    .home-page {
+      background: var(--color-bg);
+    }
+
+    .hero {
+      position: relative;
+      padding: 6rem 0 5rem;
+      overflow: hidden;
+      background: var(--color-bg);
+    }
+    .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::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(16, 24, 32, 0.05) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(16, 24, 32, 0.05) 1px, transparent 1px);
+      background-size: 32px 32px;
+      opacity: 0.25;
+      z-index: 0;
+      pointer-events: none;
+    }
+    .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-content { max-width: 800px; margin: 0 auto; }
     .hero-title {
-      font-size: 3rem;
-      font-weight: 800;
-      margin-bottom: var(--space-4);
-      line-height: 1.1;
+      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);
     }
-    .highlight { color: var(--color-brand); }
     .hero-subtitle {
-      font-size: 1.25rem;
+      font-size: 1.2rem;
       color: var(--color-text-muted);
-      margin-bottom: var(--space-8);
-      max-width: 600px;
-      margin-left: auto;
-      margin-right: auto;
+      max-width: 560px;
     }
     .hero-actions {
       display: flex;
       gap: var(--space-4);
-      justify-content: center;
+      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);
     }
 
-    .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; }
+    .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-title { font-size: 2rem; margin-bottom: var(--space-8); font-weight: 700; }
-    .text-center { text-align: center; }
+    .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); }
 
-    .grid-3 {
-      display: grid;
-      gap: var(--space-8);
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    .calculator {
+      background: var(--color-neutral-50);
+      border-top: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
     }
-
-    .step-number {
-      font-size: 3rem;
-      font-weight: 900;
-      color: var(--color-neutral-200);
-      margin-bottom: var(--space-2);
-      line-height: 1;
-    }
-
-    .split-layout {
+    .calculator-grid {
       display: grid;
-      gap: var(--space-12);
+      gap: var(--space-10);
       align-items: center;
-      @media(min-width: 768px) { grid-template-columns: 1fr 1fr; }
+    }
+    .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));
     }
 
-    .mock-img {
-      width: 100%;
-      height: 300px;
-      background-color: var(--color-neutral-100);
-      border-radius: var(--radius-lg);
+    .shop {
+      background: var(--color-neutral-50);
+    }
+    .split {
+      display: grid;
+      gap: var(--space-10);
+      align-items: center;
+    }
+    .shop-list {
+      padding-left: var(--space-4);
+      color: var(--color-text-muted);
+      margin-bottom: var(--space-6);
+    }
+    .shop-actions {
       display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 5rem;
+      flex-wrap: wrap;
+      gap: var(--space-3);
+    }
+    .shop-cards {
+      display: grid;
+      gap: var(--space-4);
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     }
 
-    .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--color-brand); }
-    .stat-label { color: var(--color-neutral-300); }
+    .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; }
+    }
   `]
 })
 export class HomeComponent {}
diff --git a/frontend/src/app/features/shop/components/product-card/product-card.component.ts b/frontend/src/app/features/shop/components/product-card/product-card.component.ts
index 0b5dc08..34d61bc 100644
--- a/frontend/src/app/features/shop/components/product-card/product-card.component.ts
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.ts
@@ -17,7 +17,7 @@ import { Product } from '../../services/shop.service';
         </h3>
         <div class="footer">
           <span class="price">{{ product().price | currency:'EUR' }}</span>
-          <a [routerLink]="['/shop', product().id]" class="view-btn">View</a>
+          <a [routerLink]="['/shop', product().id]" class="view-btn">Dettagli</a>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/features/shop/product-detail.component.ts b/frontend/src/app/features/shop/product-detail.component.ts
index c2b212c..8049f7d 100644
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/frontend/src/app/features/shop/product-detail.component.ts
@@ -32,7 +32,7 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
           </div>
         </div>
       } @else {
-        <p>Product not found.</p>
+        <p>Prodotto non trovato.</p>
       }
     </div>
   `,
@@ -75,6 +75,6 @@ export class ProductDetailComponent {
   }
 
   addToCart() {
-    alert('Added to cart (Mock)');
+    alert('Aggiunto al carrello (Mock)');
   }
 }
diff --git a/frontend/src/app/features/shop/shop-page.component.ts b/frontend/src/app/features/shop/shop-page.component.ts
index 5da913b..53bc452 100644
--- a/frontend/src/app/features/shop/shop-page.component.ts
+++ b/frontend/src/app/features/shop/shop-page.component.ts
@@ -11,7 +11,7 @@ import { ProductCardComponent } from './components/product-card/product-card.com
   template: `
     <div class="container hero">
       <h1>{{ 'SHOP.TITLE' | translate }}</h1>
-      <p class="subtitle">Componenti e materiali selezionati per la tua stampa 3D.</p>
+      <p class="subtitle">{{ 'SHOP.SUBTITLE' | translate }}</p>
     </div>
 
     <div class="container">
@@ -40,4 +40,4 @@ export class ShopPageComponent {
       this.products.set(data);
     });
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/shared/components/app-button/app-button.component.ts b/frontend/src/app/shared/components/app-button/app-button.component.ts
index 9806066..ac003a9 100644
--- a/frontend/src/app/shared/components/app-button/app-button.component.ts
+++ b/frontend/src/app/shared/components/app-button/app-button.component.ts
@@ -23,7 +23,7 @@ import { CommonModule } from '@angular/common';
       border-radius: var(--radius-md);
       font-weight: 500;
       cursor: pointer;
-      transition: background-color 0.2s, color 0.2s;
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
       border: 1px solid transparent;
       font-family: inherit;
       font-size: 1rem;
@@ -37,7 +37,7 @@ import { CommonModule } from '@angular/common';
 
     .btn-primary {
       background-color: var(--color-brand);
-      color: white;
+      color: var(--color-neutral-900);
       &:hover:not(:disabled) { background-color: var(--color-brand-hover); }
     }
 
@@ -53,7 +53,8 @@ import { CommonModule } from '@angular/common';
       color: var(--color-text);
       &:hover:not(:disabled) { 
         border-color: var(--color-brand); 
-        color: var(--color-brand);
+        color: var(--color-neutral-900);
+        background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
       }
     }
 
diff --git a/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts b/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts
index 5cfe140..fd02157 100644
--- a/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts
+++ b/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts
@@ -14,7 +14,7 @@ import { CommonModule } from '@angular/common';
       (drop)="onDrop($event)"
       (click)="fileInput.click()"
     >
-      <input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()">
+      <input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()" [multiple]="multiple()">
       
       <div class="content">
         <div class="icon">
@@ -22,9 +22,12 @@ import { CommonModule } from '@angular/common';
         </div>
         <p class="text">{{ label() }}</p>
         <p class="subtext">{{ subtext() }}</p>
-        @if (fileName()) {
-            <div class="file-badge">
-                {{ fileName() }}
+        
+        @if (fileNames().length > 0) {
+            <div class="file-badges">
+                @for (name of fileNames(); track name) {
+                    <div class="file-badge">{{ name }}</div>
+                }
             </div>
         }
       </div>
@@ -48,26 +51,33 @@ import { CommonModule } from '@angular/common';
     .icon { color: var(--color-brand); margin-bottom: var(--space-4); }
     .text { font-weight: 600; margin-bottom: var(--space-2); }
     .subtext { font-size: 0.875rem; color: var(--color-text-muted); }
-    .file-badge {
+    .file-badges {
         margin-top: var(--space-4);
-        display: inline-block;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+        justify-content: center;
+    }
+    .file-badge {
         padding: var(--space-2) var(--space-4);
         background: var(--color-neutral-200);
         border-radius: var(--radius-md);
         font-weight: 600;
         color: var(--color-primary-700);
+        font-size: 0.85rem;
     }
   `]
 })
 export class AppDropzoneComponent {
-  label = input<string>('Drop file here or click to upload');
+  label = input<string>('Drop files here or click to upload');
   subtext = input<string>('Supports .stl, .obj');
   accept = input<string>('.stl,.obj');
+  multiple = input<boolean>(true);
   
-  fileDropped = output<File>();
+  filesDropped = output<File[]>();
   
   isDragOver = signal(false);
-  fileName = signal<string | null>(null);
+  fileNames = signal<string[]>([]);
 
   onDragOver(e: Event) {
     e.preventDefault();
@@ -82,23 +92,26 @@ export class AppDropzoneComponent {
   }
 
   onDrop(e: DragEvent) {
+    console.log('Drop event', e);
     e.preventDefault();
     e.stopPropagation();
     this.isDragOver.set(false);
     if (e.dataTransfer?.files.length) {
-      this.handleFile(e.dataTransfer.files[0]);
+      this.handleFiles(Array.from(e.dataTransfer.files));
     }
   }
 
   onFileSelected(e: Event) {
+    console.log('File selected', e);
     const input = e.target as HTMLInputElement;
     if (input.files?.length) {
-      this.handleFile(input.files[0]);
+      this.handleFiles(Array.from(input.files));
     }
   }
 
-  handleFile(file: File) {
-    this.fileName.set(file.name);
-    this.fileDropped.emit(file);
+  handleFiles(files: File[]) {
+    const newNames = files.map(f => f.name);
+    this.fileNames.update(current => [...current, ...newNames]);
+    this.filesDropped.emit(files);
   }
 }
diff --git a/frontend/src/app/shared/components/app-input/app-input.component.ts b/frontend/src/app/shared/components/app-input/app-input.component.ts
index 974495b..929fe11 100644
--- a/frontend/src/app/shared/components/app-input/app-input.component.ts
+++ b/frontend/src/app/shared/components/app-input/app-input.component.ts
@@ -40,7 +40,7 @@ import { CommonModule } from '@angular/common';
       width: 100%;
       background: var(--color-bg-card);
       color: var(--color-text);
-      &:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
+      &:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.25); }
       &:disabled { background: var(--color-neutral-100); cursor: not-allowed; }
     }
     .error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
diff --git a/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts b/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts
index 9bf07ce..27d093b 100644
--- a/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts
+++ b/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts
@@ -1,10 +1,11 @@
 import { Component, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-tabs',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslateModule],
   template: `
     <div class="tabs">
       @for (tab of tabs(); track tab.value) {
@@ -12,7 +13,7 @@ import { CommonModule } from '@angular/common';
           class="tab" 
           [class.active]="activeTab() === tab.value"
           (click)="selectTab(tab.value)">
-          {{ tab.label }}
+          {{ tab.label | translate }}
         </button>
       }
     </div>
diff --git a/frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts b/frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts
new file mode 100644
index 0000000..50b74cf
--- /dev/null
+++ b/frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts
@@ -0,0 +1,186 @@
+import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as THREE from 'three';
+// @ts-ignore
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
+// @ts-ignore
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+
+@Component({
+  selector: 'app-stl-viewer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="viewer-container" #rendererContainer>
+      @if (loading) {
+        <div class="loading-overlay">
+          <div class="spinner"></div>
+          <span>Loading 3D Model...</span>
+        </div>
+      }
+    </div>
+  `,
+  styles: [`
+    .viewer-container {
+      width: 100%;
+      height: 300px;
+      background: var(--color-neutral-50);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+      position: relative;
+    }
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(255, 255, 255, 0.8);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+      z-index: 10;
+      color: var(--color-text-muted);
+    }
+    .spinner {
+      width: 32px;
+      height: 32px;
+      border: 3px solid var(--color-neutral-200);
+      border-top-color: var(--color-brand);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  `]
+})
+export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() file: File | null = null;
+  @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
+
+  private scene!: THREE.Scene;
+  private camera!: THREE.PerspectiveCamera;
+  private renderer!: THREE.WebGLRenderer;
+  private controls!: OrbitControls;
+  private animationId: number | null = null;
+  private currentMesh: THREE.Mesh | null = null;
+
+  loading = false;
+
+  ngOnInit() {
+    this.initThree();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['file'] && this.file) {
+      this.loadFile(this.file);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.animationId) cancelAnimationFrame(this.animationId);
+    if (this.renderer) this.renderer.dispose();
+  }
+
+  private initThree() {
+    const width = this.rendererContainer.nativeElement.clientWidth;
+    const height = this.rendererContainer.nativeElement.clientHeight;
+
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0xf7f6f2); // Neutral-50
+
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(1, 1, 1);
+    this.scene.add(directionalLight);
+
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
+    this.camera.position.z = 100;
+
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(width, height);
+    this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
+
+    // Controls
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+
+    this.animate();
+
+    // Handle resize
+    const resizeObserver = new ResizeObserver(() => {
+        if (!this.rendererContainer) return;
+        const w = this.rendererContainer.nativeElement.clientWidth;
+        const h = this.rendererContainer.nativeElement.clientHeight;
+        this.camera.aspect = w / h;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(w, h);
+    });
+    resizeObserver.observe(this.rendererContainer.nativeElement);
+  }
+
+  private loadFile(file: File) {
+    this.loading = true;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const loader = new STLLoader();
+        const geometry = loader.parse(event.target?.result as ArrayBuffer);
+        
+        if (this.currentMesh) {
+          this.scene.remove(this.currentMesh);
+          this.currentMesh.geometry.dispose();
+        }
+
+        const material = new THREE.MeshPhongMaterial({ 
+          color: 0xFACF0A, // Brand color
+          specular: 0x111111,
+          shininess: 200 
+        });
+        
+        this.currentMesh = new THREE.Mesh(geometry, material);
+        
+        // Center geometry
+        geometry.computeBoundingBox();
+        geometry.center();
+
+        // Rotate to stand upright (usually necessary for STLs)
+        this.currentMesh.rotation.x = -Math.PI / 2;
+
+        this.scene.add(this.currentMesh);
+
+        // Adjust camera to fit object
+        const boundingBox = geometry.boundingBox!;
+        const size = new THREE.Vector3();
+        boundingBox.getSize(size);
+        const maxDim = Math.max(size.x, size.y, size.z);
+        const fov = this.camera.fov * (Math.PI / 180);
+        let cameraZ = Math.abs(maxDim / 2 * Math.tan(fov * 2)); // Basic fit
+        cameraZ *= 2.5; // Zoom out a bit
+        
+        this.camera.position.z = cameraZ;
+        this.camera.updateProjectionMatrix();
+        
+      } catch (err) {
+        console.error('Error loading STL:', err);
+      } finally {
+        this.loading = false;
+      }
+    };
+    reader.readAsArrayBuffer(file);
+  }
+
+  private animate() {
+    this.animationId = requestAnimationFrame(() => this.animate());
+    if (this.controls) this.controls.update();
+    if (this.renderer && this.scene && this.camera) {
+        this.renderer.render(this.scene, this.camera);
+    }
+  }
+}
diff --git a/frontend/src/app/shared/components/summary-card/summary-card.component.ts b/frontend/src/app/shared/components/summary-card/summary-card.component.ts
new file mode 100644
index 0000000..a15faa4
--- /dev/null
+++ b/frontend/src/app/shared/components/summary-card/summary-card.component.ts
@@ -0,0 +1,52 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-summary-card',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="summary-card" [class.highlight]="highlight()">
+      <span class="label">{{ label() }}</span>
+      <span class="value" [class.large]="large()">
+        <ng-content></ng-content>
+      </span>
+    </div>
+  `,
+  styles: [`
+    .summary-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: var(--space-3);
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      height: 100%;
+      justify-content: center;
+    }
+    .highlight {
+      background: var(--color-neutral-100);
+      border-color: var(--color-border);
+    }
+    .label {
+      font-size: 0.875rem;
+      color: var(--color-text-muted);
+      margin-bottom: var(--space-1);
+    }
+    .value {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+    .large {
+      font-size: 2rem;
+      color: var(--color-brand);
+    }
+  `]
+})
+export class SummaryCardComponent {
+  label = input.required<string>();
+  highlight = input<boolean>(false);
+  large = input<boolean>(false);
+}
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index c62326e..b34fb34 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -11,14 +11,14 @@
   },
   "CALC": {
     "TITLE": "3D Print Calculator",
-    "SUBTITLE": "Upload your STL file and get an instant estimate of printing costs and time.",
+    "SUBTITLE": "Upload your 3D file (STL, 3MF, STEP...) and get an instant estimate of costs and print time.",
     "CTA_START": "Start Now",
     "BUSINESS": "Business",
     "PRIVATE": "Private",
-    "MODE_EASY": "Easy",
+    "MODE_EASY": "Quick",
     "MODE_ADVANCED": "Advanced",
-    "UPLOAD_LABEL": "Drag your STL file here",
-    "UPLOAD_SUB": "Supports STL, OBJ up to 50MB",
+    "UPLOAD_LABEL": "Drag your 3D file here",
+    "UPLOAD_SUB": "Supports STL, 3MF, STEP, OBJ up to 50MB",
     "MATERIAL": "Material",
     "QUALITY": "Quality",
     "QUANTITY": "Quantity",
@@ -28,15 +28,36 @@
     "TIME": "Print Time",
     "COST": "Total Cost",
     "ORDER": "Order Now",
-    "CONSULT": "Request Consultation"
+    "CONSULT": "Request Consultation",
+    "ERROR_GENERIC": "An error occurred while calculating the quote.",
+    "BENEFITS_TITLE": "Why choose us?",
+    "BENEFITS_1": "Automatic quote with instant cost and time",
+    "BENEFITS_2": "Selected materials and quality control",
+    "BENEFITS_3": "CAD consultation if file needs modifications",
+    "ERR_FILE_REQUIRED": "File is required."
   },
   "SHOP": {
-    "TITLE": "Filaments & Accessories",
+    "TITLE": "Technical solutions",
+    "SUBTITLE": "Ready-made products solving practical problems, no useless decorations.",
     "ADD_CART": "Add to Cart",
     "BACK": "Back to Shop"
   },
   "ABOUT": {
     "TITLE": "About Us",
+    "EYEBROW": "3D Printing Lab",
+    "SUBTITLE": "Transparency on price, quality and time. Technical and CAD consultation for businesses and individuals.",
+    "HOW_TITLE": "How we work",
+    "HOW_TEXT": "We offer an automatic quote for those who already have the 3D file, and a consultation path for those who need to design or optimize the model.",
+    "PILL_1": "Instant Quote",
+    "PILL_2": "Technical Consultation",
+    "PILL_3": "Small series up to 500 pcs",
+    "SERVICES_TITLE": "Main Services",
+    "SERVICE_1": "FDM 3D printing for prototypes and small series",
+    "SERVICE_2": "Technical materials on request",
+    "SERVICE_3": "CAD support and post-processing",
+    "SERVICE_4": "File verification and optimization for printing",
+    "TARGET_TITLE": "Who is it for",
+    "TARGET_TEXT": "Small businesses, freelancers, makers and customers looking for a ready-made product from the shop.",
     "CONTACT_US": "Contact Us",
     "SEND": "Send Message"
   }
diff --git a/frontend/src/assets/i18n/it.json b/frontend/src/assets/i18n/it.json
index e6a7201..86a038b 100644
--- a/frontend/src/assets/i18n/it.json
+++ b/frontend/src/assets/i18n/it.json
@@ -11,14 +11,14 @@
   },
   "CALC": {
     "TITLE": "Calcola Preventivo 3D",
-    "SUBTITLE": "Carica il tuo file STL e ricevi una stima immediata dei costi e tempi di stampa.",
+    "SUBTITLE": "Carica il tuo file 3D (STL, 3MF, STEP...) e ricevi una stima immediata di costi e tempi di stampa.",
     "CTA_START": "Inizia Ora",
     "BUSINESS": "Aziende",
     "PRIVATE": "Privati",
-    "MODE_EASY": "Easy",
-    "MODE_ADVANCED": "Advanced",
-    "UPLOAD_LABEL": "Trascina il tuo file STL qui",
-    "UPLOAD_SUB": "Supportiamo STL, OBJ fino a 50MB",
+    "MODE_EASY": "Rapida",
+    "MODE_ADVANCED": "Avanzata",
+    "UPLOAD_LABEL": "Trascina il tuo file 3D qui",
+    "UPLOAD_SUB": "Supportiamo STL, 3MF, STEP, OBJ fino a 50MB",
     "MATERIAL": "Materiale",
     "QUALITY": "Qualità",
     "QUANTITY": "Quantità",
@@ -28,15 +28,36 @@
     "TIME": "Tempo Stampa",
     "COST": "Costo Totale",
     "ORDER": "Ordina Ora",
-    "CONSULT": "Richiedi Consulenza"
+    "CONSULT": "Richiedi Consulenza",
+    "ERROR_GENERIC": "Si è verificato un errore durante il calcolo del preventivo.",
+    "BENEFITS_TITLE": "Perché scegliere noi?",
+    "BENEFITS_1": "Preventivo automatico con costo e tempo immediati",
+    "BENEFITS_2": "Materiali selezionati e qualità controllata",
+    "BENEFITS_3": "Consulenza CAD se il file ha bisogno di modifiche",
+    "ERR_FILE_REQUIRED": "Il file è obbligatorio."
   },
   "SHOP": {
-    "TITLE": "Filamenti & Accessori",
+    "TITLE": "Soluzioni tecniche",
+    "SUBTITLE": "Prodotti pronti che risolvono problemi pratici, niente decorazioni inutili.",
     "ADD_CART": "Aggiungi al Carrello",
     "BACK": "Torna allo Shop"
   },
   "ABOUT": {
     "TITLE": "Chi Siamo",
+    "EYEBROW": "Laboratorio di stampa 3D",
+    "SUBTITLE": "Trasparenza su prezzo, qualità e tempi. Consulenza tecnica e CAD per aziende e privati.",
+    "HOW_TITLE": "Come lavoriamo",
+    "HOW_TEXT": "Offriamo un preventivo automatico per chi ha già il file 3D, e un percorso di consulenza per chi deve progettare o ottimizzare il modello.",
+    "PILL_1": "Preventivo immediato",
+    "PILL_2": "Consulenza tecnica",
+    "PILL_3": "Piccole serie fino a 500 pz",
+    "SERVICES_TITLE": "Servizi principali",
+    "SERVICE_1": "Stampa 3D FDM per prototipi e piccole serie",
+    "SERVICE_2": "Materiali tecnici su richiesta",
+    "SERVICE_3": "Supporto CAD e post-processing",
+    "SERVICE_4": "Verifica file e ottimizzazione per la stampa",
+    "TARGET_TITLE": "Per chi è",
+    "TARGET_TEXT": "Piccole aziende, freelance, smanettoni e clienti che cercano un prodotto già pronto dallo shop.",
     "CONTACT_US": "Contattaci",
     "SEND": "Invia Messaggio"
   }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 80f28c2..61d676c 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,13 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="it">
 <head>
   <meta charset="utf-8">
   <meta name="robots" content="noindex, nofollow">
-  <title>Frontend</title>
+  <title>3D fab</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 63b43b8..bcb5c2a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -19,6 +19,7 @@ h1, h2, h3, h4, h5, h6 {
   margin: 0;
   font-weight: 600;
   line-height: 1.2;
+  font-family: var(--font-family-display);
 }
 
 p {
@@ -44,4 +45,4 @@ a {
 
 .text-center { text-align: center; }
 .mb-4 { margin-bottom: var(--space-4); }
-.mt-4 { margin-top: var(--space-4); }
\ No newline at end of file
+.mt-4 { margin-top: var(--space-4); }
diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss
index 9f67b3c..ec16db9 100644
--- a/frontend/src/styles/theme.scss
+++ b/frontend/src/styles/theme.scss
@@ -3,16 +3,21 @@
 
 :root {
   /* Semantic Colors - Theming Layer */
-  --color-bg: var(--color-neutral-50);
+  --color-bg: #ffffff;
   --color-bg-card: #ffffff;
   --color-text: var(--color-neutral-900);
   --color-text-muted: var(--color-secondary-500);
   
-  --color-brand: var(--color-primary-600);
-  --color-brand-hover: var(--color-primary-700);
+  --color-brand: var(--color-primary-500);
+  --color-brand-hover: var(--color-primary-600);
   
   --color-border: var(--color-neutral-200);
+
+  --color-success: var(--color-success-500);
+  --color-warning: var(--color-warning-500);
+  --color-error: var(--color-danger-500);
   
   /* Font */
-  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-family-sans: 'IBM Plex Sans', 'Space Grotesk', sans-serif;
+  --font-family-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
 }
diff --git a/frontend/src/styles/tokens.scss b/frontend/src/styles/tokens.scss
index 1e9dbc6..09eb7c3 100644
--- a/frontend/src/styles/tokens.scss
+++ b/frontend/src/styles/tokens.scss
@@ -1,31 +1,33 @@
 /* src/styles/tokens.scss */
 :root {
   /* Colors - Palette */
-  --color-primary-500: #3b82f6;
-  --color-primary-600: #2563eb;
-  --color-primary-700: #1d4ed8;
+  --color-primary-500: #FACF0A;
+  --color-primary-600: #E3BA07;
+  --color-primary-700: #C8A204;
   
-  --color-secondary-500: #64748b;
-  --color-secondary-600: #475569;
+  --color-secondary-500: #6b675c;
+  --color-secondary-600: #514d43;
 
   --color-success-500: #22c55e;
   --color-warning-500: #eab308;
   --color-danger-500: #ef4444;
 
-  --color-neutral-50: #f8fafc;
-  --color-neutral-100: #f1f5f9;
-  --color-neutral-200: #e2e8f0;
-  --color-neutral-300: #cbd5e1;
-  --color-neutral-800: #1e293b;
-  --color-neutral-900: #0f172a;
+  --color-neutral-50: #ffffff;
+  --color-neutral-100: #efede7;
+  --color-neutral-200: #dedad1;
+  --color-neutral-300: #c6c1b6;
+  --color-neutral-800: #1f2933;
+  --color-neutral-900: #101820;
 
   /* Spacing */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
+  --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
+  --space-10: 2.5rem;
   --space-12: 3rem;
 
   /* Radius */