editor2d demo video on open (#532)

- demo video modal opens at first load

frontend/apps/editor2d/src/app/pages/main/index.tsx

@@ -14,10 +14,17 @@ import { appMode } from "~/signals";
 import { useSignals } from "@preact/signals-react/runtime";
 import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
 import { EditModeRootComponent } from "~/EditModeRootComponent/EditModeRootComponent";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { EngineType } from "~/KonvaApp";
 import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 import { GalleryRootComponent } from "~/GalleryRootComponent";
+import { BaseDialog } from "~/components/ui/BaseDialog";
+import { Button } from "~/components/ui/Button";
+import {
+  faArrowRight,
+  faMagicWandSparkles,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -32,6 +39,7 @@ export const Main = withProtectionRoute(() => {
 
   const realtimeEngineRef = useRef<EngineType | null>(null);
   const generationEngineRef = useRef<GenerationEngine | null>(null);
+  const [firstTimeDialogOpen, setFirstTimeDialogOpen] = useState(true);
 
   const appModeValue = appMode.value;
   let childView;
@@ -60,25 +68,72 @@ export const Main = withProtectionRoute(() => {
   }
 
   return (
-    <div className="fixed h-full w-full">
-      <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
-        {childView}
-      </div>
-      <div className="absolute top-0 w-full p-3.5">
-        <div className="relative flex w-full">
-          <div className="absolute left-0">
-            <ToolbarTopLeft />
-          </div>
-          <div className="flex w-full justify-center">
-            <ToolbarTopCenter />
-          </div>
-          <div className="absolute right-0">
-            <ToolbarTopRight />
+    <>
+      <div className="fixed h-full w-full">
+        <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+          {childView}
+        </div>
+        <div className="absolute top-0 w-full p-3.5">
+          <div className="relative flex w-full">
+            <div className="absolute left-0">
+              <ToolbarTopLeft />
+            </div>
+            <div className="flex w-full justify-center">
+              <ToolbarTopCenter />
+            </div>
+            <div className="absolute right-0">
+              <ToolbarTopRight />
+            </div>
           </div>
         </div>
+        {appModeValue === "gallery" && (
+          <GalleryRootComponent className="z-1 fixed h-full w-full bg-black" />
+        )}
       </div>
-      {appModeValue === "gallery" &&
-      (<GalleryRootComponent className="fixed h-full w-full z-1 bg-black" />)}
-    </div>
+      <BaseDialog
+        isOpen={firstTimeDialogOpen}
+        onClose={() => {
+          setFirstTimeDialogOpen(false);
+        }}
+        className="max-w-5xl"
+      >
+        <div className="flex flex-col items-center justify-center gap-6">
+          <div className="flex flex-col items-center gap-3">
+            <h1 className="text-3xl font-bold">
+              <FontAwesomeIcon
+                icon={faMagicWandSparkles}
+                className="mr-3 text-[24px]"
+              />
+              Welcome to ArtCraft
+            </h1>
+            <div className="text-center">
+              <p className="text-lg font-medium text-white/80">
+                Your creative canvas for digital art and design
+              </p>
+              <p className="text-white/60">
+                Draw freely, create collages, and design with our intuitive
+                tool. Bring your ideas to life in seconds!
+              </p>
+            </div>
+          </div>
+
+          <div className="aspect-video w-full overflow-hidden rounded-md">
+            <video autoPlay muted loop controls={false}>
+              <source src="/videos/demo_video.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <Button
+            className="px-4 py-3 font-semibold"
+            icon={faArrowRight}
+            iconFlip={true}
+            onClick={() => {
+              setFirstTimeDialogOpen(false);
+            }}
+          >
+            Start creating now
+          </Button>
+        </div>
+      </BaseDialog>
+    </>
   );
 });