From 810d5f6c0c65c7f59c7f39554f6491fc26e62a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joe=20K=C3=BCng?= <joekueng05@gmail.com>
Date: Wed, 4 Feb 2026 16:22:26 +0100
Subject: [PATCH] feat(web): entire site responsive

---
 .../features/about/about-page.component.ts    | 19 +++++++++----------
 .../contact-form/contact-form.component.ts    | 14 +++++++-------
 frontend/src/assets/i18n/en.json              | 10 +++++++++-
 frontend/src/assets/i18n/it.json              | 10 +++++++++-
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/features/about/about-page.component.ts b/frontend/src/app/features/about/about-page.component.ts
index d01863f..e06f003 100644
--- a/frontend/src/app/features/about/about-page.component.ts
+++ b/frontend/src/app/features/about/about-page.component.ts
@@ -158,18 +158,16 @@ import { TranslateModule } from '@ngx-translate/core';
     /* Right Column */
     .visual-content {
       display: flex;
-      justify-content: center;
-      gap: 2rem;
-      align-items: center;
-      
-      /* Mobile: Stacked */
       flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 2rem;
       
-      /* Desktop: Side-by-side */
       @media(min-width: 768px) {
-        flex-direction: row;
-        flex-wrap: wrap; /* Wrap if necessary but try row */
-        align-items: flex-start;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        align-items: start;
+        justify-items: center;
       }
     }
 
@@ -178,7 +176,8 @@ import { TranslateModule } from '@ngx-translate/core';
       padding: 1rem;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg);
-      width: 260px;
+      width: 100%;
+      max-width: 260px;
       position: relative;
     }
 
diff --git a/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts b/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
index 6b0df1b..af24bbb 100644
--- a/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
+++ b/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
@@ -29,9 +29,9 @@ interface FilePreview {
 
       <div class="row">
         <!-- Phone -->
-        <app-input formControlName="email" type="email" label="Email *" placeholder="tuo@email.com" class="col"></app-input>
+        <app-input formControlName="email" type="email" label="Email *" [placeholder]="'CONTACT.PLACEHOLDER_EMAIL' | translate" class="col"></app-input>
         <!-- Phone -->
-        <app-input formControlName="phone" type="tel" [label]="('CONTACT.PHONE' | translate)" placeholder="+41 00 000 00 00" class="col"></app-input>
+        <app-input formControlName="phone" type="tel" [label]="('CONTACT.PHONE' | translate)" [placeholder]="'CONTACT.PLACEHOLDER_PHONE' | translate" class="col"></app-input>
       </div>
 
       <!-- User Type Selector (Segmented Control) -->
@@ -45,16 +45,16 @@ interface FilePreview {
       </div>
 
       <!-- Personal Name (Only if NOT Company) -->
-      <app-input *ngIf="!isCompany" formControlName="name" label="Nome *" placeholder="Il tuo nome"></app-input>
+      <app-input *ngIf="!isCompany" formControlName="name" label="Nome *" [placeholder]="'CONTACT.PLACEHOLDER_NAME' | translate"></app-input>
 
       <!-- Company Fields (Only if Company) -->
       <div *ngIf="isCompany" class="company-fields">
-        <app-input formControlName="companyName" [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'" placeholder="Nome Azienda"></app-input>
-        <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' *'" placeholder="Persona di Riferimento"></app-input>
+        <app-input formControlName="companyName" [label]="('CONTACT.COMPANY_NAME' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_COMPANY' | translate"></app-input>
+        <app-input formControlName="referencePerson" [label]="('CONTACT.REF_PERSON' | translate) + ' *'" [placeholder]="'CONTACT.PLACEHOLDER_REF_PERSON' | translate"></app-input>
       </div>
       
       <div class="form-group">
-        <label>Messaggio *</label>
+        <label>{{ 'CONTACT.LABEL_MESSAGE' | translate }}</label>
         <textarea formControlName="message" class="form-control" rows="4"></textarea>
       </div>
 
@@ -85,7 +85,7 @@ interface FilePreview {
 
       <div class="actions">
         <app-button type="submit" [disabled]="form.invalid || sent()">
-          {{ sent() ? 'Inviato!' : ('CONTACT.SEND' | translate) }}
+          {{ sent() ? ('CONTACT.MSG_SENT' | translate) : ('CONTACT.SEND' | translate) }}
         </app-button>
       </div>
     </form>
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index 431afeb..e68cbbf 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -78,6 +78,14 @@
     "REF_PERSON": "Reference Person",
     "UPLOAD_LABEL": "Attachments",
     "UPLOAD_HINT": "Max 15 files. Supported: Images, PDF, STL, STEP, 3MF, OBJ",
-    "DROP_FILES": "Drop files here or click to upload"
+    "DROP_FILES": "Drop files here or click to upload",
+    "PLACEHOLDER_NAME": "Your Name",
+    "PLACEHOLDER_EMAIL": "your@email.com",
+    "PLACEHOLDER_PHONE": "+41 00 000 00 00",
+    "PLACEHOLDER_COMPANY": "Company Name",
+    "PLACEHOLDER_REF_PERSON": "Reference Person",
+    "LABEL_MESSAGE": "Message *",
+    "MSG_SENT": "Sent!",
+    "ERR_MAX_FILES": "Max 15 files limit reached."
   }
 }
diff --git a/frontend/src/assets/i18n/it.json b/frontend/src/assets/i18n/it.json
index dadfc03..f45eda5 100644
--- a/frontend/src/assets/i18n/it.json
+++ b/frontend/src/assets/i18n/it.json
@@ -83,6 +83,14 @@
     "REF_PERSON": "Persona di Riferimento",
     "UPLOAD_LABEL": "Allegati",
     "UPLOAD_HINT": "Max 15 file. Supportati: Immagini, PDF, STL, STEP, 3MF, OBJ",
-    "DROP_FILES": "Trascina qui i file o clicca per caricare"
+    "DROP_FILES": "Trascina qui i file o clicca per caricare",
+    "PLACEHOLDER_NAME": "Il tuo nome",
+    "PLACEHOLDER_EMAIL": "tuo@email.com",
+    "PLACEHOLDER_PHONE": "+41 00 000 00 00",
+    "PLACEHOLDER_COMPANY": "Nome Azienda",
+    "PLACEHOLDER_REF_PERSON": "Persona di Riferimento",
+    "LABEL_MESSAGE": "Messaggio *",
+    "MSG_SENT": "Inviato!",
+    "ERR_MAX_FILES": "Limite massimo di 15 file raggiunto."
   }
 }