feat(cms): add static pages module

2026-07-10 13:52:01 +04:00
parent e2c8747fcc
commit 7d6c09a346
25 changed files with 890 additions and 159 deletions
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -14,7 +14,11 @@
          <ul>
            @for (item of group.items; track item.id) {
              <li>
-                <a [routerLink]="item.route | langRoute">{{ item.label | translate }}</a>
+                @if (item.external) {
+                  <a [href]="item.route" target="_blank" rel="noopener">{{ item.label | translate }}</a>
+                } @else {
+                  <a [routerLink]="item.route | langRoute">{{ item.label | translate }}</a>
+                }
              </li>
            }
          </ul>
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -20,7 +20,11 @@
              {{ 'header.catalog' | translate }}
            </button>
          }
-          <!-- TODO(CMS): Render backend-configured header content links here. -->
+          @for (page of headerPages(); track page.id) {
+            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn platform-nav-btn-left">
+              {{ page.title }}
+            </button>
+          }
        </div>
      </nav>

@@ -140,7 +144,14 @@
      </a>
      }

-      <!-- TODO(CMS): Render backend-configured mobile content links here. -->
+      @for (page of headerPages(); track page.id) {
+        <a (click)="navigateToStatic(page.route)" class="platform-mobile-item" style="cursor: pointer;">
+          <span>{{ page.title }}</span>
+          <svg class="platform-mobile-chevron" width="8" height="14" viewBox="0 0 8 14" fill="none">
+            <path d="M1 1L7 7L1 13" stroke="#697777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </a>
+      }

      <div class="platform-mobile-controls">
        @if (headerConfig().showRegion) {
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -11,6 +11,7 @@ import { UiRuntimeFacade } from '../../facades/runtime/ui-runtime.facade';
 import { UserExperienceFacade } from '../../facades/platform/user-experience.facade';
 import { ConfigService } from '../../core/config/config.service';
 import { DEFAULT_HEADER_CONFIG, DEFAULT_USER_EXPERIENCE_CONFIG } from '../../shared/models/config';
+import { StaticPageResolverService } from '../../core/config/static-page-resolver.service';

@Component({
  selector: 'app-header',
@@ -30,11 +31,13 @@ export class HeaderComponent {
  private uiRuntime = inject(UiRuntimeFacade);
  private uxFacade = inject(UserExperienceFacade);
  private configService = inject(ConfigService);
+  private staticPageResolver = inject(StaticPageResolverService);

  readonly wishlistCount = this.uxFacade.wishlistCount;
  readonly compareCount = this.uxFacade.compareCount;
  readonly userExperienceConfig = computed(() => this.resolveUserExperienceConfig());
  readonly headerConfig = computed(() => this.resolveHeaderConfig());
+  readonly headerPages = computed(() => this.resolveHeaderPages());

  constructor(private cartService: CartService, private router: Router) {
    this.cartItemCount = this.cartService.itemCount;
@@ -111,6 +114,12 @@ export class HeaderComponent {
    this.router.navigate([`/${lang}/compare`]);
  }

+  navigateToStatic(route: string): void {
+    this.closeMenu();
+    const lang = this.langService.currentLanguage();
+    this.router.navigate([`/${lang}${route.startsWith('/') ? route : `/${route}`}`]);
+  }
+
  formatCartTotal(total: number): string {
    const locale = this.langService.currentLanguage() === 'en'
      ? 'en-US'
@@ -154,6 +163,31 @@ export class HeaderComponent {
      ...raw,
    };
  }
+
+  private resolveHeaderPages() {
+    this.configService.bootstrapRevision();
+    const bootstrap = this.configService.getBootstrapSnapshot();
+    if (!bootstrap?.staticPages) {
+      return [] as Array<{ id: string; title: string; route: string; icon?: string; order: number }>;
+    }
+
+    const lang = this.langService.currentLanguage();
+    const pages = Object.values(bootstrap.staticPages as Record<string, any>)
+      .filter(page => page.showInHeader === true)
+      .map(page => {
+        const resolved = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, page.id, lang);
+        return resolved ? {
+          id: resolved.id,
+          title: resolved.title,
+          route: resolved.route,
+          icon: resolved.icon,
+          order: page.order ?? 0,
+        } : null;
+      })
+      .filter((page): page is { id: string; title: string; route: string; icon: string | undefined; order: number } => page !== null);
+
+    return pages.sort((left, right) => left.order - right.order);
+  }
 }


--- a/src/app/core/config/footer-resolver.service.ts
+++ b/src/app/core/config/footer-resolver.service.ts
@@ -16,6 +16,7 @@ export interface FooterResolvedItem {
  id: string;
  label: string;
  route: string;
+  external?: boolean;
 }

 export interface FooterResolvedGroup {
@@ -62,33 +63,17 @@ export class FooterResolverService {
  private resolveFooterGroups(bootstrap: BootstrapConfig): FooterResolvedGroup[] {
    const footer = bootstrap.navigation?.footer ?? [];
    const lang = this.languageService.currentLanguage();
-    const legalKeys = bootstrap.footer?.legalPageKeys ?? [];
-    const legalItems = legalKeys
-      .map(key => {
-        const page = this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, key, lang);
-        if (!page) {
-          return null;
-        }
-
-        return {
-          id: `legal-${key}`,
-          label: page.title,
-          route: page.route
-        } as FooterResolvedItem;
-      })
-      .filter((item): item is FooterResolvedItem => item != null);
+    const contentPages = this.resolveBootstrapStaticPages(bootstrap, lang);

    if (this.isGroupedFooter(footer)) {
      const groups = footer
        .map((group, index) => this.resolveGroupFromConfig(group, bootstrap, lang, index))
        .filter((group): group is FooterResolvedGroup => group != null && group.items.length > 0);

-      if (legalItems.length > 0) {
-        groups.push({
-          id: 'footer-group-legal',
-          title: 'Legal',
-          items: legalItems
-        });
+      for (const group of contentPages) {
+        if (!groups.some(existing => existing.id === group.id)) {
+          groups.push(group);
+        }
      }

      return groups;
@@ -99,9 +84,7 @@ export class FooterResolverService {
      .filter((item): item is FooterResolvedItem => item != null);

    if (!items.length) {
-      return legalItems.length
-        ? [{ id: 'footer-group-legal', title: 'Legal', items: legalItems }]
-        : [];
+      return contentPages;
    }

    const groups: FooterResolvedGroup[] = [{
@@ -110,15 +93,44 @@ export class FooterResolverService {
      items
    }];

-    if (legalItems.length > 0) {
-      groups.push({
-        id: 'footer-group-legal',
-        title: 'Legal',
-        items: legalItems
+    groups.push(...contentPages);
+
+    return groups;
+  }
+
+  private resolveBootstrapStaticPages(bootstrap: BootstrapConfig, lang: string): FooterResolvedGroup[] {
+    const rawPages = Object.values(bootstrap.staticPages ?? {}) as any[];
+    const pages = rawPages
+      .filter(page => page.showInFooter !== false)
+      .map(page => ({ raw: page, resolved: this.staticPageResolver.resolveByKeyFromBootstrap(bootstrap, page.id ?? '', lang) }))
+      .filter(entry => entry.resolved !== null);
+
+    const groups = new Map<string, FooterResolvedGroup>();
+
+    for (const page of pages) {
+      const raw = page.raw;
+      const resolved = page.resolved!;
+      const groupTitle = raw?.footerGroup || 'Legal';
+      const groupId = `footer-group-${String(groupTitle).toLowerCase().replace(/\s+/g, '-')}`;
+      if (!groups.has(groupId)) {
+        groups.set(groupId, { id: groupId, title: groupTitle, items: [] });
+      }
+      groups.get(groupId)!.items.push({ id: resolved.id, label: resolved.title, route: resolved.route });
+    }
+
+    const socialLinks = bootstrap.footer?.socialLinks ?? [];
+    if (socialLinks.length > 0) {
+      groups.set('footer-group-social', {
+        id: 'footer-group-social',
+        title: 'Social',
+        items: socialLinks.map(link => ({ id: link.id, label: link.label, route: link.url, external: true }))
      });
    }

-    return groups;
+    return [...groups.values()].map(group => ({
+      ...group,
+      items: group.items.sort((left, right) => left.label.localeCompare(right.label))
+    }));
  }

  private resolveGroupFromConfig(
@@ -213,14 +225,8 @@ export class FooterResolverService {
  }

  private resolvePaymentIcons(footerConfig: FooterConfig | undefined): FooterPaymentIcon[] {
-    const fallback: FooterPaymentIcon[] = [
-      { src: '/assets/images/mir-logo.svg', alt: 'MIR', width: 40, height: 28 },
-      { src: '/assets/images/visa-logo.svg', alt: 'Visa', width: 40, height: 28 },
-      { src: '/assets/images/mastercard-logo.svg', alt: 'Mastercard', width: 40, height: 28 }
-    ];
-
    if (!footerConfig?.paymentIcons?.length) {
-      return fallback;
+      return [];
    }

    return footerConfig.paymentIcons
--- a/src/app/core/config/static-page-resolver.service.ts
+++ b/src/app/core/config/static-page-resolver.service.ts
@@ -2,14 +2,16 @@ import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ConfigService } from './config.service';
-import { BootstrapConfig, LegacyStaticPageConfig, LocalizedHtmlContent, LocalizedTextContent, ResolvedStaticPage, StaticPageConfig } from '../../shared/models/config';
+import { BootstrapConfig, LocalizedTextContent, ResolvedStaticPage } from '../../shared/models/config';
 import { LanguageService } from '../../services/language.service';
+import { ContentPageService } from '../../features/content-management/services/content-page.service';

@Injectable({ providedIn: 'root' })
 export class StaticPageResolverService {
  constructor(
    private readonly configService: ConfigService,
-    private readonly languageService: LanguageService
+    private readonly languageService: LanguageService,
+    private readonly contentPageService: ContentPageService
  ) {}

  resolveByKey(key: string, lang?: string): Observable<ResolvedStaticPage | null> {
@@ -25,40 +27,11 @@ export class StaticPageResolverService {
  }

  resolveByKeyFromBootstrap(bootstrap: BootstrapConfig, key: string, lang: string): ResolvedStaticPage | null {
-    const page = this.getPageByKey(bootstrap, key);
-    if (!page) {
-      return null;
-    }
-
-    const route = this.normalizeRoute(page.route || `/page/${key}`);
-    const title = this.resolveLocalizedText(page.title, lang, key);
-    const html = this.resolveLocalizedHtml(page.content, lang);
-
-    return {
-      key,
-      route,
-      title,
-      html
-    };
+    return this.contentPageService.resolvePage(bootstrap, key, lang);
  }

  resolveByRouteFromBootstrap(bootstrap: BootstrapConfig, route: string, lang: string): ResolvedStaticPage | null {
-    const normalized = this.normalizeRoute(route);
-    const registry = this.getRegistry(bootstrap);
-
-    for (const [key, page] of Object.entries(registry)) {
-      const routePath = this.normalizeRoute(page.route || `/page/${key}`);
-      if (routePath === normalized) {
-        return {
-          key,
-          route: routePath,
-          title: this.resolveLocalizedText(page.title, lang, key),
-          html: this.resolveLocalizedHtml(page.content, lang)
-        };
-      }
-    }
-
-    return null;
+    return this.contentPageService.resolvePage(bootstrap, this.normalizeRoute(route).replace(/^\//, ''), lang);
  }

  resolveFooterTitle(groupTitle: string | LocalizedTextContent | undefined, lang: string): string {
@@ -73,65 +46,6 @@ export class StaticPageResolverService {
    return this.resolveLocalizedText(groupTitle, lang, '');
  }

-  private getRegistry(bootstrap: BootstrapConfig): Record<string, StaticPageConfig> {
-    const raw = bootstrap.staticPages;
-    if (!raw) {
-      return {};
-    }
-
-    if (Array.isArray(raw)) {
-      return raw.reduce<Record<string, StaticPageConfig>>((acc, item) => {
-        const legacy = item as LegacyStaticPageConfig;
-        const key = legacy.key;
-        if (!key) {
-          return acc;
-        }
-
-        const route = typeof legacy.route === 'string' ? legacy.route : legacy.route?.path ?? `/page/${key}`;
-
-        let titleMap: LocalizedTextContent;
-        if (typeof legacy.title === 'string') {
-          titleMap = { en: legacy.title };
-        } else {
-          titleMap = legacy.title ?? { en: key };
-        }
-
-        let contentMap: LocalizedHtmlContent;
-        if (typeof legacy.content === 'string') {
-          contentMap = { en: legacy.content };
-        } else if (legacy.content && typeof legacy.content === 'object' && 'value' in legacy.content) {
-          contentMap = { en: legacy.content.value ?? '' };
-        } else {
-          contentMap = (legacy.content as LocalizedHtmlContent) ?? { en: '' };
-        }
-
-        acc[key] = {
-          route,
-          title: titleMap,
-          content: contentMap,
-          visible: legacy.visible
-        };
-        return acc;
-      }, {});
-    }
-
-    return raw;
-  }
-
-  private getPageByKey(bootstrap: BootstrapConfig, key: string): StaticPageConfig | null {
-    const registry = this.getRegistry(bootstrap);
-    const page = registry[key];
-    if (!page) {
-      return null;
-    }
-
-    if (page.visible === false) {
-      return null;
-    }
-
-    return page;
-  }
-
  private resolveLocalizedText(text: LocalizedTextContent | undefined, lang: string, fallback: string): string {
    if (!text) {
      return fallback;
@@ -140,14 +54,6 @@ export class StaticPageResolverService {
    return text[lang] ?? text['en'] ?? Object.values(text)[0] ?? fallback;
  }

-  private resolveLocalizedHtml(content: LocalizedHtmlContent | undefined, lang: string): string {
-    if (!content) {
-      return '';
-    }
-
-    return content[lang] ?? content['en'] ?? Object.values(content)[0] ?? '';
-  }
-
  private normalizeRoute(route: string): string {
    if (!route) {
      return '/';
--- a/src/app/features/content-management/components/static-pages-editor.component.html
+++ b/src/app/features/content-management/components/static-pages-editor.component.html
@@ -0,0 +1,52 @@
+<section class="editor-section-card">
+  <div class="editor-actions">
+    <h2>{{ 'builder.staticPages' | translate }}</h2>
+    <button type="button" (click)="createPage()">{{ 'builder.createPage' | translate }}</button>
+  </div>
+
+  @if (validation().duplicateSlugs.length > 0) {
+    <p class="editor-error">{{ 'staticPages.duplicateSlug' | translate }}</p>
+  }
+  @if (validation().emptyTitles.length > 0) {
+    <p class="editor-error">{{ 'staticPages.emptyTitle' | translate }}</p>
+  }
+
+  <div class="stack-list">
+    @for (page of pages(); track page.id) {
+      <article class="sub-card">
+        <div class="editor-actions">
+          <h3>{{ page.id }}</h3>
+          <div class="editor-actions">
+            <button type="button" class="secondary" (click)="move(page.id, -1)">↑</button>
+            <button type="button" class="secondary" (click)="move(page.id, 1)">↓</button>
+            <button type="button" class="secondary" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</button>
+          </div>
+        </div>
+        <div class="editor-grid three">
+          <label><span>{{ 'builder.pageId' | translate }}</span><input type="text" [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" /></label>
+          <label><span>{{ 'builder.slug' | translate }}</span><input type="text" [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" /></label>
+          <label><span>{{ 'builder.iconLabel' | translate }}</span><input type="text" [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" /></label>
+          <label class="toggle-row"><input type="checkbox" [checked]="page.showInFooter" (change)="updatePage(page.id, { showInFooter: $any($event.target).checked })" /><span>{{ 'builder.showInFooter' | translate }}</span></label>
+          <label class="toggle-row"><input type="checkbox" [checked]="page.showInHeader" (change)="updatePage(page.id, { showInHeader: $any($event.target).checked })" /><span>{{ 'builder.showInHeader' | translate }}</span></label>
+          <label class="toggle-row"><input type="checkbox" [checked]="page.showInSitemap" (change)="updatePage(page.id, { showInSitemap: $any($event.target).checked })" /><span>{{ 'builder.showInSitemap' | translate }}</span></label>
+          <label class="toggle-row"><input type="checkbox" [checked]="page.requiresAuthentication" (change)="updatePage(page.id, { requiresAuthentication: $any($event.target).checked })" /><span>{{ 'builder.requiresAuthentication' | translate }}</span></label>
+          <label><span>{{ 'builder.footerGroup' | translate }}</span><input type="text" [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" /></label>
+          <label><span>{{ 'builder.orderLabel' | translate }}</span><input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" /></label>
+        </div>
+
+        @for (locale of ['en','ru','hy']; track locale) {
+          <div class="editor-grid two">
+            <label>
+              <span>{{ 'builder.translationTitle' | translate }} {{ locale }}</span>
+              <input type="text" [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
+            </label>
+            <label class="full">
+              <span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
+              <textarea rows="6" [ngModel]="page.translations[locale]?.html || ''" (ngModelChange)="updateTranslation(page.id, locale, 'html', $event)"></textarea>
+            </label>
+          </div>
+        }
+      </article>
+    }
+  </div>
+</section>
--- a/src/app/features/content-management/components/static-pages-editor.component.ts
+++ b/src/app/features/content-management/components/static-pages-editor.component.ts
@@ -0,0 +1,108 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ProjectEditorFacade } from '../../project-editor/facade/project-editor.facade';
+import { ContentManagementFacade } from '../facade/content-management.facade';
+import { ContentPage } from '../models/content-page.model';
+import { TranslatePipe } from '../../../i18n/translate.pipe';
+
+@Component({
+  selector: 'app-static-pages-editor',
+  standalone: true,
+  imports: [FormsModule, TranslatePipe],
+  templateUrl: './static-pages-editor.component.html',
+  styleUrls: ['../../project-editor/sections/section.shared.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StaticPagesEditorComponent {
+  private readonly projectEditor = inject(ProjectEditorFacade);
+  private readonly contentFacade = inject(ContentManagementFacade);
+
+  readonly bootstrap = this.projectEditor.bootstrap;
+  readonly pages = computed(() => this.contentFacade.pages(this.bootstrap()));
+  readonly validation = computed(() => this.contentFacade.validatePages(this.bootstrap()));
+
+  createPage(): void {
+    const page: ContentPage = {
+      id: `page-${Date.now()}`,
+      slug: `custom-page-${this.pages().length + 1}`,
+      title: '',
+      order: this.pages().length + 1,
+      showInFooter: false,
+      showInHeader: false,
+      showInSitemap: true,
+      visibility: { desktop: true, tablet: true, mobile: true },
+      requiresAuthentication: false,
+      translations: {
+        en: { title: '', html: '' },
+        ru: { title: '', html: '' },
+        hy: { title: '', html: '' },
+      },
+    };
+
+    this.persist([...this.pages(), page]);
+  }
+
+  deletePage(id: string): void {
+    this.persist(this.pages().filter(page => page.id !== id));
+  }
+
+  updatePage(id: string, patch: Partial<ContentPage>): void {
+    this.persist(this.pages().map(page => page.id !== id ? page : ({ ...page, ...patch })));
+  }
+
+  updateTranslation(id: string, locale: string, field: 'title' | 'html', value: string): void {
+    this.persist(this.pages().map(page => page.id !== id ? page : ({
+      ...page,
+      translations: {
+        ...page.translations,
+        [locale]: {
+          ...(page.translations[locale] ?? {}),
+          [field]: value,
+        }
+      }
+    })));
+  }
+
+  move(id: string, direction: -1 | 1): void {
+    const pages = [...this.pages()].sort((a, b) => a.order - b.order);
+    const index = pages.findIndex(page => page.id === id);
+    const nextIndex = index + direction;
+    if (index < 0 || nextIndex < 0 || nextIndex >= pages.length) {
+      return;
+    }
+
+    const current = pages[index];
+    pages[index] = pages[nextIndex];
+    pages[nextIndex] = current;
+    this.persist(pages.map((page, order) => ({ ...page, order: order + 1 })));
+  }
+
+  private persist(pages: ContentPage[]): void {
+    this.projectEditor.updateBootstrap(current => ({
+      ...current,
+      staticPages: pages.reduce<Record<string, any>>((acc, page) => {
+        const record = {
+          id: page.id,
+          slug: page.slug,
+          title: Object.fromEntries(Object.entries(page.translations).map(([locale, translation]) => [locale, translation.title || page.title]).filter(([, value]) => !!value)),
+          html: Object.fromEntries(Object.entries(page.translations).map(([locale, translation]) => [locale, translation.html || ''])),
+          showInFooter: page.showInFooter,
+          showInHeader: page.showInHeader,
+          showInSitemap: page.showInSitemap,
+          icon: page.icon,
+          order: page.order,
+          visibility: page.visibility,
+          requiresAuthentication: page.requiresAuthentication,
+          footerGroup: page.footerGroup,
+          translations: page.translations,
+          seo: page.seo,
+          visible: true,
+          route: `/${page.slug}`,
+          content: Object.fromEntries(Object.entries(page.translations).map(([locale, translation]) => [locale, translation.html || ''])),
+        };
+        acc[page.id] = record;
+        return acc;
+      }, {})
+    }));
+  }
+}
--- a/src/app/features/content-management/facade/content-management.facade.ts
+++ b/src/app/features/content-management/facade/content-management.facade.ts
@@ -0,0 +1,24 @@
+import { Injectable, computed, inject } from '@angular/core';
+import { BootstrapConfig } from '../../../shared/models/config';
+import { ContentPageService } from '../services/content-page.service';
+
+@Injectable({ providedIn: 'root' })
+export class ContentManagementFacade {
+  private readonly service = inject(ContentPageService);
+
+  pages(bootstrap: BootstrapConfig | null) {
+    return bootstrap ? this.service.normalizePages(bootstrap.staticPages) : [];
+  }
+
+  resolvePage(bootstrap: BootstrapConfig, keyOrSlug: string, locale: string) {
+    return this.service.resolvePage(bootstrap, keyOrSlug, locale);
+  }
+
+  validatePages(bootstrap: BootstrapConfig | null) {
+    return this.service.validatePages(this.pages(bootstrap));
+  }
+
+  toBootstrapRecord(bootstrap: BootstrapConfig | null) {
+    return bootstrap ? this.service.toBootstrapRecord(this.pages(bootstrap)) : {};
+  }
+}
--- a/src/app/features/content-management/models/content-page.model.ts
+++ b/src/app/features/content-management/models/content-page.model.ts
@@ -0,0 +1,58 @@
+import { LocalizedHtmlContent, LocalizedTextContent } from '../../../shared/models/config';
+
+export interface ContentPageSeoConfig {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  canonical?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+}
+
+export interface ContentPageTranslation {
+  title?: string;
+  html?: string;
+  seo?: ContentPageSeoConfig;
+}
+
+export interface ContentPage {
+  id: string;
+  slug: string;
+  title: string;
+  icon?: string;
+  order: number;
+  showInFooter: boolean;
+  showInHeader: boolean;
+  showInSitemap: boolean;
+  visibility: {
+    desktop?: boolean;
+    tablet?: boolean;
+    mobile?: boolean;
+  };
+  requiresAuthentication: boolean;
+  footerGroup?: string;
+  translations: Record<string, ContentPageTranslation>;
+  seo?: ContentPageSeoConfig;
+}
+
+export interface ContentPageBootstrapInput {
+  id: string;
+  slug: string;
+  title?: string | LocalizedTextContent;
+  showInFooter?: boolean;
+  showInHeader?: boolean;
+  showInSitemap?: boolean;
+  icon?: string;
+  order?: number;
+  visibility?: {
+    desktop?: boolean;
+    tablet?: boolean;
+    mobile?: boolean;
+  };
+  requiresAuthentication?: boolean;
+  footerGroup?: string;
+  translations?: Record<string, ContentPageTranslation>;
+  html?: string | LocalizedHtmlContent;
+  seo?: ContentPageSeoConfig | { title?: string | LocalizedTextContent; description?: string | LocalizedTextContent; keywords?: string; canonical?: string; ogTitle?: string | LocalizedTextContent; ogDescription?: string | LocalizedTextContent; ogImage?: string; robots?: string; metaTags?: Array<{ name?: string; property?: string; content: string }>; };
+}
--- a/src/app/features/content-management/pages/content-management-page.component.ts
+++ b/src/app/features/content-management/pages/content-management-page.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { StaticPagesEditorComponent } from '../components/static-pages-editor.component';
+
+@Component({
+  selector: 'app-content-management-page',
+  standalone: true,
+  imports: [StaticPagesEditorComponent],
+  template: `<app-static-pages-editor />`,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentManagementPageComponent {}
--- a/src/app/features/content-management/services/content-page.service.ts
+++ b/src/app/features/content-management/services/content-page.service.ts
@@ -0,0 +1,196 @@
+import { Injectable } from '@angular/core';
+import { BootstrapConfig, LocalizedHtmlContent, LocalizedTextContent, ResolvedStaticPage, StaticPageConfig, StaticPagesConfig } from '../../../shared/models/config';
+import { ContentPage, ContentPageBootstrapInput } from '../models/content-page.model';
+
+@Injectable({ providedIn: 'root' })
+export class ContentPageService {
+  normalizePages(config: StaticPagesConfig | undefined): ContentPage[] {
+    if (!config) {
+      return [];
+    }
+
+    if (Array.isArray(config)) {
+      return config.map((page, index) => ({
+        id: page.key,
+        slug: this.normalizeSlug(typeof page.route === 'string' ? page.route : page.route?.path ?? page.key),
+        title: typeof page.title === 'string' ? page.title : page.title?.['en'] ?? page.key,
+        icon: undefined,
+        order: index + 1,
+        showInFooter: false,
+        showInHeader: false,
+        showInSitemap: true,
+        visibility: { desktop: true, tablet: true, mobile: true },
+        requiresAuthentication: false,
+        footerGroup: undefined,
+        translations: this.normalizeLegacyTranslations(page.title, page.content),
+        seo: undefined,
+      }));
+    }
+
+    return Object.values(config)
+      .map((page, index) => this.normalizePage(page as ContentPageBootstrapInput, index))
+      .sort((left, right) => left.order - right.order);
+  }
+
+  resolvePage(bootstrap: BootstrapConfig, keyOrSlug: string, locale: string): ResolvedStaticPage | null {
+    const normalizedPages = this.normalizePages(bootstrap.staticPages);
+    const target = normalizedPages.find(page => page.id === keyOrSlug || page.slug === this.normalizeSlug(keyOrSlug));
+    if (!target) {
+      return null;
+    }
+
+    const translation = target.translations[locale] ?? target.translations['en'] ?? Object.values(target.translations)[0] ?? {};
+
+    return {
+      key: target.id,
+      id: target.id,
+      slug: target.slug,
+      route: `/${target.slug}`,
+      title: translation.title || target.title,
+      html: translation.html || '',
+      icon: target.icon,
+      requiresAuthentication: target.requiresAuthentication,
+      seo: translation.seo ?? target.seo,
+    };
+  }
+
+  validatePages(pages: ContentPage[]): { duplicateSlugs: string[]; emptyTitles: string[] } {
+    const seen = new Set<string>();
+    const duplicateSlugs = new Set<string>();
+    const emptyTitles = new Set<string>();
+
+    for (const page of pages) {
+      const slug = this.normalizeSlug(page.slug);
+      if (seen.has(slug)) {
+        duplicateSlugs.add(slug);
+      }
+      seen.add(slug);
+
+      const hasTitle = page.title.trim().length > 0 || Object.values(page.translations).some(translation => (translation.title ?? '').trim().length > 0);
+      if (!hasTitle) {
+        emptyTitles.add(page.id);
+      }
+    }
+
+    return {
+      duplicateSlugs: [...duplicateSlugs],
+      emptyTitles: [...emptyTitles],
+    };
+  }
+
+  toBootstrapRecord(pages: ContentPage[]): Record<string, StaticPageConfig> {
+    return pages.reduce<Record<string, StaticPageConfig>>((acc, page) => {
+      const htmlMap = Object.entries(page.translations).reduce<LocalizedHtmlContent>((result, [locale, translation]) => {
+        if ((translation.html ?? '').trim()) {
+          result[locale] = translation.html!;
+        }
+        return result;
+      }, {});
+
+      const titleMap = Object.entries(page.translations).reduce<LocalizedTextContent>((result, [locale, translation]) => {
+        if ((translation.title ?? '').trim()) {
+          result[locale] = translation.title!;
+        }
+        return result;
+      }, {});
+
+      acc[page.id] = {
+        id: page.id,
+        slug: this.normalizeSlug(page.slug),
+        title: Object.keys(titleMap).length > 0 ? titleMap : page.title,
+        html: htmlMap,
+        showInFooter: page.showInFooter,
+        showInHeader: page.showInHeader,
+        showInSitemap: page.showInSitemap,
+        icon: page.icon,
+        order: page.order,
+        visibility: page.visibility,
+        requiresAuthentication: page.requiresAuthentication,
+        footerGroup: page.footerGroup,
+        translations: page.translations,
+        seo: page.seo,
+        visible: true,
+        route: `/${this.normalizeSlug(page.slug)}`,
+        content: htmlMap,
+      };
+      return acc;
+    }, {});
+  }
+
+  private normalizePage(page: ContentPageBootstrapInput, index: number): ContentPage {
+    const titleMap = typeof page.title === 'object' && page.title ? page.title : {};
+    const htmlMap = typeof page.html === 'object' && page.html ? page.html : {};
+    const translations = { ...(page.translations ?? {}) };
+
+    for (const [locale, value] of Object.entries(titleMap)) {
+      translations[locale] = { ...(translations[locale] ?? {}), title: value };
+    }
+
+    for (const [locale, value] of Object.entries(htmlMap)) {
+      translations[locale] = { ...(translations[locale] ?? {}), html: value };
+    }
+
+    return {
+      id: page.id,
+      slug: this.normalizeSlug(page.slug || page.id),
+      title: typeof page.title === 'string' ? page.title : Object.values(titleMap)[0] ?? page.id,
+      icon: page.icon,
+      order: page.order ?? index + 1,
+      showInFooter: page.showInFooter !== false,
+      showInHeader: page.showInHeader === true,
+      showInSitemap: page.showInSitemap !== false,
+      visibility: page.visibility ?? { desktop: true, tablet: true, mobile: true },
+      requiresAuthentication: page.requiresAuthentication === true,
+      footerGroup: page.footerGroup,
+      translations,
+      seo: this.normalizeSeo(page.seo),
+    };
+  }
+
+  private normalizeLegacyTranslations(title: LegacyTitle, content: LegacyContent): Record<string, { title?: string; html?: string }> {
+    const translations: Record<string, { title?: string; html?: string }> = {};
+    if (typeof title === 'string') {
+      translations['en'] = { ...(translations['en'] ?? {}), title };
+    } else {
+      for (const [locale, value] of Object.entries(title ?? {})) {
+        translations[locale] = { ...(translations[locale] ?? {}), title: value };
+      }
+    }
+
+    if (typeof content === 'string') {
+      translations['en'] = { ...(translations['en'] ?? {}), html: content };
+    } else if (content && typeof content === 'object' && 'value' in content) {
+      translations['en'] = { ...(translations['en'] ?? {}), html: content.value ?? '' };
+    } else {
+      for (const [locale, value] of Object.entries((content ?? {}) as LocalizedHtmlContent)) {
+        translations[locale] = { ...(translations[locale] ?? {}), html: value };
+      }
+    }
+
+    return translations;
+  }
+
+  private normalizeSlug(value: string): string {
+    return value.replace(/^\/+/, '').trim();
+  }
+
+  private normalizeSeo(input: ContentPageBootstrapInput['seo']): ContentPage['seo'] {
+    if (!input) {
+      return undefined;
+    }
+
+    const first = (value?: string | LocalizedTextContent) => typeof value === 'string' ? value : value?.['en'] ?? Object.values(value ?? {})[0];
+    return {
+      title: first(input.title),
+      description: first(input.description),
+      keywords: input.keywords,
+      canonical: input.canonical,
+      ogTitle: first(input.ogTitle),
+      ogDescription: first(input.ogDescription),
+      ogImage: input.ogImage,
+    };
+  }
+}
+
+type LegacyTitle = string | LocalizedTextContent | undefined;
+type LegacyContent = string | LocalizedHtmlContent | { value?: string; contentType?: string; source?: string } | undefined;
--- a/src/app/features/project-editor/components/project-editor-nav.component.ts
+++ b/src/app/features/project-editor/components/project-editor-nav.component.ts
@@ -22,6 +22,7 @@ export class ProjectEditorNavComponent {
    { id: 'footer', label: 'builder.footer' },
    { id: 'homepage', label: 'builder.homepage' },
    { id: 'widgets', label: 'builder.widgets' },
+    { id: 'static-pages', label: 'builder.staticPages' },
    { id: 'features', label: 'builder.marketplaceFeatures' },
    { id: 'preview', label: 'builder.preview' },
  ];
--- a/src/app/features/project-editor/models/project-editor.model.ts
+++ b/src/app/features/project-editor/models/project-editor.model.ts
@@ -8,6 +8,7 @@ export type ProjectEditorSectionId =
  | 'footer'
  | 'homepage'
  | 'widgets'
+  | 'static-pages'
  | 'features'
  | 'preview';

--- a/src/app/features/project-editor/pages/project-editor-page.component.html
+++ b/src/app/features/project-editor/pages/project-editor-page.component.html
@@ -21,6 +21,7 @@
        @case ('footer') { <app-project-editor-footer-section /> }
        @case ('homepage') { <app-project-editor-homepage-section /> }
        @case ('widgets') { <app-project-editor-widgets-section /> }
+        @case ('static-pages') { <app-static-pages-editor /> }
        @case ('features') { <app-project-editor-features-section /> }
        @case ('preview') { <app-project-editor-preview-section /> }
      }
--- a/src/app/features/project-editor/pages/project-editor-page.component.ts
+++ b/src/app/features/project-editor/pages/project-editor-page.component.ts
@@ -11,6 +11,7 @@ import { ProjectEditorWidgetsSectionComponent } from '../sections/widgets-sectio
 import { ProjectEditorFeaturesSectionComponent } from '../sections/features-section.component';
 import { ProjectEditorPreviewSectionComponent } from '../sections/preview-section.component';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { StaticPagesEditorComponent } from '../../content-management/components/static-pages-editor.component';

@Component({
  selector: 'app-project-editor-page',
@@ -25,6 +26,7 @@ import { TranslatePipe } from '../../../i18n/translate.pipe';
    ProjectEditorFooterSectionComponent,
    ProjectEditorHomepageSectionComponent,
    ProjectEditorWidgetsSectionComponent,
+    StaticPagesEditorComponent,
    ProjectEditorFeaturesSectionComponent,
    ProjectEditorPreviewSectionComponent,
  ],
--- a/src/app/i18n/en.ts
+++ b/src/app/i18n/en.ts
@@ -407,6 +407,7 @@ export const en: Translations = {
    footer: 'Footer',
    homepage: 'Homepage',
    widgets: 'Widgets',
+    staticPages: 'Static Pages',
    marketplaceFeatures: 'Marketplace Features',
    preview: 'Preview',
    brandName: 'Brand Name',
@@ -443,7 +444,19 @@ export const en: Translations = {
    copyright: 'Copyright',
    paymentIcons: 'Payment Icons',
    socialLinks: 'Social Links',
-    staticPages: 'Static Pages',
+    createPage: 'Create Page',
+    deletePage: 'Delete Page',
+    pageId: 'Page ID',
+    slug: 'Slug',
+    iconLabel: 'Icon',
+    showInFooter: 'Show In Footer',
+    showInHeader: 'Show In Header',
+    showInSitemap: 'Show In Sitemap',
+    requiresAuthentication: 'Requires Authentication',
+    footerGroup: 'Footer Group',
+    orderLabel: 'Order',
+    translationTitle: 'Translation Title',
+    htmlPreview: 'HTML',
    visible: 'Visible',
    layoutLabel: 'Layout',
    columns: 'Columns',
@@ -471,6 +484,12 @@ export const en: Translations = {
    importError: 'Import failed. Invalid bootstrap JSON.',
    featureFlags: 'Feature Flags',
  },
+  staticPages: {
+    notFound: 'Page not found',
+    backHome: 'Back to home',
+    duplicateSlug: 'Duplicate slugs are not allowed.',
+    emptyTitle: 'Each page must have at least one title.',
+  },
  widgets: {
    unavailable: 'Widget unavailable',
  },
--- a/src/app/i18n/hy.ts
+++ b/src/app/i18n/hy.ts
@@ -407,6 +407,7 @@ export const hy: Translations = {
    footer: 'Footer',
    homepage: 'Գլխավոր էջ',
    widgets: 'Վիջեթներ',
+    staticPages: 'Ստատիկ էջեր',
    marketplaceFeatures: 'Մարքեթփլեյսի հնարավորություններ',
    preview: 'Preview',
    brandName: 'Բրենդի անվանում',
@@ -443,7 +444,19 @@ export const hy: Translations = {
    copyright: 'Copyright',
    paymentIcons: 'Վճարման icon-ներ',
    socialLinks: 'Սոցիալական հղումներ',
-    staticPages: 'Ստատիկ էջեր',
+    createPage: 'Ստեղծել էջ',
+    deletePage: 'Ջնջել էջը',
+    pageId: 'Էջի ID',
+    slug: 'Slug',
+    iconLabel: 'Իկոնա',
+    showInFooter: 'Ցույց տալ footer-ում',
+    showInHeader: 'Ցույց տալ header-ում',
+    showInSitemap: 'Ցույց տալ sitemap-ում',
+    requiresAuthentication: 'Պահանջում է մուտք',
+    footerGroup: 'Footer խումբ',
+    orderLabel: 'Հերթականություն',
+    translationTitle: 'Թարգմանության վերնագիր',
+    htmlPreview: 'HTML',
    visible: 'Տեսանելի',
    layoutLabel: 'Layout',
    columns: 'Սյուներ',
@@ -471,6 +484,12 @@ export const hy: Translations = {
    importError: 'Ներմուծումը ձախողվեց։ Սխալ bootstrap JSON։',
    featureFlags: 'Feature flags',
  },
+  staticPages: {
+    notFound: 'Էջը չի գտնվել',
+    backHome: 'Վերադառնալ գլխավոր',
+    duplicateSlug: 'Կրկնվող slug-երը թույլատրելի չեն։',
+    emptyTitle: 'Յուրաքանչյուր էջ պետք է ունենա առնվազն մեկ վերնագիր։',
+  },
  widgets: {
    unavailable: 'Վիջեթը հասանելի չէ',
  },
--- a/src/app/i18n/ru.ts
+++ b/src/app/i18n/ru.ts
@@ -407,6 +407,7 @@ export const ru: Translations = {
    footer: 'Футер',
    homepage: 'Главная страница',
    widgets: 'Виджеты',
+    staticPages: 'Статические страницы',
    marketplaceFeatures: 'Функции маркетплейса',
    preview: 'Превью',
    brandName: 'Название бренда',
@@ -443,7 +444,19 @@ export const ru: Translations = {
    copyright: 'Копирайт',
    paymentIcons: 'Иконки оплаты',
    socialLinks: 'Социальные ссылки',
-    staticPages: 'Статические страницы',
+    createPage: 'Создать страницу',
+    deletePage: 'Удалить страницу',
+    pageId: 'ID страницы',
+    slug: 'Slug',
+    iconLabel: 'Иконка',
+    showInFooter: 'Показывать в футере',
+    showInHeader: 'Показывать в хедере',
+    showInSitemap: 'Показывать в sitemap',
+    requiresAuthentication: 'Требует авторизацию',
+    footerGroup: 'Группа футера',
+    orderLabel: 'Порядок',
+    translationTitle: 'Заголовок перевода',
+    htmlPreview: 'HTML',
    visible: 'Видимость',
    layoutLabel: 'Layout',
    columns: 'Колонки',
@@ -471,6 +484,12 @@ export const ru: Translations = {
    importError: 'Импорт не удался. Некорректный JSON bootstrap.',
    featureFlags: 'Фичи-флаги',
  },
+  staticPages: {
+    notFound: 'Страница не найдена',
+    backHome: 'На главную',
+    duplicateSlug: 'Дублирующиеся slug запрещены.',
+    emptyTitle: 'У каждой страницы должен быть хотя бы один заголовок.',
+  },
  widgets: {
    unavailable: 'Виджет недоступен',
  },
--- a/src/app/i18n/translations.ts
+++ b/src/app/i18n/translations.ts
@@ -405,6 +405,7 @@ export interface Translations {
    footer: string;
    homepage: string;
    widgets: string;
+    staticPages: string;
    marketplaceFeatures: string;
    preview: string;
    brandName: string;
@@ -441,7 +442,19 @@ export interface Translations {
    copyright: string;
    paymentIcons: string;
    socialLinks: string;
-    staticPages: string;
+    createPage: string;
+    deletePage: string;
+    pageId: string;
+    slug: string;
+    iconLabel: string;
+    showInFooter: string;
+    showInHeader: string;
+    showInSitemap: string;
+    requiresAuthentication: string;
+    footerGroup: string;
+    orderLabel: string;
+    translationTitle: string;
+    htmlPreview: string;
    visible: string;
    layoutLabel: string;
    columns: string;
@@ -469,6 +482,12 @@ export interface Translations {
    importError: string;
    featureFlags: string;
  };
+  staticPages: {
+    notFound: string;
+    backHome: string;
+    duplicateSlug: string;
+    emptyTitle: string;
+  };
  widgets: {
    unavailable: string;
  };
--- a/src/app/pages/static-page/static-page.component.html
+++ b/src/app/pages/static-page/static-page.component.html
@@ -1,11 +1,11 @@
-<main class="static-page page-container">
+<main class="static-page page-container" [attr.dir]="dir()">
  @if (loading()) {
    <section class="static-page__state">{{ 'app.connecting' | translate }}</section>
  } @else if (notFound()) {
    <section class="static-page__state">
      <h1>404</h1>
-      <p>Страница не найдена</p>
-      <a [routerLink]="homeRoute()">На главную</a>
+      <p>{{ 'staticPages.notFound' | translate }}</p>
+      <a [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</a>
    </section>
  } @else {
    <article class="static-page__content">
--- a/src/app/pages/static-page/static-page.component.ts
+++ b/src/app/pages/static-page/static-page.component.ts
@@ -1,7 +1,8 @@
-import { ChangeDetectionStrategy, Component, SecurityContext, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, SecurityContext, effect, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, RouterLink } from '@angular/router';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { DomSanitizer, Meta, SafeHtml, Title } from '@angular/platform-browser';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { StaticPageResolverService } from '../../core/config/static-page-resolver.service';
 import { LanguageService } from '../../services/language.service';
 import { TranslatePipe } from '../../i18n/translate.pipe';
@@ -16,29 +17,50 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
 })
 export class StaticPageComponent {
  private readonly route = inject(ActivatedRoute);
+  private readonly destroyRef = inject(DestroyRef);
  private readonly sanitizer = inject(DomSanitizer);
  private readonly staticPageResolver = inject(StaticPageResolverService);
  private readonly languageService = inject(LanguageService);
+  private readonly titleService = inject(Title);
+  private readonly meta = inject(Meta);

  readonly loading = signal(true);
  readonly notFound = signal(false);
  readonly title = signal('');
  readonly homeRoute = signal('');
+  readonly dir = signal<'ltr' | 'rtl'>('ltr');
  readonly safeHtml = signal<SafeHtml>(this.sanitizer.bypassSecurityTrustHtml(''));

-  constructor() {
-    this.homeRoute.set(`/${this.languageService.currentLanguage()}`);
+  private lastKey: string | null = null;
+  private lastPath: string | null = null;

-    this.route.paramMap.subscribe(params => {
+  constructor() {
+    effect(() => {
+      const lang = this.languageService.currentLanguage();
+      this.homeRoute.set(`/${lang}`);
+      this.dir.set(['ar', 'fa', 'he', 'ur'].includes(lang) ? 'rtl' : 'ltr');
+
+      if (this.lastKey) {
+        this.loadByKey(this.lastKey);
+      } else if (this.lastPath) {
+        this.loadByPath(this.lastPath);
+      }
+    });
+
+    this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
      const keyFromParam = params.get('key');
      const staticPath = params.get('staticPath');

      if (keyFromParam) {
+        this.lastKey = keyFromParam;
+        this.lastPath = null;
        this.loadByKey(keyFromParam);
        return;
      }

      if (staticPath) {
+        this.lastKey = null;
+        this.lastPath = `/${staticPath}`;
        this.loadByPath(`/${staticPath}`);
        return;
      }
@@ -72,6 +94,7 @@ export class StaticPageComponent {
      this.safeHtml.set(this.sanitizer.bypassSecurityTrustHtml(''));
      this.notFound.set(true);
      this.loading.set(false);
+      this.titleService.setTitle('404');
      return;
    }

@@ -80,5 +103,7 @@ export class StaticPageComponent {
    this.safeHtml.set(this.sanitizer.bypassSecurityTrustHtml(sanitized));
    this.notFound.set(false);
    this.loading.set(false);
+    this.titleService.setTitle(title);
+    this.meta.updateTag({ name: 'description', content: title });
  }
 }
--- a/src/app/shared/models/config/static-page.model.ts
+++ b/src/app/shared/models/config/static-page.model.ts
@@ -6,16 +6,53 @@ export interface LocalizedTextContent {
  [locale: string]: string;
 }

-export interface StaticPageConfig {
-  route: string;
-  title: LocalizedTextContent;
-  content: LocalizedHtmlContent;
+export interface StaticPageSeoConfig {
+  title?: string | LocalizedTextContent;
+  description?: string | LocalizedTextContent;
+  keywords?: string;
+  canonical?: string;
+  ogTitle?: string | LocalizedTextContent;
+  ogDescription?: string | LocalizedTextContent;
+  ogImage?: string;
+  robots?: string;
+}
+
+export interface StaticPageTranslationConfig {
+  title?: string;
+  html?: string;
  seo?: {
-    title?: LocalizedTextContent;
-    description?: LocalizedTextContent;
-    robots?: string;
+    title?: string;
+    description?: string;
+    keywords?: string;
+    canonical?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
  };
+}
+
+export interface StaticPageConfig {
+  id: string;
+  slug: string;
+  title: string | LocalizedTextContent;
+  showInFooter?: boolean;
+  showInHeader?: boolean;
+  showInSitemap?: boolean;
+  icon?: string;
+  order?: number;
+  visibility?: {
+    desktop?: boolean;
+    tablet?: boolean;
+    mobile?: boolean;
+  };
+  requiresAuthentication?: boolean;
+  footerGroup?: string;
+  translations?: Record<string, StaticPageTranslationConfig>;
+  html?: string | LocalizedHtmlContent;
+  seo?: StaticPageSeoConfig;
  visible?: boolean;
+  route?: string;
+  content?: LocalizedHtmlContent;
 }

 export interface LegacyStaticPageConfig {
@@ -30,7 +67,21 @@ export type StaticPagesConfig = Record<string, StaticPageConfig> | LegacyStaticP

 export interface ResolvedStaticPage {
  key: string;
+  id: string;
+  slug: string;
  route: string;
  title: string;
  html: string;
+  icon?: string;
+  requiresAuthentication?: boolean;
+  seo?: {
+    title?: string;
+    description?: string;
+    keywords?: string;
+    canonical?: string;
+    ogTitle?: string;
+    ogDescription?: string;
+    ogImage?: string;
+    robots?: string;
+  };
 }