feat(web): add auth for dev enviroment

feat(web): new style and calculator revisited
2026-02-02 18:48:06 +01:00 · 2026-02-02 18:45:22 +01:00 · 2026-02-02 18:41:18 +01:00 · 2026-02-02 18:38:25 +01:00 · 2026-02-02 17:41:20 +01:00 · 2026-02-02 17:38:03 +01:00
65 changed files with 2769 additions and 2087 deletions
--- a/.gitea/workflows/cicd.yaml
+++ b/.gitea/workflows/cicd.yaml
@@ -2,136 +2,127 @@ name: Build, Test and Deploy

 on:
  push:
-    branches:
-      - main
-      - int
-      - dev
+    branches: [main, int, dev]
+
+concurrency:
+  group: print-calculator-${{ gitea.ref }}
+  cancel-in-progress: true

 jobs:
  test-backend:
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4

-      - name: Set up Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.10'
-
-      - name: Install dependencies
+      # Evito actions/setup-python (spesso fragile su act_runner)
+      - name: Install Python deps + run tests
+        shell: bash
        run: |
-          pip install -r backend/requirements.txt
-          pip install pytest httpx
-
-      - name: Run Backend Tests
-        run: |
-          export PYTHONPATH=$PYTHONPATH:$(pwd)/backend
+          apt-get update
+          apt-get install -y --no-install-recommends python3 python3-pip
+          python3 -m pip install --upgrade pip
+          python3 -m pip install -r backend/requirements.txt
+          python3 -m pip install pytest httpx
+          export PYTHONPATH="${PYTHONPATH}:$(pwd)/backend"
          pytest backend/tests

  build-and-push:
    needs: test-backend
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v4

-      - name: Set Environment Variables
+      - name: Set TAG + OWNER lowercase
+        shell: bash
        run: |
          if [[ "${{ gitea.ref }}" == "refs/heads/main" ]]; then
-            echo "TAG=prod" >> $GITHUB_ENV
+            echo "TAG=prod" >> "$GITHUB_ENV"
          elif [[ "${{ gitea.ref }}" == "refs/heads/int" ]]; then
-            echo "TAG=int" >> $GITHUB_ENV
+            echo "TAG=int" >> "$GITHUB_ENV"
          else
-            echo "TAG=dev" >> $GITHUB_ENV
+            echo "TAG=dev" >> "$GITHUB_ENV"
          fi

+          echo "OWNER_LOWER=$(echo '${{ gitea.repository_owner }}' | tr '[:upper:]' '[:lower:]')" >> "$GITHUB_ENV"
+
+      - name: Ensure docker CLI exists
+        shell: bash
+        run: |
+          if ! command -v docker >/dev/null 2>&1; then
+            apt-get update
+            apt-get install -y --no-install-recommends docker.io
+          fi
+          docker version
+
      - name: Login to Gitea Registry
-        uses: docker/login-action@v2
-        with:
-          registry: ${{ secrets.REGISTRY_URL }}
-          username: ${{ secrets.GITEA_USER }}
-          password: ${{ secrets.GITEA_TOKEN }}
+        shell: bash
+        run: |
+          set -euo pipefail
+          printf '%s' "${{ secrets.REGISTRY_TOKEN }}" | docker login "${{ secrets.REGISTRY_URL }}" \
+            -u "${{ secrets.REGISTRY_USER }}" --password-stdin

-      - name: Build and Push Backend
-        uses: docker/build-push-action@v4
-        with:
-          context: ./backend
-          push: true
-          tags: ${{ secrets.REGISTRY_URL }}/${{ gitea.repository_owner }}/print-calculator-backend:${{ env.TAG }}
+      - name: Build & Push Backend
+        shell: bash
+        run: |
+          BACKEND_IMAGE="${{ secrets.REGISTRY_URL }}/${{ env.OWNER_LOWER }}/print-calculator-backend:${{ env.TAG }}"
+          docker build -t "$BACKEND_IMAGE" ./backend
+          docker push "$BACKEND_IMAGE"

-      - name: Build and Push Frontend
-        uses: docker/build-push-action@v4
-        with:
-          context: ./frontend
-          push: true
-          tags: ${{ secrets.REGISTRY_URL }}/${{ gitea.repository_owner }}/print-calculator-frontend:${{ env.TAG }}
+      - name: Build & Push Frontend
+        shell: bash
+        run: |
+          FRONTEND_IMAGE="${{ secrets.REGISTRY_URL }}/${{ env.OWNER_LOWER }}/print-calculator-frontend:${{ env.TAG }}"
+          docker build -t "$FRONTEND_IMAGE" ./frontend
+          docker push "$FRONTEND_IMAGE"

  deploy:
    needs: build-and-push
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set Deployment Vars
+      - name: Set ENV
+        shell: bash
        run: |
          if [[ "${{ gitea.ref }}" == "refs/heads/main" ]]; then
-            echo "ENV=prod" >> $GITHUB_ENV
-            echo "TAG=prod" >> $GITHUB_ENV
+            echo "ENV=prod" >> "$GITHUB_ENV"
          elif [[ "${{ gitea.ref }}" == "refs/heads/int" ]]; then
-            echo "ENV=int" >> $GITHUB_ENV
-            echo "TAG=int" >> $GITHUB_ENV
+            echo "ENV=int" >> "$GITHUB_ENV"
          else
-            echo "ENV=dev" >> $GITHUB_ENV
-            echo "TAG=dev" >> $GITHUB_ENV
+            echo "ENV=dev" >> "$GITHUB_ENV"
          fi

-      - name: Create Remote Directory
-        uses: appleboy/ssh-action@v0.1.10
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: mkdir -p /mnt/user/appdata/print-calculator/${{ env.ENV }}/
+      - name: Trigger deploy on Unraid (forced command key)
+        shell: bash
+        run: |
+          set -euo pipefail

-      - name: Copy Compose File to Server
-        uses: appleboy/scp-action@v0.1.4
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          source: "docker-compose.deploy.yml"
-          target: "/mnt/user/appdata/print-calculator/${{ env.ENV }}/"
+          apt-get update
+          apt-get install -y --no-install-recommends openssh-client

-      - name: Copy Env File to Server
-        uses: appleboy/scp-action@v0.1.4
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          source: "deploy/envs/${{ env.ENV }}.env"
-          target: "/mnt/user/appdata/print-calculator/${{ env.ENV }}/.env"
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh

-      - name: Execute Remote Deployment
-        uses: appleboy/ssh-action@v0.1.10
-        with:
-          host: ${{ secrets.SERVER_HOST }}
-          username: ${{ secrets.SERVER_USER }}
-          key: ${{ secrets.SSH_PRIVATE_KEY }}
-          script: |
-            cd /mnt/user/appdata/print-calculator/${{ env.ENV }}/
-            
-            # Rename the copied env file to strictly '.env' so docker compose picks it up automatically
-            mv ${{ env.ENV }}.env .env
-            
-            # Login to registry
-            echo ${{ secrets.GITEA_TOKEN }} | docker login ${{ secrets.REGISTRY_URL }} -u ${{ secrets.GITEA_USER }} --password-stdin
-            
-            # Pull new images
-            # We force reading from .env just to be safe, though default behavior does it too.
-            docker compose --env-file .env -f docker-compose.deploy.yml pull
-            
-            # Start/Update services
-            # TAG is inside .env now, so we don't even need to pass it explicitly!
-            docker compose --env-file .env -f docker-compose.deploy.yml up -d --remove-orphans
+          # 1) Prende il secret base64 e rimuove spazi/newline/CR
+          printf '%s' "${{ secrets.SSH_PRIVATE_KEY_B64 }}" | tr -d '\r\n\t ' > /tmp/key.b64
+
+          # 2) (debug sicuro) stampa solo la lunghezza della base64
+          echo "b64_len=$(wc -c < /tmp/key.b64)"
+
+          # 3) Decodifica in chiave privata
+          base64 -d /tmp/key.b64 > ~/.ssh/id_ed25519
+
+          # 4) Rimuove eventuali CRLF dentro la chiave (se proviene da Windows)
+          tr -d '\r' < ~/.ssh/id_ed25519 > ~/.ssh/id_ed25519.clean
+          mv ~/.ssh/id_ed25519.clean ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+
+          # 5) Validazione: se fallisce qui, la chiave NON è valida/corrotta
+          ssh-keygen -y -f ~/.ssh/id_ed25519 >/dev/null
+
+          # ... (resto del codice uguale)
+          ssh-keyscan -H "${{ secrets.SERVER_HOST }}" >> ~/.ssh/known_hosts 2>/dev/null
+
+          # Aggiungiamo le opzioni di verbosità se dovesse fallire ancora, 
+          # e assicuriamoci che l'input sia pulito
+          ssh -i ~/.ssh/id_ed25519 -o BatchMode=yes "${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}" "${{ env.ENV }}"
--- a/docker-compose.deploy.yml
+++ b/docker-compose.deploy.yml
@@ -23,7 +23,7 @@ services:
    image: ${REGISTRY_URL}/${REPO_OWNER}/print-calculator-frontend:${TAG}
    container_name: print-calculator-frontend-${ENV}
    ports:
-      - "${FRONTEND_PORT}:80"
+      - "${FRONTEND_PORT}:8008"
    depends_on:
      - backend
    restart: unless-stopped
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,59 +1,53 @@
-# Frontend
+# Print Calculator Frontend

-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.12.
+This is a modern Angular application designed with a Clean Architecture approach (Core, Shared, Features) and Design Tokens for easy theming.

-## Development server
+## Project Structure

-To start a local development server, run:
+- **Core**: Singleton services, global layout components (Navbar, Footer), guards.
+- **Shared**: Reusable dumb UI components (Buttons, Cards, Inputs). No business logic.
+- **Features**: Lazy-loaded modules (Calculator, Shop, About). Each contains its own pages, components, and services.
+- **Styles**: Design tokens and theming layer.

-```bash
-ng serve
-```
+## Getting Started

-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+1. **Install Dependencies**:
+   ```bash
+   npm install
+   ```

-## Code scaffolding
+2. **Run Development Server**:
+   ```bash
+   ng serve
+   ```
+   Navigate to `http://localhost:4200/`.

-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Theming

-```bash
-ng generate component component-name
-```
+The application uses CSS Variables defined in `src/styles/tokens.scss` and mapped in `src/styles/theme.scss`.

-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+- **Change Colors**: Edit `src/styles/tokens.scss`.
+- **Create New Theme**:
+  1. Duplicate `src/styles/theme.scss` (e.g., `theme-dark.scss`).
+  2. Override the semantic variables (e.g., `--color-bg`, `--color-text`).
+  3. Load the new theme file or switch classes on the body tag.

-```bash
-ng generate --help
-```
+## Adding a New Feature

-## Building
+1. **Create Directory**: `src/app/features/my-feature`.
+2. **Create Routes**: Create `my-feature.routes.ts` exporting a `Routes` array.
+3. **Register Route**: Add to `src/app/app.routes.ts` using lazy loading:
+   ```typescript
+   {
+     path: 'my-feature',
+     loadChildren: () => import('./features/my-feature/my-feature.routes').then(m => m.MY_FEATURE_ROUTES)
+   }
+   ```

-To build the project run:
+## Internationalization (i18n)

-```bash
-ng build
-```
+Translations are stored in `src/assets/i18n/`.
+- `it.json` (Italian - Default)
+- `en.json` (English)

-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
-
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
-
-## Additional Resources
-
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+To add a language, create the JSON file and update `LanguageService` in `src/app/core/services/language.service.ts`.
--- 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",
@@ -39,6 +40,19 @@
          },
          "configurations": {
            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+
              "budgets": [
                {
                  "type": "initial",
@@ -50,8 +64,7 @@
                  "maximumWarning": "4kB",
                  "maximumError": "8kB"
                }
-              ],
-              "outputHashing": "all"
+              ]
            },
            "development": {
              "optimization": false,
@@ -59,6 +72,7 @@
              "sourceMap": true
            }
          },
+
          "defaultConfiguration": "production"
        },
        "serve": {
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,8 @@
        "@angular/platform-browser": "^19.2.18",
        "@angular/platform-browser-dynamic": "^19.2.18",
        "@angular/router": "^19.2.18",
+        "@ngx-translate/core": "^17.0.0",
+        "@ngx-translate/http-loader": "^17.0.0",
        "@types/three": "^0.182.0",
        "rxjs": "~7.8.0",
        "three": "^0.182.0",
@@ -4305,6 +4307,32 @@
        "webpack": "^5.54.0"
      }
    },
+    "node_modules/@ngx-translate/core": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-17.0.0.tgz",
+      "integrity": "sha512-Rft2D5ns2pq4orLZjEtx1uhNuEBerUdpFUG1IcqtGuipj6SavgB8SkxtNQALNDA+EVlvsNCCjC2ewZVtUeN6rg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-17.0.0.tgz",
+      "integrity": "sha512-hgS8sa0ARjH9ll3PhkLTufeVXNI2DNR2uFKDhBgq13siUXzzVr/a31M6zgecrtwbA34iaBV01hsTMbMS8V7iIw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16",
+        "@angular/core": ">=16"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,8 @@
    "@angular/platform-browser": "^19.2.18",
    "@angular/platform-browser-dynamic": "^19.2.18",
    "@angular/router": "^19.2.18",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
    "@types/three": "^0.182.0",
    "rxjs": "~7.8.0",
    "three": "^0.182.0",
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
--- a/frontend/src/app/app.component.spec.ts
+++ b/frontend/src/app/app.component.spec.ts
@@ -1,29 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have the 'frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, frontend');
-  });
-});
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -5,9 +5,6 @@ import { RouterOutlet } from '@angular/router';
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  template: `<router-outlet></router-outlet>`
 })
-export class AppComponent {
-  title = 'frontend';
-}
+export class AppComponent {}
--- a/frontend/src/app/app.config.ts
+++ b/frontend/src/app/app.config.ts
@@ -1,28 +1,23 @@
-import { ApplicationConfig, LOCALE_ID, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
+import { ApplicationConfig, provideZoneChangeDetection, importProvidersFrom } from '@angular/core';
+import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
-
-const resolveLocale = () => {
-  if (typeof navigator === 'undefined') {
-    return 'de-CH';
-  }
-  const languages = navigator.languages ?? [];
-  if (navigator.language === 'it-CH' || languages.includes('it-CH')) {
-    return 'it-CH';
-  }
-  if (navigator.language === 'de-CH' || languages.includes('de-CH')) {
-    return 'de-CH';
-  }
-  return 'de-CH';
-};
+import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';

 export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes),
+    provideRouter(routes, withComponentInputBinding(), withViewTransitions()),
    provideHttpClient(),
-    { provide: LOCALE_ID, useFactory: resolveLocale }
+    provideTranslateHttpLoader({
+      prefix: './assets/i18n/',
+      suffix: '.json'
+    }),
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        defaultLanguage: 'it'
+      })
+    )
  ]
-};
+};
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -1,13 +1,26 @@
 import { Routes } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { BasicQuoteComponent } from './quote/basic-quote/basic-quote.component';
-import { AdvancedQuoteComponent } from './quote/advanced-quote/advanced-quote.component';
-import { ContactComponent } from './contact/contact.component';

 export const routes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'quote/basic', component: BasicQuoteComponent },
-  { path: 'quote/advanced', component: AdvancedQuoteComponent },
-  { path: 'contact', component: ContactComponent },
-  { path: '**', redirectTo: '' }
+  {
+    path: '',
+    loadComponent: () => import('./core/layout/layout.component').then(m => m.LayoutComponent),
+    children: [
+      { 
+        path: '', 
+        loadComponent: () => import('./features/home/home.component').then(m => m.HomeComponent)
+      },
+      { 
+        path: 'cal', 
+        loadChildren: () => import('./features/calculator/calculator.routes').then(m => m.CALCULATOR_ROUTES) 
+      },
+      { 
+        path: 'shop', 
+        loadChildren: () => import('./features/shop/shop.routes').then(m => m.SHOP_ROUTES) 
+      },
+      { 
+        path: 'about', 
+        loadChildren: () => import('./features/about/about.routes').then(m => m.ABOUT_ROUTES) 
+      }
+    ]
+  }
 ];
--- a/frontend/src/app/calculator/calculator.component.html
+++ b/frontend/src/app/calculator/calculator.component.html
@@ -1,69 +0,0 @@
-<div class="calculator-container">
-  <mat-card>
-    <mat-card-header>
-      <mat-card-title>3D Print Quote Calculator</mat-card-title>
-      <mat-card-subtitle>Bambu Lab A1 Estimation</mat-card-subtitle>
-    </mat-card-header>
-    
-    <mat-card-content>
-      <div class="upload-section">
-        <input type="file" (change)="onFileSelected($event)" accept=".stl" #fileInput style="display: none;">
-        <button mat-raised-button color="primary" (click)="fileInput.click()">
-          {{ file ? file.name : 'Select STL File' }}
-        </button>
-        
-        <button mat-raised-button color="accent" 
-                [disabled]="!file || loading" 
-                (click)="uploadAndCalculate()">
-          Calculate Quote
-        </button>
-      </div>
-
-      <div *ngIf="loading" class="spinner-container">
-        <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
-        <p>Slicing model... this may take a minute...</p>
-      </div>
-
-      <div *ngIf="error" class="error-message">
-        {{ error }}
-      </div>
-
-      <div *ngIf="results" class="results-section">
-        <div class="total-price">
-          <h3>Total Estimate: {{ results?.cost?.total | currency:'CHF' }}</h3>
-        </div>
-
-        <div class="details-grid">
-          <div class="detail-item">
-            <span class="label">Print Time:</span>
-            <span class="value">{{ results?.print_time_formatted }}</span>
-          </div>
-          <div class="detail-item">
-            <span class="label">Material Used:</span>
-            <span class="value">{{ results?.material_grams | number:'1.1-1' }} g</span>
-          </div>
-        </div>
-
-        <h4>Cost Breakdown</h4>
-        <ul class="breakdown-list">
-          <li>
-            <span>Material</span>
-            <span>{{ results?.cost?.material | currency:'CHF' }}</span>
-          </li>
-          <li>
-            <span>Machine Time</span>
-            <span>{{ results?.cost?.machine | currency:'CHF' }}</span>
-          </li>
-          <li>
-            <span>Energy</span>
-            <span>{{ results?.cost?.energy | currency:'CHF' }}</span>
-          </li>
-           <li>
-            <span>Service/Markup</span>
-            <span>{{ results?.cost?.markup | currency:'CHF' }}</span>
-          </li>
-        </ul>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
--- a/frontend/src/app/calculator/calculator.component.scss
+++ b/frontend/src/app/calculator/calculator.component.scss
--- a/frontend/src/app/calculator/calculator.component.spec.ts
+++ b/frontend/src/app/calculator/calculator.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CalculatorComponent } from './calculator.component';
-
-describe('CalculatorComponent', () => {
-  let component: CalculatorComponent;
-  let fixture: ComponentFixture<CalculatorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CalculatorComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(CalculatorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/frontend/src/app/calculator/calculator.component.ts
+++ b/frontend/src/app/calculator/calculator.component.ts
@@ -1,77 +0,0 @@
-// calculator.component.ts
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { HttpClient } from '@angular/common/http';
-import { MatCardModule } from '@angular/material/card';
-import { MatButtonModule } from '@angular/material/button';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
-interface QuoteResponse {
-  printer: string;
-  print_time_formatted: string;
-  material_grams: number;
-  cost: {
-    material: number;
-    machine: number;
-    energy: number;
-    markup: number;
-    total: number;
-  };
-}
-
-@Component({
-  selector: 'app-calculator',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatCardModule,
-    MatButtonModule,
-    MatProgressSpinnerModule
-  ],
-  templateUrl: './calculator.component.html',
-  styleUrls: ['./calculator.component.scss']
-})
-export class CalculatorComponent {
-  file: File | null = null;
-  results: QuoteResponse | null = null;
-  error = '';
-  loading = false;
-
-  constructor(private http: HttpClient) {}
-
-  onFileSelected(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    if (input.files && input.files.length > 0) {
-      this.file = input.files[0];
-      this.results = null;
-      this.error = '';
-    }
-  }
-
-  uploadAndCalculate(): void {
-    if (!this.file) {
-      this.error = 'Please select a file first.';
-      return;
-    }
-    const formData = new FormData();
-    formData.append('file', this.file);
-    this.loading = true;
-    this.error = '';
-    this.results = null;
-
-    this.http.post<QuoteResponse>('http://localhost:8000/calculate/stl', formData)
-      .subscribe({
-        next: res => {
-          this.results = res;
-          this.loading = false;
-        },
-        error: err => {
-          console.error(err);
-          this.error = err.error?.detail || "An error occurred during calculation.";
-          this.loading = false;
-        }
-      });
-  }
-}
--- a/frontend/src/app/common/stl-viewer/stl-viewer.component.ts
+++ b/frontend/src/app/common/stl-viewer/stl-viewer.component.ts
@@ -1,218 +0,0 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, ViewChild, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import * as THREE from 'three';
-import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-
-@Component({
-  selector: 'app-stl-viewer',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <div class="viewer-container" #rendererContainer>
-      <div *ngIf="isLoading" class="loading-overlay">
-        <span class="material-icons spin">autorenew</span>
-        <p>Loading 3D Model...</p>
-      </div>
-      <div class="dimensions-overlay" *ngIf="dimensions">
-        <p>Size: {{ dimensions.x | number:'1.1-1' }} x {{ dimensions.y | number:'1.1-1' }} x {{ dimensions.z | number:'1.1-1' }} mm</p>
-      </div>
-    </div>
-  `,
-  styles: [`
-    .viewer-container {
-      width: 100%;
-      height: 100%;
-      min-height: 300px;
-      position: relative;
-      background: #0f172a; /* Match app bg approx */
-      overflow: hidden;
-      border-radius: inherit;
-    }
-    .loading-overlay {
-      position: absolute;
-      top: 0; left: 0; right: 0; bottom: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: rgba(15, 23, 42, 0.8);
-      color: white;
-      z-index: 10;
-    }
-    .spin {
-      animation: spin 1s linear infinite;
-      font-size: 2rem;
-      margin-bottom: 0.5rem;
-    }
-    @keyframes spin { 100% { transform: rotate(360deg); } }
-    
-    .dimensions-overlay {
-      position: absolute;
-      bottom: 10px;
-      right: 10px;
-      background: rgba(0,0,0,0.6);
-      color: white;
-      padding: 4px 8px;
-      border-radius: 4px;
-      font-size: 0.8rem;
-      pointer-events: none;
-    }
-  `]
-})
-export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
-  @Input() file: File | null = null;
-  @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef;
-
-  isLoading = false;
-  dimensions: { x: number, y: number, z: number } | null = null;
-
-  private scene!: THREE.Scene;
-  private camera!: THREE.PerspectiveCamera;
-  private renderer!: THREE.WebGLRenderer;
-  private mesh!: THREE.Mesh;
-  private controls!: OrbitControls;
-  private animationId: number | null = null;
-
-  ngOnInit() {
-    this.initThree();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['file'] && this.file) {
-      this.loadSTL(this.file);
-    }
-  }
-
-  ngOnDestroy() {
-    this.stopAnimation();
-    if (this.renderer) {
-      this.renderer.dispose();
-    }
-    if (this.mesh) {
-      this.mesh.geometry.dispose();
-      (this.mesh.material as THREE.Material).dispose();
-    }
-  }
-
-  private initThree() {
-    const container = this.rendererContainer.nativeElement;
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-
-    // Scene
-    this.scene = new THREE.Scene();
-    this.scene.background = new THREE.Color(0x1e293b); // Slate 800
-
-    // Camera
-    this.camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
-    this.camera.position.set(100, 100, 100);
-
-    // Renderer
-    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-    this.renderer.setSize(width, height);
-    this.renderer.setPixelRatio(window.devicePixelRatio);
-    container.appendChild(this.renderer.domElement);
-
-    // Controls
-    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-    this.controls.enableDamping = true;
-    this.controls.dampingFactor = 0.05;
-    this.controls.autoRotate = true;
-    this.controls.autoRotateSpeed = 2.0;
-
-    // Lights
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-    this.scene.add(ambientLight);
-
-    const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
-    dirLight.position.set(50, 50, 50);
-    this.scene.add(dirLight);
-    
-    const backLight = new THREE.DirectionalLight(0xffffff, 0.4);
-    backLight.position.set(-50, -50, -50);
-    this.scene.add(backLight);
-
-    // Grid (Printer Bed attempt)
-    const gridHelper = new THREE.GridHelper(256, 20, 0x4f46e5, 0x334155);
-    this.scene.add(gridHelper);
-
-    // Resize listener
-    const resizeObserver = new ResizeObserver(() => this.onWindowResize());
-    resizeObserver.observe(container);
-
-    this.animate();
-  }
-
-  private loadSTL(file: File) {
-    this.isLoading = true;
-    
-    // Remove previous mesh
-    if (this.mesh) {
-        this.scene.remove(this.mesh);
-        this.mesh.geometry.dispose();
-        (this.mesh.material as THREE.Material).dispose();
-    }
-
-    const loader = new STLLoader();
-    const reader = new FileReader();
-
-    reader.onload = (event) => {
-      const buffer = event.target?.result as ArrayBuffer;
-      const geometry = loader.parse(buffer);
-      
-      geometry.computeBoundingBox();
-      const center = new THREE.Vector3();
-      geometry.boundingBox?.getCenter(center);
-      geometry.center(); // Center geometry
-      
-      // Calculate dimensions
-      const size = new THREE.Vector3();
-      geometry.boundingBox?.getSize(size);
-      this.dimensions = { x: size.x, y: size.y, z: size.z };
-
-      // Re-position camera based on size
-      const maxDim = Math.max(size.x, size.y, size.z);
-      this.camera.position.set(maxDim * 1.5, maxDim * 1.5, maxDim * 1.5);
-      this.camera.lookAt(0, 0, 0);
-
-      // Material
-      const material = new THREE.MeshStandardMaterial({ 
-        color: 0x6366f1, // Indigo 500
-        roughness: 0.5,
-        metalness: 0.1
-      });
-
-      this.mesh = new THREE.Mesh(geometry, material);
-      this.mesh.rotation.x = -Math.PI / 2; // STL usually needs this
-      this.scene.add(this.mesh);
-      
-      this.isLoading = false;
-    };
-
-    reader.readAsArrayBuffer(file);
-  }
-
-  private animate() {
-    this.animationId = requestAnimationFrame(() => this.animate());
-    this.controls.update();
-    this.renderer.render(this.scene, this.camera);
-  }
-
-  private stopAnimation() {
-    if (this.animationId !== null) {
-      cancelAnimationFrame(this.animationId);
-    }
-  }
-
-  private onWindowResize() {
-    if (!this.rendererContainer) return;
-    const container = this.rendererContainer.nativeElement;
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-    this.renderer.setSize(width, height);
-  }
-}
--- a/frontend/src/app/contact/contact.component.html
+++ b/frontend/src/app/contact/contact.component.html
@@ -1,50 +0,0 @@
-<div class="container fade-in">
-    <header class="section-header">
-      <a routerLink="/" class="back-link">
-        <span class="material-icons">arrow_back</span> Back
-      </a>
-      <h1>Contact Me</h1>
-      <p>Have a special project? Let's talk.</p>
-    </header>
-  
-    <div class="contact-card card">
-        <div class="contact-info">
-            <div class="info-item">
-                <span class="material-icons">email</span>
-                <div>
-                    <h3>Email</h3>
-                    <p>joe&#64;example.com</p>
-                </div>
-            </div>
-            
-            <div class="info-item">
-                <span class="material-icons">location_on</span>
-                <div>
-                    <h3>Location</h3>
-                    <p>Milan, Italy</p>
-                </div>
-            </div>
-        </div>
-        
-        <div class="divider"></div>
-        
-        <form class="contact-form" (submit)="onSubmit($event)">
-            <div class="form-group">
-                <label>Your Name</label>
-                <input type="text" placeholder="John Doe">
-            </div>
-            
-            <div class="form-group">
-                <label>Email Address</label>
-                <input type="email" placeholder="john@example.com">
-            </div>
-            
-            <div class="form-group">
-                <label>Message</label>
-                <textarea rows="5" placeholder="Tell me about your project..."></textarea>
-            </div>
-            
-            <button type="submit" class="btn btn-secondary btn-block">Send Message</button>
-        </form>
-    </div>
-  </div>
--- a/frontend/src/app/contact/contact.component.scss
+++ b/frontend/src/app/contact/contact.component.scss
@@ -1,97 +0,0 @@
-.section-header {
-    margin-bottom: 2rem;
-    text-align: center;
-    
-    .back-link {
-        position: absolute;
-        left: 2rem;
-        top: 2rem;
-        display: inline-flex;
-        align-items: center;
-        color: var(--text-muted);
-        
-        .material-icons { margin-right: 0.5rem; }
-        &:hover { color: var(--primary-color); }
-    }
-    
-    @media (max-width: 768px) {
-        .back-link {
-            position: static;
-            display: block;
-            margin-bottom: 1rem;
-        }
-    }
-}
-
-.contact-card {
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.contact-info {
-    display: flex;
-    gap: 2rem;
-    margin-bottom: 2rem;
-    
-    .info-item {
-        display: flex;
-        align-items: flex-start;
-        gap: 1rem;
-        
-        .material-icons {
-            color: var(--secondary-color);
-            background: rgba(236, 72, 153, 0.1);
-            padding: 0.5rem;
-            border-radius: 50%;
-        }
-        
-        h3 { margin: 0 0 0.25rem 0; font-size: 1rem; }
-        p { margin: 0; color: var(--text-muted); }
-    }
-}
-
-.divider {
-    height: 1px;
-    background: var(--border-color);
-    margin: 2rem 0;
-}
-
-.form-group {
-    margin-bottom: 1.5rem;
-    
-    label {
-        display: block;
-        margin-bottom: 0.5rem;
-        color: var(--text-muted);
-        font-size: 0.9rem;
-    }
-    
-    input, textarea {
-        width: 100%;
-        padding: 0.75rem;
-        background: var(--bg-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
-        color: var(--text-main);
-        font-family: inherit;
-        box-sizing: border-box;
-        
-        &:focus {
-            outline: none;
-            border-color: var(--secondary-color);
-        }
-    }
-}
-
-.btn-block {
-    width: 100%;
-}
-
-.fade-in {
-    animation: fadeIn 0.4s ease-out;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
--- a/frontend/src/app/contact/contact.component.ts
+++ b/frontend/src/app/contact/contact.component.ts
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
-
-@Component({
-  selector: 'app-contact',
-  standalone: true,
-  imports: [CommonModule, RouterLink],
-  templateUrl: './contact.component.html',
-  styleUrls: ['./contact.component.scss']
-})
-export class ContactComponent {
-    onSubmit(event: Event) {
-        event.preventDefault();
-        alert("Thanks for your message! This is a demo form.");
-    }
-}
--- a/frontend/src/app/core/layout/footer.component.ts
+++ b/frontend/src/app/core/layout/footer.component.ts
@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  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%;
+    }
+  `]
+})
+export class FooterComponent {}
--- a/frontend/src/app/core/layout/layout.component.ts
+++ b/frontend/src/app/core/layout/layout.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './navbar.component';
+import { FooterComponent } from './footer.component';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [RouterOutlet, NavbarComponent, FooterComponent],
+  template: `
+    <div class="layout-wrapper">
+      <app-navbar></app-navbar>
+      <main class="main-content">
+        <router-outlet></router-outlet>
+      </main>
+      <app-footer></app-footer>
+    </div>
+  `,
+  styles: [`
+    .layout-wrapper {
+      display: flex;
+      flex-direction: column;
+      min-height: 100vh;
+    }
+    .main-content {
+      flex: 1;
+      padding-bottom: var(--space-12);
+    }
+  `]
+})
+export class LayoutComponent {}
--- a/frontend/src/app/core/layout/navbar.component.ts
+++ b/frontend/src/app/core/layout/navbar.component.ts
@@ -0,0 +1,111 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { LanguageService } from '../services/language.service';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+
+@Component({
+  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);
+    }
+  `]
+})
+export class NavbarComponent {
+  constructor(public langService: LanguageService) {}
+
+  toggleLang() {
+    const newLang = this.langService.currentLang() === 'it' ? 'en' : 'it';
+    this.langService.switchLang(newLang);
+  }
+}
--- a/frontend/src/app/core/services/language.service.ts
+++ b/frontend/src/app/core/services/language.service.ts
@@ -0,0 +1,20 @@
+import { Injectable, signal } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LanguageService {
+  currentLang = signal('it');
+
+  constructor(private translate: TranslateService) {
+    this.translate.addLangs(['it', 'en']);
+    this.translate.setDefaultLang('it');
+    this.translate.use('it');
+  }
+
+  switchLang(lang: string) {
+    this.translate.use(lang);
+    this.currentLang.set(lang);
+  }
+}
--- a/frontend/src/app/features/about/about-page.component.ts
+++ b/frontend/src/app/features/about/about-page.component.ts
@@ -0,0 +1,96 @@
+import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { ContactFormComponent } from './components/contact-form/contact-form.component';
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+
+@Component({
+  selector: 'app-about-page',
+  standalone: true,
+  imports: [TranslateModule, ContactFormComponent, AppCardComponent],
+  template: `
+    <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>{{ 'ABOUT.HOW_TITLE' | translate }}</h2>
+        <p>{{ 'ABOUT.HOW_TEXT' | translate }}</p>
+
+        <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">
+        <app-card>
+          <h2>{{ 'ABOUT.CONTACT_US' | translate }}</h2>
+          <app-contact-form></app-contact-form>
+        </app-card>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .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 {}
--- a/frontend/src/app/features/about/about.routes.ts
+++ b/frontend/src/app/features/about/about.routes.ts
@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { AboutPageComponent } from './about-page.component';
+
+export const ABOUT_ROUTES: Routes = [
+  { path: '', component: AboutPageComponent }
+];
--- 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
@@ -0,0 +1,66 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-contact-form',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, TranslateModule, AppInputComponent, AppButtonComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <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>Messaggio</label>
+        <textarea formControlName="message" class="form-control" rows="4"></textarea>
+      </div>
+
+      <div class="actions">
+        <app-button type="submit" [disabled]="form.invalid || sent()">
+          {{ sent() ? 'Inviato!' : ('ABOUT.SEND' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      font-family: inherit;
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+  `]
+})
+export class ContactFormComponent {
+  form: FormGroup;
+  sent = signal(false);
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      name: ['', Validators.required],
+      email: ['', [Validators.required, Validators.email]],
+      message: ['', Validators.required]
+    });
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      // Mock submit
+      this.sent.set(true);
+      setTimeout(() => {
+        this.sent.set(false);
+        this.form.reset();
+      }, 3000);
+    }
+  }
+}
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/frontend/src/app/features/calculator/calculator-page.component.ts
@@ -0,0 +1,126 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
+import { AppAlertComponent } from '../../shared/components/app-alert/app-alert.component';
+import { UploadFormComponent } from './components/upload-form/upload-form.component';
+import { QuoteResultComponent } from './components/quote-result/quote-result.component';
+import { QuoteEstimatorService, QuoteRequest, QuoteResult } from './services/quote-estimator.service';
+
+@Component({
+  selector: 'app-calculator-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, AppCardComponent, AppAlertComponent, UploadFormComponent, QuoteResultComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'CALC.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'CALC.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container content-grid">
+      <!-- Left Column: Input -->
+      <div class="col-input">
+        <app-card>
+          <div class="tabs-wrapper">
+             <div class="sub-tabs">
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'easy'"
+                  (click)="mode.set('easy')">
+                  {{ 'CALC.MODE_EASY' | translate }}
+                </span>
+                <span class="divider">/</span>
+                <span 
+                  class="mode-switch" 
+                  [class.active]="mode() === 'advanced'"
+                  (click)="mode.set('advanced')">
+                  {{ 'CALC.MODE_ADVANCED' | translate }}
+                </span>
+             </div>
+          </div>
+
+          <app-upload-form
+            [mode]="mode()"
+            [loading]="loading()"
+            (submitRequest)="onCalculate($event)"
+          ></app-upload-form>
+        </app-card>
+      </div>
+
+      <!-- Right Column: Result or Info -->
+      <div class="col-result">
+        @if (error()) {
+          <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>{{ 'CALC.BENEFITS_TITLE' | translate }}</h3>
+            <ul class="benefits">
+               <li>{{ 'CALC.BENEFITS_1' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_2' | translate }}</li>
+               <li>{{ 'CALC.BENEFITS_3' | translate }}</li>
+            </ul>
+          </app-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-12) 0; text-align: center; }
+    .subtitle { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; }
+    
+    .content-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1.5fr 1fr;
+      }
+    }
+
+    .tabs-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-6);
+      border-bottom: 1px solid var(--color-border);
+      padding-bottom: var(--space-2);
+    }
+    
+    .sub-tabs { font-size: 0.875rem; color: var(--color-text-muted); }
+    .mode-switch { cursor: pointer; &:hover { color: var(--color-text); } }
+    .mode-switch.active { font-weight: 700; color: var(--color-brand); }
+    .divider { margin: 0 var(--space-2); }
+
+    .benefits { padding-left: var(--space-4); color: var(--color-text-muted); line-height: 2; }
+  `]
+})
+export class CalculatorPageComponent {
+  mode = signal<any>('easy');
+  loading = signal(false);
+  result = signal<QuoteResult | null>(null);
+  error = signal<boolean>(false);
+
+  constructor(private estimator: QuoteEstimatorService) {}
+
+  onCalculate(req: QuoteRequest) {
+    this.loading.set(true);
+    this.error.set(false);
+    this.result.set(null);
+    
+    this.estimator.calculate(req).subscribe({
+      next: (res) => {
+        this.result.set(res);
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set(true);
+        this.loading.set(false);
+      }
+    });
+  }
+}
--- a/frontend/src/app/features/calculator/calculator.routes.ts
+++ b/frontend/src/app/features/calculator/calculator.routes.ts
@@ -0,0 +1,6 @@
+import { Routes } from '@angular/router';
+import { CalculatorPageComponent } from './calculator-page.component';
+
+export const CALCULATOR_ROUTES: Routes = [
+  { path: '', component: CalculatorPageComponent }
+];
--- 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
@@ -0,0 +1,56 @@
+import { Component, input, output } from '@angular/core';
+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, SummaryCardComponent],
+  template: `
+    <app-card>
+      <h3 class="title">{{ 'CALC.RESULT' | translate }}</h3>
+      
+      <div class="result-grid">
+        <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">
+        <app-button variant="primary" [fullWidth]="true">{{ 'CALC.ORDER' | translate }}</app-button>
+        <app-button variant="outline" [fullWidth]="true">{{ 'CALC.CONSULT' | translate }}</app-button>
+      </div>
+    </app-card>
+  `,
+  styles: [`
+    .title { margin-bottom: var(--space-6); text-align: center; }
+    .result-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    .full-width { grid-column: span 2; }
+    
+    .actions { display: flex; flex-direction: column; gap: var(--space-3); }
+  `]
+})
+export class QuoteResultComponent {
+  result = input.required<QuoteResult>();
+}
--- 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
@@ -0,0 +1,196 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
+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, StlViewerComponent],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      
+      <div class="section">
+        @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>
+
+      <div class="grid">
+        <app-select
+          formControlName="material"
+          [label]="'CALC.MATERIAL' | translate"
+          [options]="materials"
+        ></app-select>
+
+        <app-select
+          formControlName="quality"
+          [label]="'CALC.QUALITY' | translate"
+          [options]="qualities"
+        ></app-select>
+      </div>
+
+      <app-input
+        formControlName="quantity"
+        type="number"
+        [label]="'CALC.QUANTITY' | translate"
+      ></app-input>
+
+      @if (mode() === 'advanced') {
+        <app-input
+          formControlName="notes"
+          [label]="'CALC.NOTES' | translate"
+          placeholder="Istruzioni specifiche..."
+        ></app-input>
+      }
+
+      <div class="actions">
+        <app-button 
+          type="submit" 
+          [disabled]="form.invalid || loading()" 
+          [fullWidth]="true">
+          {{ loading() ? '...' : ('CALC.CALCULATE' | translate) }}
+        </app-button>
+      </div>
+    </form>
+  `,
+  styles: [`
+    .section { margin-bottom: var(--space-6); }
+    .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 {
+  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 (Resistente)', value: 'PETG' },
+    { label: 'TPU (Flessibile)', value: 'TPU' }
+  ];
+
+  qualities = [
+    { label: 'Bozza (Veloce)', value: 'Draft' },
+    { label: 'Standard', value: 'Standard' },
+    { label: 'Alta definizione', value: 'High' }
+  ];
+  acceptedFormats = '.stl,.3mf,.step,.stp,.obj,.amf,.ply,.igs,.iges';
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      files: [[], Validators.required],
+      material: ['PLA', Validators.required],
+      quality: ['Standard', Validators.required],
+      quantity: [1, [Validators.required, Validators.min(1)]],
+      notes: ['']
+    });
+  }
+
+  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,
+        mode: this.mode()
+      });
+    } else {
+      this.form.markAllAsTouched();
+    }
+  }
+}
--- a/frontend/src/app/features/calculator/services/quote-estimator.service.ts
+++ b/frontend/src/app/features/calculator/services/quote-estimator.service.ts
@@ -0,0 +1,121 @@
+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 {
+  files: File[];
+  material: string;
+  quality: string;
+  quantity: number;
+  notes?: string;
+  mode: 'easy' | 'advanced';
+}
+
+export interface QuoteResult {
+  price: number;
+  currency: string;
+  printTimeHours: number;
+  materialUsageGrams: number;
+  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> {
+    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));
+      
+      const headers: any = {};
+      // @ts-ignore
+      if (environment.basicAuth) {
+          // @ts-ignore
+          headers['Authorization'] = 'Basic ' + btoa(environment.basicAuth);
+      }
+      
+      console.log(`Sending file: ${file.name} to ${environment.apiUrl}/api/quote`);
+      return this.http.post<BackendResponse>(`${environment.apiUrl}/api/quote`, formData, { headers }).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';
+  }
+}
--- a/frontend/src/app/features/home/home.component.ts
+++ b/frontend/src/app/features/home/home.component.ts
@@ -0,0 +1,493 @@
+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: `
+    <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 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>
+      </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: [`
+    .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-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);
+    }
+    .calculator-grid {
+      display: grid;
+      gap: var(--space-10);
+      align-items: center;
+    }
+    .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);
+    }
+    .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;
+      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; }
+    }
+  `]
+})
+export class HomeComponent {}
--- 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
@@ -0,0 +1,48 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { Product } from '../../services/shop.service';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <div class="product-card">
+      <div class="image-placeholder"></div>
+      <div class="content">
+        <span class="category">{{ product().category }}</span>
+        <h3 class="name">
+            <a [routerLink]="['/shop', product().id]">{{ product().name }}</a>
+        </h3>
+        <div class="footer">
+          <span class="price">{{ product().price | currency:'EUR' }}</span>
+          <a [routerLink]="['/shop', product().id]" class="view-btn">Dettagli</a>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .product-card {
+      background: var(--color-bg-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      overflow: hidden;
+      transition: box-shadow 0.2s;
+      &:hover { box-shadow: var(--shadow-md); }
+    }
+    .image-placeholder {
+      height: 200px;
+      background-color: var(--color-neutral-200);
+    }
+    .content { padding: var(--space-4); }
+    .category { font-size: 0.75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+    .name { font-size: 1.125rem; margin: var(--space-2) 0; a { color: var(--color-text); text-decoration: none; &:hover { color: var(--color-brand); } } }
+    .footer { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4); }
+    .price { font-weight: 700; color: var(--color-brand); }
+    .view-btn { font-size: 0.875rem; font-weight: 500; }
+  `]
+})
+export class ProductCardComponent {
+  product = input.required<Product>();
+}
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/frontend/src/app/features/shop/product-detail.component.ts
@@ -0,0 +1,80 @@
+import { Component, input, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
+
+@Component({
+  selector: 'app-product-detail',
+  standalone: true,
+  imports: [CommonModule, RouterLink, TranslateModule, AppButtonComponent],
+  template: `
+    <div class="container wrapper">
+      <a routerLink="/shop" class="back-link">← {{ 'SHOP.BACK' | translate }}</a>
+      
+      @if (product(); as p) {
+        <div class="detail-grid">
+          <div class="image-box"></div>
+          
+          <div class="info">
+            <span class="category">{{ p.category }}</span>
+            <h1>{{ p.name }}</h1>
+            <p class="price">{{ p.price | currency:'EUR' }}</p>
+            
+            <p class="desc">{{ p.description }}</p>
+            
+            <div class="actions">
+              <app-button variant="primary" (click)="addToCart()">
+                {{ 'SHOP.ADD_CART' | translate }}
+              </app-button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <p>Prodotto non trovato.</p>
+      }
+    </div>
+  `,
+  styles: [`
+    .wrapper { padding-top: var(--space-8); }
+    .back-link { display: inline-block; margin-bottom: var(--space-6); color: var(--color-text-muted); }
+    
+    .detail-grid {
+      display: grid;
+      gap: var(--space-8);
+      @media(min-width: 768px) {
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+    
+    .image-box {
+      background-color: var(--color-neutral-200);
+      border-radius: var(--radius-lg);
+      aspect-ratio: 1;
+    }
+
+    .category { color: var(--color-brand); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; }
+    .price { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: var(--space-4) 0; }
+    .desc { color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-8); }
+  `]
+})
+export class ProductDetailComponent {
+  // Input binding from router
+  id = input<string>();
+  
+  product = signal<Product | undefined>(undefined);
+
+  constructor(private shopService: ShopService) {}
+
+  ngOnInit() {
+    const productId = this.id();
+    if (productId) {
+      this.shopService.getProductById(productId).subscribe(p => this.product.set(p));
+    }
+  }
+
+  addToCart() {
+    alert('Aggiunto al carrello (Mock)');
+  }
+}
--- a/frontend/src/app/features/shop/services/shop.service.ts
+++ b/frontend/src/app/features/shop/services/shop.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+export interface Product {
+  id: string;
+  name: string;
+  description: string;
+  price: number;
+  category: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ShopService {
+  // Dati statici per ora
+  private staticProducts: Product[] = [
+    {
+      id: '1',
+      name: 'Filamento PLA Standard',
+      description: 'Il classico per ogni stampa, facile e affidabile.',
+      price: 24.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '2',
+      name: 'Filamento PETG Tough',
+      description: 'Resistente agli urti e alle temperature.',
+      price: 29.90,
+      category: 'Filamenti'
+    },
+    {
+      id: '3',
+      name: 'Kit Ugelli (0.4mm)',
+      description: 'Set di ricambio per estrusore FDM.',
+      price: 15.00,
+      category: 'Accessori'
+    }
+  ];
+
+  getProducts(): Observable<Product[]> {
+    return of(this.staticProducts);
+  }
+
+  getProductById(id: string): Observable<Product | undefined> {
+    return of(this.staticProducts.find(p => p.id === id));
+  }
+}
--- a/frontend/src/app/features/shop/shop-page.component.ts
+++ b/frontend/src/app/features/shop/shop-page.component.ts
@@ -0,0 +1,43 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { ShopService, Product } from './services/shop.service';
+import { ProductCardComponent } from './components/product-card/product-card.component';
+
+@Component({
+  selector: 'app-shop-page',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, ProductCardComponent],
+  template: `
+    <div class="container hero">
+      <h1>{{ 'SHOP.TITLE' | translate }}</h1>
+      <p class="subtitle">{{ 'SHOP.SUBTITLE' | translate }}</p>
+    </div>
+
+    <div class="container">
+      <div class="grid">
+        @for (product of products(); track product.id) {
+          <app-product-card [product]="product"></app-product-card>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .hero { padding: var(--space-8) 0; text-align: center; }
+    .subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); }
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: var(--space-6);
+    }
+  `]
+})
+export class ShopPageComponent {
+  products = signal<Product[]>([]);
+
+  constructor(private shopService: ShopService) {
+    this.shopService.getProducts().subscribe(data => {
+      this.products.set(data);
+    });
+  }
+}
--- a/frontend/src/app/features/shop/shop.routes.ts
+++ b/frontend/src/app/features/shop/shop.routes.ts
@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+import { ShopPageComponent } from './shop-page.component';
+import { ProductDetailComponent } from './product-detail.component';
+
+export const SHOP_ROUTES: Routes = [
+  { path: '', component: ShopPageComponent },
+  { path: ':id', component: ProductDetailComponent }
+];
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -1,38 +0,0 @@
-<div class="container home-container">
-  <header class="hero">
-    <h1>3D Print Calculator</h1>
-    <p class="subtitle">Get instant quotes for your STL files or get in touch for custom projects.</p>
-  </header>
-
-  <div class="grid-2 cards-wrapper">
-    <!-- Quote Card -->
-    <a routerLink="/quote/basic" class="card action-card">
-      <div class="icon-wrapper">
-        <span class="material-icons">calculate</span>
-      </div>
-      <h2>Get a Quote</h2>
-      <p>Upload your STL file and get an instant price estimation based on material and print time.</p>
-      <span class="btn btn-primary">Start Calculation</span>
-    </a>
-
-    <!-- Advanced Quote Card -->
-    <a routerLink="/quote/advanced" class="card action-card">
-      <div class="icon-wrapper">
-        <span class="material-icons">science</span>
-      </div>
-      <h2>Advanced Quote</h2>
-      <p>Fine-tune print settings like layer height, infill, and more for specific needs.</p>
-      <span class="btn btn-secondary">Configure</span>
-    </a>
-
-    <!-- Contact Card -->
-    <a routerLink="/contact" class="card action-card">
-      <div class="icon-wrapper">
-        <span class="material-icons">mail</span>
-      </div>
-      <h2>Contact Me</h2>
-      <p>Need a custom design or have specific requirements? Send me a message directly.</p>
-      <span class="btn btn-secondary">Get in Touch</span>
-    </a>
-  </div>
-</div>
--- a/frontend/src/app/home/home.component.scss
+++ b/frontend/src/app/home/home.component.scss
@@ -1,81 +0,0 @@
-.home-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 80vh;
-  text-align: center;
-}
-
-.hero {
-  margin-bottom: 4rem;
-  
-  h1 {
-    font-size: 3.5rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  
-  .subtitle {
-    font-size: 1.25rem;
-    color: var(--text-muted);
-    max-width: 600px;
-    margin: 0 auto;
-  }
-}
-
-.cards-wrapper {
-  width: 100%;
-  max-width: 900px;
-}
-
-.action-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  text-decoration: none;
-  color: var(--text-main);
-  background: var(--surface-color);
-  
-  .icon-wrapper {
-    background: rgba(99, 102, 241, 0.1);
-    padding: 1rem;
-    border-radius: 50%;
-    margin-bottom: 1.5rem;
-    
-    .material-icons {
-      font-size: 2.5rem;
-      color: var(--primary-color);
-    }
-  }
-  
-  h2 {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  p {
-    color: var(--text-muted);
-    margin-bottom: 2rem;
-    line-height: 1.6;
-  }
-  
-  .btn-secondary {
-    background-color: transparent;
-    border: 1px solid var(--border-color);
-    color: var(--text-main);
-    
-    &:hover {
-      background-color: var(--surface-hover);
-    }
-  }
-  
-  &:hover {
-    .icon-wrapper {
-        background: rgba(99, 102, 241, 0.2);
-    }
-  }
-}
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'app-home',
-  standalone: true,
-  imports: [RouterLink, CommonModule],
-  templateUrl: './home.component.html',
-  styleUrls: ['./home.component.scss']
-})
-export class HomeComponent {}
--- a/frontend/src/app/print.service.ts
+++ b/frontend/src/app/print.service.ts
@@ -1,32 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class PrintService {
-  private http = inject(HttpClient);
-  private apiUrl = 'http://127.0.0.1:8000'; // Should be in environment
-
-  calculateQuote(file: File, params?: any): Observable<any> {
-    const formData = new FormData();
-    formData.append('file', file);
-    
-    // Append extra params if meant for backend
-    if (params) {
-        Object.keys(params).forEach(key => {
-            if (params[key] !== null && params[key] !== undefined) {
-                formData.append(key, params[key]);
-            }
-        });
-    }
-
-    return this.http.post(`${this.apiUrl}/api/quote`, formData);
-  }
-
-  getProfiles(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/api/profiles/available`);
-  }
-}
-
--- a/frontend/src/app/quote/advanced-quote/advanced-quote.component.html
+++ b/frontend/src/app/quote/advanced-quote/advanced-quote.component.html
@@ -1,152 +0,0 @@
-<div class="container fade-in">
-  <header class="section-header">
-    <a routerLink="/" class="back-link">
-      <span class="material-icons">arrow_back</span> Back
-    </a>
-    <h1>Advanced Quote</h1>
-    <p>Configure detailed print parameters for your project.</p>
-  </header>
-
-  <div class="grid-2 quote-layout">
-    <!-- Left: Inputs -->
-    <div class="card p-0 overflow-hidden">
-      <!-- Upload Area -->
-      <div class="upload-area small" 
-           [class.drag-over]="isDragOver"
-           [class.has-file]="selectedFile"
-           (dragover)="onDragOver($event)"
-           (dragleave)="onDragLeave($event)"
-           (drop)="onDrop($event)">
-        
-        <input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
-        
-        <!-- Empty State -->
-        <div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
-          <span class="material-icons">cloud_upload</span>
-          <p>Click or Drop STL here</p>
-        </div>
-
-        <!-- Selected State -->
-        <div *ngIf="selectedFile">
-            <div class="viewer-wrapper">
-                <app-stl-viewer [file]="selectedFile"></app-stl-viewer>
-            </div>
-            <div class="file-action-bar border-top">
-                <div class="file-info">
-                    <span class="material-icons">description</span>
-                    <span class="file-name">{{ selectedFile.name }}</span>
-                </div>
-                <button class="btn-icon danger" (click)="removeFile($event)" title="Remove">
-                    <span class="material-icons">delete</span>
-                </button>
-            </div>
-        </div>
-      </div>
-
-      <!-- Parameters Form -->
-      <div class="params-form">
-        <h3>Print Settings</h3>
-        
-        <div class="form-group">
-          <label>Material</label>
-          <select [(ngModel)]="params.filament">
-            <option *ngFor="let m of materialOptions" [value]="m.value">{{ m.label }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Color</label>
-          <select [(ngModel)]="params.material_color">
-            <option *ngFor="let c of colorOptions" [value]="c">{{ c }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Quality</label>
-          <select [(ngModel)]="params.quality">
-            <option *ngFor="let q of qualityOptions" [value]="q.value">{{ q.label }}</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label>Infill Density (%)</label>
-          <div class="range-wrapper">
-            <input type="range" [(ngModel)]="params.infill_density" min="0" max="100" step="5">
-            <span>{{ params.infill_density }}%</span>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label>Infill Pattern</label>
-          <select [(ngModel)]="params.infill_pattern">
-            <option *ngFor="let p of infillPatternOptions" [value]="p.value">{{ p.label }}</option>
-          </select>
-        </div>
-      </div>
-
-      <div class="actions">
-        <button class="btn btn-primary btn-block" 
-                [disabled]="!selectedFile || isCalculating"
-                (click)="calculate()">
-          <span *ngIf="!isCalculating">Calculate Price</span>
-          <span *ngIf="isCalculating">Calculating...</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Right: Results -->
-    <div class="results-area" *ngIf="quoteResult">
-      <div class="card result-card">
-        <h2>Estimated Cost</h2>
-        <div class="price-big">
-          {{ quoteResult?.cost?.total | currency:'CHF' }}
-        </div>
-        
-        <div class="specs-list">
-          <div class="spec-item">
-            <span>Print Time</span>
-            <strong>{{ quoteResult?.print_time_formatted }}</strong>
-          </div>
-          <div class="spec-item">
-            <span>Material Weight</span>
-            <strong>{{ quoteResult?.material_grams | number:'1.0-0' }}g</strong>
-          </div>
-        </div>
-
-        <!-- Param Summary (Future Proofing) -->
-        <div class="specs-list secondary">
-            <div class="spec-header">Request Specs</div>
-            <div class="spec-item compact">
-                <span>Infill</span>
-                <span>{{ params.infill_density }}%</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Infill Pattern</span>
-                <span>{{ infillPatternLabel }}</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Material</span>
-                <span>{{ materialLabel }}</span>
-            </div>
-            <div class="spec-item compact">
-                <span>Color</span>
-                <span>{{ params.material_color }}</span>
-            </div>
-        </div>
-
-        <div class="note-box">
-          <p>Note: Color does not affect the estimate. Printer is fixed to Bambu Lab A1.</p>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Empty State -->
-    <div class="results-area empty" *ngIf="!quoteResult">
-      <div class="card placeholder-card">
-        <span class="material-icons">science</span>
-        <h3>Advanced Quote</h3>
-        <p>Configure settings and calculate.</p>
-      </div>
-    </div>
-  </div>
-</div>
--- a/frontend/src/app/quote/advanced-quote/advanced-quote.component.scss
+++ b/frontend/src/app/quote/advanced-quote/advanced-quote.component.scss
@@ -1,269 +0,0 @@
-.section-header {
-  margin-bottom: 2rem;
-  
-  .back-link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--text-muted);
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-    cursor: pointer;
-    
-    .material-icons {
-      font-size: 1.1rem;
-      margin-right: 0.25rem;
-    }
-    
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-  
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  p {
-    color: var(--text-muted);
-  }
-}
-
-.upload-area {
-  border-bottom: 1px solid var(--border-color);
-  background: var(--surface-color);
-  transition: all 0.2s;
-  
-  &.drag-over {
-    background: rgba(99, 102, 241, 0.1);
-  }
-
-  &:not(.has-file) {
-    cursor: pointer;
-  }
-  
-  .empty-state {
-      padding: 1.5rem;
-      text-align: center;
-      .material-icons {
-        font-size: 2rem;
-        color: var(--primary-color);
-        margin-bottom: 0.5rem;
-    }
-    p { margin: 0; color: var(--text-muted);}
-  }
-}
-
-.viewer-wrapper {
-  height: 250px;
-  width: 100%;
-  background: #0f172a;
-}
-
-.file-action-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: var(--surface-color);
-  
-  &.border-top { border-top: 1px solid var(--border-color); }
-  
-  .file-info {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text-main);
-    
-    .material-icons { color: var(--primary-color); font-size: 1.2rem; }
-    .file-name { font-size: 0.9rem; }
-  }
-  
-  .btn-icon {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.25rem;
-    border-radius: 50%;
-    
-    .material-icons {
-      font-size: 1.2rem;
-      color: var(--text-muted);
-    }
-    
-    &.danger:hover {
-        background: rgba(239, 68, 68, 0.2);
-        .material-icons { color: #ef4444; }
-    }
-  }
-}
-
-.params-form {
-    padding: 1.5rem;
-    
-    h3 {
-        font-size: 1.1rem;
-        margin-bottom: 1.5rem;
-        color: var(--text-main);
-    }
-}
-
-.form-group {
-    margin-bottom: 1.25rem;
-    
-    label {
-        display: block;
-        color: var(--text-muted);
-        font-size: 0.9rem;
-        margin-bottom: 0.5rem;
-    }
-    
-    input[type="text"],
-    input[type="number"],
-    select {
-        width: 100%;
-        padding: 0.75rem;
-        background: var(--bg-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-md);
-        color: var(--text-main);
-        font-family: inherit;
-        font-size: 0.95rem;
-        
-        &:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
-        }
-    }
-}
-
-
-.range-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    
-    input[type="range"] {
-        flex: 1;
-        accent-color: var(--primary-color);
-    }
-    
-    span {
-        width: 3rem;
-        text-align: right;
-        font-variant-numeric: tabular-nums;
-    }
-}
-
-.form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-}
-
-.actions {
-  padding: 1.5rem;
-  border-top: 1px solid var(--border-color);
-  background: var(--surface-color);
-}
-
-.btn-block {
-  width: 100%;
-  display: flex;
-}
-
-/* Results - Reused mostly but tweaked */
-.result-card {
-  text-align: center;
-  background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
-  
-  h2 {
-    color: var(--text-muted);
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-  
-  .price-big {
-    font-size: 3.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    margin-bottom: 2rem;
-  }
-}
-
-.specs-list {
-  text-align: left;
-  margin-bottom: 1rem;
-  background: rgba(0,0,0,0.2);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  
-  .spec-header {
-      font-size: 0.8rem;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--text-muted);
-      margin-bottom: 0.5rem;
-      opacity: 0.7;
-  }
-  
-  .spec-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid rgba(255,255,255,0.05);
-    
-    &:last-child { border-bottom: none; }
-    
-    &.compact {
-        padding: 0.25rem 0;
-        font-size: 0.9rem;
-    }
-    
-    span:first-child { color: var(--text-muted); }
-  }
-  
-  &.secondary {
-      background: transparent;
-      border: 1px solid var(--border-color);
-  }
-}
-
-.note-box {
-  background: rgba(99, 102, 241, 0.1);
-  color: var(--primary-color); // Blueish info for advanced note
-  padding: 0.75rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.9rem;
-  margin-top: 1rem;
-}
-
-.placeholder-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  border-style: dashed;
-  
-  .material-icons {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    opacity: 0.5;
-  }
-}
-
-/* Animation */
-.fade-in {
-  animation: fadeIn 0.4s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
--- a/frontend/src/app/quote/advanced-quote/advanced-quote.component.ts
+++ b/frontend/src/app/quote/advanced-quote/advanced-quote.component.ts
@@ -1,151 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { PrintService } from '../../print.service';
-import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
-
-@Component({
-  selector: 'app-advanced-quote',
-  standalone: true,
-  imports: [CommonModule, RouterLink, FormsModule, StlViewerComponent],
-  templateUrl: './advanced-quote.component.html',
-  styleUrls: ['./advanced-quote.component.scss']
-})
-export class AdvancedQuoteComponent {
-  printService = inject(PrintService);
-  
-  selectedFile: File | null = null;
-  isDragOver = false;
-  isCalculating = false;
-  quoteResult: any = null;
-
-  // Selectable options (mapped to backend profile ids where needed)
-  readonly materialOptions = [
-    { value: 'pla_basic', label: 'PLA' },
-    { value: 'petg_basic', label: 'PETG' },
-    { value: 'abs_basic', label: 'ABS' },
-    { value: 'tpu_95a', label: 'TPU 95A' }
-  ];
-  readonly colorOptions = [
-    'Black',
-    'White',
-    'Gray',
-    'Red',
-    'Blue',
-    'Green',
-    'Yellow'
-  ];
-  readonly qualityOptions = [
-    { value: 'draft', label: 'Draft' },
-    { value: 'standard', label: 'Standard' },
-    { value: 'fine', label: 'Fine' }
-  ];
-  readonly infillPatternOptions = [
-    { value: 'grid', label: 'Grid' },
-    { value: 'gyroid', label: 'Gyroid' },
-    { value: 'cubic', label: 'Cubic' },
-    { value: 'triangles', label: 'Triangles' },
-    { value: 'rectilinear', label: 'Rectilinear' },
-    { value: 'crosshatch', label: 'Crosshatch' },
-    { value: 'zig-zag', label: 'Zig-zag' },
-    { value: 'alignedrectilinear', label: 'Aligned Rectilinear' }
-  ];
-
-  // Parameters
-  params = {
-    filament: 'pla_basic',
-    material_color: 'Black',
-    quality: 'standard',
-    infill_density: 15,
-    infill_pattern: 'grid',
-    support_enabled: false
-  };
-
-  get materialLabel(): string {
-    const match = this.materialOptions.find(option => option.value === this.params.filament);
-    return match ? match.label : this.params.filament;
-  }
-
-  get infillPatternLabel(): string {
-    const match = this.infillPatternOptions.find(option => option.value === this.params.infill_pattern);
-    return match ? match.label : this.params.infill_pattern;
-  }
-
-  onDragOver(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = true;
-  }
-
-  onDragLeave(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-  }
-
-  onDrop(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-    
-    const files = event.dataTransfer?.files;
-    if (files && files.length > 0) {
-      if (files[0].name.toLowerCase().endsWith('.stl')) {
-        this.selectedFile = files[0];
-        this.quoteResult = null;
-      } else {
-        alert('Please upload an STL file.');
-      }
-    }
-  }
-
-  onFileSelected(event: any) {
-    const file = event.target.files[0];
-    if (file) {
-      this.selectedFile = file;
-      this.quoteResult = null;
-    }
-  }
-
-  removeFile(event: Event) {
-    event.stopPropagation();
-    this.selectedFile = null;
-    this.quoteResult = null;
-  }
-
-  calculate() {
-    if (!this.selectedFile) return;
-
-    this.isCalculating = true;
-
-    // Use PrintService
-    this.printService.calculateQuote(this.selectedFile, {
-        filament: this.params.filament,
-        quality: this.params.quality,
-        infill_density: this.params.infill_density,
-        infill_pattern: this.params.infill_pattern,
-        // Optional mappings if user selected overrides
-        // layer_height: this.params.layer_height, 
-        // support_enabled: this.params.support_enabled
-    })
-      .subscribe({
-        next: (res) => {
-          console.log('API Response:', res);
-          if (res.success) {
-            this.quoteResult = res.data;
-            console.log('Quote Result set to:', this.quoteResult);
-          } else {
-             console.error('API succeeded but returned error flag:', res.error);
-             alert('Error: ' + res.error);
-          }
-          this.isCalculating = false;
-        },
-        error: (err) => {
-          console.error(err);
-          alert('Calculation failed: ' + (err.error?.detail || err.message));
-          this.isCalculating = false;
-        }
-      });
-  }
-}
--- a/frontend/src/app/quote/basic-quote/basic-quote.component.html
+++ b/frontend/src/app/quote/basic-quote/basic-quote.component.html
@@ -1,129 +0,0 @@
-<div class="container fade-in">
-  <header class="section-header">
-    <a routerLink="/" class="back-link">
-      <span class="material-icons">arrow_back</span> Back
-    </a>
-    <h1>Quick Quote</h1>
-    <p>Upload your 3D model and choose a strength level.</p>
-  </header>
-
-  <div class="grid-2 quote-layout">
-    <!-- Left: Inputs -->
-    <div class="card p-0 overflow-hidden">
-      <!-- Upload Area -->
-      <div class="upload-area" 
-           [class.drag-over]="isDragOver"
-           [class.has-file]="selectedFile"
-           (dragover)="onDragOver($event)"
-           (dragleave)="onDragLeave($event)"
-           (drop)="onDrop($event)">
-        
-        <input #fileInput type="file" hidden (change)="onFileSelected($event)" accept=".stl">
-        
-        <!-- Empty State (Clickable) -->
-        <div class="empty-state" *ngIf="!selectedFile" (click)="fileInput.click()">
-          <span class="material-icons upload-icon">cloud_upload</span>
-          <h3>Drop your STL file here</h3>
-          <p>or click to browse</p>
-        </div>
-
-        <!-- Selected State (Viewer + Actions) -->
-        <div *ngIf="selectedFile" class="selected-state">
-          <div class="viewer-wrapper">
-             <app-stl-viewer [file]="selectedFile"></app-stl-viewer>
-          </div>
-          <div class="file-action-bar">
-             <div class="file-info">
-               <span class="material-icons">description</span>
-               <span class="file-name">{{ selectedFile.name }}</span>
-             </div>
-             <div class="file-actions">
-               <button class="btn-icon danger" (click)="removeFile($event)" title="Remove File">
-                 <span class="material-icons">delete</span>
-               </button>
-             </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Strength Selection -->
-      <div class="strength-selector">
-        <h3>Select Strength</h3>
-        <div class="strength-options">
-          <div class="strength-card" 
-               [class.active]="selectedStrength === 'standard'"
-               (click)="selectStrength('standard')">
-            <span class="emoji">🥚</span>
-            <div class="info">
-              <h4>Standard</h4>
-              <p>Balanced strength</p>
-            </div>
-          </div>
-
-          <div class="strength-card" 
-               [class.active]="selectedStrength === 'strong'"
-               (click)="selectStrength('strong')">
-            <span class="emoji">🧱</span>
-            <div class="info">
-              <h4>Strong</h4>
-              <p>Higher infill</p>
-            </div>
-          </div>
-
-          <div class="strength-card" 
-               [class.active]="selectedStrength === 'ultra'"
-               (click)="selectStrength('ultra')">
-            <span class="emoji">🦾</span>
-            <div class="info">
-              <h4>Ultra</h4>
-              <p>Max infill</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="actions">
-        <button class="btn btn-primary btn-block" 
-                [disabled]="!selectedFile || isCalculating"
-                (click)="calculate()">
-          <span *ngIf="!isCalculating">Calculate Price</span>
-          <span *ngIf="isCalculating">Calculating...</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Right: Results -->
-    <div class="results-area" *ngIf="quoteResult">
-      <div class="card result-card">
-        <h2>Estimated Cost</h2>
-        <div class="price-big">
-          {{ quoteResult?.cost?.total | currency:'CHF' }}
-        </div>
-        
-        <div class="specs-list">
-          <div class="spec-item">
-            <span>Print Time</span>
-            <strong>{{ quoteResult?.print_time_formatted }}</strong>
-          </div>
-          <div class="spec-item">
-            <span>Material</span>
-            <strong>{{ quoteResult?.material_grams | number:'1.0-0' }}g</strong>
-          </div>
-        </div>
-
-        <div class="note-box">
-          <p>Note: This is an estimation. Final price may vary slightly.</p>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Empty State -->
-    <div class="results-area empty" *ngIf="!quoteResult">
-      <div class="card placeholder-card">
-        <span class="material-icons">receipt_long</span>
-        <h3>Your Quote</h3>
-        <p>Results will appear here after calculation.</p>
-      </div>
-    </div>
-  </div>
-</div>
--- a/frontend/src/app/quote/basic-quote/basic-quote.component.scss
+++ b/frontend/src/app/quote/basic-quote/basic-quote.component.scss
@@ -1,254 +0,0 @@
-.section-header {
-  margin-bottom: 2rem;
-  
-  .back-link {
-    display: inline-flex;
-    align-items: center;
-    color: var(--text-muted);
-    margin-bottom: 1rem;
-    font-size: 0.9rem;
-    
-    .material-icons {
-      font-size: 1.1rem;
-      margin-right: 0.25rem;
-    }
-    
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-  
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-  }
-  
-  p {
-    color: var(--text-muted);
-  }
-}
-
-.upload-area {
-  border-bottom: 1px solid var(--border-color);
-  background: var(--surface-color);
-  transition: all 0.2s;
-  
-  &.drag-over {
-    background: rgba(99, 102, 241, 0.1);
-    box-shadow: inset 0 0 0 2px var(--primary-color);
-  }
-
-  /* Only show pointer on empty state or drag */
-  &:not(.has-file) {
-    cursor: pointer;
-  }
-}
-
-.empty-state {
-  padding: 3rem;
-  text-align: center;
-  
-  .upload-icon {
-    font-size: 4rem;
-    color: var(--text-muted);
-    margin-bottom: 1rem;
-  }
-  
-  h3 { margin-bottom: 0.5rem; }
-  p { color: var(--text-muted); margin: 0; }
-}
-
-.viewer-wrapper {
-  height: 350px;
-  width: 100%;
-  background: #0f172a;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.file-action-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1.5rem;
-  background: var(--surface-color);
-  
-  .file-info {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: var(--text-main);
-    
-    .material-icons { color: var(--primary-color); }
-    .file-name { font-weight: 500; }
-  }
-  
-  .btn-icon {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem;
-    border-radius: 50%;
-    transition: background 0.2s;
-    
-    .material-icons {
-      font-size: 1.5rem;
-      color: var(--text-muted);
-    }
-    
-    &:hover {
-      background: var(--surface-hover);
-      .material-icons { color: var(--text-main); }
-    }
-    
-    &.danger {
-      &:hover {
-        background: rgba(239, 68, 68, 0.2);
-        .material-icons { color: #ef4444; } /* Red-500 */
-      }
-    }
-  }
-}
-
-.strength-selector {
-  padding: 1.5rem;
-  
-  h3 {
-    font-size: 1.1rem;
-    margin-bottom: 1rem;
-  }
-}
-
-.strength-options {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.strength-card {
-  display: flex;
-  align-items: center;
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all 0.2s;
-  
-  .emoji {
-    font-size: 2rem;
-    margin-right: 1rem;
-  }
-  
-  .info {
-    h4 {
-      margin: 0 0 0.25rem 0;
-    }
-    p {
-      margin: 0;
-      font-size: 0.9rem;
-      color: var(--text-muted);
-    }
-  }
-  
-  &:hover {
-    border-color: var(--primary-color);
-    background: var(--surface-hover);
-  }
-  
-  &.active {
-    border-color: var(--primary-color);
-    background: rgba(99, 102, 241, 0.1);
-    
-    .emoji {
-      transform: scale(1.1);
-    }
-  }
-}
-
-.actions {
-  padding: 1.5rem;
-  border-top: 1px solid var(--border-color);
-}
-
-.btn-block {
-  width: 100%;
-  display: flex;
-}
-
-/* Results */
-.result-card {
-  text-align: center;
-  background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 41, 59, 0.8) 100%);
-  
-  h2 {
-    color: var(--text-muted);
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-  
-  .price-big {
-    font-size: 3.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    margin-bottom: 2rem;
-  }
-}
-
-.specs-list {
-  text-align: left;
-  margin-bottom: 2rem;
-  background: rgba(0,0,0,0.2);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  
-  .spec-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid rgba(255,255,255,0.05);
-    
-    &:last-child {
-      border-bottom: none;
-    }
-    
-    span {
-      color: var(--text-muted);
-    }
-  }
-}
-
-.note-box {
-  background: rgba(236, 72, 153, 0.1);
-  color: var(--secondary-color);
-  padding: 0.75rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.9rem;
-}
-
-.placeholder-card {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-  border-style: dashed;
-  
-  .material-icons {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    opacity: 0.5;
-  }
-}
-
-/* Animation */
-.fade-in {
-  animation: fadeIn 0.4s ease-out;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
--- a/frontend/src/app/quote/basic-quote/basic-quote.component.ts
+++ b/frontend/src/app/quote/basic-quote/basic-quote.component.ts
@@ -1,103 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
-import { PrintService } from '../../print.service';
-import { StlViewerComponent } from '../../common/stl-viewer/stl-viewer.component';
-
-@Component({
-  selector: 'app-basic-quote',
-  standalone: true,
-  imports: [CommonModule, RouterLink, StlViewerComponent],
-  templateUrl: './basic-quote.component.html',
-  styleUrls: ['./basic-quote.component.scss']
-})
-export class BasicQuoteComponent {
-  printService = inject(PrintService);
-  
-  selectedFile: File | null = null;
-  selectedStrength: 'standard' | 'strong' | 'ultra' = 'standard';
-  isDragOver = false;
-  isCalculating = false;
-  quoteResult: any = null;
-  private strengthToSettings: Record<'standard' | 'strong' | 'ultra', { infill_density: number; quality: 'draft' | 'standard' | 'fine' }> = {
-    standard: { infill_density: 15, quality: 'standard' },
-    strong: { infill_density: 30, quality: 'standard' },
-    ultra: { infill_density: 50, quality: 'standard' }
-  };
-
-  onDragOver(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = true;
-  }
-
-  onDragLeave(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-  }
-
-  onDrop(event: DragEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.isDragOver = false;
-    
-    const files = event.dataTransfer?.files;
-    if (files && files.length > 0) {
-      if (files[0].name.toLowerCase().endsWith('.stl')) {
-        this.selectedFile = files[0];
-        this.quoteResult = null;
-      } else {
-        alert('Please upload an STL file.');
-      }
-    }
-  }
-
-  onFileSelected(event: any) {
-    const file = event.target.files[0];
-    if (file) {
-      this.selectedFile = file;
-      this.quoteResult = null;
-    }
-  }
-
-  removeFile(event: Event) {
-    event.stopPropagation();
-    this.selectedFile = null;
-    this.quoteResult = null;
-  }
-
-  selectStrength(strength: 'standard' | 'strong' | 'ultra') {
-    this.selectedStrength = strength;
-  }
-
-  calculate() {
-    if (!this.selectedFile) return;
-
-    this.isCalculating = true;
-    
-    const settings = this.strengthToSettings[this.selectedStrength];
-
-    this.printService.calculateQuote(this.selectedFile, {
-      quality: settings.quality,
-      infill_density: settings.infill_density
-    })
-      .subscribe({
-        next: (res) => {
-          if (res?.success) {
-            this.quoteResult = res.data;
-          } else {
-            console.error('Quote API returned error:', res?.error);
-            alert('Calculation failed: ' + (res?.error || 'Unknown error'));
-            this.quoteResult = null;
-          }
-          this.isCalculating = false;
-        },
-        error: (err) => {
-          console.error(err);
-          alert('Calculation failed: ' + (err.error?.detail || err.message));
-          this.isCalculating = false;
-        }
-      });
-  }
-}
--- a/frontend/src/app/shared/components/app-alert/app-alert.component.ts
+++ b/frontend/src/app/shared/components/app-alert/app-alert.component.ts
@@ -0,0 +1,36 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-alert',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="alert" [ngClass]="type()">
+      <div class="icon">
+        @if(type() === 'info') { ℹ️ }
+        @if(type() === 'warning') { ⚠️ }
+        @if(type() === 'error') { ❌ }
+        @if(type() === 'success') { ✅ }
+      </div>
+      <div class="content"><ng-content></ng-content></div>
+    </div>
+  `,
+  styles: [`
+    .alert {
+      padding: var(--space-4);
+      border-radius: var(--radius-md);
+      display: flex;
+      gap: var(--space-3);
+      font-size: 0.875rem;
+      margin-bottom: var(--space-4);
+    }
+    .info { background: var(--color-neutral-100); color: var(--color-neutral-800); }
+    .warning { background: #fefce8; color: #854d0e; border: 1px solid #fde047; }
+    .error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
+    .success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
+  `]
+})
+export class AppAlertComponent {
+  type = input<'info' | 'warning' | 'error' | 'success'>('info');
+}
--- a/frontend/src/app/shared/components/app-button/app-button.component.ts
+++ b/frontend/src/app/shared/components/app-button/app-button.component.ts
@@ -0,0 +1,81 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <button 
+      [type]="type()" 
+      [class]="'btn btn-' + variant() + ' ' + (fullWidth() ? 'w-full' : '')"
+      [disabled]="disabled()"
+      (click)="handleClick($event)">
+      <ng-content></ng-content>
+    </button>
+  `,
+  styles: [`
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.5rem 1rem;
+      border-radius: var(--radius-md);
+      font-weight: 500;
+      cursor: pointer;
+      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+      border: 1px solid transparent;
+      font-family: inherit;
+      font-size: 1rem;
+      
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+    .w-full { width: 100%; }
+
+    .btn-primary {
+      background-color: var(--color-brand);
+      color: var(--color-neutral-900);
+      &:hover:not(:disabled) { background-color: var(--color-brand-hover); }
+    }
+
+    .btn-secondary {
+      background-color: var(--color-neutral-200);
+      color: var(--color-neutral-900);
+      &:hover:not(:disabled) { background-color: var(--color-neutral-300); }
+    }
+
+    .btn-outline {
+      background-color: transparent;
+      border-color: var(--color-border);
+      color: var(--color-text);
+      &:hover:not(:disabled) { 
+        border-color: var(--color-brand); 
+        color: var(--color-neutral-900);
+        background-color: rgba(250, 207, 10, 0.1); /* Low opacity brand color */
+      }
+    }
+
+    .btn-text {
+      background-color: transparent;
+      color: var(--color-text-muted);
+      padding: 0.5rem;
+      &:hover:not(:disabled) { color: var(--color-text); }
+    }
+  `]
+})
+export class AppButtonComponent {
+  variant = input<'primary' | 'secondary' | 'outline' | 'text'>('primary');
+  type = input<'button' | 'submit' | 'reset'>('button');
+  disabled = input<boolean>(false);
+  fullWidth = input<boolean>(false);
+
+  handleClick(event: Event) {
+    if (this.disabled()) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+}
--- a/frontend/src/app/shared/components/app-card/app-card.component.ts
+++ b/frontend/src/app/shared/components/app-card/app-card.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  template: `
+    <div class="card">
+      <ng-content></ng-content>
+    </div>
+  `,
+  styles: [`
+    .card {
+      background-color: var(--color-bg-card);
+      border-radius: var(--radius-lg);
+      border: 1px solid var(--color-border);
+      box-shadow: var(--shadow-sm);
+      padding: var(--space-6);
+      transition: box-shadow 0.2s;
+      
+      &:hover {
+        box-shadow: var(--shadow-md);
+      }
+    }
+  `]
+})
+export class AppCardComponent {}
--- a/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts
+++ b/frontend/src/app/shared/components/app-dropzone/app-dropzone.component.ts
@@ -0,0 +1,117 @@
+import { Component, input, output, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-dropzone',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div 
+      class="dropzone"
+      [class.dragover]="isDragOver()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+      (click)="fileInput.click()"
+    >
+      <input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()" [multiple]="multiple()">
+      
+      <div class="content">
+        <div class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+        </div>
+        <p class="text">{{ label() }}</p>
+        <p class="subtext">{{ subtext() }}</p>
+        
+        @if (fileNames().length > 0) {
+            <div class="file-badges">
+                @for (name of fileNames(); track name) {
+                    <div class="file-badge">{{ name }}</div>
+                }
+            </div>
+        }
+      </div>
+    </div>
+  `,
+  styles: [`
+    .dropzone {
+      border: 2px dashed var(--color-border);
+      border-radius: var(--radius-lg);
+      padding: var(--space-8);
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s;
+      background-color: var(--color-neutral-50);
+      
+      &:hover, &.dragover {
+        border-color: var(--color-brand);
+        background-color: var(--color-neutral-100);
+      }
+    }
+    .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-badges {
+        margin-top: var(--space-4);
+        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 files here or click to upload');
+  subtext = input<string>('Supports .stl, .obj');
+  accept = input<string>('.stl,.obj');
+  multiple = input<boolean>(true);
+  
+  filesDropped = output<File[]>();
+  
+  isDragOver = signal(false);
+  fileNames = signal<string[]>([]);
+
+  onDragOver(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(true);
+  }
+
+  onDragLeave(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(false);
+  }
+
+  onDrop(e: DragEvent) {
+    console.log('Drop event', e);
+    e.preventDefault();
+    e.stopPropagation();
+    this.isDragOver.set(false);
+    if (e.dataTransfer?.files.length) {
+      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.handleFiles(Array.from(input.files));
+    }
+  }
+
+  handleFiles(files: File[]) {
+    const newNames = files.map(f => f.name);
+    this.fileNames.update(current => [...current, ...newNames]);
+    this.filesDropped.emit(files);
+  }
+}
--- a/frontend/src/app/shared/components/app-input/app-input.component.ts
+++ b/frontend/src/app/shared/components/app-input/app-input.component.ts
@@ -0,0 +1,72 @@
+import { Component, input, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppInputComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="form-group">
+      @if (label()) { <label [for]="id()">{{ label() }}</label> }
+      <input
+        [id]="id()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [value]="value"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled"
+        class="form-control"
+      />
+      @if (error()) { <span class="error-text">{{ error() }}</span> }
+    </div>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      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(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); }
+  `]
+})
+export class AppInputComponent implements ControlValueAccessor {
+  label = input<string>('');
+  id = input<string>('input-' + Math.random().toString(36).substr(2, 9));
+  type = input<string>('text');
+  placeholder = input<string>('');
+  error = input<string | null>(null);
+
+  value: string = '';
+  disabled = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(obj: any): void { this.value = obj || ''; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+  
+  onInput(event: Event) {
+    const val = (event.target as HTMLInputElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+}
--- a/frontend/src/app/shared/components/app-select/app-select.component.ts
+++ b/frontend/src/app/shared/components/app-select/app-select.component.ts
@@ -0,0 +1,72 @@
+import { Component, input, output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-select',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AppSelectComponent),
+      multi: true
+    }
+  ],
+  template: `
+    <div class="form-group">
+      @if (label()) { <label [for]="id()">{{ label() }}</label> }
+      <select
+        [id]="id()"
+        [value]="value"
+        (change)="onSelect($event)"
+        (blur)="onTouched()"
+        [disabled]="disabled"
+        class="form-control"
+      >
+        @for (opt of options(); track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+      @if (error()) { <span class="error-text">{{ error() }}</span> }
+    </div>
+  `,
+  styles: [`
+    .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
+    label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+    .form-control {
+      padding: 0.5rem 0.75rem;
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-md);
+      font-size: 1rem;
+      width: 100%;
+      background: var(--color-bg-card);
+      color: var(--color-text);
+      &:focus { outline: none; border-color: var(--color-brand); }
+    }
+    .error-text { color: var(--color-danger-500); font-size: 0.75rem; margin-top: var(--space-1); }
+  `]
+})
+export class AppSelectComponent implements ControlValueAccessor {
+  label = input<string>('');
+  id = input<string>('select-' + Math.random().toString(36).substr(2, 9));
+  options = input<{label: string, value: any}[]>([]);
+  error = input<string | null>(null);
+
+  value: any = '';
+  disabled = false;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(obj: any): void { this.value = obj; }
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouched = fn; }
+  setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; }
+  
+  onSelect(event: Event) {
+    const val = (event.target as HTMLSelectElement).value;
+    this.value = val;
+    this.onChange(val);
+  }
+}
--- a/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts
+++ b/frontend/src/app/shared/components/app-tabs/app-tabs.component.ts
@@ -0,0 +1,53 @@
+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, TranslateModule],
+  template: `
+    <div class="tabs">
+      @for (tab of tabs(); track tab.value) {
+        <button 
+          class="tab" 
+          [class.active]="activeTab() === tab.value"
+          (click)="selectTab(tab.value)">
+          {{ tab.label | translate }}
+        </button>
+      }
+    </div>
+  `,
+  styles: [`
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-border);
+      gap: var(--space-4);
+    }
+    .tab {
+      background: none;
+      border: none;
+      padding: var(--space-3) var(--space-4);
+      cursor: pointer;
+      font-weight: 500;
+      color: var(--color-text-muted);
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+      
+      &:hover { color: var(--color-text); }
+      &.active {
+        color: var(--color-brand);
+        border-bottom-color: var(--color-brand);
+      }
+    }
+  `]
+})
+export class AppTabsComponent {
+  tabs = input<{label: string, value: string}[]>([]);
+  activeTab = input<string>('');
+  tabChange = output<string>();
+
+  selectTab(val: string) {
+    this.tabChange.emit(val);
+  }
+}
--- a/frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts
+++ 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.js';
+// @ts-ignore
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+@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);
+    }
+  }
+}
--- a/frontend/src/app/shared/components/summary-card/summary-card.component.ts
+++ 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);
+}
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -0,0 +1,64 @@
+{
+  "NAV": {
+    "CALCULATOR": "Calculator",
+    "SHOP": "Shop",
+    "ABOUT": "About"
+  },
+  "FOOTER": {
+    "PRIVACY": "Privacy",
+    "TERMS": "Terms & Conditions",
+    "CONTACT": "Contact Us"
+  },
+  "CALC": {
+    "TITLE": "3D Print Calculator",
+    "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": "Quick",
+    "MODE_ADVANCED": "Advanced",
+    "UPLOAD_LABEL": "Drag your 3D file here",
+    "UPLOAD_SUB": "Supports STL, 3MF, STEP, OBJ up to 50MB",
+    "MATERIAL": "Material",
+    "QUALITY": "Quality",
+    "QUANTITY": "Quantity",
+    "NOTES": "Additional Notes",
+    "CALCULATE": "Calculate Quote",
+    "RESULT": "Estimated Quote",
+    "TIME": "Print Time",
+    "COST": "Total Cost",
+    "ORDER": "Order Now",
+    "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": "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"
+  }
+}
--- a/frontend/src/assets/i18n/it.json
+++ b/frontend/src/assets/i18n/it.json
@@ -0,0 +1,64 @@
+{
+  "NAV": {
+    "CALCULATOR": "Calcolatore",
+    "SHOP": "Shop",
+    "ABOUT": "Chi Siamo"
+  },
+  "FOOTER": {
+    "PRIVACY": "Privacy",
+    "TERMS": "Termini & Condizioni",
+    "CONTACT": "Contattaci"
+  },
+  "CALC": {
+    "TITLE": "Calcola Preventivo 3D",
+    "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": "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à",
+    "NOTES": "Note aggiuntive",
+    "CALCULATE": "Calcola Preventivo",
+    "RESULT": "Preventivo Stimato",
+    "TIME": "Tempo Stampa",
+    "COST": "Costo Totale",
+    "ORDER": "Ordina Ora",
+    "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": "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"
+  }
+}
--- a/frontend/src/environments/environment.prod.ts
+++ b/frontend/src/environments/environment.prod.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: true,
+  apiUrl: 'https://3d-fab.ch',
+  basicAuth: ''
+};
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  apiUrl: 'https://dev.3d-fab.ch',
+  basicAuth: 'fab:0presura' // Format: 'username:password'
+};
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,12 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="it">
 <head>
  <meta charset="utf-8">
-  <title>Frontend</title>
+  <meta name="robots" content="noindex, nofollow">
+  <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>
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,119 +1,48 @@
-/* Global Styles & Variables */
-:root {
-  /* Color Palette - Modern Dark Theme */
-  --primary-color: #6366f1; /* Indigo 500 */
-  --primary-hover: #4f46e5; /* Indigo 600 */
-  --secondary-color: #ec4899; /* Pink 500 */
-  
-  --bg-color: #0f172a; /* Slate 900 */
-  --surface-color: #1e293b; /* Slate 800 */
-  --surface-hover: #334155; /* Slate 700 */
-  
-  --text-main: #f8fafc; /* Slate 50 */
-  --text-muted: #94a3b8; /* Slate 400 */
-  
-  --border-color: #334155;
-  
-  /* Spacing & Radius */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  
-  /* Transitions */
-  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
+/* src/styles.scss */
+@use './styles/theme';

-html, body { 
-  height: 100%; 
+/* Reset / Base */
+*, *::before, *::after {
+  box-sizing: border-box;
 }

 body {
  margin: 0;
-  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
-  background-color: var(--bg-color);
-  color: var(--text-main);
+  font-family: var(--font-family-sans);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }

-/* Common Layout Utilities */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 2rem;
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.2;
+  font-family: var(--font-family-display);
 }

-.card {
-  background-color: var(--surface-color);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-lg);
-  padding: 2rem;
-  box-shadow: var(--shadow-md);
-  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.5rem;
-  border-radius: var(--radius-md);
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color var(--transition-fast);
-  border: none;
-  font-size: 1rem;
-  text-decoration: none;
-}
-
-.btn-primary {
-  background-color: var(--primary-color);
-  color: white;
-  
-  &:hover {
-    background-color: var(--primary-hover);
-  }
-}
-
-.btn-secondary {
-  background-color: transparent;
-  border: 1px solid var(--border-color);
-  color: var(--text-main);
-  
-  &:hover {
-    background-color: var(--surface-hover);
-  }
-}
-
-.grid-2 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2rem;
-  
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-h1, h2, h3 {
+p {
  margin-top: 0;
-  font-weight: 700;
-  letter-spacing: -0.025em;
+  margin-bottom: var(--space-4);
 }

 a {
-  color: var(--primary-color);
+  color: var(--color-brand);
  text-decoration: none;
-  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
 }
+
+/* Utilities */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+.text-center { text-align: center; }
+.mb-4 { margin-bottom: var(--space-4); }
+.mt-4 { margin-top: var(--space-4); }
--- a/frontend/src/styles/theme.scss
+++ b/frontend/src/styles/theme.scss
@@ -0,0 +1,23 @@
+/* src/styles/theme.scss */
+@use 'tokens';
+
+:root {
+  /* Semantic Colors - Theming Layer */
+  --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-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: 'IBM Plex Sans', 'Space Grotesk', sans-serif;
+  --font-family-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
+}
--- a/frontend/src/styles/tokens.scss
+++ b/frontend/src/styles/tokens.scss
@@ -0,0 +1,43 @@
+/* src/styles/tokens.scss */
+:root {
+  /* Colors - Palette */
+  --color-primary-500: #FACF0A;
+  --color-primary-600: #E3BA07;
+  --color-primary-700: #C8A204;
+  
+  --color-secondary-500: #6b675c;
+  --color-secondary-600: #514d43;
+
+  --color-success-500: #22c55e;
+  --color-warning-500: #eab308;
+  --color-danger-500: #ef4444;
+
+  --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 */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 1rem;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
Author	SHA1	Message	Date
Joe Küng	a5ff515fd7	feat(web): add auth for dev enviroment All checks were successful Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 21s Details Build, Test and Deploy / deploy (push) Successful in 4s Details	2026-02-02 18:48:06 +01:00
Joe Küng	6952090865	feat(web): add auth for dev enviroment	2026-02-02 18:45:22 +01:00
Joe Küng	10e1fb49f4	feat(web): new style and calculator revisited All checks were successful Build, Test and Deploy / deploy (push) Successful in 4s Details Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 20s Details	2026-02-02 18:41:18 +01:00
Joe Küng	32b9b2ef8d	feat(web): new style and calculator revisited Some checks failed Build, Test and Deploy / test-backend (push) Successful in 14s Details Build, Test and Deploy / build-and-push (push) Failing after 20s Details Build, Test and Deploy / deploy (push) Has been skipped Details	2026-02-02 18:38:25 +01:00
Joe Küng	0a538b0d88	feat(web): home component All checks were successful Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 20s Details Build, Test and Deploy / deploy (push) Successful in 4s Details	2026-02-02 17:41:20 +01:00
Joe Küng	2c658d00c1	feat(web): vibe coding pazzo All checks were successful Build, Test and Deploy / test-backend (push) Successful in 13s Details Build, Test and Deploy / build-and-push (push) Successful in 28s Details Build, Test and Deploy / deploy (push) Successful in 5s Details	2026-02-02 17:38:03 +01:00
Joe Küng	5a2da916fa	fix(web) fix api/api in enviroment All checks were successful Build, Test and Deploy / test-backend (push) Successful in 19s Details Build, Test and Deploy / build-and-push (push) Successful in 16s Details Build, Test and Deploy / deploy (push) Successful in 5s Details	2026-01-31 17:51:10 +01:00
Joe Küng	82d1cf2c71	feat(web) back-end routing All checks were successful Build, Test and Deploy / test-backend (push) Successful in 15s Details Build, Test and Deploy / build-and-push (push) Successful in 23s Details Build, Test and Deploy / deploy (push) Successful in 4s Details	2026-01-31 17:46:35 +01:00
Joe Küng	85d7315e30	feat(web) back-end routing All checks were successful Build, Test and Deploy / test-backend (push) Successful in 15s Details Build, Test and Deploy / build-and-push (push) Successful in 26s Details Build, Test and Deploy / deploy (push) Successful in 5s Details	2026-01-31 17:41:47 +01:00
Joe Küng	179ba2b85c	fix: cicdl.yaml All checks were successful Build, Test and Deploy / test-backend (push) Successful in 18s Details Build, Test and Deploy / build-and-push (push) Successful in 19s Details Build, Test and Deploy / deploy (push) Successful in 18s Details	2026-01-29 23:09:38 +01:00
Joe Küng	ac8135aec8	fix: cicdl.yaml Some checks failed Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 13s Details Build, Test and Deploy / deploy (push) Failing after 3s Details	2026-01-29 22:28:09 +01:00
Joe Küng	74f040fa50	fix: cicdl.yaml Some checks failed Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 14s Details Build, Test and Deploy / deploy (push) Failing after 3s Details	2026-01-29 22:07:53 +01:00
Joe Küng	73fa36f9ec	fix: cicdl.yaml Some checks failed Build, Test and Deploy / test-backend (push) Successful in 12s Details Build, Test and Deploy / build-and-push (push) Successful in 2m46s Details Build, Test and Deploy / deploy (push) Failing after 3s Details	2026-01-29 21:48:32 +01:00
Joe Küng	7fafabad42	fix: ubuntu runner Some checks failed Build, Test and Deploy / test-backend (push) Successful in 13s Details Build, Test and Deploy / build-and-push (push) Failing after 11s Details Build, Test and Deploy / deploy (push) Has been skipped Details	2026-01-29 19:33:57 +01:00
Joe Küng	465678f3e4	Merge pull request 'feat/parameters' (#1 ) from feat/parameters into main Some checks failed Build, Test and Deploy / test-backend (push) Failing after 4s Details Build, Test and Deploy / build-and-push (push) Has been skipped Details Build, Test and Deploy / deploy (push) Has been skipped Details Reviewed-on: #1	2026-01-29 17:23:37 +01:00