Merge pull request 'fix(front-end): css file reduced' (#34) from fix/css-files into feat/shop

Reviewed-on: #34

.gitignore

@@ -44,8 +44,12 @@ build/
 
 ./storage_orders
 ./storage_quotes
+./storage_requests
+./storage_media
 storage_orders
 storage_quotes
+storage_requests
+storage_media
 
 # Qodana local reports/artifacts
 backend/.qodana/

README.md

@@ -11,7 +11,7 @@ Un'applicazione Full Stack (Angular + Spring Boot) per calcolare preventivi di s
 
 ## Stack Tecnologico
 
-- **Backend**: Java 21, Spring Boot 3.4, PostgreSQL, Flyway.
+- **Backend**: Java 21, Spring Boot 3.4, PostgreSQL.
 - **Frontend**: Angular 19, Angular Material, Three.js.
 - **Slicer**: OrcaSlicer (invocato via CLI).
 
@@ -21,14 +21,20 @@ Un'applicazione Full Stack (Angular + Spring Boot) per calcolare preventivi di s
 *   **Node.js 22** e **npm** installati.
 *   **PostgreSQL** attivo.
 *   **OrcaSlicer** installato sul sistema.
+*   **FFmpeg** installato sul sistema o presente nell'immagine Docker del backend.
 
 ## Avvio Rapido
 
 ### 1. Database
-Crea un database PostgreSQL chiamato `printcalc`. Le tabelle verranno create automaticamente al primo avvio tramite Flyway.
+Crea un database PostgreSQL chiamato `printcalc`. Lo schema viene gestito dal progetto tramite configurazione JPA/SQL del repository.
 
 ### 2. Backend
-Configura il percorso di OrcaSlicer in `backend/src/main/resources/application.properties` o tramite la variabile d'ambiente `SLICER_PATH`.
+Configura il percorso di OrcaSlicer in `backend/src/main/resources/application.properties` o tramite la variabile d'ambiente `SLICER_PATH`. Per il media service pubblico puoi configurare anche:
+
+- `MEDIA_STORAGE_ROOT` per la root `storage_media` usata dal backend (`original/`, `public/`, `private/`)
+- `MEDIA_PUBLIC_BASE_URL` per gli URL assoluti restituiti dalle API admin, ad esempio `https://example.com/media`
+- `MEDIA_FFMPEG_PATH` per il binario `ffmpeg`
+- `MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES` per il limite per asset immagine
 
 ```bash
 cd backend
@@ -57,11 +63,50 @@ I prezzi non sono più gestiti tramite variabili d'ambiente fisse ma tramite tab
 *   `/backend`: API Spring Boot.
 *   `/frontend`: Applicazione Angular.
 *   `/backend/profiles`: Contiene i file di configurazione per OrcaSlicer.
+*   `/storage_media`: Originali e varianti media pubbliche/private su filesystem.
+
+## Media pubblici
+
+Il backend salva sempre l'originale in `storage_media/original/` e precomputa le varianti pubbliche in `storage_media/public/`. La cartella `storage_media/private/` è predisposta per asset non pubblici.
+
+Nel deploy Docker il volume media atteso è `/mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media`.
+
+Nginx non deve passare dal backend per i file pubblici. Configurazione attesa:
+
+```nginx
+location /media/ {
+    alias /mnt/cache/appdata/print-calculator/${ENV}/storage_media/public/;
+}
+```
+
+Usage key iniziali previste per frontend:
+
+- `HOME_SECTION / shop-gallery`
+- `HOME_SECTION / founders-gallery`
+- `HOME_SECTION / capability-prototyping`
+- `HOME_SECTION / capability-custom-parts`
+- `HOME_SECTION / capability-small-series`
+- `HOME_SECTION / capability-cad`
+- `ABOUT_MEMBER / joe`
+- `ABOUT_MEMBER / matteo`
+- riservati per estensioni future: `SHOP_PRODUCT`, `SHOP_CATEGORY`, `SHOP_GALLERY`
+
+Operativamente:
+
+- carica i file dal media admin endpoint del backend
+- associa ogni asset con `POST /api/admin/media/usages`
+- per `ABOUT_MEMBER` imposta `isPrimary=true` sulla foto principale del membro
+- home e about leggono da `GET /api/public/media/usages?usageType=...&usageKey=...`
+- il frontend usa `<picture>` e preferisce AVIF/WEBP con fallback JPEG, senza usare l'originale
+- nel back-office frontend la gestione operativa della home passa dalla pagina `admin/home-media`
 
 ## Troubleshooting
 
 ### Percorso OrcaSlicer
 Assicurati che `slicer.path` punti al binario corretto. Su macOS è solitamente `/Applications/OrcaSlicer.app/Contents/MacOS/OrcaSlicer`. Su Linux è il percorso all'AppImage (estratta o meno).
 
+### FFmpeg e media pubblici
+Verifica che `MEDIA_FFMPEG_PATH` punti a un `ffmpeg` con supporto JPEG, WebP e AVIF. Se gli URL media restituiti dalle API admin non sono raggiungibili, controlla che `MEDIA_PUBLIC_BASE_URL` corrisponda al `location /media/` esposto da Nginx e che il volume `storage_media` sia montato correttamente.
+
 ### Database connection
 Verifica le credenziali in `application.properties`. Se usi Docker, puoi passare `DB_URL`, `DB_USERNAME` e `DB_PASSWORD` come variabili d'ambiente.

backend/Dockerfile

@@ -13,16 +13,25 @@ FROM eclipse-temurin:21-jre-jammy
 ARG ORCA_VERSION=2.3.1
 ARG ORCA_DOWNLOAD_URL
 
-# Install system dependencies for OrcaSlicer (same as before)
-RUN apt-get update && apt-get install -y \
+# Install system dependencies for OrcaSlicer and media processing.
+# The build fails fast if the packaged ffmpeg lacks JPEG/WebP/AVIF encoders.
+RUN set -eux; \
+    apt-get update; \
+    DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
+    ffmpeg \
     wget \
     assimp-utils \
     libgl1 \
     libglib2.0-0 \
     libgtk-3-0 \
     libdbus-1-3 \
-    libwebkit2gtk-4.0-37 \
-    && rm -rf /var/lib/apt/lists/*
+    libwebkit2gtk-4.0-37; \
+    ffmpeg -hide_banner -encoders > /tmp/ffmpeg-encoders.txt; \
+    grep -Eq '[[:space:]]mjpeg[[:space:]]' /tmp/ffmpeg-encoders.txt; \
+    grep -Eq '[[:space:]](libwebp|webp)[[:space:]]' /tmp/ffmpeg-encoders.txt; \
+    grep -Eq '[[:space:]](libaom-av1|librav1e|libsvtav1)[[:space:]]' /tmp/ffmpeg-encoders.txt; \
+    rm -f /tmp/ffmpeg-encoders.txt; \
+    rm -rf /var/lib/apt/lists/*
 
 # Install OrcaSlicer
 WORKDIR /opt

backend/src/main/java/com/printcalculator/controller/PublicMediaController.java

@@ -0,0 +1,31 @@
+package com.printcalculator.controller;
+
+import com.printcalculator.dto.PublicMediaUsageDto;
+import com.printcalculator.service.media.PublicMediaQueryService;
+import org.springframework.http.ResponseEntity;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/public/media")
+@Transactional(readOnly = true)
+public class PublicMediaController {
+
+    private final PublicMediaQueryService publicMediaQueryService;
+
+    public PublicMediaController(PublicMediaQueryService publicMediaQueryService) {
+        this.publicMediaQueryService = publicMediaQueryService;
+    }
+
+    @GetMapping("/usages")
+    public ResponseEntity<List<PublicMediaUsageDto>> getUsageMedia(@RequestParam String usageType,
+                                                                   @RequestParam String usageKey,
+                                                                   @RequestParam(required = false) String lang) {
+        return ResponseEntity.ok(publicMediaQueryService.getUsageMedia(usageType, usageKey, lang));
+    }
+}

backend/src/main/java/com/printcalculator/controller/admin/AdminMediaController.java

@@ -0,0 +1,82 @@
+package com.printcalculator.controller.admin;
+
+import com.printcalculator.dto.AdminCreateMediaUsageRequest;
+import com.printcalculator.dto.AdminMediaAssetDto;
+import com.printcalculator.dto.AdminMediaUsageDto;
+import com.printcalculator.dto.AdminUpdateMediaAssetRequest;
+import com.printcalculator.dto.AdminUpdateMediaUsageRequest;
+import com.printcalculator.service.admin.AdminMediaControllerService;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PatchMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.util.List;
+import java.util.UUID;
+
+@RestController
+@RequestMapping("/api/admin/media")
+@Transactional(readOnly = true)
+public class AdminMediaController {
+
+    private final AdminMediaControllerService adminMediaControllerService;
+
+    public AdminMediaController(AdminMediaControllerService adminMediaControllerService) {
+        this.adminMediaControllerService = adminMediaControllerService;
+    }
+
+    @PostMapping(value = "/assets", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    @Transactional
+    public ResponseEntity<AdminMediaAssetDto> uploadAsset(@RequestParam("file") MultipartFile file,
+                                                          @RequestParam(value = "title", required = false) String title,
+                                                          @RequestParam(value = "altText", required = false) String altText,
+                                                          @RequestParam(value = "visibility", required = false) String visibility) {
+        return ResponseEntity.ok(adminMediaControllerService.uploadAsset(file, title, altText, visibility));
+    }
+
+    @GetMapping("/assets")
+    public ResponseEntity<List<AdminMediaAssetDto>> listAssets() {
+        return ResponseEntity.ok(adminMediaControllerService.listAssets());
+    }
+
+    @GetMapping("/assets/{mediaAssetId}")
+    public ResponseEntity<AdminMediaAssetDto> getAsset(@PathVariable UUID mediaAssetId) {
+        return ResponseEntity.ok(adminMediaControllerService.getAsset(mediaAssetId));
+    }
+
+    @PatchMapping("/assets/{mediaAssetId}")
+    @Transactional
+    public ResponseEntity<AdminMediaAssetDto> updateAsset(@PathVariable UUID mediaAssetId,
+                                                          @RequestBody AdminUpdateMediaAssetRequest payload) {
+        return ResponseEntity.ok(adminMediaControllerService.updateAsset(mediaAssetId, payload));
+    }
+
+    @PostMapping("/usages")
+    @Transactional
+    public ResponseEntity<AdminMediaUsageDto> createUsage(@RequestBody AdminCreateMediaUsageRequest payload) {
+        return ResponseEntity.ok(adminMediaControllerService.createUsage(payload));
+    }
+
+    @PatchMapping("/usages/{mediaUsageId}")
+    @Transactional
+    public ResponseEntity<AdminMediaUsageDto> updateUsage(@PathVariable UUID mediaUsageId,
+                                                          @RequestBody AdminUpdateMediaUsageRequest payload) {
+        return ResponseEntity.ok(adminMediaControllerService.updateUsage(mediaUsageId, payload));
+    }
+
+    @DeleteMapping("/usages/{mediaUsageId}")
+    @Transactional
+    public ResponseEntity<Void> deleteUsage(@PathVariable UUID mediaUsageId) {
+        adminMediaControllerService.deleteUsage(mediaUsageId);
+        return ResponseEntity.noContent().build();
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminCreateMediaUsageRequest.java

@@ -0,0 +1,79 @@
+package com.printcalculator.dto;
+
+import java.util.UUID;
+import java.util.Map;
+
+public class AdminCreateMediaUsageRequest {
+    private String usageType;
+    private String usageKey;
+    private UUID ownerId;
+    private UUID mediaAssetId;
+    private Integer sortOrder;
+    private Boolean isPrimary;
+    private Boolean isActive;
+    private Map<String, MediaTextTranslationDto> translations;
+
+    public String getUsageType() {
+        return usageType;
+    }
+
+    public void setUsageType(String usageType) {
+        this.usageType = usageType;
+    }
+
+    public String getUsageKey() {
+        return usageKey;
+    }
+
+    public void setUsageKey(String usageKey) {
+        this.usageKey = usageKey;
+    }
+
+    public UUID getOwnerId() {
+        return ownerId;
+    }
+
+    public void setOwnerId(UUID ownerId) {
+        this.ownerId = ownerId;
+    }
+
+    public UUID getMediaAssetId() {
+        return mediaAssetId;
+    }
+
+    public void setMediaAssetId(UUID mediaAssetId) {
+        this.mediaAssetId = mediaAssetId;
+    }
+
+    public Integer getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(Integer sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+
+    public Boolean getIsPrimary() {
+        return isPrimary;
+    }
+
+    public void setIsPrimary(Boolean primary) {
+        isPrimary = primary;
+    }
+
+    public Boolean getIsActive() {
+        return isActive;
+    }
+
+    public void setIsActive(Boolean active) {
+        isActive = active;
+    }
+
+    public Map<String, MediaTextTranslationDto> getTranslations() {
+        return translations;
+    }
+
+    public void setTranslations(Map<String, MediaTextTranslationDto> translations) {
+        this.translations = translations;
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminMediaAssetDto.java

@@ -0,0 +1,153 @@
+package com.printcalculator.dto;
+
+import java.time.OffsetDateTime;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.UUID;
+
+public class AdminMediaAssetDto {
+    private UUID id;
+    private String originalFilename;
+    private String storageKey;
+    private String mimeType;
+    private Long fileSizeBytes;
+    private String sha256Hex;
+    private Integer widthPx;
+    private Integer heightPx;
+    private String status;
+    private String visibility;
+    private String title;
+    private String altText;
+    private OffsetDateTime createdAt;
+    private OffsetDateTime updatedAt;
+    private List<AdminMediaVariantDto> variants = new ArrayList<>();
+    private List<AdminMediaUsageDto> usages = new ArrayList<>();
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getOriginalFilename() {
+        return originalFilename;
+    }
+
+    public void setOriginalFilename(String originalFilename) {
+        this.originalFilename = originalFilename;
+    }
+
+    public String getStorageKey() {
+        return storageKey;
+    }
+
+    public void setStorageKey(String storageKey) {
+        this.storageKey = storageKey;
+    }
+
+    public String getMimeType() {
+        return mimeType;
+    }
+
+    public void setMimeType(String mimeType) {
+        this.mimeType = mimeType;
+    }
+
+    public Long getFileSizeBytes() {
+        return fileSizeBytes;
+    }
+
+    public void setFileSizeBytes(Long fileSizeBytes) {
+        this.fileSizeBytes = fileSizeBytes;
+    }
+
+    public String getSha256Hex() {
+        return sha256Hex;
+    }
+
+    public void setSha256Hex(String sha256Hex) {
+        this.sha256Hex = sha256Hex;
+    }
+
+    public Integer getWidthPx() {
+        return widthPx;
+    }
+
+    public void setWidthPx(Integer widthPx) {
+        this.widthPx = widthPx;
+    }
+
+    public Integer getHeightPx() {
+        return heightPx;
+    }
+
+    public void setHeightPx(Integer heightPx) {
+        this.heightPx = heightPx;
+    }
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+
+    public String getVisibility() {
+        return visibility;
+    }
+
+    public void setVisibility(String visibility) {
+        this.visibility = visibility;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getAltText() {
+        return altText;
+    }
+
+    public void setAltText(String altText) {
+        this.altText = altText;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+
+    public OffsetDateTime getUpdatedAt() {
+        return updatedAt;
+    }
+
+    public void setUpdatedAt(OffsetDateTime updatedAt) {
+        this.updatedAt = updatedAt;
+    }
+
+    public List<AdminMediaVariantDto> getVariants() {
+        return variants;
+    }
+
+    public void setVariants(List<AdminMediaVariantDto> variants) {
+        this.variants = variants;
+    }
+
+    public List<AdminMediaUsageDto> getUsages() {
+        return usages;
+    }
+
+    public void setUsages(List<AdminMediaUsageDto> usages) {
+        this.usages = usages;
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminMediaUsageDto.java

@@ -0,0 +1,98 @@
+package com.printcalculator.dto;
+
+import java.time.OffsetDateTime;
+import java.util.Map;
+import java.util.UUID;
+
+public class AdminMediaUsageDto {
+    private UUID id;
+    private String usageType;
+    private String usageKey;
+    private UUID ownerId;
+    private UUID mediaAssetId;
+    private Integer sortOrder;
+    private Boolean isPrimary;
+    private Boolean isActive;
+    private Map<String, MediaTextTranslationDto> translations;
+    private OffsetDateTime createdAt;
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getUsageType() {
+        return usageType;
+    }
+
+    public void setUsageType(String usageType) {
+        this.usageType = usageType;
+    }
+
+    public String getUsageKey() {
+        return usageKey;
+    }
+
+    public void setUsageKey(String usageKey) {
+        this.usageKey = usageKey;
+    }
+
+    public UUID getOwnerId() {
+        return ownerId;
+    }
+
+    public void setOwnerId(UUID ownerId) {
+        this.ownerId = ownerId;
+    }
+
+    public UUID getMediaAssetId() {
+        return mediaAssetId;
+    }
+
+    public void setMediaAssetId(UUID mediaAssetId) {
+        this.mediaAssetId = mediaAssetId;
+    }
+
+    public Integer getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(Integer sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+
+    public Boolean getIsPrimary() {
+        return isPrimary;
+    }
+
+    public void setIsPrimary(Boolean primary) {
+        isPrimary = primary;
+    }
+
+    public Boolean getIsActive() {
+        return isActive;
+    }
+
+    public void setIsActive(Boolean active) {
+        isActive = active;
+    }
+
+    public Map<String, MediaTextTranslationDto> getTranslations() {
+        return translations;
+    }
+
+    public void setTranslations(Map<String, MediaTextTranslationDto> translations) {
+        this.translations = translations;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminMediaVariantDto.java

@@ -0,0 +1,106 @@
+package com.printcalculator.dto;
+
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+public class AdminMediaVariantDto {
+    private UUID id;
+    private String variantName;
+    private String format;
+    private String storageKey;
+    private String mimeType;
+    private Integer widthPx;
+    private Integer heightPx;
+    private Long fileSizeBytes;
+    private Boolean isGenerated;
+    private String publicUrl;
+    private OffsetDateTime createdAt;
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getVariantName() {
+        return variantName;
+    }
+
+    public void setVariantName(String variantName) {
+        this.variantName = variantName;
+    }
+
+    public String getFormat() {
+        return format;
+    }
+
+    public void setFormat(String format) {
+        this.format = format;
+    }
+
+    public String getStorageKey() {
+        return storageKey;
+    }
+
+    public void setStorageKey(String storageKey) {
+        this.storageKey = storageKey;
+    }
+
+    public String getMimeType() {
+        return mimeType;
+    }
+
+    public void setMimeType(String mimeType) {
+        this.mimeType = mimeType;
+    }
+
+    public Integer getWidthPx() {
+        return widthPx;
+    }
+
+    public void setWidthPx(Integer widthPx) {
+        this.widthPx = widthPx;
+    }
+
+    public Integer getHeightPx() {
+        return heightPx;
+    }
+
+    public void setHeightPx(Integer heightPx) {
+        this.heightPx = heightPx;
+    }
+
+    public Long getFileSizeBytes() {
+        return fileSizeBytes;
+    }
+
+    public void setFileSizeBytes(Long fileSizeBytes) {
+        this.fileSizeBytes = fileSizeBytes;
+    }
+
+    public Boolean getIsGenerated() {
+        return isGenerated;
+    }
+
+    public void setIsGenerated(Boolean generated) {
+        isGenerated = generated;
+    }
+
+    public String getPublicUrl() {
+        return publicUrl;
+    }
+
+    public void setPublicUrl(String publicUrl) {
+        this.publicUrl = publicUrl;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminUpdateMediaAssetRequest.java

@@ -0,0 +1,40 @@
+package com.printcalculator.dto;
+
+public class AdminUpdateMediaAssetRequest {
+    private String title;
+    private String altText;
+    private String visibility;
+    private String status;
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getAltText() {
+        return altText;
+    }
+
+    public void setAltText(String altText) {
+        this.altText = altText;
+    }
+
+    public String getVisibility() {
+        return visibility;
+    }
+
+    public void setVisibility(String visibility) {
+        this.visibility = visibility;
+    }
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminUpdateMediaUsageRequest.java

@@ -0,0 +1,79 @@
+package com.printcalculator.dto;
+
+import java.util.UUID;
+import java.util.Map;
+
+public class AdminUpdateMediaUsageRequest {
+    private String usageType;
+    private String usageKey;
+    private UUID ownerId;
+    private UUID mediaAssetId;
+    private Integer sortOrder;
+    private Boolean isPrimary;
+    private Boolean isActive;
+    private Map<String, MediaTextTranslationDto> translations;
+
+    public String getUsageType() {
+        return usageType;
+    }
+
+    public void setUsageType(String usageType) {
+        this.usageType = usageType;
+    }
+
+    public String getUsageKey() {
+        return usageKey;
+    }
+
+    public void setUsageKey(String usageKey) {
+        this.usageKey = usageKey;
+    }
+
+    public UUID getOwnerId() {
+        return ownerId;
+    }
+
+    public void setOwnerId(UUID ownerId) {
+        this.ownerId = ownerId;
+    }
+
+    public UUID getMediaAssetId() {
+        return mediaAssetId;
+    }
+
+    public void setMediaAssetId(UUID mediaAssetId) {
+        this.mediaAssetId = mediaAssetId;
+    }
+
+    public Integer getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(Integer sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+
+    public Boolean getIsPrimary() {
+        return isPrimary;
+    }
+
+    public void setIsPrimary(Boolean primary) {
+        isPrimary = primary;
+    }
+
+    public Boolean getIsActive() {
+        return isActive;
+    }
+
+    public void setIsActive(Boolean active) {
+        isActive = active;
+    }
+
+    public Map<String, MediaTextTranslationDto> getTranslations() {
+        return translations;
+    }
+
+    public void setTranslations(Map<String, MediaTextTranslationDto> translations) {
+        this.translations = translations;
+    }
+}

backend/src/main/java/com/printcalculator/dto/MediaTextTranslationDto.java

@@ -0,0 +1,22 @@
+package com.printcalculator.dto;
+
+public class MediaTextTranslationDto {
+    private String title;
+    private String altText;
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getAltText() {
+        return altText;
+    }
+
+    public void setAltText(String altText) {
+        this.altText = altText;
+    }
+}

backend/src/main/java/com/printcalculator/dto/PublicMediaUsageDto.java

@@ -0,0 +1,96 @@
+package com.printcalculator.dto;
+
+import java.util.UUID;
+
+public class PublicMediaUsageDto {
+    private UUID mediaAssetId;
+    private String title;
+    private String altText;
+    private String usageType;
+    private String usageKey;
+    private Integer sortOrder;
+    private Boolean isPrimary;
+    private PublicMediaVariantDto thumb;
+    private PublicMediaVariantDto card;
+    private PublicMediaVariantDto hero;
+
+    public UUID getMediaAssetId() {
+        return mediaAssetId;
+    }
+
+    public void setMediaAssetId(UUID mediaAssetId) {
+        this.mediaAssetId = mediaAssetId;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getAltText() {
+        return altText;
+    }
+
+    public void setAltText(String altText) {
+        this.altText = altText;
+    }
+
+    public String getUsageType() {
+        return usageType;
+    }
+
+    public void setUsageType(String usageType) {
+        this.usageType = usageType;
+    }
+
+    public String getUsageKey() {
+        return usageKey;
+    }
+
+    public void setUsageKey(String usageKey) {
+        this.usageKey = usageKey;
+    }
+
+    public Integer getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(Integer sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+
+    public Boolean getIsPrimary() {
+        return isPrimary;
+    }
+
+    public void setIsPrimary(Boolean primary) {
+        isPrimary = primary;
+    }
+
+    public PublicMediaVariantDto getThumb() {
+        return thumb;
+    }
+
+    public void setThumb(PublicMediaVariantDto thumb) {
+        this.thumb = thumb;
+    }
+
+    public PublicMediaVariantDto getCard() {
+        return card;
+    }
+
+    public void setCard(PublicMediaVariantDto card) {
+        this.card = card;
+    }
+
+    public PublicMediaVariantDto getHero() {
+        return hero;
+    }
+
+    public void setHero(PublicMediaVariantDto hero) {
+        this.hero = hero;
+    }
+}

backend/src/main/java/com/printcalculator/dto/PublicMediaVariantDto.java

@@ -0,0 +1,31 @@
+package com.printcalculator.dto;
+
+public class PublicMediaVariantDto {
+    private String avifUrl;
+    private String webpUrl;
+    private String jpegUrl;
+
+    public String getAvifUrl() {
+        return avifUrl;
+    }
+
+    public void setAvifUrl(String avifUrl) {
+        this.avifUrl = avifUrl;
+    }
+
+    public String getWebpUrl() {
+        return webpUrl;
+    }
+
+    public void setWebpUrl(String webpUrl) {
+        this.webpUrl = webpUrl;
+    }
+
+    public String getJpegUrl() {
+        return jpegUrl;
+    }
+
+    public void setJpegUrl(String jpegUrl) {
+        this.jpegUrl = jpegUrl;
+    }
+}

backend/src/main/java/com/printcalculator/entity/MediaAsset.java

@@ -0,0 +1,177 @@
+package com.printcalculator.entity;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.Table;
+import org.hibernate.annotations.ColumnDefault;
+
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "media_asset", indexes = {
+        @Index(name = "ix_media_asset_status_visibility_created_at", columnList = "status, visibility, created_at")
+})
+public class MediaAsset {
+    @Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    @Column(name = "media_asset_id", nullable = false)
+    private UUID id;
+
+    @Column(name = "original_filename", nullable = false, length = Integer.MAX_VALUE)
+    private String originalFilename;
+
+    @Column(name = "storage_key", nullable = false, length = Integer.MAX_VALUE, unique = true)
+    private String storageKey;
+
+    @Column(name = "mime_type", nullable = false, length = Integer.MAX_VALUE)
+    private String mimeType;
+
+    @Column(name = "file_size_bytes", nullable = false)
+    private Long fileSizeBytes;
+
+    @Column(name = "sha256_hex", nullable = false, length = Integer.MAX_VALUE)
+    private String sha256Hex;
+
+    @Column(name = "width_px")
+    private Integer widthPx;
+
+    @Column(name = "height_px")
+    private Integer heightPx;
+
+    @Column(name = "status", nullable = false, length = Integer.MAX_VALUE)
+    private String status;
+
+    @Column(name = "visibility", nullable = false, length = Integer.MAX_VALUE)
+    private String visibility;
+
+    @Column(name = "title", length = Integer.MAX_VALUE)
+    private String title;
+
+    @Column(name = "alt_text", length = Integer.MAX_VALUE)
+    private String altText;
+
+    @ColumnDefault("now()")
+    @Column(name = "created_at", nullable = false)
+    private OffsetDateTime createdAt;
+
+    @ColumnDefault("now()")
+    @Column(name = "updated_at", nullable = false)
+    private OffsetDateTime updatedAt;
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getOriginalFilename() {
+        return originalFilename;
+    }
+
+    public void setOriginalFilename(String originalFilename) {
+        this.originalFilename = originalFilename;
+    }
+
+    public String getStorageKey() {
+        return storageKey;
+    }
+
+    public void setStorageKey(String storageKey) {
+        this.storageKey = storageKey;
+    }
+
+    public String getMimeType() {
+        return mimeType;
+    }
+
+    public void setMimeType(String mimeType) {
+        this.mimeType = mimeType;
+    }
+
+    public Long getFileSizeBytes() {
+        return fileSizeBytes;
+    }
+
+    public void setFileSizeBytes(Long fileSizeBytes) {
+        this.fileSizeBytes = fileSizeBytes;
+    }
+
+    public String getSha256Hex() {
+        return sha256Hex;
+    }
+
+    public void setSha256Hex(String sha256Hex) {
+        this.sha256Hex = sha256Hex;
+    }
+
+    public Integer getWidthPx() {
+        return widthPx;
+    }
+
+    public void setWidthPx(Integer widthPx) {
+        this.widthPx = widthPx;
+    }
+
+    public Integer getHeightPx() {
+        return heightPx;
+    }
+
+    public void setHeightPx(Integer heightPx) {
+        this.heightPx = heightPx;
+    }
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+
+    public String getVisibility() {
+        return visibility;
+    }
+
+    public void setVisibility(String visibility) {
+        this.visibility = visibility;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getAltText() {
+        return altText;
+    }
+
+    public void setAltText(String altText) {
+        this.altText = altText;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+
+    public OffsetDateTime getUpdatedAt() {
+        return updatedAt;
+    }
+
+    public void setUpdatedAt(OffsetDateTime updatedAt) {
+        this.updatedAt = updatedAt;
+    }
+}

backend/src/main/java/com/printcalculator/entity/MediaUsage.java

@@ -0,0 +1,273 @@
+package com.printcalculator.entity;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+import jakarta.persistence.Table;
+import org.hibernate.annotations.ColumnDefault;
+import org.hibernate.annotations.OnDelete;
+import org.hibernate.annotations.OnDeleteAction;
+
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "media_usage", indexes = {
+        @Index(name = "ix_media_usage_scope", columnList = "usage_type, usage_key, is_active, sort_order")
+})
+public class MediaUsage {
+    @Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    @Column(name = "media_usage_id", nullable = false)
+    private UUID id;
+
+    @Column(name = "usage_type", nullable = false, length = Integer.MAX_VALUE)
+    private String usageType;
+
+    @Column(name = "usage_key", nullable = false, length = Integer.MAX_VALUE)
+    private String usageKey;
+
+    @Column(name = "owner_id")
+    private UUID ownerId;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @OnDelete(action = OnDeleteAction.CASCADE)
+    @JoinColumn(name = "media_asset_id", nullable = false)
+    private MediaAsset mediaAsset;
+
+    @ColumnDefault("0")
+    @Column(name = "sort_order", nullable = false)
+    private Integer sortOrder;
+
+    @ColumnDefault("false")
+    @Column(name = "is_primary", nullable = false)
+    private Boolean isPrimary;
+
+    @ColumnDefault("true")
+    @Column(name = "is_active", nullable = false)
+    private Boolean isActive;
+
+    @Column(name = "title_it", length = Integer.MAX_VALUE)
+    private String titleIt;
+
+    @Column(name = "title_en", length = Integer.MAX_VALUE)
+    private String titleEn;
+
+    @Column(name = "title_de", length = Integer.MAX_VALUE)
+    private String titleDe;
+
+    @Column(name = "title_fr", length = Integer.MAX_VALUE)
+    private String titleFr;
+
+    @Column(name = "alt_text_it", length = Integer.MAX_VALUE)
+    private String altTextIt;
+
+    @Column(name = "alt_text_en", length = Integer.MAX_VALUE)
+    private String altTextEn;
+
+    @Column(name = "alt_text_de", length = Integer.MAX_VALUE)
+    private String altTextDe;
+
+    @Column(name = "alt_text_fr", length = Integer.MAX_VALUE)
+    private String altTextFr;
+
+    @ColumnDefault("now()")
+    @Column(name = "created_at", nullable = false)
+    private OffsetDateTime createdAt;
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public String getUsageType() {
+        return usageType;
+    }
+
+    public void setUsageType(String usageType) {
+        this.usageType = usageType;
+    }
+
+    public String getUsageKey() {
+        return usageKey;
+    }
+
+    public void setUsageKey(String usageKey) {
+        this.usageKey = usageKey;
+    }
+
+    public UUID getOwnerId() {
+        return ownerId;
+    }
+
+    public void setOwnerId(UUID ownerId) {
+        this.ownerId = ownerId;
+    }
+
+    public MediaAsset getMediaAsset() {
+        return mediaAsset;
+    }
+
+    public void setMediaAsset(MediaAsset mediaAsset) {
+        this.mediaAsset = mediaAsset;
+    }
+
+    public Integer getSortOrder() {
+        return sortOrder;
+    }
+
+    public void setSortOrder(Integer sortOrder) {
+        this.sortOrder = sortOrder;
+    }
+
+    public Boolean getIsPrimary() {
+        return isPrimary;
+    }
+
+    public void setIsPrimary(Boolean primary) {
+        isPrimary = primary;
+    }
+
+    public Boolean getIsActive() {
+        return isActive;
+    }
+
+    public void setIsActive(Boolean active) {
+        isActive = active;
+    }
+
+    public String getTitleIt() {
+        return titleIt;
+    }
+
+    public void setTitleIt(String titleIt) {
+        this.titleIt = titleIt;
+    }
+
+    public String getTitleEn() {
+        return titleEn;
+    }
+
+    public void setTitleEn(String titleEn) {
+        this.titleEn = titleEn;
+    }
+
+    public String getTitleDe() {
+        return titleDe;
+    }
+
+    public void setTitleDe(String titleDe) {
+        this.titleDe = titleDe;
+    }
+
+    public String getTitleFr() {
+        return titleFr;
+    }
+
+    public void setTitleFr(String titleFr) {
+        this.titleFr = titleFr;
+    }
+
+    public String getAltTextIt() {
+        return altTextIt;
+    }
+
+    public void setAltTextIt(String altTextIt) {
+        this.altTextIt = altTextIt;
+    }
+
+    public String getAltTextEn() {
+        return altTextEn;
+    }
+
+    public void setAltTextEn(String altTextEn) {
+        this.altTextEn = altTextEn;
+    }
+
+    public String getAltTextDe() {
+        return altTextDe;
+    }
+
+    public void setAltTextDe(String altTextDe) {
+        this.altTextDe = altTextDe;
+    }
+
+    public String getAltTextFr() {
+        return altTextFr;
+    }
+
+    public void setAltTextFr(String altTextFr) {
+        this.altTextFr = altTextFr;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+
+    public String getTitleForLanguage(String language) {
+        if (language == null) {
+            return null;
+        }
+        return switch (language.trim().toLowerCase()) {
+            case "it" -> titleIt;
+            case "en" -> titleEn;
+            case "de" -> titleDe;
+            case "fr" -> titleFr;
+            default -> null;
+        };
+    }
+
+    public void setTitleForLanguage(String language, String value) {
+        if (language == null) {
+            return;
+        }
+        switch (language.trim().toLowerCase()) {
+            case "it" -> titleIt = value;
+            case "en" -> titleEn = value;
+            case "de" -> titleDe = value;
+            case "fr" -> titleFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getAltTextForLanguage(String language) {
+        if (language == null) {
+            return null;
+        }
+        return switch (language.trim().toLowerCase()) {
+            case "it" -> altTextIt;
+            case "en" -> altTextEn;
+            case "de" -> altTextDe;
+            case "fr" -> altTextFr;
+            default -> null;
+        };
+    }
+
+    public void setAltTextForLanguage(String language, String value) {
+        if (language == null) {
+            return;
+        }
+        switch (language.trim().toLowerCase()) {
+            case "it" -> altTextIt = value;
+            case "en" -> altTextEn = value;
+            case "de" -> altTextDe = value;
+            case "fr" -> altTextFr = value;
+            default -> {
+            }
+        }
+    }
+}

backend/src/main/java/com/printcalculator/entity/MediaVariant.java

@@ -0,0 +1,154 @@
+package com.printcalculator.entity;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.FetchType;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.ManyToOne;
+import jakarta.persistence.Table;
+import jakarta.persistence.UniqueConstraint;
+import org.hibernate.annotations.ColumnDefault;
+import org.hibernate.annotations.OnDelete;
+import org.hibernate.annotations.OnDeleteAction;
+
+import java.time.OffsetDateTime;
+import java.util.UUID;
+
+@Entity
+@Table(name = "media_variant", indexes = {
+        @Index(name = "ix_media_variant_asset", columnList = "media_asset_id")
+}, uniqueConstraints = {
+        @UniqueConstraint(name = "uq_media_variant_asset_name_format", columnNames = {"media_asset_id", "variant_name", "format"})
+})
+public class MediaVariant {
+    @Id
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    @Column(name = "media_variant_id", nullable = false)
+    private UUID id;
+
+    @ManyToOne(fetch = FetchType.LAZY, optional = false)
+    @OnDelete(action = OnDeleteAction.CASCADE)
+    @JoinColumn(name = "media_asset_id", nullable = false)
+    private MediaAsset mediaAsset;
+
+    @Column(name = "variant_name", nullable = false, length = Integer.MAX_VALUE)
+    private String variantName;
+
+    @Column(name = "format", nullable = false, length = Integer.MAX_VALUE)
+    private String format;
+
+    @Column(name = "storage_key", nullable = false, length = Integer.MAX_VALUE, unique = true)
+    private String storageKey;
+
+    @Column(name = "mime_type", nullable = false, length = Integer.MAX_VALUE)
+    private String mimeType;
+
+    @Column(name = "width_px", nullable = false)
+    private Integer widthPx;
+
+    @Column(name = "height_px", nullable = false)
+    private Integer heightPx;
+
+    @Column(name = "file_size_bytes", nullable = false)
+    private Long fileSizeBytes;
+
+    @ColumnDefault("true")
+    @Column(name = "is_generated", nullable = false)
+    private Boolean isGenerated;
+
+    @ColumnDefault("now()")
+    @Column(name = "created_at", nullable = false)
+    private OffsetDateTime createdAt;
+
+    public UUID getId() {
+        return id;
+    }
+
+    public void setId(UUID id) {
+        this.id = id;
+    }
+
+    public MediaAsset getMediaAsset() {
+        return mediaAsset;
+    }
+
+    public void setMediaAsset(MediaAsset mediaAsset) {
+        this.mediaAsset = mediaAsset;
+    }
+
+    public String getVariantName() {
+        return variantName;
+    }
+
+    public void setVariantName(String variantName) {
+        this.variantName = variantName;
+    }
+
+    public String getFormat() {
+        return format;
+    }
+
+    public void setFormat(String format) {
+        this.format = format;
+    }
+
+    public String getStorageKey() {
+        return storageKey;
+    }
+
+    public void setStorageKey(String storageKey) {
+        this.storageKey = storageKey;
+    }
+
+    public String getMimeType() {
+        return mimeType;
+    }
+
+    public void setMimeType(String mimeType) {
+        this.mimeType = mimeType;
+    }
+
+    public Integer getWidthPx() {
+        return widthPx;
+    }
+
+    public void setWidthPx(Integer widthPx) {
+        this.widthPx = widthPx;
+    }
+
+    public Integer getHeightPx() {
+        return heightPx;
+    }
+
+    public void setHeightPx(Integer heightPx) {
+        this.heightPx = heightPx;
+    }
+
+    public Long getFileSizeBytes() {
+        return fileSizeBytes;
+    }
+
+    public void setFileSizeBytes(Long fileSizeBytes) {
+        this.fileSizeBytes = fileSizeBytes;
+    }
+
+    public Boolean getIsGenerated() {
+        return isGenerated;
+    }
+
+    public void setIsGenerated(Boolean generated) {
+        isGenerated = generated;
+    }
+
+    public OffsetDateTime getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(OffsetDateTime createdAt) {
+        this.createdAt = createdAt;
+    }
+}

backend/src/main/java/com/printcalculator/repository/MediaAssetRepository.java

@@ -0,0 +1,11 @@
+package com.printcalculator.repository;
+
+import com.printcalculator.entity.MediaAsset;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.List;
+import java.util.UUID;
+
+public interface MediaAssetRepository extends JpaRepository<MediaAsset, UUID> {
+    List<MediaAsset> findAllByOrderByCreatedAtDesc();
+}

backend/src/main/java/com/printcalculator/repository/MediaUsageRepository.java

@@ -0,0 +1,30 @@
+package com.printcalculator.repository;
+
+import com.printcalculator.entity.MediaUsage;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.UUID;
+
+public interface MediaUsageRepository extends JpaRepository<MediaUsage, UUID> {
+    List<MediaUsage> findByMediaAsset_IdOrderBySortOrderAscCreatedAtAsc(UUID mediaAssetId);
+
+    List<MediaUsage> findByMediaAsset_IdIn(Collection<UUID> mediaAssetIds);
+
+    List<MediaUsage> findByUsageTypeAndUsageKeyAndIsActiveTrueOrderBySortOrderAscCreatedAtAsc(String usageType,
+                                                                                               String usageKey);
+
+    @Query("""
+            select usage from MediaUsage usage
+            where usage.usageType = :usageType
+              and usage.usageKey = :usageKey
+              and ((:ownerId is null and usage.ownerId is null) or usage.ownerId = :ownerId)
+            order by usage.sortOrder asc, usage.createdAt asc
+            """)
+    List<MediaUsage> findByUsageScope(@Param("usageType") String usageType,
+                                      @Param("usageKey") String usageKey,
+                                      @Param("ownerId") UUID ownerId);
+}

backend/src/main/java/com/printcalculator/repository/MediaVariantRepository.java

@@ -0,0 +1,14 @@
+package com.printcalculator.repository;
+
+import com.printcalculator.entity.MediaVariant;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+import java.util.Collection;
+import java.util.List;
+import java.util.UUID;
+
+public interface MediaVariantRepository extends JpaRepository<MediaVariant, UUID> {
+    List<MediaVariant> findByMediaAsset_IdOrderByCreatedAtAsc(UUID mediaAssetId);
+
+    List<MediaVariant> findByMediaAsset_IdIn(Collection<UUID> mediaAssetIds);
+}

backend/src/main/java/com/printcalculator/service/NozzleLayerHeightPolicyService.java

@@ -12,9 +12,11 @@ import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
+import java.util.logging.Logger;
 
 @Service
 public class NozzleLayerHeightPolicyService {
+    private static final Logger logger = Logger.getLogger(NozzleLayerHeightPolicyService.class.getName());
     private static final BigDecimal DEFAULT_NOZZLE = BigDecimal.valueOf(0.40).setScale(2, RoundingMode.HALF_UP);
     private static final BigDecimal DEFAULT_LAYER = BigDecimal.valueOf(0.20).setScale(3, RoundingMode.HALF_UP);
 
@@ -27,7 +29,8 @@ public class NozzleLayerHeightPolicyService {
     public Map<BigDecimal, List<BigDecimal>> getActiveRulesByNozzle() {
         List<NozzleLayerHeightOption> rules = ruleRepo.findByIsActiveTrueOrderByNozzleDiameterMmAscLayerHeightMmAsc();
         if (rules.isEmpty()) {
-            return fallbackRules();
+            logger.warning("No active nozzle->layer rules found in DB (table nozzle_layer_height_option is empty)");
+            return Map.of();
         }
 
         Map<BigDecimal, List<BigDecimal>> byNozzle = new LinkedHashMap<>();
@@ -120,24 +123,4 @@ public class NozzleLayerHeightPolicyService {
         }
     }
 
-    private Map<BigDecimal, List<BigDecimal>> fallbackRules() {
-        Map<BigDecimal, List<BigDecimal>> fallback = new LinkedHashMap<>();
-        fallback.put(scaleNozzle(0.20), scaleLayers(0.04, 0.06, 0.08, 0.10, 0.12));
-        fallback.put(scaleNozzle(0.40), scaleLayers(0.08, 0.12, 0.16, 0.20, 0.24, 0.28));
-        fallback.put(scaleNozzle(0.60), scaleLayers(0.16, 0.20, 0.24, 0.30, 0.36));
-        fallback.put(scaleNozzle(0.80), scaleLayers(0.20, 0.28, 0.36, 0.40, 0.48, 0.56));
-        return fallback;
-    }
-
-    private BigDecimal scaleNozzle(double value) {
-        return BigDecimal.valueOf(value).setScale(2, RoundingMode.HALF_UP);
-    }
-
-    private List<BigDecimal> scaleLayers(double... values) {
-        List<BigDecimal> scaled = new ArrayList<>();
-        for (double value : values) {
-            scaled.add(BigDecimal.valueOf(value).setScale(3, RoundingMode.HALF_UP));
-        }
-        return scaled;
-    }
 }

backend/src/main/java/com/printcalculator/service/admin/AdminMediaControllerService.java

@@ -0,0 +1,838 @@
+package com.printcalculator.service.admin;
+
+import com.printcalculator.dto.AdminCreateMediaUsageRequest;
+import com.printcalculator.dto.AdminMediaAssetDto;
+import com.printcalculator.dto.AdminMediaUsageDto;
+import com.printcalculator.dto.AdminMediaVariantDto;
+import com.printcalculator.dto.MediaTextTranslationDto;
+import com.printcalculator.dto.AdminUpdateMediaAssetRequest;
+import com.printcalculator.dto.AdminUpdateMediaUsageRequest;
+import com.printcalculator.entity.MediaAsset;
+import com.printcalculator.entity.MediaUsage;
+import com.printcalculator.entity.MediaVariant;
+import com.printcalculator.repository.MediaAssetRepository;
+import com.printcalculator.repository.MediaUsageRepository;
+import com.printcalculator.repository.MediaVariantRepository;
+import com.printcalculator.service.media.MediaFfmpegService;
+import com.printcalculator.service.media.MediaImageInspector;
+import com.printcalculator.service.media.MediaStorageService;
+import com.printcalculator.service.storage.ClamAVService;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.util.StringUtils;
+import org.springframework.web.multipart.MultipartFile;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.UncheckedIOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.security.MessageDigest;
+import java.security.NoSuchAlgorithmException;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Comparator;
+import java.util.HexFormat;
+import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Objects;
+import java.util.Set;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional(readOnly = true)
+public class AdminMediaControllerService {
+
+    private static final Logger logger = LoggerFactory.getLogger(AdminMediaControllerService.class);
+
+    private static final String STATUS_UPLOADED = "UPLOADED";
+    private static final String STATUS_PROCESSING = "PROCESSING";
+    private static final String STATUS_READY = "READY";
+    private static final String STATUS_FAILED = "FAILED";
+    private static final String STATUS_ARCHIVED = "ARCHIVED";
+
+    private static final String VISIBILITY_PUBLIC = "PUBLIC";
+    private static final String VISIBILITY_PRIVATE = "PRIVATE";
+
+    private static final String FORMAT_ORIGINAL = "ORIGINAL";
+    private static final String FORMAT_JPEG = "JPEG";
+    private static final String FORMAT_WEBP = "WEBP";
+    private static final String FORMAT_AVIF = "AVIF";
+
+    private static final Set<String> ALLOWED_STATUSES = Set.of(
+            STATUS_UPLOADED, STATUS_PROCESSING, STATUS_READY, STATUS_FAILED, STATUS_ARCHIVED
+    );
+    private static final Set<String> ALLOWED_VISIBILITIES = Set.of(VISIBILITY_PUBLIC, VISIBILITY_PRIVATE);
+    private static final Set<String> ALLOWED_UPLOAD_MIME_TYPES = Set.of(
+            "image/jpeg", "image/png", "image/webp"
+    );
+    private static final List<String> SUPPORTED_MEDIA_LANGUAGES = List.of("it", "en", "de", "fr");
+    private static final Map<String, String> GENERATED_FORMAT_MIME_TYPES = Map.of(
+            FORMAT_JPEG, "image/jpeg",
+            FORMAT_WEBP, "image/webp",
+            FORMAT_AVIF, "image/avif"
+    );
+    private static final Map<String, String> GENERATED_FORMAT_EXTENSIONS = Map.of(
+            FORMAT_JPEG, "jpg",
+            FORMAT_WEBP, "webp",
+            FORMAT_AVIF, "avif"
+    );
+    private static final List<PresetDefinition> PRESETS = List.of(
+            new PresetDefinition("thumb", 320),
+            new PresetDefinition("card", 640),
+            new PresetDefinition("hero", 1280)
+    );
+    private static final DateTimeFormatter STORAGE_FOLDER_FORMATTER = DateTimeFormatter.ofPattern("yyyy/MM");
+
+    private final MediaAssetRepository mediaAssetRepository;
+    private final MediaVariantRepository mediaVariantRepository;
+    private final MediaUsageRepository mediaUsageRepository;
+    private final MediaStorageService mediaStorageService;
+    private final MediaImageInspector mediaImageInspector;
+    private final MediaFfmpegService mediaFfmpegService;
+    private final ClamAVService clamAVService;
+    private final long maxUploadFileSizeBytes;
+
+    public AdminMediaControllerService(MediaAssetRepository mediaAssetRepository,
+                                       MediaVariantRepository mediaVariantRepository,
+                                       MediaUsageRepository mediaUsageRepository,
+                                       MediaStorageService mediaStorageService,
+                                       MediaImageInspector mediaImageInspector,
+                                       MediaFfmpegService mediaFfmpegService,
+                                       ClamAVService clamAVService,
+                                       @Value("${media.upload.max-file-size-bytes:26214400}") long maxUploadFileSizeBytes) {
+        this.mediaAssetRepository = mediaAssetRepository;
+        this.mediaVariantRepository = mediaVariantRepository;
+        this.mediaUsageRepository = mediaUsageRepository;
+        this.mediaStorageService = mediaStorageService;
+        this.mediaImageInspector = mediaImageInspector;
+        this.mediaFfmpegService = mediaFfmpegService;
+        this.clamAVService = clamAVService;
+        this.maxUploadFileSizeBytes = maxUploadFileSizeBytes;
+    }
+
+    @Transactional(noRollbackFor = ResponseStatusException.class)
+    public AdminMediaAssetDto uploadAsset(MultipartFile file,
+                                          String title,
+                                          String altText,
+                                          String visibility) {
+        validateUpload(file);
+
+        Path tempDirectory = null;
+        MediaAsset asset = null;
+
+        try {
+            String normalizedVisibility = normalizeVisibility(visibility, true);
+            tempDirectory = Files.createTempDirectory("media-asset-");
+            Path uploadFile = tempDirectory.resolve("upload.bin");
+            file.transferTo(uploadFile);
+
+            try (InputStream inputStream = Files.newInputStream(uploadFile)) {
+                clamAVService.scan(inputStream);
+            }
+
+            MediaImageInspector.ImageMetadata metadata = mediaImageInspector.inspect(uploadFile);
+            if (!ALLOWED_UPLOAD_MIME_TYPES.contains(metadata.mimeType())) {
+                throw new ResponseStatusException(
+                        HttpStatus.BAD_REQUEST,
+                        "Unsupported image type. Allowed: jpg, jpeg, png, webp."
+                );
+            }
+
+            String storageFolder = buildStorageFolder();
+            String originalStorageKey = storageFolder + "/original." + metadata.fileExtension();
+            String normalizedFilename = sanitizeOriginalFilename(file.getOriginalFilename(), metadata.fileExtension());
+            String normalizedTitle = normalizeText(title);
+            String normalizedAltText = normalizeText(altText);
+            long originalFileSize = Files.size(uploadFile);
+            String sha256Hex = computeSha256(uploadFile);
+
+            mediaStorageService.storeOriginal(uploadFile, originalStorageKey);
+
+            OffsetDateTime now = OffsetDateTime.now();
+            asset = new MediaAsset();
+            asset.setOriginalFilename(normalizedFilename);
+            asset.setStorageKey(originalStorageKey);
+            asset.setMimeType(metadata.mimeType());
+            asset.setFileSizeBytes(originalFileSize);
+            asset.setSha256Hex(sha256Hex);
+            asset.setWidthPx(metadata.widthPx());
+            asset.setHeightPx(metadata.heightPx());
+            asset.setStatus(STATUS_UPLOADED);
+            asset.setVisibility(normalizedVisibility);
+            asset.setTitle(normalizedTitle);
+            asset.setAltText(normalizedAltText);
+            asset.setCreatedAt(now);
+            asset.setUpdatedAt(now);
+            asset = mediaAssetRepository.save(asset);
+
+            MediaVariant originalVariant = new MediaVariant();
+            originalVariant.setMediaAsset(asset);
+            originalVariant.setVariantName("original");
+            originalVariant.setFormat(FORMAT_ORIGINAL);
+            originalVariant.setStorageKey(originalStorageKey);
+            originalVariant.setMimeType(metadata.mimeType());
+            originalVariant.setWidthPx(metadata.widthPx());
+            originalVariant.setHeightPx(metadata.heightPx());
+            originalVariant.setFileSizeBytes(originalFileSize);
+            originalVariant.setIsGenerated(false);
+            originalVariant.setCreatedAt(now);
+            mediaVariantRepository.save(originalVariant);
+
+            asset.setStatus(STATUS_PROCESSING);
+            asset.setUpdatedAt(OffsetDateTime.now());
+            asset = mediaAssetRepository.save(asset);
+
+            List<MediaVariant> generatedVariants = generateDerivedVariants(asset, uploadFile, tempDirectory);
+            mediaVariantRepository.saveAll(generatedVariants);
+
+            asset.setStatus(STATUS_READY);
+            asset.setUpdatedAt(OffsetDateTime.now());
+            mediaAssetRepository.save(asset);
+
+            return getAsset(asset.getId());
+        } catch (ResponseStatusException e) {
+            markFailed(asset, e.getReason(), e);
+            throw e;
+        } catch (IOException e) {
+            markFailed(asset, "Media processing failed.", e);
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Media processing failed.");
+        } finally {
+            deleteRecursively(tempDirectory);
+        }
+    }
+
+    public List<AdminMediaAssetDto> listAssets() {
+        return toAssetDtos(mediaAssetRepository.findAllByOrderByCreatedAtDesc());
+    }
+
+    public AdminMediaAssetDto getAsset(UUID mediaAssetId) {
+        MediaAsset asset = getAssetOrThrow(mediaAssetId);
+        return toAssetDtos(List.of(asset)).getFirst();
+    }
+
+    @Transactional(noRollbackFor = ResponseStatusException.class)
+    public AdminMediaAssetDto updateAsset(UUID mediaAssetId, AdminUpdateMediaAssetRequest payload) {
+        if (payload == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Payload is required.");
+        }
+
+        MediaAsset asset = getAssetOrThrow(mediaAssetId);
+        String requestedVisibility = normalizeVisibility(payload.getVisibility(), false);
+        String requestedStatus = normalizeStatus(payload.getStatus(), false);
+
+        if (requestedVisibility != null && !requestedVisibility.equals(asset.getVisibility())) {
+            moveGeneratedVariants(asset, requestedVisibility);
+            asset.setVisibility(requestedVisibility);
+        }
+        if (requestedStatus != null) {
+            asset.setStatus(requestedStatus);
+        }
+        if (payload.getTitle() != null) {
+            asset.setTitle(normalizeText(payload.getTitle()));
+        }
+        if (payload.getAltText() != null) {
+            asset.setAltText(normalizeText(payload.getAltText()));
+        }
+
+        asset.setUpdatedAt(OffsetDateTime.now());
+        mediaAssetRepository.save(asset);
+        return getAsset(asset.getId());
+    }
+
+    @Transactional
+    public AdminMediaUsageDto createUsage(AdminCreateMediaUsageRequest payload) {
+        if (payload == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Payload is required.");
+        }
+
+        MediaAsset asset = getAssetOrThrow(payload.getMediaAssetId());
+        String usageType = requireUsageType(payload.getUsageType());
+        String usageKey = requireUsageKey(payload.getUsageKey());
+        boolean isPrimary = Boolean.TRUE.equals(payload.getIsPrimary());
+        Map<String, MediaTextTranslationDto> translations = requireTranslations(payload.getTranslations());
+
+        if (isPrimary) {
+            unsetPrimaryForScope(usageType, usageKey, payload.getOwnerId(), null);
+        }
+
+        MediaUsage usage = new MediaUsage();
+        usage.setUsageType(usageType);
+        usage.setUsageKey(usageKey);
+        usage.setOwnerId(payload.getOwnerId());
+        usage.setMediaAsset(asset);
+        usage.setSortOrder(payload.getSortOrder() != null ? payload.getSortOrder() : 0);
+        usage.setIsPrimary(isPrimary);
+        usage.setIsActive(payload.getIsActive() == null || payload.getIsActive());
+        usage.setCreatedAt(OffsetDateTime.now());
+        applyTranslations(usage, translations);
+
+        MediaUsage saved = mediaUsageRepository.save(usage);
+        return toUsageDto(saved);
+    }
+
+    @Transactional
+    public AdminMediaUsageDto updateUsage(UUID mediaUsageId, AdminUpdateMediaUsageRequest payload) {
+        if (payload == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Payload is required.");
+        }
+
+        MediaUsage usage = getUsageOrThrow(mediaUsageId);
+
+        if (payload.getUsageType() != null) {
+            usage.setUsageType(requireUsageType(payload.getUsageType()));
+        }
+        if (payload.getUsageKey() != null) {
+            usage.setUsageKey(requireUsageKey(payload.getUsageKey()));
+        }
+        if (payload.getOwnerId() != null) {
+            usage.setOwnerId(payload.getOwnerId());
+        }
+        if (payload.getMediaAssetId() != null) {
+            usage.setMediaAsset(getAssetOrThrow(payload.getMediaAssetId()));
+        }
+        if (payload.getSortOrder() != null) {
+            usage.setSortOrder(payload.getSortOrder());
+        }
+        if (payload.getIsActive() != null) {
+            usage.setIsActive(payload.getIsActive());
+        }
+        if (payload.getIsPrimary() != null) {
+            usage.setIsPrimary(payload.getIsPrimary());
+        }
+        if (payload.getTranslations() != null) {
+            applyTranslations(usage, requireTranslations(payload.getTranslations()));
+        }
+
+        if (Boolean.TRUE.equals(usage.getIsPrimary())) {
+            unsetPrimaryForScope(usage.getUsageType(), usage.getUsageKey(), usage.getOwnerId(), usage.getId());
+        }
+
+        MediaUsage saved = mediaUsageRepository.save(usage);
+        return toUsageDto(saved);
+    }
+
+    @Transactional
+    public void deleteUsage(UUID mediaUsageId) {
+        mediaUsageRepository.delete(getUsageOrThrow(mediaUsageId));
+    }
+
+    private List<MediaVariant> generateDerivedVariants(MediaAsset asset, Path sourceFile, Path tempDirectory) throws IOException {
+        Path generatedDirectory = Files.createDirectories(tempDirectory.resolve("generated"));
+        String storageFolder = extractStorageFolder(asset.getStorageKey());
+
+        List<PendingGeneratedVariant> pendingVariants = new ArrayList<>();
+        Set<String> skippedFormats = new LinkedHashSet<>();
+        for (PresetDefinition preset : PRESETS) {
+            VariantDimensions dimensions = computeVariantDimensions(
+                    asset.getWidthPx(),
+                    asset.getHeightPx(),
+                    preset.maxDimension()
+            );
+
+            for (String format : List.of(FORMAT_JPEG, FORMAT_WEBP, FORMAT_AVIF)) {
+                if (!mediaFfmpegService.canEncode(format)) {
+                    skippedFormats.add(format);
+                    continue;
+                }
+                String extension = GENERATED_FORMAT_EXTENSIONS.get(format);
+                Path outputFile = generatedDirectory.resolve(preset.name() + "." + extension);
+                mediaFfmpegService.generateVariant(sourceFile, outputFile, dimensions.widthPx(), dimensions.heightPx(), format);
+
+                MediaVariant variant = new MediaVariant();
+                variant.setMediaAsset(asset);
+                variant.setVariantName(preset.name());
+                variant.setFormat(format);
+                variant.setStorageKey(storageFolder + "/" + preset.name() + "." + extension);
+                variant.setMimeType(GENERATED_FORMAT_MIME_TYPES.get(format));
+                variant.setWidthPx(dimensions.widthPx());
+                variant.setHeightPx(dimensions.heightPx());
+                variant.setFileSizeBytes(Files.size(outputFile));
+                variant.setIsGenerated(true);
+                variant.setCreatedAt(OffsetDateTime.now());
+
+                pendingVariants.add(new PendingGeneratedVariant(variant, outputFile));
+            }
+        }
+
+        if (!skippedFormats.isEmpty()) {
+            logger.warn(
+                    "Skipping media formats for asset {} because FFmpeg encoders are unavailable: {}",
+                    asset.getId(),
+                    String.join(", ", skippedFormats)
+            );
+        }
+
+        List<String> storedKeys = new ArrayList<>();
+        try {
+            for (PendingGeneratedVariant pendingVariant : pendingVariants) {
+                storeGeneratedVariant(asset.getVisibility(), pendingVariant);
+                storedKeys.add(pendingVariant.variant().getStorageKey());
+            }
+        } catch (IOException e) {
+            cleanupStoredGeneratedVariants(asset.getVisibility(), storedKeys);
+            throw e;
+        }
+
+        return pendingVariants.stream()
+                .map(PendingGeneratedVariant::variant)
+                .toList();
+    }
+
+    private void storeGeneratedVariant(String visibility, PendingGeneratedVariant pendingVariant) throws IOException {
+        if (VISIBILITY_PUBLIC.equals(visibility)) {
+            mediaStorageService.storePublic(pendingVariant.file(), pendingVariant.variant().getStorageKey());
+            return;
+        }
+        mediaStorageService.storePrivate(pendingVariant.file(), pendingVariant.variant().getStorageKey());
+    }
+
+    private void cleanupStoredGeneratedVariants(String visibility, Collection<String> storageKeys) {
+        for (String storageKey : storageKeys) {
+            try {
+                mediaStorageService.deleteGenerated(visibility, storageKey);
+            } catch (IOException cleanupException) {
+                logger.warn("Failed to clean up media variant {}", storageKey, cleanupException);
+            }
+        }
+    }
+
+    private void moveGeneratedVariants(MediaAsset asset, String requestedVisibility) {
+        List<MediaVariant> variants = mediaVariantRepository.findByMediaAsset_IdOrderByCreatedAtAsc(asset.getId());
+        List<String> movedStorageKeys = new ArrayList<>();
+        try {
+            for (MediaVariant variant : variants) {
+                if (FORMAT_ORIGINAL.equals(variant.getFormat())) {
+                    continue;
+                }
+                mediaStorageService.moveGenerated(variant.getStorageKey(), asset.getVisibility(), requestedVisibility);
+                movedStorageKeys.add(variant.getStorageKey());
+            }
+        } catch (IOException e) {
+            reverseMovedVariants(asset.getVisibility(), requestedVisibility, movedStorageKeys);
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Failed to move media files.");
+        }
+    }
+
+    private void reverseMovedVariants(String originalVisibility, String requestedVisibility, List<String> movedStorageKeys) {
+        List<String> reversedOrder = new ArrayList<>(movedStorageKeys);
+        java.util.Collections.reverse(reversedOrder);
+        for (String storageKey : reversedOrder) {
+            try {
+                mediaStorageService.moveGenerated(storageKey, requestedVisibility, originalVisibility);
+            } catch (IOException reverseException) {
+                logger.error("Failed to restore media variant {}", storageKey, reverseException);
+            }
+        }
+    }
+
+    private void unsetPrimaryForScope(String usageType, String usageKey, UUID ownerId, UUID excludeUsageId) {
+        List<MediaUsage> existingUsages = mediaUsageRepository.findByUsageScope(usageType, usageKey, ownerId);
+        List<MediaUsage> usagesToUpdate = existingUsages.stream()
+                .filter(existing -> excludeUsageId == null || !existing.getId().equals(excludeUsageId))
+                .filter(existing -> Boolean.TRUE.equals(existing.getIsPrimary()))
+                .peek(existing -> existing.setIsPrimary(false))
+                .toList();
+
+        if (!usagesToUpdate.isEmpty()) {
+            mediaUsageRepository.saveAll(usagesToUpdate);
+        }
+    }
+
+    private List<AdminMediaAssetDto> toAssetDtos(List<MediaAsset> assets) {
+        if (assets == null || assets.isEmpty()) {
+            return List.of();
+        }
+
+        List<UUID> assetIds = assets.stream()
+                .map(MediaAsset::getId)
+                .filter(Objects::nonNull)
+                .toList();
+
+        Map<UUID, List<MediaVariant>> variantsByAssetId = mediaVariantRepository.findByMediaAsset_IdIn(assetIds)
+                .stream()
+                .sorted(this::compareVariants)
+                .collect(Collectors.groupingBy(variant -> variant.getMediaAsset().getId(), LinkedHashMap::new, Collectors.toList()));
+
+        Map<UUID, List<MediaUsage>> usagesByAssetId = mediaUsageRepository.findByMediaAsset_IdIn(assetIds)
+                .stream()
+                .sorted(Comparator
+                        .comparing(MediaUsage::getSortOrder, Comparator.nullsLast(Integer::compareTo))
+                        .thenComparing(MediaUsage::getCreatedAt, Comparator.nullsLast(OffsetDateTime::compareTo)))
+                .collect(Collectors.groupingBy(usage -> usage.getMediaAsset().getId(), LinkedHashMap::new, Collectors.toList()));
+
+        return assets.stream()
+                .map(asset -> toAssetDto(
+                        asset,
+                        variantsByAssetId.getOrDefault(asset.getId(), List.of()),
+                        usagesByAssetId.getOrDefault(asset.getId(), List.of())
+                ))
+                .toList();
+    }
+
+    private AdminMediaAssetDto toAssetDto(MediaAsset asset, List<MediaVariant> variants, List<MediaUsage> usages) {
+        AdminMediaAssetDto dto = new AdminMediaAssetDto();
+        dto.setId(asset.getId());
+        dto.setOriginalFilename(asset.getOriginalFilename());
+        dto.setStorageKey(asset.getStorageKey());
+        dto.setMimeType(asset.getMimeType());
+        dto.setFileSizeBytes(asset.getFileSizeBytes());
+        dto.setSha256Hex(asset.getSha256Hex());
+        dto.setWidthPx(asset.getWidthPx());
+        dto.setHeightPx(asset.getHeightPx());
+        dto.setStatus(asset.getStatus());
+        dto.setVisibility(asset.getVisibility());
+        dto.setTitle(asset.getTitle());
+        dto.setAltText(asset.getAltText());
+        dto.setCreatedAt(asset.getCreatedAt());
+        dto.setUpdatedAt(asset.getUpdatedAt());
+        dto.setVariants(variants.stream().map(variant -> toVariantDto(asset, variant)).toList());
+        dto.setUsages(usages.stream().map(this::toUsageDto).toList());
+        return dto;
+    }
+
+    private AdminMediaVariantDto toVariantDto(MediaAsset asset, MediaVariant variant) {
+        AdminMediaVariantDto dto = new AdminMediaVariantDto();
+        dto.setId(variant.getId());
+        dto.setVariantName(variant.getVariantName());
+        dto.setFormat(variant.getFormat());
+        dto.setStorageKey(variant.getStorageKey());
+        dto.setMimeType(variant.getMimeType());
+        dto.setWidthPx(variant.getWidthPx());
+        dto.setHeightPx(variant.getHeightPx());
+        dto.setFileSizeBytes(variant.getFileSizeBytes());
+        dto.setIsGenerated(variant.getIsGenerated());
+        dto.setCreatedAt(variant.getCreatedAt());
+        if (VISIBILITY_PUBLIC.equals(asset.getVisibility()) && !FORMAT_ORIGINAL.equals(variant.getFormat())) {
+            dto.setPublicUrl(mediaStorageService.buildPublicUrl(variant.getStorageKey()));
+        }
+        return dto;
+    }
+
+    private AdminMediaUsageDto toUsageDto(MediaUsage usage) {
+        AdminMediaUsageDto dto = new AdminMediaUsageDto();
+        dto.setId(usage.getId());
+        dto.setUsageType(usage.getUsageType());
+        dto.setUsageKey(usage.getUsageKey());
+        dto.setOwnerId(usage.getOwnerId());
+        dto.setMediaAssetId(usage.getMediaAsset().getId());
+        dto.setSortOrder(usage.getSortOrder());
+        dto.setIsPrimary(usage.getIsPrimary());
+        dto.setIsActive(usage.getIsActive());
+        dto.setTranslations(extractTranslations(usage));
+        dto.setCreatedAt(usage.getCreatedAt());
+        return dto;
+    }
+
+    private int compareVariants(MediaVariant left, MediaVariant right) {
+        return Comparator
+                .comparingInt((MediaVariant variant) -> variantNameOrder(variant.getVariantName()))
+                .thenComparingInt(variant -> formatOrder(variant.getFormat()))
+                .thenComparing(MediaVariant::getCreatedAt, Comparator.nullsLast(OffsetDateTime::compareTo))
+                .compare(left, right);
+    }
+
+    private int variantNameOrder(String variantName) {
+        if ("original".equalsIgnoreCase(variantName)) {
+            return 0;
+        }
+        if ("thumb".equalsIgnoreCase(variantName)) {
+            return 10;
+        }
+        if ("card".equalsIgnoreCase(variantName)) {
+            return 20;
+        }
+        if ("hero".equalsIgnoreCase(variantName)) {
+            return 30;
+        }
+        return 100;
+    }
+
+    private int formatOrder(String format) {
+        return switch (format) {
+            case FORMAT_ORIGINAL -> 0;
+            case FORMAT_JPEG -> 10;
+            case FORMAT_WEBP -> 20;
+            case FORMAT_AVIF -> 30;
+            default -> 100;
+        };
+    }
+
+    private MediaAsset getAssetOrThrow(UUID mediaAssetId) {
+        if (mediaAssetId == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Media asset id is required.");
+        }
+        return mediaAssetRepository.findById(mediaAssetId)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Media asset not found."));
+    }
+
+    private MediaUsage getUsageOrThrow(UUID mediaUsageId) {
+        return mediaUsageRepository.findById(mediaUsageId)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Media usage not found."));
+    }
+
+    private void validateUpload(MultipartFile file) {
+        if (file == null || file.isEmpty()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Image file is required.");
+        }
+        if (file.getSize() < 0 || file.getSize() > maxUploadFileSizeBytes) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Image file exceeds the maximum allowed size.");
+        }
+    }
+
+    private String requireUsageType(String usageType) {
+        if (usageType == null || usageType.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "usageType is required.");
+        }
+        return usageType.trim().toUpperCase(Locale.ROOT);
+    }
+
+    private String requireUsageKey(String usageKey) {
+        if (usageKey == null || usageKey.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "usageKey is required.");
+        }
+        return usageKey.trim();
+    }
+
+    private String normalizeVisibility(String visibility, boolean defaultPublic) {
+        if (visibility == null) {
+            return defaultPublic ? VISIBILITY_PUBLIC : null;
+        }
+        String normalized = visibility.trim().toUpperCase(Locale.ROOT);
+        if (normalized.isBlank()) {
+            return defaultPublic ? VISIBILITY_PUBLIC : null;
+        }
+        if (!ALLOWED_VISIBILITIES.contains(normalized)) {
+            throw new ResponseStatusException(
+                    HttpStatus.BAD_REQUEST,
+                    "Invalid visibility. Allowed: " + String.join(", ", new LinkedHashSet<>(ALLOWED_VISIBILITIES))
+            );
+        }
+        return normalized;
+    }
+
+    private String normalizeStatus(String status, boolean required) {
+        if (status == null) {
+            if (required) {
+                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Status is required.");
+            }
+            return null;
+        }
+        String normalized = status.trim().toUpperCase(Locale.ROOT);
+        if (normalized.isBlank()) {
+            if (required) {
+                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Status is required.");
+            }
+            return null;
+        }
+        if (!ALLOWED_STATUSES.contains(normalized)) {
+            throw new ResponseStatusException(
+                    HttpStatus.BAD_REQUEST,
+                    "Invalid status. Allowed: " + String.join(", ", new LinkedHashSet<>(ALLOWED_STATUSES))
+            );
+        }
+        return normalized;
+    }
+
+    private Map<String, MediaTextTranslationDto> requireTranslations(Map<String, MediaTextTranslationDto> translations) {
+        if (translations == null || translations.isEmpty()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "translations are required.");
+        }
+
+        Map<String, MediaTextTranslationDto> normalized = new LinkedHashMap<>();
+        for (Map.Entry<String, MediaTextTranslationDto> entry : translations.entrySet()) {
+            String language = normalizeTranslationLanguage(entry.getKey());
+            if (normalized.containsKey(language)) {
+                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Duplicate translation language: " + language + ".");
+            }
+            normalized.put(language, entry.getValue());
+        }
+
+        if (!normalized.keySet().equals(new LinkedHashSet<>(SUPPORTED_MEDIA_LANGUAGES))) {
+            throw new ResponseStatusException(
+                    HttpStatus.BAD_REQUEST,
+                    "translations must include exactly: " + String.join(", ", SUPPORTED_MEDIA_LANGUAGES) + "."
+            );
+        }
+
+        LinkedHashMap<String, MediaTextTranslationDto> result = new LinkedHashMap<>();
+        for (String language : SUPPORTED_MEDIA_LANGUAGES) {
+            MediaTextTranslationDto translation = normalized.get(language);
+            if (translation == null) {
+                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Missing translation for language " + language + ".");
+            }
+
+            String title = normalizeRequiredTranslationValue(translation.getTitle(), language, "title");
+            String altText = normalizeRequiredTranslationValue(translation.getAltText(), language, "altText");
+
+            MediaTextTranslationDto dto = new MediaTextTranslationDto();
+            dto.setTitle(title);
+            dto.setAltText(altText);
+            result.put(language, dto);
+        }
+        return result;
+    }
+
+    private String normalizeTranslationLanguage(String language) {
+        if (language == null || language.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Translation language is required.");
+        }
+        String normalized = language.trim().toLowerCase(Locale.ROOT);
+        if (!SUPPORTED_MEDIA_LANGUAGES.contains(normalized)) {
+            throw new ResponseStatusException(
+                    HttpStatus.BAD_REQUEST,
+                    "Unsupported translation language: " + normalized + "."
+            );
+        }
+        return normalized;
+    }
+
+    private String normalizeRequiredTranslationValue(String value, String language, String fieldName) {
+        String normalized = normalizeText(value);
+        if (normalized == null || normalized.isBlank()) {
+            throw new ResponseStatusException(
+                    HttpStatus.BAD_REQUEST,
+                    "Translation " + fieldName + " is required for language " + language + "."
+            );
+        }
+        return normalized;
+    }
+
+    private void applyTranslations(MediaUsage usage, Map<String, MediaTextTranslationDto> translations) {
+        for (String language : SUPPORTED_MEDIA_LANGUAGES) {
+            MediaTextTranslationDto translation = translations.get(language);
+            usage.setTitleForLanguage(language, translation.getTitle());
+            usage.setAltTextForLanguage(language, translation.getAltText());
+        }
+    }
+
+    private Map<String, MediaTextTranslationDto> extractTranslations(MediaUsage usage) {
+        LinkedHashMap<String, MediaTextTranslationDto> translations = new LinkedHashMap<>();
+        String fallbackTitle = usage.getMediaAsset() != null ? usage.getMediaAsset().getTitle() : null;
+        String fallbackAltText = usage.getMediaAsset() != null ? usage.getMediaAsset().getAltText() : null;
+
+        for (String language : SUPPORTED_MEDIA_LANGUAGES) {
+            MediaTextTranslationDto dto = new MediaTextTranslationDto();
+            dto.setTitle(firstNonBlank(usage.getTitleForLanguage(language), fallbackTitle));
+            dto.setAltText(firstNonBlank(usage.getAltTextForLanguage(language), fallbackAltText));
+            translations.put(language, dto);
+        }
+        return translations;
+    }
+
+    private String firstNonBlank(String preferred, String fallback) {
+        return StringUtils.hasText(preferred) ? preferred : normalizeText(fallback);
+    }
+
+    private String normalizeText(String value) {
+        if (value == null) {
+            return null;
+        }
+        String normalized = value.trim();
+        return normalized.isBlank() ? null : normalized;
+    }
+
+    private String sanitizeOriginalFilename(String originalFilename, String extension) {
+        String cleaned = StringUtils.cleanPath(originalFilename == null ? "" : originalFilename);
+        int separatorIndex = Math.max(cleaned.lastIndexOf('/'), cleaned.lastIndexOf('\\'));
+        String basename = separatorIndex >= 0 ? cleaned.substring(separatorIndex + 1) : cleaned;
+        basename = basename.replace("\r", "_").replace("\n", "_");
+        if (basename.isBlank()) {
+            return "upload." + extension;
+        }
+        return basename;
+    }
+
+    private String buildStorageFolder() {
+        return STORAGE_FOLDER_FORMATTER.format(LocalDate.now()) + "/" + UUID.randomUUID();
+    }
+
+    private String extractStorageFolder(String originalStorageKey) {
+        Path path = Paths.get(originalStorageKey).normalize();
+        Path parent = path.getParent();
+        if (parent == null) {
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Invalid media storage key.");
+        }
+        return parent.toString().replace('\\', '/');
+    }
+
+    private VariantDimensions computeVariantDimensions(Integer widthPx, Integer heightPx, int maxDimension) {
+        if (widthPx == null || heightPx == null || widthPx <= 0 || heightPx <= 0) {
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Invalid image dimensions.");
+        }
+        double scale = Math.min(1.0d, (double) maxDimension / Math.max(widthPx, heightPx));
+        int targetWidth = Math.max(1, (int) Math.round(widthPx * scale));
+        int targetHeight = Math.max(1, (int) Math.round(heightPx * scale));
+        return new VariantDimensions(targetWidth, targetHeight);
+    }
+
+    private String computeSha256(Path file) throws IOException {
+        MessageDigest digest;
+        try {
+            digest = MessageDigest.getInstance("SHA-256");
+        } catch (NoSuchAlgorithmException e) {
+            throw new IllegalStateException("SHA-256 not available.", e);
+        }
+
+        try (InputStream inputStream = Files.newInputStream(file)) {
+            byte[] buffer = new byte[8192];
+            int read;
+            while ((read = inputStream.read(buffer)) >= 0) {
+                digest.update(buffer, 0, read);
+            }
+        }
+        return HexFormat.of().formatHex(digest.digest());
+    }
+
+    private void markFailed(MediaAsset asset, String message, Exception exception) {
+        if (asset == null || asset.getId() == null) {
+            logger.warn("Media upload failed before asset persistence: {}", message, exception);
+            return;
+        }
+        asset.setStatus(STATUS_FAILED);
+        asset.setUpdatedAt(OffsetDateTime.now());
+        mediaAssetRepository.save(asset);
+        logger.warn("Media asset {} marked as FAILED: {}", asset.getId(), message, exception);
+    }
+
+    private void deleteRecursively(Path directory) {
+        if (directory == null || !Files.exists(directory)) {
+            return;
+        }
+        try (var walk = Files.walk(directory)) {
+            walk.sorted(Comparator.reverseOrder()).forEach(path -> {
+                try {
+                    Files.deleteIfExists(path);
+                } catch (IOException e) {
+                    throw new UncheckedIOException(e);
+                }
+            });
+        } catch (IOException e) {
+            logger.warn("Failed to clean temporary media directory {}", directory, e);
+        } catch (UncheckedIOException e) {
+            logger.warn("Failed to clean temporary media directory {}", directory, e);
+        }
+    }
+
+    private record PresetDefinition(String name, int maxDimension) {
+    }
+
+    private record VariantDimensions(int widthPx, int heightPx) {
+    }
+
+    private record PendingGeneratedVariant(MediaVariant variant, Path file) {
+    }
+}

backend/src/main/java/com/printcalculator/service/media/MediaFfmpegService.java

@@ -0,0 +1,276 @@
+package com.printcalculator.service.media;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.InvalidPathException;
+import java.nio.file.Path;
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Set;
+
+@Service
+public class MediaFfmpegService {
+
+    private static final Logger logger = LoggerFactory.getLogger(MediaFfmpegService.class);
+
+    private static final Map<String, List<String>> ENCODER_CANDIDATES = Map.of(
+            "JPEG", List.of("mjpeg"),
+            "WEBP", List.of("libwebp", "webp"),
+            "AVIF", List.of("libaom-av1", "librav1e", "libsvtav1")
+    );
+
+    private final String ffmpegExecutable;
+    private final Set<String> availableEncoders;
+
+    public MediaFfmpegService(@Value("${media.ffmpeg.path:ffmpeg}") String ffmpegPath) {
+        this.ffmpegExecutable = resolveExecutable(ffmpegPath);
+        this.availableEncoders = Collections.unmodifiableSet(loadAvailableEncoders());
+    }
+
+    public void generateVariant(Path source, Path target, int widthPx, int heightPx, String format) throws IOException {
+        if (widthPx <= 0 || heightPx <= 0) {
+            throw new IllegalArgumentException("Variant dimensions must be positive.");
+        }
+
+        Path sourcePath = sanitizeMediaPath(source, "source", true);
+        Path targetPath = sanitizeMediaPath(target, "target", false);
+        Files.createDirectories(targetPath.getParent());
+
+        String encoder = resolveEncoder(format);
+        if (encoder == null) {
+            throw new IOException("FFmpeg encoder not available for media format " + format + ".");
+        }
+
+        List<String> command = new ArrayList<>();
+        command.add(ffmpegExecutable);
+        command.add("-y");
+        command.add("-hide_banner");
+        command.add("-loglevel");
+        command.add("error");
+        command.add("-i");
+        command.add(sourcePath.toString());
+        command.add("-vf");
+        command.add("scale=" + widthPx + ":" + heightPx + ":flags=lanczos,setsar=1");
+        command.add("-frames:v");
+        command.add("1");
+        command.add("-an");
+
+        switch (format) {
+            case "JPEG" -> {
+                command.add("-c:v");
+                command.add(encoder);
+                command.add("-q:v");
+                command.add("2");
+            }
+            case "WEBP" -> {
+                command.add("-c:v");
+                command.add(encoder);
+                command.add("-quality");
+                command.add("82");
+            }
+            case "AVIF" -> {
+                command.add("-c:v");
+                command.add(encoder);
+                command.add("-still-picture");
+                command.add("1");
+                command.add("-crf");
+                command.add("30");
+                command.add("-b:v");
+                command.add("0");
+            }
+            default -> throw new IllegalArgumentException("Unsupported media format: " + format);
+        }
+
+        command.add(targetPath.toString());
+
+        Process process = startValidatedProcess(command);
+        String output;
+        try (InputStream processStream = process.getInputStream()) {
+            output = new String(processStream.readAllBytes(), StandardCharsets.UTF_8);
+        }
+
+        int exitCode;
+        try {
+            exitCode = process.waitFor();
+        } catch (InterruptedException e) {
+            Thread.currentThread().interrupt();
+            throw new IOException("FFmpeg execution interrupted.", e);
+        }
+
+        if (exitCode != 0 || !Files.exists(targetPath) || Files.size(targetPath) == 0) {
+            throw new IOException("FFmpeg failed to generate media variant. " + truncate(output));
+        }
+    }
+
+    public boolean canEncode(String format) {
+        return resolveEncoder(format) != null;
+    }
+
+    private String resolveEncoder(String format) {
+        if (format == null) {
+            return null;
+        }
+        List<String> candidates = ENCODER_CANDIDATES.get(format.trim().toUpperCase(Locale.ROOT));
+        if (candidates == null) {
+            return null;
+        }
+        return candidates.stream()
+                .filter(availableEncoders::contains)
+                .findFirst()
+                .orElse(null);
+    }
+
+    private Set<String> loadAvailableEncoders() {
+        List<String> command = List.of(ffmpegExecutable, "-hide_banner", "-encoders");
+        try {
+            Process process = startValidatedProcess(command);
+            String output;
+            try (InputStream processStream = process.getInputStream()) {
+                output = new String(processStream.readAllBytes(), StandardCharsets.UTF_8);
+            }
+
+            int exitCode = process.waitFor();
+            if (exitCode != 0) {
+                logger.warn("Unable to inspect FFmpeg encoders. Falling back to empty encoder list.");
+                return Set.of();
+            }
+            return parseAvailableEncoders(output);
+        } catch (Exception e) {
+            logger.warn(
+                    "Unable to inspect FFmpeg encoders for executable '{}'. Falling back to empty encoder list. {}",
+                    ffmpegExecutable,
+                    e.getMessage()
+            );
+            return Set.of();
+        }
+    }
+
+    private Process startValidatedProcess(List<String> command) throws IOException {
+        // nosemgrep: java.lang.security.audit.command-injection-process-builder.command-injection-process-builder
+        return new ProcessBuilder(List.copyOf(command))
+                .redirectErrorStream(true)
+                .start();
+    }
+
+    static String sanitizeExecutable(String configuredExecutable) {
+        if (configuredExecutable == null) {
+            throw new IllegalArgumentException("media.ffmpeg.path must not be null.");
+        }
+
+        String candidate = configuredExecutable.trim();
+        if (candidate.isEmpty()) {
+            throw new IllegalArgumentException("media.ffmpeg.path must point to an FFmpeg executable.");
+        }
+        if (candidate.chars().anyMatch(Character::isISOControl)) {
+            throw new IllegalArgumentException("media.ffmpeg.path contains control characters.");
+        }
+
+        try {
+            Path executablePath = Path.of(candidate);
+            Path filename = executablePath.getFileName();
+            String executableName = filename == null ? candidate : filename.toString();
+            if (executableName.isBlank() || executableName.startsWith("-")) {
+                throw new IllegalArgumentException("media.ffmpeg.path must be an executable path, not an option.");
+            }
+
+            return executablePath.normalize().toString();
+        } catch (InvalidPathException e) {
+            throw new IllegalArgumentException("media.ffmpeg.path is not a valid executable path.", e);
+        }
+    }
+
+    static String resolveExecutable(String configuredExecutable) {
+        String candidate = sanitizeExecutable(configuredExecutable);
+
+        try {
+            Path configuredPath = Path.of(candidate);
+            if (!configuredPath.isAbsolute()) {
+                return candidate;
+            }
+            if (Files.isExecutable(configuredPath)) {
+                return configuredPath.toString();
+            }
+
+            Path filename = configuredPath.getFileName();
+            String fallbackExecutable = filename == null ? null : filename.toString();
+            if (fallbackExecutable != null && !fallbackExecutable.isBlank()) {
+                logger.warn(
+                        "Configured FFmpeg executable '{}' not found or not executable. Falling back to '{}' from PATH.",
+                        configuredPath,
+                        fallbackExecutable
+                );
+                return fallbackExecutable;
+            }
+            return candidate;
+        } catch (InvalidPathException e) {
+            throw new IllegalArgumentException("media.ffmpeg.path is not a valid executable path.", e);
+        }
+    }
+
+    private Path sanitizeMediaPath(Path path, String label, boolean requireExistingFile) throws IOException {
+        if (path == null) {
+            throw new IllegalArgumentException("Media " + label + " path is required.");
+        }
+
+        Path normalized = path.toAbsolutePath().normalize();
+        Path filename = normalized.getFileName();
+        if (filename == null || filename.toString().isBlank()) {
+            throw new IOException("Media " + label + " path must include a file name.");
+        }
+        if (filename.toString().startsWith("-")) {
+            throw new IOException("Media " + label + " file name must not start with '-'.");
+        }
+
+        if (requireExistingFile) {
+            if (!Files.isRegularFile(normalized) || !Files.isReadable(normalized)) {
+                throw new IOException("Media " + label + " file is not readable.");
+            }
+        } else if (normalized.getParent() == null) {
+            throw new IOException("Media " + label + " path must include a parent directory.");
+        }
+
+        return normalized;
+    }
+
+    private Set<String> parseAvailableEncoders(String output) {
+        if (output == null || output.isBlank()) {
+            return Set.of();
+        }
+
+        Set<String> encoders = new LinkedHashSet<>();
+        for (String line : output.split("\\R")) {
+            String trimmed = line.trim();
+            if (trimmed.isBlank() || trimmed.startsWith("--") || trimmed.startsWith("Encoders:")) {
+                continue;
+            }
+            if (trimmed.length() < 7) {
+                continue;
+            }
+            String[] parts = trimmed.split("\\s+", 3);
+            if (parts.length < 2) {
+                continue;
+            }
+            encoders.add(parts[1]);
+        }
+        return encoders;
+    }
+
+    private String truncate(String output) {
+        if (output == null || output.isBlank()) {
+            return "";
+        }
+        String normalized = output.trim().replace('\n', ' ');
+        return normalized.length() <= 300 ? normalized : normalized.substring(0, 300);
+    }
+}

backend/src/main/java/com/printcalculator/service/media/MediaImageInspector.java

@@ -0,0 +1,122 @@
+package com.printcalculator.service.media;
+
+import org.springframework.stereotype.Service;
+
+import javax.imageio.ImageIO;
+import java.awt.image.BufferedImage;
+import java.io.IOException;
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+@Service
+public class MediaImageInspector {
+
+    private static final byte[] PNG_SIGNATURE = new byte[]{
+            (byte) 0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A
+    };
+
+    public ImageMetadata inspect(Path file) throws IOException {
+        try (InputStream inputStream = Files.newInputStream(file)) {
+            byte[] header = inputStream.readNBytes(64);
+            if (isJpeg(header)) {
+                return readWithImageIo(file, "image/jpeg", "jpg");
+            }
+            if (isPng(header)) {
+                return readWithImageIo(file, "image/png", "png");
+            }
+            if (isWebp(header)) {
+                Dimensions dimensions = readWebpDimensions(header);
+                return new ImageMetadata("image/webp", "webp", dimensions.width(), dimensions.height());
+            }
+        }
+
+        throw new IllegalArgumentException("Unsupported image type. Allowed: jpg, jpeg, png, webp.");
+    }
+
+    private ImageMetadata readWithImageIo(Path file, String mimeType, String extension) throws IOException {
+        BufferedImage image = ImageIO.read(file.toFile());
+        if (image == null || image.getWidth() <= 0 || image.getHeight() <= 0) {
+            throw new IllegalArgumentException("Uploaded image is invalid or unreadable.");
+        }
+        return new ImageMetadata(mimeType, extension, image.getWidth(), image.getHeight());
+    }
+
+    private boolean isJpeg(byte[] header) {
+        return header.length >= 3
+                && (header[0] & 0xFF) == 0xFF
+                && (header[1] & 0xFF) == 0xD8
+                && (header[2] & 0xFF) == 0xFF;
+    }
+
+    private boolean isPng(byte[] header) {
+        if (header.length < PNG_SIGNATURE.length) {
+            return false;
+        }
+        for (int i = 0; i < PNG_SIGNATURE.length; i++) {
+            if (header[i] != PNG_SIGNATURE[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private boolean isWebp(byte[] header) {
+        return header.length >= 16
+                && "RIFF".equals(ascii(header, 0, 4))
+                && "WEBP".equals(ascii(header, 8, 4));
+    }
+
+    private Dimensions readWebpDimensions(byte[] header) {
+        if (header.length < 30) {
+            throw new IllegalArgumentException("Uploaded WebP image is invalid.");
+        }
+
+        String chunkType = ascii(header, 12, 4);
+        return switch (chunkType) {
+            case "VP8X" -> new Dimensions(
+                    littleEndian24(header, 24) + 1,
+                    littleEndian24(header, 27) + 1
+            );
+            case "VP8 " -> new Dimensions(
+                    littleEndian16(header, 26) & 0x3FFF,
+                    littleEndian16(header, 28) & 0x3FFF
+            );
+            case "VP8L" -> {
+                int packed = littleEndian32(header, 21);
+                int width = (packed & 0x3FFF) + 1;
+                int height = ((packed >> 14) & 0x3FFF) + 1;
+                yield new Dimensions(width, height);
+            }
+            default -> throw new IllegalArgumentException("Uploaded WebP image is invalid.");
+        };
+    }
+
+    private String ascii(byte[] header, int offset, int length) {
+        return new String(header, offset, length, StandardCharsets.US_ASCII);
+    }
+
+    private int littleEndian16(byte[] header, int offset) {
+        return (header[offset] & 0xFF) | ((header[offset + 1] & 0xFF) << 8);
+    }
+
+    private int littleEndian24(byte[] header, int offset) {
+        return (header[offset] & 0xFF)
+                | ((header[offset + 1] & 0xFF) << 8)
+                | ((header[offset + 2] & 0xFF) << 16);
+    }
+
+    private int littleEndian32(byte[] header, int offset) {
+        return (header[offset] & 0xFF)
+                | ((header[offset + 1] & 0xFF) << 8)
+                | ((header[offset + 2] & 0xFF) << 16)
+                | ((header[offset + 3] & 0xFF) << 24);
+    }
+
+    private record Dimensions(int width, int height) {
+    }
+
+    public record ImageMetadata(String mimeType, String fileExtension, int widthPx, int heightPx) {
+    }
+}

backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java

@@ -0,0 +1,130 @@
+package com.printcalculator.service.media;
+
+import com.printcalculator.exception.StorageException;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Service;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.nio.file.Paths;
+import java.nio.file.StandardCopyOption;
+import java.util.Locale;
+
+@Service
+public class MediaStorageService {
+
+    private final Path normalizedRootLocation;
+    private final Path originalRootLocation;
+    private final Path publicRootLocation;
+    private final Path privateRootLocation;
+    private final String publicBaseUrl;
+
+    public MediaStorageService(@Value("${media.storage.root:storage_media}") String storageRoot,
+                               @Value("${media.public.base-url:http://localhost:8080/media}") String publicBaseUrl) {
+        this.normalizedRootLocation = Paths.get(storageRoot).toAbsolutePath().normalize();
+        this.originalRootLocation = normalizedRootLocation.resolve("original").normalize();
+        this.publicRootLocation = normalizedRootLocation.resolve("public").normalize();
+        this.privateRootLocation = normalizedRootLocation.resolve("private").normalize();
+        this.publicBaseUrl = publicBaseUrl;
+        init();
+    }
+
+    public void init() {
+        try {
+            Files.createDirectories(originalRootLocation);
+            Files.createDirectories(publicRootLocation);
+            Files.createDirectories(privateRootLocation);
+        } catch (IOException e) {
+            throw new StorageException("Could not initialize media storage.", e);
+        }
+    }
+
+    public void storeOriginal(Path source, String storageKey) throws IOException {
+        copy(source, resolveOriginal(storageKey));
+    }
+
+    public void storePublic(Path source, String storageKey) throws IOException {
+        copy(source, resolvePublic(storageKey));
+    }
+
+    public void storePrivate(Path source, String storageKey) throws IOException {
+        copy(source, resolvePrivate(storageKey));
+    }
+
+    public void deleteGenerated(String visibility, String storageKey) throws IOException {
+        Files.deleteIfExists(resolve(resolveVariantRoot(normalizeVisibility(visibility)), storageKey));
+    }
+
+    public void moveGenerated(String storageKey, String fromVisibility, String toVisibility) throws IOException {
+        String normalizedFrom = normalizeVisibility(fromVisibility);
+        String normalizedTo = normalizeVisibility(toVisibility);
+        if (normalizedFrom.equals(normalizedTo)) {
+            return;
+        }
+
+        Path source = resolve(resolveVariantRoot(normalizedFrom), storageKey);
+        Path target = resolve(resolveVariantRoot(normalizedTo), storageKey);
+        Files.createDirectories(target.getParent());
+        Files.move(source, target, StandardCopyOption.REPLACE_EXISTING);
+    }
+
+    public String buildPublicUrl(String storageKey) {
+        if (storageKey == null || storageKey.isBlank()) {
+            return null;
+        }
+        String normalizedKey = storageKey.startsWith("/") ? storageKey.substring(1) : storageKey;
+        if (publicBaseUrl.endsWith("/")) {
+            return publicBaseUrl + normalizedKey;
+        }
+        return publicBaseUrl + "/" + normalizedKey;
+    }
+
+    private void copy(Path source, Path destination) throws IOException {
+        Files.createDirectories(destination.getParent());
+        Files.copy(source, destination, StandardCopyOption.REPLACE_EXISTING);
+    }
+
+    private Path resolveOriginal(String storageKey) {
+        return resolve(originalRootLocation, storageKey);
+    }
+
+    private Path resolvePublic(String storageKey) {
+        return resolve(publicRootLocation, storageKey);
+    }
+
+    private Path resolvePrivate(String storageKey) {
+        return resolve(privateRootLocation, storageKey);
+    }
+
+    private Path resolveVariantRoot(String visibility) {
+        return switch (visibility) {
+            case "PUBLIC" -> publicRootLocation;
+            case "PRIVATE" -> privateRootLocation;
+            default -> throw new StorageException("Unsupported media visibility: " + visibility);
+        };
+    }
+
+    private Path resolve(Path baseRoot, String storageKey) {
+        if (storageKey == null || storageKey.isBlank()) {
+            throw new StorageException("Storage key is required.");
+        }
+        Path relativePath = Paths.get(storageKey).normalize();
+        if (relativePath.isAbsolute()) {
+            throw new StorageException("Absolute paths are not allowed.");
+        }
+
+        Path resolved = baseRoot.resolve(relativePath).normalize();
+        if (!resolved.startsWith(baseRoot)) {
+            throw new StorageException("Cannot access files outside media storage root.");
+        }
+        return resolved;
+    }
+
+    private String normalizeVisibility(String visibility) {
+        if (visibility == null || visibility.isBlank()) {
+            throw new StorageException("Visibility is required.");
+        }
+        return visibility.trim().toUpperCase(Locale.ROOT);
+    }
+}

backend/src/main/java/com/printcalculator/service/media/PublicMediaQueryService.java

@@ -0,0 +1,170 @@
+package com.printcalculator.service.media;
+
+import com.printcalculator.dto.PublicMediaUsageDto;
+import com.printcalculator.dto.PublicMediaVariantDto;
+import com.printcalculator.entity.MediaAsset;
+import com.printcalculator.entity.MediaUsage;
+import com.printcalculator.entity.MediaVariant;
+import com.printcalculator.repository.MediaUsageRepository;
+import com.printcalculator.repository.MediaVariantRepository;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.time.OffsetDateTime;
+import java.util.Comparator;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Objects;
+import java.util.UUID;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional(readOnly = true)
+public class PublicMediaQueryService {
+
+    private static final String STATUS_READY = "READY";
+    private static final String VISIBILITY_PUBLIC = "PUBLIC";
+    private static final String FORMAT_JPEG = "JPEG";
+    private static final String FORMAT_WEBP = "WEBP";
+    private static final String FORMAT_AVIF = "AVIF";
+    private static final List<String> SUPPORTED_MEDIA_LANGUAGES = List.of("it", "en", "de", "fr");
+
+    private final MediaUsageRepository mediaUsageRepository;
+    private final MediaVariantRepository mediaVariantRepository;
+    private final MediaStorageService mediaStorageService;
+
+    public PublicMediaQueryService(MediaUsageRepository mediaUsageRepository,
+                                   MediaVariantRepository mediaVariantRepository,
+                                   MediaStorageService mediaStorageService) {
+        this.mediaUsageRepository = mediaUsageRepository;
+        this.mediaVariantRepository = mediaVariantRepository;
+        this.mediaStorageService = mediaStorageService;
+    }
+
+    public List<PublicMediaUsageDto> getUsageMedia(String usageType, String usageKey, String language) {
+        String normalizedUsageType = normalizeUsageType(usageType);
+        String normalizedUsageKey = normalizeUsageKey(usageKey);
+        String normalizedLanguage = normalizeLanguage(language);
+
+        List<MediaUsage> usages = mediaUsageRepository
+                .findByUsageTypeAndUsageKeyAndIsActiveTrueOrderBySortOrderAscCreatedAtAsc(
+                        normalizedUsageType,
+                        normalizedUsageKey
+                )
+                .stream()
+                .filter(this::isPublicReadyUsage)
+                .sorted(Comparator
+                        .comparing(MediaUsage::getSortOrder, Comparator.nullsLast(Integer::compareTo))
+                        .thenComparing(MediaUsage::getCreatedAt, Comparator.nullsLast(OffsetDateTime::compareTo)))
+                .toList();
+
+        if (usages.isEmpty()) {
+            return List.of();
+        }
+
+        List<UUID> assetIds = usages.stream()
+                .map(MediaUsage::getMediaAsset)
+                .filter(Objects::nonNull)
+                .map(MediaAsset::getId)
+                .filter(Objects::nonNull)
+                .distinct()
+                .toList();
+
+        Map<UUID, List<MediaVariant>> variantsByAssetId = mediaVariantRepository.findByMediaAsset_IdIn(assetIds)
+                .stream()
+                .filter(variant -> !Objects.equals("ORIGINAL", variant.getFormat()))
+                .collect(Collectors.groupingBy(variant -> variant.getMediaAsset().getId()));
+
+        return usages.stream()
+                .map(usage -> toDto(
+                        usage,
+                        variantsByAssetId.getOrDefault(usage.getMediaAsset().getId(), List.of()),
+                        normalizedLanguage
+                ))
+                .toList();
+    }
+
+    private boolean isPublicReadyUsage(MediaUsage usage) {
+        MediaAsset asset = usage.getMediaAsset();
+        return asset != null
+                && STATUS_READY.equals(asset.getStatus())
+                && VISIBILITY_PUBLIC.equals(asset.getVisibility());
+    }
+
+    private PublicMediaUsageDto toDto(MediaUsage usage, List<MediaVariant> variants, String language) {
+        Map<String, Map<String, MediaVariant>> variantsByPresetAndFormat = variants.stream()
+                .collect(Collectors.groupingBy(
+                        MediaVariant::getVariantName,
+                        Collectors.toMap(MediaVariant::getFormat, Function.identity(), (left, right) -> right)
+                ));
+
+        PublicMediaUsageDto dto = new PublicMediaUsageDto();
+        dto.setMediaAssetId(usage.getMediaAsset().getId());
+        dto.setTitle(resolveLocalizedValue(usage.getTitleForLanguage(language), usage.getMediaAsset().getTitle()));
+        dto.setAltText(resolveLocalizedValue(usage.getAltTextForLanguage(language), usage.getMediaAsset().getAltText()));
+        dto.setUsageType(usage.getUsageType());
+        dto.setUsageKey(usage.getUsageKey());
+        dto.setSortOrder(usage.getSortOrder());
+        dto.setIsPrimary(usage.getIsPrimary());
+        dto.setThumb(buildPresetDto(variantsByPresetAndFormat.get("thumb")));
+        dto.setCard(buildPresetDto(variantsByPresetAndFormat.get("card")));
+        dto.setHero(buildPresetDto(variantsByPresetAndFormat.get("hero")));
+        return dto;
+    }
+
+    private PublicMediaVariantDto buildPresetDto(Map<String, MediaVariant> variantsByFormat) {
+        PublicMediaVariantDto dto = new PublicMediaVariantDto();
+        if (variantsByFormat == null || variantsByFormat.isEmpty()) {
+            return dto;
+        }
+
+        dto.setAvifUrl(buildVariantUrl(variantsByFormat.get(FORMAT_AVIF)));
+        dto.setWebpUrl(buildVariantUrl(variantsByFormat.get(FORMAT_WEBP)));
+        dto.setJpegUrl(buildVariantUrl(variantsByFormat.get(FORMAT_JPEG)));
+        return dto;
+    }
+
+    private String buildVariantUrl(MediaVariant variant) {
+        if (variant == null || variant.getStorageKey() == null || variant.getStorageKey().isBlank()) {
+            return null;
+        }
+        return mediaStorageService.buildPublicUrl(variant.getStorageKey());
+    }
+
+    private String normalizeUsageType(String usageType) {
+        if (usageType == null || usageType.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "usageType is required.");
+        }
+        return usageType.trim().toUpperCase(Locale.ROOT);
+    }
+
+    private String normalizeUsageKey(String usageKey) {
+        if (usageKey == null || usageKey.isBlank()) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "usageKey is required.");
+        }
+        return usageKey.trim();
+    }
+
+    private String normalizeLanguage(String language) {
+        if (language == null || language.isBlank()) {
+            return "it";
+        }
+
+        String normalized = language.trim().toLowerCase(Locale.ROOT);
+        return SUPPORTED_MEDIA_LANGUAGES.contains(normalized) ? normalized : "it";
+    }
+
+    private String resolveLocalizedValue(String preferred, String fallback) {
+        if (preferred != null && !preferred.isBlank()) {
+            return preferred;
+        }
+        if (fallback != null && !fallback.isBlank()) {
+            return fallback.trim();
+        }
+        return null;
+    }
+}

backend/src/main/resources/application-local.properties

@@ -3,6 +3,11 @@ app.mail.admin.enabled=false
 app.mail.contact-request.admin.enabled=false
 
 # Admin back-office local test credentials
-admin.password=local-admin-password
+admin.password=ciaociao
 admin.session.secret=local-session-secret-for-dev-only-000000000000000000000000
 admin.session.ttl-minutes=480
+
+# Local media storage served by a local static server on port 8081.
+media.storage.root=/Users/joe/IdeaProjects/print-calculator/storage_media
+media.public.base-url=http://localhost:8081
+media.ffmpeg.path=ffmpeg

backend/src/main/resources/application.properties

@@ -26,6 +26,12 @@ clamav.host=${CLAMAV_HOST:clamav}
 clamav.port=${CLAMAV_PORT:3310}
 clamav.enabled=${CLAMAV_ENABLED:false}
 
+# Media configuration
+media.storage.root=${MEDIA_STORAGE_ROOT:storage_media}
+media.public.base-url=${MEDIA_PUBLIC_BASE_URL:http://localhost:8080/media}
+media.ffmpeg.path=${MEDIA_FFMPEG_PATH:ffmpeg}
+media.upload.max-file-size-bytes=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:26214400}
+
 # TWINT Configuration
 payment.twint.url=${TWINT_PAYMENT_URL:https://go.twint.ch/1/e/tw?tw=acq.gERQQytOTnyIMuQHUqn4hlxgciHE5X7nnqHnNSPAr2OF2K3uBlXJDr2n9JU3sgxa.}
 

backend/src/test/java/com/printcalculator/service/admin/AdminMediaControllerServiceTest.java

@@ -0,0 +1,470 @@
+package com.printcalculator.service.admin;
+
+import com.printcalculator.dto.AdminCreateMediaUsageRequest;
+import com.printcalculator.dto.AdminMediaAssetDto;
+import com.printcalculator.dto.AdminMediaUsageDto;
+import com.printcalculator.dto.AdminUpdateMediaAssetRequest;
+import com.printcalculator.dto.MediaTextTranslationDto;
+import com.printcalculator.entity.MediaAsset;
+import com.printcalculator.entity.MediaUsage;
+import com.printcalculator.entity.MediaVariant;
+import com.printcalculator.repository.MediaAssetRepository;
+import com.printcalculator.repository.MediaUsageRepository;
+import com.printcalculator.repository.MediaVariantRepository;
+import com.printcalculator.service.media.MediaFfmpegService;
+import com.printcalculator.service.media.MediaImageInspector;
+import com.printcalculator.service.media.MediaStorageService;
+import com.printcalculator.service.storage.ClamAVService;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.junit.jupiter.api.io.TempDir;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+import org.mockito.junit.jupiter.MockitoSettings;
+import org.mockito.quality.Strictness;
+import org.springframework.http.HttpStatus;
+import org.springframework.mock.web.MockMultipartFile;
+import org.springframework.web.server.ResponseStatusException;
+
+import java.nio.charset.StandardCharsets;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import java.time.OffsetDateTime;
+import java.util.ArrayList;
+import java.util.Collection;
+import java.util.Comparator;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.anyCollection;
+import static org.mockito.ArgumentMatchers.anyInt;
+import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.ArgumentMatchers.nullable;
+import static org.mockito.Mockito.doAnswer;
+import static org.mockito.Mockito.verifyNoInteractions;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+@MockitoSettings(strictness = Strictness.LENIENT)
+class AdminMediaControllerServiceTest {
+
+    @Mock
+    private MediaAssetRepository mediaAssetRepository;
+    @Mock
+    private MediaVariantRepository mediaVariantRepository;
+    @Mock
+    private MediaUsageRepository mediaUsageRepository;
+    @Mock
+    private MediaImageInspector mediaImageInspector;
+    @Mock
+    private MediaFfmpegService mediaFfmpegService;
+    @Mock
+    private ClamAVService clamAVService;
+
+    @TempDir
+    Path tempDir;
+
+    private AdminMediaControllerService service;
+    private Path storageRoot;
+
+    private final Map<UUID, MediaAsset> assets = new LinkedHashMap<>();
+    private final Map<UUID, MediaVariant> variants = new LinkedHashMap<>();
+    private final Map<UUID, MediaUsage> usages = new LinkedHashMap<>();
+
+    @BeforeEach
+    void setUp() throws Exception {
+        storageRoot = tempDir.resolve("storage_media");
+        MediaStorageService mediaStorageService = new MediaStorageService(
+                storageRoot.toString(),
+                "https://cdn.example/media"
+        );
+
+        service = new AdminMediaControllerService(
+                mediaAssetRepository,
+                mediaVariantRepository,
+                mediaUsageRepository,
+                mediaStorageService,
+                mediaImageInspector,
+                mediaFfmpegService,
+                clamAVService,
+                1024 * 1024
+        );
+
+        when(clamAVService.scan(any())).thenReturn(true);
+        when(mediaFfmpegService.canEncode(anyString())).thenReturn(true);
+
+        when(mediaAssetRepository.save(any(MediaAsset.class))).thenAnswer(invocation -> {
+            MediaAsset asset = invocation.getArgument(0);
+            if (asset.getId() == null) {
+                asset.setId(UUID.randomUUID());
+            }
+            assets.put(asset.getId(), asset);
+            return asset;
+        });
+        when(mediaAssetRepository.findById(any(UUID.class))).thenAnswer(invocation ->
+                Optional.ofNullable(assets.get(invocation.getArgument(0)))
+        );
+        when(mediaAssetRepository.findAllByOrderByCreatedAtDesc()).thenAnswer(invocation -> assets.values().stream()
+                .sorted(Comparator.comparing(MediaAsset::getCreatedAt, Comparator.nullsLast(OffsetDateTime::compareTo)).reversed())
+                .toList());
+
+        when(mediaVariantRepository.save(any(MediaVariant.class))).thenAnswer(invocation -> persistVariant(invocation.getArgument(0)));
+        when(mediaVariantRepository.saveAll(any())).thenAnswer(invocation -> {
+            Iterable<MediaVariant> iterable = invocation.getArgument(0);
+            List<MediaVariant> saved = new ArrayList<>();
+            for (MediaVariant variant : iterable) {
+                saved.add(persistVariant(variant));
+            }
+            return saved;
+        });
+        when(mediaVariantRepository.findByMediaAsset_IdIn(anyCollection())).thenAnswer(invocation ->
+                variantsForAssets(invocation.getArgument(0))
+        );
+        when(mediaVariantRepository.findByMediaAsset_IdOrderByCreatedAtAsc(any(UUID.class))).thenAnswer(invocation ->
+                variants.values().stream()
+                        .filter(variant -> variant.getMediaAsset().getId().equals(invocation.getArgument(0)))
+                        .sorted(Comparator.comparing(MediaVariant::getCreatedAt, Comparator.nullsLast(OffsetDateTime::compareTo)))
+                        .toList()
+        );
+
+        when(mediaUsageRepository.save(any(MediaUsage.class))).thenAnswer(invocation -> persistUsage(invocation.getArgument(0)));
+        when(mediaUsageRepository.saveAll(any())).thenAnswer(invocation -> {
+            Iterable<MediaUsage> iterable = invocation.getArgument(0);
+            List<MediaUsage> saved = new ArrayList<>();
+            for (MediaUsage usage : iterable) {
+                saved.add(persistUsage(usage));
+            }
+            return saved;
+        });
+        when(mediaUsageRepository.findByMediaAsset_IdIn(anyCollection())).thenAnswer(invocation ->
+                usagesForAssets(invocation.getArgument(0))
+        );
+        when(mediaUsageRepository.findByUsageScope(anyString(), anyString(), nullable(UUID.class))).thenAnswer(invocation ->
+                usages.values().stream()
+                        .filter(usage -> usage.getUsageType().equals(invocation.getArgument(0)))
+                        .filter(usage -> usage.getUsageKey().equals(invocation.getArgument(1)))
+                        .filter(usage -> {
+                            UUID ownerId = invocation.getArgument(2);
+                            return ownerId == null ? usage.getOwnerId() == null : ownerId.equals(usage.getOwnerId());
+                        })
+                        .sorted(Comparator.comparing(MediaUsage::getSortOrder).thenComparing(MediaUsage::getCreatedAt))
+                        .toList()
+        );
+        when(mediaUsageRepository.findById(any(UUID.class))).thenAnswer(invocation ->
+                Optional.ofNullable(usages.get(invocation.getArgument(0)))
+        );
+
+        doAnswer(invocation -> {
+            Path outputFile = invocation.getArgument(1);
+            String format = invocation.getArgument(4);
+            Files.createDirectories(outputFile.getParent());
+            Files.writeString(outputFile, "generated-" + format, StandardCharsets.UTF_8);
+            return null;
+        }).when(mediaFfmpegService).generateVariant(any(Path.class), any(Path.class), anyInt(), anyInt(), anyString());
+    }
+
+    @Test
+    void uploadAsset_withValidImage_shouldPersistMetadataAndExposePublicUrls() throws Exception {
+        when(mediaImageInspector.inspect(any(Path.class))).thenReturn(
+                new MediaImageInspector.ImageMetadata("image/png", "png", 1600, 900)
+        );
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "landing-hero.png",
+                "image/png",
+                "png-image-content".getBytes(StandardCharsets.UTF_8)
+        );
+
+        AdminMediaAssetDto dto = service.uploadAsset(file, " Landing hero ", " Main headline ", null);
+
+        assertEquals("READY", dto.getStatus());
+        assertEquals("PUBLIC", dto.getVisibility());
+        assertEquals("landing-hero.png", dto.getOriginalFilename());
+        assertEquals("Landing hero", dto.getTitle());
+        assertEquals("Main headline", dto.getAltText());
+        assertEquals("image/png", dto.getMimeType());
+        assertEquals(1600, dto.getWidthPx());
+        assertEquals(900, dto.getHeightPx());
+        assertEquals(file.getSize(), dto.getFileSizeBytes());
+        assertEquals(64, dto.getSha256Hex().length());
+        assertEquals(10, dto.getVariants().size());
+
+        long publicVariants = dto.getVariants().stream()
+                .filter(variant -> !"ORIGINAL".equals(variant.getFormat()))
+                .count();
+        assertEquals(9, publicVariants);
+        assertTrue(dto.getVariants().stream()
+                .filter(variant -> "WEBP".equals(variant.getFormat()) && "hero".equals(variant.getVariantName()))
+                .allMatch(variant -> variant.getPublicUrl().startsWith("https://cdn.example/media/")));
+        assertTrue(dto.getVariants().stream()
+                .filter(variant -> "ORIGINAL".equals(variant.getFormat()))
+                .allMatch(variant -> variant.getPublicUrl() == null));
+
+        MediaVariant heroWebp = variants.values().stream()
+                .filter(variant -> "hero".equals(variant.getVariantName()))
+                .filter(variant -> "WEBP".equals(variant.getFormat()))
+                .findFirst()
+                .orElseThrow();
+        assertTrue(Files.exists(storageRoot.resolve("public").resolve(heroWebp.getStorageKey())));
+
+        MediaVariant originalVariant = variants.values().stream()
+                .filter(variant -> "ORIGINAL".equals(variant.getFormat()))
+                .findFirst()
+                .orElseThrow();
+        assertTrue(Files.exists(storageRoot.resolve("original").resolve(originalVariant.getStorageKey())));
+    }
+
+    @Test
+    void uploadAsset_withUnsupportedImageType_shouldReturnBadRequest() throws Exception {
+        when(mediaImageInspector.inspect(any(Path.class))).thenReturn(
+                new MediaImageInspector.ImageMetadata("image/svg+xml", "svg", 400, 400)
+        );
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "logo.svg",
+                "image/svg+xml",
+                "<svg/>".getBytes(StandardCharsets.UTF_8)
+        );
+
+        ResponseStatusException ex = assertThrows(
+                ResponseStatusException.class,
+                () -> service.uploadAsset(file, null, null, null)
+        );
+
+        assertEquals(HttpStatus.BAD_REQUEST, ex.getStatusCode());
+        assertTrue(assets.isEmpty());
+        assertTrue(variants.isEmpty());
+    }
+
+    @Test
+    void uploadAsset_withLimitedEncoders_shouldKeepAssetReadyAndExposeOnlySupportedVariants() throws Exception {
+        when(mediaImageInspector.inspect(any(Path.class))).thenReturn(
+                new MediaImageInspector.ImageMetadata("image/jpeg", "jpg", 1200, 800)
+        );
+        when(mediaFfmpegService.canEncode("JPEG")).thenReturn(true);
+        when(mediaFfmpegService.canEncode("WEBP")).thenReturn(false);
+        when(mediaFfmpegService.canEncode("AVIF")).thenReturn(false);
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "capability.jpg",
+                "image/jpeg",
+                "jpeg-image-content".getBytes(StandardCharsets.UTF_8)
+        );
+
+        AdminMediaAssetDto dto = service.uploadAsset(file, "Capability", null, "PUBLIC");
+
+        assertEquals("READY", dto.getStatus());
+        assertEquals(4, dto.getVariants().size());
+        assertEquals(3, dto.getVariants().stream()
+                .filter(variant -> "JPEG".equals(variant.getFormat()))
+                .count());
+        assertTrue(dto.getVariants().stream()
+                .noneMatch(variant -> "WEBP".equals(variant.getFormat()) || "AVIF".equals(variant.getFormat())));
+    }
+
+    @Test
+    void uploadAsset_withOversizedFile_shouldFailValidationBeforePersistence() {
+        service = new AdminMediaControllerService(
+                mediaAssetRepository,
+                mediaVariantRepository,
+                mediaUsageRepository,
+                new MediaStorageService(storageRoot.toString(), "https://cdn.example/media"),
+                mediaImageInspector,
+                mediaFfmpegService,
+                clamAVService,
+                4
+        );
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "big.png",
+                "image/png",
+                "12345".getBytes(StandardCharsets.UTF_8)
+        );
+
+        ResponseStatusException ex = assertThrows(
+                ResponseStatusException.class,
+                () -> service.uploadAsset(file, null, null, null)
+        );
+
+        assertEquals(HttpStatus.BAD_REQUEST, ex.getStatusCode());
+        verifyNoInteractions(mediaAssetRepository, mediaVariantRepository, mediaUsageRepository, mediaImageInspector, mediaFfmpegService);
+    }
+
+    @Test
+    void createUsage_withPrimaryFlag_shouldUnsetExistingPrimaryAndMapUsageOnAsset() {
+        MediaAsset asset = persistAsset(seedAsset("PUBLIC"));
+
+        MediaUsage existingPrimary = new MediaUsage();
+        existingPrimary.setId(UUID.randomUUID());
+        existingPrimary.setUsageType("HOME");
+        existingPrimary.setUsageKey("landing");
+        existingPrimary.setOwnerId(null);
+        existingPrimary.setMediaAsset(asset);
+        existingPrimary.setSortOrder(0);
+        existingPrimary.setIsPrimary(true);
+        existingPrimary.setIsActive(true);
+        existingPrimary.setCreatedAt(OffsetDateTime.now().minusDays(1));
+        persistUsage(existingPrimary);
+
+        AdminCreateMediaUsageRequest payload = new AdminCreateMediaUsageRequest();
+        payload.setUsageType("home");
+        payload.setUsageKey("landing");
+        payload.setMediaAssetId(asset.getId());
+        payload.setSortOrder(5);
+        payload.setIsPrimary(true);
+        payload.setTranslations(buildTranslations("Landing hero", "Hero home alt"));
+
+        AdminMediaUsageDto created = service.createUsage(payload);
+
+        assertEquals("HOME", created.getUsageType());
+        assertEquals("landing", created.getUsageKey());
+        assertEquals(asset.getId(), created.getMediaAssetId());
+        assertEquals(5, created.getSortOrder());
+        assertTrue(created.getIsPrimary());
+        assertEquals("Landing hero IT", created.getTranslations().get("it").getTitle());
+        assertEquals("Hero home alt EN", created.getTranslations().get("en").getAltText());
+        assertFalse(usages.get(existingPrimary.getId()).getIsPrimary());
+
+        AdminMediaAssetDto assetDto = service.getAsset(asset.getId());
+        assertEquals(2, assetDto.getUsages().size());
+        assertTrue(assetDto.getUsages().stream().anyMatch(usage -> usage.getId().equals(created.getId()) && usage.getIsPrimary()));
+    }
+
+    @Test
+    void createUsage_withoutAllTranslations_shouldFailValidation() {
+        MediaAsset asset = persistAsset(seedAsset("PUBLIC"));
+
+        AdminCreateMediaUsageRequest payload = new AdminCreateMediaUsageRequest();
+        payload.setUsageType("home");
+        payload.setUsageKey("landing");
+        payload.setMediaAssetId(asset.getId());
+        payload.setTranslations(new LinkedHashMap<>(Map.of(
+                "it", translation("Titolo IT", "Alt IT"),
+                "en", translation("Title EN", "Alt EN")
+        )));
+
+        ResponseStatusException ex = assertThrows(
+                ResponseStatusException.class,
+                () -> service.createUsage(payload)
+        );
+
+        assertEquals(HttpStatus.BAD_REQUEST, ex.getStatusCode());
+        assertTrue(ex.getReason().contains("translations must include exactly"));
+    }
+
+    @Test
+    void updateAsset_withPrivateVisibility_shouldMoveGeneratedFilesAndHidePublicUrls() throws Exception {
+        when(mediaImageInspector.inspect(any(Path.class))).thenReturn(
+                new MediaImageInspector.ImageMetadata("image/jpeg", "jpg", 1200, 800)
+        );
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "gallery.jpg",
+                "image/jpeg",
+                "jpeg-image-content".getBytes(StandardCharsets.UTF_8)
+        );
+
+        AdminMediaAssetDto uploaded = service.uploadAsset(file, null, null, "PUBLIC");
+        MediaVariant thumbJpeg = variants.values().stream()
+                .filter(variant -> "thumb".equals(variant.getVariantName()))
+                .filter(variant -> "JPEG".equals(variant.getFormat()))
+                .findFirst()
+                .orElseThrow();
+
+        Path publicFile = storageRoot.resolve("public").resolve(thumbJpeg.getStorageKey());
+        assertTrue(Files.exists(publicFile));
+
+        AdminUpdateMediaAssetRequest payload = new AdminUpdateMediaAssetRequest();
+        payload.setVisibility("PRIVATE");
+
+        AdminMediaAssetDto updated = service.updateAsset(uploaded.getId(), payload);
+
+        assertEquals("PRIVATE", updated.getVisibility());
+        assertFalse(Files.exists(publicFile));
+        assertTrue(Files.exists(storageRoot.resolve("private").resolve(thumbJpeg.getStorageKey())));
+        assertTrue(updated.getVariants().stream()
+                .filter(variant -> !"ORIGINAL".equals(variant.getFormat()))
+                .allMatch(variant -> variant.getPublicUrl() == null));
+    }
+
+    private MediaAsset seedAsset(String visibility) {
+        MediaAsset asset = new MediaAsset();
+        asset.setId(UUID.randomUUID());
+        asset.setOriginalFilename("asset.png");
+        asset.setStorageKey("2026/03/" + UUID.randomUUID() + "/original.png");
+        asset.setMimeType("image/png");
+        asset.setFileSizeBytes(123L);
+        asset.setSha256Hex("a".repeat(64));
+        asset.setWidthPx(1200);
+        asset.setHeightPx(800);
+        asset.setStatus("READY");
+        asset.setVisibility(visibility);
+        asset.setCreatedAt(OffsetDateTime.now());
+        asset.setUpdatedAt(OffsetDateTime.now());
+        return asset;
+    }
+
+    private MediaAsset persistAsset(MediaAsset asset) {
+        assets.put(asset.getId(), asset);
+        return asset;
+    }
+
+    private MediaVariant persistVariant(MediaVariant variant) {
+        if (variant.getId() == null) {
+            variant.setId(UUID.randomUUID());
+        }
+        variants.put(variant.getId(), variant);
+        return variant;
+    }
+
+    private MediaUsage persistUsage(MediaUsage usage) {
+        if (usage.getId() == null) {
+            usage.setId(UUID.randomUUID());
+        }
+        usages.put(usage.getId(), usage);
+        return usage;
+    }
+
+    private Map<String, MediaTextTranslationDto> buildTranslations(String titleBase, String altBase) {
+        LinkedHashMap<String, MediaTextTranslationDto> translations = new LinkedHashMap<>();
+        translations.put("it", translation(titleBase + " IT", altBase + " IT"));
+        translations.put("en", translation(titleBase + " EN", altBase + " EN"));
+        translations.put("de", translation(titleBase + " DE", altBase + " DE"));
+        translations.put("fr", translation(titleBase + " FR", altBase + " FR"));
+        return translations;
+    }
+
+    private MediaTextTranslationDto translation(String title, String altText) {
+        MediaTextTranslationDto dto = new MediaTextTranslationDto();
+        dto.setTitle(title);
+        dto.setAltText(altText);
+        return dto;
+    }
+
+    private List<MediaVariant> variantsForAssets(Collection<UUID> assetIds) {
+        return variants.values().stream()
+                .filter(variant -> assetIds.contains(variant.getMediaAsset().getId()))
+                .toList();
+    }
+
+    private List<MediaUsage> usagesForAssets(Collection<UUID> assetIds) {
+        return usages.values().stream()
+                .filter(usage -> assetIds.contains(usage.getMediaAsset().getId()))
+                .toList();
+    }
+}

backend/src/test/java/com/printcalculator/service/media/MediaFfmpegServiceTest.java

@@ -0,0 +1,64 @@
+package com.printcalculator.service.media;
+
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.io.TempDir;
+
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertThrows;
+
+class MediaFfmpegServiceTest {
+
+    @TempDir
+    Path tempDir;
+
+    @Test
+    void sanitizeExecutable_rejectsControlCharacters() {
+        IllegalArgumentException ex = assertThrows(
+                IllegalArgumentException.class,
+                () -> MediaFfmpegService.sanitizeExecutable("ffmpeg\n--help")
+        );
+
+        assertEquals("media.ffmpeg.path contains control characters.", ex.getMessage());
+    }
+
+    @Test
+    void resolveExecutable_shouldFallbackToPathWhenAbsoluteLocationIsMissing() {
+        String resolved = MediaFfmpegService.resolveExecutable("/opt/homebrew/bin/ffmpeg");
+
+        assertEquals("ffmpeg", resolved);
+    }
+
+    @Test
+    void generateVariant_rejectsSourceNamesStartingWithDash() throws Exception {
+        MediaFfmpegService service = new MediaFfmpegService("missing-ffmpeg-binary");
+        Path source = tempDir.resolve("-input.png");
+        Path target = tempDir.resolve("output.jpg");
+        Files.writeString(source, "image");
+
+        IOException ex = assertThrows(
+                IOException.class,
+                () -> service.generateVariant(source, target, 120, 80, "JPEG")
+        );
+
+        assertEquals("Media source file name must not start with '-'.", ex.getMessage());
+    }
+
+    @Test
+    void generateVariant_rejectsTargetNamesStartingWithDash() throws Exception {
+        MediaFfmpegService service = new MediaFfmpegService("missing-ffmpeg-binary");
+        Path source = tempDir.resolve("input.png");
+        Path target = tempDir.resolve("-output.jpg");
+        Files.writeString(source, "image");
+
+        IOException ex = assertThrows(
+                IOException.class,
+                () -> service.generateVariant(source, target, 120, 80, "JPEG")
+        );
+
+        assertEquals("Media target file name must not start with '-'.", ex.getMessage());
+    }
+}

backend/src/test/java/com/printcalculator/service/media/PublicMediaQueryServiceTest.java

@@ -0,0 +1,162 @@
+package com.printcalculator.service.media;
+
+import com.printcalculator.dto.PublicMediaUsageDto;
+import com.printcalculator.dto.MediaTextTranslationDto;
+import com.printcalculator.entity.MediaAsset;
+import com.printcalculator.entity.MediaUsage;
+import com.printcalculator.entity.MediaVariant;
+import com.printcalculator.repository.MediaUsageRepository;
+import com.printcalculator.repository.MediaVariantRepository;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.junit.jupiter.api.io.TempDir;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.nio.file.Path;
+import java.time.OffsetDateTime;
+import java.util.List;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+class PublicMediaQueryServiceTest {
+
+    @Mock
+    private MediaUsageRepository mediaUsageRepository;
+    @Mock
+    private MediaVariantRepository mediaVariantRepository;
+
+    @TempDir
+    Path tempDir;
+
+    private PublicMediaQueryService service;
+
+    @BeforeEach
+    void setUp() {
+        MediaStorageService mediaStorageService = new MediaStorageService(
+                tempDir.resolve("storage_media").toString(),
+                "https://cdn.example/media"
+        );
+        service = new PublicMediaQueryService(mediaUsageRepository, mediaVariantRepository, mediaStorageService);
+    }
+
+    @Test
+    void getUsageMedia_shouldReturnOnlyActiveReadyPublicUsagesOrderedBySortOrder() {
+        MediaAsset readyPublicAsset = buildAsset("READY", "PUBLIC", "Shop hero fallback", "Shop alt fallback");
+        MediaAsset draftAsset = buildAsset("PROCESSING", "PUBLIC", "Draft", "Draft alt");
+        MediaAsset privateAsset = buildAsset("READY", "PRIVATE", "Private", "Private alt");
+
+        MediaUsage usageSecond = buildUsage(readyPublicAsset, "HOME_SECTION", "shop-gallery", 2, false, true);
+        MediaUsage usageFirst = buildUsage(readyPublicAsset, "HOME_SECTION", "shop-gallery", 1, true, true);
+        applyTranslation(usageSecond, "it", "Shop hero IT", "Shop alt IT");
+        applyTranslation(usageSecond, "en", "Shop hero EN", "Shop alt EN");
+        applyTranslation(usageSecond, "de", "Shop hero DE", "Shop alt DE");
+        applyTranslation(usageSecond, "fr", "Shop hero FR", "Shop alt FR");
+        applyTranslation(usageFirst, "it", "Shop hero IT", "Shop alt IT");
+        applyTranslation(usageFirst, "en", "Shop hero EN", "Shop alt EN");
+        applyTranslation(usageFirst, "de", "Shop hero DE", "Shop alt DE");
+        applyTranslation(usageFirst, "fr", "Shop hero FR", "Shop alt FR");
+        MediaUsage usageDraft = buildUsage(draftAsset, "HOME_SECTION", "shop-gallery", 0, false, true);
+        MediaUsage usagePrivate = buildUsage(privateAsset, "HOME_SECTION", "shop-gallery", 3, false, true);
+
+        when(mediaUsageRepository.findByUsageTypeAndUsageKeyAndIsActiveTrueOrderBySortOrderAscCreatedAtAsc(
+                "HOME_SECTION", "shop-gallery"
+        )).thenReturn(List.of(usageSecond, usageFirst, usageDraft, usagePrivate));
+        when(mediaVariantRepository.findByMediaAsset_IdIn(List.of(readyPublicAsset.getId())))
+                .thenReturn(List.of(
+                        buildVariant(readyPublicAsset, "thumb", "JPEG", "asset/thumb.jpg"),
+                        buildVariant(readyPublicAsset, "thumb", "WEBP", "asset/thumb.webp"),
+                        buildVariant(readyPublicAsset, "hero", "AVIF", "asset/hero.avif"),
+                        buildVariant(readyPublicAsset, "hero", "JPEG", "asset/hero.jpg")
+                ));
+
+        List<PublicMediaUsageDto> result = service.getUsageMedia("home_section", "shop-gallery", "en");
+
+        assertEquals(2, result.size());
+        assertEquals(1, result.get(0).getSortOrder());
+        assertEquals(Boolean.TRUE, result.get(0).getIsPrimary());
+        assertEquals("Shop hero EN", result.get(0).getTitle());
+        assertEquals("Shop alt EN", result.get(0).getAltText());
+        assertEquals("https://cdn.example/media/asset/thumb.jpg", result.get(0).getThumb().getJpegUrl());
+        assertEquals("https://cdn.example/media/asset/thumb.webp", result.get(0).getThumb().getWebpUrl());
+        assertEquals("https://cdn.example/media/asset/hero.avif", result.get(0).getHero().getAvifUrl());
+    }
+
+    @Test
+    void getUsageMedia_shouldReturnNullForMissingFormatsOrPresetsAndFallbackToAssetMetadata() {
+        MediaAsset asset = buildAsset("READY", "PUBLIC", "Joe portrait", "Joe portrait fallback");
+        MediaUsage usage = buildUsage(asset, "ABOUT_MEMBER", "joe", 0, true, true);
+
+        when(mediaUsageRepository.findByUsageTypeAndUsageKeyAndIsActiveTrueOrderBySortOrderAscCreatedAtAsc(
+                "ABOUT_MEMBER", "joe"
+        )).thenReturn(List.of(usage));
+        when(mediaVariantRepository.findByMediaAsset_IdIn(List.of(asset.getId())))
+                .thenReturn(List.of(buildVariant(asset, "card", "JPEG", "joe/card.jpg")));
+
+        List<PublicMediaUsageDto> result = service.getUsageMedia("ABOUT_MEMBER", "joe", "fr");
+
+        assertEquals(1, result.size());
+        assertEquals("Joe portrait", result.get(0).getTitle());
+        assertEquals("Joe portrait fallback", result.get(0).getAltText());
+        assertNull(result.get(0).getThumb().getJpegUrl());
+        assertNull(result.get(0).getCard().getAvifUrl());
+        assertEquals("https://cdn.example/media/joe/card.jpg", result.get(0).getCard().getJpegUrl());
+        assertNull(result.get(0).getHero().getWebpUrl());
+        assertTrue(result.get(0).getIsPrimary());
+    }
+
+    private MediaAsset buildAsset(String status, String visibility, String title, String altText) {
+        MediaAsset asset = new MediaAsset();
+        asset.setId(UUID.randomUUID());
+        asset.setStatus(status);
+        asset.setVisibility(visibility);
+        asset.setTitle(title);
+        asset.setAltText(altText);
+        asset.setCreatedAt(OffsetDateTime.now());
+        asset.setUpdatedAt(OffsetDateTime.now());
+        return asset;
+    }
+
+    private MediaUsage buildUsage(MediaAsset asset,
+                                  String usageType,
+                                  String usageKey,
+                                  int sortOrder,
+                                  boolean isPrimary,
+                                  boolean isActive) {
+        MediaUsage usage = new MediaUsage();
+        usage.setId(UUID.randomUUID());
+        usage.setMediaAsset(asset);
+        usage.setUsageType(usageType);
+        usage.setUsageKey(usageKey);
+        usage.setSortOrder(sortOrder);
+        usage.setIsPrimary(isPrimary);
+        usage.setIsActive(isActive);
+        usage.setCreatedAt(OffsetDateTime.now().plusSeconds(sortOrder));
+        return usage;
+    }
+
+    private MediaVariant buildVariant(MediaAsset asset, String variantName, String format, String storageKey) {
+        MediaVariant variant = new MediaVariant();
+        variant.setId(UUID.randomUUID());
+        variant.setMediaAsset(asset);
+        variant.setVariantName(variantName);
+        variant.setFormat(format);
+        variant.setStorageKey(storageKey);
+        variant.setCreatedAt(OffsetDateTime.now());
+        return variant;
+    }
+
+    private void applyTranslation(MediaUsage usage, String language, String title, String altText) {
+        MediaTextTranslationDto translation = new MediaTextTranslationDto();
+        translation.setTitle(title);
+        translation.setAltText(altText);
+        usage.setTitleForLanguage(language, translation.getTitle());
+        usage.setAltTextForLanguage(language, translation.getAltText());
+    }
+}

db.sql

@@ -919,6 +919,94 @@ CREATE TABLE IF NOT EXISTS custom_quote_request_attachments
 CREATE INDEX IF NOT EXISTS ix_custom_quote_attachments_request
     ON custom_quote_request_attachments (request_id);
 
+CREATE TABLE IF NOT EXISTS media_asset
+(
+    media_asset_id     uuid PRIMARY KEY     DEFAULT gen_random_uuid(),
+    original_filename  text        NOT NULL,
+    storage_key        text        NOT NULL UNIQUE,
+    mime_type          text        NOT NULL,
+    file_size_bytes    bigint      NOT NULL CHECK (file_size_bytes >= 0),
+    sha256_hex         text        NOT NULL,
+    width_px           integer,
+    height_px          integer,
+    status             text        NOT NULL CHECK (status IN ('UPLOADED', 'PROCESSING', 'READY', 'FAILED', 'ARCHIVED')),
+    visibility         text        NOT NULL CHECK (visibility IN ('PUBLIC', 'PRIVATE')),
+    title              text,
+    alt_text           text,
+    created_at         timestamptz NOT NULL DEFAULT now(),
+    updated_at         timestamptz NOT NULL DEFAULT now()
+);
+
+CREATE INDEX IF NOT EXISTS ix_media_asset_status_visibility_created_at
+    ON media_asset (status, visibility, created_at DESC);
+
+CREATE TABLE IF NOT EXISTS media_variant
+(
+    media_variant_id  uuid PRIMARY KEY     DEFAULT gen_random_uuid(),
+    media_asset_id    uuid        NOT NULL REFERENCES media_asset (media_asset_id) ON DELETE CASCADE,
+    variant_name      text        NOT NULL,
+    format            text        NOT NULL CHECK (format IN ('ORIGINAL', 'JPEG', 'WEBP', 'AVIF')),
+    storage_key       text        NOT NULL UNIQUE,
+    mime_type         text        NOT NULL,
+    width_px          integer     NOT NULL,
+    height_px         integer     NOT NULL,
+    file_size_bytes   bigint      NOT NULL CHECK (file_size_bytes >= 0),
+    is_generated      boolean     NOT NULL DEFAULT true,
+    created_at        timestamptz NOT NULL DEFAULT now(),
+    CONSTRAINT uq_media_variant_asset_name_format UNIQUE (media_asset_id, variant_name, format)
+);
+
+CREATE INDEX IF NOT EXISTS ix_media_variant_asset
+    ON media_variant (media_asset_id);
+
+CREATE TABLE IF NOT EXISTS media_usage
+(
+    media_usage_id    uuid PRIMARY KEY     DEFAULT gen_random_uuid(),
+    usage_type        text        NOT NULL,
+    usage_key         text        NOT NULL,
+    owner_id          uuid,
+    media_asset_id    uuid        NOT NULL REFERENCES media_asset (media_asset_id) ON DELETE CASCADE,
+    sort_order        integer     NOT NULL DEFAULT 0,
+    is_primary        boolean     NOT NULL DEFAULT false,
+    is_active         boolean     NOT NULL DEFAULT true,
+    title_it          text,
+    title_en          text,
+    title_de          text,
+    title_fr          text,
+    alt_text_it       text,
+    alt_text_en       text,
+    alt_text_de       text,
+    alt_text_fr       text,
+    created_at        timestamptz NOT NULL DEFAULT now()
+);
+
+CREATE INDEX IF NOT EXISTS ix_media_usage_scope
+    ON media_usage (usage_type, usage_key, is_active, sort_order);
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS title_it text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS title_en text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS title_de text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS title_fr text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS alt_text_it text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS alt_text_en text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS alt_text_de text;
+
+ALTER TABLE media_usage
+    ADD COLUMN IF NOT EXISTS alt_text_fr text;
+
 ALTER TABLE quote_sessions
     DROP CONSTRAINT IF EXISTS fk_quote_sessions_source_request;
 

docker-compose.deploy.yml

@@ -1,6 +1,8 @@
 services:
   backend:
     # L'immagine usa il tag specificato nel file .env o passato da riga di comando
+    # Nginx esterno deve servire /media/ con un alias verso
+    # /mnt/cache/appdata/print-calculator/${ENV}/storage_media/public/
     image: ${REGISTRY_URL}/${REPO_OWNER}/print-calculator-backend:${TAG}
     container_name: print-calculator-backend-${ENV}
     ports:
@@ -29,6 +31,10 @@ services:
       - ADMIN_SESSION_TTL_MINUTES=${ADMIN_SESSION_TTL_MINUTES:-480}
       - TEMP_DIR=/app/temp
       - PROFILES_DIR=/app/profiles
+      - MEDIA_STORAGE_ROOT=${MEDIA_STORAGE_ROOT:-/app/storage_media}
+      - MEDIA_PUBLIC_BASE_URL=${MEDIA_PUBLIC_BASE_URL:-http://localhost:8080/media}
+      - MEDIA_FFMPEG_PATH=${MEDIA_FFMPEG_PATH:-ffmpeg}
+      - MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:-26214400}
     restart: always
     logging:
       driver: "json-file"
@@ -40,6 +46,7 @@ services:
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_quotes:/app/storage_quotes
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_orders:/app/storage_orders
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_requests:/app/storage_requests
+      - /mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media
     extra_hosts:
       - "host.docker.internal:host-gateway"
 

frontend/src/app/core/services/public-media.service.ts

@@ -0,0 +1,264 @@
+import { inject, Injectable, Injector } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import {
+  Observable,
+  combineLatest,
+  map,
+  of,
+  catchError,
+  distinctUntilChanged,
+  switchMap,
+} from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { LanguageService } from './language.service';
+
+export type PublicMediaUsageType = string;
+export type PublicMediaPreset = 'thumb' | 'card' | 'hero';
+
+export interface PublicMediaVariantDto {
+  avifUrl: string | null;
+  webpUrl: string | null;
+  jpegUrl: string | null;
+}
+
+export interface PublicMediaUsageDto {
+  mediaAssetId: string;
+  title: string | null;
+  altText: string | null;
+  usageType: string;
+  usageKey: string;
+  sortOrder: number;
+  isPrimary: boolean;
+  thumb: PublicMediaVariantDto | null;
+  card: PublicMediaVariantDto | null;
+  hero: PublicMediaVariantDto | null;
+}
+
+export interface PublicMediaSourceSet {
+  preset: PublicMediaPreset;
+  avifUrl: string | null;
+  webpUrl: string | null;
+  jpegUrl: string | null;
+  fallbackUrl: string | null;
+}
+
+export interface PublicMediaResolvedSourceSet
+  extends Omit<PublicMediaSourceSet, 'fallbackUrl'> {
+  fallbackUrl: string;
+}
+
+export interface PublicMediaImage {
+  mediaAssetId: string;
+  title: string | null;
+  altText: string | null;
+  usageType: string;
+  usageKey: string;
+  sortOrder: number;
+  isPrimary: boolean;
+  thumb: PublicMediaSourceSet;
+  card: PublicMediaSourceSet;
+  hero: PublicMediaSourceSet;
+}
+
+export interface PublicMediaDisplayImage
+  extends Omit<PublicMediaImage, 'thumb' | 'card' | 'hero'> {
+  source: PublicMediaResolvedSourceSet;
+}
+
+export interface PublicMediaUsageRequest {
+  usageType: PublicMediaUsageType;
+  usageKey: string;
+}
+
+export type PublicMediaUsageCollectionMap = Record<
+  string,
+  readonly PublicMediaImage[]
+>;
+
+export function buildPublicMediaUsageScopeKey(
+  usageType: string,
+  usageKey: string,
+): string {
+  return `${usageType}::${usageKey}`;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PublicMediaService {
+  private readonly http = inject(HttpClient);
+  private readonly injector = inject(Injector);
+  private readonly languageService = inject(LanguageService);
+  private readonly baseUrl = `${environment.apiUrl}/api/public/media`;
+  private readonly selectedLang$ = toObservable(
+    this.languageService.currentLang,
+    {
+      injector: this.injector,
+    },
+  ).pipe(distinctUntilChanged());
+
+  getUsageMedia(
+    usageType: PublicMediaUsageType,
+    usageKey: string,
+  ): Observable<readonly PublicMediaImage[]> {
+    return this.selectedLang$.pipe(
+      switchMap((lang) => {
+        const params = new HttpParams()
+          .set('usageType', usageType)
+          .set('usageKey', usageKey)
+          .set('lang', lang);
+
+        return this.http
+          .get<PublicMediaUsageDto[]>(`${this.baseUrl}/usages`, { params })
+          .pipe(
+            map((items) =>
+              items
+                .map((item) => this.mapUsageDto(item))
+                .filter((item) => this.hasAnyFallback(item)),
+            ),
+            catchError(() => of([])),
+          );
+      }),
+    );
+  }
+
+  getUsageCollections(
+    requests: readonly PublicMediaUsageRequest[],
+  ): Observable<PublicMediaUsageCollectionMap> {
+    if (requests.length === 0) {
+      return of({});
+    }
+
+    return combineLatest(
+      requests.map((request) =>
+        this.getUsageMedia(request.usageType, request.usageKey).pipe(
+          map(
+            (items) =>
+              [
+                buildPublicMediaUsageScopeKey(
+                  request.usageType,
+                  request.usageKey,
+                ),
+                items,
+              ] as const,
+          ),
+        ),
+      ),
+    ).pipe(
+      map((entries) =>
+        entries.reduce<PublicMediaUsageCollectionMap>((acc, [key, value]) => {
+          acc[key] = value;
+          return acc;
+        }, {}),
+      ),
+    );
+  }
+
+  pickPrimaryUsage(
+    items: readonly PublicMediaImage[],
+  ): PublicMediaImage | null {
+    if (items.length === 0) {
+      return null;
+    }
+    return items.find((item) => item.isPrimary) ?? items[0] ?? null;
+  }
+
+  toDisplayImage(
+    item: PublicMediaImage,
+    preferredPreset: PublicMediaPreset,
+  ): PublicMediaDisplayImage | null {
+    const source = this.pickPresetSource(item, preferredPreset);
+    if (!source) {
+      return null;
+    }
+
+    return {
+      mediaAssetId: item.mediaAssetId,
+      title: item.title,
+      altText: item.altText,
+      usageType: item.usageType,
+      usageKey: item.usageKey,
+      sortOrder: item.sortOrder,
+      isPrimary: item.isPrimary,
+      source,
+    };
+  }
+
+  private mapUsageDto(item: PublicMediaUsageDto): PublicMediaImage {
+    return {
+      mediaAssetId: item.mediaAssetId,
+      title: item.title ?? null,
+      altText: item.altText ?? null,
+      usageType: item.usageType,
+      usageKey: item.usageKey,
+      sortOrder: item.sortOrder,
+      isPrimary: item.isPrimary,
+      thumb: this.mapPreset(item.thumb, 'thumb'),
+      card: this.mapPreset(item.card, 'card'),
+      hero: this.mapPreset(item.hero, 'hero'),
+    };
+  }
+
+  private mapPreset(
+    preset: PublicMediaVariantDto | null | undefined,
+    presetName: PublicMediaPreset,
+  ): PublicMediaSourceSet {
+    const avifUrl = this.normalizeUrl(preset?.avifUrl);
+    const webpUrl = this.normalizeUrl(preset?.webpUrl);
+    const jpegUrl = this.normalizeUrl(preset?.jpegUrl);
+
+    return {
+      preset: presetName,
+      avifUrl,
+      webpUrl,
+      jpegUrl,
+      fallbackUrl: jpegUrl ?? webpUrl ?? avifUrl,
+    };
+  }
+
+  private pickPresetSource(
+    item: PublicMediaImage,
+    preferredPreset: PublicMediaPreset,
+  ): PublicMediaResolvedSourceSet | null {
+    const presetOrder = this.buildPresetFallbackOrder(preferredPreset);
+    const source = presetOrder
+      .map((preset) => item[preset])
+      .find((sourceSet) => sourceSet.fallbackUrl !== null);
+
+    if (!source || source.fallbackUrl === null) {
+      return null;
+    }
+
+    return {
+      preset: source.preset,
+      avifUrl: source.avifUrl,
+      webpUrl: source.webpUrl,
+      jpegUrl: source.jpegUrl,
+      fallbackUrl: source.fallbackUrl,
+    };
+  }
+
+  private buildPresetFallbackOrder(
+    preferredPreset: PublicMediaPreset,
+  ): readonly PublicMediaPreset[] {
+    switch (preferredPreset) {
+      case 'thumb':
+        return ['thumb', 'card', 'hero'];
+      case 'card':
+        return ['card', 'thumb', 'hero'];
+      case 'hero':
+        return ['hero', 'card', 'thumb'];
+    }
+  }
+
+  private hasAnyFallback(item: PublicMediaImage): boolean {
+    return [item.thumb, item.card, item.hero].some(
+      (preset) => preset.fallbackUrl !== null,
+    );
+  }
+
+  private normalizeUrl(value: string | null | undefined): string | null {
+    return value && value.trim() ? value : null;
+  }
+}

frontend/src/app/features/about/about-page.component.html

@@ -39,10 +39,22 @@
         (keydown.space)="toggleSelectedMember('joe'); $event.preventDefault()"
       >
         <div class="placeholder-img">
-          <img
-            src="assets/images/joe.jpg"
-            [attr.alt]="'ABOUT.MEMBER_JOE_ALT' | translate"
-          />
+          @if (joeImage(); as image) {
+            <picture>
+              @if (image.source.avifUrl) {
+                <source [srcset]="image.source.avifUrl" type="image/avif" />
+              }
+              @if (image.source.webpUrl) {
+                <source [srcset]="image.source.webpUrl" type="image/webp" />
+              }
+              <img
+                [src]="image.source.fallbackUrl"
+                [attr.alt]="
+                  image.altText || ('ABOUT.MEMBER_JOE_ALT' | translate)
+                "
+              />
+            </picture>
+          }
         </div>
         <div class="member-info">
           <span class="member-name">{{
@@ -71,10 +83,22 @@
         "
       >
         <div class="placeholder-img">
-          <img
-            src="assets/images/matteo.jpg"
-            [attr.alt]="'ABOUT.MEMBER_MATTEO_ALT' | translate"
-          />
+          @if (matteoImage(); as image) {
+            <picture>
+              @if (image.source.avifUrl) {
+                <source [srcset]="image.source.avifUrl" type="image/avif" />
+              }
+              @if (image.source.webpUrl) {
+                <source [srcset]="image.source.webpUrl" type="image/webp" />
+              }
+              <img
+                [src]="image.source.fallbackUrl"
+                [attr.alt]="
+                  image.altText || ('ABOUT.MEMBER_MATTEO_ALT' | translate)
+                "
+              />
+            </picture>
+          }
         </div>
         <div class="member-info">
           <span class="member-name">{{

frontend/src/app/features/about/about-page.component.scss

@@ -193,6 +193,12 @@ h1 {
   object-fit: cover;
 }
 
+.placeholder-img picture {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 .member-info {
   text-align: center;
 }

frontend/src/app/features/about/about-page.component.ts

@@ -1,6 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppLocationsComponent } from '../../shared/components/app-locations/app-locations.component';
+import {
+  buildPublicMediaUsageScopeKey,
+  PublicMediaDisplayImage,
+  PublicMediaService,
+  PublicMediaUsageCollectionMap,
+} from '../../core/services/public-media.service';
+
+const EMPTY_MEDIA_COLLECTIONS: PublicMediaUsageCollectionMap = {};
 
 type MemberId = 'joe' | 'matteo';
 type PassionId =
@@ -32,6 +41,39 @@ interface PassionChip {
   styleUrl: './about-page.component.scss',
 })
 export class AboutPageComponent {
+  private readonly publicMediaService = inject(PublicMediaService);
+  private readonly mediaByUsage = toSignal(
+    this.publicMediaService.getUsageCollections([
+      {
+        usageType: 'ABOUT_MEMBER',
+        usageKey: 'joe',
+      },
+      {
+        usageType: 'ABOUT_MEMBER',
+        usageKey: 'matteo',
+      },
+    ]),
+    { initialValue: EMPTY_MEDIA_COLLECTIONS },
+  );
+
+  readonly joeImage = computed<PublicMediaDisplayImage | null>(() => {
+    const image = this.publicMediaService.pickPrimaryUsage(
+      this.mediaByUsage()[
+        buildPublicMediaUsageScopeKey('ABOUT_MEMBER', 'joe')
+      ] ?? [],
+    );
+    return image ? this.publicMediaService.toDisplayImage(image, 'card') : null;
+  });
+
+  readonly matteoImage = computed<PublicMediaDisplayImage | null>(() => {
+    const image = this.publicMediaService.pickPrimaryUsage(
+      this.mediaByUsage()[
+        buildPublicMediaUsageScopeKey('ABOUT_MEMBER', 'matteo')
+      ] ?? [],
+    );
+    return image ? this.publicMediaService.toDisplayImage(image, 'card') : null;
+  });
+
   selectedMember: MemberId | null = null;
   hoveredMember: MemberId | null = null;
 

frontend/src/app/features/admin/admin.routes.ts

@@ -57,6 +57,13 @@ export const ADMIN_ROUTES: Routes = [
             (m) => m.AdminCadInvoicesComponent,
           ),
       },
+      {
+        path: 'home-media',
+        loadComponent: () =>
+          import('./pages/admin-home-media.component').then(
+            (m) => m.AdminHomeMediaComponent,
+          ),
+      },
     ],
   },
 ];

frontend/src/app/features/admin/pages/admin-cad-invoices.component.scss

@@ -13,6 +13,7 @@
 
 .page-header h1 {
   margin: 0;
+  font-size: 1.45rem;
 }
 
 .page-header p {
@@ -43,7 +44,8 @@ button:disabled {
 }
 
 .create-box h2 {
-  margin-top: 0;
+  margin: 0 0 var(--space-3);
+  font-size: 1.05rem;
 }
 
 .form-grid {

frontend/src/app/features/admin/pages/admin-contact-requests.component.html

@@ -1,11 +1,18 @@
-<section class="section-card">
-  <header class="section-header">
-    <div class="header-copy">
-      <h2>Richieste di contatto</h2>
-      <p>Richieste preventivo personalizzato ricevute dal sito.</p>
-      <span class="total-pill">{{ requests.length }} richieste</span>
+<section class="section-card ui-section-card">
+  <header class="section-header ui-section-header">
+    <div class="header-copy ui-section-header__copy">
+      <h2 class="ui-section-header__title">Richieste di contatto</h2>
+      <p class="ui-section-header__description">
+        Richieste preventivo personalizzato ricevute dal sito.
+      </p>
+      <span class="total-pill ui-pill">{{ requests.length }} richieste</span>
     </div>
-    <button type="button" (click)="loadRequests()" [disabled]="loading">
+    <button
+      type="button"
+      class="ui-button"
+      (click)="loadRequests()"
+      [disabled]="loading"
+    >
       Aggiorna
     </button>
   </header>
@@ -13,11 +20,11 @@
   <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>
   <p class="success" *ngIf="successMessage">{{ successMessage }}</p>
 
-  <div class="workspace" *ngIf="!loading; else loadingTpl">
+  <div class="workspace ui-split-workspace" *ngIf="!loading; else loadingTpl">
     <section class="list-panel">
       <h3>Lista richieste</h3>
-      <div class="table-wrap">
-        <table class="requests-table">
+      <div class="table-wrap ui-table-wrap">
+        <table class="requests-table ui-data-table">
           <thead>
             <tr>
               <th>Data</th>
@@ -50,14 +57,18 @@
               </td>
               <td class="email-cell">{{ request.email }}</td>
               <td>
-                <span class="chip chip-neutral">{{ request.requestType }}</span>
+                <span class="ui-status-chip ui-status-chip--neutral">{{
+                  request.requestType
+                }}</span>
               </td>
               <td>
-                <span class="chip chip-light">{{ request.customerType }}</span>
+                <span class="ui-status-chip ui-status-chip--neutral">{{
+                  request.customerType
+                }}</span>
               </td>
               <td>
                 <span
-                  class="chip"
+                  class="ui-status-chip"
                   [ngClass]="getStatusChipClass(request.status)"
                   >{{ request.status }}</span
                 >
@@ -71,13 +82,14 @@
       </div>
     </section>
 
-    <section class="detail-panel" *ngIf="selectedRequest">
+    <section class="detail-panel ui-detail-panel" *ngIf="selectedRequest">
       <header class="detail-header">
         <div>
           <h3>Dettaglio richiesta</h3>
           <p class="request-id">
             <span>ID</span>
             <code
+              class="ui-code-pill"
               [title]="selectedRequest.id"
               [appCopyOnClick]="selectedRequest.id"
               >{{ selectedRequest.id }}</code
@@ -86,14 +98,14 @@
         </div>
         <div class="detail-chips">
           <span
-            class="chip"
+            class="ui-status-chip"
             [ngClass]="getStatusChipClass(selectedRequest.status)"
             >{{ selectedRequest.status }}</span
           >
-          <span class="chip chip-neutral">{{
+          <span class="ui-status-chip ui-status-chip--neutral">{{
             selectedRequest.requestType
           }}</span>
-          <span class="chip chip-light">{{
+          <span class="ui-status-chip ui-status-chip--neutral">{{
             selectedRequest.customerType
           }}</span>
         </div>
@@ -103,32 +115,32 @@
         Caricamento dettaglio...
       </p>
 
-      <dl class="meta-grid">
-        <div class="meta-item">
+      <dl class="meta-grid ui-meta-grid">
+        <div class="meta-item ui-meta-item">
           <dt>Creata</dt>
           <dd>{{ selectedRequest.createdAt | date: "medium" }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Aggiornata</dt>
           <dd>{{ selectedRequest.updatedAt | date: "medium" }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Email</dt>
           <dd>{{ selectedRequest.email }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Telefono</dt>
           <dd>{{ selectedRequest.phone || "-" }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Nome</dt>
           <dd>{{ selectedRequest.name || "-" }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Azienda</dt>
           <dd>{{ selectedRequest.companyName || "-" }}</dd>
         </div>
-        <div class="meta-item">
+        <div class="meta-item ui-meta-item">
           <dt>Referente</dt>
           <dd>{{ selectedRequest.contactPerson || "-" }}</dd>
         </div>
@@ -138,6 +150,7 @@
         <div class="status-editor-field">
           <label for="contact-request-status">Stato richiesta</label>
           <select
+            class="ui-form-control"
             id="contact-request-status"
             [ngModel]="selectedStatus"
             (ngModelChange)="selectedStatus = $event"
@@ -148,6 +161,7 @@
           </select>
         </div>
         <button
+          class="ui-button"
           type="button"
           (click)="updateRequestStatus()"
           [disabled]="
@@ -190,7 +204,7 @@
             </div>
             <button
               type="button"
-              class="ghost"
+              class="ui-button ui-button--ghost"
               (click)="downloadAttachment(attachment)"
             >
               Scarica file
@@ -200,7 +214,10 @@
       </div>
     </section>
 
-    <section class="detail-panel empty" *ngIf="!selectedRequest">
+    <section
+      class="detail-panel ui-detail-panel ui-detail-panel--empty"
+      *ngIf="!selectedRequest"
+    >
       <h3>Nessuna richiesta selezionata</h3>
       <p>Seleziona una riga dalla lista per vedere il dettaglio.</p>
     </section>

frontend/src/app/features/admin/pages/admin-contact-requests.component.scss

@@ -1,27 +1,7 @@
 .section-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: clamp(12px, 2vw, 24px);
-  box-shadow: var(--shadow-sm);
-}
-
-.section-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-4);
-  margin-bottom: var(--space-4);
-}
-
-.section-header h2 {
-  margin: 0;
-  font-size: 1.4rem;
-}
-
-.section-header p {
-  margin: var(--space-2) 0 0;
-  color: var(--color-text-muted);
+  flex-direction: column;
+  gap: var(--space-5);
 }
 
 .header-copy {
@@ -32,21 +12,6 @@
 .total-pill {
   width: fit-content;
   margin-top: var(--space-1);
-  border-radius: 999px;
-  border: 1px solid var(--color-border);
-  background: var(--color-neutral-100);
-  color: var(--color-text-muted);
-  font-size: 0.78rem;
-  font-weight: 700;
-  line-height: 1;
-  padding: 6px 10px;
-}
-
-.workspace {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--space-4);
-  align-items: start;
 }
 
 .list-panel,
@@ -54,72 +19,11 @@
   min-width: 0;
 }
 
-button {
-  border: 0;
-  border-radius: var(--radius-md);
-  background: var(--color-brand);
-  color: var(--color-neutral-900);
-  padding: var(--space-2) var(--space-4);
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    background-color 0.2s ease,
-    opacity 0.2s ease;
-  line-height: 1.2;
-}
-
-button:hover:not(:disabled) {
-  background: var(--color-brand-hover);
-}
-
-button.ghost {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  color: var(--color-text);
-}
-
 .list-panel h3 {
   margin: 0 0 var(--space-2);
   font-size: 1.02rem;
 }
 
-.table-wrap {
-  overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
-  max-height: 72vh;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 760px;
-}
-
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: var(--color-neutral-100);
-}
-
-th,
-td {
-  text-align: left;
-  padding: var(--space-3);
-  border-bottom: 1px solid var(--color-border);
-  font-size: 0.92rem;
-  vertical-align: top;
-}
-
-th {
-  font-size: 0.78rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  color: var(--color-text-muted);
-}
-
 .name-cell .primary {
   margin: 0;
   font-weight: 600;
@@ -138,11 +42,6 @@ th {
 
 tbody tr {
   cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-tbody tr:hover {
-  background: #fff9d9;
 }
 
 tbody tr.selected {
@@ -157,27 +56,6 @@ tbody tr.selected {
   background: transparent;
 }
 
-.detail-panel {
-  display: grid;
-  gap: var(--space-3);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
-  padding: var(--space-4);
-  min-height: 500px;
-}
-
-.detail-panel.empty {
-  display: grid;
-  align-content: center;
-  justify-items: center;
-  text-align: center;
-}
-
-.detail-panel.empty h3 {
-  margin: 0 0 var(--space-2);
-}
-
 .detail-header {
   display: flex;
   justify-content: space-between;
@@ -213,11 +91,6 @@ tbody tr.selected {
   text-overflow: clip;
   white-space: normal;
   overflow-wrap: anywhere;
-  color: var(--color-text);
-  background: var(--color-neutral-100);
-  border: 1px solid var(--color-border);
-  border-radius: 7px;
-  padding: 3px 8px;
 }
 
 .loading-detail {
@@ -226,28 +99,12 @@ tbody tr.selected {
   font-size: 0.85rem;
 }
 
-.meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-  gap: var(--space-2);
-  margin: 0;
-}
-
 .meta-item {
   margin: 0;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  background: var(--color-neutral-100);
-  display: grid;
-  gap: 4px;
 }
 
 .meta-item dt {
   margin: 0;
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--color-text-muted);
 }
 
 .meta-item dd {
@@ -315,18 +172,18 @@ tbody tr.selected {
 
 .error {
   color: var(--color-danger-500);
-  margin-bottom: var(--space-3);
+  margin: 0;
 }
 
 .success {
   color: #157347;
-  margin-bottom: var(--space-3);
+  margin: 0;
 }
 
 .status-editor {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  background: var(--color-neutral-100);
+  background: var(--color-surface-muted);
   padding: var(--space-3);
   display: flex;
   flex-wrap: wrap;
@@ -346,79 +203,7 @@ tbody tr.selected {
   color: var(--color-text-muted);
 }
 
-.status-editor-field select {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  background: var(--color-bg-card);
-  font: inherit;
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  font-size: 0.74rem;
-  font-weight: 700;
-  letter-spacing: 0.02em;
-  line-height: 1;
-  padding: 5px 9px;
-  text-transform: uppercase;
-}
-
-.chip-neutral {
-  background: #e9f4ff;
-  border-color: #c8def4;
-  color: #1e4d78;
-}
-
-.chip-light {
-  background: #f4f5f8;
-  border-color: #dde1e8;
-  color: #4a5567;
-}
-
-.chip-warning {
-  background: #fff4cd;
-  border-color: #f7dd85;
-  color: #684b00;
-}
-
-.chip-success {
-  background: #dff6ea;
-  border-color: #b6e2cb;
-  color: #14543a;
-}
-
-.chip-danger {
-  background: #fde4e2;
-  border-color: #f3c0ba;
-  color: #812924;
-}
-
-button:disabled {
-  opacity: 0.68;
-  cursor: default;
-}
-
-@media (min-width: 1460px) {
-  .workspace {
-    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr);
-  }
-}
-
 @media (max-width: 760px) {
-  .section-card {
-    padding: var(--space-4);
-  }
-
-  .section-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
   .detail-header {
     flex-direction: column;
   }
@@ -447,12 +232,8 @@ button:disabled {
 }
 
 @media (max-width: 520px) {
-  .section-card {
-    padding: var(--space-3);
-  }
-
-  th,
-  td {
+  .ui-data-table th,
+  .ui-data-table td {
     padding: var(--space-2);
     font-size: 0.86rem;
   }

frontend/src/app/features/admin/pages/admin-contact-requests.component.ts

@@ -118,15 +118,15 @@ export class AdminContactRequestsComponent implements OnInit {
   getStatusChipClass(status?: string): string {
     const normalized = (status || '').trim().toUpperCase();
     if (['PENDING', 'NEW', 'OPEN', 'IN_PROGRESS'].includes(normalized)) {
-      return 'chip-warning';
+      return 'ui-status-chip--warning';
     }
     if (['DONE', 'COMPLETED', 'RESOLVED', 'CLOSED'].includes(normalized)) {
-      return 'chip-success';
+      return 'ui-status-chip--success';
     }
     if (['REJECTED', 'FAILED', 'ERROR', 'SPAM'].includes(normalized)) {
-      return 'chip-danger';
+      return 'ui-status-chip--danger';
     }
-    return 'chip-light';
+    return 'ui-status-chip--neutral';
   }
 
   updateRequestStatus(): void {

frontend/src/app/features/admin/pages/admin-dashboard.component.html

@@ -1,11 +1,18 @@
-<section class="admin-dashboard">
-  <header class="dashboard-header">
-    <div>
-      <h1>Ordini</h1>
-      <p>Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.</p>
+<section class="admin-dashboard ui-section-card">
+  <header class="dashboard-header ui-section-header">
+    <div class="ui-section-header__copy">
+      <h1 class="ui-section-header__title">Ordini</h1>
+      <p class="ui-section-header__description">
+        Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.
+      </p>
     </div>
     <div class="header-actions">
-      <button type="button" (click)="loadOrders()" [disabled]="loading">
+      <button
+        type="button"
+        class="ui-button"
+        (click)="loadOrders()"
+        [disabled]="loading"
+      >
         Aggiorna
       </button>
     </div>
@@ -13,13 +20,14 @@
 
   <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>
 
-  <div class="workspace" *ngIf="!loading; else loadingTpl">
+  <div class="workspace ui-split-workspace" *ngIf="!loading; else loadingTpl">
     <section class="list-panel">
       <h2>Lista ordini</h2>
       <div class="list-toolbar">
         <label class="toolbar-field" for="order-search">
           <span>Cerca UUID</span>
           <input
+            class="ui-form-control"
             id="order-search"
             type="search"
             [ngModel]="orderSearchTerm"
@@ -30,6 +38,7 @@
         <label class="toolbar-field" for="payment-status-filter">
           <span>Stato pagamento</span>
           <select
+            class="ui-form-control"
             id="payment-status-filter"
             [ngModel]="paymentStatusFilter"
             (ngModelChange)="onPaymentStatusFilterChange($event)"
@@ -45,6 +54,7 @@
         <label class="toolbar-field" for="order-status-filter">
           <span>Stato ordine</span>
           <select
+            class="ui-form-control"
             id="order-status-filter"
             [ngModel]="orderStatusFilter"
             (ngModelChange)="onOrderStatusFilterChange($event)"
@@ -58,8 +68,8 @@
           </select>
         </label>
       </div>
-      <div class="table-wrap">
-        <table>
+      <div class="table-wrap ui-table-wrap">
+        <table class="ui-data-table">
           <thead>
             <tr>
               <th>Ordine</th>
@@ -93,12 +103,13 @@
       </div>
     </section>
 
-    <section class="detail-panel" *ngIf="selectedOrder">
+    <section class="detail-panel ui-detail-panel" *ngIf="selectedOrder">
       <div class="detail-header">
         <h2>Dettaglio ordine {{ selectedOrder.orderNumber }}</h2>
         <p class="order-uuid">
           UUID:
           <code
+            class="ui-code-pill"
             [title]="selectedOrder.id"
             [appCopyOnClick]="selectedOrder.id"
             >{{ selectedOrder.id }}</code
@@ -107,18 +118,18 @@
         <p *ngIf="detailLoading">Caricamento dettaglio...</p>
       </div>
 
-      <div class="meta-grid">
-        <div>
+      <div class="meta-grid ui-meta-grid">
+        <div class="ui-meta-item">
           <strong>Cliente</strong><span>{{ selectedOrder.customerEmail }}</span>
         </div>
-        <div>
+        <div class="ui-meta-item">
           <strong>Stato pagamento</strong
           ><span>{{ selectedOrder.paymentStatus || "PENDING" }}</span>
         </div>
-        <div>
+        <div class="ui-meta-item">
           <strong>Stato ordine</strong><span>{{ selectedOrder.status }}</span>
         </div>
-        <div>
+        <div class="ui-meta-item">
           <strong>Totale</strong
           ><span>{{
             selectedOrder.totalChf | currency: "CHF" : "symbol" : "1.2-2"
@@ -130,6 +141,7 @@
         <div class="status-editor">
           <label for="order-status">Stato ordine</label>
           <select
+            class="ui-form-control"
             id="order-status"
             [value]="selectedStatus"
             (change)="onStatusChange($event)"
@@ -139,6 +151,7 @@
             </option>
           </select>
           <button
+            class="ui-button"
             type="button"
             (click)="updateStatus()"
             [disabled]="updatingStatus"
@@ -150,6 +163,7 @@
         <div class="status-editor">
           <label for="payment-method">Metodo pagamento</label>
           <select
+            class="ui-form-control"
             id="payment-method"
             [value]="selectedPaymentMethod"
             (change)="onPaymentMethodChange($event)"
@@ -162,6 +176,7 @@
             </option>
           </select>
           <button
+            class="ui-button"
             type="button"
             (click)="updatePaymentMethod()"
             [disabled]="confirmingPayment"
@@ -174,13 +189,25 @@
       </div>
 
       <div class="doc-actions">
-        <button type="button" class="ghost" (click)="downloadConfirmation()">
+        <button
+          type="button"
+          class="ui-button ui-button--ghost"
+          (click)="downloadConfirmation()"
+        >
           Scarica conferma + QR bill
         </button>
-        <button type="button" class="ghost" (click)="downloadInvoice()">
+        <button
+          type="button"
+          class="ui-button ui-button--ghost"
+          (click)="downloadInvoice()"
+        >
           Scarica fattura
         </button>
-        <button type="button" class="ghost" (click)="openPrintDetails()">
+        <button
+          type="button"
+          class="ui-button ui-button--ghost"
+          (click)="openPrintDetails()"
+        >
           Dettagli stampa
         </button>
       </div>
@@ -215,7 +242,7 @@
           </div>
           <button
             type="button"
-            class="ghost"
+            class="ui-button ui-button--ghost"
             (click)="downloadItemFile(item.id, item.originalFilename)"
           >
             Scarica file
@@ -224,7 +251,10 @@
       </div>
     </section>
 
-    <section class="detail-panel empty" *ngIf="!selectedOrder">
+    <section
+      class="detail-panel ui-detail-panel ui-detail-panel--empty"
+      *ngIf="!selectedOrder"
+    >
       <h2>Nessun ordine selezionato</h2>
       <p>Seleziona un ordine dalla lista per vedere i dettagli.</p>
     </section>
@@ -245,39 +275,39 @@
       <h3>Dettagli stampa ordine {{ selectedOrder.orderNumber }}</h3>
       <button
         type="button"
-        class="ghost close-btn"
+        class="ui-button ui-button--ghost close-btn"
         (click)="closePrintDetails()"
       >
         Chiudi
       </button>
     </header>
 
-    <div class="modal-grid">
-      <div>
+    <div class="modal-grid ui-meta-grid">
+      <div class="ui-meta-item">
         <strong>Qualità</strong
         ><span>{{ getQualityLabel(selectedOrder.printLayerHeightMm) }}</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Materiale</strong
         ><span>{{ selectedOrder.printMaterialCode || "-" }}</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Layer height</strong
         ><span>{{ selectedOrder.printLayerHeightMm || "-" }} mm</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Nozzle</strong
         ><span>{{ selectedOrder.printNozzleDiameterMm || "-" }} mm</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Infill pattern</strong
         ><span>{{ selectedOrder.printInfillPattern || "-" }}</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Infill %</strong
         ><span>{{ selectedOrder.printInfillPercent ?? "-" }}</span>
       </div>
-      <div>
+      <div class="ui-meta-item">
         <strong>Supporti</strong
         ><span>{{ selectedOrder.printSupportsEnabled ? "Sì" : "No" }}</span>
       </div>

frontend/src/app/features/admin/pages/admin-dashboard.component.scss

@@ -1,27 +1,7 @@
 .admin-dashboard {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: clamp(12px, 2vw, 20px);
-  box-shadow: var(--shadow-sm);
-}
-
-.dashboard-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-4);
-  margin-bottom: var(--space-4);
-}
-
-.dashboard-header h1 {
-  margin: 0;
-  font-size: 1.45rem;
-}
-
-.dashboard-header p {
-  margin: var(--space-2) 0 0;
-  color: var(--color-text-muted);
+  flex-direction: column;
+  gap: var(--space-5);
 }
 
 .header-actions {
@@ -29,45 +9,11 @@
   gap: var(--space-2);
 }
 
-.workspace {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr);
-  gap: var(--space-4);
-  align-items: start;
-}
-
 .list-panel,
 .detail-panel {
   min-width: 0;
 }
 
-button {
-  border: 0;
-  border-radius: var(--radius-md);
-  background: var(--color-brand);
-  color: var(--color-neutral-900);
-  padding: var(--space-2) var(--space-4);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  line-height: 1.2;
-}
-
-button:hover:not(:disabled) {
-  background: var(--color-brand-hover);
-}
-
-button.ghost {
-  background: var(--color-bg-card);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-button:disabled {
-  opacity: 0.65;
-  cursor: default;
-}
-
 .list-panel h2 {
   font-size: 1.05rem;
   margin-bottom: var(--space-2);
@@ -94,50 +40,8 @@ button:disabled {
   color: var(--color-text-muted);
 }
 
-.toolbar-field input,
-.toolbar-field select {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  background: var(--color-bg-card);
-  font: inherit;
-}
-
-.table-wrap {
-  overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-bg-card);
-  max-height: 72vh;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 760px;
-}
-
-thead {
-  background: var(--color-neutral-100);
-}
-
-th,
-td {
-  text-align: left;
-  padding: var(--space-3);
-  border-bottom: 1px solid var(--color-border);
-  vertical-align: top;
-  font-size: 0.93rem;
-}
-
 tbody tr {
   cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-tbody tr:hover {
-  background: #fff9d9;
 }
 
 tbody tr.selected {
@@ -152,22 +56,6 @@ tbody tr.no-results:hover {
   background: transparent;
 }
 
-.detail-panel {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-4);
-  min-height: 520px;
-}
-
-.detail-panel.empty {
-  display: grid;
-  align-content: center;
-  justify-items: center;
-  text-align: center;
-  color: var(--color-text-muted);
-}
-
 .order-uuid {
   font-size: 0.84rem;
   color: var(--color-text-muted);
@@ -175,38 +63,12 @@ tbody tr.no-results:hover {
 
 .order-uuid code {
   font-size: 0.82rem;
-  color: var(--color-text);
-  background: var(--color-neutral-100);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 2px 6px;
 }
 
 .detail-header h2 {
   margin: 0 0 var(--space-2);
 }
 
-.meta-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
-}
-
-.meta-grid > div {
-  background: var(--color-neutral-100);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
-  display: grid;
-  gap: 2px;
-}
-
-.meta-grid strong {
-  font-size: 0.78rem;
-  color: var(--color-text-muted);
-}
-
 .actions-block {
   display: flex;
   flex-wrap: wrap;
@@ -226,15 +88,6 @@ tbody tr.no-results:hover {
   color: var(--color-text-muted);
 }
 
-.status-editor select {
-  min-width: 210px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  background: var(--color-bg-card);
-  font: inherit;
-}
-
 .doc-actions {
   display: flex;
   flex-wrap: wrap;
@@ -294,7 +147,7 @@ tbody tr.no-results:hover {
 
 .error {
   color: var(--color-danger-500);
-  margin-bottom: var(--space-3);
+  margin: 0;
 }
 
 .modal-backdrop {
@@ -336,26 +189,9 @@ tbody tr.no-results:hover {
 }
 
 .modal-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-2);
   margin-bottom: var(--space-4);
 }
 
-.modal-grid > div {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-neutral-100);
-  padding: var(--space-3);
-  display: grid;
-  gap: 2px;
-}
-
-.modal-grid strong {
-  font-size: 0.78rem;
-  color: var(--color-text-muted);
-}
-
 h4 {
   margin: 0 0 var(--space-2);
 }
@@ -393,10 +229,6 @@ h4 {
 }
 
 @media (max-width: 1280px) {
-  .workspace {
-    grid-template-columns: 1fr;
-  }
-
   .detail-panel {
     min-height: unset;
   }
@@ -404,22 +236,13 @@ h4 {
 
 @media (max-width: 820px) {
   .admin-dashboard {
-    padding: var(--space-4);
+    gap: var(--space-4);
   }
 
   .list-toolbar {
     grid-template-columns: 1fr;
   }
 
-  .dashboard-header {
-    flex-direction: column;
-  }
-
-  .meta-grid,
-  .modal-grid {
-    grid-template-columns: 1fr;
-  }
-
   .item {
     align-items: flex-start;
   }
@@ -449,12 +272,8 @@ h4 {
 }
 
 @media (max-width: 520px) {
-  .admin-dashboard {
-    padding: var(--space-3);
-  }
-
-  th,
-  td {
+  .ui-data-table th,
+  .ui-data-table td {
     padding: var(--space-2);
     font-size: 0.88rem;
   }

frontend/src/app/features/admin/pages/admin-filament-stock.component.scss

@@ -1,9 +1,7 @@
 .section-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: clamp(12px, 2vw, 24px);
-  box-shadow: var(--shadow-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
 }
 
 .section-header {
@@ -11,7 +9,6 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--space-4);
-  margin-bottom: var(--space-4);
 }
 
 .section-header h2 {
@@ -26,7 +23,6 @@
 .alerts {
   display: grid;
   gap: var(--space-2);
-  margin-bottom: var(--space-3);
 }
 
 .content {
@@ -374,7 +370,7 @@ button:disabled {
 
 @media (max-width: 760px) {
   .section-card {
-    padding: var(--space-4);
+    gap: var(--space-4);
   }
 
   .form-grid {
@@ -404,9 +400,3 @@ button:disabled {
     width: 100%;
   }
 }
-
-@media (max-width: 520px) {
-  .section-card {
-    padding: var(--space-3);
-  }
-}

frontend/src/app/features/admin/pages/admin-home-media.component.html

@@ -0,0 +1,373 @@
+<section class="section-card ui-section-card ui-stack ui-stack--roomy">
+  <header class="section-header ui-section-header">
+    <div class="header-copy ui-section-header__copy">
+      <p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
+      <h2 class="ui-section-header__title">Media home</h2>
+    </div>
+    <div class="header-side ui-stack ui-stack--dense">
+      <div class="header-stats ui-inline-actions">
+        <article class="stat-chip ui-stat-chip">
+          <strong>{{ configuredSectionCount }}</strong>
+          <span>sezioni gestite</span>
+        </article>
+        <article class="stat-chip ui-stat-chip">
+          <strong>{{ activeImageCount }}</strong>
+          <span>immagini attive</span>
+        </article>
+      </div>
+      <button
+        type="button"
+        class="ui-button"
+        (click)="loadHomeMedia()"
+        [disabled]="loading"
+      >
+        Aggiorna
+      </button>
+    </div>
+  </header>
+
+  <p class="status-banner ui-banner ui-banner--error" *ngIf="errorMessage">
+    {{ errorMessage }}
+  </p>
+  <p class="status-banner ui-banner ui-banner--success" *ngIf="successMessage">
+    {{ successMessage }}
+  </p>
+
+  <div class="group-stack ui-stack" *ngIf="!loading; else loadingTpl">
+    <section class="group-card ui-subpanel ui-subpanel--warm" *ngFor="let group of sectionGroups">
+      <header class="group-header ui-row ui-row--between">
+        <h3>{{ group.title }}</h3>
+      </header>
+
+      <div class="sections ui-stack ui-stack--dense">
+        <section
+          class="media-panel ui-subpanel ui-subpanel--elevated"
+          *ngFor="
+            let section of getSectionsForGroup(group.id);
+            trackBy: trackSection
+          "
+        >
+          <header class="media-panel-header ui-row ui-row--between ui-row--wrap">
+            <div class="media-panel-copy ui-stack ui-stack--dense">
+              <div class="title-row ui-row ui-row--center ui-row--wrap">
+                <h4>{{ section.title }}</h4>
+                <span class="count-pill ui-pill ui-pill--soft">
+                  {{ section.items.length }}
+                  {{ section.items.length === 1 ? "attiva" : "attive" }}
+                </span>
+              </div>
+            </div>
+            <div class="media-panel-meta ui-row ui-row--wrap ui-row--end">
+              <span class="usage-pill ui-pill ui-pill--neutral"
+                >{{ section.usageType }} / {{ section.usageKey }}</span
+              >
+              <span class="layout-pill ui-pill ui-pill--light">
+                Variante {{ section.preferredVariantName }}
+              </span>
+            </div>
+          </header>
+
+          <div class="workspace ui-workspace-compact">
+            <div class="upload-panel ui-subpanel ui-subpanel--soft">
+              <div class="panel-heading ui-stack ui-stack--dense">
+                <h5>
+                  {{
+                    getFormState(section.usageKey).replacingUsageId
+                      ? "Sostituisci immagine"
+                      : "Carica immagine"
+                  }}
+                </h5>
+              </div>
+
+              <div class="form-grid ui-form-grid ui-form-grid--two">
+                <div class="form-field form-field--wide ui-form-field">
+                  <span class="ui-form-caption">File immagine</span>
+                  <input
+                    [id]="'media-file-' + section.usageKey"
+                    class="sr-only"
+                    type="file"
+                    accept=".jpg,.jpeg,.png,.webp"
+                    (change)="onFileSelected(section.usageKey, $event)"
+                  />
+                  <label
+                    class="file-picker ui-file-picker"
+                    [for]="'media-file-' + section.usageKey"
+                  >
+                    <span class="file-picker-button ui-file-picker__button"
+                      >Scegli file</span
+                    >
+                    <span class="file-picker-name ui-file-picker__name">
+                      {{
+                        getFormState(section.usageKey).file?.name ||
+                          "Nessun file selezionato"
+                      }}
+                    </span>
+                  </label>
+                </div>
+
+                <div
+                  class="preview-card form-field--wide"
+                  *ngIf="
+                    getFormState(section.usageKey).previewUrl as previewUrl
+                  "
+                >
+                  <img [src]="previewUrl" alt="" />
+                </div>
+
+                <div class="language-toolbar form-field--wide ui-language-toolbar">
+                  <div class="language-copy ui-language-toolbar__copy">
+                    <span>Testi localizzati</span>
+                    <p>IT / EN / DE / FR obbligatorie</p>
+                  </div>
+                  <div class="language-toggle ui-language-toolbar__toggle">
+                    <button
+                      *ngFor="let language of mediaLanguages"
+                      type="button"
+                      class="language-toggle-btn ui-language-toolbar__button"
+                      [class.active]="
+                        getFormState(section.usageKey).activeLanguage ===
+                        language
+                      "
+                      [class.complete]="
+                        isLanguageComplete(section.usageKey, language)
+                      "
+                      [class.incomplete]="
+                        !isLanguageComplete(section.usageKey, language)
+                      "
+                      (click)="setActiveLanguage(section.usageKey, language)"
+                    >
+                      {{ mediaLanguageLabels[language] }}
+                    </button>
+                  </div>
+                </div>
+
+                <label class="form-field ui-form-field">
+                  <span class="ui-form-caption">
+                    Titolo ({{
+                      mediaLanguageLabels[
+                        getFormState(section.usageKey).activeLanguage
+                      ]
+                    }})
+                  </span>
+                  <input
+                    class="ui-form-control"
+                    type="text"
+                    [(ngModel)]="getActiveTranslation(section.usageKey).title"
+                    placeholder="Titolo immagine"
+                  />
+                </label>
+
+                <label class="form-field ui-form-field">
+                  <span class="ui-form-caption">
+                    Alt text ({{
+                      mediaLanguageLabels[
+                        getFormState(section.usageKey).activeLanguage
+                      ]
+                    }})
+                  </span>
+                  <input
+                    class="ui-form-control"
+                    type="text"
+                    [(ngModel)]="getActiveTranslation(section.usageKey).altText"
+                    placeholder="Testo alternativo"
+                  />
+                </label>
+
+                <label class="form-field ui-form-field">
+                  <span class="ui-form-caption">Sort order</span>
+                  <input
+                    class="ui-form-control"
+                    type="number"
+                    [(ngModel)]="getFormState(section.usageKey).sortOrder"
+                    min="0"
+                  />
+                </label>
+
+                <label class="toggle">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="getFormState(section.usageKey).isPrimary"
+                  />
+                  <span class="toggle-mark" aria-hidden="true"></span>
+                  <span>Primaria</span>
+                </label>
+              </div>
+
+              <div class="upload-actions ui-row ui-row--wrap">
+                <button
+                  type="button"
+                  class="ui-button"
+                  (click)="uploadForSection(section.usageKey)"
+                  [disabled]="
+                    getFormState(section.usageKey).saving ||
+                    !getFormState(section.usageKey).file
+                  "
+                >
+                  {{
+                    getFormState(section.usageKey).saving
+                      ? "Salvataggio..."
+                      : getFormState(section.usageKey).replacingUsageId
+                        ? "Sostituisci immagine"
+                        : "Carica in home"
+                  }}
+                </button>
+                <button
+                  type="button"
+                  class="ui-button ui-button--ghost"
+                  (click)="prepareAdd(section.usageKey)"
+                  [disabled]="getFormState(section.usageKey).saving"
+                >
+                  Nuova immagine
+                </button>
+                <button
+                  type="button"
+                  class="ui-button ui-button--ghost"
+                  *ngIf="getFormState(section.usageKey).replacingUsageId"
+                  (click)="cancelReplace(section.usageKey)"
+                  [disabled]="getFormState(section.usageKey).saving"
+                >
+                  Annulla sostituzione
+                </button>
+              </div>
+            </div>
+
+            <div class="list-panel ui-subpanel ui-subpanel--soft">
+              <div class="panel-heading ui-stack ui-stack--dense">
+                <h5>Immagini attive</h5>
+              </div>
+
+              <div
+                class="media-list ui-media-list"
+                *ngIf="section.items.length; else emptySectionState"
+              >
+                <article
+                  class="media-item ui-media-item"
+                  *ngFor="let item of section.items; trackBy: trackItem"
+                >
+                  <div class="thumb-wrap">
+                    <div class="thumb ui-thumb">
+                      <img
+                        *ngIf="item.previewUrl; else noPreviewTpl"
+                        [src]="item.previewUrl"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+
+                  <div class="media-copy ui-stack ui-stack--dense">
+                    <div class="media-copy-top ui-row ui-row--between ui-row--center ui-row--wrap">
+                      <div>
+                        <h6>
+                          {{
+                            getItemTranslation(
+                              item,
+                              getFormState(section.usageKey).activeLanguage
+                            ).title || item.originalFilename
+                          }}
+                        </h6>
+                        <p class="meta">
+                          {{ item.originalFilename }} | asset
+                          {{ item.mediaAssetId }}
+                        </p>
+                      </div>
+                      <span
+                        class="primary-badge ui-pill ui-pill--accent"
+                        *ngIf="item.isPrimary"
+                        >Primaria</span
+                      >
+                    </div>
+
+                    <p class="meta">
+                      Alt
+                      {{
+                        mediaLanguageLabels[
+                          getFormState(section.usageKey).activeLanguage
+                        ]
+                      }}:
+                      {{
+                        getItemTranslation(
+                          item,
+                          getFormState(section.usageKey).activeLanguage
+                        ).altText || "-"
+                      }}
+                    </p>
+                    <p class="meta">
+                      Sort order: {{ item.sortOrder }} | Inserita:
+                      {{ item.createdAt | date: "short" }}
+                    </p>
+
+                    <div class="sort-editor ui-row ui-row--wrap">
+                      <label>
+                        <span class="ui-form-caption">Nuovo ordine</span>
+                        <input
+                          class="ui-form-control"
+                          type="number"
+                          [(ngModel)]="item.draftSortOrder"
+                          min="0"
+                        />
+                      </label>
+                      <button
+                        type="button"
+                        class="ui-button ui-button--ghost"
+                        (click)="saveSortOrder(item)"
+                        [disabled]="
+                          isUsageBusy(item.usageId) ||
+                          item.draftSortOrder === item.sortOrder
+                        "
+                      >
+                        Salva ordine
+                      </button>
+                    </div>
+
+                    <div class="item-actions ui-row ui-row--wrap">
+                      <button
+                        type="button"
+                        class="ui-button ui-button--ghost"
+                        (click)="prepareReplace(section.usageKey, item)"
+                        [disabled]="isUsageBusy(item.usageId)"
+                      >
+                        Sostituisci
+                      </button>
+                      <button
+                        type="button"
+                        class="ui-button ui-button--ghost"
+                        (click)="setPrimary(item)"
+                        [disabled]="isUsageBusy(item.usageId) || item.isPrimary"
+                      >
+                        Rendi primaria
+                      </button>
+                      <button
+                        type="button"
+                        class="ui-button ui-button--ghost-danger"
+                        (click)="removeFromHome(item)"
+                        [disabled]="isUsageBusy(item.usageId)"
+                      >
+                        Rimuovi dalla home
+                      </button>
+                    </div>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </section>
+  </div>
+
+  <ng-template #emptySectionState>
+    <p class="empty-state ui-empty-state">
+      Nessuna immagine attiva collegata a questa sezione home.
+    </p>
+  </ng-template>
+
+  <ng-template #noPreviewTpl>
+    <div class="thumb thumb-empty ui-thumb ui-thumb--empty">
+      <span>Preview non disponibile</span>
+    </div>
+  </ng-template>
+</section>
+
+<ng-template #loadingTpl>
+  <p class="loading-state ui-empty-state">Caricamento media home...</p>
+</ng-template>

frontend/src/app/features/admin/pages/admin-home-media.component.scss

@@ -0,0 +1,110 @@
+.form-field--wide {
+  grid-column: 1 / -1;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  width: auto;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-bg-card);
+  align-self: end;
+  justify-self: start;
+  cursor: pointer;
+}
+
+.toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.toggle-mark {
+  width: 1.05rem;
+  height: 1.05rem;
+  position: relative;
+  flex: 0 0 auto;
+  border: 1px solid var(--color-border);
+  border-radius: 0.3rem;
+  background: #ffffff;
+}
+
+.toggle input:checked + .toggle-mark {
+  background: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+.toggle input:checked + .toggle-mark::after {
+  content: "";
+  position: absolute;
+  left: 0.31rem;
+  top: 0.12rem;
+  width: 0.22rem;
+  height: 0.46rem;
+  border: solid #ffffff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.toggle span {
+  font-size: 0.84rem;
+  font-weight: 600;
+}
+
+.preview-card {
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+}
+
+.preview-card img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.meta {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--color-text-muted);
+  overflow-wrap: anywhere;
+}
+
+.sort-editor {
+  align-items: end;
+}
+
+.sort-editor label {
+  display: grid;
+  gap: var(--space-1);
+  min-width: min(100%, 180px);
+}
+
+@media (max-width: 720px) {
+  .media-panel-meta {
+    justify-content: flex-start;
+  }
+
+  .sort-editor {
+    align-items: stretch;
+  }
+}

frontend/src/app/features/admin/pages/admin-home-media.component.ts

@@ -0,0 +1,644 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { of, switchMap } from 'rxjs';
+import {
+  AdminCreateMediaUsagePayload,
+  AdminMediaLanguage,
+  AdminMediaAsset,
+  AdminMediaService,
+  AdminMediaTranslation,
+  AdminMediaUsage,
+} from '../services/admin-media.service';
+
+type HomeSectionKey =
+  | 'shop-gallery'
+  | 'founders-gallery'
+  | 'capability-prototyping'
+  | 'capability-custom-parts'
+  | 'capability-small-series'
+  | 'capability-cad';
+
+interface HomeMediaSectionConfig {
+  usageType: 'HOME_SECTION';
+  usageKey: HomeSectionKey;
+  groupId: 'galleries' | 'capabilities';
+  title: string;
+  preferredVariantName: 'card' | 'hero';
+}
+
+interface HomeMediaFormState {
+  file: File | null;
+  previewUrl: string | null;
+  activeLanguage: AdminMediaLanguage;
+  translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
+  sortOrder: number;
+  isPrimary: boolean;
+  replacingUsageId: string | null;
+  saving: boolean;
+}
+
+interface HomeMediaItem {
+  usageId: string;
+  mediaAssetId: string;
+  originalFilename: string;
+  translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
+  sortOrder: number;
+  draftSortOrder: number;
+  isPrimary: boolean;
+  previewUrl: string | null;
+  createdAt: string;
+}
+
+interface HomeMediaSectionView extends HomeMediaSectionConfig {
+  items: HomeMediaItem[];
+}
+
+interface HomeMediaSectionGroup {
+  id: HomeMediaSectionConfig['groupId'];
+  title: string;
+}
+
+const SUPPORTED_MEDIA_LANGUAGES: readonly AdminMediaLanguage[] = [
+  'it',
+  'en',
+  'de',
+  'fr',
+];
+
+const MEDIA_LANGUAGE_LABELS: Readonly<Record<AdminMediaLanguage, string>> = {
+  it: 'IT',
+  en: 'EN',
+  de: 'DE',
+  fr: 'FR',
+};
+
+@Component({
+  selector: 'app-admin-home-media',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './admin-home-media.component.html',
+  styleUrl: './admin-home-media.component.scss',
+})
+export class AdminHomeMediaComponent implements OnInit, OnDestroy {
+  private readonly adminMediaService = inject(AdminMediaService);
+  readonly mediaLanguages = SUPPORTED_MEDIA_LANGUAGES;
+  readonly mediaLanguageLabels = MEDIA_LANGUAGE_LABELS;
+
+  readonly sectionGroups: readonly HomeMediaSectionGroup[] = [
+    {
+      id: 'galleries',
+      title: 'Gallery e visual principali',
+    },
+    {
+      id: 'capabilities',
+      title: 'Cosa puoi ottenere',
+    },
+  ];
+
+  readonly sectionConfigs: readonly HomeMediaSectionConfig[] = [
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'shop-gallery',
+      groupId: 'galleries',
+      title: 'Home: gallery shop',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'founders-gallery',
+      groupId: 'galleries',
+      title: 'Home: gallery founders',
+      preferredVariantName: 'hero',
+    },
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'capability-prototyping',
+      groupId: 'capabilities',
+      title: 'Home: prototipazione veloce',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'capability-custom-parts',
+      groupId: 'capabilities',
+      title: 'Home: pezzi personalizzati',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'capability-small-series',
+      groupId: 'capabilities',
+      title: 'Home: piccole serie',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'HOME_SECTION',
+      usageKey: 'capability-cad',
+      groupId: 'capabilities',
+      title: 'Home: consulenza e CAD',
+      preferredVariantName: 'card',
+    },
+  ];
+
+  sections: HomeMediaSectionView[] = [];
+  loading = false;
+  errorMessage: string | null = null;
+  successMessage: string | null = null;
+  actingUsageIds = new Set<string>();
+
+  private readonly formStateByKey: Record<HomeSectionKey, HomeMediaFormState> =
+    {
+      'shop-gallery': this.createEmptyFormState(),
+      'founders-gallery': this.createEmptyFormState(),
+      'capability-prototyping': this.createEmptyFormState(),
+      'capability-custom-parts': this.createEmptyFormState(),
+      'capability-small-series': this.createEmptyFormState(),
+      'capability-cad': this.createEmptyFormState(),
+    };
+
+  get configuredSectionCount(): number {
+    return this.sectionConfigs.length;
+  }
+
+  get activeImageCount(): number {
+    return this.sections.reduce(
+      (total, section) => total + section.items.length,
+      0,
+    );
+  }
+
+  ngOnInit(): void {
+    this.loadHomeMedia();
+  }
+
+  ngOnDestroy(): void {
+    (Object.keys(this.formStateByKey) as HomeSectionKey[]).forEach((key) => {
+      this.revokePreviewUrl(this.formStateByKey[key].previewUrl);
+    });
+  }
+
+  loadHomeMedia(): void {
+    this.loading = true;
+    this.errorMessage = null;
+    this.successMessage = null;
+
+    this.adminMediaService.listAssets().subscribe({
+      next: (assets) => {
+        this.sections = this.sectionConfigs.map((config) => ({
+          ...config,
+          items: this.buildSectionItems(assets, config),
+        }));
+        this.loading = false;
+        (Object.keys(this.formStateByKey) as HomeSectionKey[]).forEach(
+          (key) => {
+            if (!this.formStateByKey[key].saving) {
+              this.resetForm(key);
+            }
+          },
+        );
+      },
+      error: (error) => {
+        this.loading = false;
+        this.errorMessage = this.extractErrorMessage(
+          error,
+          'Impossibile caricare i media della home.',
+        );
+      },
+    });
+  }
+
+  getFormState(sectionKey: HomeSectionKey): HomeMediaFormState {
+    return this.formStateByKey[sectionKey];
+  }
+
+  onFileSelected(sectionKey: HomeSectionKey, event: Event): void {
+    const input = event.target as HTMLInputElement | null;
+    const file = input?.files?.[0] ?? null;
+    const formState = this.getFormState(sectionKey);
+
+    this.revokePreviewUrl(formState.previewUrl);
+    formState.file = file;
+    formState.previewUrl = file ? URL.createObjectURL(file) : null;
+
+    if (file && this.areAllTitlesBlank(formState.translations)) {
+      const nextTitle = this.deriveDefaultTitle(file.name);
+      for (const language of this.mediaLanguages) {
+        formState.translations[language].title = nextTitle;
+      }
+    }
+  }
+
+  prepareAdd(sectionKey: HomeSectionKey): void {
+    this.resetForm(sectionKey);
+  }
+
+  prepareReplace(sectionKey: HomeSectionKey, item: HomeMediaItem): void {
+    const formState = this.getFormState(sectionKey);
+    this.revokePreviewUrl(formState.previewUrl);
+    formState.file = null;
+    formState.previewUrl = item.previewUrl;
+    formState.translations = this.cloneTranslations(item.translations);
+    formState.sortOrder = item.sortOrder;
+    formState.isPrimary = item.isPrimary;
+    formState.replacingUsageId = item.usageId;
+  }
+
+  cancelReplace(sectionKey: HomeSectionKey): void {
+    this.resetForm(sectionKey);
+  }
+
+  uploadForSection(sectionKey: HomeSectionKey): void {
+    const section = this.sections.find((item) => item.usageKey === sectionKey);
+    const formState = this.getFormState(sectionKey);
+
+    if (!section || !formState.file || formState.saving) {
+      return;
+    }
+
+    const validationError = this.validateTranslations(formState.translations);
+    if (validationError) {
+      this.errorMessage = validationError;
+      return;
+    }
+
+    const normalizedTranslations = this.normalizeTranslations(
+      formState.translations,
+    );
+
+    formState.saving = true;
+    this.errorMessage = null;
+    this.successMessage = null;
+
+    const createUsagePayload = (
+      mediaAssetId: string,
+    ): AdminCreateMediaUsagePayload => ({
+      usageType: section.usageType,
+      usageKey: section.usageKey,
+      mediaAssetId,
+      sortOrder: formState.sortOrder,
+      isPrimary: formState.isPrimary,
+      isActive: true,
+      translations: normalizedTranslations,
+    });
+
+    this.adminMediaService
+      .uploadAsset(formState.file, {
+        title: normalizedTranslations.it.title,
+        altText: normalizedTranslations.it.altText,
+        visibility: 'PUBLIC',
+      })
+      .pipe(
+        switchMap((asset) =>
+          this.adminMediaService.createUsage(createUsagePayload(asset.id)),
+        ),
+        switchMap(() => {
+          if (!formState.replacingUsageId) {
+            return of(null);
+          }
+          return this.adminMediaService.updateUsage(
+            formState.replacingUsageId,
+            {
+              isActive: false,
+              isPrimary: false,
+            },
+          );
+        }),
+      )
+      .subscribe({
+        next: () => {
+          formState.saving = false;
+          this.successMessage = formState.replacingUsageId
+            ? 'Immagine home sostituita.'
+            : 'Immagine home caricata.';
+          this.loadHomeMedia();
+        },
+        error: (error) => {
+          formState.saving = false;
+          this.errorMessage = this.extractErrorMessage(
+            error,
+            'Upload immagine non riuscito.',
+          );
+        },
+      });
+  }
+
+  setPrimary(item: HomeMediaItem): void {
+    if (item.isPrimary || this.actingUsageIds.has(item.usageId)) {
+      return;
+    }
+
+    this.errorMessage = null;
+    this.successMessage = null;
+    this.actingUsageIds.add(item.usageId);
+
+    this.adminMediaService
+      .updateUsage(item.usageId, { isPrimary: true, isActive: true })
+      .subscribe({
+        next: () => {
+          this.actingUsageIds.delete(item.usageId);
+          this.successMessage = 'Immagine principale aggiornata.';
+          this.loadHomeMedia();
+        },
+        error: (error) => {
+          this.actingUsageIds.delete(item.usageId);
+          this.errorMessage = this.extractErrorMessage(
+            error,
+            'Aggiornamento immagine principale non riuscito.',
+          );
+        },
+      });
+  }
+
+  saveSortOrder(item: HomeMediaItem): void {
+    if (
+      this.actingUsageIds.has(item.usageId) ||
+      item.draftSortOrder === item.sortOrder
+    ) {
+      return;
+    }
+
+    this.errorMessage = null;
+    this.successMessage = null;
+    this.actingUsageIds.add(item.usageId);
+
+    this.adminMediaService
+      .updateUsage(item.usageId, { sortOrder: item.draftSortOrder })
+      .subscribe({
+        next: () => {
+          this.actingUsageIds.delete(item.usageId);
+          this.successMessage = 'Ordine immagine aggiornato.';
+          this.loadHomeMedia();
+        },
+        error: (error) => {
+          this.actingUsageIds.delete(item.usageId);
+          this.errorMessage = this.extractErrorMessage(
+            error,
+            'Aggiornamento ordine non riuscito.',
+          );
+        },
+      });
+  }
+
+  removeFromHome(item: HomeMediaItem): void {
+    if (this.actingUsageIds.has(item.usageId)) {
+      return;
+    }
+
+    this.errorMessage = null;
+    this.successMessage = null;
+    this.actingUsageIds.add(item.usageId);
+
+    this.adminMediaService
+      .updateUsage(item.usageId, { isActive: false, isPrimary: false })
+      .subscribe({
+        next: () => {
+          this.actingUsageIds.delete(item.usageId);
+          this.successMessage = 'Immagine rimossa dalla home.';
+          this.loadHomeMedia();
+        },
+        error: (error) => {
+          this.actingUsageIds.delete(item.usageId);
+          this.errorMessage = this.extractErrorMessage(
+            error,
+            'Rimozione immagine dalla home non riuscita.',
+          );
+        },
+      });
+  }
+
+  isUsageBusy(usageId: string): boolean {
+    return this.actingUsageIds.has(usageId);
+  }
+
+  setActiveLanguage(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): void {
+    this.getFormState(sectionKey).activeLanguage = language;
+  }
+
+  getActiveTranslation(sectionKey: HomeSectionKey): AdminMediaTranslation {
+    const formState = this.getFormState(sectionKey);
+    return formState.translations[formState.activeLanguage];
+  }
+
+  isLanguageComplete(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return this.isTranslationComplete(
+      this.getFormState(sectionKey).translations[language],
+    );
+  }
+
+  getItemTranslation(
+    item: HomeMediaItem,
+    language: AdminMediaLanguage,
+  ): AdminMediaTranslation {
+    return item.translations[language];
+  }
+
+  getSectionsForGroup(
+    groupId: HomeMediaSectionGroup['id'],
+  ): HomeMediaSectionView[] {
+    return this.sections.filter((section) => section.groupId === groupId);
+  }
+
+  trackSection(_: number, section: HomeMediaSectionView): string {
+    return section.usageKey;
+  }
+
+  trackItem(_: number, item: HomeMediaItem): string {
+    return item.usageId;
+  }
+
+  private buildSectionItems(
+    assets: readonly AdminMediaAsset[],
+    config: HomeMediaSectionConfig,
+  ): HomeMediaItem[] {
+    return assets
+      .flatMap((asset) =>
+        asset.usages
+          .filter(
+            (usage) =>
+              usage.isActive &&
+              usage.usageType === config.usageType &&
+              usage.usageKey === config.usageKey,
+          )
+          .map((usage) => this.toHomeMediaItem(asset, usage, config)),
+      )
+      .sort((left, right) => {
+        if (left.sortOrder !== right.sortOrder) {
+          return left.sortOrder - right.sortOrder;
+        }
+        return left.createdAt.localeCompare(right.createdAt);
+      });
+  }
+
+  private toHomeMediaItem(
+    asset: AdminMediaAsset,
+    usage: AdminMediaUsage,
+    config: HomeMediaSectionConfig,
+  ): HomeMediaItem {
+    return {
+      usageId: usage.id,
+      mediaAssetId: asset.id,
+      originalFilename: asset.originalFilename,
+      translations: this.normalizeTranslations(usage.translations),
+      sortOrder: usage.sortOrder ?? 0,
+      draftSortOrder: usage.sortOrder ?? 0,
+      isPrimary: usage.isPrimary,
+      previewUrl: this.resolvePreviewUrl(asset, config.preferredVariantName),
+      createdAt: usage.createdAt,
+    };
+  }
+
+  private resolvePreviewUrl(
+    asset: AdminMediaAsset,
+    preferredVariantName: 'card' | 'hero',
+  ): string | null {
+    const variantOrder =
+      preferredVariantName === 'hero'
+        ? ['hero', 'card', 'thumb']
+        : ['card', 'thumb', 'hero'];
+    const formatOrder = ['JPEG', 'WEBP', 'AVIF'];
+
+    for (const variantName of variantOrder) {
+      for (const format of formatOrder) {
+        const match = asset.variants.find(
+          (variant) =>
+            variant.variantName === variantName &&
+            variant.format === format &&
+            !!variant.publicUrl,
+        );
+        if (match?.publicUrl) {
+          return match.publicUrl;
+        }
+      }
+    }
+
+    return null;
+  }
+
+  private resetForm(sectionKey: HomeSectionKey): void {
+    const formState = this.getFormState(sectionKey);
+    const section = this.sections.find((item) => item.usageKey === sectionKey);
+    const nextSortOrder = (section?.items.at(-1)?.sortOrder ?? -1) + 1;
+
+    this.revokePreviewUrl(formState.previewUrl);
+    this.formStateByKey[sectionKey] = {
+      file: null,
+      previewUrl: null,
+      activeLanguage: 'it',
+      translations: this.createEmptyTranslations(),
+      sortOrder: Math.max(0, nextSortOrder),
+      isPrimary: (section?.items.length ?? 0) === 0,
+      replacingUsageId: null,
+      saving: false,
+    };
+  }
+
+  private revokePreviewUrl(previewUrl: string | null): void {
+    if (!previewUrl?.startsWith('blob:')) {
+      return;
+    }
+    URL.revokeObjectURL(previewUrl);
+  }
+
+  private deriveDefaultTitle(filename: string): string {
+    const normalized = filename.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ');
+    return normalized.trim();
+  }
+
+  private createEmptyFormState(): HomeMediaFormState {
+    return {
+      file: null,
+      previewUrl: null,
+      activeLanguage: 'it',
+      translations: this.createEmptyTranslations(),
+      sortOrder: 0,
+      isPrimary: false,
+      replacingUsageId: null,
+      saving: false,
+    };
+  }
+
+  private createEmptyTranslations(): Record<
+    AdminMediaLanguage,
+    AdminMediaTranslation
+  > {
+    return {
+      it: { title: '', altText: '' },
+      en: { title: '', altText: '' },
+      de: { title: '', altText: '' },
+      fr: { title: '', altText: '' },
+    };
+  }
+
+  private cloneTranslations(
+    translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
+  ): Record<AdminMediaLanguage, AdminMediaTranslation> {
+    return this.normalizeTranslations(translations);
+  }
+
+  private normalizeTranslations(
+    translations: Partial<
+      Record<AdminMediaLanguage, Partial<AdminMediaTranslation>>
+    >,
+  ): Record<AdminMediaLanguage, AdminMediaTranslation> {
+    return {
+      it: {
+        title: translations.it?.title?.trim() ?? '',
+        altText: translations.it?.altText?.trim() ?? '',
+      },
+      en: {
+        title: translations.en?.title?.trim() ?? '',
+        altText: translations.en?.altText?.trim() ?? '',
+      },
+      de: {
+        title: translations.de?.title?.trim() ?? '',
+        altText: translations.de?.altText?.trim() ?? '',
+      },
+      fr: {
+        title: translations.fr?.title?.trim() ?? '',
+        altText: translations.fr?.altText?.trim() ?? '',
+      },
+    };
+  }
+
+  private areAllTitlesBlank(
+    translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
+  ): boolean {
+    return this.mediaLanguages.every(
+      (language) => !translations[language].title.trim(),
+    );
+  }
+
+  private isTranslationComplete(translation: AdminMediaTranslation): boolean {
+    return !!translation.title.trim() && !!translation.altText.trim();
+  }
+
+  private validateTranslations(
+    translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
+  ): string | null {
+    for (const language of this.mediaLanguages) {
+      const translation = translations[language];
+      if (!translation.title.trim()) {
+        return `Compila il titolo per ${this.mediaLanguageLabels[language]}.`;
+      }
+      if (!translation.altText.trim()) {
+        return `Compila l'alt text per ${this.mediaLanguageLabels[language]}.`;
+      }
+    }
+    return null;
+  }
+
+  private extractErrorMessage(error: unknown, fallback: string): string {
+    const candidate = error as {
+      error?: { message?: string };
+      message?: string;
+    };
+    return candidate?.error?.message || candidate?.message || fallback;
+  }
+}

frontend/src/app/features/admin/pages/admin-sessions.component.html

@@ -1,12 +1,14 @@
-<section class="section-card">
-  <header class="section-header">
-    <div>
-      <h2>Sessioni quote</h2>
-      <p>Sessioni create dal configuratore con stato e conversione ordine.</p>
+<section class="section-card ui-section-card">
+  <header class="section-header ui-section-header">
+    <div class="ui-section-header__copy">
+      <h2 class="ui-section-header__title">Sessioni quote</h2>
+      <p class="ui-section-header__description">
+        Sessioni create dal configuratore con stato e conversione ordine.
+      </p>
     </div>
     <button
       type="button"
-      class="btn-primary"
+      class="ui-button"
       (click)="loadSessions()"
       [disabled]="loading"
     >
@@ -17,8 +19,8 @@
   <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>
   <p class="success" *ngIf="successMessage">{{ successMessage }}</p>
 
-  <div class="table-wrap" *ngIf="!loading; else loadingTpl">
-    <table>
+  <div class="table-wrap ui-table-wrap" *ngIf="!loading; else loadingTpl">
+    <table class="ui-data-table">
       <thead>
         <tr>
           <th>Sessione</th>
@@ -53,14 +55,14 @@
             <td class="actions">
               <button
                 type="button"
-                class="btn-secondary"
+                class="ui-button ui-button--ghost"
                 (click)="toggleSessionDetail(session)"
               >
                 {{ isDetailOpen(session.id) ? "Nascondi" : "Vedi" }}
               </button>
               <button
                 type="button"
-                class="btn-danger"
+                class="ui-button ui-button--danger"
                 (click)="deleteSession(session)"
                 [disabled]="
                   isDeletingSession(session.id) || !!session.convertedOrderId
@@ -92,6 +94,7 @@
                 <div class="detail-session-id">
                   <strong>UUID sessione:</strong>
                   <code
+                    class="ui-code-pill"
                     [title]="detail.session.id"
                     [appCopyOnClick]="detail.session.id"
                     >{{ detail.session.id }}</code

frontend/src/app/features/admin/pages/admin-sessions.component.scss

@@ -1,88 +1,17 @@
 .section-card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: clamp(12px, 2vw, 24px);
-  box-shadow: var(--shadow-sm);
-}
-
-.section-header {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: var(--space-4);
-  margin-bottom: var(--space-5);
-}
-
-h2 {
-  margin: 0;
-}
-
-p {
-  margin: var(--space-2) 0 0;
-  color: var(--color-text-muted);
-}
-
-button {
-  border: 0;
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-4);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.btn-primary {
-  background: var(--color-brand);
-  color: var(--color-neutral-900);
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-brand-hover);
-}
-
-.btn-danger {
-  background: var(--color-danger-500);
-  color: #fff;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #dc2626;
-}
-
-.btn-secondary {
-  background: transparent;
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-neutral-100);
-}
-
-.table-wrap {
-  overflow: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 920px;
-}
-
-th,
-td {
-  text-align: left;
-  padding: var(--space-3);
-  border-bottom: 1px solid var(--color-border);
+  flex-direction: column;
+  gap: var(--space-5);
 }
 
 .error {
   color: var(--color-danger-500);
+  margin: 0;
 }
 
 .success {
   color: var(--color-success-500);
+  margin: 0;
 }
 
 .actions {
@@ -112,10 +41,6 @@ td {
 .detail-session-id code {
   display: block;
   max-width: 100%;
-  padding: var(--space-2);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
-  background: var(--color-neutral-100);
   overflow-wrap: anywhere;
 }
 
@@ -144,11 +69,6 @@ td {
 }
 
 @media (max-width: 900px) {
-  .section-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
   .actions {
     flex-wrap: wrap;
   }
@@ -169,11 +89,11 @@ td {
 
 @media (max-width: 520px) {
   .section-card {
-    padding: var(--space-3);
+    gap: var(--space-4);
   }
 
-  th,
-  td {
+  .ui-data-table th,
+  .ui-data-table td {
     padding: var(--space-2);
     font-size: 0.86rem;
   }

frontend/src/app/features/admin/pages/admin-shell.component.html

@@ -17,6 +17,7 @@
           >
           <a routerLink="sessions" routerLinkActive="active">Sessioni</a>
           <a routerLink="cad-invoices" routerLinkActive="active">Fatture CAD</a>
+          <a routerLink="home-media" routerLinkActive="active">Media home</a>
         </nav>
       </div>
 

frontend/src/app/features/admin/services/admin-media.service.ts

@@ -0,0 +1,145 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+
+export type AdminMediaLanguage = 'it' | 'en' | 'de' | 'fr';
+
+export interface AdminMediaTranslation {
+  title: string;
+  altText: string;
+}
+
+export interface AdminMediaVariant {
+  id: string;
+  variantName: string;
+  format: string;
+  storageKey: string;
+  mimeType: string;
+  widthPx: number;
+  heightPx: number;
+  fileSizeBytes: number;
+  isGenerated: boolean;
+  publicUrl: string | null;
+  createdAt: string;
+}
+
+export interface AdminMediaUsage {
+  id: string;
+  usageType: string;
+  usageKey: string;
+  ownerId: string | null;
+  mediaAssetId: string;
+  sortOrder: number;
+  isPrimary: boolean;
+  isActive: boolean;
+  translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
+  createdAt: string;
+}
+
+export interface AdminMediaAsset {
+  id: string;
+  originalFilename: string;
+  storageKey: string;
+  mimeType: string;
+  fileSizeBytes: number;
+  sha256Hex: string;
+  widthPx: number | null;
+  heightPx: number | null;
+  status: string;
+  visibility: string;
+  title: string | null;
+  altText: string | null;
+  createdAt: string;
+  updatedAt: string;
+  variants: AdminMediaVariant[];
+  usages: AdminMediaUsage[];
+}
+
+export interface AdminMediaUploadPayload {
+  title?: string;
+  altText?: string;
+  visibility?: 'PUBLIC' | 'PRIVATE';
+}
+
+export interface AdminCreateMediaUsagePayload {
+  usageType: string;
+  usageKey: string;
+  ownerId?: string | null;
+  mediaAssetId: string;
+  sortOrder?: number;
+  isPrimary?: boolean;
+  isActive?: boolean;
+  translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
+}
+
+export interface AdminUpdateMediaUsagePayload {
+  usageType?: string;
+  usageKey?: string;
+  ownerId?: string | null;
+  mediaAssetId?: string;
+  sortOrder?: number;
+  isPrimary?: boolean;
+  isActive?: boolean;
+  translations?: Record<AdminMediaLanguage, AdminMediaTranslation>;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminMediaService {
+  private readonly http = inject(HttpClient);
+  private readonly baseUrl = `${environment.apiUrl}/api/admin/media`;
+
+  listAssets(): Observable<AdminMediaAsset[]> {
+    return this.http.get<AdminMediaAsset[]>(`${this.baseUrl}/assets`, {
+      withCredentials: true,
+    });
+  }
+
+  uploadAsset(
+    file: File,
+    payload: AdminMediaUploadPayload,
+  ): Observable<AdminMediaAsset> {
+    const formData = new FormData();
+    formData.append('file', file);
+    if (payload.title?.trim()) {
+      formData.append('title', payload.title.trim());
+    }
+    if (payload.altText?.trim()) {
+      formData.append('altText', payload.altText.trim());
+    }
+    if (payload.visibility?.trim()) {
+      formData.append('visibility', payload.visibility.trim());
+    }
+
+    return this.http.post<AdminMediaAsset>(`${this.baseUrl}/assets`, formData, {
+      withCredentials: true,
+    });
+  }
+
+  createUsage(
+    payload: AdminCreateMediaUsagePayload,
+  ): Observable<AdminMediaUsage> {
+    return this.http.post<AdminMediaUsage>(`${this.baseUrl}/usages`, payload, {
+      withCredentials: true,
+    });
+  }
+
+  updateUsage(
+    usageId: string,
+    payload: AdminUpdateMediaUsagePayload,
+  ): Observable<AdminMediaUsage> {
+    return this.http.patch<AdminMediaUsage>(
+      `${this.baseUrl}/usages/${usageId}`,
+      payload,
+      { withCredentials: true },
+    );
+  }
+
+  deleteUsage(usageId: string): Observable<void> {
+    return this.http.delete<void>(`${this.baseUrl}/usages/${usageId}`, {
+      withCredentials: true,
+    });
+  }
+}

frontend/src/app/features/checkout/checkout.component.html

@@ -1,7 +1,7 @@
 <div class="checkout-page">
-  <div class="container hero">
-    <h1 class="section-title">{{ "CHECKOUT.TITLE" | translate }}</h1>
-    <p class="cad-subtitle" *ngIf="isCadSession()">
+  <div class="container ui-page-hero">
+    <h1 class="ui-page-title">{{ "CHECKOUT.TITLE" | translate }}</h1>
+    <p class="ui-page-subtitle cad-subtitle" *ngIf="isCadSession()">
       Servizio CAD
       <ng-container *ngIf="cadRequestId()">
         riferito alla richiesta contatto #{{ cadRequestId() }}
@@ -10,7 +10,7 @@
   </div>
 
   <div class="container">
-    <div class="checkout-layout">
+    <div class="checkout-layout ui-two-column-layout">
       <!-- LEFT COLUMN: Form -->
       <div class="checkout-form-section">
         <!-- Error Message -->
@@ -21,10 +21,12 @@
         <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()" *ngIf="!error">
           <!-- Contact Info Card -->
           <app-card class="mb-6">
-            <div class="card-header-simple">
-              <h3>{{ "CHECKOUT.CONTACT_INFO" | translate }}</h3>
+            <div class="ui-card-header">
+              <h3 class="ui-card-title">
+                {{ "CHECKOUT.CONTACT_INFO" | translate }}
+              </h3>
             </div>
-            <div class="form-row">
+            <div class="ui-form-row">
               <app-input
                 formControlName="email"
                 type="email"
@@ -47,8 +49,10 @@
 
           <!-- Billing Address Card -->
           <app-card class="mb-6">
-            <div class="card-header-simple">
-              <h3>{{ "CHECKOUT.BILLING_ADDR" | translate }}</h3>
+            <div class="ui-card-header">
+              <h3 class="ui-card-title">
+                {{ "CHECKOUT.BILLING_ADDR" | translate }}
+              </h3>
             </div>
             <div formGroupName="billingAddress">
               <!-- User Type Selector -->
@@ -61,7 +65,7 @@
               </app-toggle-selector>
 
               <!-- Private Person Fields -->
-              <div *ngIf="!isCompany" class="form-row">
+              <div *ngIf="!isCompany" class="ui-form-row">
                 <app-input
                   formControlName="firstName"
                   [label]="'CHECKOUT.FIRST_NAME' | translate"
@@ -75,7 +79,10 @@
               </div>
 
               <!-- Company Fields -->
-              <div *ngIf="isCompany" class="company-fields mb-4">
+              <div
+                *ngIf="isCompany"
+                class="ui-field-stack ui-field-stack--indented mb-4"
+              >
                 <app-input
                   formControlName="companyName"
                   [label]="'CHECKOUT.COMPANY_NAME' | translate"
@@ -100,7 +107,7 @@
                 [label]="'CHECKOUT.ADDRESS_2' | translate"
               ></app-input>
 
-              <div class="form-row three-cols">
+              <div class="ui-form-row ui-form-row--three">
                 <app-input
                   formControlName="zip"
                   [label]="'CHECKOUT.ZIP' | translate"
@@ -123,10 +130,10 @@
           </app-card>
 
           <!-- Shipping Option -->
-          <div class="shipping-option">
-            <label class="checkbox-container">
+          <div class="shipping-option ui-soft-panel">
+            <label class="ui-checkbox">
               <input type="checkbox" formControlName="shippingSameAsBilling" />
-              <span class="checkmark"></span>
+              <span class="ui-checkbox__mark"></span>
               {{ "CHECKOUT.SHIPPING_SAME" | translate }}
             </label>
           </div>
@@ -136,11 +143,13 @@
             *ngIf="!checkoutForm.get('shippingSameAsBilling')?.value"
             class="mb-6"
           >
-            <div class="card-header-simple">
-              <h3>{{ "CHECKOUT.SHIPPING_ADDR" | translate }}</h3>
+            <div class="ui-card-header">
+              <h3 class="ui-card-title">
+                {{ "CHECKOUT.SHIPPING_ADDR" | translate }}
+              </h3>
             </div>
             <div formGroupName="shippingAddress">
-              <div class="form-row">
+              <div class="ui-form-row">
                 <app-input
                   formControlName="firstName"
                   [label]="'CHECKOUT.FIRST_NAME' | translate"
@@ -151,7 +160,10 @@
                 ></app-input>
               </div>
 
-              <div *ngIf="isCompany" class="company-fields">
+              <div
+                *ngIf="isCompany"
+                class="ui-field-stack ui-field-stack--indented"
+              >
                 <app-input
                   formControlName="companyName"
                   [label]="'CHECKOUT.COMPANY_OPTIONAL' | translate"
@@ -167,7 +179,7 @@
                 [label]="'CHECKOUT.ADDRESS_1' | translate"
               ></app-input>
 
-              <div class="form-row three-cols">
+              <div class="ui-form-row ui-form-row--three">
                 <app-input
                   formControlName="zip"
                   [label]="'CHECKOUT.ZIP' | translate"
@@ -187,9 +199,9 @@
           </app-card>
 
           <div class="legal-consent">
-            <label class="checkbox-container">
+            <label class="ui-checkbox">
               <input type="checkbox" formControlName="acceptLegal" />
-              <span class="checkmark"></span>
+              <span class="ui-checkbox__mark"></span>
               <span>
                 {{ "LEGAL.CONSENT.LABEL_PREFIX" | translate }}
                 <a href="/terms" target="_blank" rel="noopener">{{
@@ -213,7 +225,7 @@
             </div>
           </div>
 
-          <div class="actions">
+          <div class="ui-actions">
             <app-button
               type="submit"
               [disabled]="checkoutForm.invalid || isSubmitting()"
@@ -233,8 +245,10 @@
       <!-- RIGHT COLUMN: Order Summary -->
       <div class="checkout-summary-section">
         <app-card class="sticky-card">
-          <div class="card-header-simple">
-            <h3>{{ "CHECKOUT.SUMMARY_TITLE" | translate }}</h3>
+          <div class="ui-card-header">
+            <h3 class="ui-card-title">
+              {{ "CHECKOUT.SUMMARY_TITLE" | translate }}
+            </h3>
           </div>
 
           <div class="summary-items" *ngIf="quoteSession() as session">

frontend/src/app/features/checkout/checkout.component.scss

@@ -1,74 +1,5 @@
-.hero {
-  padding: var(--space-8) 0;
-  text-align: center;
-
-  .section-title {
-    font-size: 2.5rem;
-    margin-bottom: var(--space-2);
-  }
-}
-
 .cad-subtitle {
   margin: 0;
-  color: var(--color-text-muted);
-}
-
-.checkout-layout {
-  display: grid;
-  grid-template-columns: 1fr 420px;
-  gap: var(--space-8);
-  align-items: start;
-  margin-bottom: var(--space-12);
-
-  @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    gap: var(--space-8);
-  }
-}
-
-.card-header-simple {
-  margin-bottom: var(--space-6);
-  padding-bottom: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 0;
-  }
-}
-
-.form-row {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  margin-bottom: var(--space-4);
-
-  @media (min-width: 768px) {
-    flex-direction: row;
-    & > * {
-      flex: 1;
-    }
-  }
-
-  &.no-margin {
-    margin-bottom: 0;
-  }
-
-  &.three-cols {
-    display: grid;
-    grid-template-columns: 1.5fr 2fr 1fr;
-    gap: var(--space-4);
-
-    @media (max-width: 768px) {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  app-input {
-    width: 100%;
-  }
 }
 
 /* User Type Selector CSS has been extracted to app-toggle-selector component */
@@ -78,97 +9,18 @@ app-toggle-selector.user-type-selector-compact {
   max-width: 400px;
 }
 
-.company-fields {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  padding-left: var(--space-4);
-  border-left: 2px solid var(--color-border);
-  margin-bottom: var(--space-4);
-}
-
 .shipping-option {
   margin: var(--space-6) 0;
-  padding: var(--space-4);
-  background: var(--color-neutral-100);
-  border-radius: var(--radius-md);
 }
 
 .legal-consent {
   margin: var(--space-4) 0 var(--space-4);
-
-  .checkbox-container {
-    font-size: 0.95rem;
-    line-height: 1.4;
-    align-items: flex-start;
-    min-height: 24px;
-  }
-}
-
-/* Custom Checkbox */
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 36px;
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: 500;
-  user-select: none;
-  color: var(--color-text);
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-
-    &:checked ~ .checkmark {
-      background-color: var(--color-brand);
-      border-color: var(--color-brand);
-
-      &:after {
-        display: block;
-      }
-    }
-  }
-
-  .checkmark {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    height: 24px;
-    width: 24px;
-    background-color: var(--color-bg-card);
-    border: 2px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    transition: all 0.2s;
-
-    &:after {
-      content: "";
-      position: absolute;
-      display: none;
-      left: 7px;
-      top: 3px;
-      width: 6px;
-      height: 12px;
-      border: solid #000;
-      border-width: 0 2.5px 2.5px 0;
-      transform: rotate(45deg);
-    }
-  }
-
-  &:hover input ~ .checkmark {
-    border-color: var(--color-brand);
-  }
 }
 
 .consent-error {
   margin-top: var(--space-2);
-  margin-left: 36px;
-  color: var(--color-danger-500, #ef4444);
+  margin-left: 2.1rem;
+  color: var(--color-danger-500);
   font-size: 0.9rem;
 }
 
@@ -355,9 +207,7 @@ app-toggle-selector.user-type-selector-compact {
   padding-right: var(--space-3);
 }
 
-.actions {
-  margin-top: var(--space-8);
-
+.ui-actions {
   app-button {
     width: 100%;
   }
@@ -365,11 +215,11 @@ app-toggle-selector.user-type-selector-compact {
 
 .error-message {
   color: var(--color-error);
-  background: #fef2f2;
+  background: var(--color-surface-danger);
   padding: var(--space-4);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-6);
-  border: 1px solid #fee2e2;
+  border: 1px solid #fecaca;
   font-weight: 500;
 }
 

frontend/src/app/features/contact/components/contact-form/contact-form.component.html

@@ -6,16 +6,18 @@
 } @else {
   <form [formGroup]="form" (ngSubmit)="onSubmit()">
     <!-- Request Type -->
-    <div class="form-group">
-      <label>{{ "CONTACT.REQ_TYPE_LABEL" | translate }} *</label>
-      <select formControlName="requestType" class="form-control">
+    <div class="ui-form-group">
+      <label class="ui-form-label"
+        >{{ "CONTACT.REQ_TYPE_LABEL" | translate }} *</label
+      >
+      <select formControlName="requestType" class="ui-form-control">
         <option *ngFor="let type of requestTypes" [value]="type.value">
           {{ type.label | translate }}
         </option>
       </select>
     </div>
 
-    <div class="row">
+    <div class="ui-form-row">
       <!-- Phone -->
       <app-input
         formControlName="email"
@@ -35,22 +37,12 @@
     </div>
 
     <!-- User Type Selector (Segmented Control) -->
-    <div class="user-type-selector">
-      <div
-        class="type-option"
-        [class.selected]="!isCompany"
-        (click)="setCompanyMode(false)"
-      >
-        {{ "CONTACT.TYPE_PRIVATE" | translate }}
-      </div>
-      <div
-        class="type-option"
-        [class.selected]="isCompany"
-        (click)="setCompanyMode(true)"
-      >
-        {{ "CONTACT.TYPE_COMPANY" | translate }}
-      </div>
-    </div>
+    <app-toggle-selector
+      class="mb-4"
+      [options]="customerTypeOptions"
+      [selectedValue]="isCompany"
+      (selectionChange)="setCompanyMode($event)"
+    ></app-toggle-selector>
 
     <!-- Personal Name (Only if NOT Company) -->
     <app-input
@@ -61,7 +53,7 @@
     ></app-input>
 
     <!-- Company Fields (Only if Company) -->
-    <div *ngIf="isCompany" class="company-fields">
+    <div *ngIf="isCompany" class="ui-field-stack ui-field-stack--indented">
       <app-input
         formControlName="companyName"
         [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'"
@@ -74,20 +66,24 @@
       ></app-input>
     </div>
 
-    <div class="form-group">
-      <label>{{ "CONTACT.LABEL_MESSAGE" | translate }}</label>
+    <div class="ui-form-group">
+      <label class="ui-form-label">{{
+        "CONTACT.LABEL_MESSAGE" | translate
+      }}</label>
       <textarea
         formControlName="message"
-        class="form-control"
+        class="ui-form-control"
         rows="4"
       ></textarea>
     </div>
 
     <!-- File Upload Section -->
-    <div class="form-group">
-      <label>{{ "CONTACT.UPLOAD_LABEL" | translate }}</label>
-      <p class="hint">{{ "CONTACT.UPLOAD_HINT" | translate }}</p>
-      <p class="hint upload-privacy-note">
+    <div class="ui-form-group">
+      <label class="ui-form-label">{{
+        "CONTACT.UPLOAD_LABEL" | translate
+      }}</label>
+      <p class="ui-form-hint">{{ "CONTACT.UPLOAD_HINT" | translate }}</p>
+      <p class="ui-form-hint upload-privacy-note">
         {{ "LEGAL.CONSENT.UPLOAD_NOTICE_PREFIX" | translate }}
         <a href="/privacy" target="_blank" rel="noopener">{{
           "LEGAL.CONSENT.UPLOAD_NOTICE_LINK" | translate
@@ -160,9 +156,9 @@
     </div>
 
     <div class="legal-consent">
-      <label class="checkbox-container">
+      <label class="ui-checkbox">
         <input type="checkbox" formControlName="acceptLegal" />
-        <span class="checkmark"></span>
+        <span class="ui-checkbox__mark"></span>
         <span>
           {{ "LEGAL.CONSENT.LABEL_PREFIX" | translate }}
           <a href="/terms" target="_blank" rel="noopener">{{
@@ -185,7 +181,7 @@
       </div>
     </div>
 
-    <div class="actions">
+    <div class="ui-actions ui-actions--end">
       <app-button type="submit" [disabled]="form.invalid || sent()">
         {{
           sent()

frontend/src/app/features/contact/components/contact-form/contact-form.component.scss

@@ -1,109 +1,12 @@
-.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);
-}
-.hint {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  margin-bottom: var(--space-2);
-}
 .upload-privacy-note {
   margin-top: calc(var(--space-2) * -1);
   font-size: 0.78rem;
 }
 
-.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);
-  }
-}
-
-select.form-control {
-  appearance: none;
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
-  background-size: 1em;
-}
-
-.row {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  margin-bottom: var(--space-4);
-  @media (min-width: 768px) {
-    flex-direction: row;
-    .col {
-      flex: 1;
-      margin-bottom: 0;
-    }
-  }
-}
-
 app-input.col {
   width: 100%;
 }
 
-/* User Type Selector Styles */
-.user-type-selector {
-  display: flex;
-  background-color: var(--color-neutral-100);
-  border-radius: var(--radius-md);
-  padding: 4px;
-  margin-bottom: var(--space-4);
-  gap: 4px;
-  width: 100%; /* Full width */
-  max-width: 400px; /* Limit on desktop */
-}
-
-.type-option {
-  flex: 1; /* Equal width */
-  text-align: center;
-  padding: 8px 16px;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-muted);
-  transition: all 0.2s ease;
-  user-select: none;
-
-  &:hover {
-    color: var(--color-text);
-  }
-
-  &.selected {
-    background-color: var(--color-brand);
-    color: #000;
-    font-weight: 600;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-}
-
-.company-fields {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-  padding-left: var(--space-4);
-  border-left: 2px solid var(--color-border);
-  margin-bottom: var(--space-4);
-}
-
 /* File Upload Styles */
 .drop-zone {
   border: 2px dashed var(--color-border);
@@ -204,66 +107,6 @@ app-input.col {
 
 .legal-consent {
   margin: var(--space-4) 0 var(--space-4);
-}
-
-.checkbox-container {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding-left: 36px;
-  cursor: pointer;
-  font-size: 0.95rem;
-  font-weight: 500;
-  user-select: none;
-  color: var(--color-text);
-  line-height: 1.4;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-
-    &:checked ~ .checkmark {
-      background-color: var(--color-brand);
-      border-color: var(--color-brand);
-
-      &:after {
-        display: block;
-      }
-    }
-  }
-
-  .checkmark {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    height: 24px;
-    width: 24px;
-    background-color: var(--color-bg-card);
-    border: 2px solid var(--color-border);
-    border-radius: var(--radius-sm);
-    transition: all 0.2s;
-
-    &:after {
-      content: "";
-      position: absolute;
-      display: none;
-      left: 7px;
-      top: 3px;
-      width: 6px;
-      height: 12px;
-      border: solid #000;
-      border-width: 0 2.5px 2.5px 0;
-      transform: rotate(45deg);
-    }
-  }
-
-  &:hover input ~ .checkmark {
-    border-color: var(--color-brand);
-  }
 
   a {
     color: var(--color-brand);
@@ -273,8 +116,8 @@ app-input.col {
 
 .consent-error {
   margin-top: var(--space-2);
-  margin-left: 36px;
-  color: var(--color-danger-500, #ef4444);
+  margin-left: 2.1rem;
+  color: var(--color-danger-500);
   font-size: 0.9rem;
 }
 

frontend/src/app/features/contact/components/contact-form/contact-form.component.ts

@@ -9,6 +9,10 @@ import {
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { AppInputComponent } from '../../../../shared/components/app-input/app-input.component';
 import { AppButtonComponent } from '../../../../shared/components/app-button/app-button.component';
+import {
+  AppToggleSelectorComponent,
+  ToggleOption,
+} from '../../../../shared/components/app-toggle-selector/app-toggle-selector.component';
 import { QuoteEstimatorService } from '../../../calculator/services/quote-estimator.service';
 import { QuoteRequestService } from '../../../../core/services/quote-request.service';
 import { LanguageService } from '../../../../core/services/language.service';
@@ -30,6 +34,7 @@ import { SuccessStateComponent } from '../../../../shared/components/success-sta
     TranslateModule,
     AppInputComponent,
     AppButtonComponent,
+    AppToggleSelectorComponent,
     SuccessStateComponent,
   ],
   templateUrl: './contact-form.component.html',
@@ -52,6 +57,10 @@ export class ContactFormComponent implements OnDestroy {
     { value: 'consult', label: 'CONTACT.REQ_TYPE_CONSULT' },
     { value: 'question', label: 'CONTACT.REQ_TYPE_QUESTION' },
   ];
+  customerTypeOptions: ToggleOption[] = [
+    { label: 'CONTACT.TYPE_PRIVATE', value: false },
+    { label: 'CONTACT.TYPE_COMPANY', value: true },
+  ];
 
   private quoteRequestService = inject(QuoteRequestService);
   private languageService = inject(LanguageService);

frontend/src/app/features/home/home.component.html

@@ -1,16 +1,19 @@
 <main class="home-page">
   <section class="hero">
-    <div class="container hero-grid">
+    <div class="container hero-grid ui-content-grid ui-content-grid--spacious">
       <div class="hero-copy">
-        <p class="eyebrow">{{ "HOME.HERO_EYEBROW" | translate }}</p>
-        <h1 class="hero-title" [innerHTML]="'HOME.HERO_TITLE' | translate"></h1>
-        <p class="hero-lead">
+        <p class="eyebrow ui-eyebrow">{{ "HOME.HERO_EYEBROW" | translate }}</p>
+        <h1
+          class="hero-title ui-hero-display"
+          [innerHTML]="'HOME.HERO_TITLE' | translate"
+        ></h1>
+        <p class="hero-lead ui-copy-lead">
           {{ "HOME.HERO_LEAD" | translate }}
         </p>
-        <p class="hero-subtitle">
+        <p class="hero-subtitle ui-copy-subtitle">
           {{ "HOME.HERO_SUBTITLE" | translate }}
         </p>
-        <div class="hero-actions">
+        <div class="hero-actions ui-inline-actions ui-inline-actions--wide">
           <app-button variant="primary" routerLink="/calculator/basic">{{
             "HOME.BTN_CALCULATE" | translate
           }}</app-button>
@@ -25,65 +28,59 @@
     </div>
   </section>
 
-  <section class="section capabilities">
+  <section class="section capabilities ui-section-block">
     <div class="capabilities-bg"></div>
     <div class="container">
-      <div class="section-head">
-        <h2 class="section-title">{{ "HOME.SEC_CAP_TITLE" | translate }}</h2>
-        <p class="section-subtitle">
+      <div class="section-head ui-section-head">
+        <h2 class="section-title ui-section-display-title">
+          {{ "HOME.SEC_CAP_TITLE" | translate }}
+        </h2>
+        <p class="section-subtitle ui-section-display-subtitle">
           {{ "HOME.SEC_CAP_SUBTITLE" | translate }}
         </p>
       </div>
       <div class="cap-cards">
-        <app-card>
-          <div class="card-image-placeholder">
-            <img
-              src="assets/images/home/prototipi.jpg"
-              [attr.alt]="'HOME.CAP_1_TITLE' | translate"
-            />
+        <app-card
+          *ngFor="let card of capabilityCards(); trackBy: trackCapability"
+        >
+          <div class="card-image-placeholder ui-bleed-media">
+            @if (card.image; as image) {
+              <picture>
+                @if (image.source.avifUrl) {
+                  <source [srcset]="image.source.avifUrl" type="image/avif" />
+                }
+                @if (image.source.webpUrl) {
+                  <source [srcset]="image.source.webpUrl" type="image/webp" />
+                }
+                <img
+                  [src]="image.source.fallbackUrl"
+                  [attr.alt]="image.altText || (card.titleKey | translate)"
+                  width="640"
+                  height="400"
+                />
+              </picture>
+            } @else {
+              <div class="card-image-fallback ui-bleed-media__fallback">
+                <span>{{ card.titleKey | translate }}</span>
+              </div>
+            }
           </div>
-          <h3>{{ "HOME.CAP_1_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CAP_1_TEXT" | translate }}</p>
-        </app-card>
-        <app-card>
-          <div class="card-image-placeholder">
-            <img
-              src="assets/images/home/original-vs-3dprinted.jpg"
-              [attr.alt]="'HOME.CAP_2_TITLE' | translate"
-            />
-          </div>
-          <h3>{{ "HOME.CAP_2_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CAP_2_TEXT" | translate }}</p>
-        </app-card>
-        <app-card>
-          <div class="card-image-placeholder">
-            <img
-              src="assets/images/home/serie.jpg"
-              [attr.alt]="'HOME.CAP_3_TITLE' | translate"
-            />
-          </div>
-          <h3>{{ "HOME.CAP_3_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CAP_3_TEXT" | translate }}</p>
-        </app-card>
-        <app-card>
-          <div class="card-image-placeholder">
-            <img
-              src="assets/images/home/cad.jpg"
-              [attr.alt]="'HOME.CAP_4_TITLE' | translate"
-            />
-          </div>
-          <h3>{{ "HOME.CAP_4_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CAP_4_TEXT" | translate }}</p>
+          <h3>{{ card.titleKey | translate }}</h3>
+          <p class="text-muted ui-text-muted">{{ card.textKey | translate }}</p>
         </app-card>
       </div>
     </div>
   </section>
 
-  <section class="section calculator">
-    <div class="container calculator-grid">
+  <section class="section calculator ui-section-block">
+    <div
+      class="container calculator-grid ui-content-grid ui-content-grid--start ui-content-grid--split"
+    >
       <div class="calculator-copy">
-        <h2 class="section-title">{{ "HOME.SEC_CALC_TITLE" | translate }}</h2>
-        <p class="section-subtitle">
+        <h2 class="section-title ui-section-display-title">
+          {{ "HOME.SEC_CALC_TITLE" | translate }}
+        </h2>
+        <p class="section-subtitle ui-section-display-subtitle">
           {{ "HOME.SEC_CALC_SUBTITLE" | translate }}
         </p>
         <ul class="calculator-list">
@@ -91,23 +88,25 @@
         </ul>
       </div>
       <app-card class="quote-card">
-        <div class="quote-header">
+        <div class="quote-header ui-row ui-row--between">
           <div>
-            <p class="quote-eyebrow">
+            <p class="quote-eyebrow ui-eyebrow ui-eyebrow--compact">
               {{ "HOME.CARD_CALC_EYEBROW" | translate }}
             </p>
             <h3 class="quote-title">
               {{ "HOME.CARD_CALC_TITLE" | translate }}
             </h3>
           </div>
-          <span class="quote-tag">{{ "HOME.CARD_CALC_TAG" | translate }}</span>
+          <span class="quote-tag ui-pill ui-pill--accent">{{
+            "HOME.CARD_CALC_TAG" | translate
+          }}</span>
         </div>
-        <ul class="quote-steps">
+        <ul class="quote-steps ui-feature-list ui-feature-list--bullets">
           <li>{{ "HOME.CARD_CALC_STEP_1" | translate }}</li>
           <li>{{ "HOME.CARD_CALC_STEP_2" | translate }}</li>
           <li>{{ "HOME.CARD_CALC_STEP_3" | translate }}</li>
         </ul>
-        <div class="quote-actions">
+        <div class="quote-actions ui-actions ui-actions--stack">
           <app-button
             variant="primary"
             [fullWidth]="true"
@@ -125,10 +124,12 @@
     </div>
   </section>
 
-  <section class="section shop">
-    <div class="container split">
+  <section class="section shop ui-section-block">
+    <div class="container split ui-content-grid ui-content-grid--start ui-content-grid--split">
       <div class="shop-copy">
-        <h2 class="section-title">{{ "HOME.SEC_SHOP_TITLE" | translate }}</h2>
+        <h2 class="section-title ui-section-display-title">
+          {{ "HOME.SEC_SHOP_TITLE" | translate }}
+        </h2>
         <p>
           {{ "HOME.SEC_SHOP_TEXT" | translate }}
         </p>
@@ -137,7 +138,7 @@
           <li>{{ "HOME.SEC_SHOP_LIST_2" | translate }}</li>
           <li>{{ "HOME.SEC_SHOP_LIST_3" | translate }}</li>
         </ul>
-        <div class="shop-actions">
+        <div class="shop-actions ui-inline-actions">
           <app-button variant="primary" routerLink="/shop">{{
             "HOME.BTN_DISCOVER" | translate
           }}</app-button>
@@ -147,42 +148,65 @@
         </div>
       </div>
       <div
-        class="shop-gallery"
+        class="shop-gallery ui-gallery-strip"
         tabindex="0"
         [attr.aria-label]="'HOME.SHOP_GALLERY_ARIA' | translate"
       >
         <figure
-          class="shop-gallery-item"
-          *ngFor="let image of shopGalleryImages"
+          class="shop-gallery-item ui-gallery-card"
+          *ngFor="let image of shopGalleryImages(); trackBy: trackMediaAsset"
         >
-          <img [src]="image.src" [alt]="image.alt | translate" />
+          <picture>
+            <source
+              *ngIf="image.source.avifUrl"
+              [srcset]="image.source.avifUrl"
+              type="image/avif"
+            />
+            <source
+              *ngIf="image.source.webpUrl"
+              [srcset]="image.source.webpUrl"
+              type="image/webp"
+            />
+            <img
+              [src]="image.source.fallbackUrl"
+              [attr.alt]="image.altText || ('HOME.SEC_SHOP_TITLE' | translate)"
+            />
+          </picture>
         </figure>
       </div>
       <div class="shop-cards">
         <app-card>
           <h3>{{ "HOME.CARD_SHOP_1_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CARD_SHOP_1_TEXT" | translate }}</p>
+          <p class="text-muted ui-text-muted">
+            {{ "HOME.CARD_SHOP_1_TEXT" | translate }}
+          </p>
         </app-card>
         <app-card>
           <h3>{{ "HOME.CARD_SHOP_2_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CARD_SHOP_2_TEXT" | translate }}</p>
+          <p class="text-muted ui-text-muted">
+            {{ "HOME.CARD_SHOP_2_TEXT" | translate }}
+          </p>
         </app-card>
         <app-card>
           <h3>{{ "HOME.CARD_SHOP_3_TITLE" | translate }}</h3>
-          <p class="text-muted">{{ "HOME.CARD_SHOP_3_TEXT" | translate }}</p>
+          <p class="text-muted ui-text-muted">
+            {{ "HOME.CARD_SHOP_3_TEXT" | translate }}
+          </p>
         </app-card>
       </div>
     </div>
   </section>
 
-  <section class="section about">
-    <div class="container about-grid">
+  <section class="section about ui-section-block">
+    <div class="container about-grid ui-content-grid ui-content-grid--start ui-content-grid--split">
       <div class="about-copy">
-        <h2 class="section-title">{{ "HOME.SEC_ABOUT_TITLE" | translate }}</h2>
+        <h2 class="section-title ui-section-display-title">
+          {{ "HOME.SEC_ABOUT_TITLE" | translate }}
+        </h2>
         <p>
           {{ "HOME.SEC_ABOUT_TEXT" | translate }}
         </p>
-        <div class="about-actions">
+        <div class="about-actions ui-inline-actions">
           <app-button variant="primary" routerLink="/about">{{
             "HOME.SEC_ABOUT_TITLE" | translate
           }}</app-button>
@@ -192,30 +216,44 @@
         </div>
       </div>
       <div class="about-media">
-        <div class="about-feature-image">
-          <img
-            class="about-feature-photo"
-            [src]="founderImages[founderImageIndex].src"
-            [alt]="founderImages[founderImageIndex].alt | translate"
-            width="1200"
-            height="900"
-          />
-          <button
-            type="button"
-            class="founder-nav founder-nav-prev"
-            (click)="prevFounderImage()"
-            [attr.aria-label]="'HOME.FOUNDER_PREV_ARIA' | translate"
-          >
-            ‹
-          </button>
-          <button
-            type="button"
-            class="founder-nav founder-nav-next"
-            (click)="nextFounderImage()"
-            [attr.aria-label]="'HOME.FOUNDER_NEXT_ARIA' | translate"
-          >
-            ›
-          </button>
+        <div class="about-feature-image ui-media-frame ui-media-frame--wide">
+          @if (currentFounderImage(); as image) {
+            <picture>
+              @if (image.source.avifUrl) {
+                <source [srcset]="image.source.avifUrl" type="image/avif" />
+              }
+              @if (image.source.webpUrl) {
+                <source [srcset]="image.source.webpUrl" type="image/webp" />
+              }
+              <img
+                class="about-feature-photo"
+                [src]="image.source.fallbackUrl"
+                [attr.alt]="
+                  image.altText || ('HOME.SEC_ABOUT_TITLE' | translate)
+                "
+                width="1200"
+                height="900"
+              />
+            </picture>
+          }
+          @if (founderImages().length > 1) {
+            <button
+              type="button"
+              class="founder-nav founder-nav-prev ui-nav-button"
+              (click)="prevFounderImage()"
+              [attr.aria-label]="'HOME.FOUNDER_PREV_ARIA' | translate"
+            >
+              ‹
+            </button>
+            <button
+              type="button"
+              class="founder-nav founder-nav-next ui-nav-button"
+              (click)="nextFounderImage()"
+              [attr.aria-label]="'HOME.FOUNDER_NEXT_ARIA' | translate"
+            >
+              ›
+            </button>
+          }
         </div>
       </div>
     </div>

frontend/src/app/features/home/home.component.scss

@@ -11,7 +11,7 @@
   padding: 6rem 0 5rem;
   overflow: hidden;
   background: var(--home-bg);
-  // Enhanced Grid Pattern
+
   &::after {
     content: "";
     position: absolute;
@@ -24,7 +24,6 @@
   }
 }
 
-// Keep the accent blob
 .hero::before {
   content: "";
   position: absolute;
@@ -42,300 +41,70 @@
   animation: floatGlow 12s ease-in-out infinite;
 }
 
-.hero-grid {
-  display: grid;
-  gap: var(--space-12);
-  align-items: center;
-  position: relative;
-  z-index: 1;
-}
-
 .hero-copy {
   animation: fadeUp 0.8s ease both;
 }
-.hero-panel {
-  animation: fadeUp 0.8s ease 0.15s both;
-}
 
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-size: 0.75rem;
-  color: var(--color-secondary-600);
-  margin-bottom: var(--space-3);
-  font-weight: 600;
-}
-.hero-title {
-  font-size: clamp(2.5rem, 2.4vw + 1.8rem, 4rem);
-  font-weight: 700;
-  line-height: 1.05;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--space-4);
-}
-.hero-lead {
-  font-size: 1.35rem;
-  font-weight: 500;
-  color: var(--color-neutral-900);
-  margin-bottom: var(--space-3);
-  max-width: 600px;
-}
-.hero-subtitle {
-  font-size: 1.1rem;
-  color: var(--color-text-muted);
-  max-width: 560px;
-  line-height: 1.6;
-}
-.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;
-  color: var(--color-brand-600);
-  background: var(--color-brand-50);
-  border-color: var(--color-brand-200);
-}
-.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.capabilities {
+.capabilities {
   position: relative;
   border-bottom: 1px solid var(--color-border);
   padding-top: 4.5rem;
 }
+
 .capabilities-bg {
   display: none;
 }
 
-.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 {
   position: relative;
   border-bottom: 1px solid var(--color-border);
 }
-.calculator-grid {
-  display: grid;
-  gap: var(--space-10);
-  align-items: start;
-  position: relative;
-  z-index: 1;
-}
+
 .calculator-list {
   padding-left: var(--space-4);
   color: var(--color-text-muted);
   margin: var(--space-6) 0 0;
 }
+
 .cap-cards {
   display: grid;
   gap: var(--space-4);
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
 
-.card-image-placeholder {
-  width: 100%;
-  height: 160px;
-  background: #f5f5f5;
-  margin: -1.5rem -1.5rem 1.5rem -1.5rem; /* Negative margins to bleed to edge */
-  width: calc(100% + 3rem);
-  border-top-left-radius: var(--radius-lg);
-  border-top-right-radius: var(--radius-lg);
-  border-bottom: 1px solid var(--color-neutral-300);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-neutral-400);
-  overflow: hidden;
-}
-
-.card-image-placeholder img {
-  width: 100%;
-  height: 100%;
+.quote-card {
   display: block;
-  object-fit: cover;
 }
 
 .shop {
   background: var(--home-bg);
   position: relative;
 }
+
 .shop .split {
   align-items: start;
 }
+
 .shop-copy {
   max-width: 760px;
 }
-.split {
-  display: grid;
-  gap: var(--space-10);
-  align-items: center;
-  position: relative;
-  z-index: 1;
-}
+
 .shop-list {
   padding-left: var(--space-4);
   color: var(--color-text-muted);
   margin-bottom: var(--space-6);
 }
-.shop-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
+
 .shop-gallery {
-  display: flex;
-  gap: var(--space-4);
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  padding-bottom: var(--space-2);
-  scrollbar-width: thin;
   width: min(100%, 440px);
   justify-self: end;
   aspect-ratio: 16 / 11;
 }
 
 .shop-gallery-item {
-  flex: 0 0 100%;
-  margin: 0;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  background: var(--color-neutral-100);
-  box-shadow: var(--shadow-sm);
-  scroll-snap-align: start;
   aspect-ratio: 16 / 10;
 }
 
-.shop-gallery-item img {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
 .shop-cards {
   display: grid;
   gap: var(--space-4);
@@ -356,34 +125,13 @@
   border-top: 1px solid var(--color-border);
   position: relative;
 }
-.about-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-3);
-}
-.about-grid {
-  display: grid;
-  gap: var(--space-10);
-  align-items: center;
-}
+
 .about-media {
   position: relative;
   display: flex;
   justify-content: flex-end;
 }
 
-.about-feature-image {
-  width: 100%;
-  max-width: 620px;
-  aspect-ratio: 16 / 10;
-  border-radius: var(--radius-lg);
-  background: var(--color-neutral-100);
-  border: 1px solid var(--color-border);
-  position: relative;
-  overflow: hidden;
-  contain: layout paint;
-}
-
 .about-feature-photo {
   position: absolute;
   inset: 0;
@@ -393,109 +141,52 @@
   object-fit: cover;
 }
 
-.founder-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  background: rgba(17, 24, 39, 0.45);
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  line-height: 1;
-  cursor: pointer;
-  z-index: 1;
-  transition: background-color 0.2s ease;
-}
-
-.founder-nav:hover {
-  background: rgba(17, 24, 39, 0.7);
-}
-
 .founder-nav-prev {
   left: 0.75rem;
 }
+
 .founder-nav-next {
   right: 0.75rem;
 }
 
-.founder-nav:focus-visible {
-  outline: 2px solid var(--color-brand);
-  outline-offset: 2px;
-}
-.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;
-  }
-  .calculator-grid {
-    grid-template-columns: 1.1fr 0.9fr;
-  }
-  .split {
-    grid-template-columns: 1.1fr 0.9fr;
-  }
   .shop-copy {
     grid-column: 1;
   }
+
   .shop-gallery {
     grid-column: 2;
   }
+
   .shop-cards {
     grid-column: 1 / -1;
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
-  .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;
-  }
   .shop-gallery {
     width: 100%;
     max-width: none;
     justify-self: stretch;
   }
+
   .shop-gallery-item {
     aspect-ratio: 16 / 11;
   }
+
   .shop-cards {
     grid-template-columns: 1fr;
   }
+
   .about-media {
     justify-content: flex-start;
   }
+
   .about-feature-image {
     max-width: min(100%, 360px);
     aspect-ratio: 16 / 11;
   }
-  .founder-nav {
-    width: 2rem;
-    height: 2rem;
-    font-size: 1.25rem;
-  }
 }
 
 @keyframes fadeUp {
@@ -503,26 +194,29 @@
     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 {
+  .hero-copy {
     animation: none;
   }
+
   .hero::before {
     animation: none;
   }

frontend/src/app/features/home/home.component.ts

@@ -1,9 +1,58 @@
-import { Component } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 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';
+import {
+  buildPublicMediaUsageScopeKey,
+  PublicMediaDisplayImage,
+  PublicMediaImage,
+  PublicMediaService,
+  PublicMediaUsageCollectionMap,
+} from '../../core/services/public-media.service';
+
+const EMPTY_MEDIA_COLLECTIONS: PublicMediaUsageCollectionMap = {};
+
+type HomeCapabilityUsageKey =
+  | 'capability-prototyping'
+  | 'capability-custom-parts'
+  | 'capability-small-series'
+  | 'capability-cad';
+
+interface HomeCapabilityConfig {
+  usageKey: HomeCapabilityUsageKey;
+  titleKey: string;
+  textKey: string;
+}
+
+interface HomeCapabilityCard extends HomeCapabilityConfig {
+  image: PublicMediaDisplayImage | null;
+}
+
+const HOME_CAPABILITY_CONFIGS: readonly HomeCapabilityConfig[] = [
+  {
+    usageKey: 'capability-prototyping',
+    titleKey: 'HOME.CAP_1_TITLE',
+    textKey: 'HOME.CAP_1_TEXT',
+  },
+  {
+    usageKey: 'capability-custom-parts',
+    titleKey: 'HOME.CAP_2_TITLE',
+    textKey: 'HOME.CAP_2_TEXT',
+  },
+  {
+    usageKey: 'capability-small-series',
+    titleKey: 'HOME.CAP_3_TITLE',
+    textKey: 'HOME.CAP_3_TEXT',
+  },
+  {
+    usageKey: 'capability-cad',
+    titleKey: 'HOME.CAP_4_TITLE',
+    textKey: 'HOME.CAP_4_TEXT',
+  },
+];
 
 @Component({
   selector: 'app-home-page',
@@ -19,37 +68,148 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-  readonly shopGalleryImages = [
-    {
-      src: 'assets/images/home/supporto-bici.jpg',
-      alt: 'HOME.SHOP_IMAGE_ALT_1',
-    },
-  ];
+  private readonly publicMediaService = inject(PublicMediaService);
 
-  readonly founderImages = [
-    {
-      src: 'assets/images/home/da-cambiare.jpg',
-      alt: 'HOME.FOUNDER_IMAGE_ALT_1',
-    },
-    {
-      src: 'assets/images/home/vino.JPG',
-      alt: 'HOME.FOUNDER_IMAGE_ALT_2',
-    },
-  ];
+  private readonly mediaByUsage = toSignal(
+    this.publicMediaService.getUsageCollections([
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'shop-gallery',
+      },
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'founders-gallery',
+      },
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'capability-prototyping',
+      },
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'capability-custom-parts',
+      },
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'capability-small-series',
+      },
+      {
+        usageType: 'HOME_SECTION',
+        usageKey: 'capability-cad',
+      },
+    ]),
+    { initialValue: EMPTY_MEDIA_COLLECTIONS },
+  );
 
-  founderImageIndex = 0;
+  readonly shopGalleryImages = computed<readonly PublicMediaDisplayImage[]>(
+    () =>
+      (
+        this.mediaByUsage()[
+          buildPublicMediaUsageScopeKey('HOME_SECTION', 'shop-gallery')
+        ] ?? []
+      )
+        .map((item: PublicMediaImage) =>
+          this.publicMediaService.toDisplayImage(item, 'card'),
+        )
+        .filter(
+          (
+            item: PublicMediaDisplayImage | null,
+          ): item is PublicMediaDisplayImage => item !== null,
+        ),
+  );
+
+  readonly founderImages = computed<readonly PublicMediaDisplayImage[]>(() =>
+    (
+      this.mediaByUsage()[
+        buildPublicMediaUsageScopeKey('HOME_SECTION', 'founders-gallery')
+      ] ?? []
+    )
+      .map((item: PublicMediaImage) =>
+        this.publicMediaService.toDisplayImage(item, 'hero'),
+      )
+      .filter(
+        (
+          item: PublicMediaDisplayImage | null,
+        ): item is PublicMediaDisplayImage => item !== null,
+      ),
+  );
+
+  readonly capabilityCards = computed<readonly HomeCapabilityCard[]>(() =>
+    HOME_CAPABILITY_CONFIGS.map((config) => this.buildCapabilityCard(config)),
+  );
+
+  readonly founderImageIndex = signal(0);
+  readonly currentFounderImage = computed<PublicMediaDisplayImage | null>(
+    () => {
+      const images = this.founderImages();
+      if (images.length === 0) {
+        return null;
+      }
+      return images[this.founderImageIndex()] ?? images[0] ?? null;
+    },
+  );
+
+  constructor() {
+    effect(() => {
+      const images = this.founderImages();
+      const currentIndex = this.founderImageIndex();
+      if (images.length === 0) {
+        if (currentIndex !== 0) {
+          this.founderImageIndex.set(0);
+        }
+        return;
+      }
+      if (currentIndex >= images.length) {
+        this.founderImageIndex.set(0);
+      }
+    });
+  }
 
   prevFounderImage(): void {
-    this.founderImageIndex =
-      this.founderImageIndex === 0
-        ? this.founderImages.length - 1
-        : this.founderImageIndex - 1;
+    const totalImages = this.founderImages().length;
+    if (totalImages <= 1) {
+      return;
+    }
+    this.founderImageIndex.set(
+      this.founderImageIndex() === 0
+        ? totalImages - 1
+        : this.founderImageIndex() - 1,
+    );
   }
 
   nextFounderImage(): void {
-    this.founderImageIndex =
-      this.founderImageIndex === this.founderImages.length - 1
+    const totalImages = this.founderImages().length;
+    if (totalImages <= 1) {
+      return;
+    }
+    this.founderImageIndex.set(
+      this.founderImageIndex() === totalImages - 1
         ? 0
-        : this.founderImageIndex + 1;
+        : this.founderImageIndex() + 1,
+    );
+  }
+
+  trackMediaAsset(_: number, image: PublicMediaDisplayImage): string {
+    return image.mediaAssetId;
+  }
+
+  trackCapability(_: number, card: HomeCapabilityCard): string {
+    return card.usageKey;
+  }
+
+  private buildCapabilityCard(
+    config: HomeCapabilityConfig,
+  ): HomeCapabilityCard {
+    const items =
+      this.mediaByUsage()[
+        buildPublicMediaUsageScopeKey('HOME_SECTION', config.usageKey)
+      ] ?? [];
+    const primaryImage = this.publicMediaService.pickPrimaryUsage(items);
+
+    return {
+      ...config,
+      image: primaryImage
+        ? this.publicMediaService.toDisplayImage(primaryImage, 'card')
+        : null,
+    };
   }
 }

frontend/src/app/features/order/order.component.html

@@ -1,5 +1,5 @@
-<div class="container hero">
-  <h1>
+<div class="container ui-page-hero ui-page-hero--spacious">
+  <h1 class="ui-page-title">
     {{ "TRACKING.TITLE" | translate }}
     <ng-container *ngIf="order()">
       <br /><span class="order-id-title"
@@ -7,7 +7,7 @@
       >
     </ng-container>
   </h1>
-  <p class="subtitle">{{ "TRACKING.SUBTITLE" | translate }}</p>
+  <p class="ui-page-subtitle subtitle">{{ "TRACKING.SUBTITLE" | translate }}</p>
 </div>
 
 <div class="container">
@@ -69,18 +69,18 @@
         </div>
       </app-card>
 
-      <div class="payment-layout">
+      <div class="payment-layout ui-two-column-layout">
         <div class="payment-main">
           <app-card class="mb-6">
-            <div class="card-header-simple">
-              <h3>{{ "PAYMENT.METHOD" | translate }}</h3>
+            <div class="ui-card-header">
+              <h3 class="ui-card-title">{{ "PAYMENT.METHOD" | translate }}</h3>
             </div>
 
             <div class="payment-selection">
-              <div class="methods-grid">
+              <div class="ui-choice-grid">
                 <div
-                  class="type-option"
-                  [class.selected]="selectedPaymentMethod === 'twint'"
+                  class="ui-choice-card"
+                  [class.is-selected]="selectedPaymentMethod === 'twint'"
                   (click)="selectPayment('twint')"
                 >
                   <span class="method-name">{{
@@ -88,8 +88,8 @@
                   }}</span>
                 </div>
                 <div
-                  class="type-option"
-                  [class.selected]="selectedPaymentMethod === 'bill'"
+                  class="ui-choice-card"
+                  [class.is-selected]="selectedPaymentMethod === 'bill'"
                   (click)="selectPayment('bill')"
                 >
                   <span class="method-name">{{
@@ -100,7 +100,7 @@
             </div>
 
             <div
-              class="payment-details fade-in text-center"
+              class="payment-details ui-soft-panel fade-in text-center"
               *ngIf="selectedPaymentMethod === 'twint'"
             >
               <div class="details-header">
@@ -120,21 +120,12 @@
                 </p>
                 <div class="twint-mobile-action twint-button-container">
                   <button
-                    style="
-                      width: auto;
-                      height: 58px;
-                      border-radius: 6px;
-                      display: flex;
-                      justify-content: center;
-                      cursor: pointer;
-                      background-color: transparent;
-                      border: none;
-                      align-items: center;
-                    "
+                    type="button"
+                    class="twint-launch-button"
                     (click)="openTwintPayment()"
                   >
                     <img
-                      style="width: auto; height: 58px"
+                      class="twint-launch-button__image"
                       [attr.alt]="'PAYMENT.TWINT_BUTTON_ALT' | translate"
                       [src]="getTwintButtonImageUrl()"
                     />
@@ -148,7 +139,7 @@
             </div>
 
             <div
-              class="payment-details fade-in text-center"
+              class="payment-details ui-soft-panel fade-in text-center"
               *ngIf="selectedPaymentMethod === 'bill'"
             >
               <div class="details-header">
@@ -167,7 +158,7 @@
               </div>
             </div>
 
-            <div class="actions">
+            <div class="ui-actions">
               <app-button
                 variant="outline"
                 (click)="completeOrder()"
@@ -188,9 +179,13 @@
 
         <div class="payment-summary">
           <app-card class="sticky-card">
-            <div class="card-header-simple">
-              <h3>{{ "PAYMENT.SUMMARY_TITLE" | translate }}</h3>
-              <p class="order-id">#{{ getDisplayOrderNumber(o) }}</p>
+            <div class="ui-card-header">
+              <h3 class="ui-card-title">
+                {{ "PAYMENT.SUMMARY_TITLE" | translate }}
+              </h3>
+              <p class="ui-card-subtitle order-id">
+                #{{ getDisplayOrderNumber(o) }}
+              </p>
             </div>
 
             <app-price-breakdown

frontend/src/app/features/order/order.component.scss

@@ -1,99 +1,13 @@
-.hero {
-  padding: var(--space-12) 0 var(--space-8);
-  text-align: center;
-
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: var(--space-2);
-  }
-}
-
 .subtitle {
   font-size: 1.125rem;
-  color: var(--color-text-muted);
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.payment-layout {
-  display: grid;
-  grid-template-columns: 1fr 400px;
-  gap: var(--space-8);
-  align-items: start;
-  margin-bottom: var(--space-12);
-
-  @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    gap: var(--space-8);
-  }
-}
-
-.card-header-simple {
-  margin-bottom: var(--space-6);
-  padding-bottom: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--color-text);
-    margin: 0;
-  }
-
-  .order-id {
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-    margin-top: 2px;
-  }
 }
 
 .payment-selection {
   margin-bottom: var(--space-6);
 }
 
-.methods-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-4);
-
-  @media (max-width: 600px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.type-option {
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: var(--color-bg-card);
-  text-align: center;
-  font-weight: 600;
-  color: var(--color-text-muted);
-
-  &:hover {
-    border-color: var(--color-brand);
-    color: var(--color-text);
-  }
-
-  &.selected {
-    border-color: var(--color-brand);
-    background-color: var(--color-neutral-100);
-    color: #000;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-}
-
 .payment-details {
-  background: var(--color-neutral-100);
-  border-radius: var(--radius-md);
-  padding: var(--space-6);
   margin-bottom: var(--space-6);
-  border: 1px solid var(--color-border);
 
   &.text-center {
     text-align: center;
@@ -127,6 +41,23 @@
   }
 }
 
+.twint-launch-button {
+  width: auto;
+  height: 58px;
+  border: none;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  cursor: pointer;
+}
+
+.twint-launch-button__image {
+  width: auto;
+  height: 58px;
+}
+
 .qr-placeholder {
   display: flex;
   flex-direction: column;
@@ -184,10 +115,6 @@
   top: var(--space-6);
 }
 
-.actions {
-  margin-top: var(--space-8);
-}
-
 .fade-in {
   animation: fadeIn 0.4s ease-out;
 }

frontend/src/app/shared/components/app-button/app-button.component.scss

@@ -60,3 +60,20 @@
     color: var(--color-text);
   }
 }
+
+.btn-ghost {
+  background-color: var(--color-bg-card);
+  border-color: var(--color-border);
+  color: var(--color-text);
+  &:hover:not(:disabled) {
+    background-color: var(--color-surface-muted);
+  }
+}
+
+.btn-danger {
+  background-color: var(--color-danger-500);
+  color: #fff;
+  &:hover:not(:disabled) {
+    background-color: #dc2626;
+  }
+}

frontend/src/app/shared/components/app-button/app-button.component.ts

@@ -9,7 +9,9 @@ import { CommonModule } from '@angular/common';
   styleUrl: './app-button.component.scss',
 })
 export class AppButtonComponent {
-  variant = input<'primary' | 'secondary' | 'outline' | 'text'>('primary');
+  variant = input<
+    'primary' | 'secondary' | 'outline' | 'text' | 'ghost' | 'danger'
+  >('primary');
   type = input<'button' | 'submit' | 'reset'>('button');
   disabled = input<boolean>(false);
   fullWidth = input<boolean>(false);

frontend/src/app/shared/components/app-card/app-card.component.html

@@ -1,3 +1,15 @@
 <div class="card">
-  <ng-content></ng-content>
+  @if (title() || subtitle()) {
+    <header class="card-header">
+      @if (title()) {
+        <h3 class="card-title">{{ title() }}</h3>
+      }
+      @if (subtitle()) {
+        <p class="card-subtitle">{{ subtitle() }}</p>
+      }
+    </header>
+  }
+  <div class="card-body">
+    <ng-content></ng-content>
+  </div>
 </div>

frontend/src/app/shared/components/app-card/app-card.component.scss

@@ -8,7 +8,6 @@
   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 ease,
     transform 0.2s ease,
@@ -22,3 +21,23 @@
     border-color: var(--color-neutral-300);
   }
 }
+
+.card-header {
+  padding: var(--space-6) var(--space-6) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.card-title {
+  margin: 0;
+  font-size: 1.2rem;
+}
+
+.card-subtitle {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+
+.card-body {
+  padding: var(--space-6);
+}

frontend/src/app/shared/components/app-card/app-card.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-card',
@@ -6,4 +6,7 @@ import { Component } from '@angular/core';
   templateUrl: './app-card.component.html',
   styleUrl: './app-card.component.scss',
 })
-export class AppCardComponent {}
+export class AppCardComponent {
+  title = input<string>('');
+  subtitle = input<string>('');
+}

frontend/src/app/shared/components/app-input/app-input.component.scss

@@ -14,20 +14,24 @@ label {
   margin-left: 2px;
 }
 .form-control {
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 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);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
   &:focus {
     outline: none;
     border-color: var(--color-brand);
-    box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.25);
+    box-shadow: var(--focus-ring);
   }
   &:disabled {
-    background: var(--color-neutral-100);
+    background: var(--color-surface-muted);
     cursor: not-allowed;
   }
 }

frontend/src/app/shared/components/app-select/app-select.component.scss

@@ -10,16 +10,20 @@ label {
   color: var(--color-text);
 }
 .form-control {
-  padding: 0.5rem 0.75rem;
+  padding: 0.625rem 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);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
   &:focus {
     outline: none;
     border-color: var(--color-brand);
+    box-shadow: var(--focus-ring);
   }
 }
 .error-text {

frontend/src/styles.scss

@@ -1,6 +1,7 @@
 /* src/styles.scss */
 @use "./styles/theme";
 @use "./styles/patterns";
+@use "./styles/ui";
 
 /* Reset / Base */
 *,

frontend/src/styles/theme.scss

@@ -5,10 +5,17 @@
   /* Semantic Colors - Theming Layer */
   --color-bg: #faf9f6;
   --color-bg-card: #ffffff;
+  --color-surface-card: var(--color-bg-card);
+  --color-surface-muted: var(--color-neutral-100);
+  --color-surface-success: var(--color-success-100);
+  --color-surface-warning: var(--color-warning-100);
+  --color-surface-danger: var(--color-danger-100);
   --color-text: var(--color-neutral-900);
+  --color-text-main: var(--color-text);
   --color-text-muted: var(--color-secondary-500);
 
   --color-brand: var(--color-primary-500);
+  --color-brand-600: var(--color-primary-600);
   --color-brand-hover: var(--color-primary-600);
 
   --color-border: var(--color-neutral-200);
@@ -16,6 +23,7 @@
   --color-success: var(--color-success-500);
   --color-warning: var(--color-warning-500);
   --color-error: var(--color-danger-500);
+  --focus-ring: 0 0 0 2px rgb(250 207 10 / 0.28);
 
   /* Font */
   --font-family-sans: "IBM Plex Sans", "Space Grotesk", sans-serif;

frontend/src/styles/tokens.scss

@@ -9,13 +9,18 @@
   --color-secondary-600: #514d43;
 
   --color-success-500: #22c55e;
+  --color-success-100: #dcfce7;
   --color-warning-500: #eab308;
+  --color-warning-100: #fef3c7;
   --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-danger-100: #fee2e2;
 
   --color-neutral-50: #ffffff;
   --color-neutral-100: #efede7;
   --color-neutral-200: #dedad1;
   --color-neutral-300: #c6c1b6;
+  --color-neutral-400: #a8a396;
   --color-neutral-800: #1f2933;
   --color-neutral-900: #101820;