chore: improved value claim

apps/frontend-portal/src/i18n/messages.de.xlf

@@ -803,16 +803,16 @@
         <target>Agenstra Desktop bietet Entwicklern ein sicheres lokales Kontrollzentrum, um sich mit Agenstra zu verbinden, Agenten zu inspizieren und mit Kontext in ihrem täglichen Workflow zu arbeiten.</target>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroTitle" datatype="html">
-        <source><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Centralized Control<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> For Distributed AI Agents </source>
-        <target><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Zentrale Kontrolle<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> für verteilte KI-Agenten </target>
+        <source><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Centralized control<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> for AI agents in your software delivery pipeline </source>
+        <target><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Zentrale Kontrolle<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> für KI-Agenten in Ihrer Softwareauslieferungskette </target>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroLead" datatype="html">
-        <source> Modern teams don&apos;t struggle to create AI agents. They struggle to control them. Agenstra gives engineering and platform teams a single place to design, deploy, and govern AI agents across tools, clouds, and environments. </source>
-        <target> Moderne Teams haben keine Schwierigkeiten, KI-Agenten zu erstellen. Sie haben Schwierigkeiten, sie zu kontrollieren. Agenstra bietet Engineering- und Plattform-Teams einen einzigen Ort, um KI-Agenten über Tools, Clouds und Umgebungen hinweg zu entwerfen, bereitzustellen und zu steuern. </target>
+        <source> Agents are wired into editors, pipelines, and internal tools as part of how teams ship. Agenstra gives engineering and platform teams one place to define policy, observe behavior, and govern how agents access code, systems, and environments from development through production. </source>
+        <target> Agenten sind in IDEs, Pipelines und internen Tools eingebunden und längst ein fester Teil der Softwareentwicklung geworden. Agenstra bietet Engineering- und Plattform-Teams einen Ort, um Richtlinien zu definieren, Verhalten zu beobachten und zu steuern, wie Agenten auf Code, Systeme und Umgebungen von der Entwicklung bis zur Produktion zugreifen. </target>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroCtaLine" datatype="html">
-        <source> Start building reliable agentic systems with guardrails, observability, and workflows that match how your team already ships software. </source>
-        <target> Beginnen Sie mit dem Aufbau zuverlässiger agentischer Systeme mit Guardrails, Observability und Workflows, die zu der Art passen, wie Ihr Team bereits Software ausliefert. </target>
+        <source> Keep agent-assisted work on the same bar as the rest of your practice: guardrails, observability, and controls that match how you review changes, manage access, and release software. </source>
+        <target> Halten Sie agentisch unterstützte Arbeit auf dem gleichen Niveau wie den Rest Ihrer Praxis: Guardrails, Observability und Kontrollen, die zu Ihrer Art passen, Änderungen zu prüfen, Zugriffe zu verwalten und Software auszurollen. </target>
         </trans-unit>
       <trans-unit id="featurePortalHome-getStarted" datatype="html">
         <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;i class=&quot;bi bi-rocket-takeoff me-2&quot; aria-hidden=&quot;true&quot;&gt;"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/> Get started </source>

apps/frontend-portal/src/i18n/messages.xlf

@@ -603,13 +603,13 @@
         <source>Agenstra Desktop gives developers a secure local control center for connecting to Agenstra, inspecting agents, and working with context in their daily workflow.</source>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroTitle" datatype="html">
-        <source><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Centralized Control<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> For Distributed AI Agents </source>
+        <source><x id="START_TAG_SPAN" ctype="x-span" equiv-text="&lt;span class=&quot;text-primary&quot;&gt;"/>Centralized control<x id="CLOSE_TAG_SPAN" ctype="x-span" equiv-text="&lt;/span&gt;"/> for AI agents in your software delivery pipeline </source>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroLead" datatype="html">
-        <source> Modern teams don&apos;t struggle to create AI agents. They struggle to control them. Agenstra gives engineering and platform teams a single place to design, deploy, and govern AI agents across tools, clouds, and environments. </source>
+        <source> Agents are wired into editors, pipelines, and internal tools as part of how teams ship. Agenstra gives engineering and platform teams one place to define policy, observe behavior, and govern how agents access code, systems, and environments from development through production. </source>
         </trans-unit>
       <trans-unit id="featurePortalHome-heroCtaLine" datatype="html">
-        <source> Start building reliable agentic systems with guardrails, observability, and workflows that match how your team already ships software. </source>
+        <source> Keep agent-assisted work on the same bar as the rest of your practice: guardrails, observability, and controls that match how you review changes, manage access, and release software. </source>
         </trans-unit>
       <trans-unit id="featurePortalHome-getStarted" datatype="html">
         <source><x id="START_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;i class=&quot;bi bi-rocket-takeoff me-2&quot; aria-hidden=&quot;true&quot;&gt;"/><x id="CLOSE_ITALIC_TEXT" ctype="x-i" equiv-text="&lt;/i&gt;"/> Get started </source>

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

@@ -1,18 +1,19 @@
 <!-- Hero Section -->
-<section id="hero" class="py-10 py-lg-6 bg-dark text-white">
-  <div class="container">
+<section id="hero" class="pt-10 py-lg-6 bg-dark text-white">
+  <div class="container hero-content">
     <div class="row justify-content-center">
       <div class="col-12 text-center hero-container">
         <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalHome-heroTitle">
-          <span class="text-primary">Centralized Control</span> For Distributed AI Agents
+          <span class="text-primary">Centralized control</span> for AI agents in your software delivery pipeline
         </h1>
         <p class="hero-lead lead fs-5 mb-4 mx-auto" i18n="@@featurePortalHome-heroLead">
-          Modern teams don't struggle to create AI agents. They struggle to control them. Agenstra gives engineering and
-          platform teams a single place to design, deploy, and govern AI agents across tools, clouds, and environments.
+          Agents are wired into editors, pipelines, and internal tools as part of how teams ship. Agenstra gives
+          engineering and platform teams one place to define policy, observe behavior, and govern how agents access
+          code, systems, and environments from development through production.
         </p>
         <p class="fs-6 mb-5 hero-cta-line" i18n="@@featurePortalHome-heroCtaLine">
-          Start building reliable agentic systems with guardrails, observability, and workflows that match how your team
-          already ships software.
+          Keep agent-assisted work on the same bar as the rest of your practice: guardrails, observability, and controls
+          that match how you review changes, manage access, and release software.
         </p>
         <div class="d-flex gap-3 justify-content-center flex-wrap">
           <a
@@ -38,6 +39,41 @@ <h1 class="display-4 fw-semibold mb-4 hero-title" i18n="@@featurePortalHome-hero
       </div>
     </div>
   </div>
+  <div class="container">
+    <div class="row">
+      <div class="col-md-12 intent-cards" (mouseenter)="pauseAutoplay()" (mouseleave)="resumeAutoplay()">
+        <img
+          src="assets/images/screenshots/spaces-dark_framed.png"
+          alt="Spaces"
+          class="img-fluid intent-card"
+          [class.d-none]="activeSlide() !== 1"
+        />
+        <img
+          src="assets/images/screenshots/tasks-dark_framed.png"
+          alt="Tasks"
+          class="img-fluid intent-card"
+          [class.d-none]="activeSlide() !== 2"
+        />
+        <img
+          src="assets/images/screenshots/editor-dark_framed.png"
+          alt="IDE"
+          class="img-fluid intent-card"
+          [class.d-none]="activeSlide() !== 3"
+        />
+        <img
+          src="assets/images/screenshots/audit-dark_framed.png"
+          alt="Audit"
+          class="img-fluid intent-card"
+          [class.d-none]="activeSlide() !== 4"
+        />
+        <div
+          class="intent-card-progress bg-body-tertiary"
+          style="--progress: {{ (activeSlide() / 4) * 75 }}px"
+          (click)="scrollToIntent($event)"
+        ></div>
+      </div>
+    </div>
+  </div>
 </section>
 
 <!-- Supported AI Agents Section -->

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

@@ -105,3 +105,63 @@
   font-size: 6rem;
   opacity: 0.2;
 }
+
+.intent-cards {
+  margin-top: -5rem;
+  position: relative;
+
+  @media (max-width: 768px) {
+    padding-top: 2.5rem;
+    margin-top: 0;
+
+    > .intent-card {
+      display: none;
+    }
+
+    .intent-card-progress {
+      display: none;
+    }
+  }
+
+  @media (max-width: 992px) and (min-width: 768px) {
+    margin-top: -2rem;
+  }
+
+  @media (max-width: 1200px) and (min-width: 992px) {
+    margin-top: -3rem;
+  }
+
+  > .intent-card {
+    position: relative;
+    z-index: 3;
+  }
+
+  .intent-card-progress {
+    position: relative;
+    width: 75px;
+    height: 10px;
+    margin: 0 auto;
+    border-radius: 5px;
+    overflow: hidden;
+    margin-top: -10px;
+    z-index: 4;
+    top: -1rem;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: var(--progress);
+      height: 100%;
+      background-color: var(--bs-primary);
+      transition: width 0.3s ease;
+    }
+  }
+}
+
+.hero-content {
+  position: relative;
+  z-index: 10;
+}

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

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject, OnInit, PLATFORM_ID, signal } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
 
@@ -14,6 +14,9 @@ import { RouterModule } from '@angular/router';
 export class PortalHomeComponent implements OnInit {
   private readonly titleService = inject(Title);
   private readonly metaService = inject(Meta);
+  private readonly platformId = inject(PLATFORM_ID);
+  activeSlide = signal<number>(1);
+  autoplayInterval = this.initializeAutoplayInterval();
 
   ngOnInit(): void {
     this.titleService.setTitle(
@@ -33,4 +36,38 @@ export class PortalHomeComponent implements OnInit {
       { name: 'canonical', content: 'https://agenstra.com' },
     ]);
   }
+
+  scrollToIntent(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    const clickX = event.clientX - rect.left;
+    const slideWidth = rect.width / 4;
+    let slideNum = Math.floor(clickX / slideWidth) + 1;
+    slideNum = Math.max(1, Math.min(4, slideNum));
+    this.activeSlide.set(slideNum);
+  }
+
+  pauseAutoplay() {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+    }
+    this.autoplayInterval = null;
+  }
+
+  resumeAutoplay() {
+    this.autoplayInterval = this.initializeAutoplayInterval();
+  }
+
+  private initializeAutoplayInterval() {
+    if (isPlatformBrowser(this.platformId)) {
+      return setInterval(() => {
+        this.activeSlide.update((prev) => prev + 1);
+        if (this.activeSlide() > 4) {
+          this.activeSlide.set(1);
+        }
+      }, 3000);
+    }
+
+    return null;
+  }
 }