https://bonix.ai/build/assets/FlowStudio-l5iqy_rS.js

1import{j as e,L as x}from"./vendor-react-02x1MS4z.js";import{F as m,C as p}from"./CTABanner-C7hp4MdP.js";import{S as h,M as u,a as g,R as i,T as f}from"./TiltCard-ByUmKVzW.js";import{V as n,C as b}from"./CountUp-5u3X28Wi.js";import{d as j,bp as l,ax as o,A as y,Y as d,f as v,c1 as c,I as w,V as N,q as S,bN as z,aN as k,c8 as C}from"./vendor-ui-P97rU9xr.js";import"./vendor-utils-pckgCPjB.js";import"./PublicFooter-DMMv2Fc9.js";import"./Button-AdjnD5yR.js";import"./Utils-Bqxwsp5S.js";import"./mobileBridge-Dd73hFlm.js";import"./DropdownMenu-NMk2_YDG.js";import"./Select-BRETMQI6.js";import"./UseTranslation-BH6izuP_.js";import"./index-BgxKkXi5.js";import"./BonixLogo-c8J8YQbC.js";const a={grad:"linear-gradient(90deg,#2dd4bf,#14b8a6,#34d399,#22d3ee,#2dd4bf)",text:"text-teal-300",chip:"bg-teal-400/10 text-teal-200 border-teal-400/30",border:"border-teal-400/30",hoverBorder:"hover:border-teal-400/50",glow:"bg-teal-500/25",dot:"bg-teal-400"},T=[{icon:d,title:"Six node types",copy:"Image, Video, Audio, Smart Resize, Comment, and Sticker nodes — each with its own model picks, references, and parameters."},{icon:o,title:"Connected pipelines",copy:"Wire outputs into the next node. Generate an image, drive it into a video, then smart-resize it for every platform — as one graph."},{icon:v,title:"Save, reuse, automate",copy:"Flows persist server-side with autosave, recent history, and six ready-made templates for the patterns you run most."}],A=["Cinematic Shorts / Reels Creator","Multi-Platform Variant Tester","Competitive AI Style Matrix","Dynamic Character Scene Entry","Multi-Frame Interpolator","Audio-Reactive Canvas"],R=[{n:"01",title:"Drop nodes",copy:"Drag Image, Video, Audio, and Smart Resize nodes onto an infinite canvas with undo, redo, and copy/paste."},{n:"02",title:"Connect outputs",copy:"Link one node into the next — first-frame, last-frame, references, and personas all wire through edges."},{n:"03",title:"Configure each node",copy:"Set models, aspect ratios, durations, voices, and resize modes per node."},{n:"04",title:"Run & reuse",copy:"Execute the graph, recover creations back to their nodes, and save the flow to run again."}],I=["Image node","Video node","Audio node","Smart Resize node","Comment","Sticker","First-frame & last-frame refs","Seedance generate / extend / edit","TTS + music audio","Outpainting","Smart crop","Blur padding","Static expansion","Persona binding","Library import","Undo / redo","Copy / paste","Keyboard shortcuts","6 built-in templates","Autosave flows"],E=[{to:6,suffix:"",label:"Node types"},{to:6,suffix:"",label:"Built-in templates"},{to:4,suffix:"",label:"Resize modes"},{to:20,suffix:"",label:"Recent flows saved"}],F=["Image","Video","Audio","Smart Resize","Persona","First-frame","Last-frame","TTS","Music","Templates"];function M(){const s=["Image","Video","Audio","Resize","Sticker"];return e.jsxs("div",{className:"relative rounded-2xl border border-zinc-800 bg-zinc-950/70 p-5 shadow-2xl backdrop-blur",children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[e.jsx("span",{className:"text-xs font-medium text-zinc-400",children:"flow · content-pipeline.json"}),e.jsx("span",{className:"rounded-full bg-teal-400/10 px-2 py-0.5 text-[10px] font-semibold text-teal-300",children:"3 nodes"})]}),e.jsxs("div",{className:"flex gap-3",children:[e.jsx("div",{className:"flex w-16 flex-col gap-1.5",children:s.map(t=>e.jsx("div",{className:"rounded-md border border-zinc-800 bg-zinc-900/70 px-2 py-1.5 text-center text-[9px] text-zinc-400",children:t},t))}),e.jsx(l.div,{initial:{opacity:0}

1,animate:{opacity:1},transition:{delay:.4},className:"relative min-h-[170px] flex-1 rounded-lg border border-zinc-800 bg-zinc-900/40",children:e.jsxs("svg",{viewBox:"0 0 120 80",className:"absolute inset-0 h-full w-full",preserveAspectRatio:"none",children:[e.jsx("path",{d:"M34,24 C42,24 40,14 50,14",fill:"none",stroke:"#2dd4bf55",strokeWidth:"0.8"}),e.jsx("path",{d:"M76,14 C84,14 82,52 92,52",fill:"none",stroke:"#2dd4bf55",strokeWidth:"0.8"}),[{x:8,y:20,label:"Image"},{x:50,y:10,label:"Video"},{x:92,y:48,label:"Resize",glow:!0}].map(t=>e.jsxs("g",{children:[t.glow&&e.jsx("rect",{x:t.x-1.5,y:t.y-1.5,width:"29",height:"11",rx:"2",fill:"#2dd4bf",opacity:"0.18"}),e.jsx("rect",{x:t.x,y:t.y,width:"26",height:"8",rx:"1.5",fill:"#09090b",stroke:"#2dd4bf",strokeWidth:"0.5"}),e.jsx("circle",{cx:t.x+2.5,cy:t.y+4,r:"0.9",fill:"#2dd4bf"}),e.jsx("text",{x:t.x+7,y:t.y+5.2,fill:"#99f6e4",fontSize:"3.6",children:t.label})]},t.label))]})})]})]})}function $(){return e.jsxs("section",{className:"relative overflow-hidden px-6 pb-16 pt-10 sm:pt-14",children:[e.jsx("div",{className:"cw-grain"}),e.jsx(n,{effect:"topology",options:{color:3003583,backgroundColor:328970},intensity:.35}),e.jsx("div",{className:"cw-float pointer-events-none absolute -top-20 right-[8%] h-72 w-72 rounded-full bg-teal-500/15 blur-[110px]"}),e.jsx("div",{className:"cw-float pointer-events-none absolute bottom-0 left-[6%] h-72 w-72 rounded-full bg-emerald-500/10 blur-[110px]",style:{animationDelay:"2s"}}),e.jsxs("div",{className:"relative mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-2",children:[e.jsxs("div",{className:"text-center lg:text-left",children:[e.jsxs(l.span,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:.5},className:`inline-flex items-center gap-2 rounded-full border bg-white/5 px-4 py-1.5 text-xs font-medium text-zinc-300 backdrop-blur ${a.border}`,children:[e.jsx(o,{className:`h-3.5 w-3.5 ${a.text}`})," Flow Studio"]}),e.jsxs(l.h1,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.6,delay:.05},className:"cw-display mt-5 text-4xl font-extrabold leading-[1.05] tracking-tight text-white sm:text-6xl",children:["Wire your workflow on a ",e.jsx("span",{className:"cw-gradient-text",children:"visual canvas."})]}),e.jsx(l.p,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.6,delay:.15},className:"mx-auto mt-5 max-w-xl text-lg leading-relaxed text-zinc-400 lg:mx-0",children:"Compose models, tools, and logic into connected pipelines that run themselves. Six node types, six templates, and an infinite drag-and-drop graph — turn your best process into a button."}),e.jsxs(l.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.6,delay:.25},className:"mt-8 flex flex-wrap items-center justify-center gap-4 lg:justify-start",children:[e.jsxs(g,{href:route("register"),className:"inline-flex items-center gap-2 rounded-full bg-white px-7 py-3.5 text-sm font-semibold text-black transition-colors hover:bg-zinc-100",children:["Start building ",e.jsx(y,{className:"h-4 w-4"})]}),e.jsx(x,{href:route("creative-workflow.index"),className:"inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-7 py-3.5 text-sm font-semibold text-white backdrop-blur transition-colors hover:bg-white/10",children:"See the workflow"})]})]}),e.jsxs(l.div,{initial:{opacity:0,scale:.92},animate:{opacity:1,scale:1},transition:{duration:.7,delay:.3},className:"relative",children:[e.jsx("div",{className:`pointer-events-none absolute -inset-6 rounded-full ${a.glow} blur-3xl opacity-50`}),e.jsx("div",{className:"relative",children:e.jsx(M,{})})]})]})]})}function B(){return e.jsx("section",{className:"relative px-6 py-20",children:e.jsxs("div",{className:"mx-auto max-w-7xl",children:[e.jsxs(i,{className:"mx-auto mb-12 max-w-2xl text-center",children:[e.jsx("h2",{className:"cw-display text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl",children:"A graph, not a queue."}),e.jsx("p",{className:"mt-4 text-lg text-zinc-400",children:"Each node is a step; each edge hands work to the next."})]}),e.jsx("div",{className:"grid grid-cols-1 gap-6 md:grid-cols-3",children:T.map((s,t)=>{const r=s.icon;return e.jsx(i,{delay:t*.1,children:e.jsxs(f,{className:`h-full rounded-3xl border border-white/10 bg-zinc-950/60 p-7 backdrop-blur ${a.hoverBorder}`,children:[e.jsx("span",{className:`relative grid h-12 w-12 place-items-center rounded-2xl border bg-white/5 ${a.chip} ${a.border}`,children:e.jsx(r,{className:"h-6 w-6"})}),e.jsx("h3",{className:"cw-display mt-5 text-xl font-bold text-white",children:s.title}),e.jsx("p",{className:"mt-2 text-sm leading-relaxed text-zinc-400",children:s.copy})]})},s.title)})})]})})}function V(){const s=[{icon:w,name:"Image",copy:"Generate or edit, references, persona binding."},{icon:N,name:"Video",copy:"First & last frame, Seedance generate/extend/edit."},{icon:S,name:"Audio",copy:"Upload, TTS voices, or prompt + lyrics music."},{icon:z,name:"Smart Resize",copy:"Outpaint, smart crop, blur & static padding."}];return e.jsx("section",{className:"relative px-6 py-20",children:e.jsxs("div",{className:"mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 lg:grid-cols-2",children:[e.jsxs(i,{children:[e.jsxs("span",{className:`inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold ${a.chip}`,children:[e.jsx(c,{className:"h-3.5 w-3.5"})," The node library"]}),e.jsx("h3",{className:"cw-display mt-5 text-3xl font-bold tracking-tight text-white sm:text-4xl",children:"Six templates, infinite pipelines."}),e.jsx("p",{className:"mt-4 text-lg leading-relaxed text-zinc-400",children:"Start from a built-in template or a blank canvas. Every node exposes real parameters — references, models, durations, and resize modes — so a saved flow is a repeatable process, not a one-off."}),e.jsx("ul",{className:"mt-6 space-y-3",children:["Drag-and-drop with undo, redo, copy/paste, and shortcuts","Outputs chain: image → video → smart resize","Recover creations back onto their nodes","Six ready-made pipeline templates"].map(t=>e.jsxs("li",{className:"flex items-start gap-3 text-zinc-200",children:[e.jsx("span",{className:`mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${a.dot}`}),t]},t))})]}),e.jsx(i,{delay:.1,children:e.jsxs("div",{className:"relative overflow-hidden rounded-3xl border border-zinc-800 bg-zinc-950/60 p-7",children:[e.jsx(n,{effect:"waves",options:{color:3003583,backgroundColor:328970,waveHeight:16,waveSpeed:.7},intensity:.3}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/60 to-transparent"}),e.jsxs("div",{className:"relative",children:[e.jsx("p",{className:"mb-3 text-xs font-medium uppercase tracking-wide text-zinc-500",children:"Node types"}),e.jsx("div",{className:"mb-6 grid grid-cols-2 gap-2",children:s.map(t=>{const r=t.icon;return e.jsxs("div",{className:"rounded-lg border border-white/10 bg-white/5 p-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(r,{className:`h-4 w-4 ${a.text}`}),e.jsx("span",{className:"text-sm font-semibold text-white",children:t.name})]}),e.jsx("p",{className:"mt-1 text-[11px] leading-snug text-zinc-400",children:t.copy})]},t.name)}

1)}),e.jsx("p",{className:"mb-3 text-xs font-medium uppercase tracking-wide text-zinc-500",children:"Templates"}),e.jsx("div",{className:"flex flex-wrap gap-2",children:A.map(t=>e.jsx("span",{className:`rounded-full border bg-white/5 px-3 py-1 text-[11px] ${a.chip}`,children:t},t))})]})]})})]})})}function L(){return e.jsx("section",{className:"relative px-6 py-20",children:e.jsxs("div",{className:"mx-auto max-w-7xl",children:[e.jsxs(i,{className:"mx-auto mb-12 max-w-2xl text-center",children:[e.jsx("h2",{className:"cw-display text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl",children:"Drop, connect, run."}),e.jsx("p",{className:"mt-4 text-lg text-zinc-400",children:"Four moves from empty canvas to reusable pipeline."})]}),e.jsx("div",{className:"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4",children:R.map((s,t)=>e.jsx(i,{delay:t*.1,children:e.jsxs("div",{className:"relative h-full rounded-3xl border border-white/10 bg-zinc-950/60 p-7",children:[e.jsx("span",{className:`cw-display text-4xl font-extrabold ${a.text}`,children:s.n}),e.jsx("h3",{className:"mt-3 text-lg font-bold text-white",children:s.title}),e.jsx("p",{className:"mt-2 text-sm leading-relaxed text-zinc-400",children:s.copy})]})},s.n))})]})})}function D(){const s=[k,C,c,d];return e.jsx("section",{className:"relative px-6 py-20",children:e.jsxs("div",{className:"mx-auto max-w-5xl",children:[e.jsxs(i,{className:"mb-10 text-center",children:[e.jsx("h2",{className:"cw-display text-3xl font-bold tracking-tight text-white sm:text-4xl",children:"The full canvas."}),e.jsx("p",{className:"mt-3 text-zinc-400",children:"Every node, parameter, and shortcut Flow Studio ships with."})]}),e.jsx(i,{delay:.1,children:e.jsx("div",{className:"flex flex-wrap justify-center gap-2.5",children:I.map(t=>e.jsx("span",{className:`rounded-full border bg-white/5 px-4 py-2 text-sm text-zinc-200 backdrop-blur ${a.border}`,children:t},t))})}),e.jsx("div",{className:"mt-10 grid grid-cols-2 gap-4 sm:grid-cols-4",children:s.map((t,r)=>e.jsx(i,{delay:r*.08,children:e.jsxs("div",{className:`flex flex-col items-center gap-2 rounded-2xl border border-white/10 bg-zinc-950/50 p-5 text-center ${a.hoverBorder}`,children:[e.jsx(t,{className:`h-6 w-6 ${a.text}`}),e.jsx("span",{className:"text-xs text-zinc-400",children:["Seedance ops","Comments & stickers","Persona binding","Server-side autosave"][r]})]})},r))})]})})}function P(){return e.jsxs("section",{className:"relative overflow-hidden px-6 py-20",children:[e.jsx("div",{className:"pointer-events-none absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-gradient-to-r from-transparent via-teal-500/30 to-transparent"}),e.jsx("div",{className:"relative mx-auto grid max-w-5xl grid-cols-2 gap-8 md:grid-cols-4",children:E.map(s=>e.jsxs(i,{className:"text-center",children:[e.jsx("div",{className:"cw-display cw-gradient-text text-5xl font-extrabold sm:text-6xl",children:e.jsx(b,{to:s.to,suffix:s.suffix})}),e.jsx("div",{className:"mt-2 text-sm text-zinc-500",children:s.label})]},s.label))})]})}function se({auth:s}){return e.jsxs(m,{auth:s,title:"Flow Studio — visual AI workflow builder",description:"Compose models, tools, and logic into connected pipelines on a drag-and-drop canvas. Six node types, six templates, and server-side autosave.",effect:"topology",effectOptions:{color:3003583,backgroundColor:328970},children:[e.jsx(h,{}),e.jsxs("div",{style:{"--cw-grad":a.grad},children:[e.jsx($,{}),e.jsx(B,{}),e.jsx(V,{}),e.jsx(L,{}),e.jsx(D,{}),e.jsx(P,{}),e.jsx(u,{items:F,className:"border-y border-white/5 py-7",itemClassName:"cw-display mx-7 inline-flex items-center gap-7 text-2xl font-bold text-zinc-700 sm:text-3xl",separator:e.jsx(j,{className:"h-4 w-4 text-teal-500/40"})}),e.jsx(p,{title:"Build it once. Run it forever.",subtitle:"Turn your repeatable creative process into a visual pipeline you can trigger on demand.",buttonText:"Start building",buttonHref:route("register"),color:"purple",footerText:"No credit card required to start."})]})]})}export{se as default};