fix(landing): rebuild enterprise stack section with real product previews

Replace the enterprise stack cards with updated messaging, larger media areas, and real Cloud/Skill Hub/Onboarding screenshots plus a live OpenWork demo shell so the section reflects the actual product experience.

Made-with: Cursor

ee/apps/landing/components/landing-enterprise.tsx

@@ -1,11 +1,21 @@
+"use client";
+
 import {
+  Cloud,
+  Monitor,
   PlugZap,
-  Rocket,
   ShieldCheck,
   Users
 } from "lucide-react";
+import { useState } from "react";
 import { BookCallForm } from "./book-call-form";
+import { LandingAppDemoPanel } from "./landing-app-demo-panel";
 import { LandingBackground } from "./landing-background";
+import {
+  defaultLandingDemoFlowId,
+  landingDemoFlows,
+  landingDemoFlowTimes
+} from "./landing-demo-flows";
 import { SiteFooter } from "./site-footer";
 import { SiteNav } from "./site-nav";
 
@@ -15,34 +25,43 @@ type Props = {
   calUrl: string;
 };
 
-const deploymentModes = [
+const stackItems = [
   {
-    title: "Easy for every team",
+    id: "desktop",
+    title: "Desktop app",
     description:
-      "Give nontechnical users a desktop app they can install quickly and use without learning developer tools.",
-    icon: Users
+      "Employees get an easy-to-use desktop app with your shared skills and plugins ready to run.",
+    icon: Monitor
   },
   {
-    title: "Preconfigured environment",
+    id: "cloud",
+    title: "Cloud",
     description:
-      "Start with your gateway, MCP servers, skills, and internal data sources already connected.",
-    icon: PlugZap
+      "Admins set guardrails, providers, and policy controls, then deploy workflows across the organisation.",
+    icon: Cloud,
+    imageSrc: "/stack-cloud-dashboard.png"
   },
   {
-    title: "Guardrails built in",
+    id: "skill-hub",
+    title: "Skill Hub",
     description:
-      "Set permissions, tool boundaries, and approved workflows so teams can use agentic workflows safely.",
-    icon: ShieldCheck
+      "Publish reusable workflows and team-specific skill packs from one place.",
+    icon: PlugZap,
+    imageSrc: "/stack-skill-hub.png"
+  },
+  {
+    id: "onboarding",
+    title: "Custom onboarding",
+    description:
+      "Roll out the right tools, context, and templates for each team from day one.",
+    icon: ShieldCheck,
+    imageSrc: "/stack-custom-onboarding.png"
   }
 ];
 
-const rolloutSteps = [
-  "Start with one workflow that has a clear owner.",
-  "Run it through your approved gateway with permissions in place.",
-  "Package what works into shared skills for broader rollout."
-];
-
 export function LandingEnterprise(props: Props) {
+  const [activeStackDemoId, setActiveStackDemoId] = useState(defaultLandingDemoFlowId);
+
   return (
     <div className="relative min-h-screen overflow-hidden text-[#011627]">
       <LandingBackground />
@@ -59,20 +78,14 @@ export function LandingEnterprise(props: Props) {
 
         <main className="mx-auto flex w-full max-w-5xl flex-col gap-16 px-6 pb-24 md:gap-20 md:px-8 md:pb-28">
           <section className="max-w-4xl">
-            <div className="landing-chip mb-4 inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500">
-              OpenWork Enterprise
-            </div>
-
             <h1 className="mb-6 text-4xl font-medium leading-[1.05] tracking-tight md:text-5xl lg:text-6xl">
-              Secure, permissioned agentic workflows for enterprise teams.
+              Scale your existing AI workflows across your organisation at a fraction of the cost.
             </h1>
 
             <p className="max-w-3xl text-lg leading-relaxed text-slate-600 md:text-xl">
-              Run agentic workflows through your existing gateway, with
-              approved tools, clear permissions, and a rollout path your
-              non-technical teams can actually use, whether you self-host in
-              your own infrastructure or deploy with OpenWork. Enterprise
-              licensing includes Windows support.
+              Get your entire organisation on your skills, plugins, and AI
+              workflows. Use your own API providers and integrate with systems
+              like LiteLLM out of the box.
             </p>
 
             <div className="mt-8 flex flex-col items-start gap-4 sm:flex-row sm:items-center">
@@ -108,62 +121,67 @@ export function LandingEnterprise(props: Props) {
           </section>
 
           <section className="space-y-6">
-            <div className="landing-shell rounded-[2rem] p-6 md:p-8">
-              <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-blue-700">
-                <Rocket size={12} />
-                Pilot and rollout
-              </div>
-              <div className="grid gap-4 md:grid-cols-[1.1fr_0.9fr]">
-                <div>
-                  <h3 className="mb-3 text-2xl font-medium tracking-tight text-[#011627]">
-                    Start with one workflow. Expand once it works.
-                  </h3>
-                  <p className="text-[15px] leading-relaxed text-slate-600">
-                    Most teams should begin with a focused use case, one
-                    approved path to data, and clear guardrails. Once the
-                    workflow works, it can be packaged and rolled out more
-                    broadly.
-                  </p>
-                </div>
-                <div className="space-y-3">
-                  {rolloutSteps.map((step, index) => (
+            <div>
+              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {stackItems.map((item) => {
+                  const Icon = item.icon;
+                  return (
                     <div
-                      key={step}
-                      className="flex gap-3 rounded-2xl border border-slate-200/70 bg-white/85 px-4 py-4 shadow-sm"
+                      key={item.title}
+                      className="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white"
                     >
-                      <div className="step-circle shrink-0">{index + 1}</div>
-                      <p className="text-[14px] leading-relaxed text-slate-600">
-                        {step}
-                      </p>
+                      <div className="flex h-[220px] items-center justify-center bg-gray-50/60 p-4 md:h-[280px]">
+                        {item.id === "desktop" ? (
+                          <div className="h-full w-full overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+                            <div className="relative flex h-7 items-center border-b border-gray-100 bg-gradient-to-b from-white to-gray-50 px-3">
+                              <div className="flex gap-1.5">
+                                <div className="h-2 w-2 rounded-full bg-[#ff5f56]"></div>
+                                <div className="h-2 w-2 rounded-full bg-[#ffbd2e]"></div>
+                                <div className="h-2 w-2 rounded-full bg-[#27c93f]"></div>
+                              </div>
+                              <div className="absolute left-1/2 -translate-x-1/2 text-[10px] font-medium tracking-wide text-gray-500">
+                                OpenWork
+                              </div>
+                            </div>
+                            <div className="h-[calc(100%-1.75rem)] overflow-hidden">
+                              <div className="origin-top-left scale-[0.58]">
+                                <div className="w-[172.413793%] bg-white">
+                                  <LandingAppDemoPanel
+                                    flows={landingDemoFlows}
+                                    activeFlowId={activeStackDemoId}
+                                    onSelect={setActiveStackDemoId}
+                                    timesById={landingDemoFlowTimes}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ) : item.imageSrc ? (
+                          <img
+                            src={item.imageSrc}
+                            alt={`${item.title} interface`}
+                            className="h-full w-full rounded-md border border-gray-200 object-cover object-top shadow-sm"
+                          />
+                        ) : (
+                          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-[#011627] shadow-sm">
+                            <Icon size={18} />
+                          </div>
+                        )}
+                      </div>
+                      <div className="border-t border-gray-100 p-5">
+                        <h4 className="text-[16px] font-medium tracking-tight text-[#011627]">
+                          {item.title}
+                        </h4>
+                        <p className="mt-1 text-[14px] text-gray-500">
+                          {item.description}
+                        </p>
+                      </div>
                     </div>
-                  ))}
-                </div>
+                  );
+                })}
               </div>
             </div>
 
-            <div className="grid gap-6 md:grid-cols-3">
-              {deploymentModes.map(mode => {
-                const Icon = mode.icon;
-
-                return (
-                  <div
-                    key={mode.title}
-                    className="landing-shell rounded-[2rem] p-6"
-                  >
-                    <div className="mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-100 text-[#011627] shadow-inner">
-                      <Icon size={18} />
-                    </div>
-                    <h3 className="mb-2 text-[17px] font-medium tracking-tight text-[#011627]">
-                      {mode.title}
-                    </h3>
-                    <p className="text-[14px] leading-relaxed text-slate-600">
-                      {mode.description}
-                    </p>
-                  </div>
-                );
-              })}
-            </div>
-
             <div className="grid gap-6 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
               <div className="landing-shell rounded-[2rem] p-6 md:p-8">
                 <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-emerald-100 bg-emerald-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-700">

ee/apps/landing/components/landing-home.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { AnimatePresence, motion, useInView } from "framer-motion";
-import { Cloud, Download, Monitor, Shield, Users } from "lucide-react";
+import { Download, Users } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 
 import { LandingAppDemoPanel } from "./landing-app-demo-panel";
@@ -210,53 +210,6 @@ export function LandingHome(props: Props) {
             </div>
           </section>
 
-          <section className="grid gap-6 md:grid-cols-3">
-            <div className="landing-shell flex flex-col rounded-xl p-6">
-              <div className="mb-4 flex items-center gap-2.5 text-[11px] font-semibold uppercase tracking-[0.2em] text-gray-400">
-                <Monitor size={18} />
-                Desktop
-              </div>
-              <h2 className="mb-3 text-xl font-medium tracking-tight">Local AI worker</h2>
-              <p className="mb-6 flex-1 text-sm leading-relaxed text-gray-500">
-                Start free on desktop forever with macOS and Linux downloads,
-                then automate email, Slack, and the work you do every day.
-              </p>
-              <div>
-                <a href="/download" className="secondary-button">Learn more</a>
-              </div>
-            </div>
-
-            <div className="landing-shell flex flex-col rounded-xl p-6">
-              <div className="mb-4 flex items-center gap-2.5 text-[11px] font-semibold uppercase tracking-[0.2em] text-gray-400">
-                <Cloud size={18} />
-                Cloud
-              </div>
-              <h2 className="mb-3 text-xl font-medium tracking-tight">Hosted sandboxed workers</h2>
-              <p className="mb-6 flex-1 text-sm leading-relaxed text-gray-500">
-                Workers are disabled by default. Purchase one for $50/month when
-                you need hosted runtime.
-              </p>
-              <div>
-                <a href="/den" className="secondary-button">Learn more</a>
-              </div>
-            </div>
-
-            <div className="landing-shell flex flex-col rounded-xl p-6">
-              <div className="mb-4 flex items-center gap-2.5 text-[11px] font-semibold uppercase tracking-[0.2em] text-gray-400">
-                <Shield size={18} />
-                Enterprise
-              </div>
-              <h2 className="mb-3 text-xl font-medium tracking-tight">Safe workflow sharing</h2>
-              <p className="mb-6 flex-1 text-sm leading-relaxed text-gray-500">
-                Deploy on your infrastructure. Enterprise licensing includes
-                Windows support plus rollout guidance.
-              </p>
-              <div>
-                <a href="/enterprise" className="secondary-button">Learn more</a>
-              </div>
-            </div>
-          </section>
-
           <section className="landing-shell rounded-[2.5rem] p-8 md:p-12">
             <PricingGrid
               windowsCheckoutUrl={props.windowsCheckoutUrl}