Add NewFlowCard2 component and UndrawCardComponent

src/frontend/src/components/NewFLowCard2/index.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent } from "../ui/card";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useNavigate } from "react-router-dom";
+import IconComponent from "../genericIconComponent";
+import { cn } from "../../utils/utils";
+
+export default function NewFlowCardComponent() {
+    const addFlow = useFlowsManagerStore((state) => state.addFlow);
+    const navigate = useNavigate();
+    return (
+        <Card onClick={() => {
+            addFlow(true).then((id) => {
+                navigate("/flow/" + id);
+            });
+        }} className="pt-4 w-80 h-72 cursor-pointer">
+            <CardContent className="w-full h-full flex flex-col items-center align-middle justify-center">
+                        
+                    <IconComponent
+                        className={cn("h-12 w-12 text-muted-foreground")}
+                        name="SquarePen"
+                    />
+                    <div className="text-center text-muted-foreground"> Create from scratch</div>
+            </CardContent>
+        </Card>
+    )
+}

src/frontend/src/components/undrawCards/index.tsx

@@ -0,0 +1,36 @@
+
+import { useNavigate } from "react-router-dom";
+/// <reference types="vite-plugin-svgr/client" />
+//@ts-ignore
+import { ReactComponent as TransferFiles } from "../../assets/undraw_transfer_files_re_a2a9.svg"
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { FlowType } from "../../types/flow"
+import { updateIds } from "../../utils/reactflowUtils";
+import ShadTooltip from "../ShadTooltipComponent"
+import { Card, CardContent, CardDescription, CardFooter, CardTitle } from "../ui/card"
+
+export default function UndrawCardComponent({
+    flow
+}: { flow: FlowType }) {
+    const addFlow = useFlowsManagerStore((state) => state.addFlow);
+    const navigate = useNavigate();
+    return (
+        <Card onClick={() => {
+            updateIds(flow.data!);
+            addFlow(true, flow).then((id) => {
+                navigate("/flow/" + id);
+            });
+        }} className="pt-4 w-80 h-72 cursor-pointer">
+            <CardContent className="w-full h-full">
+                <div className="rounded-md border border-border bg-background w-full h-full flex flex-col items-center align-middle justify-center">
+                    <TransferFiles style={{ width: '80%', height: '80%', preserveAspectRatio: 'xMidYMid meet' }} />                    </div>
+            </CardContent>
+            <CardDescription className="px-4 pb-4">
+                <CardTitle>{flow.name}</CardTitle>
+                <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
+                    <div className="pt-1 truncate-doubleline">{flow.description}</div>
+                </ShadTooltip>
+            </CardDescription>
+        </Card>
+    )
+}

src/frontend/src/pages/MainPage/index.tsx

@@ -2,7 +2,7 @@ import { Group, ToyBrick } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
-import NewFlowCardComponent from "../../components/NewFlowCardComponent";
+import NewFlowCardComponent from "../../components/NewFLowCard2";;
 import ExampleCardComponent from "../../components/exampleComponent";
 import IconComponent from "../../components/genericIconComponent";
 import PageLayout from "../../components/pageLayout";
@@ -17,6 +17,7 @@ import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
 import { downloadFlows } from "../../utils/reactflowUtils";
+import UndrawCardComponent from "../../components/undrawCards";
 export default function HomePage(): JSX.Element {
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
@@ -119,21 +120,21 @@ export default function HomePage(): JSX.Element {
       </div>
       <BaseModal open={openModal} setOpen={setOpenModal}>
         <BaseModal.Header
-          description={"Select a template or start from scratch"}
+          description={"Select a template below"}
         >
           <span className="pr-2" data-testid="modal-title">
-            Create a New Flow
+            Get Started
           </span>
-          <IconComponent
+          {/* <IconComponent
             name="Group"
             className="h-6 w-6 stroke-2 text-primary "
             aria-hidden="true"
-          />
+          /> */}
         </BaseModal.Header>
         <BaseModal.Content>
           <div className="flex h-full w-full flex-wrap gap-3 overflow-auto p-4 custom-scroll">
             {examples.map((example, idx) => {
-              return <ExampleCardComponent key={idx} flow={example} />;
+              return <UndrawCardComponent key={idx} flow={example} />;
             })}
             <NewFlowCardComponent />
           </div>

src/frontend/src/utils/styleUtils.ts

@@ -41,6 +41,7 @@ import {
   EyeOff,
   File,
   FileDown,
+  SquarePen,
   FileSearch,
   FileSearch2,
   FileSliders,
@@ -374,6 +375,7 @@ export const nodeIconsLucide: iconsType = {
   XCircle,
   Info,
   CheckCircle2,
+  SquarePen,
   Zap,
   MessagesSquare,
   ExternalLink,