feat ui foundation layer for page container sections and grid

src/app/features/website/catalog/components/category-grid/category-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-category-grid">
+<div class="catalog-category-grid grid grid-4">
   @for (category of categories; track trackByCategoryId($index, category)) {
     <button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
       <span class="catalog-category-image">

src/app/features/website/catalog/components/category-grid/category-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 24px;
 }
 
 .catalog-category-card {
@@ -100,11 +97,6 @@
 }
 
 @media (max-width: 640px) {
-  .catalog-category-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-
   .catalog-category-content {
     min-height: 84px;
     padding: 10px 12px;

src/app/features/website/catalog/components/product-grid/product-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-product-grid">
+<div class="catalog-product-grid grid grid-4">
   @for (product of products; track trackByItemId($index, product)) {
     <div class="catalog-product-shell">
       <app-product-card

src/app/features/website/catalog/components/product-grid/product-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 24px;
   align-items: stretch;
 }
 
@@ -16,10 +13,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (max-width: 640px) {
-  .catalog-product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-}

src/app/features/website/catalog/containers/catalog-container.component.html

@@ -1,4 +1,4 @@
-<main class="catalog-page">
+<main class="catalog-page page-container">
   <header class="catalog-header">
     <a [routerLink]="'/catalog' | langRoute" class="catalog-root-link">{{ 'catalog.title' | translate }}</a>
 

src/app/layouts/containers/dynamic-page-layout.component.ts

@@ -16,23 +16,29 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
       <main class="dynamic-page-layout" [attr.data-layout]="model.layout">
         @for (section of model.sections; track section.id) {
           <section
-            class="dynamic-section"
+            class="section dynamic-section"
             [attr.data-section-type]="section.type"
             [attr.data-section-layout]="section.layout?.strategy ?? section.type"
-            [style.--section-columns]="section.layout?.columns ?? null"
-            [style.--section-gap]="section.layout?.gap ?? null"
-            [style.--section-align]="section.layout?.align ?? null"
             [class.dynamic-section--desktop-hidden]="section.visibility?.desktop === false"
             [class.dynamic-section--tablet-hidden]="section.visibility?.tablet === false"
             [class.dynamic-section--mobile-hidden]="section.visibility?.mobile === false"
           >
-            @for (widget of section.widgets; track widget.id) {
-              <div class="dynamic-widget" [attr.data-widget-type]="widget.type">
-                  @if (resolveWidget(widget, section, model.id) | async; as resolved) {
-                    <ng-container *ngComponentOutlet="$any(resolved).component; inputs: { section: $any(resolved).section, data: $any(resolved).data }"></ng-container>
+            <div class="page-container">
+              <div
+                class="dynamic-section__content"
+                [style.--section-columns]="section.layout?.columns ?? null"
+                [style.--section-gap]="section.layout?.gap ?? null"
+                [style.--section-align]="section.layout?.align ?? null"
+              >
+                @for (widget of section.widgets; track widget.id) {
+                  <div class="dynamic-widget" [attr.data-widget-type]="widget.type">
+                    @if (resolveWidget(widget, section, model.id) | async; as resolved) {
+                      <ng-container *ngComponentOutlet="$any(resolved).component; inputs: { section: $any(resolved).section, data: $any(resolved).data }"></ng-container>
+                    }
+                  </div>
                 }
               </div>
-            }
+            </div>
           </section>
         }
       </main>
@@ -40,18 +46,19 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
   `,
   styles: [
     `
-      .dynamic-page-layout { display: grid; gap: 1.5rem; }
-      .dynamic-section {
+      .dynamic-page-layout { display: block; }
+
+      .dynamic-section__content {
         display: grid;
         gap: var(--section-gap, 1rem);
         align-items: var(--section-align, stretch);
       }
 
-      .dynamic-section[data-section-layout='grid'] {
+      .dynamic-section[data-section-layout='grid'] .dynamic-section__content {
         grid-template-columns: repeat(var(--section-columns, 1), minmax(0, 1fr));
       }
 
-      .dynamic-section[data-section-layout='hero'] {
+      .dynamic-section[data-section-layout='hero'] .dynamic-section__content {
         grid-template-columns: minmax(0, 1fr);
       }
 

src/app/pages/home/home.component.html

@@ -1,7 +1,11 @@
 @if (loading()) {
-  <section class="home-loading">Loading homepage...</section>
+  <section class="home-loading section">
+    <div class="page-container">Loading homepage...</div>
+  </section>
 } @else if (pageModel()) {
   <app-dynamic-page-layout [model]="pageModel()" />
 } @else {
-  <section class="home-empty">No page configuration found.</section>
+  <section class="home-empty section">
+    <div class="page-container">No page configuration found.</div>
+  </section>
 }

src/app/pages/public/platform-home.component.ts

@@ -10,11 +10,15 @@ import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.faca
   imports: [DynamicPageLayoutComponent],
   template: `
     @if (loading()) {
-      <section class="platform-loading">Loading platform page...</section>
+      <section class="platform-loading section">
+        <div class="page-container">Loading platform page...</div>
+      </section>
     } @else if (model()) {
       <app-dynamic-page-layout [model]="model()" />
     } @else {
-      <section class="platform-empty">No page configuration found.</section>
+      <section class="platform-empty section">
+        <div class="page-container">No page configuration found.</div>
+      </section>
     }
   `,
   styles: [

src/app/widgets/ui/categories-widget.component.ts

@@ -31,7 +31,7 @@ import { LanguageService } from '../../services/language.service';
   `,
   styles: [
     `
-      .categories-widget { padding: 1rem 0; display: grid; gap: 1rem; }
+      .categories-widget { display: grid; gap: 1rem; }
       .categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],

src/app/widgets/ui/product-carousel-widget.component.ts

@@ -23,7 +23,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .product-carousel-widget { padding: 1rem; }
+      .product-carousel-widget { display: grid; gap: 1rem; }
       .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],