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

---
 .../src/app/core/layout/footer.component.scss | 16 ++++
 .../src/app/core/layout/navbar.component.html | 18 +++--
 .../src/app/core/layout/navbar.component.scss | 74 +++++++++++++++++++
 .../src/app/core/layout/navbar.component.ts   | 10 +++
 .../features/about/about-page.component.ts    | 28 ++++++-
 .../contact-form/contact-form.component.ts    |  8 +-
 frontend/src/assets/i18n/en.json              |  2 +-
 7 files changed, 146 insertions(+), 10 deletions(-)

diff --git a/frontend/src/app/core/layout/footer.component.scss b/frontend/src/app/core/layout/footer.component.scss
index 2bbcabf..65cc6eb 100644
--- a/frontend/src/app/core/layout/footer.component.scss
+++ b/frontend/src/app/core/layout/footer.component.scss
@@ -21,7 +21,22 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
+      gap: var(--space-6);
     }
+
+    @media (max-width: 768px) {
+      .footer-inner {
+        flex-direction: column;
+        text-align: center;
+        gap: var(--space-8);
+      }
+      
+      .links {
+        flex-direction: column;
+        gap: var(--space-3);
+      }
+    }
+
     .brand { font-weight: 700; color: white; display: block; margin-bottom: var(--space-2); }
     .copyright { font-size: 0.875rem; color: var(--color-secondary-500); margin: 0; }
     
@@ -31,6 +46,7 @@
       a {
         color: var(--color-neutral-300);
         font-size: 0.875rem;
+        transition: color 0.2s;
         &:hover { color: white; text-decoration: underline; }
       }
     }
diff --git a/frontend/src/app/core/layout/navbar.component.html b/frontend/src/app/core/layout/navbar.component.html
index ec9383a..5c1fd28 100644
--- a/frontend/src/app/core/layout/navbar.component.html
+++ b/frontend/src/app/core/layout/navbar.component.html
@@ -2,12 +2,18 @@
       <div class="container navbar-inner">
         <a routerLink="/" class="brand">3D <span class="highlight">fab</span></a>
         
-        <nav class="nav-links">
-          <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{ 'NAV.HOME' | translate }}</a>
-          <a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}">{{ 'NAV.CALCULATOR' | translate }}</a>
-          <a routerLink="/shop" routerLinkActive="active">{{ 'NAV.SHOP' | translate }}</a>
-          <a routerLink="/about" routerLinkActive="active">{{ 'NAV.ABOUT' | translate }}</a>
-          <a routerLink="/contact" routerLinkActive="active">{{ 'NAV.CONTACT' | translate }}</a>
+        <div class="mobile-toggle" (click)="toggleMenu()" [class.active]="isMenuOpen">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+
+        <nav class="nav-links" [class.open]="isMenuOpen">
+          <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" (click)="closeMenu()">{{ 'NAV.HOME' | translate }}</a>
+          <a routerLink="/cal" routerLinkActive="active" [routerLinkActiveOptions]="{exact: false}" (click)="closeMenu()">{{ 'NAV.CALCULATOR' | translate }}</a>
+          <a routerLink="/shop" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.SHOP' | translate }}</a>
+          <a routerLink="/about" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.ABOUT' | translate }}</a>
+          <a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">{{ 'NAV.CONTACT' | translate }}</a>
         </nav>
 
         <div class="actions">
diff --git a/frontend/src/app/core/layout/navbar.component.scss b/frontend/src/app/core/layout/navbar.component.scss
index ee924fd..f132074 100644
--- a/frontend/src/app/core/layout/navbar.component.scss
+++ b/frontend/src/app/core/layout/navbar.component.scss
@@ -65,3 +65,77 @@
       justify-content: center;
       color: var(--color-text-muted);
     }
+
+    /* Mobile Toggle */
+    .mobile-toggle {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 24px;
+      height: 18px;
+      cursor: pointer;
+      z-index: 101;
+      
+      span {
+        display: block;
+        height: 2px;
+        width: 100%;
+        background-color: var(--color-text);
+        border-radius: 2px;
+        transition: all 0.3s ease;
+      }
+      
+      &.active {
+        span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+        span:nth-child(2) { opacity: 0; }
+        span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+      }
+    }
+
+    /* Responsive Design */
+    @media (max-width: 768px) {
+      .mobile-toggle {
+        display: flex;
+        order: 2; /* Place after actions */
+        margin-left: var(--space-4);
+      }
+
+      .actions {
+        order: 1; /* Place before toggle */
+        margin-left: auto; /* Push to right */
+      }
+
+      .nav-links {
+        position: absolute;
+        top: 64px;
+        left: 0;
+        right: 0;
+        background-color: var(--color-bg-card);
+        flex-direction: column;
+        padding: var(--space-4);
+        border-bottom: 1px solid var(--color-border);
+        gap: var(--space-4);
+        display: none;
+        z-index: 1000;
+        
+        &.open {
+          display: flex;
+          animation: slideDown 0.3s ease forwards;
+        }
+
+        a {
+          font-size: 1.1rem;
+          padding: var(--space-2) 0;
+          border-bottom: 1px solid var(--color-neutral-100);
+          
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
diff --git a/frontend/src/app/core/layout/navbar.component.ts b/frontend/src/app/core/layout/navbar.component.ts
index c150856..a2e548f 100644
--- a/frontend/src/app/core/layout/navbar.component.ts
+++ b/frontend/src/app/core/layout/navbar.component.ts
@@ -12,10 +12,20 @@ import { AppButtonComponent } from '../../shared/components/app-button/app-butto
   styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent {
+  isMenuOpen = false;
+
   constructor(public langService: LanguageService) {}
 
   toggleLang() {
     const newLang = this.langService.currentLang() === 'it' ? 'en' : 'it';
     this.langService.switchLang(newLang);
   }
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+
+  closeMenu() {
+    this.isMenuOpen = false;
+  }
 }
diff --git a/frontend/src/app/features/about/about-page.component.ts b/frontend/src/app/features/about/about-page.component.ts
index 6858990..d01863f 100644
--- a/frontend/src/app/features/about/about-page.component.ts
+++ b/frontend/src/app/features/about/about-page.component.ts
@@ -64,16 +64,18 @@ import { TranslateModule } from '@ngx-translate/core';
       grid-template-columns: 1fr;
       gap: 4rem;
       align-items: center;
+      text-align: center; /* Center on mobile */
       
       @media(min-width: 992px) {
         grid-template-columns: 1fr 1fr;
         gap: 6rem;
+        text-align: left; /* Reset to left on desktop */
       }
     }
 
     /* Left Column */
     .text-content {
-      text-align: left;
+      /* text-align: left; Removed to inherit from parent */
     }
 
     .eyebrow {
@@ -106,6 +108,14 @@ import { TranslateModule } from '@ngx-translate/core';
       background: var(--color-primary-500);
       border-radius: 2px;
       margin-bottom: var(--space-6);
+      /* Center divider on mobile */
+      margin-left: auto;
+      margin-right: auto;
+
+      @media(min-width: 992px) {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
 
     .description {
@@ -119,6 +129,11 @@ import { TranslateModule } from '@ngx-translate/core';
       display: flex;
       flex-wrap: wrap;
       gap: 0.75rem;
+      justify-content: center; /* Center tags on mobile */
+      
+      @media(min-width: 992px) {
+        justify-content: flex-start;
+      }
     }
 
     .tag {
@@ -145,6 +160,17 @@ import { TranslateModule } from '@ngx-translate/core';
       display: flex;
       justify-content: center;
       gap: 2rem;
+      align-items: center;
+      
+      /* Mobile: Stacked */
+      flex-direction: column;
+      
+      /* Desktop: Side-by-side */
+      @media(min-width: 768px) {
+        flex-direction: row;
+        flex-wrap: wrap; /* Wrap if necessary but try row */
+        align-items: flex-start;
+      }
     }
 
     .photo-card {
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 e7c28c0..6b0df1b 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
@@ -129,15 +129,19 @@ interface FilePreview {
 
     /* User Type Selector Styles */
     .user-type-selector {
-      display: inline-flex;
+      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;
@@ -151,7 +155,7 @@ interface FilePreview {
       
       &.selected {
         background-color: var(--color-brand);
-        color: #000; /* Assuming brand color is light/yellow, black text is safer. Adjust if brand is dark. */
+        color: #000;
         font-weight: 600;
         box-shadow: 0 1px 2px rgba(0,0,0,0.05);
       }
diff --git a/frontend/src/assets/i18n/en.json b/frontend/src/assets/i18n/en.json
index ba738d4..431afeb 100644
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -71,7 +71,7 @@
     "REQ_TYPE_CUSTOM": "Custom Quote",
     "REQ_TYPE_SERIES": "Series Production",
     "REQ_TYPE_CONSULT": "Consultation",
-    "REQ_TYPE_QUESTION": "General Questions",
+    "REQ_TYPE_QUESTION": "Questions",
     "PHONE": "Phone",
     "IS_COMPANY": "Are you a company?",
     "COMPANY_NAME": "Company Name",