homepage updates for AI

.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npx tsc:*)"
+    ]
+  }
+}

apps/frontpage/components/home/ai/ai.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import type { FC } from 'react';
+import Link from 'next/link';
+import { Container } from '@repo/ui';
+import { IllustratedFeatureList } from '../illustrated-feature-list';
+import { Testimonial } from '../testimonial';
+import { DocumentAlt, LinkIcon, Runtest } from './icons';
+import { LogoKickstart } from './logo-kickstart';
+
+const features = [
+  {
+    icon: <DocumentAlt />,
+    title: 'Curated context, better output',
+    description:
+      'The MCP compiles info about your components—APIs, stories, usage patterns & tests—into an optimized payload for agents.',
+    link: {
+      label: 'Learn about component manifest',
+      href: '/docs/component-manifest',
+    },
+    // TODO: Add video/poster assets for curated context feature
+    media: '/home/test/homepage-spot-testing-lg.mp4',
+    poster: '/home/test/homepage-spot-testing-poster-lg.jpg',
+  },
+  {
+    icon: <Runtest />,
+    title: 'Self-healing through tests',
+    description:
+      'Agents run your interaction and accessibility tests, see what fails, and fix their own bugs. You only need to step in after the tests pass.',
+    link: {
+      label: 'Learn about self-healing loop',
+      href: '/docs/writing-tests',
+    },
+    // TODO: Add video/poster assets for self-healing feature
+    media: '/home/test/homepage-spot-testing-lg.mp4',
+    poster: '/home/test/homepage-spot-testing-poster-lg.jpg',
+  },
+  {
+    icon: <LinkIcon />,
+    title: 'Share across your organization',
+    description:
+      'Publish your MCP to ensure that it is accessible to your entire team and their coding agents.',
+    link: {
+      label: 'Learn about published MCP',
+      href: 'https://www.chromatic.com/docs/mcp',
+    },
+    // TODO: Add video/poster assets for organization sharing feature
+    media: '/home/test/homepage-spot-testing-lg.mp4',
+    poster: '/home/test/homepage-spot-testing-poster-lg.jpg',
+  },
+];
+
+export const AI: FC = () => {
+  return (
+    <div className="overflow-hidden border-b border-zinc-600 pt-12 sm:pt-20 md:pt-28">
+      {features.map((feature) => (
+        <Link
+          as="video"
+          href={feature.media}
+          key={feature.title}
+          rel="preload"
+        />
+      ))}
+      <Container className="justify-between gap-20 text-white md:flex lg:px-8">
+        <h2 className="flex-1 text-4xl font-bold md:text-[56px]/[70px]">
+          Build with AI agents
+        </h2>
+        <div className="flex-1 pt-4">
+          <p className="mb-6 max-w-[520px] leading-7">
+            Stories give agents the context they need—APIs, usage patterns, and
+            tests. Storybook MCP serves this knowledge so agents generate higher
+            quality code.
+          </p>
+        </div>
+      </Container>
+      <IllustratedFeatureList bgColor="#E0D4FC" features={features} />
+      <Testimonial
+        avatarUrl="https://avatars2.githubusercontent.com/u/136760?s=460&v=4"
+        jobTitle="Technical Director"
+        logo={<LogoKickstart />}
+        name="Jonas Ulrich"
+        text="“Even without much custom tuning, Storybook MCP generates really some impressive results for us!”"
+      />
+    </div>
+  );
+};

apps/frontpage/components/home/ai/icons/document-alt.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const DocumentAlt = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 48 48"
+    fill="none"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7 0C4.79083 0 3 1.79083 3 4V44C3 46.2092 4.79083 48 7 48H41C43.2092 48 45 46.2092 45 44V9L36 0H7Z"
+      fill="#FFE8B6"
+    />
+    <rect x="9" y="17" width="9" height="5" rx="2" fill="#FEBD32" />
+    <rect x="20" y="17" width="19" height="5" rx="2" fill="#FEBD32" />
+    <rect x="9" y="26" width="9" height="5" rx="2" fill="#FEBD32" />
+    <rect x="20" y="26" width="19" height="5" rx="2" fill="#FEBD32" />
+    <rect x="9" y="35" width="9" height="5" rx="2" fill="#FEBD32" />
+    <rect x="20" y="35" width="19" height="5" rx="2" fill="#FEBD32" />
+    <path d="M36 0V5C36 7.20914 37.7909 9 40 9H45L36 0Z" fill="#FEBD32" />
+  </svg>
+);

apps/frontpage/components/home/ai/icons/index.ts

@@ -0,0 +1,3 @@
+export { DocumentAlt } from './document-alt';
+export { Link as LinkIcon } from './link';
+export { Runtest } from './runtest';

apps/frontpage/components/home/ai/icons/link.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const Link = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g fill="none">
+      <path
+        d="m16 24.9.4-.4a4.7 4.7 0 0 1 6.3-.3l.3.4c3 3 8 3 11 0l5-5.1A7.7 7.7 0 1 0 28 8.6l-3.2 3.3c-2.5-.8-5-1-7.6-.6l1.6-1.9 5-5a13.7 13.7 0 0 1 19.4 19.3l-5 5.1a13.7 13.7 0 0 1-22.1-4z"
+        fill="#FC8562"
+      />
+      <path
+        d="m32 22.2-.3.3a4.7 4.7 0 0 1-6.2.4l-.4-.4c-3-3-8-3-11 0l-5 5a7.7 7.7 0 0 0 11 11l3.3-3.3c2.4.7 5 1 7.5.5-.4.7-1 1.4-1.6 2l-5 5A13.7 13.7 0 1 1 4.9 23.3l5-5a13.7 13.7 0 0 1 22.2 3.9z"
+        fill="#FFC445"
+      />
+    </g>
+  </svg>
+);

apps/frontpage/components/home/ai/icons/runtest.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+export const Runtest = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    viewBox="0 0 48 48"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M30.6 23.4 21 17a.8.8 0 0 0-.5-.1c-.3 0-.5.3-.5.8v12.4c0 .5.2.8.5.8l.5-.1 9.6-6.3c.5-.3.5-.9 0-1.2"
+        fill="#66BF3C"
+      />
+      <path
+        d="M2 24h5.8A16.2 16.2 0 1 0 24 7.8V2A22 22 0 1 1 2 24z"
+        fill="#A0DB77"
+      />
+      <path d="M2 24A22 22 0 0 1 24 2v5.8C15 7.8 7.8 15.1 7.8 24H2z" />
+    </g>
+  </svg>
+);

apps/frontpage/components/home/ai/logo-kickstart.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export const LogoKickstart = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="150"
+    fill="none"
+    viewBox="0 0 364 60"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M95.68 44.936 101.248 53h9.312l-9.6-13.776 8.832-9.504h-9.264l-8.112 8.736V18.92H84.64V53h7.776v-4.56zM117.359 26.072c2.496 0 4.56-1.872 4.56-4.368 0-2.544-2.064-4.416-4.56-4.416-2.544 0-4.56 1.872-4.56 4.416 0 2.496 2.016 4.368 4.56 4.368m3.936 3.648h-7.776V53h7.776zM138.257 46.952c-3.312 0-5.328-2.448-5.328-5.616s2.016-5.568 5.328-5.568c2.4 0 4.176 1.392 4.56 3.504h7.344c-.528-6-5.472-10.08-11.904-10.08-7.344 0-12.72 5.088-12.72 12.144 0 7.104 5.376 12.192 12.72 12.192 6.432 0 11.376-4.08 11.904-10.08h-7.344c-.384 2.112-2.16 3.504-4.56 3.504M165.336 44.936 170.904 53h9.312l-9.6-13.776 8.832-9.504h-9.264l-8.112 8.736V18.92h-7.776V53h7.776v-4.56zM180.743 44.984c.48 6.192 5.424 8.736 11.52 8.736 6.048 0 10.896-2.496 10.896-7.872 0-4.128-2.88-6.24-7.248-7.056l-4.368-.72c-1.824-.336-2.4-1.056-2.4-1.824 0-.912.912-1.68 2.928-1.68 2.16 0 3.792.816 3.936 2.592h6.912c-.336-6.144-5.952-8.064-10.896-8.064-6.192 0-10.368 2.88-10.368 7.776 0 4.08 2.784 6.336 6.816 7.008l4.704.816c1.536.24 2.256.864 2.256 1.632 0 1.008-1.248 1.632-3.312 1.632-2.448 0-4.128-.912-4.464-2.928zM225.167 45.992c-1.728.336-3.024.576-4.128.576-2.304 0-3.648-1.152-3.648-3.504v-6.672h7.92V29.72h-7.92V21.8h-7.776v7.92h-4.56v6.672h4.56v6.912c0 6.288 3.744 10.416 9.36 10.416 2.304 0 4.032-.192 7.056-1.152zM253.828 29.72h-7.776v1.248c-1.728-1.104-3.84-1.776-6.384-1.776-6.288 0-11.568 5.184-11.568 12.144 0 6.912 5.28 12.144 11.568 12.144 2.544 0 4.656-.672 6.384-1.776V53h7.776zm-12.624 17.376c-3.168 0-5.472-2.544-5.472-5.76s2.304-5.808 5.472-5.808c1.728 0 3.408.528 4.848 2.208v7.2c-1.44 1.68-3.12 2.16-4.848 2.16M274.901 29.336c-3.456 0-5.952 1.104-8.016 2.88V29.72h-7.776V53h7.776V39.704c1.824-1.824 4.224-2.832 8.016-2.976zM296.932 45.992c-1.728.336-3.024.576-4.128.576-2.304 0-3.648-1.152-3.648-3.504v-6.672h7.92V29.72h-7.92V21.8h-7.776v7.92h-4.56v6.672h4.56v6.912c0 6.288 3.744 10.416 9.36 10.416 2.304 0 4.032-.192 7.056-1.152zM301.911 20.36V53h13.152c10.224 0 17.616-6.72 17.616-16.416 0-9.552-7.392-16.224-17.616-16.224zm8.112 25.344V27.656h5.04c5.28 0 9.36 3.888 9.36 8.928 0 5.184-4.08 9.12-9.36 9.12zM349.66 19.64c-7.68 0-12.96 4.128-12.96 10.656 0 5.184 3.024 8.208 9.456 9.6l5.376 1.2c2.784.528 3.456 1.68 3.456 2.784 0 1.776-1.584 2.88-4.608 2.88-3.84 0-6.336-1.728-6.864-4.608h-8.112c.768 8.064 7.392 11.52 14.736 11.52 8.16 0 13.536-4.08 13.536-10.608 0-5.616-3.888-8.016-9.84-9.312l-4.56-1.056c-2.448-.528-3.744-1.296-3.744-3.072 0-2.112 1.872-3.264 4.656-3.264 3.312 0 4.848 1.68 5.28 4.128h8.16c-.816-8.784-8.688-10.848-13.968-10.848"
+    />
+    <path
+      fill="#fff"
+      d="M0 5a5 5 0 0 1 5-5h50a5 5 0 0 1 5 5v50a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5z"
+    />
+    <path
+      fill="#0d1026"
+      fillRule="evenodd"
+      d="M18.794 7.5H11.25v2.344h1.875v38.962l3.778 3.788h6.535V12.157z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#0d1026"
+      fillRule="evenodd"
+      d="M34.313 30.375H21.187l22.236 22.236 6.563-6.563z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M23.494 36.585h10.327L52.687 17.72h-15.96l-16.05 16.05z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#0d1026"
+      fillRule="evenodd"
+      d="M19.781 33.844H31.97L47.062 18.75H34.876z"
+      clipRule="evenodd"
+    />
+    <path fill="#0d1026" d="M39.563 18.75h7.5v2.344h-7.5z" />
+    <path
+      fill="#0d1026"
+      fillRule="evenodd"
+      d="m40.406 52.427 7.614-7.614 1.591 1.59-7.614 7.615z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

apps/frontpage/components/home/develop/develop.tsx

@@ -59,7 +59,8 @@ export function Develop() {
           <p className="mb-6 leading-7">
             Storybook provides a workshop to build UIs in isolation. It helps
             you develop hard-to-reach states and edge cases without needing to
-            run the whole app.
+            run the whole app. The same context that helps your team also equips
+            AI agents to generate code that matches your patterns.
           </p>
           <div className="flex flex-col gap-4">
             <div className="text-xs font-bold uppercase tracking-widest text-zinc-300">

apps/frontpage/components/home/document/document.tsx

@@ -72,7 +72,8 @@ export const Document: FC = () => {
         <div className="flex-1 pt-4">
           <p className="mb-6 leading-7">
             Storybook brings together UI, examples, and documentation in one
-            place. That helps your team adopt existing UI patterns.
+            place. That helps your team and AI agents adopt existing UI
+            patterns.
           </p>
         </div>
       </Container>