[website] X landing page update June/July 2026

docs/package.json

@@ -26,8 +26,8 @@
     "@emotion/react": "catalog:docs",
     "@emotion/server": "catalog:docs",
     "@emotion/styled": "catalog:docs",
-    "@mui/internal-core-docs": "workspace:^",
     "@mui/icons-material": "workspace:^",
+    "@mui/internal-core-docs": "workspace:^",
     "@mui/internal-markdown": "workspace:^",
     "@mui/lab": "workspace:*",
     "@mui/material": "workspace:^",
@@ -38,13 +38,16 @@
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/x-charts": "9.5.0",
+    "@mui/x-chat": "9.0.0-alpha.10",
     "@mui/x-data-grid": "9.5.0",
     "@mui/x-data-grid-generator": "9.5.0",
     "@mui/x-data-grid-premium": "9.5.0",
     "@mui/x-data-grid-pro": "9.5.0",
     "@mui/x-date-pickers": "9.5.0",
     "@mui/x-date-pickers-pro": "9.5.0",
     "@mui/x-license": "9.4.0",
+    "@mui/x-scheduler": "9.0.0-beta.2",
+    "@mui/x-scheduler-premium": "9.0.0-beta.2",
     "@mui/x-tree-view": "9.4.0",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^10.0.3",

docs/src/components/productX/XChatDemo.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { ChatBox, createEchoAdapter } from '@mui/x-chat';
+import type { ChatConversation, ChatMessage, ChatUser } from '@mui/x-chat/types';
+import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode';
+import { Frame } from '@mui/internal-core-docs/AppLayout';
+
+const members: ChatUser[] = [
+  { id: 'user', displayName: 'Alex', role: 'user' },
+  { id: 'assistant', displayName: 'Product assistant', role: 'assistant' },
+];
+
+const initialConversations: ChatConversation[] = [
+  {
+    id: 'renewals',
+    title: 'Renewal analysis',
+    subtitle: 'Product assistant',
+    participants: members,
+    lastMessageAt: '2026-01-12T10:02:00Z',
+  },
+];
+
+const initialMessages: ChatMessage[] = [
+  {
+    id: 'message-1',
+    conversationId: 'renewals',
+    role: 'user',
+    author: members[0],
+    createdAt: '2026-01-12T10:00:00Z',
+    status: 'read',
+    parts: [{ type: 'text', text: 'Compare renewal risk by segment.' }],
+  },
+  {
+    id: 'message-2',
+    conversationId: 'renewals',
+    role: 'assistant',
+    author: members[1],
+    createdAt: '2026-01-12T10:01:00Z',
+    status: 'read',
+    parts: [
+      {
+        type: 'text',
+        text: 'I found three segments with elevated churn risk and can attach the rows used for the summary.',
+      },
+    ],
+  },
+];
+
+const code = `
+<ChatBox
+  adapter={adapter}
+  initialConversations={initialConversations}
+  initialMessages={initialMessages}
+  initialActiveConversationId="renewals"
+/>`;
+
+export default function XChatDemo() {
+  const adapter = React.useMemo(
+    () =>
+      createEchoAdapter({
+        respond: () => 'I can summarize that dashboard and suggest the next chart to inspect.',
+        delayMs: 450,
+      }),
+    [],
+  );
+
+  return (
+    <Frame sx={{ height: '100%' }}>
+      <Frame.Demo sx={{ p: 2 }}>
+        <ChatBox
+          adapter={adapter}
+          members={members}
+          initialConversations={initialConversations}
+          initialMessages={initialMessages}
+          initialActiveConversationId="renewals"
+          initialComposerValue="Which segment should we inspect next?"
+          variant="compact"
+          density="compact"
+          features={{
+            attachments: false,
+            conversationList: false,
+            helperText: false,
+            suggestions: false,
+          }}
+          sx={(theme) => ({
+            height: 360,
+            maxWidth: 420,
+            mx: 'auto',
+            borderRadius: '8px',
+            border: '1px solid',
+            borderColor: 'divider',
+            overflow: 'hidden',
+            bgcolor: '#FFF',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.900',
+            }),
+          })}
+        />
+      </Frame.Demo>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
+        <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
+      </Frame.Info>
+    </Frame>
+  );
+}

docs/src/components/productX/XComponents.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import dynamic from 'next/dynamic';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Section from 'docs/src/layouts/Section';
@@ -10,6 +11,17 @@ import XDateRangeDemo from 'docs/src/components/productX/XDateRangeDemo';
 import XTreeViewDemo from 'docs/src/components/productX/XTreeViewDemo';
 import XChartsDemo from 'docs/src/components/productX/XChartsDemo';
 
+const XEventCalendarDemo = dynamic(() => import('docs/src/components/productX/XSchedulerDemo'), {
+  ssr: false,
+});
+const XEventTimelineDemo = dynamic(
+  () =>
+    import('docs/src/components/productX/XSchedulerDemo').then(
+      (module) => module.XEventTimelineDemo,
+    ),
+  { ssr: false },
+);
+
 export default function XComponents() {
   const [componentIndex, setComponentIndex] = React.useState(0);
   return (
@@ -36,9 +48,11 @@ export default function XComponents() {
         >
           <React.Fragment>
             {componentIndex === 0 && <XGridFullDemo />}
-            {componentIndex === 1 && <XDateRangeDemo />}
-            {componentIndex === 2 && <XChartsDemo />}
-            {componentIndex === 3 && <XTreeViewDemo />}
+            {componentIndex === 1 && <XChartsDemo />}
+            {componentIndex === 2 && <XEventCalendarDemo />}
+            {componentIndex === 3 && <XEventTimelineDemo />}
+            {componentIndex === 4 && <XTreeViewDemo />}
+            {componentIndex === 5 && <XDateRangeDemo />}
           </React.Fragment>
         </Grid>
       </Grid>