https://build-loop.ai/static-v2/FreeBuildPage-B1jnw4tb.js

1import{r as y,j as e,m as B,A as z}from"./framer-P158-lAu.js";import{F as o}from"./freeBuild-C8k2V4cA.js";import{f as q,t as c,af as T,ag as P,z as A,ah as Q,E as V,a4 as w,C as S,ai as X,A as _,a3 as Z}from"./index-CQxemhqR.js";import{C as ee,a as te}from"./cloud-UIGvxFeG.js";import{D as se}from"./database-BRPjeRJT.js";import{A as L}from"./arrow-left-COHpRQnJ.js";import{D as ae}from"./download-Dxz0_Rq9.js";import{E as le}from"./external-link-tIe_ePh5.js";import{C as re}from"./copy-BpMiKZ7R.js";import"./editor-2W2zRBqy.js";import"./charts-DYsw7EWd.js";import"./stripe-DGX1U5hG.js";/*! BuildLoop build 2026-05-22 cache-bust */const t={ink:"#0F121A",steel:"#343E5B",card:"#FFFFFF",border:"rgba(15,18,26,0.08)",textPrimary:"#0F121A",textSecondary:"#5A6068",textLabel:"#9099A1",lime:"#CFFF05",limeText:"#5c6b00",codeBg:"#0F121A",codeText:"rgba(233,236,237,0.92)",cardShadow:"0 1px 3px rgba(15,18,26,0.04), 0 8px 24px rgba(15,18,26,0.04)"},p="'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace",u=12,r=0,D="free_build_path",I="free_path_step",$="free_build_done_steps",C="free_path_stages";function F(d){try{return localStorage.getItem(d)}catch{return null}}function K(d,l){try{return JSON.parse(F(d)||"")}catch{return l}}function ie({text:d,label:l="Copy",onCopied:b,dark:n=!1}){const[x,h]=y.useState(!1),v=async()=>{try{await navigator.clipboard.writeText(d),h(!0),b==null||b(),setTimeout(()=>h(!1),1800)}catch{}};return e.jsxs("button",{onClick:v,className:"inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold uppercase tracking-[0.08em] transition-colors shrink-0",style:n?{background:x?t.lime:"rgba(255,255,255,0.08)",color:x?t.ink:"rgba(233,236,237,0.75)",border:`1px solid ${x?t.lime:"rgba(255,255,255,0.12)"}`,borderRadius:r,fontFamily:p}:{background:x?t.lime:"rgba(15,18,26,0.04)",color:x?t.ink:t.textSecondary,border:`1px solid ${x?t.lime:t.border}`,borderRadius:r,fontFamily:p},children:[x?e.jsx(te,{className:"w-3.5 h-3.5"}):e.jsx(re,{className:"w-3.5 h-3.5"}),x?"Copied":l]})}function N({label:d,text:l,onCopied:b}){return e.jsxs("div",{className:"overflow-hidden",style:{border:`1px solid ${t.border}`,borderRadius:u},children:[e.jsxs("div",{className:"flex items-center justify-between px-3 py-2",style:{background:"#F4F5F6"},children:[e.jsx("span",{className:"text-[10px] font-bold uppercase tracking-[0.14em]",style:{color:t.textLabel,fontFamily:p},children:d}),e.jsx(ie,{text:l,onCopied:b})]}),e.jsx("pre",{className:"text-[13px] leading-relaxed px-4 py-3 overflow-x-auto whitespace-pre-wrap",style:{background:t.codeBg,color:t.codeText,fontFamily:p},children:l})]})}function O({guide:d,onCmdCopied:l,onDocs:b}){return e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] leading-relaxed mb-6",style:{color:t.textSecondary,maxWidth:"60ch"},children:d.intro}),e.jsx("div",{className:"space-y-4",children:d.steps.map((n,x)=>e.jsxs("div",{className:"flex items-start gap-3.5",children:[e.jsx("div",{className:"shrink-0 w-6 h-6 flex items-center justify-center text-[11px] font-black italic",style:{background:t.ink,color:t.lime,borderRadius:r},children:x+1}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("div",{className:"font-bold text-[14px] mb-0.5",style:{color:t.textPrimary},children:n.title}),e.jsx("p",{className:"text-[13px] leading-relaxed",style:{color:t.textSecondary},children:n.body}),n.commands&&e.jsx("div",{className:"mt-2.5 space-y-1.5",children:n.commands.map(h=>e.jsx(N,{label:h.os,text:h.cmd,onCopied:()=>l==null?void 0:l(h.os)},h.os))})]})]},x))}),e.jsxs("a",{href:d.docsUrl,target:"_blank",rel:"noopener noreferrer",onClick:b,className:"inline-flex items-center gap-1.5 mt-6 px-3.5 py-2 text-xs font-bold uppercase tracking-[0.08em]",style:{background:"rgba(15,18,26,0.04)",color:t.textPrimary,border:`1px solid ${t.border}`,borderRadius:r,fontFamily:p},children:[d.docsLabel," ",e.jsx(le,{className:"w-3.5 h-3.5"})]})]})}const fe=()=>{const d=q(),[l,b]=y.useState(()=>{const s=F(D);return s==="lovable"||s==="claude-code"?s:"claude-code"}),[n,x]=y.useState(()=>{const s=parseInt(F(I)||"0",10);return!Number.isNaN(s)&&s>=0&&s<8?s:0}),[h,v]=y.useState(()=>K($,{})),[W,R]=y.useState(()=>K(C,{}

1)),g=[{key:"path",title:"Choose how you build",icon:T},{key:"cloud",title:l==="claude-code"?"Set up Claude Code":"Set up Lovable",icon:ee},{key:"kit",title:"Get your Starter Kit",icon:P},{key:"backend",title:"Own your backend",icon:se},{key:"idea",title:"Find what to build",icon:A},{key:"build",title:"Build it",icon:Q},{key:"client",title:"Get your first client",icon:V},{key:"done",title:"You're set",icon:w}],f=g.length;y.useEffect(()=>{document.title="Your build path · BuildLoop",c("free_path_opened",{build:o.id})},[]);const k=y.useCallback(s=>{const a=Math.max(0,Math.min(f-1,s));x(a),localStorage.setItem(I,String(a)),window.scrollTo({top:0,behavior:"smooth"}),c("free_path_step_view",{build:o.id,step:g[a].key})},[f]),Y=s=>{R(a=>{const i={...a,[s]:!0};return localStorage.setItem(C,JSON.stringify(i)),i}),k(n+1)},J=s=>{b(s),localStorage.setItem(D,s),c("free_build_path_selected",{build:o.id,path:s}),R(a=>{const i={...a,path:!0};return localStorage.setItem(C,JSON.stringify(i)),i}),k(n+1)},M=y.useCallback(s=>{v(a=>{const i={...a,[s]:!a[s]};return localStorage.setItem($,JSON.stringify(i)),c("free_build_step_toggled",{build:o.id,stepId:s}),i})},[]),G=()=>{c("free_build_shipped",{build:o.id,path:l}),d("/app/walkthrough-complete")},m=g[n],H=o.steps.filter(s=>h[s.id]).length,E=Math.round(n/(f-1)*100);return e.jsxs("div",{children:[e.jsx("div",{className:"mb-5",children:e.jsxs("button",{onClick:()=>d("/app"),className:"inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-[0.16em] transition-opacity hover:opacity-70",style:{color:t.textSecondary,fontFamily:p},children:[e.jsx(L,{className:"w-3.5 h-3.5"})," Back to dashboard"]})}),e.jsxs("div",{className:"inline-flex items-center gap-2 px-3.5 py-1.5 mb-4 text-[11px] font-bold uppercase tracking-[0.2em]",style:{background:t.ink,color:"#E9ECED",borderRadius:r,fontFamily:p},children:[e.jsx("span",{style:{width:6,height:6,background:t.lime,flex:"0 0 auto"}})," Your free path"]}),e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsxs("span",{className:"text-[11px] font-bold uppercase tracking-[0.16em]",style:{color:t.textLabel,fontFamily:p},children:["Step ",n+1," of ",f]}),e.jsxs("span",{className:"text-xs font-black italic tabular-nums",style:{color:t.textPrimary},children:[E,"%"]})]}),e.jsx("div",{className:"h-1.5 overflow-hidden mb-4",style:{background:"rgba(15,18,26,0.07)",borderRadius:r},children:e.jsx(B.div,{className:"h-full",style:{background:t.lime,borderRadius:r},animate:{width:`${E}%`},transition:{duration:.4}})}),e.jsx("div",{className:"flex items-center gap-2 mb-7 overflow-x-auto pb-1",children:g.map((s,a)=>{const i=!!W[s.key]||s.key==="build"&&H>=o.steps.length,j=a===n,U=s.icon;return e.jsx("button",{onClick:()=>k(a),title:s.title,className:"shrink-0 w-9 h-9 flex items-center justify-center transition-all",style:{background:j?t.ink:i?t.lime:t.card,color:j?t.lime:i?t.ink:t.textLabel,border:`1px solid ${j?t.ink:i?t.lime:t.border}`,borderRadius:r},children:i&&!j?e.jsx(S,{className:"w-4 h-4"}):e.jsx(U,{className:"w-4 h-4"})},s.key)})}),e.jsx("h1",{className:"font-black tracking-tight mb-5",style:{color:t.textPrimary,fontSize:"clamp(1.7rem, 4.5vw, 2.6rem)",letterSpacing:"-1px",lineHeight:1.05},children:m.title}),e.jsx(z,{mode:"wait",children:e.jsx(B.div,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},exit:{opacity:0,y:-6},transition:{duration:.25},children:e.jsxs("div",{className:"p-6 md:p-8",style:{background:t.card,border:`1px solid ${t.border}`,boxShadow:t.cardShadow,borderRadius:u},children:[m.key==="path"&&e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] leading-relaxed mb-6",style:{color:t.textSecondary,maxWidth:"56ch"},children:"This path takes you from nothing to a real app you can sell — set up your tools, build something, then land your first client. First, pick how you'll build. You can switch later."}),e.jsx("div",{className:"grid sm:grid-cols-2 gap-3",children:o.paths.map(s=>{const a=s.id===l,i=s.id==="claude-code"?X:T;return e.jsxs("button",{onClick:()=>J(s.id),className:"text-left p-5 transition-all relative",style:{background:a?"rgba(207,255,5,0.10)":"#FAFBFB",border:`1.5px solid ${a?t.lime:t.border}`,borderRadius:u},children:[s.recommended&&e.jsx("span",{className:"absolute top-4 right-4 px-2 py-0.5 text-[9px] font-bold uppercase tracking-[0.16em]",style:{background:t.ink,color:t.lime,borderRadius:r,fontFamily:p},children:"Recommended"}),e.jsxs("div",{className:"flex items-center gap-2.5 mb-2",children:[e.jsx("div",{className:"w-9 h-9 flex items-center justify-center",style:{background:a?t.ink:"rgba(15,18,26,0.05)",border:`1px solid ${a?t.ink:t.border}`,borderRadius:r},children:e.jsx(i,{className:"w-4 h-4",style:{color:a?t.lime:t.textSecondary}})}),e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[15px]",style:{color:t.textPrimary},children:s.label}),e.jsx("div",{className:"text-[11px]",style:{color:t.textLabel},children:s.time})]})]}),e.jsx("div",{className:"text-xs font-semibold mb-1.5",style:{color:a?t.limeText:t.textSecondary},children:s.tagline}),e.jsx("p",{className:"text-xs leading-relaxed",style:{color:t.textSecondary},children:s.bestFor})]},s.id)})})]}),m.key==="cloud"&&e.jsx(O,{guide:o.setup[l],onCmdCopied:s=>c("free_build_setup_cmd_copied",{path:l,os:s}),onDocs:()=>c("free_build_setup_docs_clicked",{path:l})}),m.key==="kit"&&(l==="claude-code"?e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] leading-relaxed mb-5",style:{color:t.textSecondary,maxWidth:"58ch"},children:"Grab the free Starter Kit. You don't open or edit any of it — you hand the folder to Claude and it sets everything up. This is what makes Claude build the right thing instead of guessing."}),e.jsxs("div",{className:"p-5 mb-5",style:{background:t.ink,border:`1px solid ${t.ink}`,borderRadius:u},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(P,{className:"w-4 h-4",style:{color:t.lime}}),e.jsx("span",{className:"font-bold text-[15px]",style:{color:"#E9ECED"},children:"BuildLoop Starter Kit"})]}),e.jsx("ul",{className:"space-y-2 mb-5",children:o.starterKit.whatsInside.map(s=>e.jsxs("li",{className:"flex items-start gap-2 text-[13px]",style:{color:"rgba(233,236,237,0.75)"},children:[e.jsx(S,{className:"w-4 h-4 shrink-0 mt-0.5",style:{color:t.lime}})," ",s]},s))}),e.jsxs("span",{className:"relative inline-flex",children:[e.jsx("span",{"aria-hidden":!0,

1className:"absolute inset-0",style:{background:t.steel,transform:"translate(5px,5px)",borderRadius:r}}),e.jsxs("a",{href:o.starterKit.downloadPath,download:!0,onClick:()=>c("free_starter_kit_downloaded",{build:o.id}),className:"relative inline-flex items-center gap-2 h-12 px-6 text-sm font-bold uppercase tracking-[0.04em]",style:{background:t.lime,color:t.ink,borderRadius:r},children:[e.jsx(ae,{className:"w-4 h-4"})," Download the Starter Kit (free)"]})]})]}),e.jsx("p",{className:"text-[13px] font-bold mb-2",style:{color:t.textPrimary},children:"Then, in Claude Code, drag the folder in and say:"}),e.jsx(N,{label:"Say to Claude Code",text:o.starterKit.installPrompt,onCopied:()=>c("free_starter_kit_prompt_copied")}),e.jsxs("p",{className:"text-xs mt-3 leading-relaxed",style:{color:t.textSecondary},children:[e.jsx("span",{style:{color:t.limeText,fontWeight:700},children:"That's the whole idea: "}),"you never touch these files. Claude installs them and uses them in the background."]})]}):e.jsx("p",{className:"text-[15px] leading-relaxed",style:{color:t.textSecondary,maxWidth:"58ch"},children:"Lovable builds in your browser, so there's nothing to install here — you're good to go. (The Starter Kit is a Claude Code thing. If you switch to Claude Code later, come back for it.)"})),m.key==="backend"&&e.jsxs("div",{children:[l==="lovable"&&e.jsx("p",{className:"text-xs italic mb-4 px-3 py-2",style:{color:t.textSecondary,background:"rgba(15,18,26,0.03)",border:`1px solid ${t.border}`,borderRadius:u},children:"Optional for now — Lovable Cloud already gives you a backend. Come back here when a client wants to own their data."}),e.jsx(O,{guide:o.setupSupabase,onCmdCopied:s=>c("free_build_supabase_cmd_copied",{os:s}),onDocs:()=>c("free_build_supabase_docs_clicked")})]}),m.key==="idea"&&e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] leading-relaxed mb-5",style:{color:t.textSecondary,maxWidth:"58ch"},children:"The best first build is something you can picture a real person paying for. The AI Idea Finder asks you a few questions, researches demand and competitors, and hands you a validated idea — yours to build. Already know what you want to make? Just continue."}),e.jsxs("span",{className:"relative inline-flex",children:[e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{background:t.ink,transform:"translate(5px,5px)",borderRadius:r}}),e.jsxs("button",{onClick:()=>{c("free_path_idea_finder_clicked"),d("/app/tools/idea-finder")},className:"relative inline-flex items-center gap-2 h-12 px-6 text-sm font-bold uppercase tracking-[0.04em]",style:{background:t.lime,color:t.ink,borderRadius:r},children:[e.jsx(A,{className:"w-4 h-4"})," Open the Idea Finder ",e.jsx(_,{className:"w-4 h-4"})]})]})]}),m.key==="build"&&e.jsxs("div",{children:[e.jsxs("div",{className:"p-4 mb-5",style:{background:"rgba(207,255,5,0.10)",border:"1px solid rgba(207,255,5,0.4)",borderRadius:u},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx(w,{className:"w-4 h-4",style:{color:t.limeText}}),e.jsxs("span",{className:"text-[13px] font-bold",style:{color:t.textPrimary},children:["Build your idea — example: ",o.title]})]}),e.jsxs("p",{className:"text-xs leading-relaxed",style:{color:t.textSecondary},children:[o.whoBuysIt," Building something else? Swap in your own idea — the steps are the same."]})]}),l==="claude-code"&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"mb-4 relative overflow-hidden",style:{background:t.ink,borderRadius:u},children:e.jsxs("div",{className:"p-5",children:[e.jsxs("span",{className:"inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.2em] mb-3",style:{color:"#E9ECED",fontFamily:p},children:[e.jsx("span",{style:{width:7,height:7,background:t.lime,flex:"0 0 auto"}})," Fastest path · one Claude Code skill"]}),e.jsx("p",{className:"text-sm leading-relaxed mb-4",style:{color:"#B5BFC2",maxWidth:"62ch"},children:o.claudeSkill.intro}),e.jsx(N,{label:"Paste once into Claude Code",text:o.claudeSkill.prompt,onCopied:()=>c("free_build_skill_copied",{path:l})})]})}),e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"flex-1 h-px",style:{background:t.border}}),e.jsx("span",{className:"text-[11px] font-bold uppercase tracking-[0.16em]",style:{color:t.textLabel,fontFamily:p},children:"Or go one step at a time"}),e.jsx("div",{className:"flex-1 h-px",style:{background:t.border}})]})]}),e.jsx("div",{className:"space-y-3",children:o.steps.map(s=>{const a=l==="claude-code"?s.claudeCode:s.lovable,i=!!h[s.id];return e.jsx("div",{className:"p-4",style:{background:i?"rgba(207,255,5,0.07)":"#FAFBFB",border:`1px solid ${i?"rgba(207,255,5,0.4)":t.border}`,borderRadius:u},children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx("button",{onClick:()=>M(s.id),className:"shrink-0 w-7 h-7 flex items-center justify-center font-black italic text-xs transition-all",style:{background:i?t.lime:t.ink,color:i?t.ink:t.lime,border:"none",borderRadius:r},children:i?e.jsx(S,{className:"w-3.5 h-3.5"}):s.number}),e.jsxs("div",{className:"min-w-0 flex-1",children:[e.jsx("h4",{className:"font-bold text-[14px] leading-snug",style:{color:t.textPrimary},children:s.title}),e.jsxs("p",{className:"text-xs mt-0.5 mb-3 flex items-center gap-1.5",style:{color:t.textLabel},children:[e.jsx(Z,{className:"w-3 h-3 shrink-0",style:{color:t.limeText}})," ",s.goal]}),a.context&&e.jsx("p",{className:"text-xs italic mb-2 px-3 py-2",style:{color:t.textSecondary,background:"rgba(15,18,26,0.03)",border:`1px solid ${t.border}`,borderRadius:u},children:a.context}),e.jsx(N,{label:l==="claude-code"?"Say to Claude Code":"Paste into Lovable",text:a.prompt,onCopied:()=>c("free_build_prompt_copied",{stepId:s.id,path:l})}),a.note&&e.jsxs("p",{className:"text-xs mt-2.5 leading-relaxed",style:{color:t.textSecondary},children:[e.jsx("span",{style:{color:t.limeText,fontWeight:700},children:"Why: "}),a.note]})]})]})},s.id)})})]}),m.key==="client"&&e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] leading-relaxed mb-6",style:{color:t.textSecondary,maxWidth:"56ch"},children:o.firstClient.intro}),e.jsx("div",{className:"space-y-3",children:o.firstClient.steps.map(s=>e.jsxs("div",{className:"flex items-start gap-4 p-4",style:{background:"#FAFBFB",border:`1px solid ${t.border}`,borderRadius:u},children:[e.jsx("div",{className:"shrink-0 w-8 h-8 flex items-center justify-center font-black italic text-sm",style:{background:t.ink,color:t.lime,borderRadius:r},children:s.number}),e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[15px] mb-0.5",style:{color:t.textPrimary},children:s.title}),e.jsx("p",{className:"text-xs leading-relaxed",style:{color:t.textSecondary},children:s.body})]})]},s.number))})]}),m.key==="done"&&e.jsxs("div",{className:"text-center py-4",children:[e.jsxs("span",{className:"relative inline-flex mb-5",children:[e.jsx("span",{"aria-hidden":!0,

1className:"absolute inset-0",style:{background:t.ink,transform:"translate(5px,5px)",borderRadius:r}}),e.jsx("span",{className:"relative inline-flex items-center justify-center w-16 h-16",style:{background:t.lime,borderRadius:r},children:e.jsx(w,{className:"w-8 h-8",style:{color:t.ink}})})]}),e.jsx("p",{className:"text-base md:text-lg leading-relaxed mx-auto mb-7",style:{color:t.textSecondary,maxWidth:"44ch"},children:"You set up your tools, built something real, and you've got the playbook to get paid. That's further than almost anyone gets. Here's what's next."}),e.jsxs("span",{className:"relative inline-flex",children:[e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{background:t.ink,transform:"translate(5px,5px)",borderRadius:r}}),e.jsxs("button",{onClick:G,className:"relative inline-flex items-center justify-center gap-2 h-14 px-9 text-base font-bold uppercase tracking-[0.04em] transition-transform hover:-translate-y-0.5",style:{background:t.lime,color:t.ink,borderRadius:r},children:["See what's next ",e.jsx(_,{className:"w-5 h-5"})]})]}),e.jsx("p",{className:"text-[11px] mt-4",style:{color:t.textLabel},children:"5 more builds + the 30-day path to your first client."})]})]})},m.key)}),m.key!=="done"&&e.jsxs("div",{className:"flex items-center justify-between mt-6",children:[e.jsxs("span",{className:"relative inline-flex",children:[e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{background:t.ink,transform:"translate(5px,5px)",borderRadius:r,opacity:n===0?0:1}}),e.jsxs("button",{onClick:()=>k(n-1),disabled:n===0,className:"relative inline-flex items-center gap-1.5 h-11 px-4 text-sm font-bold uppercase tracking-[0.04em] transition-opacity disabled:opacity-40",style:{color:t.textPrimary,background:t.card,border:`2px solid ${t.ink}`,borderRadius:r},children:[e.jsx(L,{className:"w-4 h-4"})," Back"]})]}),e.jsxs("span",{className:"relative inline-flex",children:[e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{background:t.ink,transform:"translate(5px,5px)",borderRadius:r}}),e.jsxs("button",{onClick:()=>Y(m.key),className:"relative inline-flex items-center gap-2 h-12 px-7 text-sm font-bold uppercase tracking-[0.04em] transition-transform hover:-translate-y-0.5",style:{background:t.lime,color:t.ink,borderRadius:r},children:[n===0?"Start":"Continue"," ",e.jsx(_,{className:"w-4 h-4"})]})]})]})]})};export{fe as default};