Sprint 7: add section engine

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

@@ -1,22 +1,9 @@
 <!-- novo VERSION - Modern Grid Layout -->
 @if (isMarketplaceNovo) {
   <div class="novo-home">
-    <section class="novo-hero novo-hero-compact">
-      <div class="novo-hero-content">
-        <h1 class="novo-hero-title">{{ 'home.welcomeTo' | translate:{ brand: brandName } }}</h1>
-        <p class="novo-hero-subtitle">{{ 'home.subtitle' | translate }}</p>
-        <a [routerLink]="'/search' | langRoute" class="novo-hero-btn">
-          {{ 'home.startSearch' | translate }}
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="5" y1="12" x2="19" y2="12"></line>
-            <polyline points="12 5 19 12 12 19"></polyline>
-          </svg>
-        </a>
-      </div>
-    </section>
-
-    <!-- Items Carousel -->
-    <app-items-carousel />
+    @if (pageModel()) {
+      <app-dynamic-page-layout [model]="pageModel()" />
+    }
 
     @if (loading()) {
       <section class="novo-categories">
@@ -89,31 +76,9 @@
 } @else {
   <!-- DEXAR VERSION - Redesigned 2026 -->
   <div class="dexar-home">
-    <!-- Hero Section with Full Width Image -->
-    <section class="dexar-hero">
-      <div class="dexar-hero-overlay">
-        <div class="dexar-hero-content">
-          <h1 class="dexar-hero-title">{{ 'home.dexarHeroTitle' | translate }}</h1>
-          <p class="dexar-hero-subtitle">{{ 'home.dexarHeroSubtitle' | translate }}</p>
-          <p class="dexar-hero-tagline">{{ 'home.dexarHeroTagline' | translate }}</p>
-          
-          <div class="dexar-hero-actions">
-            <a (click)="scrollToCatalog()" class="dexar-btn-primary">
-              {{ 'home.goToCatalog' | translate }}
-            </a>
-            <button (click)="navigateToSearch()" class="dexar-btn-secondary">
-              {{ 'home.findProduct' | translate }}
-              <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1 1L9 8L1 15" stroke="#1E3C38" stroke-width="2"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Items Carousel -->
-    <app-items-carousel />
+    @if (pageModel()) {
+      <app-dynamic-page-layout [model]="pageModel()" />
+    }
 
     @if (loading()) {
       <section class="dexar-categories">

src/app/pages/home/home.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { LanguageService } from '../../services';
-import { ItemsCarouselComponent } from '../../components/items-carousel/items-carousel.component';
+import { DynamicPageLayoutComponent } from '../../layouts/containers/dynamic-page-layout.component';
+import { PageRenderModel } from '../../dynamic-renderer/page-renderer/page-renderer.model';
+import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.facade';
 import { LangRoutePipe } from '../../pipes/lang-route.pipe';
 import { TranslatePipe } from '../../i18n/translate.pipe';
 import { UiRuntimeFacade } from '../../facades/runtime/ui-runtime.facade';
@@ -10,7 +12,8 @@ import { Category } from '../../core/categories/models/category-domain.model';
 
 @Component({
   selector: 'app-home',
-  imports: [RouterLink, ItemsCarouselComponent, LangRoutePipe, TranslatePipe],
+  standalone: true,
+  imports: [RouterLink, DynamicPageLayoutComponent, LangRoutePipe, TranslatePipe],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -20,12 +23,14 @@ export class HomeComponent implements OnInit {
     private router: Router,
     private langService: LanguageService,
     private readonly uiRuntime: UiRuntimeFacade,
-    private readonly categoryFacade: CategoryFacade
+    private readonly categoryFacade: CategoryFacade,
+    private readonly websiteRuntime: WebsiteRuntimeFacade
   ) {}
 
   categories = signal<Category[]>([]);
   loading = signal(true);
   error = signal<string | null>(null);
+  readonly pageModel = signal<PageRenderModel | null>(null);
   readonly skeletonSlots = Array.from({ length: 6 });
   
   // Memoized computed values for performance
@@ -63,9 +68,21 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.loadHomepageSections();
     this.loadCategories();
   }
 
+  private loadHomepageSections(): void {
+    this.websiteRuntime.getPageRenderModelForUrl(this.router.url).subscribe({
+      next: (model) => {
+        this.pageModel.set(model);
+      },
+      error: () => {
+        this.pageModel.set(null);
+      }
+    });
+  }
+
   loadCategories(): void {
     this.loading.set(true);
     this.error.set(null);