Merge version_3 into main

Add src/app/projects/page.tsx
2026-03-03 12:00:45 +00:00 · 2026-03-03 12:00:41 +00:00 · 2026-03-03 12:00:41 +00:00 · 2026-03-03 11:51:15 +00:00 · 2026-03-03 11:51:09 +00:00 · 2026-03-03 11:46:58 +00:00
3 changed files with 420 additions and 67 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -38,9 +38,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body
-          className={`${mulish.variable} ${inter.variable} antialiased`}
-        >
+        <body className={`${mulish.variable} ${inter.variable} antialiased`}>
          <Tag />
          {children}
        
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Activity, CheckCircle, Clock, Heart, Lightbulb, Move3d, PlugZap, Send, Shield, Star, TrendingUp, Workflow, Zap } from 'lucide-react';
+import { Activity, CheckCircle, Clock, Heart, Lightbulb, Move3d, PlugZap, Send, Shield, Star, TrendingUp, Workflow, Zap, Grid3x3, Layers } from 'lucide-react';

 export default function LandingPage() {
  return (
@@ -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" },
          ]}
@@ -44,15 +44,15 @@ export default function LandingPage() {

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
-          logoText="Ranavo"
-          description="Build powerful automation workflows without coding. Manage, create, and organize your business processes with intuitive drag-and-drop simplicity."
+          logoText="Ranavo Canvas"
+          description="Design, build, and manage powerful automation workflows with an infinite canvas workspace. Drag, connect, and orchestrate your business logic in real-time."
          buttons={[
-            { text: "Start Free Trial", href: "#" },
-            { text: "Watch Demo", href: "#" },
+            { text: "Launch Workspace", href: "#" },
+            { text: "View Demo", href: "#" },
          ]}
          background={{ variant: "plain" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/a-sleek-dark-themed-automation-workflow--1772537128831-2160477b.png"
-          imageAlt="Ranavo automation dashboard interface"
+          imageAlt="Ranavo canvas workspace with infinite node grid"
          mediaAnimation="slide-up"
          frameStyle="browser"
          buttonAnimation="slide-up"
@@ -61,29 +61,35 @@ export default function LandingPage() {

      <div id="features" data-section="features">
        <FeatureHoverPattern
-          title="Everything You Need to Automate"
-          description="Powerful features designed for non-technical users to build, manage, and scale business automation effortlessly."
+          title="Canvas Workspace Capabilities"
+          description="Everything you need to build, organize, and execute complex automation workflows on an infinite canvas."
          tag="Core Features"
          tagIcon={Zap}
          features={[
+            {
+              icon: Grid3x3,
+              title: "Infinite Canvas",              description: "Unlimited workspace to design workflows of any scale. Pan, zoom, and organize nodes freely without boundaries."
+            },
+            {
+              icon: Grid3x3,
+              title: "Node Library",              description: "500+ pre-built nodes for triggers, actions, conditions, and data transformations. Fully categorized and searchable."
+            },
+            {
+              icon: Layers,
+              title: "Visual Flow Design",              description: "Drag nodes onto canvas, connect them with lines, and instantly see your workflow logic taking shape."
+            },
            {
              icon: Move3d,
-              title: "Drag & Drop Builder",              description: "Create complex workflows by dragging automation blocks. No coding required. Intuitive visual interface guides you through every step."},
+              title: "Real-Time Preview",              description: "Execute test runs directly from the canvas. See results, debug errors, and iterate instantly without leaving the workspace."
+            },
            {
              icon: Workflow,
-              title: "Pre-Built Templates",              description: "Start with ready-made templates for common workflows. Save time and learn best practices from proven automation patterns."},
-            {
-              icon: PlugZap,
-              title: "1000+ Integrations",              description: "Connect with all your favorite tools. Seamless integration with email, CRM, databases, and custom APIs for complete automation."},
-            {
-              icon: Activity,
-              title: "Real-Time Monitoring",              description: "Track every workflow execution in real-time. Detailed logs and alerts keep you informed about automation performance and issues."},
+              title: "Workflow Management",              description: "Save, version, publish, and manage multiple workflows. Organize by tags, folders, and custom categories."
+            },
            {
              icon: Shield,
-              title: "Enterprise Security",              description: "Bank-level encryption, SOC 2 compliant, and role-based access control. Your data is protected with enterprise-grade security."},
-            {
-              icon: Zap,
-              title: "Instant Execution",              description: "Workflows execute in milliseconds with minimal latency. Optimized infrastructure ensures your automations run when they're needed most."},
+              title: "Collaborative Editing",              description: "Real-time collaboration with team members. Comments, version history, and approval workflows built-in."
+            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
@@ -95,17 +101,20 @@ export default function LandingPage() {

      <div id="workflow" data-section="workflow">
        <ProductCardOne
-          title="Workflow Examples"
-          description="See how teams like yours are automating repetitive tasks and saving hours every week."
-          tag="Use Cases"
+          title="Node Library Categories"
+          description="Explore our comprehensive node library organized by function. Create any workflow imaginable."
+          tag="Node Categories"
          tagIcon={Lightbulb}
          products={[
            {
-              id: "workflow-1",              name: "Email Marketing Sequences",              price: "Save 10+ hours/week",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/visual-representation-of-a-completed-aut-1772537128320-df40458c.png",              imageAlt: "Email marketing automation workflow"},
+              id: "node-1",              name: "Triggers & Events",              price: "20+ nodes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/visual-representation-of-a-completed-aut-1772537128320-df40458c.png",              imageAlt: "Trigger nodes for webhooks, schedules, and events"
+            },
            {
-              id: "workflow-2",              name: "Lead Qualification",              price: "Convert 25% faster",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/marketing-automation-workflow-example-wi-1772537128514-218f9fa1.png",              imageAlt: "Lead qualification automation"},
+              id: "node-2",              name: "Data Transform",              price: "50+ nodes",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/marketing-automation-workflow-example-wi-1772537128514-218f9fa1.png",              imageAlt: "Data mapping and transformation nodes"
+            },
            {
-              id: "workflow-3",              name: "Data Synchronization",              price: "99.9% accuracy",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/close-up-of-a-drag-and-drop-automation-i-1772537128161-1f2021f9.png",              imageAlt: "Data sync workflow"},
+              id: "node-3",              name: "Integrations",              price: "400+ apps",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/close-up-of-a-drag-and-drop-automation-i-1772537128161-1f2021f9.png",              imageAlt: "Integration nodes for external services"
+            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
@@ -118,22 +127,22 @@ export default function LandingPage() {

      <div id="metrics" data-section="metrics">
        <MetricCardOne
-          title="Proven Impact"
-          description="Real results from teams using Ranavo to streamline their operations."
-          tag="Our Metrics"
+          title="Canvas Performance"
+          description="Lightning-fast canvas rendering and workflow execution at scale."
+          tag="Metrics"
          tagIcon={TrendingUp}
          metrics={[
            {
-              id: "metric-1",              value: "10",              title: "hours saved/week",              description: "Average time freed up per team member",              icon: Clock,
+              id: "metric-1",              value: "60fps",              title: "Canvas Rendering",              description: "Smooth panning and zooming even with 1000+ nodes",              icon: Clock,
            },
            {
-              id: "metric-2",              value: "95",              title: "%",              description: "Error reduction in automated processes",              icon: CheckCircle,
+              id: "metric-2",              value: "<50ms",              title: "Node Response",              description: "Instant feedback when dragging and connecting nodes",              icon: CheckCircle,
            },
            {
-              id: "metric-3",              value: "5000",              title: "+",              description: "Active workflows running daily",              icon: Zap,
+              id: "metric-3",              value: "500+",              title: "Library Nodes",              description: "Pre-built components covering all use cases",              icon: Zap,
            },
            {
-              id: "metric-4",              value: "99",              title: ".9%",              description: "Platform uptime guarantee",              icon: Shield,
+              id: "metric-4",              value: "99.9%",              title: "Uptime",              description: "Enterprise-grade reliability and redundancy",              icon: Shield,
            },
          ]}
          gridVariant="uniform-all-items-equal"
@@ -147,14 +156,14 @@ export default function LandingPage() {

      <div id="benefits" data-section="benefits">
        <TestimonialAboutCard
-          tag="Why Choose Ranavo"
+          tag="Why Canvas Workspace"
          tagIcon={Star}
-          title="Designed for non-technical teams. Built for enterprise reliability."
-          description="Sarah Johnson"
-          subdescription="Marketing Manager, TechFlow Inc."
+          title="Designed for creators. Built for power users and teams."
+          description="Alex Martinez"
+          subdescription="Automation Engineer, CloudTech Solutions"
          icon={Heart}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-marketing-man-1772537127350-6e14ece9.png"
-          imageAlt="Sarah Johnson, Marketing Manager"
+          imageAlt="Alex Martinez, Automation Engineer"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          tagAnimation="slide-up"
@@ -163,22 +172,28 @@ export default function LandingPage() {

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
-          testimonial="Ranavo transformed how we manage our marketing operations. What used to take hours now happens automatically. Our team is finally focused on strategy instead of repetitive tasks."
+          testimonial="The canvas workspace completely transformed how we build automations. The infinite space gives us room to think visually. What used to take hours in confusing nested menus now happens intuitively on the canvas. Our entire team loves it."
          rating={5}
-          author="Michael Chen, Operations Director"
+          author="Jordan Lee, Workflow Architect"
          avatars={[
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-an-operations-c-1772537129593-7347d882.png",              alt: "Michael Chen"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-an-operations-c-1772537129593-7347d882.png",              alt: "Jordan Lee"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-small-busines-1772537128069-c97de08f.png",              alt: "Emma Rodriguez"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-small-busines-1772537128069-c97de08f.png",              alt: "Sam Chen"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-workflow-cons-1772537128645-3b2d5dc1.png",              alt: "James Wilson"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-workflow-cons-1772537128645-3b2d5dc1.png",              alt: "Taylor Kim"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-marketing-man-1772537127350-6e14ece9.png",              alt: "Sarah Johnson"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-marketing-man-1772537127350-6e14ece9.png",              alt: "Morgan Davis"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-an-operations-c-1772537129593-7347d882.png",              alt: "Michael Chen"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-an-operations-c-1772537129593-7347d882.png",              alt: "Casey Brown"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-small-busines-1772537128069-c97de08f.png",              alt: "Emma Rodriguez"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/professional-headshot-of-a-small-busines-1772537128069-c97de08f.png",              alt: "Riley White"
+            },
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
@@ -188,21 +203,27 @@ export default function LandingPage() {

      <div id="faq" data-section="faq">
        <FaqSplitText
-          sideTitle="Got Questions?"
-          sideDescription="Everything you need to know about Ranavo automation platform."
+          sideTitle="Canvas Workspace Questions"
+          sideDescription="Everything you need to know about building, managing, and collaborating on workflows."
          faqs={[
            {
-              id: "faq-1",              title: "Do I need technical skills to use Ranavo?",              content: "No! Ranavo is specifically designed for non-technical users. Our drag-and-drop interface makes it easy to build workflows without any coding knowledge. We provide templates and pre-built blocks for common automation scenarios."},
+              id: "faq-1",              title: "How many nodes can I have on one canvas?",              content: "The canvas is truly unlimited. We've tested with 10,000+ nodes and maintain 60fps performance. There's no hard limit—scale as needed for your complex workflows."
+            },
            {
-              id: "faq-2",              title: "What integrations are available?",              content: "Ranavo integrates with 1000+ applications including email platforms, CRMs, databases, project management tools, and more. If your tool has an API, we can connect it. Custom API integration is available for enterprise users."},
+              id: "faq-2",              title: "Can I save and reuse workflow templates?",              content: "Yes! Save any workflow as a template. Templates can be private, shared with your team, or published to the community library. All templates are versioned and updateable."
+            },
            {
-              id: "faq-3",              title: "How quickly can I set up my first automation?",              content: "Most users build their first workflow in under 5 minutes using templates. Complex workflows typically take 15-30 minutes to set up properly. Our learning resources and templates help you get started quickly."},
+              id: "faq-3",              title: "How do I debug workflows on the canvas?",              content: "Use our integrated test runner. Click 'Run Test' to execute your workflow with sample data. See real-time results, step-by-step execution, error messages, and data flowing through each node."
+            },
            {
-              id: "faq-4",              title: "Is my data secure?",              content: "Yes. We use bank-level encryption, are SOC 2 certified, and comply with GDPR and CCPA regulations. All data is stored securely and backed up regularly. We never access your data without permission."},
+              id: "faq-4",              title: "Can multiple people edit the same workflow?",              content: "Absolutely. Real-time collaborative editing is built-in. See cursors, changes, and comments from teammates instantly. Full version history tracks all changes with timestamps and authors."
+            },
            {
-              id: "faq-5",              title: "What support options are available?",              content: "We offer email support for all plans, live chat for Pro and Enterprise plans, and dedicated support specialists for Enterprise customers. Response times range from 4 hours to real-time depending on your plan."},
+              id: "faq-5",              title: "How do I organize many workflows?",              content: "Organize via folders, tags, and custom categories. Search across all workflows by name, tag, or node type. Favorite workflows for quick access. Pin to workspace for quick reference."
+            },
            {
-              id: "faq-6",              title: "Can I scale workflows as my business grows?",              content: "Absolutely. Ranavo scales with your business. Start with simple automations and gradually add complexity. Enterprise plans support unlimited workflows and integrations with priority performance."}
+              id: "faq-6",              title: "What happens when I publish a workflow?",              content: "Publishing moves your workflow to production. It gets a permanent URL, webhook triggers, and becomes scheduled if configured. Roll back to previous versions anytime without affecting production."
+            }
          ]}
          textPosition="left"
          faqsAnimation="slide-up"
@@ -215,16 +236,16 @@ export default function LandingPage() {
        <ContactSplit
          tag="Get Started"
          tagIcon={Send}
-          title="Ready to automate your workflow?"
-          description="Join thousands of teams transforming their operations with Ranavo. Start your free trial today—no credit card required."
+          title="Start building with Canvas Workspace today"
+          description="Join thousands of automation creators. Launch your workspace in minutes. Full access to node library, real-time collaboration, and all canvas features."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQtzpeecrkIz9JK9B354EU83cj/inspirational-image-of-a-professional-te-1772537128400-cf0407b5.png"
-          imageAlt="Team collaborating on automation workflows"
+          imageAlt="Team collaborating on the Ranavo canvas workspace"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your work email"
-          buttonText="Start Free Trial"
+          buttonText="Launch Canvas"
          termsText="We respect your privacy. Unsubscribe anytime. Check our privacy policy."
          tagAnimation="slide-up"
        />
@@ -235,8 +256,8 @@ export default function LandingPage() {
          columns={[
            {
              title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Integrations", href: "#" },
+                { label: "Canvas Workspace", href: "#features" },
+                { label: "Node Library", href: "#workflow" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" },
              ],
@@ -244,9 +265,9 @@ export default function LandingPage() {
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
-                { label: "Blog", href: "#" },
-                { label: "Templates", href: "#" },
+                { label: "Tutorials", href: "#" },
                { label: "Community", href: "#" },
+                { label: "Blog", href: "#" },
              ],
            },
            {
@@ -259,7 +280,7 @@ export default function LandingPage() {
            },
          ]}
          logoText="Ranavo"
-          copyrightText="© 2025 Ranavo. All rights reserved."
+          copyrightText="© 2025 Ranavo Canvas. All rights reserved."
        />
      </div>
    </ThemeProvider>
--- a/src/app/projects/page.tsx
+++ 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<Project[]>([
+    {
+      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<Project | null>(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 (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="medium"
+      background="noise"
+      cardStyle="glass-depth"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "How It Works", id: "workflow" },
+            { name: "Projects", id: "/projects" },
+            { name: "Resources", id: "resources" },
+            { name: "Contact", id: "contact" },
+          ]}
+          brandName="Ranavo"
+          bottomLeftText="Automation for Everyone"
+          bottomRightText="hello@ranavo.app"
+        />
+      </div>
+
+      <div id="projects-hero" data-section="projects-hero" className="py-20">
+        <HeroLogoBillboard
+          logoText="Your Projects"
+          description="Manage and edit your automation workflows. Select a project to view the canvas, manage nodes, and collaborate with your team."
+          buttons={[
+            { text: "Create New Project", href: "#" },
+            { text: "Back to Home", href: "/" },
+          ]}
+          background={{ variant: "plain" }}
+          mediaAnimation="none"
+          frameStyle="card"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="projects-workspace" data-section="projects-workspace" className="py-12">
+        <div className="w-full max-w-full px-4 md:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 h-screen">
+            {/* Projects List Sidebar */}
+            <div className="lg:col-span-1 bg-card rounded-lg p-4 border border-foreground/10 overflow-y-auto">
+              <h3 className="text-lg font-semibold mb-4 text-foreground">Projects</h3>
+              <div className="space-y-2">
+                {projects.map((project) => (
+                  <button
+                    key={project.id}
+                    onClick={() => setSelectedProject(project)}
+                    className={`w-full text-left p-3 rounded-md transition-colors ${
+                      selectedProject?.id === project.id
+                        ? 'bg-primary-cta text-primary-cta-text'
+                        : 'bg-background/50 text-foreground hover:bg-background/70'
+                    }`}
+                  >
+                    <div className="font-medium text-sm">{project.name}</div>
+                    <div className="text-xs mt-1 opacity-75">{project.description}</div>
+                    <div className="text-xs mt-2 opacity-60">{project.createdAt}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Canvas Area */}
+            <div className="lg:col-span-3 bg-background rounded-lg border border-foreground/10 relative overflow-hidden">
+              {selectedProject ? (
+                <>
+                  {/* Canvas Header */}
+                  <div className="absolute top-0 left-0 right-0 bg-card border-b border-foreground/10 p-4 z-10">
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <h2 className="text-2xl font-bold text-foreground">{selectedProject.name}</h2>
+                        <p className="text-sm text-foreground/60 mt-1">{selectedProject.description}</p>
+                      </div>
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => handleZoom('in')}
+                          className="px-3 py-1 bg-primary-cta text-primary-cta-text rounded text-sm hover:opacity-90"
+                        >
+                          +
+                        </button>
+                        <span className="px-3 py-1 text-foreground text-sm">{Math.round(canvasZoom * 100)}%</span>
+                        <button
+                          onClick={() => handleZoom('out')}
+                          className="px-3 py-1 bg-primary-cta text-primary-cta-text rounded text-sm hover:opacity-90"
+                        >
+                          −
+                        </button>
+                        <button
+                          onClick={() => {
+                            setCanvasZoom(1);
+                            setPanX(0);
+                            setPanY(0);
+                          }}
+                          className="px-3 py-1 bg-secondary-cta text-secondary-cta-text rounded text-sm hover:opacity-90 ml-2"
+                        >
+                          Reset
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Canvas SVG */}
+                  <svg
+                    className="w-full h-full mt-24"
+                    onMouseMove={(e) => {
+                      if (e.buttons === 4) {
+                        handlePan(e.movementX, e.movementY);
+                      }
+                    }}
+                  >
+                    {/* Grid Background */}
+                    <defs>
+                      <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                        <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.1" />
+                      </pattern>
+                    </defs>
+                    <rect width="100%" height="100%" fill="url(#grid)" />
+
+                    {/* Connections (Lines) */}
+                    <g transform={`translate(${panX}, ${panY}) scale(${canvasZoom})`}>
+                      {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 (
+                          <line
+                            key={conn.id}
+                            x1={sourceNode.x + 50}
+                            y1={sourceNode.y + 25}
+                            x2={targetNode.x + 50}
+                            y2={targetNode.y + 25}
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            opacity="0.5"
+                          />
+                        );
+                      })}
+
+                      {/* Nodes */}
+                      {selectedProject.nodes.map((node) => (
+                        <g key={node.id}>
+                          <rect
+                            x={node.x}
+                            y={node.y}
+                            width="100"
+                            height="50"
+                            className={`${nodeTypeColors[node.type] || 'bg-gray-500'} cursor-move`}
+                            rx="4"
+                            fill={nodeTypeColors[node.type] || '#6b7280'}
+                            opacity="0.8"
+                          />
+                          <text
+                            x={node.x + 50}
+                            y={node.y + 30}
+                            textAnchor="middle"
+                            fill="white"
+                            fontSize="12"
+                            fontWeight="500"
+                          >
+                            {node.label}
+                          </text>
+                        </g>
+                      ))}
+                    </g>
+                  </svg>
+
+                  {/* Canvas Footer */}
+                  <div className="absolute bottom-0 left-0 right-0 bg-card border-t border-foreground/10 p-4 text-xs text-foreground/60">
+                    <div className="flex justify-between items-center">
+                      <div>Nodes: {selectedProject.nodes.length} | Connections: {selectedProject.connections.length}</div>
+                      <div className="flex gap-4">
+                        <div className="flex items-center gap-2">
+                          <div className="w-3 h-3 bg-blue-500 rounded"></div>
+                          <span>Trigger</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-3 h-3 bg-green-500 rounded"></div>
+                          <span>Action</span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <div className="w-3 h-3 bg-purple-500 rounded"></div>
+                          <span>Transform</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="flex items-center justify-center h-full text-foreground/50">
+                  Select a project to view
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Canvas Workspace", href: "#features" },
+                { label: "Node Library", href: "#workflow" },
+                { label: "Pricing", href: "#" },
+                { label: "Security", href: "#" },
+              ],
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Community", href: "#" },
+                { label: "Blog", href: "#" },
+              ],
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Status", href: "#" },
+              ],
+            },
+          ]}
+          logoText="Ranavo"
+          copyrightText="© 2025 Ranavo Canvas. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
Author	SHA1	Message	Date
bender	4f84c2b0da	Merge version_3 into main Merge version_3 into main	2026-03-03 12:00:45 +00:00
bender	3afdc6609f	Add src/app/projects/page.tsx	2026-03-03 12:00:41 +00:00
bender	c0e1747800	Update src/app/page.tsx	2026-03-03 12:00:41 +00:00
bender	7a1652a28c	Merge version_2 into main Merge version_2 into main	2026-03-03 11:51:15 +00:00
bender	5ac71e3a0b	Update src/app/page.tsx	2026-03-03 11:51:09 +00:00
bender	95efb1ecea	Merge version_2 into main Merge version_2 into main	2026-03-03 11:46:58 +00:00
bender	6bec957563	Update src/app/page.tsx	2026-03-03 11:46:53 +00:00
bender	70ebceec4d	Update src/app/layout.tsx	2026-03-03 11:46:53 +00:00
bender	b55737ee56	Merge version_1 into main Merge version_1 into main	2026-03-03 11:27:01 +00:00