style: new empty project screen (#2832)

web/components/project/card-list.tsx

@@ -4,10 +4,10 @@ import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { ProjectCard } from "components/project";
-import { EmptyState } from "components/common";
+import { EmptyState } from "components/project/empty-state";
 import { Loader } from "@plane/ui";
 // images
-import emptyProject from "public/empty-state/project.svg";
+import emptyProject from "public/empty-state/Project_full_screen.svg";
 // icons
 import { Plus } from "lucide-react";
 
@@ -52,11 +52,11 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
       ) : (
         <EmptyState
           image={emptyProject}
-          title="No projects yet"
-          description="Get started by creating your first project"
+          title="Why no fly 😔"
+          description="Let’s take off, cap’n!"
           primaryButton={{
             icon: <Plus className="h-4 w-4" />,
-            text: "New Project",
+            text: "Start something new",
             onClick: () => commandPaletteStore.toggleCreateProjectModal(true),
           }}
         />

web/components/project/empty-state.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import Image from "next/image";
+
+// ui
+import { Button } from "@plane/ui";
+
+type Props = {
+  title: string;
+  description?: React.ReactNode;
+  image: any;
+  primaryButton?: {
+    icon?: any;
+    text: string;
+    onClick: () => void;
+  };
+  secondaryButton?: React.ReactNode;
+  disabled?: boolean;
+};
+
+export const EmptyState: React.FC<Props> = ({
+  title,
+  description,
+  image,
+  primaryButton,
+  secondaryButton,
+  disabled = false,
+}) => (
+  <div className={`flex items-center lg:p-20 md:px-10 px-5 justify-center h-full w-full`}>
+    <div className="relative h-full w-full max-w-6xl">
+      <Image src={image} className="w-52 sm:w-60" alt={primaryButton?.text} layout="fill" />
+    </div>
+    <div className="absolute pt-[30vh] md:pt-[35vh] lg:pt-[45vh] text-center flex flex-col items-center w-full">
+      <h6 className="text-xl font-semibold mt-6">{title}</h6>
+      {description && <p className="text-custom-text-300 mb-7">{description}</p>}
+      <div className="flex items-center gap-4">
+        {primaryButton && (
+          <Button
+            size="lg"
+            variant="primary"
+            prependIcon={primaryButton.icon}
+            onClick={primaryButton.onClick}
+            disabled={disabled}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
+        {secondaryButton}
+      </div>
+    </div>
+  </div>
+);