From 3904addeb0b50ece6d652e70f1ea1831cf9f0b4b Mon Sep 17 00:00:00 2001
From: "Abdullah." <125115953+mabdullahabaid@users.noreply.github.com>
Date: Tue, 12 May 2026 18:50:06 +0500
Subject: [PATCH] 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"
/>
---
 .../src/icons/informative/Lightbulb.tsx       | 30 +++++++++++++++++++
 .../src/icons/informative/index.ts            |  3 ++
 .../src/sections/Menu/data.ts                 |  7 +++--
 .../src/sections/Menu/types/menu-nav-item.ts  |  2 +-
 4 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-website-new/src/icons/informative/Lightbulb.tsx

diff --git a/packages/twenty-website-new/src/icons/informative/Lightbulb.tsx b/packages/twenty-website-new/src/icons/informative/Lightbulb.tsx
new file mode 100644
index 0000000000..c7c62f1c2e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/twenty-website-new/src/icons/informative/index.ts b/packages/twenty-website-new/src/icons/informative/index.ts
index fc1a419d43..52bbab7bac 100644
--- a/packages/twenty-website-new/src/icons/informative/index.ts
+++ b/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,
diff --git a/packages/twenty-website-new/src/sections/Menu/data.ts b/packages/twenty-website-new/src/sections/Menu/data.ts
index c487d87094..aec3446378 100644
--- a/packages/twenty-website-new/src/sections/Menu/data.ts
+++ b/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.`,
           },
diff --git a/packages/twenty-website-new/src/sections/Menu/types/menu-nav-item.ts b/packages/twenty-website-new/src/sections/Menu/types/menu-nav-item.ts
index cde92e6825..488cdec31b 100644
--- a/packages/twenty-website-new/src/sections/Menu/types/menu-nav-item.ts
+++ b/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;