feat(web): landing page redesign updates (#1090)

Signed-off-by: Petr Kadlec <[email protected]>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: kapetr

apps/beeai-ui/package.json

@@ -15,10 +15,10 @@
     "@bprogress/next": "^3.2.10",
     "@carbon/colors": "^11.30.0",
     "@carbon/grid": "^11.33.0",
-    "@carbon/icons-react": "^11.57.0",
+    "@carbon/icons-react": "^11.65.0",
     "@carbon/layout": "^11.31.0",
     "@carbon/motion": "^11.25.0",
-    "@carbon/react": "^1.83.0",
+    "@carbon/react": "^1.89.0",
     "@carbon/styles": "^1.82.0",
     "@floating-ui/react": "^0.27.5",
     "@ibm/plex": "^6.4.1",

apps/beeai-web/package.json

@@ -3,8 +3,9 @@
   "version": "0.3.1",
   "private": true,
   "peerDependencies": {
-    "@bprogress/next": "*",
+    "@carbon/react": "*",
     "@carbon/icons-react": "*",
+    "@bprogress/next": "*",
     "@tanstack/react-query": "*",
     "framer-motion": "*",
     "lottie-react": "*",
@@ -15,7 +16,6 @@
     "react-is": "*"
   },
   "dependencies": {
-    "@carbon/react": "^1.83.0",
     "@i-am-bee/beeai-ui": "workspace:*",
     "clsx": "^2.1.1",
     "server-only": "^0.0.1",

apps/beeai-web/src/modules/home/Framework.tsx

@@ -4,7 +4,7 @@
  */
 
 'use client';
-import { LogoPython, Plug, Rocket, SettingsAdjust, Unlocked, WorkflowAutomation } from '@carbon/icons-react';
+import { FlowConnection, InsertPage, LogoPython, Plug, SettingsAdjust, Shapes } from '@carbon/icons-react';
 import { Theme, useTheme } from '@i-am-bee/beeai-ui';
 import { useIsClient } from 'usehooks-ts';
 
@@ -13,6 +13,7 @@ import { LayoutContainer } from '@/layouts/LayoutContainer';
 
 import FrameworkGraphicsDark from './assets/framework-diagram-dark.svg';
 import FrameworkGraphicsLight from './assets/framework-diagram-light.svg';
+import type { FeatureItem } from './components/FeaturesList';
 import { FeaturesList } from './components/FeaturesList';
 import { HeadlineWithLink } from './components/HeadlineWithLink';
 import { TwoColumnGrid } from './components/TwoColumnGrid';
@@ -27,9 +28,8 @@ export function Framework() {
       <LayoutContainer asGrid>
         <TwoColumnGrid className={classes.info}>
           <HeadlineWithLink
-            title="Framework"
-            description="Build production-ready AI agents with enterprise-grade reliability, built-in caching, memory optimization,
-              resource management, and real-time monitoring."
+            title="beeai-framework"
+            description="Build reliable, intelligent agents with our lightweight framework that goes beyond prompting and enforces rules."
             buttonProps={{ url: FRAMEWORK_QUICKSTART_LINK }}
             inverse
           />
@@ -49,56 +49,40 @@ export function Framework() {
   );
 }
 
-const FEATURES_ITEMS = [
+const FEATURES_ITEMS: FeatureItem[] = [
   {
-    icon: Rocket,
-    content: (
-      <>
-        <strong>Production-ready from day one</strong> with built-in caching, memory optimization, resource management
-        and real-time monitoring with OpenTelemetry integration.
-      </>
-    ),
+    icon: FlowConnection,
+    title: 'Dynamic workflows',
+    content:
+      'Use simple decorators to design multi-agent systems with advanced patterns like parallelism, retries, and replanning.',
   },
   {
-    icon: WorkflowAutomation,
-    content: (
-      <>
-        <strong>Workflow Orchestration</strong> connects agents seamlessly, passing tasks between them while maintaining
-        context. Ensures reliable execution from simple to complex multi-agent processes.
-      </>
-    ),
+    icon: SettingsAdjust,
+    title: 'Configuration over code',
+    content: 'Define complex agent systems in YAML, for more predictable and maintainable orchestration.',
   },
   {
-    icon: LogoPython,
-    content: (
-      <>
-        <strong>Python and TypeScript support</strong> with complete feature parity.
-      </>
-    ),
+    icon: InsertPage,
+    title: 'Modular by design',
+    content:
+      'Composable modules with stable interfaces give you a testable and maintainable foundation for production-grade AI.',
   },
   {
-    icon: Unlocked,
-    content: (
-      <>
-        <strong>No vendor lock-in</strong> - works with 10+ LLM providers, out-of-the-box.
-      </>
-    ),
+    icon: Plug,
+    title: 'Pluggable observability',
+    content:
+      'Integrate with your existing stack in minutes with native OpenTelemetry support for auditing and monitoring.',
   },
   {
-    icon: SettingsAdjust,
-    content: (
-      <>
-        <strong>Complete control over agent behavior</strong>, performance optimization, and resource allocation.
-      </>
-    ),
+    icon: LogoPython,
+    title: 'Dual-language support',
+    content:
+      'Feature parity between the Python and TypeScript lets teams build with the tools they already know and love.',
   },
   {
-    icon: Plug,
-    content: (
-      <>
-        <strong>Existing stack integration</strong> with MCP compatibility, custom tool development support, and
-        seamless tool integration.
-      </>
-    ),
+    icon: Shapes,
+    title: 'Protocol native',
+    content:
+      'Build MCP-compatible components, equip agents with MCP tools, and interoperate with any MCP or A2A agent.',
   },
 ];

apps/beeai-web/src/modules/home/Introduction.module.scss

@@ -6,7 +6,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  margin-block-start: rem(103px);
+  padding-block: rem(104px);
 }
 
 .headline {
@@ -23,30 +23,7 @@
   }
 }
 
-.info {
-  margin-block-start: rem(105px);
-  background-color: $green-10;
-  color: $black;
-  padding-block: $spacing-08;
-}
-.infoContent {
-  grid-column: 3 / -3;
-  p {
-    font-size: rem(20px);
-    line-height: math.div(28, 20);
-    max-inline-size: rem(845px);
-
-    a {
-      font-weight: 600;
-      color: $black;
-    }
-  }
-}
-
 @include breakpoint-down(md) {
-  .infoContent {
-    grid-column: 2 / -2;
-  }
   .headline h1 {
     font-size: clamp(rem(48px), 13vw, rem(80px));
   }

apps/beeai-web/src/modules/home/Introduction.tsx

@@ -12,28 +12,16 @@ import classes from './Introduction.module.scss';
 
 export function Introduction() {
   return (
-    <>
-      <LayoutContainer>
-        <section className={classes.root}>
-          <div className={classes.headline}>
-            <h1>
-              <LogoBeeAI /> the enterprise AI agent development, simplified.
-            </h1>
-            <GitHubButton />
-          </div>
-        </section>
-      </LayoutContainer>
-      <section className={classes.info}>
-        <LayoutContainer asGrid>
-          <div className={classes.infoContent}>
-            <p>
-              BeeAI provides two complementary open- source components for Enterprise Developers: a&nbsp;
-              <a href="#framework">framework</a> for building reliable AI agents and a <a href="#platform">platform</a>{' '}
-              for creating shareable interfaces.
-            </p>
-          </div>
-        </LayoutContainer>
+    <LayoutContainer>
+      <section className={classes.root}>
+        <div className={classes.headline}>
+          <h1>
+            <LogoBeeAI /> <br />
+            control and agency without compromise
+          </h1>
+          <GitHubButton />
+        </div>
       </section>
-    </>
+    </LayoutContainer>
   );
 }

apps/beeai-web/src/modules/home/Platform.tsx

@@ -4,13 +4,15 @@
  */
 
 'use client';
-import { LogoPython, Rocket, SettingsAdjust, Unlocked } from '@carbon/icons-react';
+import { Deploy, Gui, Unlocked } from '@carbon/icons-react';
 import Image from 'next/image';
 
 import { PLATFORM_QUICKSTART_LINK } from '@/constants';
 import { LayoutContainer } from '@/layouts/LayoutContainer';
 
+import InterfaceUsageAlt from './assets/interface-usage-alt.svg';
 import screenshotsImage from './assets/platform.png';
+import type { FeatureItem } from './components/FeaturesList';
 import { FeaturesList } from './components/FeaturesList';
 import { HeadlineWithLink } from './components/HeadlineWithLink';
 import { TwoColumnGrid } from './components/TwoColumnGrid';
@@ -23,8 +25,8 @@ export function Platform() {
         <TwoColumnGrid className={classes.info}>
           <div className={classes.infoLeft}>
             <HeadlineWithLink
-              title="Platform"
-              description="Deploy any AI agent with a custom web interface in minutes."
+              title="beeai-platform"
+              description="Test, debug, and share your agents in an interactive UI with out-of-the-box trajectory, citations, and more."
               buttonProps={{ url: PLATFORM_QUICKSTART_LINK }}
             />
           </div>
@@ -42,37 +44,29 @@ export function Platform() {
   );
 }
 
-const FEATURES_ITEMS = [
+const FEATURES_ITEMS: FeatureItem[] = [
   {
-    icon: Rocket,
-    content: (
-      <>
-        <strong>Create front-end interfaces</strong> for your Agents without a front-end developer skillset.
-      </>
-    ),
+    icon: Gui,
+    title: 'Instant agent UI',
+    content:
+      "Generate a shareable front-end from your code in minutes. Focus on your agent's logic, not UI frameworks.",
   },
   {
-    icon: LogoPython,
-    content: (
-      <>
-        <strong>Deploy agents from any framework</strong> — BeeAI, Langchain, CrewAI, or custom implementations.
-      </>
-    ),
+    icon: InterfaceUsageAlt,
+    title: 'Effortless deployment',
+    content:
+      'Go from container to production-ready. We handle database, storage, scaling, and RAG so you can focus on your agent.',
   },
   {
     icon: Unlocked,
-    content: (
-      <>
-        <strong>Test agents with 10+ LLM providers</strong> including OpenAI, Anthropic, Google Gemini, and IBM watsonx.
-      </>
-    ),
+    title: 'Multi-provider playground',
+    content:
+      'Test across OpenAI, Anthropic, Gemini, IBM watsonx, Ollama and more. Instantly compare performance and cost to find the optimal model.',
   },
   {
-    icon: SettingsAdjust,
-    content: (
-      <>
-        <strong>Enable agent interpretability</strong> by using A2A and the BeeAI SDK under the hood.
-      </>
-    ),
+    icon: Deploy,
+    title: 'Framework-agnostic',
+    content:
+      'Run agents from LangChain, CrewAI, BeeAI and more on a single platform. Enable cross-framework collaboration without rewriting your code.',
   },
 ];

apps/beeai-web/src/modules/home/assets/interface-usage-alt.svg

@@ -8,6 +8,10 @@
     display: flex;
     flex-direction: column;
     gap: $spacing-04;
+    font-size: rem(20px);
+    line-height: math.div(26, 20);
+    text-wrap: pretty;
+    max-inline-size: rem(369px);
 
     svg {
       block-size: rem(40px);
@@ -16,15 +20,14 @@
         fill: currentColor;
       }
     }
-    span {
-      font-size: rem(20px);
-      line-height: math.div(26, 20);
-      text-wrap: pretty;
-      max-inline-size: rem(369px);
-    }
   }
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
 @include breakpoint-down(md) {
   .root {
     li span {

apps/beeai-web/src/modules/home/components/FeaturesList.module.scss

@@ -4,14 +4,15 @@
  */
 
 import clsx from 'clsx';
-import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import type { ComponentType, PropsWithChildren } from 'react';
 
 import classes from './FeaturesList.module.scss';
 import { TwoColumnGrid } from './TwoColumnGrid';
 
-interface FeatureItem {
+export interface FeatureItem {
   icon: ComponentType;
-  content: ReactNode;
+  title: string;
+  content: string;
 }
 
 interface Props {
@@ -22,10 +23,13 @@ interface Props {
 export function FeaturesList({ className, items }: PropsWithChildren<Props>) {
   return (
     <TwoColumnGrid className={clsx(classes.root, className)} as="ul">
-      {items.map(({ icon: Icon, content }, idx) => (
+      {items.map(({ icon: Icon, title, content }, idx) => (
         <li key={idx}>
           <Icon />
-          <span>{content}</span>
+          <div className={classes.content}>
+            <strong>{title}</strong>
+            <span>{content}</span>
+          </div>
         </li>
       ))}
     </TwoColumnGrid>

apps/beeai-web/src/modules/home/components/FeaturesList.tsx

@@ -21,7 +21,7 @@ export function GitHubButton() {
       className={classes.root}
       renderIcon={LogoGithub}
     >
-      Hack with us on GitHub
+      Get started on GitHub
     </Button>
   );
 }