Center Website App – Overview

The Center Website is the public, multilingual web app for shopping centers within the cockpitOS ecosystem. Each center is delivered with its own instance via subdomain ({slug}.cockpit-os.de) or custom domain (e.g., www.palais-vest.de) – one app, many centers.

---

What is the Feature Catalog?

The Feature Catalog lists all functions and areas of the Center Website App with versioning:

• Overview: Which pages, modules, and technical features are available
• Versioning: The catalog is versioned alongside the documentation (see Versioning)
• Showcase: Ideal for sales, onboarding, and release notes

---

Quick Access

Area	Short Description
MEC Template A (Red)	Legacy homepage structure, templateContent fields
Feature Catalog	Complete catalog of all features
SEO, AI Visibility & GEO	Explanation of SEO, local search (Geo), GEO and AI visibility
FAQs on the Services Page	Guide: Filling the FAQ section per center (AEO/GEO/SEO)
Versioning	How versions of the documentation (and catalog) are maintained
Media & Performance (Editorial)	Images/Videos, file size, HandBrake – for content teams

---

Technical Classification

• Stack: Next.js (App Router), React, TypeScript
• Hosting: Multi-tenant (subdomain or custom domain per center)
• Data: Content comes from the cockpitOS dashboard (API)
• Apps: apps/center-website in the monorepo

More technical details can be found in the Developer Guide and in the Templates.

Accessibility (BFSG / WCAG) – Technical Guidelines

For the public Center Website, the following technical requirements in the code apply (Root layout and shared bundles affect all center templates):

• Viewport: Zoom must not be blocked by maximum-scale=1 / user-scalable=no (including WCAG 1.4.4). The root layout only sets width=device-width, initial-scale=1, and viewport-fit=cover where necessary.
• Forms / Search: Visible input fields without a visible label receive a programmatic name (e.g., aria-label), such as in RotatingSearchInput (Prop inputAriaLabel, default: “Search”).
• Wayfinding / Center Map: Clickable legend entries are implemented as <button> within <li>, not as role="button" on the list. Floor switchers additionally use a descriptive aria-label next to the short description (UG/EG/...).

Weaker Devices (e.g., older tablets)

The Basic Homepage (CenterHomepage / HeroSection) adjusts display client-side when a combination of accessibility features (“Reduce Motion”), data-saving mode, low RAM (deviceMemory < 4, where reported by the browser), few CPU cores (≤ 3), or very slow network (effectiveType 2g / slow-2g) is detected:

• Animated page background remains with static gradients (no “orbs,” no mouse gradient, no spin).
• Hero videos are replaced by the poster/hero image (if configured); ongoing videos use preload="none" instead of early metadata download.
• Framer Motion animations are reduced or bypassed if the user has system-wide “Reduce Motion” activated or the above heuristic applies.

Editorially, a sharp, compressed poster for each hero video helps (see Media & Performance).