From c0e17478002c163f93ba206e4c9e026737a82c9c Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 12:00:41 +0000 Subject: [PATCH 1/2] Update src/app/page.tsx --- src/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 6d22a91..3ca1482 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -32,7 +32,7 @@ export default function LandingPage() { navItems={[ { name: "Features", id: "features" }, { name: "How It Works", id: "workflow" }, - { name: "Pricing", id: "pricing" }, + { name: "Projects", id: "/projects" }, { name: "Resources", id: "resources" }, { name: "Contact", id: "contact" }, ]} -- 2.49.1 From 3afdc6609fe09547c3c7fe8d4d532fa803056eb9 Mon Sep 17 00:00:00 2001 From: bender Date: Tue, 3 Mar 2026 12:00:41 +0000 Subject: [PATCH 2/2] Add src/app/projects/page.tsx --- src/app/projects/page.tsx | 334 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 334 insertions(+) create mode 100644 src/app/projects/page.tsx diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx new file mode 100644 index 0000000..e5ec4c1 --- /dev/null +++ b/src/app/projects/page.tsx @@ -0,0 +1,334 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; +import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Send } from 'lucide-react'; +import { useState } from 'react'; + +interface Node { + id: string; + type: string; + label: string; + x: number; + y: number; +} + +interface Connection { + id: string; + source: string; + target: string; +} + +interface Project { + id: string; + name: string; + description: string; + nodes: Node[]; + connections: Connection[]; + createdAt: string; +} + +export default function ProjectsPage() { + const [projects, setProjects] = useState([ + { + id: "proj-1", name: "Email Marketing Automation", description: "Automated email sequences triggered by user behavior", nodes: [ + { id: "node-1", type: "trigger", label: "User Signup", x: 100, y: 100 }, + { id: "node-2", type: "action", label: "Send Welcome Email", x: 300, y: 100 }, + { id: "node-3", type: "action", label: "Add to List", x: 500, y: 100 }, + ], + connections: [ + { id: "conn-1", source: "node-1", target: "node-2" }, + { id: "conn-2", source: "node-2", target: "node-3" }, + ], + createdAt: "2025-01-15"}, + { + id: "proj-2", name: "Data Pipeline Processing", description: "Transform and validate data from multiple sources", nodes: [ + { id: "node-1", type: "trigger", label: "Data Received", x: 100, y: 150 }, + { id: "node-2", type: "transform", label: "Parse JSON", x: 300, y: 150 }, + { id: "node-3", type: "validate", label: "Validate", x: 500, y: 150 }, + { id: "node-4", type: "action", label: "Save to DB", x: 700, y: 150 }, + ], + connections: [ + { id: "conn-1", source: "node-1", target: "node-2" }, + { id: "conn-2", source: "node-2", target: "node-3" }, + { id: "conn-3", source: "node-3", target: "node-4" }, + ], + createdAt: "2025-01-14"}, + { + id: "proj-3", name: "Customer Onboarding", description: "Complete onboarding workflow with document generation", nodes: [ + { id: "node-1", type: "trigger", label: "New Customer", x: 100, y: 200 }, + { id: "node-2", type: "action", label: "Generate Documents", x: 300, y: 200 }, + { id: "node-3", type: "action", label: "Send Package", x: 500, y: 200 }, + { id: "node-4", type: "notify", label: "Notify Team", x: 700, y: 200 }, + ], + connections: [ + { id: "conn-1", source: "node-1", target: "node-2" }, + { id: "conn-2", source: "node-2", target: "node-3" }, + { id: "conn-3", source: "node-3", target: "node-4" }, + ], + createdAt: "2025-01-13"}, + ]); + + const [selectedProject, setSelectedProject] = useState(projects[0]); + const [canvasZoom, setCanvasZoom] = useState(1); + const [panX, setPanX] = useState(0); + const [panY, setPanY] = useState(0); + + const handleZoom = (direction: 'in' | 'out') => { + setCanvasZoom((prev) => direction === 'in' ? Math.min(prev + 0.2, 3) : Math.max(prev - 0.2, 0.5)); + }; + + const handlePan = (dx: number, dy: number) => { + setPanX((prev) => prev + dx); + setPanY((prev) => prev + dy); + }; + + const nodeTypeColors: { [key: string]: string } = { + trigger: 'bg-blue-500', + action: 'bg-green-500', + transform: 'bg-purple-500', + validate: 'bg-orange-500', + notify: 'bg-red-500', + }; + + return ( + + + +
+ +
+ +
+
+
+ {/* Projects List Sidebar */} +
+

Projects

+
+ {projects.map((project) => ( + + ))} +
+
+ + {/* Canvas Area */} +
+ {selectedProject ? ( + <> + {/* Canvas Header */} +
+
+
+

{selectedProject.name}

+

{selectedProject.description}

+
+
+ + {Math.round(canvasZoom * 100)}% + + +
+
+
+ + {/* Canvas SVG */} + { + if (e.buttons === 4) { + handlePan(e.movementX, e.movementY); + } + }} + > + {/* Grid Background */} + + + + + + + + {/* Connections (Lines) */} + + {selectedProject.connections.map((conn) => { + const sourceNode = selectedProject.nodes.find((n) => n.id === conn.source); + const targetNode = selectedProject.nodes.find((n) => n.id === conn.target); + if (!sourceNode || !targetNode) return null; + + return ( + + ); + })} + + {/* Nodes */} + {selectedProject.nodes.map((node) => ( + + + + {node.label} + + + ))} + + + + {/* Canvas Footer */} +
+
+
Nodes: {selectedProject.nodes.length} | Connections: {selectedProject.connections.length}
+
+
+
+ Trigger +
+
+
+ Action +
+
+
+ Transform +
+
+
+
+ + ) : ( +
+ Select a project to view +
+ )} +
+
+
+
+ + + + ); +} -- 2.49.1