https://raga.ai/assets/CanvasPage-CpThNVVi.js

1import{j as e}from"./vendor-three-Dwfi3Wi5.js";import{P as o,p as n}from"./seo-C1PmB8Pr.js";import{H as c,F as d}from"./Footer-C2VxDAfJ.js";import{m as i}from"./vendor-motion-D2hLPT_k.js";import{B as x,j as r,P as l,C as m,ab as h,ac as p,ad as y,ae as u,Z as f}from"./vendor-ui-zANcIcn7.js";import"./vendor-react-CyXtxb-1.js";import"./index-BMVsb3Up.js";const g=()=>e.jsxs("svg",{viewBox:"0 0 500 400",className:"w-full h-full",children:[e.jsxs("defs",{children:[e.jsxs("linearGradient",{id:"canvasGradient",x1:"0%",y1:"0%",x2:"100%",y2:"100%",children:[e.jsx("stop",{offset:"0%",stopColor:"hsl(217 91% 60%)"}),e.jsx("stop",{offset:"100%",stopColor:"hsl(263 70% 50%)"})]}),e.jsxs("radialGradient",{id:"canvasGlow",children:[e.jsx("stop",{offset:"0%",stopColor:"hsl(217 91% 60% / 0.4)"}),e.jsx("stop",{offset:"100%",stopColor:"transparent"})]})]}),e.jsx(i.circle,{cx:"250",cy:"200",r:"180",fill:"url(#canvasGlow)",animate:{scale:[1,1.1,1],opacity:[.3,.5,.3]},transition:{duration:4,repeat:1/0}}),[...Array(8)].map((t,s)=>e.jsx(i.line,{x1:100+s*50,y1:"50",x2:100+s*50,y2:"350",stroke:"hsl(217 91% 60% / 0.1)",strokeWidth:"1"},`v-${s}`)),[...Array(7)].map((t,s)=>e.jsx(i.line,{x1:"80",y1:50+s*50,x2:"420",y2:50+s*50,stroke:"hsl(217 91% 60% / 0.1)",strokeWidth:"1"},`h-${s}`)),[{x:120,y:100,label:"Input",type:"start"},{x:250,y:100,label:"LLM",type:"process"},{x:380,y:100,label:"Parse",type:"process"},{x:120,y:200,label:"Memory",type:"data"},{x:250,y:200,label:"Agent",type:"agent"},{x:380,y:200,label:"Tools",type:"tools"},{x:185,y:300,label:"Validate",type:"check"},{x:315,y:300,label:"Output",type:"end"}].map((t,s)=>e.jsxs(i.g,{children:[e.jsx(i.rect,{x:t.x-40,y:t.y-25,width:"80",height:"50",rx:"8",fill:t.type==="agent"?"url(#canvasGradient)":t.type==="start"||t.type==="end"?"hsl(160 84% 39% / 0.3)":"hsl(222 47% 15%)",stroke:t.type==="agent"?"hsl(217 91% 60%)":t.type==="start"||t.type==="end"?"hsl(160 84% 39%)":"hsl(217 91% 60% / 0.5)",strokeWidth:"2",animate:t.type==="agent"?{scale:[1,1.02,1]}:{},transition:{duration:2,repeat:1/0},style:{transformOrigin:`${t.x}px ${t.y}px`}}),e.jsx("text",{x:t.x,y:t.y+5,fontSize:"11",fill:"white",textAnchor:"middle",fontWeight:"500",children:t.label})]},s)),[{x1:160,y1:100,x2:210,y2:100},{x1:290,y1:100,x2:340,y2:100},{x1:120,y1:125,x2:120,y2:175},{x1:160,y1:200,x2:210,y2:200},{x1:290,y1:200,x2:340,y2:200},{x1:250,y1:125,x2:250,y2:175},{x1:210,y1:200,x2:185,y2:275},{x1:290,y1:200,x2:315,y2:275},{x1:225,y1:300,x2:275,y2:300}].map((t,s)=>e.jsxs(i.g,{children:[e.jsx("line",{x1:t.x1,y1:t.y1,x2:t.x2,y2:t.y2,stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"2"}),e.jsx(i.circle,{cx:t.x1,cy:t.y1,r:"4",fill:"hsl(217 91% 60%)",animate:{cx:[t.x1,t.x2],cy:[t.y1,t.y2]},transition:{duration:1.5,delay:s*.2,repeat:1/0,repeatDelay:2}})]},s)),e.jsxs(i.g,{animate:{x:[0,10,0],opacity:[.5,1,.5]},transition:{duration:2,repeat:1/0},children:[e.jsx("rect",{x:"30",y:"320",width:"60",height:"40",rx:"6",fill:"hsl(222 47% 11%)",stroke:"hsl(217 91% 60% / 0.3)",strokeWidth:"1",strokeDasharray:"4 2"}),e.jsx("text",{x:"60",y:"345",fontSize:"9",fill:"hsl(217 91% 60%)",textAnchor:"middle",children:"+ Node"})]}),e.jsxs(i.g,{animate:{y:[0,-3,0]},transition:{duration:2,repeat:1/0},children:[e.jsx("rect",{x:"400",y:"280",width:"90",height:"55",rx:"8",fill:"hsl(222 47% 11%)",stroke:"hsl(160 84% 39% / 0.5)",strokeWidth:"2"}),e.jsx("text",{x:"445",y:"300",fontSize:"9",fill:"hsl(160 84% 39%)",textAnchor:"middle",fontWeight:"bold",children:"Status: Live"}),e.jsx("circle",{cx:"420",cy:"315",r:"4",fill:"hsl(160 84% 39%)",children:e.jsx("animate",{attributeName:"opacity",values:"1;0.3;1",dur:"1s",repeatCount:"indefinite"})}),e.jsx("text",{x:"445",y:"325",fontSize:"10",fill:"white",textAnchor:"middle",children:"Running"})]})]}),j=()=>e.jsxs("svg",{viewBox:"0 0 400 300",className:"w-full h-full",children:[e.jsx("rect",{x:"10",y:"10",width:"80",height:"280",rx:"8",fill:"hsl(222 47% 11%)",stroke:"hsl(217 91% 60% / 0.3)"}),["Agents","Flows","Tools","Tests","Deploy"].map((t,s)=>e.jsxs("g",{children:[e.jsx("rect",{x:"20",y:25+s*50,width:"60",height:"35",rx:"4",fill:s===1?"hsl(217 91% 60% / 0.2)":"transparent"}),e.jsx("text",{x:"50",y:47+s*50,fontSize:"9",fill:s===1?"hsl(217 91% 60%)":"hsl(215 20% 65%)",textAnchor:"middle",fontWeight:s===1?"bold":"normal",children:t})]},t)),e.jsx("rect",{x:"100",y:"10",width:"290",height:"200",rx:"8",fill:"hsl(222 47% 11%)",stroke:"hsl(217 91% 60% / 0.3)"}),[{x:150,y:60},{x:245,y:60},{x:340,y:60},{x:197,y:130},{x:292,y:130}].map((t,s)=>e.jsx(i.rect,{x:t.x-30,y:t.y-20,width:"60",height:"40",rx:"6",fill:s===2?"hsl(217 91% 60% / 0.3)":"hsl(222 47% 15%)",stroke:"hsl(217 91% 60% / 0.5)",strokeWidth:"1",initial:{opacity:0,scale:.8}

1,animate:{opacity:1,scale:1},transition:{delay:s*.1}},s)),e.jsx("line",{x1:"180",y1:"60",x2:"215",y2:"60",stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"1"}),e.jsx("line",{x1:"275",y1:"60",x2:"310",y2:"60",stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"1"}),e.jsx("line",{x1:"150",y1:"80",x2:"197",y2:"110",stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"1"}),e.jsx("line",{x1:"245",y1:"80",x2:"245",y2:"110",stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"1"}),e.jsx("line",{x1:"227",y1:"130",x2:"262",y2:"130",stroke:"hsl(217 91% 60% / 0.4)",strokeWidth:"1"}),e.jsx("rect",{x:"100",y:"220",width:"290",height:"70",rx:"8",fill:"hsl(222 47% 11%)",stroke:"hsl(217 91% 60% / 0.3)"}),e.jsx("text",{x:"115",y:"240",fontSize:"9",fill:"hsl(160 84% 39%)",fontWeight:"bold",children:"Console Output"}),[{text:"[OK] Agent initialized",color:"hsl(160 84% 39%)"},{text:"[OK] Tool: search connected",color:"hsl(160 84% 39%)"},{text:"[RUN] Processing input...",color:"hsl(217 91% 60%)"}].map((t,s)=>e.jsx(i.text,{x:"115",y:255+s*12,fontSize:"8",fill:t.color,fontFamily:"monospace",initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{delay:.5+s*.2},children:t.text},s))]}),w=[{icon:e.jsx(h,{className:"w-6 h-6"}),title:"Drag & Drop Builder",description:"Design complex agent workflows visually without writing boilerplate code."},{icon:e.jsx(p,{className:"w-6 h-6"}),title:"Low-Code Development",description:"Focus on logic, not infrastru

1cture. Write minimal code for maximum functionality."},{icon:e.jsx(l,{className:"w-6 h-6"}),title:"Live Testing",description:"Run tests in real-time as you build. See results instantly without deployment."},{icon:e.jsx(y,{className:"w-6 h-6"}),title:"Version Control",description:"Track changes, rollback mistakes, and collaborate with your team seamlessly."},{icon:e.jsx(u,{className:"w-6 h-6"}),title:"Framework Agnostic",description:"Works with any LLM framework - LangChain, LlamaIndex, CrewAI, and more."},{icon:e.jsx(f,{className:"w-6 h-6"}),title:"One-Click Deploy",description:"Deploy workflows to production with confidence using our managed infrastructure."}],b=[{value:"10x",label:"Faster Development"},{value:"50+",label:"Pre-built Nodes"},{value:"0",label:"Vendor Lock-in"},{value:"99.9%",label:"Uptime SLA"}],v=[{title:"Design Your Workflow",description:"Drag nodes from the palette and connect them to define your agent's logic."},{title:"Configure Components",description:"Set up LLM providers, tools, memory, and custom functions."},{title:"Test & Debug Live",description:"Run your workflow with test inputs and debug issues in real-time."},{title:"Deploy with Confidence",description:"Push to production with one click and monitor performance metrics."}],a={quote:"Canvas transformed how we build AI agents. What used to take weeks now takes hours. The visual debugging alone saves us countless hours of troubleshooting.",author:"Divya Sharma",role:"AI Platform Lead",organization:"TechScale AI"},S=()=>e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx(o,{...n.canvas}),e.jsx(c,{}),e.jsxs("section",{className:"relative pt-32 pb-20 overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-primary/20 via-primary/10 to-transparent opacity-50"}),e.jsxs("div",{className:"absolute inset-0",children:[e.jsx("div",{className:"absolute top-20 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl op

1acity-30"}),e.jsx("div",{className:"absolute bottom-0 right-1/4 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl opacity-20"})]}),e.jsx("div",{className:"relative container mx-auto px-6",children:e.jsxs("div",{className:"grid lg:grid-cols-2 gap-12 items-center",children:[e.jsxs(i.div,{initial:{opacity:0,x:-30},animate:{opacity:1,x:0},transition:{duration:.6},children:[e.jsxs(i.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{delay:.1},className:"inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border-primary/30 border mb-6",children:[e.jsx(x,{className:"w-4 h-4 text-primary"}),e.jsx("span",{className:"text-sm font-medium text-primary",children:"Agent Builder Platform"})]}),e.jsx(i.h1,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.2},className:"text-4xl md:text-5xl lg:text-6xl font-bold text-foreground mb-6 leading-tight",children:e.jsx("span",{className:"text-primary",children:"Canvas"})}),e.jsx(i.p,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.25},className:"text-2xl text-foreground/90 mb-4 font-semibold",children:"Build framework agnostic agents"}),e.jsx(i.p,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.3},className:"text-lg text-muted-foreground mb-8 max-w-lg",children:"Drag, drop and design agent workflow with low coding. Run live tests, debug instantly, and deploy workflows with confidence."}),e.jsxs(i.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.4},className:"flex flex-wrap gap-4",children:[e.jsxs(i.button,{whileHover:{scale:1.03},whileTap:{scale:.98},className:"px-8 py-4 rounded-full bg-primary text-white font-semibold flex items-center gap-2 shadow-lg shadow-primary/30",children:["Start Building",e.jsx(r,{className:"w-5 h-5"})]}),e.jsxs(i.button,{whileHover:{scale:1.03},whileTap:{scale:.98},className:"px-8 py-4 rounded-full border border-white/20 text-foreground font-semibold flex items-center gap-2 hover:bg-white/5",children:[e.jsx(l,{className:"w-5 h-5"}),"Watch Demo"]})]}),e.jsx(i.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{delay:.5},className:"flex gap-8 mt-12",children:b.slice(0,3).map((t,s)=>e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"text-3xl font-bold text-primary",children:t.value}),e.jsx("div",{className:"text-sm text-muted-foreground",children:t.label})]},s))})]}),e.jsxs(i.div,{initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{duration:.8,delay:.2},className:"relative",children:[e.jsx("div",{className:"absolute inset-0 bg-primary/10 rounded-3xl blur-3xl op

1acity-30"}),e.jsx("div",{className:"relative w-full h-[400px] lg:h-[500px]",children:e.jsx(g,{})})]})]})})]}),e.jsx("section",{className:"py-20 relative",children:e.jsxs("div",{className:"container mx-auto px-6",children:[e.jsxs(i.div,{initial:{opacity:0,y:20},whileInView:{opacity:1,y:0},viewport:{once:!0},className:"text-center mb-16",children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4",children:"Build Agents Your Way"}),e.jsx("p",{className:"text-lg text-muted-foreground max-w-2xl mx-auto",children:"Everything you need to design, test, and deploy production-ready AI agents"})]}),e.jsx("div",{className:"grid md:grid-cols-2 lg:grid-cols-3 gap-6",children:w.map((t,s)=>e.jsxs(i.div,{initial:{opacity:0,y:30},whileInView:{opacity:1,y:0},viewport:{once:!0},transition:{delay:s*.1},whileHover:{y:-5,scale:1.02},className:"p-6 rounded-2xl bg-card/60 backdrop-blur-sm border border-primary/30 hover:shadow-lg transition-all duration-300",children:[e.jsx("div",{className:"w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4",children:e.jsx("div",{className:"text-primary",children:t.icon})}),e.jsx("h3",{className:"text-lg font-semibold text-foreground mb-2",children:t.title}),e.jsx("p",{className:"text-sm text-muted-foreground",children:t.description})]},s))})]})}),e.jsx("section",{className:"py-20 relative bg-gradient-to-b from-primary/20 via-primary/10 to-transparent",children:e.jsx("div",{className:"container mx-auto px-6",children:e.jsxs("div",{className:"grid lg:grid-cols-2 gap-12 items-center",children:[e.jsxs(i.div,{initial:{opacity:0,x:-30},whileInView:{opacity:1,x:0},viewport:{once:!0},children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4",children:"See Canvas In Action"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-8",children:"Experience the visual workflow builder that teams love"}),e.jsx("div",{className:"space-y-6",children:v.map((t,s)=>e.jsxs(i.div,{initial:{opacity:0,x:-20},whileInView:{opacity:1,x:0},viewport:{once:!0},transition:{delay:s*.15},className:"flex gap-4",children:[e.jsx("div",{className:"flex-shrink-0 w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold",children:s+1}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-foreground mb-1",children:t.title}),e.jsx("p",{className:"text-sm text-muted-foreground",children:t.description})]})]},s))}),e.jsxs(i.button,{initial:{opacity:0}

1,whileInView:{opacity:1},viewport:{once:!0},transition:{delay:.5},whileHover:{scale:1.03},className:"mt-8 px-6 py-3 rounded-full bg-primary/10 text-primary font-semibold flex items-center gap-2 border border-primary/30",children:[e.jsx(l,{className:"w-4 h-4"}),"Try Interactive Demo"]})]}),e.jsx(i.div,{initial:{opacity:0,scale:.95},whileInView:{opacity:1,scale:1},viewport:{once:!0},className:"relative",children:e.jsxs("div",{className:"relative rounded-2xl bg-card/80 border border-white/10 p-6 backdrop-blur-sm overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4 pb-4 border-b border-white/10",children:[e.jsx("div",{className:"w-3 h-3 rounded-full bg-red-500/60"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-yellow-500/60"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-green-500/60"}),e.jsx("div",{className:"flex-1 ml-4 h-6 rounded-md bg-white/5 px-3 flex items-center",children:e.jsx("span",{className:"text-xs text-muted-foreground",children:"app.ragaai.dev/canvas"})})]}),e.jsx("div",{className:"h-[300px]",children:e.jsx(j,{})})]})})]})})}),e.jsx("section",{className:"py-20",children:e.jsx("div",{className:"container mx-auto px-6",children:e.jsxs(i.div,{initial:{opacity:0,y:30},whileInView:{opacity:1,y:0},viewport:{once:!0},className:"relative p-8 md:p-12 rounded-3xl bg-gradient-to-br from-primary/20 via-primary/10 to-transparent border border-primary/30 overflow-hidden",children:[e.jsx("div",{className:"absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl"}),e.jsxs("div",{className:"relative max-w-3xl mx-auto text-center",children:[e.jsx(i.div,{initial:{scale:0},whileInView:{scale:1},viewport:{once:!0},className:"w-16 h-16 mx-auto mb-6 rounded-full bg-primary/10 flex items-center justify-center",children:e.jsx(m,{className:"w-8 h-8 text-primary"})}),e.jsxs("blockquote",{className:"text-xl md:text-2xl text-foreground font-medium mb-8 leading-relaxed",children:['"',a.quote,'"']}),e.jsxs("div",{children:[e.jsx("div",{className:"font-semibold text-foreground",children:a.author}),e.jsxs("div",{className:"text-sm text-muted-foreground",children:[a.role,", ",a.organization]})]})]})]})})}),e.jsx("section",{className:"py-20",children:e.jsx("div",{className:"container mx-auto px-6",children:e.jsxs(i.div,{initial:{opacity:0,y:30},whileInView:{opacity:1,y:0},viewport:{once:!0},className:"text-center",children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4",children:"Ready to Build Smarter Agents?"}),e.jsx("p",{className:"text-lg text-muted-foreground mb-8 max-w-2xl mx-auto",children:"Join thousands of developers who trust Canvas for their AI agent development"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-4",children:e.jsxs(i.button,{whileHover:{scale:1.03},whileTap:{scale:.98},className:"px-8 py-4 rounded-full bg-primary text-white font-semibold flex items-center gap-2 shadow-lg shadow-primary/30",children:["Start Free Trial",e.jsx(r,{className:"w-5 h-5"})]})})]})})}),e.jsx(d,{})]});export{S as default};