feat: cloud landingpage

libs/domains/framework/frontend/feature-portal/src/lib/cloud/cloud.component.scss

@@ -0,0 +1,83 @@
+@import '../page.component.scss';
+
+// Dotted world map
+.cloud-map-figure {
+  max-width: 100%;
+}
+
+.cloud-map-svg {
+  width: 100%;
+  height: auto;
+  max-height: 280px;
+}
+
+.cloud-map-continents circle {
+  opacity: 0.7;
+}
+
+.cloud-map-datacenters circle {
+  stroke: var(--bs-body-bg);
+  stroke-width: 2;
+}
+
+.cloud-map-legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.cloud-map-legend-continent {
+  background-color: var(--bs-gray-400);
+}
+
+.cloud-map-legend-datacenter {
+  background-color: var(--bs-primary);
+}
+
+// Placeholder image block (for future screenshots)
+.cloud-placeholder-img {
+  width: 100%;
+  min-height: 260px;
+  max-width: 420px;
+}
+
+.cloud-placeholder-icon {
+  font-size: 4rem;
+  opacity: 0.4;
+}
+
+// Integration section icons (match home)
+.cloud-icon-integration {
+  font-size: 3rem;
+  color: var(--bs-primary);
+}
+
+// Security section large icon
+.cloud-icon-security-large {
+  font-size: 6rem;
+  opacity: 0.2;
+}
+
+// Security badges (match home pattern)
+.cloud-security-badge {
+  font-size: 0.875rem;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.cloud-security-badge-teal {
+  background-color: var(--bs-success) !important;
+}
+
+.cloud-security-badge-primary {
+  background-color: var(--bs-primary) !important;
+}
+
+.cloud-security-badge-warning {
+  background-color: var(--bs-warning) !important;
+}
+
+.logo-partner--small {
+  max-height: 16px;
+}

libs/domains/framework/frontend/feature-portal/src/lib/cloud/cloud.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+import { RouterModule } from '@angular/router';
+
+import { PortalCloudMapComponent } from './map/map.component';
+
+@Component({
+  selector: 'framework-portal-cloud',
+  imports: [CommonModule, RouterModule, PortalCloudMapComponent],
+  styleUrls: ['./cloud.component.scss'],
+  templateUrl: './cloud.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PortalCloudComponent implements OnInit {
+  private readonly titleService = inject(Title);
+  private readonly metaService = inject(Meta);
+
+  ngOnInit(): void {
+    this.titleService.setTitle(
+      $localize`:@@featurePortalCloud-metaTitle:Agenstra Cloud - Fully Managed Control Plane For Your AI Agents`,
+    );
+    this.metaService.addTags([
+      {
+        name: 'description',
+        content: $localize`:@@featurePortalCloud-metaDescription:Agenstra Cloud is the fully managed, cloud hosted control plane for distributed AI agents. Design, deploy, and govern agents across tools, clouds, and environments without operating your own infrastructure.`,
+      },
+      {
+        name: 'keywords',
+        content: $localize`:@@featurePortalCloud-metaKeywords:Agenstra Cloud, Agenstra, AI agent platform, AI control plane, AI governance, AI observability, managed SaaS, agentic systems`,
+      },
+      { name: 'author', content: 'IPvX UG (haftungsbeschränkt)' },
+      { name: 'robots', content: 'index, follow' },
+      { name: 'canonical', content: 'https://agenstra.com/cloud' },
+    ]);
+  }
+}

libs/domains/framework/frontend/feature-portal/src/lib/cloud/map/map.component.html

@@ -0,0 +1 @@
+<div class="cloud-map-container"></div>

libs/domains/framework/frontend/feature-portal/src/lib/cloud/map/map.component.scss

@@ -0,0 +1,6 @@
+.cloud-map-container {
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

libs/domains/framework/frontend/feature-portal/src/lib/cloud/map/map.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'framework-portal-cloud-map',
+  imports: [CommonModule, RouterModule],
+  styleUrls: ['./map.component.scss'],
+  templateUrl: './map.component.html',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class PortalCloudMapComponent {}

libs/domains/framework/frontend/feature-portal/src/lib/container/container.component.html

@@ -56,6 +56,16 @@
                 >Desktop</a
               >
             </li>
+            <li class="nav-item">
+              <a
+                routerLink="/cloud"
+                class="nav-link text-white"
+                routerLinkActive="active"
+                (click)="closeMobileMenu()"
+                i18n="@@featurePortal-navCloud"
+                >Cloud</a
+              >
+            </li>
             <li class="nav-item">
               <a
                 routerLink="/pricing"
@@ -66,12 +76,6 @@
                 >Pricing</a
               >
             </li>
-            <li class="nav-item">
-              <span class="nav-link text-white d-flex align-items-center gap-2 pe-2 disabled" aria-disabled="true">
-                <span i18n="@@featurePortal-navCloud">Cloud</span>
-                <span class="badge bg-primary" i18n="@@featurePortal-navCloudSoon">Soon</span>
-              </span>
-            </li>
             <li class="nav-item">
               <a
                 class="nav-link text-white ms-3 d-none d-md-block"
@@ -223,6 +227,11 @@ <h6 class="fw-bold mb-3" i18n="@@featurePortal-footerProduct">Product</h6>
               >Desktop</a
             >
           </li>
+          <li class="mb-2">
+            <a routerLink="/cloud" class="text-decoration-none text-white small" i18n="@@featurePortal-navCloud"
+              >Cloud</a
+            >
+          </li>
           <li class="mb-2">
             <a
               routerLink="/pricing"
@@ -231,10 +240,6 @@ <h6 class="fw-bold mb-3" i18n="@@featurePortal-footerProduct">Product</h6>
               >Pricing</a
             >
           </li>
-          <li class="mb-2 d-flex align-items-center gap-2">
-            <span class="text-white small" i18n="@@featurePortal-navCloud">Cloud</span>
-            <span class="badge bg-primary" i18n="@@featurePortal-navCloudSoon">Soon</span>
-          </li>
           <li class="mb-2">
             <a
               href="https://downloads.agenstra.com/"

libs/domains/framework/frontend/feature-portal/src/lib/portal.routes.ts

@@ -1,5 +1,6 @@
 import { Route } from '@angular/router';
 import { PortalAgentCtxComponent } from './agentctx/agentctx.component';
+import { PortalCloudComponent } from './cloud/cloud.component';
 import { PortalContainerComponent } from './container/container.component';
 import { PortalDesktopComponent } from './desktop/desktop.component';
 import { PortalHomeComponent } from './home/home.component';
@@ -24,6 +25,10 @@ export const portalRoutes: Route[] = [
         path: 'desktop',
         component: PortalDesktopComponent,
       },
+      {
+        path: 'cloud',
+        component: PortalCloudComponent,
+      },
       {
         path: 'pricing',
         component: PortalPricingComponent,