Wrap up elements #2.

frontend/src/app/business/manage-business/add-product/add-product.component.html

@@ -1,29 +1,29 @@
 <form [formGroup]="productForm" (submit)="submitForm()" class="p-4">
   <div class="mb-4">
-    <label for="product-name" class="block font-medium text-gray-700">Product Name</label>
+    <label for="product-name" class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.PRODUCT_NAME' | translate }}</label>
     <input type="text" id="product-name" name="product-name" formControlName="productName"
       class="mt-1 p-2 block w-full rounded-md border-gray-300" required />
   </div>
 
   <div class="mb-4">
-    <label for="product-description" class="block font-medium text-gray-700">Product Description</label>
+    <label for="product-description" class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.PRODUCT_DESCRIPTION' | translate }}</label>
     <textarea id="product-description" name="product-description" formControlName="productDescription"
       class="mt-1 p-2 block w-full rounded-md border-gray-300" required></textarea>
   </div>
 
   <div class="mb-4">
-    <label class="block font-medium text-gray-700">Product Images</label>
+    <label class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.PRODUCT_IMAGES' | translate }}</label>
     <label for="imagess" class="flex gap-5 items-center bg-blue-200 p-3 rounded-md">
       <img src="../../../../assets/images/business/upload.jpg" alt="upload icon" class="w-[50px] h-[50px]" />
-      <div>Upload Product Images</div>
+      <div>{{ 'BUSINESS.ADD_PRODUCT.PLACEHOLDERS.PRODUCT_IMAGES' | translate }}</div>
     </label>
     <input type="file" accept="image/*" id="imagess" (change)="onFileChange($event)" multiple
       formControlName="productImages" class="mt-1 hidden" />
   </div>
 
-  <label class="block font-medium text-gray-700">Products Images(max: 3)</label>
+  <label class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.PLACEHOLDERS.PRODUCT_IMAGES_MAX' | translate }}</label>
   <div *ngIf="selectedImages.length < 1">
-    <div class="my-4 text-center text-gray-500">No producst image selected</div>
+    <div class="my-4 text-center text-gray-500">{{ 'BUSINESS.ADD_PRODUCT.VALIDATIONS.PRODUCT_IMAGES' | translate }}</div>
   </div>
   <div *ngIf="selectedImages.length > 0" class="mb-4">
     <div class="flex flex-wrap gap-2">
@@ -34,7 +34,7 @@
   </div>
 
   <div class="mb-4 relative">
-    <label for="product-price" class="block font-medium text-gray-700">Price</label>
+    <label for="product-price" class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.PRODUCT_PRICE' | translate }}</label>
     <input type="number" id="product-price" name="product-price" formControlName="productPrice"
       class="mt-1 p-2 block w-full rounded-md border-gray-300" required />
     <div class="absolute right-3 top-[50%] bg-blue-200 rounded-xl px-2 py-1">
@@ -43,22 +43,22 @@
   </div>
 
   <div class="mb-4">
-    <label for="product-stock" class="block font-medium text-gray-700">Product Stock</label>
+    <label for="product-stock" class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.PRODUCT_QUANTITY' | translate }}</label>
     <input type="number" id="product-stock" name="product-stock" formControlName="productStock"
       class="mt-1 p-2 block w-full rounded-md border-gray-300" required />
   </div>
 
   <div class="mb-4">
-    <label class="block font-medium text-gray-700">Shipping Options</label>
+    <label class="block font-medium text-gray-700">{{ 'BUSINESS.ADD_PRODUCT.LABELS.SHIPPING_TYPE' | translate }}</label>
     <select formControlName="selectedShippingOption" class="mt-1 p-2 block w-full rounded-md border-gray-300">
-      <option value="free">Free Shipping</option>
-      <option value="paid">Paid Shipping</option>
-      <option value="pickup">Pickup</option>
-      <option value="cod">Pay on Delivery</option>
+      <option value="free">{{ 'BUSINESS.ADD_PRODUCT.OPTIONS.SHIPPING_TYPES.FREE_SHIPPING' | translate }}</option>
+      <option value="paid">{{ 'BUSINESS.ADD_PRODUCT.OPTIONS.SHIPPING_TYPES.PAID_SHIPPING' | translate }}</option>
+      <option value="pickup">{{ 'BUSINESS.ADD_PRODUCT.OPTIONS.SHIPPING_TYPES.PICKUP' | translate }}</option>
+      <option value="cod">{{ 'BUSINESS.ADD_PRODUCT.OPTIONS.SHIPPING_TYPES.PAY_ON_DELIVERY' | translate }}</option>
     </select>
   </div>
 
   <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
-    Submit
+    {{ 'BUSINESS.ADD_PRODUCT.BUTTONS.SUBMIT' | translate }}
   </button>
 </form>

frontend/src/app/business/manage-business/add-product/add-product.component.spec.ts

@@ -1,14 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { AddProductComponent } from './add-product.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('AddProductComponent', () => {
   let component: AddProductComponent;
   let fixture: ComponentFixture<AddProductComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AddProductComponent]
+      imports: [AddProductComponent, TranslateModule.forRoot()]
     })
     .compileComponents();
 

frontend/src/app/business/manage-business/add-product/add-product.component.ts

@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-add-product',
   standalone: true,
-  imports: [ReactiveFormsModule, CommonModule],
+  imports: [TranslateModule, ReactiveFormsModule, CommonModule],
   templateUrl: './add-product.component.html',
   styleUrl: './add-product.component.scss',
 })

frontend/src/app/shared/header/header.component.scss

@@ -98,6 +98,7 @@ mat-toolbar {
   padding: 20px;
   text-align: center;
   width: 600px;
+  margin: 0 auto;
   cursor: crosshair;
 }
 
@@ -134,7 +135,7 @@ mat-toolbar {
 
 .social-media-link {
   display: block;
-  margin: 0 25px;
+  margin: 0 10px;
   font-size: 30px;
   text-decoration: none;
   color: #000000;
@@ -146,8 +147,12 @@ mat-toolbar {
 }
 
 .privacy-policy-content {
+  max-width: calc(100% - 40px);
+  margin: 0 auto;
+  text-align: left;
   max-height: 400px;
   overflow-y: auto;
+  word-wrap: break-word;
 }
 
 .privacy-policy-link {
@@ -162,10 +167,12 @@ mat-toolbar {
 .privacy-policy-content body {
   font-family: Arial, sans-serif;
   line-height: 1.5;
-  text-align: justify;
+  text-align: left;
   padding: 20px;
+  width: 400px;
   max-width: 100%;
   margin: 0 auto;
+  word-wrap: break-word;
 }
 
 .privacy-policy-content h1, h2 {
@@ -189,7 +196,7 @@ mat-toolbar {
 /* Media query for smaller screens */
 @media screen and (max-width: 768px) {
   .popup {
-    width: 75%;
+    width: 90%;
     max-width: none;
   }
 }

frontend/src/assets/i18n/en.json

@@ -49,6 +49,34 @@
         "CONFIRM": "Confirm Business Settings",
         "UNDER_CONSTRUCTION": "This functionality is not fully built yet"
       }
+    },
+    "ADD_PRODUCT": {
+      "LABELS": {
+        "PRODUCT_NAME": "Product Name",
+        "PRODUCT_DESCRIPTION": "Product Description",
+        "PRODUCT_IMAGES": "Product Images",
+        "PRODUCT_PRICE": "Product Price",
+        "PRODUCT_QUANTITY": "Product Quantity",
+        "SHIPPING_TYPE": "Shipping Type"
+      },
+      "PLACEHOLDERS": {
+        "PRODUCT_IMAGES": "Upload Product Images",
+        "PRODUCT_IMAGES_MAX": "Product Images (Limit: 3)"
+      },
+      "VALIDATIONS": {
+        "PRODUCT_IMAGES": "No product images selected"
+      },
+      "OPTIONS": {
+        "SHIPPING_TYPES": {
+          "FREE_SHIPPING": "Free Shipping",
+          "PAID_SHIPPING": "Paid Shipping",
+          "PICKUP": "Pickup",
+          "PAY_ON_DELIVERY": "Pay on Delivery"
+        }
+      },
+      "BUTTONS": {
+        "SUBMIT": "Submit"
+      }
     }
   },
   "PRIVACY_POLICY": {

frontend/src/assets/i18n/es.json

@@ -49,6 +49,34 @@
         "CONFIRM": "Confirmar configuración del negocio",
         "UNDER_CONSTRUCTION": "Esta funcionalidad aún no está completamente desarrollada"
       }
+    },
+    "ADD_PRODUCT": {
+      "LABELS": {
+        "PRODUCT_NAME": "Nombre del Producto",
+        "PRODUCT_DESCRIPTION": "Descripción del Producto",
+        "PRODUCT_IMAGES": "Imágenes del Producto",
+        "PRODUCT_PRICE": "Precio del Producto",
+        "PRODUCT_QUANTITY": "Cantidad del Producto",
+        "SHIPPING_TYPE": "Tipo de Envío"
+      },
+      "PLACEHOLDERS": {
+        "PRODUCT_IMAGES": "Subir Imágenes del Producto",
+        "PRODUCT_IMAGES_MAX": "Imágenes del Producto (Límite: 3)"
+      },
+      "VALIDATIONS": {
+        "PRODUCT_IMAGES": "No se han seleccionado imágenes del producto"
+      },
+      "OPTIONS": {
+        "SHIPPING_TYPES": {
+          "FREE_SHIPPING": "Envío Gratuito",
+          "PAID_SHIPPING": "Envío Pago",
+          "PICKUP": "Recoger",
+          "PAY_ON_DELIVERY": "Pagar al recibir"
+        }
+      },
+      "BUTTONS": {
+        "SUBMIT": "Enviar"
+      }
     }
   },
   "PRIVACY_POLICY": {

frontend/src/assets/i18n/ko.json

@@ -49,6 +49,34 @@
         "CONFIRM": "비즈니스 설정 확인",
         "UNDER_CONSTRUCTION": "이 기능은 아직 완전히 구현되지 않았습니다"
       }
+    },
+    "ADD_PRODUCT": {
+      "LABELS": {
+        "PRODUCT_NAME": "제품 이름",
+        "PRODUCT_DESCRIPTION": "제품 설명",
+        "PRODUCT_IMAGES": "제품 이미지",
+        "PRODUCT_PRICE": "제품 가격",
+        "PRODUCT_QUANTITY": "제품 수량",
+        "SHIPPING_TYPE": "배송 유형"
+      },
+      "PLACEHOLDERS": {
+        "PRODUCT_IMAGES": "제품 이미지 업로드",
+        "PRODUCT_IMAGES_MAX": "제품 이미지 (제한: 3)"
+      },
+      "VALIDATIONS": {
+        "PRODUCT_IMAGES": "제품 이미지가 선택되지 않았습니다"
+      },
+      "OPTIONS": {
+        "SHIPPING_TYPES": {
+          "FREE_SHIPPING": "무료 배송",
+          "PAID_SHIPPING": "유료 배송",
+          "PICKUP": "픽업",
+          "PAY_ON_DELIVERY": "배송 시 현금 결제"
+        }
+      },
+      "BUTTONS": {
+        "SUBMIT": "제출"
+      }
     }
   },
   "PRIVACY_POLICY": {