From 340dde4e0586bc8cbeb4ff94866ee21ec92c8d11 Mon Sep 17 00:00:00 2001
From: Raditya Harya <radityaharya02@gmail.com>
Date: Wed, 8 May 2024 16:37:27 +0000
Subject: [PATCH] Landing & footer

---
 src/app/api/workflow/[id]/delete/route.ts     |   3 -
 src/app/layout.tsx                            |   2 +
 src/app/page.tsx                              |   4 +-
 src/app/utils/reactFlowToWorkflow.ts          |   2 +
 src/app/utils/runWorkflow.ts                  |   2 +-
 src/app/workflow/Builder.tsx                  |   9 +-
 src/app/workflow/Flow.tsx                     |  14 +-
 src/app/workflows/WorkflowGrid.tsx            |  19 +-
 src/app/workflows/page.tsx                    |   2 +-
 src/components/LandingPage/BuilderDemo.tsx    | 427 ++++++++++++++++++
 src/components/LandingPage/page-header.tsx    |  25 +-
 src/components/main-footer.tsx                | 155 +++++++
 src/components/main-nav.tsx                   |  17 +-
 src/components/nodes/Library/Playlist.tsx     |   2 +-
 .../nodes/Library/SaveAsReplace.tsx           |   2 +-
 src/hooks/useBasicNodeState.ts                |   1 -
 src/server/db/schema.ts                       |   6 +-
 17 files changed, 632 insertions(+), 60 deletions(-)
 create mode 100644 src/components/LandingPage/BuilderDemo.tsx
 create mode 100644 src/components/main-footer.tsx

diff --git a/src/app/api/workflow/[id]/delete/route.ts b/src/app/api/workflow/[id]/delete/route.ts
index 56711af..04accc1 100644
--- a/src/app/api/workflow/[id]/delete/route.ts
+++ b/src/app/api/workflow/[id]/delete/route.ts
@@ -1,12 +1,9 @@
 import { Logger } from "@/lib/log";
 import { authOptions } from "@/server/auth";
-import { db } from "@/server/db";
-import { eq } from "drizzle-orm";
 import { getServerSession } from "next-auth";
 import { type NextRequest, NextResponse } from "next/server";
 import { isUUID } from "validator";
 import { deleteWorkflowJob } from "~/lib/workflow/utils/workflowQueue";
-import { workflowJobs } from "~/server/db/schema";
 
 const log = new Logger("/api/workflow/[id]");
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 623b305..be9ed9d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "~/styles/globals.css";
 import { Toaster } from "@/components/ui/sonner";
 import { getServerSession } from "next-auth";
 import { Inter } from "next/font/google";
+import Footer from "~/components/main-footer";
 import { SiteNav } from "~/components/main-nav";
 import NextAuthProvider from "~/providers/NextAuthProvider";
 import SWRCacheProvider from "~/providers/SWRCacheProvider";
@@ -34,6 +35,7 @@ export default async function RootLayout({
             <SiteNav session={session} />
             {children}
             <Toaster expand={true} richColors />
+            <Footer />
           </SWRCacheProvider>
         </NextAuthProvider>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4ff81fa..6cd9738 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,10 +16,10 @@ export default async function IndexPage() {
   const session = await getServerSession(authOptions);
 
   return (
-    <div className="relative h-[100dvh]">
+    <div className="relative h-[70dvh] md:h-[100dvh]">
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>Insert Cheesy Tagline Here</PageHeaderHeading>
+        <PageHeaderHeading>Flows For Your Playlists!</PageHeaderHeading>
         <PageHeaderDescription>
           Something something... make playlist
         </PageHeaderDescription>
diff --git a/src/app/utils/reactFlowToWorkflow.ts b/src/app/utils/reactFlowToWorkflow.ts
index 08cc4d4..3a71643 100644
--- a/src/app/utils/reactFlowToWorkflow.ts
+++ b/src/app/utils/reactFlowToWorkflow.ts
@@ -59,6 +59,8 @@ export default async function reactFlowToWorkflow({
     connections: [],
   };
 
+  console.log({ nodes, edges });
+
   let [valid, errors] = [true, {}];
   if (nodes.length > 0 && edges.length > 0) {
     addNodesToWorkflow(nodes, workflowObject);
diff --git a/src/app/utils/runWorkflow.ts b/src/app/utils/runWorkflow.ts
index 32e6cd8..033a713 100644
--- a/src/app/utils/runWorkflow.ts
+++ b/src/app/utils/runWorkflow.ts
@@ -1,6 +1,6 @@
 import { toast } from "sonner";
-import useStore, { workflowRunStore } from "../states/store";
 import { mutate } from "swr";
+import useStore, { workflowRunStore } from "../states/store";
 
 export async function runWorkflow(workflow: Workflow.WorkflowResponse) {
   if (!workflow.id) {
diff --git a/src/app/workflow/Builder.tsx b/src/app/workflow/Builder.tsx
index 23f6b41..1cb12ab 100644
--- a/src/app/workflow/Builder.tsx
+++ b/src/app/workflow/Builder.tsx
@@ -22,7 +22,6 @@ import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { LoadingWithText } from "~/components/LoadingSpinner";
 import { useWorkflowData } from "~/hooks/useWorkflowData";
-import useSWR from "swr";
 
 function Builder({
   params,
@@ -40,7 +39,7 @@ function Builder({
   useEffect(() => {
     if (session) {
       setSessionStore(session);
-    } 
+    }
   }, [session]);
 
   const {
@@ -179,11 +178,7 @@ function Builder({
           </ResizablePanel>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={83}>
-            {workflowIsLoading || !session?.user ? (
-              <Loading />
-            ) : (
-              <Flow />
-            )}
+            {workflowIsLoading || !session?.user ? <Loading /> : <Flow />}
           </ResizablePanel>
           <ResizableHandle withHandle />
           <ResizablePanel defaultSize={0} minSize={0} ref={rightPanelRef}>
diff --git a/src/app/workflow/Flow.tsx b/src/app/workflow/Flow.tsx
index 9c3fe63..3731b0c 100644
--- a/src/app/workflow/Flow.tsx
+++ b/src/app/workflow/Flow.tsx
@@ -9,7 +9,7 @@ import {
   ReactFlow,
   getOutgoers,
 } from "@xyflow/react";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useRef } from "react";
 import useSWR from "swr";
 
 import useStore from "~/app/states/store";
@@ -189,6 +189,10 @@ export const Nodes = {
   },
 };
 
+export const nodeTypes = Object.fromEntries(
+  Object.entries(Nodes).map(([key, value]) => [key, value.node]),
+);
+
 export function App() {
   const reactFlowWrapper = useRef(null);
   const {
@@ -226,14 +230,6 @@ export function App() {
   const router = useRouter();
   const path = usePathname();
 
-  const nodeTypes = useMemo(
-    () =>
-      Object.fromEntries(
-        Object.entries(Nodes).map(([key, value]) => [key, value.node]),
-      ),
-    [],
-  );
-
   const onDragDrop = useCallback(
     (event) => {
       event.preventDefault();
diff --git a/src/app/workflows/WorkflowGrid.tsx b/src/app/workflows/WorkflowGrid.tsx
index 0043151..64505c6 100644
--- a/src/app/workflows/WorkflowGrid.tsx
+++ b/src/app/workflows/WorkflowGrid.tsx
@@ -5,6 +5,13 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -24,6 +31,7 @@ import {
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import useSWR, { mutate } from "swr";
 import { Badge } from "~/components/ui/badge";
 import { Button, buttonVariants } from "~/components/ui/button";
@@ -37,15 +45,6 @@ import {
 } from "~/components/ui/card";
 import { Skeleton } from "~/components/ui/skeleton";
 import { runWorkflow } from "../utils/runWorkflow";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { toast } from "sonner";
 
 function getTargets(
   operations: Workflow.WorkflowResponse["workflow"]["operations"],
@@ -315,7 +314,7 @@ const WorkflowCard = ({ d }) => {
   const id = d.id;
 
   const handleRunClick = (event: React.MouseEvent) => {
-    runWorkflow(d.workflow)
+    runWorkflow(d.workflow);
   };
 
   return (
diff --git a/src/app/workflows/page.tsx b/src/app/workflows/page.tsx
index 8a3af26..c2cb95d 100644
--- a/src/app/workflows/page.tsx
+++ b/src/app/workflows/page.tsx
@@ -1,6 +1,6 @@
+import { redirect } from "next/navigation";
 import { getServerAuthSession } from "~/server/auth";
 import { WorkflowsGrid } from "./WorkflowGrid";
-import { redirect } from "next/navigation";
 export default async function Dashboard() {
   const workflows = undefined;
 
diff --git a/src/components/LandingPage/BuilderDemo.tsx b/src/components/LandingPage/BuilderDemo.tsx
new file mode 100644
index 0000000..685feab
--- /dev/null
+++ b/src/components/LandingPage/BuilderDemo.tsx
@@ -0,0 +1,427 @@
+"use client";
+import { nodeTypes } from "@/app/workflow/Flow";
+import {
+  Edge,
+  Node,
+  ReactFlow,
+  ReactFlowProvider,
+  ReactFlowState,
+  getNodesBounds,
+  useReactFlow,
+  useStore,
+  useStoreApi,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useCallback, useEffect, useState } from "react";
+
+const proOptions = {
+  hideAttribution: true,
+};
+
+const initialState = {
+  color: "#777",
+  zoom: 0.7,
+  shape: "cube",
+};
+
+// {
+//   "nodes": [
+//       {
+//           "id": "ab849a87-5615-47db-8494-08c1a2691452",
+//           "type": "Library.saveAsReplace",
+//           "position": {
+//               "x": 901,
+//               "y": 325
+//           },
+//           "data": {
+//               "id": "48oIVyOtTlttINc7rYq0PZ",
+//               "playlistId": "48oIVyOtTlttINc7rYq0PZ",
+//               "name": "Daily Mixes",
+//               "description": "",
+//               "image": "https://mosaic.scdn.co/640/ab67616d00001e02871062e86dc8a76683b66019ab67616d00001e029c93931e7cfa4d8216056795ab67616d00001e02b91b4ade012ef3a2448e3a96ab67616d00001e02ee0ec368f9b61f602365d864",
+//               "total": 1057,
+//               "owner": "null"
+//           },
+//           "measured": {
+//               "width": 350,
+//               "height": 306
+//           },
+//           "selected": true
+//       },
+//       {
+//           "id": "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "type": "Combiner.alternate",
+//           "position": {
+//               "x": 451,
+//               "y": 325
+//           },
+//           "data": {
+//               "playlistIds": [
+//                   "37i9dQZF1E38EJlcnVuskA",
+//                   "37i9dQZF1E35j9i7QVX8Xe"
+//               ],
+//               "playlists": [
+//                   {
+//                       "playlistId": "37i9dQZF1E38EJlcnVuskA",
+//                       "name": "Daily Mix 2",
+//                       "description": "Men I Trust, Jakob, Vansire and more",
+//                       "image": "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebfd30ebd7e80dad6b2383aab0/2/en/large",
+//                       "owner": "Spotify",
+//                       "total": 50
+//                   },
+//                   {
+//                       "playlistId": "37i9dQZF1E35j9i7QVX8Xe",
+//                       "name": "Daily Mix 1",
+//                       "description": "Dreane, .Feast, Efek Rumah Kaca and more",
+//                       "image": "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcb772c04cf4b9be21d6d7493/1/en/large",
+//                       "owner": "Spotify",
+//                       "total": 50
+//                   }
+//               ]
+//           },
+//           "measured": {
+//               "width": 350,
+//               "height": 394
+//           },
+//           "selected": false,
+//           "dragging": false
+//       },
+//       {
+//           "id": "a722dab7-ab8e-44f2-b390-458f2bc5f49c",
+//           "type": "Library.playlistTracks",
+//           "position": {
+//               "x": 17,
+//               "y": 443
+//           },
+//           "data": {
+//               "playlistIds": [],
+//               "playlists": [],
+//               "playlistId": "37i9dQZF1E38EJlcnVuskA",
+//               "name": "Daily Mix 2",
+//               "description": "Men I Trust, Jakob, Vansire and more",
+//               "image": "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebfd30ebd7e80dad6b2383aab0/2/en/large",
+//               "total": 50,
+//               "owner": "Spotify"
+//           },
+//           "measured": {
+//               "width": 350,
+//               "height": 399
+//           },
+//           "selected": false,
+//           "dragging": false
+//       },
+//       {
+//           "id": "ae804166-7b0f-4c97-b96b-44df91a56298",
+//           "type": "Library.playlistTracks",
+//           "position": {
+//               "x": 18,
+//               "y": 46
+//           },
+//           "data": {
+//               "playlistIds": [],
+//               "playlists": [],
+//               "playlistId": "37i9dQZF1E35j9i7QVX8Xe",
+//               "name": "Daily Mix 1",
+//               "description": "Dreane, .Feast, Efek Rumah Kaca and more",
+//               "image": "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcb772c04cf4b9be21d6d7493/1/en/large",
+//               "total": 50,
+//               "owner": "Spotify"
+//           },
+//           "measured": {
+//               "width": 350,
+//               "height": 399
+//           },
+//           "selected": false,
+//           "dragging": false
+//       }
+//   ],
+//   "edges": [
+//       {
+//           "id": "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41->ab849a87-5615-47db-8494-08c1a2691452",
+//           "source": "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "target": "ab849a87-5615-47db-8494-08c1a2691452"
+//       },
+//       {
+//           "id": "a722dab7-ab8e-44f2-b390-458f2bc5f49c->7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "animated": true,
+//           "source": "a722dab7-ab8e-44f2-b390-458f2bc5f49c",
+//           "sourceHandle": null,
+//           "target": "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "targetHandle": null
+//       },
+//       {
+//           "id": "ae804166-7b0f-4c97-b96b-44df91a56298->7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "animated": true,
+//           "source": "ae804166-7b0f-4c97-b96b-44df91a56298",
+//           "sourceHandle": null,
+//           "target": "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+//           "targetHandle": null
+//       }
+//   ]
+// }
+
+const defaultNodes: Node[] = [
+  // {
+  //   id: "hero",
+  //   type: "hero",
+  //   position: { x: 390, y: 50 },
+  //   data: { ...initialState, label: "output" },
+  //   className: "w-[200px] lg:w-[300px]",
+  //   style: { opacity: 0 },
+  // },
+  // {
+  //   id: "color",
+  //   type: "colorpicker",
+  //   position: { x: 50, y: 0 },
+  //   data: { ...initialState, label: "shape color" },
+  //   className: "w-[150px]",
+  //   style: { opacity: 0 },
+  // },
+  // {
+  //   id: "shape",
+  //   type: "switcher",
+  //   position: { x: 0, y: 125 },
+  //   data: {
+  //     ...initialState,
+  //     label: "shape type",
+  //   },
+  //   className: "w-[150px]",
+  //   style: { opacity: 0 },
+  // },
+  // {
+  //   id: "zoom",
+  //   type: "slider",z
+  //   position: { x: 40, y: 280 },
+  //   data: {
+  //     ...initialState,
+  //     label: "zoom level",
+  //   },
+  //   className: "w-[150px]",
+  //   style: { opacity: 0 },
+  // },
+  {
+    id: "ab849a87-5615-47db-8494-08c1a2691452",
+    type: "Library.saveAsReplace",
+    position: {
+      x: 901,
+      y: 325,
+    },
+    data: {
+      id: "48oIVyOtTlttINc7rYq0PZ",
+      playlistId: "48oIVyOtTlttINc7rYq0PZ",
+      name: "Daily Mixes",
+      description: "",
+      image:
+        "https://mosaic.scdn.co/640/ab67616d00001e02871062e86dc8a76683b66019ab67616d00001e029c93931e7cfa4d8216056795ab67616d00001e02b91b4ade012ef3a2448e3a96ab67616d00001e02ee0ec368f9b61f602365d864",
+      total: 1057,
+      owner: "null",
+    },
+    measured: {
+      width: 350,
+      height: 306,
+    },
+    selected: true,
+  },
+  {
+    id: "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    type: "Combiner.alternate",
+    position: {
+      x: 451,
+      y: 325,
+    },
+    data: {
+      playlistIds: ["37i9dQZF1E38EJlcnVuskA", "37i9dQZF1E35j9i7QVX8Xe"],
+      playlists: [
+        {
+          playlistId: "37i9dQZF1E38EJlcnVuskA",
+          name: "Daily Mix 2",
+          description: "Men I Trust, Jakob, Vansire and more",
+          image:
+            "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebfd30ebd7e80dad6b2383aab0/2/en/large",
+          owner: "Spotify",
+          total: 50,
+        },
+        {
+          playlistId: "37i9dQZF1E35j9i7QVX8Xe",
+          name: "Daily Mix 1",
+          description: "Dreane, .Feast, Efek Rumah Kaca and more",
+          image:
+            "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcb772c04cf4b9be21d6d7493/1/en/large",
+          owner: "Spotify",
+          total: 50,
+        },
+      ],
+    },
+    measured: {
+      width: 350,
+      height: 394,
+    },
+    selected: false,
+    dragging: false,
+  },
+  {
+    id: "a722dab7-ab8e-44f2-b390-458f2bc5f49c",
+    type: "Library.playlistTracks",
+    position: {
+      x: 17,
+      y: 443,
+    },
+    data: {
+      playlistIds: [],
+      playlists: [],
+      playlistId: "37i9dQZF1E38EJlcnVuskA",
+      name: "Daily Mix 2",
+      description: "Men I Trust, Jakob, Vansire and more",
+      image:
+        "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebfd30ebd7e80dad6b2383aab0/2/en/large",
+      total: 50,
+      owner: "Spotify",
+    },
+    measured: {
+      width: 350,
+      height: 399,
+    },
+    selected: false,
+    dragging: false,
+  },
+  {
+    id: "ae804166-7b0f-4c97-b96b-44df91a56298",
+    type: "Library.playlistTracks",
+    position: {
+      x: 18,
+      y: 46,
+    },
+    data: {
+      playlistIds: [],
+      playlists: [],
+      playlistId: "37i9dQZF1E35j9i7QVX8Xe",
+      name: "Daily Mix 1",
+      description: "Dreane, .Feast, Efek Rumah Kaca and more",
+      image:
+        "https://dailymix-images.scdn.co/v2/img/ab6761610000e5ebcb772c04cf4b9be21d6d7493/1/en/large",
+      total: 50,
+      owner: "Spotify",
+    },
+    measured: {
+      width: 350,
+      height: 399,
+    },
+    selected: false,
+    dragging: false,
+  },
+];
+
+const defaultEdges: Edge[] = [
+  {
+    id: "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41->ab849a87-5615-47db-8494-08c1a2691452",
+    source: "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    target: "ab849a87-5615-47db-8494-08c1a2691452",
+    animated: true,
+  },
+  {
+    id: "a722dab7-ab8e-44f2-b390-458f2bc5f49c->7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    animated: true,
+    source: "a722dab7-ab8e-44f2-b390-458f2bc5f49c",
+    sourceHandle: null,
+    target: "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    targetHandle: null,
+  },
+  {
+    id: "ae804166-7b0f-4c97-b96b-44df91a56298->7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    animated: true,
+    source: "ae804166-7b0f-4c97-b96b-44df91a56298",
+    sourceHandle: null,
+    target: "7d2d1dcd-cfe1-4acd-b0a4-c8dcec7cfe41",
+    targetHandle: null,
+  },
+];
+
+type FlowProps = {
+  initialColor?: string;
+  className?: string;
+};
+
+const viewportWidthSelector = (state: ReactFlowState) => state.width;
+
+function Flow({ initialColor = "#777", className }: FlowProps) {
+  const { getNodes, setNodes, setEdges, setViewport } = useReactFlow();
+  const viewportWidth = useStore(viewportWidthSelector);
+  const store = useStoreApi();
+  const [flowState, setFlowState] = useState({
+    ...initialState,
+    color: initialColor,
+  });
+
+  const adjustViewport = useCallback(() => {
+    const nodes = getNodes();
+    const { width, height } = store.getState();
+    const {
+      x: xMin,
+      y: yMin,
+      width: xMax,
+      height: yMax,
+    } = getNodesBounds(nodes);
+
+    const zoom = width < 1240 ? (width < 500 ? 0.4 : 0.4) : 0.7;
+    const mobileView = width < 1024;
+    const flowWidth = (xMax - xMin) * zoom;
+    const flowHeight = (yMax - yMin) * zoom;
+    const navWidth = Math.min(width - 70, 1200);
+    const viewportX = mobileView
+      ? width / 2 - flowWidth / 2
+      : width - flowWidth - (width - navWidth) / 2;
+    const viewportY = mobileView
+      ? height - flowHeight - 20
+      : height / 2 - flowHeight / 2;
+
+    setViewport({ x: viewportX, y: viewportY, zoom });
+  }, [setViewport, getNodes, store]);
+
+  const onInit = useCallback(() => {
+    adjustViewport();
+    setNodes((nds) =>
+      nds.map((n) => ({ ...n, style: { ...n.style, opacity: 1 } })),
+    );
+    setEdges((eds) =>
+      eds.map((e) => ({ ...e, style: { ...e.style, opacity: 1 } })),
+    );
+  }, [setViewport, getNodes, store]);
+
+  useEffect(() => {
+    setNodes((nds) =>
+      nds.map((n) => ({
+        ...n,
+        data: { ...n.data, ...flowState, setState: setFlowState },
+      })),
+    );
+  }, [flowState]);
+
+  useEffect(() => {
+    adjustViewport();
+  }, [viewportWidth]);
+
+  return (
+    <div className="absolute top-0 right-0 left-0 z-[3] w-full h-full bg-gradient bg-no-repeat bg-[center_120px] lg:bg-[65%_center] lg:bg-[length:35%]">
+      <ReactFlow
+        preventScrolling={false}
+        zoomOnScroll={false}
+        nodeTypes={nodeTypes}
+        defaultNodes={defaultNodes}
+        defaultEdges={defaultEdges}
+        // proOptions={proOptions}
+        panOnDrag={viewportWidth > 1024}
+        className={className}
+        onInit={onInit}
+        id="hero"
+      ></ReactFlow>
+    </div>
+  );
+}
+
+export default function Wrapper(props: FlowProps) {
+  return (
+    <ReactFlowProvider>
+      <Flow {...props} />
+    </ReactFlowProvider>
+  );
+}
diff --git a/src/components/LandingPage/page-header.tsx b/src/components/LandingPage/page-header.tsx
index 485a627..b138998 100644
--- a/src/components/LandingPage/page-header.tsx
+++ b/src/components/LandingPage/page-header.tsx
@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import Balance from "react-wrap-balancer";
 import GradientBackground from "../animatedBackground/GradientsBackground";
+import BuilderDemo from "./BuilderDemo";
 
 function PageHeader({
   className,
@@ -8,10 +9,10 @@ function PageHeader({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <section className="mx-auto flex flex-col items-center gap-2 py-12 lg:py-24 lg:pb-20 md:pb-8">
+    <section className="mx-auto h-full sm:justify-center flex flex-col items-center gap-2 py-12 lg:py-24">
       <div
         className={cn(
-          "z-[2] mx-auto flex max-w-[980px] flex-col items-center gap-4 py-12 lg:py-24 lg:pb-20 md:pb-8",
+          "z-[10] mx-auto flex max-w-[980px] flex-col items-center md:items-start gap-4 py-12 lg:py-24 lg:pb-20 md:py-8 md:w-1/3 md:ml-10",
           className,
         )}
         {...props}
@@ -19,23 +20,25 @@ function PageHeader({
         {children}
       </div>
       <div className="absolute top-0 left-0 z-[1] h-full w-full bg-background opacity-40 blur-sm" />
+      <BuilderDemo />
       <GradientBackground />
     </section>
   );
 }
-
 function PageHeaderHeading({
   className,
   ...props
 }: React.HTMLAttributes<HTMLHeadingElement>) {
   return (
-    <h1
-      className={cn(
-        "text-center font-bold text-3xl leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]",
-        className,
-      )}
-      {...props}
-    />
+    <Balance>
+      <h1
+        className={cn(
+          "text-center md:text-start font-bold text-3xl leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]",
+          className,
+        )}
+        {...props}
+      />
+    </Balance>
   );
 }
 
@@ -61,7 +64,7 @@ function PageActions({
   return (
     <div
       className={cn(
-        "flex w-full items-center justify-center space-x-4 py-4 md:pb-10",
+        "flex w-full items-center md:items-start justify-center md:justify-start space-x-4 py-4 md:pb-10",
         className,
       )}
       {...props}
diff --git a/src/components/main-footer.tsx b/src/components/main-footer.tsx
new file mode 100644
index 0000000..eba8edd
--- /dev/null
+++ b/src/components/main-footer.tsx
@@ -0,0 +1,155 @@
+"use client";
+import Link, { LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@/lib/utils";
+
+import useStore from "@/app/states/store";
+import { Github } from "lucide-react";
+import { Session } from "next-auth";
+
+interface NavLinkProps extends LinkProps {
+  href: string;
+  activePath?: string | RegExp;
+  children: React.ReactNode;
+
+  className?: string;
+}
+
+const NavLink: React.FC<NavLinkProps> = ({
+  href,
+  activePath,
+  children,
+  className,
+  ...props
+}) => {
+  const path = usePathname();
+  const isActive =
+    activePath instanceof RegExp
+      ? activePath.test(path)
+      : path.startsWith(activePath || "");
+
+  return (
+    <Link
+      href={href}
+      {...props}
+      className={cn(
+        "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+        isActive ? "text-foreground" : "text-foreground/60",
+        className,
+      )}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export function MainNav() {
+  const { resetReactFlow } = useStore((state) => ({
+    resetReactFlow: state.resetReactFlow,
+  }));
+
+  return (
+    <div className="mr-4 flex">
+      <Link href="/" className="mr-6 flex items-center space-x-2">
+        <div className="flex items-center py-1 font-medium text-lg">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="mr-2 h-6 w-6"
+          >
+            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+          </svg>
+          Flowify
+        </div>
+      </Link>
+      <nav className="hidden sm:flex items-center gap-2 text-sm">
+        <NavLink
+          href="/workflow"
+          onClick={() => resetReactFlow()}
+          activePath={/\/workflow(?!s)/}
+        >
+          Builder
+        </NavLink>
+        <NavLink href="/workflows" activePath="/workflows">
+          Workflows
+        </NavLink>
+        <NavLink href="/examples" activePath="/examples">
+          Examples
+        </NavLink>
+        <NavLink
+          href="https://github.com/radityaharya/flowify"
+          className={cn(
+            "hidden text-foreground/60 transition-colors lg:block hover:text-foreground/80",
+          )}
+        >
+          GitHub
+        </NavLink>
+      </nav>
+    </div>
+  );
+}
+interface SiteNavProps {
+  className?: string;
+  session: Session | null;
+}
+
+export default function Footer() {
+  const pathname = usePathname();
+
+  return (
+    <footer className="w-full">
+      <div
+        className={cn(
+          "z-[20] flex w-full flex-col border-t bg-accent/10 items-start justify-between px-4 md:px-10 py-6 backdrop-blur-md",
+          /\/workflow(?!s)/.test(pathname) ? "hidden" : "",
+        )}
+      >
+        <div className="flex flex-col gap-6 w-full mb-4">
+          <Link href="/">
+            <div className="flex items-center py-1 font-medium text-lg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="mr-2 h-6 w-6"
+              >
+                <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+              </svg>
+              Flowify
+            </div>
+          </Link>
+        </div>
+        <div className="border-t md:flex justify-between items-center text-sm w-full">
+          <div className="flex flex-col md:flex-row my-6 gap-4 underline underline-offset-4 text-muted-foreground">
+            <Link href="/privacy-policy">Privacy Policy</Link>
+            <Link href="/terms-of-service">Terms of Service</Link>
+          </div>
+          <p className="text-muted-foreground">
+            <Link
+              href="https://github.com/radityaharya/flowify"
+              target="_blank"
+              className="flex flex-row gap-2 items"
+            >
+              <Github className="size-4" />
+              radityaharya/flowify
+            </Link>
+          </p>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Spotify is a registered trademark of Spotify AB. This project is not
+          affiliated with or endorsed by Spotify AB
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/main-nav.tsx b/src/components/main-nav.tsx
index 2b0490f..c159b30 100644
--- a/src/components/main-nav.tsx
+++ b/src/components/main-nav.tsx
@@ -1,12 +1,6 @@
 "use client";
 
 import { SystemInfo } from "@/components/SystemInfo";
-import Link, { LinkProps } from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { Button, buttonVariants } from "~/components/ui/button";
-
-import { cn } from "@/lib/utils";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,14 +9,19 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import Link, { LinkProps } from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Button, buttonVariants } from "~/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 import useStore from "@/app/states/store";
+import { SquareArrowOutUpRight } from "lucide-react";
 import { Session } from "next-auth";
+import { signOut } from "next-auth/react";
 import { useMemo } from "react";
 import useSWR from "swr";
 import { fetcher } from "~/app/utils/fetcher";
-import { signOut } from "next-auth/react";
-import { SquareArrowOutUpRight } from "lucide-react";
 
 interface NavLinkProps extends LinkProps {
   href: string;
@@ -185,7 +184,7 @@ export function SiteNav({ className, session }: SiteNavProps) {
                     className="flex flex-row gap-2 items-center"
                   >
                     <span>Spotify Account</span>
-                    <SquareArrowOutUpRight className="size-3"/>
+                    <SquareArrowOutUpRight className="size-3" />
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
diff --git a/src/components/nodes/Library/Playlist.tsx b/src/components/nodes/Library/Playlist.tsx
index 13f176a..ee3f90d 100644
--- a/src/components/nodes/Library/Playlist.tsx
+++ b/src/components/nodes/Library/Playlist.tsx
@@ -183,7 +183,7 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
 
     // debounce({delay: 500}, setUserPlaylists)();
     setUserPlaylists();
-  }, [search, session.user.providerAccountId, setUserPlaylistsStore]);
+  }, [search, session?.user?.providerAccountId, setUserPlaylistsStore]);
 
   const handleSelect = (playlist) => {
     console.info("handle select", playlist);
diff --git a/src/components/nodes/Library/SaveAsReplace.tsx b/src/components/nodes/Library/SaveAsReplace.tsx
index 8ffaf68..8aa12ab 100644
--- a/src/components/nodes/Library/SaveAsReplace.tsx
+++ b/src/components/nodes/Library/SaveAsReplace.tsx
@@ -151,7 +151,7 @@ function SaveAsReplaceComponent({ id, data }: PlaylistProps) {
       .catch((err) => {
         console.error(err);
       });
-  }, [session.user.providerAccountId]);
+  }, [session?.user?.providerAccountId]);
 
   function getNodeData(id: string) {
     const node = nodes.find((node) => node.id === id);
diff --git a/src/hooks/useBasicNodeState.ts b/src/hooks/useBasicNodeState.ts
index 10be467..3b6ff36 100644
--- a/src/hooks/useBasicNodeState.ts
+++ b/src/hooks/useBasicNodeState.ts
@@ -3,7 +3,6 @@ import { useHandleConnections } from "@xyflow/react";
 import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { type ZodObject } from "zod";
-import { useShallow } from "zustand/react/shallow";
 import useStore from "~/app/states/store";
 
 const usePlaylistLogic = (id: string, formSchema?: ZodObject<any>) => {
diff --git a/src/server/db/schema.ts b/src/server/db/schema.ts
index f7a48f0..325095f 100644
--- a/src/server/db/schema.ts
+++ b/src/server/db/schema.ts
@@ -28,7 +28,7 @@ export const users = pgTable("user", {
   email: text("email").notNull().unique(),
   emailVerified: timestamp("emailVerified", { mode: "date" }),
   image: text("image"),
-  planId: text("planId")
+  planId: text("planId"),
 });
 
 export const usersRelations = relations(users, ({ many, one }) => ({
@@ -44,9 +44,7 @@ export const plans = pgTable("plan", {
   name: text("name"),
   maxExecutionTime: integer("maxExecutionTime"),
   maxOperations: integer("maxOperations"),
-  default: boolean("default")
-  .default(false)
-  .unique(),
+  default: boolean("default").default(false).unique(),
 });
 
 export const accounts = pgTable(