style: empty state for analytics, views and pages (#2967)

web/components/common/new-empty-state.tsx

@@ -46,7 +46,7 @@ export const NewEmptyState: React.FC<Props> = ({
         <h3 className="font-semibold text-2xl">{title}</h3>
         {description && <p className=" text-lg">{description}</p>}
         <div className="relative w-full max-w-6xl">
-          <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text || "button image"} />
+          <Image src={image} className="w-full" alt={primaryButton?.text || "button image"} />
         </div>
 
         <div className="flex justify-center items-start relative">

web/components/pages/pages-list/list-view.tsx

@@ -5,12 +5,12 @@ import { Plus } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { EmptyState } from "components/common";
 import { PagesListItem } from "./list-item";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Loader } from "@plane/ui";
 // images
-import emptyPage from "public/empty-state/page.svg";
+import emptyPage from "public/empty-state/empty_page.webp";
 // types
 import { IPage } from "types";
 
@@ -41,13 +41,19 @@ export const PagesListView: FC<IPagesListView> = observer(({ pages }) => {
               ))}
             </ul>
           ) : (
-            <EmptyState
-              title="Have your thoughts in place"
-              description="You can think of Pages as an AI-powered notepad."
+            <NewEmptyState
+              title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
+              description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
               image={emptyPage}
+              comicBox={{
+                title: "A page can be a doc or a doc of docs.",
+                description:
+                  "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
+                direction: "right",
+              }}
               primaryButton={{
                 icon: <Plus className="h-4 w-4" />,
-                text: "New Page",
+                text: "Create your first page",
                 onClick: () => commandPaletteStore.toggleCreatePageModal(true),
               }}
             />

web/components/pages/pages-list/recent-pages-list.tsx

@@ -5,11 +5,11 @@ import { Plus } from "lucide-react";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { PagesListView } from "components/pages/pages-list";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Loader } from "@plane/ui";
 // assets
-import emptyPage from "public/empty-state/page.svg";
+import emptyPage from "public/empty-state/empty_page.webp";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 
@@ -51,13 +51,19 @@ export const RecentPagesList: FC = observer(() => {
         </>
       ) : (
         <>
-          <EmptyState
-            title="Have your thoughts in place"
-            description="You can think of Pages as an AI-powered notepad."
+          <NewEmptyState
+            title="Write a note, a doc, or a full knowledge base. Get Galileo, Plane’s AI assistant, to help you get started."
+            description="Pages are thoughtspotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. To make short work of any doc, invoke Galileo, Plane’s AI, with a shortcut or the click of a button."
             image={emptyPage}
+            comicBox={{
+              title: "A page can be a doc or a doc of docs.",
+              description:
+                "We wrote Parth and Meera’s love story. You could write your project’s mission, goals, and eventual vision.",
+              direction: "right",
+            }}
             primaryButton={{
               icon: <Plus className="h-4 w-4" />,
-              text: "New Page",
+              text: "Create your first page",
               onClick: () => commandPaletteStore.toggleCreatePageModal(true),
             }}
           />

web/components/views/views-list.tsx

@@ -6,11 +6,11 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectViewListItem } from "components/views";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // ui
 import { Input, Loader } from "@plane/ui";
 // assets
-import emptyView from "public/empty-state/view.svg";
+import emptyView from "public/empty-state/empty_view.webp";
 // icons
 import { Plus, Search } from "lucide-react";
 
@@ -59,13 +59,18 @@ export const ProjectViewsList = observer(() => {
           )}
         </div>
       ) : (
-        <EmptyState
-          title="Get focused with views"
-          description="Views aid in saving your issues by applying various filters and grouping options."
+        <NewEmptyState
+          title="Save filtered views for your project. Create as many as you need."
+          description="Views are a set of saved filters that you use frequently or want easy access to. All your colleagues in a project can see everyone’s views and choose whichever suits their needs best."
           image={emptyView}
+          comicBox={{
+            title: "Views work atop Issue properties.",
+            description: "You can create a view from here with as many properties as filters as you see fit.",
+            direction: "right",
+          }}
           primaryButton={{
             icon: <Plus size={14} strokeWidth={2} />,
-            text: "New View",
+            text: "Build your first view",
             onClick: () => commandPaletteStore.toggleCreateViewModal(true),
           }}
         />

web/pages/[workspaceSlug]/analytics.tsx

@@ -8,11 +8,11 @@ import { AppLayout } from "layouts/app-layout";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 import { WorkspaceAnalyticsHeader } from "components/headers";
-import { EmptyState } from "components/common";
+import { NewEmptyState } from "components/common/new-empty-state";
 // icons
 import { Plus } from "lucide-react";
 // assets
-import emptyAnalytics from "public/empty-state/analytics.svg";
+import emptyAnalytics from "public/empty-state/empty_analytics.webp";
 // constants
 import { ANALYTICS_TABS } from "constants/analytics";
 // type
@@ -58,13 +58,20 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
         </div>
       ) : (
         <>
-          <EmptyState
-            title="You can see your all projects' analytics here"
-            description="Let's create your first project and analyze the stats with various graphs."
+          <NewEmptyState
+            title="Track progress, workloads, and allocations. Spot trends, remove blockers, and move work faster."
+            description="See scope versus demand, estimates, and scope creep. Get performance by team members and teams, and make sure your project runs on time."
             image={emptyAnalytics}
+            comicBox={{
+              title: "Analytics works best with Cycles + Modules",
+              description:
+                "First, timebox your issues into Cycles and, if you can, group issues that span more than a cycle into Modules. Check out both on the left nav.",
+              direction: "right",
+              extraPadding: true,
+            }}
             primaryButton={{
               icon: <Plus className="h-4 w-4" />,
-              text: "New Project",
+              text: "Create Cycles and Modules first",
               onClick: () => {
                 setTrackElement("ANALYTICS_EMPTY_STATE");
                 toggleCreateProjectModal(true);