chore: add an icon to why-twenty page and update preview (#20482)

Added light-bulb icon and replaced the preview with kanban image.

<img width="751" height="391" alt="image"
src="https://github.com/user-attachments/assets/ac406e84-512f-4dcc-8068-cdb9e3978e92"
/>

packages/twenty-website-new/src/icons/informative/Lightbulb.tsx

@@ -0,0 +1,30 @@
+type LightbulbIconProps = {
+  size: number;
+  color: string;
+  strokeWidth?: number;
+};
+
+export function LightbulbIcon({
+  size,
+  color,
+  strokeWidth = 1.5,
+}: LightbulbIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d="M6 11.5v1c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-1M8 1.5a4 4 0 0 0-2.5 7.1c.5.4.8 1 .8 1.7v.2h3.4v-.2c0-.7.3-1.3.8-1.7A4 4 0 0 0 8 1.5Z"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

packages/twenty-website-new/src/icons/informative/index.ts

@@ -4,6 +4,7 @@ import { CheckIcon } from './Check';
 import { CodeIcon } from './Code';
 import { EditIcon } from './Edit';
 import { EyeIcon } from './Eye';
+import { LightbulbIcon } from './Lightbulb';
 import { SearchIcon } from './Search';
 import { TagIcon } from './Tag';
 import { UsersIcon } from './Users';
@@ -13,6 +14,7 @@ export { CheckIcon } from './Check';
 export { CodeIcon } from './Code';
 export { EditIcon } from './Edit';
 export { EyeIcon } from './Eye';
+export { LightbulbIcon } from './Lightbulb';
 export { SearchIcon } from './Search';
 export { TagIcon } from './Tag';
 export { UsersIcon } from './Users';
@@ -32,6 +34,7 @@ export const INFORMATIVE_ICONS: Record<
   code: CodeIcon,
   edit: EditIcon,
   eye: EyeIcon,
+  lightbulb: LightbulbIcon,
   search: SearchIcon,
   tag: TagIcon,
   users: UsersIcon,

packages/twenty-website-new/src/sections/Menu/data.ts

@@ -57,11 +57,12 @@ function buildNavItems(): MenuNavItemType[] {
         },
         {
           label: msg`Why Twenty`,
-          description: msg`The open source CRM built to be customised`,
+          description: msg`Our story and vision`,
           href: '/why-twenty',
+          icon: 'lightbulb',
           preview: {
-            image: '/images/why-twenty/hero/background.webp',
-            imageAlt: 'Why Twenty',
+            image: '/images/product/demo/kanban.webp',
+            imageAlt: 'Twenty CRM pipeline view',
             title: msg`Why Twenty`,
             description: msg`Our story: building a CRM teams can truly own.`,
           },

packages/twenty-website-new/src/sections/Menu/types/menu-nav-item.ts

@@ -1,6 +1,6 @@
 import type { MessageDescriptor } from '@lingui/core';
 
-export type MenuNavChildIcon = 'book' | 'code' | 'tag' | 'users';
+export type MenuNavChildIcon = 'book' | 'code' | 'lightbulb' | 'tag' | 'users';
 
 export type MenuNavChildPreview = {
   image: string;